From 9b8104dd468999806512a54a8916c0a03092c617 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Tue, 24 Oct 2023 12:51:57 +0200
Subject: [PATCH 01/20] feat(discover): enhance flyout customization to update
 content

---
 .../discover_grid_flyout.test.tsx             | 124 +++++++++++++-----
 .../discover_grid_flyout.tsx                  |  83 ++++++++----
 .../use_flyout_actions.tsx                    |  18 +--
 .../flyout_customization.ts                   |  17 +++
 4 files changed, 172 insertions(+), 70 deletions(-)

diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx
index d1ff933ecad8f5..b2d46022bd344a 100644
--- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx
+++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { findTestSubject } from '@elastic/eui/lib/test';
+import { EuiFlexItem } from '@elastic/eui';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import type { Query, AggregateQuery } from '@kbn/es-query';
 import { DiscoverGridFlyout, DiscoverGridFlyoutProps } from './discover_grid_flyout';
@@ -24,7 +25,6 @@ import { ReactWrapper } from 'enzyme';
 import { setUnifiedDocViewerServices } from '@kbn/unified-doc-viewer-plugin/public/plugin';
 import { mockUnifiedDocViewerServices } from '@kbn/unified-doc-viewer-plugin/public/__mocks__';
 import { FlyoutCustomization, useDiscoverCustomization } from '../../customizations';
-import { EuiFlexItem } from '@elastic/eui';
 
 const mockFlyoutCustomization: FlyoutCustomization = {
   id: 'flyout',
@@ -69,6 +69,9 @@ describe('Discover flyout', function () {
       },
       contextLocator: { getRedirectUrl: jest.fn(() => 'mock-context-redirect-url') },
       singleDocLocator: { getRedirectUrl: jest.fn(() => 'mock-doc-redirect-url') },
+      toastNotifications: {
+        addSuccess: jest.fn(),
+      },
     } as unknown as DiscoverServices;
     setUnifiedDocViewerServices(mockUnifiedDocViewerServices);
 
@@ -103,11 +106,12 @@ describe('Discover flyout', function () {
     const component = mountWithIntl(<Proxy {...props} />);
     await waitNextUpdate(component);
 
-    return { component, props };
+    return { component, props, services };
   };
 
   beforeEach(() => {
     mockFlyoutCustomization.actions.defaultActions = undefined;
+    mockFlyoutCustomization.Content = undefined;
     jest.clearAllMocks();
 
     (useDiscoverCustomization as jest.Mock).mockImplementation(() => mockFlyoutCustomization);
@@ -226,44 +230,98 @@ describe('Discover flyout', function () {
     expect(flyoutTitle.text()).toBe('Expanded row');
   });
 
-  describe('when customizations actions exists', () => {
-    it('should display actions added by getActionItems', async () => {
-      mockFlyoutCustomization.actions = {
-        getActionItems: jest.fn(() => [
-          {
-            id: 'action-item-1',
-            enabled: true,
-            Content: () => <EuiFlexItem data-test-subj="customActionItem1">Action 1</EuiFlexItem>,
-          },
-          {
-            id: 'action-item-2',
-            enabled: true,
-            Content: () => <EuiFlexItem data-test-subj="customActionItem2">Action 2</EuiFlexItem>,
+  describe('with applied customizations', () => {
+    describe('when actions are customized', () => {
+      it('should display actions added by getActionItems', async () => {
+        mockFlyoutCustomization.actions = {
+          getActionItems: jest.fn(() => [
+            {
+              id: 'action-item-1',
+              enabled: true,
+              Content: () => <EuiFlexItem data-test-subj="customActionItem1">Action 1</EuiFlexItem>,
+            },
+            {
+              id: 'action-item-2',
+              enabled: true,
+              Content: () => <EuiFlexItem data-test-subj="customActionItem2">Action 2</EuiFlexItem>,
+            },
+          ]),
+        };
+
+        const { component } = await mountComponent({});
+
+        const action1 = findTestSubject(component, 'customActionItem1');
+        const action2 = findTestSubject(component, 'customActionItem2');
+
+        expect(action1.text()).toBe('Action 1');
+        expect(action2.text()).toBe('Action 2');
+      });
+
+      it('should allow disabling default actions', async () => {
+        mockFlyoutCustomization.actions = {
+          defaultActions: {
+            viewSingleDocument: { disabled: true },
+            viewSurroundingDocument: { disabled: true },
           },
-        ]),
-      };
+        };
 
-      const { component } = await mountComponent({});
+        const { component } = await mountComponent({});
 
-      const action1 = findTestSubject(component, 'customActionItem1');
-      const action2 = findTestSubject(component, 'customActionItem2');
-
-      expect(action1.text()).toBe('Action 1');
-      expect(action2.text()).toBe('Action 2');
+        const singleDocumentView = findTestSubject(component, 'docTableRowAction');
+        expect(singleDocumentView.length).toBeFalsy();
+      });
     });
 
-    it('should allow disabling default actions', async () => {
-      mockFlyoutCustomization.actions = {
-        defaultActions: {
-          viewSingleDocument: { disabled: true },
-          viewSurroundingDocument: { disabled: true },
-        },
-      };
+    describe('when content is customized', () => {
+      it('should display the component passed to the Content customization', async () => {
+        mockFlyoutCustomization.Content = () => (
+          <span data-test-subj="flyoutCustomContent">Custom content</span>
+        );
+
+        const { component } = await mountComponent({});
+
+        const customContent = findTestSubject(component, 'flyoutCustomContent');
+
+        expect(customContent.text()).toBe('Custom content');
+      });
+
+      it('should provide a doc property to display details about the current document overview', async () => {
+        mockFlyoutCustomization.Content = ({ doc }) => {
+          return (
+            <span data-test-subj="flyoutCustomContent">{doc.flattened.message as string}</span>
+          );
+        };
+
+        const { component } = await mountComponent({});
+
+        const customContent = findTestSubject(component, 'flyoutCustomContent');
+
+        expect(customContent.text()).toBe('test1');
+      });
+
+      it('should provide an actions prop collection to optionally update the grid content', async () => {
+        mockFlyoutCustomization.Content = ({ actions }) => (
+          <>
+            <button data-test-subj="addColumn" onClick={() => actions.addColumn('message')} />
+            <button data-test-subj="removeColumn" onClick={() => actions.removeColumn('message')} />
+            <button
+              data-test-subj="setFilter"
+              onClick={() => actions.setFilter?.('_exists_', 'message', '+')}
+            />
+          </>
+        );
+
+        const { component, props, services } = await mountComponent({});
 
-      const { component } = await mountComponent({});
+        findTestSubject(component, 'addColumn').simulate('click');
+        findTestSubject(component, 'removeColumn').simulate('click');
+        findTestSubject(component, 'setFilter').simulate('click');
 
-      const singleDocumentView = findTestSubject(component, 'docTableRowAction');
-      expect(singleDocumentView.length).toBeFalsy();
+        expect(props.onAddColumn).toHaveBeenCalled();
+        expect(props.onRemoveColumn).toHaveBeenCalled();
+        expect(services.toastNotifications.addSuccess).toHaveBeenCalledTimes(2);
+        expect(props.onFilter).toHaveBeenCalled();
+      });
     });
   });
 });
diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
index e837ed6fbfa2af..efc7a6b68f5f37 100644
--- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
+++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
@@ -28,6 +28,7 @@ import { UnifiedDocViewer } from '@kbn/unified-doc-viewer-plugin/public';
 import { useDiscoverServices } from '../../hooks/use_discover_services';
 import { isTextBasedQuery } from '../../application/main/utils/is_text_based_query';
 import { useFlyoutActions } from './use_flyout_actions';
+import { useDiscoverCustomization } from '../../customizations';
 
 export interface DiscoverGridFlyoutProps {
   savedSearchId?: string;
@@ -69,6 +70,8 @@ export function DiscoverGridFlyout({
   setExpandedDoc,
 }: DiscoverGridFlyoutProps) {
   const services = useDiscoverServices();
+  const flyoutCustomization = useDiscoverCustomization('flyout');
+
   const isPlainRecord = isTextBasedQuery(query);
   // Get actual hit with updated highlighted searches
   const actualHit = useMemo(() => hits?.find(({ id }) => id === hit?.id) || hit, [hit, hits]);
@@ -103,6 +106,7 @@ export function DiscoverGridFlyout({
   );
 
   const { flyoutActions } = useFlyoutActions({
+    actions: flyoutCustomization?.actions,
     dataView,
     rowIndex: hit.raw._index,
     rowId: hit.raw._id,
@@ -111,6 +115,55 @@ export function DiscoverGridFlyout({
     savedSearchId,
   });
 
+  const addColumn = (columnName: string) => {
+    onAddColumn(columnName);
+    services.toastNotifications.addSuccess(
+      i18n.translate('discover.grid.flyout.toastColumnAdded', {
+        defaultMessage: `Column '{columnName}' was added`,
+        values: { columnName },
+      })
+    );
+  };
+
+  const removeColumn = (columnName: string) => {
+    onRemoveColumn(columnName);
+    services.toastNotifications.addSuccess(
+      i18n.translate('discover.grid.flyout.toastColumnRemoved', {
+        defaultMessage: `Column '{columnName}' was removed`,
+        values: { columnName },
+      })
+    );
+  };
+
+  const renderDefaultContent = () => (
+    <UnifiedDocViewer
+      columns={columns}
+      columnTypes={columnTypes}
+      dataView={dataView}
+      filter={onFilter}
+      hit={actualHit}
+      onAddColumn={addColumn}
+      onRemoveColumn={removeColumn}
+      textBasedHits={isPlainRecord ? hits : undefined}
+    />
+  );
+
+  const contentActions = {
+    setFilter: onFilter,
+    addColumn,
+    removeColumn,
+  };
+
+  const bodyContent = flyoutCustomization?.Content ? (
+    <flyoutCustomization.Content
+      actions={contentActions}
+      doc={actualHit}
+      renderDefaultContent={renderDefaultContent}
+    />
+  ) : (
+    renderDefaultContent()
+  );
+
   return (
     <EuiPortal>
       <EuiFlyout
@@ -136,7 +189,6 @@ export function DiscoverGridFlyout({
                   })}
             </h2>
           </EuiTitle>
-
           <EuiSpacer size="s" />
           <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
             {!isPlainRecord &&
@@ -158,34 +210,7 @@ export function DiscoverGridFlyout({
             )}
           </EuiFlexGroup>
         </EuiFlyoutHeader>
-        <EuiFlyoutBody>
-          <UnifiedDocViewer
-            hit={actualHit}
-            columns={columns}
-            columnTypes={columnTypes}
-            dataView={dataView}
-            filter={onFilter}
-            onRemoveColumn={(columnName: string) => {
-              onRemoveColumn(columnName);
-              services.toastNotifications.addSuccess(
-                i18n.translate('discover.grid.flyout.toastColumnRemoved', {
-                  defaultMessage: `Column '{columnName}' was removed`,
-                  values: { columnName },
-                })
-              );
-            }}
-            onAddColumn={(columnName: string) => {
-              onAddColumn(columnName);
-              services.toastNotifications.addSuccess(
-                i18n.translate('discover.grid.flyout.toastColumnAdded', {
-                  defaultMessage: `Column '{columnName}' was added`,
-                  values: { columnName },
-                })
-              );
-            }}
-            textBasedHits={isPlainRecord ? hits : undefined}
-          />
-        </EuiFlyoutBody>
+        <EuiFlyoutBody>{bodyContent}</EuiFlyoutBody>
       </EuiFlyout>
     </EuiPortal>
   );
diff --git a/src/plugins/discover/public/components/discover_grid_flyout/use_flyout_actions.tsx b/src/plugins/discover/public/components/discover_grid_flyout/use_flyout_actions.tsx
index 0dc9485b42a406..fb364995b1c215 100644
--- a/src/plugins/discover/public/components/discover_grid_flyout/use_flyout_actions.tsx
+++ b/src/plugins/discover/public/components/discover_grid_flyout/use_flyout_actions.tsx
@@ -16,9 +16,13 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useDiscoverCustomization } from '../../customizations';
+import { FlyoutCustomization } from '../../customizations';
 import { UseNavigationProps, useNavigationProps } from '../../hooks/use_navigation_props';
 
+interface UseFlyoutActionsParams extends UseNavigationProps {
+  actions?: FlyoutCustomization['actions'];
+}
+
 interface FlyoutActionProps {
   onClick: React.MouseEventHandler<Element>;
   href: string;
@@ -30,18 +34,16 @@ const staticViewDocumentItem = {
   Content: () => <ViewDocument />,
 };
 
-export const useFlyoutActions = (navigationProps: UseNavigationProps) => {
-  const { dataView } = navigationProps;
+export const useFlyoutActions = ({ actions, ...props }: UseFlyoutActionsParams) => {
+  const { dataView } = props;
   const { singleDocHref, contextViewHref, onOpenSingleDoc, onOpenContextView } =
-    useNavigationProps(navigationProps);
-
-  const flyoutCustomization = useDiscoverCustomization('flyout');
+    useNavigationProps(props);
 
   const {
     viewSingleDocument = { disabled: false },
     viewSurroundingDocument = { disabled: false },
-  } = flyoutCustomization?.actions?.defaultActions ?? {};
-  const customActions = [...(flyoutCustomization?.actions?.getActionItems?.() ?? [])];
+  } = actions?.defaultActions ?? {};
+  const customActions = [...(actions?.getActionItems?.() ?? [])];
 
   const flyoutActions = [
     {
diff --git a/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts b/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts
index 6ec0fe9dec60a8..a4974521b8fda5 100644
--- a/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts
+++ b/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts
@@ -6,6 +6,10 @@
  * Side Public License, v 1.
  */
 
+import { DataTableRecord } from '@kbn/discover-utils/types';
+import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
+import React, { ComponentType } from 'react';
+
 export interface FlyoutDefaultActionItem {
   disabled?: boolean;
 }
@@ -21,10 +25,23 @@ export interface FlyoutActionItem {
   enabled: boolean;
 }
 
+export interface FlyoutContentActions {
+  setFilter?: DocViewFilterFn;
+  addColumn: (column: string) => void;
+  removeColumn: (column: string) => void;
+}
+
+export interface FlyoutContentProps {
+  actions: FlyoutContentActions;
+  doc: DataTableRecord;
+  renderDefaultContent: () => React.ReactNode;
+}
+
 export interface FlyoutCustomization {
   id: 'flyout';
   actions: {
     defaultActions?: FlyoutDefaultActions;
     getActionItems?: () => FlyoutActionItem[];
   };
+  Content?: ComponentType<FlyoutContentProps>;
 }

From e48d26a52b1e5daa3e5673534e1f892d3972f25d Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Wed, 25 Oct 2023 10:08:11 +0200
Subject: [PATCH 02/20] refactor(discover): add request changes

---
 .../discover_grid_flyout.tsx                  | 90 ++++++++++++-------
 .../flyout_customization.ts                   |  8 +-
 tsconfig.base.json                            |  2 +-
 3 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
index efc7a6b68f5f37..d8c218efba23ae 100644
--- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
+++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
@@ -115,44 +115,66 @@ export function DiscoverGridFlyout({
     savedSearchId,
   });
 
-  const addColumn = (columnName: string) => {
-    onAddColumn(columnName);
-    services.toastNotifications.addSuccess(
-      i18n.translate('discover.grid.flyout.toastColumnAdded', {
-        defaultMessage: `Column '{columnName}' was added`,
-        values: { columnName },
-      })
-    );
-  };
+  const addColumn = useCallback(
+    (columnName: string) => {
+      onAddColumn(columnName);
+      services.toastNotifications.addSuccess(
+        i18n.translate('discover.grid.flyout.toastColumnAdded', {
+          defaultMessage: `Column '{columnName}' was added`,
+          values: { columnName },
+        })
+      );
+    },
+    [onAddColumn, services.toastNotifications]
+  );
 
-  const removeColumn = (columnName: string) => {
-    onRemoveColumn(columnName);
-    services.toastNotifications.addSuccess(
-      i18n.translate('discover.grid.flyout.toastColumnRemoved', {
-        defaultMessage: `Column '{columnName}' was removed`,
-        values: { columnName },
-      })
-    );
-  };
+  const removeColumn = useCallback(
+    (columnName: string) => {
+      onRemoveColumn(columnName);
+      services.toastNotifications.addSuccess(
+        i18n.translate('discover.grid.flyout.toastColumnRemoved', {
+          defaultMessage: `Column '{columnName}' was removed`,
+          values: { columnName },
+        })
+      );
+    },
+    [onRemoveColumn, services.toastNotifications]
+  );
 
-  const renderDefaultContent = () => (
-    <UnifiedDocViewer
-      columns={columns}
-      columnTypes={columnTypes}
-      dataView={dataView}
-      filter={onFilter}
-      hit={actualHit}
-      onAddColumn={addColumn}
-      onRemoveColumn={removeColumn}
-      textBasedHits={isPlainRecord ? hits : undefined}
-    />
+  const renderDefaultContent = useCallback(
+    () => (
+      <UnifiedDocViewer
+        columns={columns}
+        columnTypes={columnTypes}
+        dataView={dataView}
+        filter={onFilter}
+        hit={actualHit}
+        onAddColumn={addColumn}
+        onRemoveColumn={removeColumn}
+        textBasedHits={isPlainRecord ? hits : undefined}
+      />
+    ),
+    [
+      actualHit,
+      addColumn,
+      columns,
+      columnTypes,
+      dataView,
+      hits,
+      isPlainRecord,
+      onFilter,
+      removeColumn,
+    ]
   );
 
-  const contentActions = {
-    setFilter: onFilter,
-    addColumn,
-    removeColumn,
-  };
+  const contentActions = useMemo(
+    () => ({
+      addFilter: onFilter,
+      addColumn,
+      removeColumn,
+    }),
+    [onFilter, addColumn, removeColumn]
+  );
 
   const bodyContent = flyoutCustomization?.Content ? (
     <flyoutCustomization.Content
diff --git a/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts b/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts
index a4974521b8fda5..08f8f034a00d3a 100644
--- a/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts
+++ b/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts
@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
-import { DataTableRecord } from '@kbn/discover-utils/types';
-import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
-import React, { ComponentType } from 'react';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
+import React, { type ComponentType } from 'react';
 
 export interface FlyoutDefaultActionItem {
   disabled?: boolean;
@@ -26,7 +26,7 @@ export interface FlyoutActionItem {
 }
 
 export interface FlyoutContentActions {
-  setFilter?: DocViewFilterFn;
+  addFilter?: DocViewFilterFn;
   addColumn: (column: string) => void;
   removeColumn: (column: string) => void;
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index b0fd477a6aff3a..cc6bae631523b7 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -1727,6 +1727,6 @@
       "@kbn/ambient-ui-types",
       "@kbn/ambient-common-types",
       "@kbn/ambient-storybook-types"
-    ]
+    ],
   }
 }
\ No newline at end of file

From faa0c3eda8cfb9186a23ac971040b3ecca2a9677 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Wed, 25 Oct 2023 10:08:59 +0200
Subject: [PATCH 03/20] refactor(discover): update test

---
 .../discover_grid_flyout/discover_grid_flyout.test.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx
index b2d46022bd344a..d8c43fd8dedfe2 100644
--- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx
+++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx
@@ -305,8 +305,8 @@ describe('Discover flyout', function () {
             <button data-test-subj="addColumn" onClick={() => actions.addColumn('message')} />
             <button data-test-subj="removeColumn" onClick={() => actions.removeColumn('message')} />
             <button
-              data-test-subj="setFilter"
-              onClick={() => actions.setFilter?.('_exists_', 'message', '+')}
+              data-test-subj="addFilter"
+              onClick={() => actions.addFilter?.('_exists_', 'message', '+')}
             />
           </>
         );
@@ -315,7 +315,7 @@ describe('Discover flyout', function () {
 
         findTestSubject(component, 'addColumn').simulate('click');
         findTestSubject(component, 'removeColumn').simulate('click');
-        findTestSubject(component, 'setFilter').simulate('click');
+        findTestSubject(component, 'addFilter').simulate('click');
 
         expect(props.onAddColumn).toHaveBeenCalled();
         expect(props.onRemoveColumn).toHaveBeenCalled();

From ca1accf09acbbfe463a713816afa7703ee421d56 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Wed, 25 Oct 2023 15:53:49 +0200
Subject: [PATCH 04/20] feat(discover): begin flyout header implementation

---
 .../discover_grid_flyout.tsx                  |  1 +
 .../flyout_customization.ts                   |  2 +
 src/plugins/discover/public/index.ts          |  2 +
 x-pack/plugins/log_explorer/kibana.jsonc      |  1 +
 .../flyout_detail/flyout_detail.tsx           | 53 ++++++++++++++++
 .../public/components/flyout_detail/index.ts  |  9 +++
 .../sub_components/log_level.tsx              | 29 +++++++++
 .../flyout_detail/sub_components/message.tsx  | 34 +++++++++++
 .../sub_components/timestamp.tsx              | 20 +++++++
 .../components/flyout_detail/translations.ts  | 12 ++++
 .../public/components/flyout_detail/types.ts  | 29 +++++++++
 .../flyout_detail/use_doc_detail.ts           | 60 +++++++++++++++++++
 .../customizations/custom_flyout_content.tsx  | 32 ++++++++++
 .../customizations/log_explorer_profile.tsx   | 12 +++-
 x-pack/plugins/log_explorer/public/types.ts   |  2 +
 15 files changed, 297 insertions(+), 1 deletion(-)
 create mode 100644 x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx
 create mode 100644 x-pack/plugins/log_explorer/public/components/flyout_detail/index.ts
 create mode 100644 x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx
 create mode 100644 x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/message.tsx
 create mode 100644 x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx
 create mode 100644 x-pack/plugins/log_explorer/public/components/flyout_detail/translations.ts
 create mode 100644 x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts
 create mode 100644 x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts
 create mode 100644 x-pack/plugins/log_explorer/public/customizations/custom_flyout_content.tsx

diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
index d8c218efba23ae..65855b6197d23b 100644
--- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
+++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
@@ -179,6 +179,7 @@ export function DiscoverGridFlyout({
   const bodyContent = flyoutCustomization?.Content ? (
     <flyoutCustomization.Content
       actions={contentActions}
+      dataView={dataView}
       doc={actualHit}
       renderDefaultContent={renderDefaultContent}
     />
diff --git a/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts b/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts
index 08f8f034a00d3a..d63b2cb63e2a1e 100644
--- a/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts
+++ b/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import type { DataView } from '@kbn/data-views-plugin/common';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import React, { type ComponentType } from 'react';
@@ -33,6 +34,7 @@ export interface FlyoutContentActions {
 
 export interface FlyoutContentProps {
   actions: FlyoutContentActions;
+  dataView: DataView;
   doc: DataTableRecord;
   renderDefaultContent: () => React.ReactNode;
 }
diff --git a/src/plugins/discover/public/index.ts b/src/plugins/discover/public/index.ts
index 42033c2ebfdb54..37a46f30c4ccfb 100644
--- a/src/plugins/discover/public/index.ts
+++ b/src/plugins/discover/public/index.ts
@@ -26,6 +26,8 @@ export type {
   DiscoverCustomization,
   DiscoverCustomizationService,
   FlyoutCustomization,
+  FlyoutContentActions,
+  FlyoutContentProps,
   SearchBarCustomization,
   UnifiedHistogramCustomization,
   TopNavCustomization,
diff --git a/x-pack/plugins/log_explorer/kibana.jsonc b/x-pack/plugins/log_explorer/kibana.jsonc
index 969fa50c87a8c3..76eb47e4a59154 100644
--- a/x-pack/plugins/log_explorer/kibana.jsonc
+++ b/x-pack/plugins/log_explorer/kibana.jsonc
@@ -15,6 +15,7 @@
       "data",
       "dataViews",
       "discover",
+      "fieldFormats",
       "fleet",
       "kibanaReact",
       "kibanaUtils",
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx
new file mode 100644
index 00000000000000..bd1b9dcca3a198
--- /dev/null
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FlyoutContentProps } from '@kbn/discover-plugin/public';
+import { LogLevel } from './sub_components/log_level';
+import { Timestamp } from './sub_components/timestamp';
+import { LogDocument } from './types';
+import { getFlyoutRenderFlags, useDocDetail } from './use_doc_detail';
+import { Message } from './sub_components/message';
+
+export function FlyoutDetail({
+  dataView,
+  doc,
+}: Pick<FlyoutContentProps, 'dataView' | 'doc' | 'actions'>) {
+  const parsedDoc = useDocDetail(doc as LogDocument, { dataView });
+
+  const { hasTimestamp, hasLogLevel, hasMessage, hasBadges, hasFlyoutHeader } =
+    getFlyoutRenderFlags(parsedDoc);
+
+  return (
+    hasFlyoutHeader && (
+      <EuiFlexGroup wrap direction="column" gutterSize="m" data-test-subj="logExplorerFlyoutDetail">
+        <EuiFlexItem grow={false}>
+          {hasBadges && (
+            <EuiFlexGroup wrap responsive={false} gutterSize="m">
+              {hasLogLevel && (
+                <EuiFlexItem grow={false}>
+                  <LogLevel level={parsedDoc.level} />
+                </EuiFlexItem>
+              )}
+              {hasTimestamp && (
+                <EuiFlexItem grow={false}>
+                  <Timestamp timestamp={parsedDoc.timestamp} />
+                </EuiFlexItem>
+              )}
+            </EuiFlexGroup>
+          )}
+        </EuiFlexItem>
+        {hasMessage && (
+          <EuiFlexItem grow={false}>
+            <Message message={parsedDoc.message} />
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    )
+  );
+}
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/index.ts b/x-pack/plugins/log_explorer/public/components/flyout_detail/index.ts
new file mode 100644
index 00000000000000..4b00c914df2280
--- /dev/null
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './flyout_detail';
+export * from './types';
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx
new file mode 100644
index 00000000000000..1d366af5b8f5ef
--- /dev/null
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiBadge, type EuiBadgeProps } from '@elastic/eui';
+import { FlyoutDoc } from '../types';
+
+const LEVEL_DICT: Record<string, EuiBadgeProps['color']> = {
+  error: 'danger',
+  warn: 'warning',
+  info: 'primary',
+  default: 'default',
+};
+
+interface LogLevelProps {
+  level: FlyoutDoc['level'];
+}
+
+export function LogLevel({ level }: LogLevelProps) {
+  if (!level) return null;
+
+  const levelColor = LEVEL_DICT[level] ?? LEVEL_DICT.default;
+
+  return <EuiBadge color={levelColor}>{level}</EuiBadge>;
+}
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/message.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/message.tsx
new file mode 100644
index 00000000000000..4fe9c2aaba8eeb
--- /dev/null
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/message.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { FlyoutDoc } from '../types';
+import { flyoutMessageLabel } from '../translations';
+
+interface MessageProps {
+  message: FlyoutDoc['message'];
+}
+
+export function Message({ message }: MessageProps) {
+  if (!message) return null;
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="xs">
+      <EuiFlexItem>
+        <EuiText color="subdued" size="xs">
+          {flyoutMessageLabel}
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiCodeBlock overflowHeight={100} paddingSize="m" isCopyable language="txt" fontSize="m">
+          {message}
+        </EuiCodeBlock>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx
new file mode 100644
index 00000000000000..289d26c3aacd37
--- /dev/null
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiBadge } from '@elastic/eui';
+import { FlyoutDoc } from '../types';
+
+interface TimestampProps {
+  timestamp: FlyoutDoc['timestamp'];
+}
+
+export function Timestamp({ timestamp }: TimestampProps) {
+  if (!timestamp) return null;
+
+  return <EuiBadge color="hollow">{timestamp}</EuiBadge>;
+}
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/translations.ts b/x-pack/plugins/log_explorer/public/components/flyout_detail/translations.ts
new file mode 100644
index 00000000000000..fcb42cf79a5dd2
--- /dev/null
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/translations.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const flyoutMessageLabel = i18n.translate('xpack.logExplorer.flyoutDetail.label.message', {
+  defaultMessage: 'Message',
+});
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts b/x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts
new file mode 100644
index 00000000000000..7b1acdd7e8179d
--- /dev/null
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { DataTableRecord } from '@kbn/discover-utils/types';
+
+export interface LogDocument extends DataTableRecord {
+  flattened: {
+    'log.level': string;
+    '@timestamp': string;
+    message: string;
+  };
+}
+
+export interface FlyoutDoc {
+  level?: string;
+  timestamp: string;
+  message?: string;
+}
+
+export interface FlyoutHighlightField {
+  label: string;
+  value: string;
+  iconType?: EuiIconType;
+}
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts b/x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts
new file mode 100644
index 00000000000000..490cf9e6ae00c4
--- /dev/null
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FlyoutContentProps } from '@kbn/discover-plugin/public';
+import { formatFieldValue } from '@kbn/discover-utils';
+import { LOG_LEVEL_FIELD, MESSAGE_FIELD, TIMESTAMP_FIELD } from '../../../common/constants';
+import { useKibanaContextForPlugin } from '../../utils/use_kibana';
+import { FlyoutDoc, LogDocument } from './types';
+
+export function useDocDetail(
+  doc: LogDocument,
+  { dataView }: Pick<FlyoutContentProps, 'dataView'>
+): FlyoutDoc {
+  const { services } = useKibanaContextForPlugin();
+
+  const formatField = (field: keyof LogDocument['flattened']) => {
+    return (
+      doc.flattened[field] &&
+      formatFieldValue(
+        doc.flattened[field],
+        doc.raw,
+        services.fieldFormats,
+        dataView,
+        dataView.fields.getByName(field)
+      )
+    );
+  };
+
+  const level = formatField(LOG_LEVEL_FIELD)?.toLowerCase();
+  const timestamp = formatField(TIMESTAMP_FIELD);
+  const message = formatField(MESSAGE_FIELD);
+
+  return {
+    level,
+    timestamp,
+    message,
+  };
+}
+
+export const getFlyoutRenderFlags = (doc: FlyoutDoc) => {
+  const hasTimestamp = Boolean(doc.timestamp);
+  const hasLogLevel = Boolean(doc.level);
+  const hasMessage = Boolean(doc.message);
+
+  const hasBadges = hasTimestamp || hasLogLevel;
+
+  const hasFlyoutHeader = hasBadges || hasMessage;
+
+  return {
+    hasTimestamp,
+    hasLogLevel,
+    hasMessage,
+    hasBadges,
+    hasFlyoutHeader,
+  };
+};
diff --git a/x-pack/plugins/log_explorer/public/customizations/custom_flyout_content.tsx b/x-pack/plugins/log_explorer/public/customizations/custom_flyout_content.tsx
new file mode 100644
index 00000000000000..65bf6ea6969c74
--- /dev/null
+++ b/x-pack/plugins/log_explorer/public/customizations/custom_flyout_content.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { FlyoutContentProps } from '@kbn/discover-plugin/public';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FlyoutDetail } from '../components/flyout_detail/flyout_detail';
+
+export const CustomFlyoutContent = ({
+  actions,
+  dataView,
+  doc,
+  renderDefaultContent,
+}: FlyoutContentProps) => {
+  return (
+    <EuiFlexGroup direction="column">
+      {/* Apply custom Log Explorer detail */}
+      <EuiFlexItem>
+        <FlyoutDetail actions={actions} dataView={dataView} doc={doc} />
+      </EuiFlexItem>
+      {/* Restore default content */}
+      <EuiFlexItem>{renderDefaultContent()}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default CustomFlyoutContent;
diff --git a/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx b/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
index 29a3744a9484fc..14f9b8a2255e3a 100644
--- a/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
+++ b/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
@@ -14,8 +14,9 @@ import { LogExplorerStateContainer } from '../components/log_explorer';
 import { LogExplorerStartDeps } from '../types';
 import { useKibanaContextForPluginProvider } from '../utils/use_kibana';
 
-const LazyCustomDatasetSelector = dynamic(() => import('./custom_dataset_selector'));
 const LazyCustomDatasetFilters = dynamic(() => import('./custom_dataset_filters'));
+const LazyCustomDatasetSelector = dynamic(() => import('./custom_dataset_selector'));
+const LazyCustomFlyoutContent = dynamic(() => import('./custom_flyout_content'));
 
 export interface CreateLogExplorerProfileCustomizationsDeps {
   core: CoreStart;
@@ -115,6 +116,15 @@ export const createLogExplorerProfileCustomizations =
           viewSurroundingDocument: { disabled: true },
         },
       },
+      Content: (props) => {
+        const KibanaContextProviderForPlugin = useKibanaContextForPluginProvider(core, plugins);
+
+        return (
+          <KibanaContextProviderForPlugin>
+            <LazyCustomFlyoutContent {...props} />
+          </KibanaContextProviderForPlugin>
+        );
+      },
     });
 
     return () => {
diff --git a/x-pack/plugins/log_explorer/public/types.ts b/x-pack/plugins/log_explorer/public/types.ts
index b260f6ba68ad75..e07b8fdb14b3f8 100644
--- a/x-pack/plugins/log_explorer/public/types.ts
+++ b/x-pack/plugins/log_explorer/public/types.ts
@@ -9,6 +9,7 @@ import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import type { DiscoverSetup, DiscoverStart } from '@kbn/discover-plugin/public';
 import { SharePluginSetup } from '@kbn/share-plugin/public';
+import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import { LogExplorerLocators } from '../common/locators';
 import type { LogExplorerProps } from './components/log_explorer';
 
@@ -28,4 +29,5 @@ export interface LogExplorerStartDeps {
   data: DataPublicPluginStart;
   dataViews: DataViewsPublicPluginStart;
   discover: DiscoverStart;
+  fieldFormats: FieldFormatsStart;
 }

From 1e0f7407badeb4c459e1edd4a5c1d94819c11ac5 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 25 Oct 2023 14:03:31 +0000
Subject: [PATCH 05/20] [CI] Auto-commit changed files from 'node
 scripts/lint_ts_projects --fix'

---
 x-pack/plugins/log_explorer/tsconfig.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/log_explorer/tsconfig.json b/x-pack/plugins/log_explorer/tsconfig.json
index 13a82d1da9f4ce..d80736004536f8 100644
--- a/x-pack/plugins/log_explorer/tsconfig.json
+++ b/x-pack/plugins/log_explorer/tsconfig.json
@@ -24,7 +24,8 @@
     "@kbn/unified-data-table",
     "@kbn/core-ui-settings-browser",
     "@kbn/discover-utils",
-    "@kbn/deeplinks-observability"
+    "@kbn/deeplinks-observability",
+    "@kbn/field-formats-plugin"
   ],
   "exclude": ["target/**/*"]
 }

From fdd9edf6d12dd949f9cbc7ec871be3ae71b9db59 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Wed, 25 Oct 2023 16:05:00 +0200
Subject: [PATCH 06/20] feat(discover): remove trailing comma

---
 tsconfig.base.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tsconfig.base.json b/tsconfig.base.json
index cc6bae631523b7..b0fd477a6aff3a 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -1727,6 +1727,6 @@
       "@kbn/ambient-ui-types",
       "@kbn/ambient-common-types",
       "@kbn/ambient-storybook-types"
-    ],
+    ]
   }
 }
\ No newline at end of file

From 98b7b8b3f7e1c9d64d1c177f7898376daacdd4c4 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Wed, 25 Oct 2023 16:40:28 +0200
Subject: [PATCH 07/20] feat(discover): fix conditional rendering

---
 .../flyout_detail/flyout_detail.tsx           | 48 +++++++++----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx
index bd1b9dcca3a198..07bc50717e05d8 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx
@@ -23,31 +23,29 @@ export function FlyoutDetail({
   const { hasTimestamp, hasLogLevel, hasMessage, hasBadges, hasFlyoutHeader } =
     getFlyoutRenderFlags(parsedDoc);
 
-  return (
-    hasFlyoutHeader && (
-      <EuiFlexGroup wrap direction="column" gutterSize="m" data-test-subj="logExplorerFlyoutDetail">
+  return hasFlyoutHeader ? (
+    <EuiFlexGroup wrap direction="column" gutterSize="m" data-test-subj="logExplorerFlyoutDetail">
+      <EuiFlexItem grow={false}>
+        {hasBadges && (
+          <EuiFlexGroup wrap responsive={false} gutterSize="m">
+            {hasLogLevel && (
+              <EuiFlexItem grow={false}>
+                <LogLevel level={parsedDoc.level} />
+              </EuiFlexItem>
+            )}
+            {hasTimestamp && (
+              <EuiFlexItem grow={false}>
+                <Timestamp timestamp={parsedDoc.timestamp} />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        )}
+      </EuiFlexItem>
+      {hasMessage && (
         <EuiFlexItem grow={false}>
-          {hasBadges && (
-            <EuiFlexGroup wrap responsive={false} gutterSize="m">
-              {hasLogLevel && (
-                <EuiFlexItem grow={false}>
-                  <LogLevel level={parsedDoc.level} />
-                </EuiFlexItem>
-              )}
-              {hasTimestamp && (
-                <EuiFlexItem grow={false}>
-                  <Timestamp timestamp={parsedDoc.timestamp} />
-                </EuiFlexItem>
-              )}
-            </EuiFlexGroup>
-          )}
+          <Message message={parsedDoc.message} />
         </EuiFlexItem>
-        {hasMessage && (
-          <EuiFlexItem grow={false}>
-            <Message message={parsedDoc.message} />
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-    )
-  );
+      )}
+    </EuiFlexGroup>
+  ) : null;
 }

From 2c9a01481ef04045d12fd757bc63def56a18332d Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Thu, 26 Oct 2023 11:44:16 +0200
Subject: [PATCH 08/20] feat(log-explorer): minor changes

---
 .../components/flyout_detail/flyout_detail.tsx   | 12 ++++++------
 .../flyout_detail/sub_components/log_level.tsx   |  2 +-
 .../flyout_detail/sub_components/timestamp.tsx   |  2 +-
 .../public/components/flyout_detail/types.ts     |  8 ++++----
 .../components/flyout_detail/use_doc_detail.ts   | 16 +++++++++-------
 5 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx
index 07bc50717e05d8..335fb8fb69db7f 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx
@@ -11,7 +11,7 @@ import { FlyoutContentProps } from '@kbn/discover-plugin/public';
 import { LogLevel } from './sub_components/log_level';
 import { Timestamp } from './sub_components/timestamp';
 import { LogDocument } from './types';
-import { getFlyoutRenderFlags, useDocDetail } from './use_doc_detail';
+import { getDocDetailRenderFlags, useDocDetail } from './use_doc_detail';
 import { Message } from './sub_components/message';
 
 export function FlyoutDetail({
@@ -21,21 +21,21 @@ export function FlyoutDetail({
   const parsedDoc = useDocDetail(doc as LogDocument, { dataView });
 
   const { hasTimestamp, hasLogLevel, hasMessage, hasBadges, hasFlyoutHeader } =
-    getFlyoutRenderFlags(parsedDoc);
+    getDocDetailRenderFlags(parsedDoc);
 
   return hasFlyoutHeader ? (
-    <EuiFlexGroup wrap direction="column" gutterSize="m" data-test-subj="logExplorerFlyoutDetail">
+    <EuiFlexGroup direction="column" gutterSize="m" data-test-subj="logExplorerFlyoutDetail">
       <EuiFlexItem grow={false}>
         {hasBadges && (
-          <EuiFlexGroup wrap responsive={false} gutterSize="m">
+          <EuiFlexGroup responsive={false} gutterSize="m">
             {hasLogLevel && (
               <EuiFlexItem grow={false}>
-                <LogLevel level={parsedDoc.level} />
+                <LogLevel level={parsedDoc['log.level']} />
               </EuiFlexItem>
             )}
             {hasTimestamp && (
               <EuiFlexItem grow={false}>
-                <Timestamp timestamp={parsedDoc.timestamp} />
+                <Timestamp timestamp={parsedDoc['@timestamp']} />
               </EuiFlexItem>
             )}
           </EuiFlexGroup>
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx
index 1d366af5b8f5ef..8c1553dc65ec14 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx
@@ -17,7 +17,7 @@ const LEVEL_DICT: Record<string, EuiBadgeProps['color']> = {
 };
 
 interface LogLevelProps {
-  level: FlyoutDoc['level'];
+  level: FlyoutDoc['log.level'];
 }
 
 export function LogLevel({ level }: LogLevelProps) {
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx
index 289d26c3aacd37..c6cbfa1b4ae767 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx
@@ -10,7 +10,7 @@ import { EuiBadge } from '@elastic/eui';
 import { FlyoutDoc } from '../types';
 
 interface TimestampProps {
-  timestamp: FlyoutDoc['timestamp'];
+  timestamp: FlyoutDoc['@timestamp'];
 }
 
 export function Timestamp({ timestamp }: TimestampProps) {
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts b/x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts
index 7b1acdd7e8179d..ce06eb9dd01f4f 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts
@@ -10,15 +10,15 @@ import { DataTableRecord } from '@kbn/discover-utils/types';
 
 export interface LogDocument extends DataTableRecord {
   flattened: {
-    'log.level': string;
     '@timestamp': string;
-    message: string;
+    'log.level'?: string;
+    message?: string;
   };
 }
 
 export interface FlyoutDoc {
-  level?: string;
-  timestamp: string;
+  '@timestamp': string;
+  'log.level'?: string;
   message?: string;
 }
 
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts b/x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts
index 490cf9e6ae00c4..66c7359d71775d 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts
@@ -17,7 +17,9 @@ export function useDocDetail(
 ): FlyoutDoc {
   const { services } = useKibanaContextForPlugin();
 
-  const formatField = (field: keyof LogDocument['flattened']) => {
+  const formatField = <F extends keyof LogDocument['flattened']>(
+    field: F
+  ): LogDocument['flattened'][F] => {
     return (
       doc.flattened[field] &&
       formatFieldValue(
@@ -35,15 +37,15 @@ export function useDocDetail(
   const message = formatField(MESSAGE_FIELD);
 
   return {
-    level,
-    timestamp,
-    message,
+    [LOG_LEVEL_FIELD]: level,
+    [TIMESTAMP_FIELD]: timestamp,
+    [MESSAGE_FIELD]: message,
   };
 }
 
-export const getFlyoutRenderFlags = (doc: FlyoutDoc) => {
-  const hasTimestamp = Boolean(doc.timestamp);
-  const hasLogLevel = Boolean(doc.level);
+export const getDocDetailRenderFlags = (doc: FlyoutDoc) => {
+  const hasTimestamp = Boolean(doc['@timestamp']);
+  const hasLogLevel = Boolean(doc['log.level']);
   const hasMessage = Boolean(doc.message);
 
   const hasBadges = hasTimestamp || hasLogLevel;

From e72c32c5d19ca98d383a6372d8cb8267013b08bc Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Thu, 26 Oct 2023 16:48:40 +0200
Subject: [PATCH 09/20] test(log-explorer): wip test flyout

---
 .../sub_components/log_level.tsx              |   6 +-
 .../flyout_detail/sub_components/message.tsx  |   2 +-
 .../sub_components/timestamp.tsx              |   6 +-
 .../apps/observability_log_explorer/flyout.ts | 128 ++++++++++++++++++
 .../apps/observability_log_explorer/index.ts  |   1 +
 .../observability_log_explorer.ts             |  94 ++++++++++++-
 6 files changed, 232 insertions(+), 5 deletions(-)
 create mode 100644 x-pack/test/functional/apps/observability_log_explorer/flyout.ts

diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx
index 8c1553dc65ec14..57858bb8c08192 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx
@@ -25,5 +25,9 @@ export function LogLevel({ level }: LogLevelProps) {
 
   const levelColor = LEVEL_DICT[level] ?? LEVEL_DICT.default;
 
-  return <EuiBadge color={levelColor}>{level}</EuiBadge>;
+  return (
+    <EuiBadge color={levelColor} data-test-subj="logExplorerFlyoutLogLevel">
+      {level}
+    </EuiBadge>
+  );
 }
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/message.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/message.tsx
index 4fe9c2aaba8eeb..584f2eeff5a50a 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/message.tsx
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/message.tsx
@@ -18,7 +18,7 @@ export function Message({ message }: MessageProps) {
   if (!message) return null;
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="xs">
+    <EuiFlexGroup direction="column" gutterSize="xs" data-test-subj="logExplorerFlyoutLogMessage">
       <EuiFlexItem>
         <EuiText color="subdued" size="xs">
           {flyoutMessageLabel}
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx
index c6cbfa1b4ae767..95df948c805600 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx
@@ -16,5 +16,9 @@ interface TimestampProps {
 export function Timestamp({ timestamp }: TimestampProps) {
   if (!timestamp) return null;
 
-  return <EuiBadge color="hollow">{timestamp}</EuiBadge>;
+  return (
+    <EuiBadge color="hollow" data-test-subj="logExplorerFlyoutLogTimestamp">
+      {timestamp}
+    </EuiBadge>
+  );
 }
diff --git a/x-pack/test/functional/apps/observability_log_explorer/flyout.ts b/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
new file mode 100644
index 00000000000000..3f874d7bbe476c
--- /dev/null
+++ b/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
@@ -0,0 +1,128 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+const DATASET_NAME = 'flyout';
+const NAMESPACE = 'default';
+const DATA_STREAM_NAME = `logs-${DATASET_NAME}-${NAMESPACE}`;
+const NOW = Date.now();
+
+const sharedDoc = {
+  logFilepath: '/flyout.log',
+  serviceName: DATASET_NAME,
+  datasetName: DATASET_NAME,
+  namespace: NAMESPACE,
+};
+
+const docs = [
+  {
+    ...sharedDoc,
+    time: NOW + 1000,
+    message: 'full document',
+    logLevel: 'info',
+  },
+  {
+    ...sharedDoc,
+    time: NOW + 2000,
+    logLevel: 'info',
+  },
+  {
+    ...sharedDoc,
+    time: NOW + 3000,
+    message: 'document without log level',
+  },
+  {
+    ...sharedDoc,
+    time: NOW + 4000,
+  },
+];
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const docTable = getService('docTable');
+  const flyout = getService('flyout');
+  const retry = getService('retry');
+  const testSubjects = getService('testSubjects');
+  const PageObjects = getPageObjects(['discover', 'observabilityLogExplorer']);
+
+  describe('Flyout content customization', () => {
+    let cleanupDataStreamSetup: () => Promise<void>;
+
+    before('initialize tests', async () => {
+      cleanupDataStreamSetup = await PageObjects.observabilityLogExplorer.setupDataStream(
+        DATASET_NAME,
+        NAMESPACE
+      );
+      await PageObjects.observabilityLogExplorer.ingestLogEntries(DATA_STREAM_NAME, docs);
+    });
+
+    beforeEach(async () => {
+      await PageObjects.observabilityLogExplorer.navigateTo({
+        from: new Date(NOW - 60_000).toISOString(),
+        to: new Date(NOW + 60_000).toISOString(),
+      });
+    });
+
+    after('clean up archives', async () => {
+      if (cleanupDataStreamSetup) {
+        cleanupDataStreamSetup();
+      }
+    });
+
+    it('should mount the flyout customization content', async () => {
+      await PageObjects.observabilityLogExplorer.openLogFlyout();
+      await testSubjects.existOrFail('logExplorerFlyoutDetail');
+    });
+
+    it('should display a timestamp badge', async () => {
+      await PageObjects.observabilityLogExplorer.openLogFlyout();
+      await testSubjects.existOrFail('logExplorerFlyoutLogTimestamp');
+    });
+
+    it('should display a log level badge when available', async () => {
+      await PageObjects.observabilityLogExplorer.submitQuery('log.level : *');
+      await retry.try(async () => {
+        const rows = await docTable.getBodyRows();
+        expect(rows.length).to.eql(2);
+      });
+
+      await PageObjects.observabilityLogExplorer.openLogFlyout();
+      await testSubjects.existOrFail('logExplorerFlyoutLogLevel');
+      await flyout.ensureClosed('docTableDetailsFlyout');
+
+      await PageObjects.observabilityLogExplorer.submitQuery('NOT log.level : *');
+      await retry.try(async () => {
+        const rows = await docTable.getBodyRows();
+        expect(rows.length).to.eql(2);
+      });
+
+      await PageObjects.observabilityLogExplorer.openLogFlyout();
+      await testSubjects.missingOrFail('logExplorerFlyoutLogLevel');
+    });
+
+    it('should display a message code block when available', async () => {
+      await PageObjects.observabilityLogExplorer.submitQuery('message : *');
+      await retry.try(async () => {
+        const rows = await docTable.getBodyRows();
+        expect(rows.length).to.eql(2);
+      });
+
+      await PageObjects.observabilityLogExplorer.openLogFlyout();
+      await testSubjects.existOrFail('logExplorerFlyoutLogMessage');
+      await flyout.ensureClosed('docTableDetailsFlyout');
+
+      await PageObjects.observabilityLogExplorer.submitQuery('NOT message : *');
+      await retry.try(async () => {
+        const rows = await docTable.getBodyRows();
+        expect(rows.length).to.eql(2);
+      });
+
+      await PageObjects.observabilityLogExplorer.openLogFlyout();
+      await testSubjects.missingOrFail('logExplorerFlyoutLogMessage');
+    });
+  });
+}
diff --git a/x-pack/test/functional/apps/observability_log_explorer/index.ts b/x-pack/test/functional/apps/observability_log_explorer/index.ts
index aec38a6bb83084..948910dab6ab4e 100644
--- a/x-pack/test/functional/apps/observability_log_explorer/index.ts
+++ b/x-pack/test/functional/apps/observability_log_explorer/index.ts
@@ -14,6 +14,7 @@ export default function ({ loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./dataset_selection_state'));
     loadTestFile(require.resolve('./dataset_selector'));
     loadTestFile(require.resolve('./filter_controls'));
+    loadTestFile(require.resolve('./flyout'));
     loadTestFile(require.resolve('./header_menu'));
   });
 }
diff --git a/x-pack/test/functional/page_objects/observability_log_explorer.ts b/x-pack/test/functional/page_objects/observability_log_explorer.ts
index 15da13b99c70f4..0b3decb2bbbcad 100644
--- a/x-pack/test/functional/page_objects/observability_log_explorer.ts
+++ b/x-pack/test/functional/page_objects/observability_log_explorer.ts
@@ -4,6 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { extractTimeFields } from '@kbn/data-view-editor-plugin/public/lib';
 import expect from '@kbn/expect';
 import rison from '@kbn/rison';
 import querystring from 'querystring';
@@ -109,6 +110,7 @@ export function ObservabilityLogExplorerPageObject({
   getService,
 }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common']);
+  const es = getService('es');
   const log = getService('log');
   const supertest = getService('supertest');
   const testSubjects = getService('testSubjects');
@@ -119,6 +121,8 @@ export function ObservabilityLogExplorerPageObject({
     'search'
   > & {
     search?: Record<string, string>;
+    from?: string;
+    to?: string;
   };
 
   return {
@@ -167,6 +171,27 @@ export function ObservabilityLogExplorerPageObject({
       };
     },
 
+    async setupDataStream(datasetName: string, namespace: string = 'default') {
+      log.info(`===== Setup initial data stream "${datasetName}". =====`);
+      const dataStream = `logs-${datasetName}-${namespace}`;
+      await es.indices.createDataStream({ name: dataStream });
+
+      return async () => {
+        log.info(`===== Removing data stream "${datasetName}". =====`);
+        await es.indices.deleteDataStream({
+          name: dataStream,
+        });
+      };
+    },
+
+    ingestLogEntries(dataStream: string, docs: MockLogDoc[] = []) {
+      log.info(`===== Ingesting ${docs.length} docs for "${dataStream}" data stream. =====`);
+      return es.bulk({
+        body: docs.flatMap((doc) => [{ create: { _index: dataStream } }, createLogDoc(doc)]),
+        refresh: 'wait_for',
+      });
+    },
+
     async setupAdditionalIntegrations() {
       log.info(`===== Setup additional integration packages. =====`);
       log.info(`===== Install ${additionalPackages.length} mock integration packages. =====`);
@@ -183,11 +208,11 @@ export function ObservabilityLogExplorerPageObject({
     },
 
     async navigateTo(options: NavigateToAppOptions = {}) {
-      const { search = {}, ...extraOptions } = options;
+      const { search = {}, from = FROM, to = TO, ...extraOptions } = options;
       const composedSearch = querystring.stringify({
         ...search,
         _g: rison.encode({
-          time: { from: FROM, to: TO },
+          time: { from, to },
         }),
       });
 
@@ -262,6 +287,11 @@ export function ObservabilityLogExplorerPageObject({
       return testSubjects.find('unmanagedDatasets');
     },
 
+    async getFlyoutDetail(docPos: number = 0) {
+      await this.openLogFlyout(docPos);
+      return testSubjects.find('logExplorerFlyoutDetail');
+    },
+
     async getIntegrations() {
       const menu = await this.getIntegrationsContextMenu();
 
@@ -279,6 +309,14 @@ export function ObservabilityLogExplorerPageObject({
       return button.click();
     },
 
+    async openLogFlyout(docPos: number = 0) {
+      const docEntries = await testSubjects.findAll('docTableExpandToggleColumn');
+      const selectedDoc = docEntries[docPos];
+      if (selectedDoc) {
+        await selectedDoc.click();
+      }
+    },
+
     async closeDatasetSelector() {
       const button = await this.getDatasetSelectorButton();
       const isOpen = await testSubjects.exists('datasetSelectorContent');
@@ -380,3 +418,55 @@ export function ObservabilityLogExplorerPageObject({
     },
   };
 }
+
+interface MockLogDoc {
+  time: number;
+  logFilepath: string;
+  serviceName?: string;
+  namespace: string;
+  datasetName: string;
+  message?: string;
+  logLevel?: string;
+  [key: string]: unknown;
+}
+
+export function createLogDoc({
+  time,
+  logFilepath,
+  serviceName,
+  namespace,
+  datasetName,
+  message,
+  logLevel,
+  ...extraFields
+}: MockLogDoc) {
+  return {
+    input: {
+      type: 'log',
+    },
+    '@timestamp': new Date(time).toISOString(),
+    log: {
+      file: {
+        path: logFilepath,
+      },
+    },
+    ...(serviceName
+      ? {
+          service: {
+            name: serviceName,
+          },
+        }
+      : {}),
+    data_stream: {
+      namespace,
+      type: 'logs',
+      dataset: datasetName,
+    },
+    message,
+    event: {
+      dataset: datasetName,
+    },
+    ...(logLevel && { 'log.level': logLevel }),
+    ...extraFields,
+  };
+}

From dca7addf7b112b079191ee8ac0099ab6bec2ee01 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 27 Oct 2023 07:45:09 +0000
Subject: [PATCH 10/20] [CI] Auto-commit changed files from 'node
 scripts/lint_ts_projects --fix'

---
 x-pack/test/tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/test/tsconfig.json b/x-pack/test/tsconfig.json
index 7d29b3794ac8a5..a021b25b3266ca 100644
--- a/x-pack/test/tsconfig.json
+++ b/x-pack/test/tsconfig.json
@@ -146,5 +146,6 @@
     "@kbn/ecs",
     "@kbn/coloring",
     "@kbn/es",
+    "@kbn/data-view-editor-plugin",
   ]
 }

From 4a888e68597fa58f7eeaa2836f27488ecb4a2abb Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 27 Oct 2023 08:26:56 +0000
Subject: [PATCH 11/20] [CI] Auto-commit changed files from 'node
 scripts/eslint --no-cache --fix'

---
 .../test/functional/page_objects/observability_log_explorer.ts   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/test/functional/page_objects/observability_log_explorer.ts b/x-pack/test/functional/page_objects/observability_log_explorer.ts
index 0b3decb2bbbcad..1c384b4804e841 100644
--- a/x-pack/test/functional/page_objects/observability_log_explorer.ts
+++ b/x-pack/test/functional/page_objects/observability_log_explorer.ts
@@ -4,7 +4,6 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { extractTimeFields } from '@kbn/data-view-editor-plugin/public/lib';
 import expect from '@kbn/expect';
 import rison from '@kbn/rison';
 import querystring from 'querystring';

From e84a21ce2e75ba4e6644f647d1f81ef80037b2b1 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 27 Oct 2023 08:34:07 +0000
Subject: [PATCH 12/20] [CI] Auto-commit changed files from 'node
 scripts/lint_ts_projects --fix'

---
 x-pack/test/tsconfig.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/test/tsconfig.json b/x-pack/test/tsconfig.json
index a021b25b3266ca..7d29b3794ac8a5 100644
--- a/x-pack/test/tsconfig.json
+++ b/x-pack/test/tsconfig.json
@@ -146,6 +146,5 @@
     "@kbn/ecs",
     "@kbn/coloring",
     "@kbn/es",
-    "@kbn/data-view-editor-plugin",
   ]
 }

From f180439cb83f34f678a33b1b78b84f6dba771a34 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Fri, 27 Oct 2023 11:31:25 +0200
Subject: [PATCH 13/20] test(log-explorer): finish stateful tests

---
 .../apps/observability_log_explorer/flyout.ts | 57 ++++---------------
 .../observability_log_explorer.ts             | 17 ++----
 2 files changed, 15 insertions(+), 59 deletions(-)

diff --git a/x-pack/test/functional/apps/observability_log_explorer/flyout.ts b/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
index 3f874d7bbe476c..8da5c738b8cca7 100644
--- a/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
+++ b/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
@@ -4,7 +4,6 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 const DATASET_NAME = 'flyout';
@@ -28,24 +27,12 @@ const docs = [
   },
   {
     ...sharedDoc,
-    time: NOW + 2000,
-    logLevel: 'info',
-  },
-  {
-    ...sharedDoc,
-    time: NOW + 3000,
-    message: 'document without log level',
-  },
-  {
-    ...sharedDoc,
-    time: NOW + 4000,
+    time: NOW,
   },
 ];
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const docTable = getService('docTable');
-  const flyout = getService('flyout');
-  const retry = getService('retry');
+  const dataGrid = getService('dataGrid');
   const testSubjects = getService('testSubjects');
   const PageObjects = getPageObjects(['discover', 'observabilityLogExplorer']);
 
@@ -74,54 +61,30 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('should mount the flyout customization content', async () => {
-      await PageObjects.observabilityLogExplorer.openLogFlyout();
+      await dataGrid.clickRowToggle();
       await testSubjects.existOrFail('logExplorerFlyoutDetail');
     });
 
     it('should display a timestamp badge', async () => {
-      await PageObjects.observabilityLogExplorer.openLogFlyout();
+      await dataGrid.clickRowToggle();
       await testSubjects.existOrFail('logExplorerFlyoutLogTimestamp');
     });
 
     it('should display a log level badge when available', async () => {
-      await PageObjects.observabilityLogExplorer.submitQuery('log.level : *');
-      await retry.try(async () => {
-        const rows = await docTable.getBodyRows();
-        expect(rows.length).to.eql(2);
-      });
-
-      await PageObjects.observabilityLogExplorer.openLogFlyout();
+      await dataGrid.clickRowToggle();
       await testSubjects.existOrFail('logExplorerFlyoutLogLevel');
-      await flyout.ensureClosed('docTableDetailsFlyout');
-
-      await PageObjects.observabilityLogExplorer.submitQuery('NOT log.level : *');
-      await retry.try(async () => {
-        const rows = await docTable.getBodyRows();
-        expect(rows.length).to.eql(2);
-      });
+      await dataGrid.closeFlyout();
 
-      await PageObjects.observabilityLogExplorer.openLogFlyout();
+      await dataGrid.clickRowToggle({ rowIndex: 1 });
       await testSubjects.missingOrFail('logExplorerFlyoutLogLevel');
     });
 
     it('should display a message code block when available', async () => {
-      await PageObjects.observabilityLogExplorer.submitQuery('message : *');
-      await retry.try(async () => {
-        const rows = await docTable.getBodyRows();
-        expect(rows.length).to.eql(2);
-      });
-
-      await PageObjects.observabilityLogExplorer.openLogFlyout();
+      await dataGrid.clickRowToggle();
       await testSubjects.existOrFail('logExplorerFlyoutLogMessage');
-      await flyout.ensureClosed('docTableDetailsFlyout');
-
-      await PageObjects.observabilityLogExplorer.submitQuery('NOT message : *');
-      await retry.try(async () => {
-        const rows = await docTable.getBodyRows();
-        expect(rows.length).to.eql(2);
-      });
+      await dataGrid.closeFlyout();
 
-      await PageObjects.observabilityLogExplorer.openLogFlyout();
+      await dataGrid.clickRowToggle({ rowIndex: 1 });
       await testSubjects.missingOrFail('logExplorerFlyoutLogMessage');
     });
   });
diff --git a/x-pack/test/functional/page_objects/observability_log_explorer.ts b/x-pack/test/functional/page_objects/observability_log_explorer.ts
index 0b3decb2bbbcad..da25b2fd206b13 100644
--- a/x-pack/test/functional/page_objects/observability_log_explorer.ts
+++ b/x-pack/test/functional/page_objects/observability_log_explorer.ts
@@ -110,6 +110,7 @@ export function ObservabilityLogExplorerPageObject({
   getService,
 }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common']);
+  const dataGrid = getService('dataGrid');
   const es = getService('es');
   const log = getService('log');
   const supertest = getService('supertest');
@@ -172,12 +173,12 @@ export function ObservabilityLogExplorerPageObject({
     },
 
     async setupDataStream(datasetName: string, namespace: string = 'default') {
-      log.info(`===== Setup initial data stream "${datasetName}". =====`);
       const dataStream = `logs-${datasetName}-${namespace}`;
+      log.info(`===== Setup initial data stream "${dataStream}". =====`);
       await es.indices.createDataStream({ name: dataStream });
 
       return async () => {
-        log.info(`===== Removing data stream "${datasetName}". =====`);
+        log.info(`===== Removing data stream "${dataStream}". =====`);
         await es.indices.deleteDataStream({
           name: dataStream,
         });
@@ -287,8 +288,8 @@ export function ObservabilityLogExplorerPageObject({
       return testSubjects.find('unmanagedDatasets');
     },
 
-    async getFlyoutDetail(docPos: number = 0) {
-      await this.openLogFlyout(docPos);
+    async getFlyoutDetail(rowIndex: number = 0) {
+      await dataGrid.clickRowToggle({ rowIndex });
       return testSubjects.find('logExplorerFlyoutDetail');
     },
 
@@ -309,14 +310,6 @@ export function ObservabilityLogExplorerPageObject({
       return button.click();
     },
 
-    async openLogFlyout(docPos: number = 0) {
-      const docEntries = await testSubjects.findAll('docTableExpandToggleColumn');
-      const selectedDoc = docEntries[docPos];
-      if (selectedDoc) {
-        await selectedDoc.click();
-      }
-    },
-
     async closeDatasetSelector() {
       const button = await this.getDatasetSelectorButton();
       const isOpen = await testSubjects.exists('datasetSelectorContent');

From 9e31b513272519659b688b4197b44bcd1ace3e08 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Fri, 27 Oct 2023 12:02:17 +0200
Subject: [PATCH 14/20] test(log-explorer): copy serverless test suite

---
 .../apps/observability_log_explorer/flyout.ts |  2 +-
 .../observability_log_explorer/flyout.ts      | 93 +++++++++++++++++++
 .../observability_log_explorer/index.ts       |  1 +
 3 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/flyout.ts

diff --git a/x-pack/test/functional/apps/observability_log_explorer/flyout.ts b/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
index 8da5c738b8cca7..f8277db16e8db8 100644
--- a/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
+++ b/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
@@ -34,7 +34,7 @@ const docs = [
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dataGrid = getService('dataGrid');
   const testSubjects = getService('testSubjects');
-  const PageObjects = getPageObjects(['discover', 'observabilityLogExplorer']);
+  const PageObjects = getPageObjects(['observabilityLogExplorer']);
 
   describe('Flyout content customization', () => {
     let cleanupDataStreamSetup: () => Promise<void>;
diff --git a/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/flyout.ts b/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/flyout.ts
new file mode 100644
index 00000000000000..79f241c8948b65
--- /dev/null
+++ b/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/flyout.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+const DATASET_NAME = 'flyout';
+const NAMESPACE = 'default';
+const DATA_STREAM_NAME = `logs-${DATASET_NAME}-${NAMESPACE}`;
+const NOW = Date.now();
+
+const sharedDoc = {
+  logFilepath: '/flyout.log',
+  serviceName: DATASET_NAME,
+  datasetName: DATASET_NAME,
+  namespace: NAMESPACE,
+};
+
+const docs = [
+  {
+    ...sharedDoc,
+    time: NOW + 1000,
+    message: 'full document',
+    logLevel: 'info',
+  },
+  {
+    ...sharedDoc,
+    time: NOW,
+  },
+];
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const dataGrid = getService('dataGrid');
+  const testSubjects = getService('testSubjects');
+  const PageObjects = getPageObjects(['observabilityLogExplorer', 'svlCommonPage']);
+
+  describe('Flyout content customization', () => {
+    let cleanupDataStreamSetup: () => Promise<void>;
+
+    before('initialize tests', async () => {
+      cleanupDataStreamSetup = await PageObjects.observabilityLogExplorer.setupDataStream(
+        DATASET_NAME,
+        NAMESPACE
+      );
+      await PageObjects.observabilityLogExplorer.ingestLogEntries(DATA_STREAM_NAME, docs);
+      await PageObjects.svlCommonPage.login();
+    });
+
+    beforeEach(async () => {
+      await PageObjects.observabilityLogExplorer.navigateTo({
+        from: new Date(NOW - 60_000).toISOString(),
+        to: new Date(NOW + 60_000).toISOString(),
+      });
+    });
+
+    after('clean up archives', async () => {
+      await PageObjects.svlCommonPage.forceLogout();
+      if (cleanupDataStreamSetup) {
+        cleanupDataStreamSetup();
+      }
+    });
+
+    it('should mount the flyout customization content', async () => {
+      await dataGrid.clickRowToggle();
+      await testSubjects.existOrFail('logExplorerFlyoutDetail');
+    });
+
+    it('should display a timestamp badge', async () => {
+      await dataGrid.clickRowToggle();
+      await testSubjects.existOrFail('logExplorerFlyoutLogTimestamp');
+    });
+
+    it('should display a log level badge when available', async () => {
+      await dataGrid.clickRowToggle();
+      await testSubjects.existOrFail('logExplorerFlyoutLogLevel');
+      await dataGrid.closeFlyout();
+
+      await dataGrid.clickRowToggle({ rowIndex: 1 });
+      await testSubjects.missingOrFail('logExplorerFlyoutLogLevel');
+    });
+
+    it('should display a message code block when available', async () => {
+      await dataGrid.clickRowToggle();
+      await testSubjects.existOrFail('logExplorerFlyoutLogMessage');
+      await dataGrid.closeFlyout();
+
+      await dataGrid.clickRowToggle({ rowIndex: 1 });
+      await testSubjects.missingOrFail('logExplorerFlyoutLogMessage');
+    });
+  });
+}
diff --git a/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/index.ts b/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/index.ts
index 77f89dad01f773..6e0b6508696809 100644
--- a/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/index.ts
+++ b/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/index.ts
@@ -14,6 +14,7 @@ export default function ({ loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./dataset_selection_state'));
     loadTestFile(require.resolve('./dataset_selector'));
     loadTestFile(require.resolve('./filter_controls'));
+    loadTestFile(require.resolve('./flyout'));
     loadTestFile(require.resolve('./header_menu'));
   });
 }

From 9761534d03a6885766ac3beb37b7f1da8b81f1f3 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Fri, 27 Oct 2023 12:14:49 +0200
Subject: [PATCH 15/20] test(log-explorer): small page object refactor

---
 .../observability_log_explorer.ts             | 20 +++++--------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/x-pack/test/functional/page_objects/observability_log_explorer.ts b/x-pack/test/functional/page_objects/observability_log_explorer.ts
index adf6ae96e65b2e..1804ae95ddc920 100644
--- a/x-pack/test/functional/page_objects/observability_log_explorer.ts
+++ b/x-pack/test/functional/page_objects/observability_log_explorer.ts
@@ -112,6 +112,7 @@ export function ObservabilityLogExplorerPageObject({
   const dataGrid = getService('dataGrid');
   const es = getService('es');
   const log = getService('log');
+  const queryBar = getService('queryBar');
   const supertest = getService('supertest');
   const testSubjects = getService('testSubjects');
   const toasts = getService('toasts');
@@ -389,24 +390,13 @@ export function ObservabilityLogExplorerPageObject({
     },
 
     // Query Bar
-    getQueryBar() {
-      return testSubjects.find('queryInput');
-    },
-
-    async getQueryBarValue() {
-      const queryBar = await testSubjects.find('queryInput');
-      return queryBar.getAttribute('value');
-    },
-
-    async typeInQueryBar(query: string) {
-      const queryBar = await this.getQueryBar();
-      await queryBar.clearValueWithKeyboard();
-      return queryBar.type(query);
+    getQueryBarValue() {
+      return queryBar.getQueryString();
     },
 
     async submitQuery(query: string) {
-      await this.typeInQueryBar(query);
-      await testSubjects.click('querySubmitButton');
+      await queryBar.setQuery(query);
+      await queryBar.clickQuerySubmitButton();
     },
   };
 }

From c0cf9dc1885b8788633dc13b54edb054836d45d4 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Mon, 30 Oct 2023 10:03:41 +0100
Subject: [PATCH 16/20] refactor(log-explorer): request changes

---
 .../discover_grid_flyout/discover_grid_flyout.tsx         | 1 -
 .../customization_types/flyout_customization.ts           | 2 --
 .../public/components/flyout_detail/flyout_detail.tsx     | 8 ++------
 .../log_explorer/public/components/flyout_detail/types.ts | 8 +++++++-
 .../public/components/flyout_detail/use_doc_detail.ts     | 6 ++----
 .../public/customizations/custom_flyout_content.tsx       | 4 ++--
 .../public/customizations/log_explorer_profile.tsx        | 8 +++++++-
 7 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
index 65855b6197d23b..d8c218efba23ae 100644
--- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
+++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
@@ -179,7 +179,6 @@ export function DiscoverGridFlyout({
   const bodyContent = flyoutCustomization?.Content ? (
     <flyoutCustomization.Content
       actions={contentActions}
-      dataView={dataView}
       doc={actualHit}
       renderDefaultContent={renderDefaultContent}
     />
diff --git a/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts b/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts
index a9cea0444ea92c..84f3f277150391 100644
--- a/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts
+++ b/src/plugins/discover/public/customizations/customization_types/flyout_customization.ts
@@ -5,7 +5,6 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import type { DataView } from '@kbn/data-views-plugin/common';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import React, { type ComponentType } from 'react';
@@ -33,7 +32,6 @@ export interface FlyoutContentActions {
 
 export interface FlyoutContentProps {
   actions: FlyoutContentActions;
-  dataView: DataView;
   doc: DataTableRecord;
   renderDefaultContent: () => React.ReactNode;
 }
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx
index 335fb8fb69db7f..012e5c914ed616 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx
@@ -7,17 +7,13 @@
 
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { FlyoutContentProps } from '@kbn/discover-plugin/public';
 import { LogLevel } from './sub_components/log_level';
 import { Timestamp } from './sub_components/timestamp';
-import { LogDocument } from './types';
+import { FlyoutProps, LogDocument } from './types';
 import { getDocDetailRenderFlags, useDocDetail } from './use_doc_detail';
 import { Message } from './sub_components/message';
 
-export function FlyoutDetail({
-  dataView,
-  doc,
-}: Pick<FlyoutContentProps, 'dataView' | 'doc' | 'actions'>) {
+export function FlyoutDetail({ dataView, doc }: Pick<FlyoutProps, 'dataView' | 'doc' | 'actions'>) {
   const parsedDoc = useDocDetail(doc as LogDocument, { dataView });
 
   const { hasTimestamp, hasLogLevel, hasMessage, hasBadges, hasFlyoutHeader } =
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts b/x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts
index ce06eb9dd01f4f..cf8cfb8170e218 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts
@@ -6,7 +6,13 @@
  */
 
 import type { EuiIconType } from '@elastic/eui/src/components/icon/icon';
-import { DataTableRecord } from '@kbn/discover-utils/types';
+import type { DataView } from '@kbn/data-views-plugin/common';
+import type { FlyoutContentProps } from '@kbn/discover-plugin/public';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+
+export interface FlyoutProps extends FlyoutContentProps {
+  dataView: DataView;
+}
 
 export interface LogDocument extends DataTableRecord {
   flattened: {
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts b/x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts
index 66c7359d71775d..32e4bcd966745f 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/use_doc_detail.ts
@@ -4,16 +4,14 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
-import { FlyoutContentProps } from '@kbn/discover-plugin/public';
 import { formatFieldValue } from '@kbn/discover-utils';
 import { LOG_LEVEL_FIELD, MESSAGE_FIELD, TIMESTAMP_FIELD } from '../../../common/constants';
 import { useKibanaContextForPlugin } from '../../utils/use_kibana';
-import { FlyoutDoc, LogDocument } from './types';
+import { FlyoutDoc, FlyoutProps, LogDocument } from './types';
 
 export function useDocDetail(
   doc: LogDocument,
-  { dataView }: Pick<FlyoutContentProps, 'dataView'>
+  { dataView }: Pick<FlyoutProps, 'dataView'>
 ): FlyoutDoc {
   const { services } = useKibanaContextForPlugin();
 
diff --git a/x-pack/plugins/log_explorer/public/customizations/custom_flyout_content.tsx b/x-pack/plugins/log_explorer/public/customizations/custom_flyout_content.tsx
index 65bf6ea6969c74..a4b473119744a1 100644
--- a/x-pack/plugins/log_explorer/public/customizations/custom_flyout_content.tsx
+++ b/x-pack/plugins/log_explorer/public/customizations/custom_flyout_content.tsx
@@ -6,16 +6,16 @@
  */
 
 import React from 'react';
-import { FlyoutContentProps } from '@kbn/discover-plugin/public';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FlyoutDetail } from '../components/flyout_detail/flyout_detail';
+import { FlyoutProps } from '../components/flyout_detail';
 
 export const CustomFlyoutContent = ({
   actions,
   dataView,
   doc,
   renderDefaultContent,
-}: FlyoutContentProps) => {
+}: FlyoutProps) => {
   return (
     <EuiFlexGroup direction="column">
       {/* Apply custom Log Explorer detail */}
diff --git a/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx b/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
index 14f9b8a2255e3a..85d12847529777 100644
--- a/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
+++ b/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
@@ -8,6 +8,7 @@ import type { CoreStart } from '@kbn/core/public';
 import { CustomizationCallback, DiscoverStateContainer } from '@kbn/discover-plugin/public';
 import React from 'react';
 import { type BehaviorSubject, combineLatest, from, map, Subscription } from 'rxjs';
+import useObservable from 'react-use/lib/useObservable';
 import { dynamic } from '../utils/dynamic';
 import { LogExplorerProfileStateService } from '../state_machines/log_explorer_profile';
 import { LogExplorerStateContainer } from '../components/log_explorer';
@@ -119,9 +120,14 @@ export const createLogExplorerProfileCustomizations =
       Content: (props) => {
         const KibanaContextProviderForPlugin = useKibanaContextForPluginProvider(core, plugins);
 
+        const internalState = useObservable(
+          stateContainer.internalState.state$,
+          stateContainer.internalState.get()
+        );
+
         return (
           <KibanaContextProviderForPlugin>
-            <LazyCustomFlyoutContent {...props} />
+            <LazyCustomFlyoutContent {...props} dataView={internalState.dataView} />
           </KibanaContextProviderForPlugin>
         );
       },

From 223a4907ffddc8f5bc6648e71b1fee5814014626 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Thu, 2 Nov 2023 10:21:36 +0100
Subject: [PATCH 17/20] feat(log-explorer): comment content customization
 application

---
 .../customizations/log_explorer_profile.tsx   | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx b/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
index 85d12847529777..544c67fe49b11e 100644
--- a/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
+++ b/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
@@ -117,20 +117,25 @@ export const createLogExplorerProfileCustomizations =
           viewSurroundingDocument: { disabled: true },
         },
       },
-      Content: (props) => {
-        const KibanaContextProviderForPlugin = useKibanaContextForPluginProvider(core, plugins);
-
-        const internalState = useObservable(
-          stateContainer.internalState.state$,
-          stateContainer.internalState.get()
-        );
-
-        return (
-          <KibanaContextProviderForPlugin>
-            <LazyCustomFlyoutContent {...props} dataView={internalState.dataView} />
-          </KibanaContextProviderForPlugin>
-        );
-      },
+      /**
+       * The Content customization is currently under development, but not MVP ready.
+       * As soon as the following application is commented, the flyout will keep showing the default Discover flyout content.
+       * For local development, just uncomment the following code and you'll be able to see the changes you are working on applied.
+       */
+      // Content: (props) => {
+      //   const KibanaContextProviderForPlugin = useKibanaContextForPluginProvider(core, plugins);
+
+      //   const internalState = useObservable(
+      //     stateContainer.internalState.state$,
+      //     stateContainer.internalState.get()
+      //   );
+
+      //   return (
+      //     <KibanaContextProviderForPlugin>
+      //       <LazyCustomFlyoutContent {...props} dataView={internalState.dataView} />
+      //     </KibanaContextProviderForPlugin>
+      //   );
+      // },
     });
 
     return () => {

From 9b980d82ef09c40aabcfca32ecf8f6a6e16e3c86 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Thu, 2 Nov 2023 10:24:56 +0100
Subject: [PATCH 18/20] tests(log-explorer): skip tests

---
 .../test/functional/apps/observability_log_explorer/flyout.ts  | 3 ++-
 .../observability/observability_log_explorer/flyout.ts         | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/test/functional/apps/observability_log_explorer/flyout.ts b/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
index f8277db16e8db8..6ef43ffec974f0 100644
--- a/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
+++ b/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
@@ -36,7 +36,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const PageObjects = getPageObjects(['observabilityLogExplorer']);
 
-  describe('Flyout content customization', () => {
+  // Skip the tests until the feature will be fully enabled on the Log Explorer.
+  describe.skip('Flyout content customization', () => {
     let cleanupDataStreamSetup: () => Promise<void>;
 
     before('initialize tests', async () => {
diff --git a/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/flyout.ts b/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/flyout.ts
index 79f241c8948b65..e078af9d0451f5 100644
--- a/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/flyout.ts
+++ b/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/flyout.ts
@@ -36,7 +36,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const PageObjects = getPageObjects(['observabilityLogExplorer', 'svlCommonPage']);
 
-  describe('Flyout content customization', () => {
+  // Skip the tests until the feature will be fully enabled on the Log Explorer.
+  describe.skip('Flyout content customization', () => {
     let cleanupDataStreamSetup: () => Promise<void>;
 
     before('initialize tests', async () => {

From c0be1bb1549c93e770e992083563f9afd09d8309 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 2 Nov 2023 10:07:50 +0000
Subject: [PATCH 19/20] [CI] Auto-commit changed files from 'node
 scripts/eslint --no-cache --fix'

---
 .../log_explorer/public/customizations/log_explorer_profile.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx b/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
index 544c67fe49b11e..6ad966e50fd8dc 100644
--- a/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
+++ b/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
@@ -8,7 +8,6 @@ import type { CoreStart } from '@kbn/core/public';
 import { CustomizationCallback, DiscoverStateContainer } from '@kbn/discover-plugin/public';
 import React from 'react';
 import { type BehaviorSubject, combineLatest, from, map, Subscription } from 'rxjs';
-import useObservable from 'react-use/lib/useObservable';
 import { dynamic } from '../utils/dynamic';
 import { LogExplorerProfileStateService } from '../state_machines/log_explorer_profile';
 import { LogExplorerStateContainer } from '../components/log_explorer';

From 46507aa825534c6787af0bbd2a7aa900f1849856 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Thu, 2 Nov 2023 11:27:08 +0100
Subject: [PATCH 20/20] feat(log-explorer): re-enable flyout customization

---
 .../customizations/log_explorer_profile.tsx   | 34 ++++++++-----------
 .../apps/observability_log_explorer/flyout.ts |  3 +-
 .../observability_log_explorer/flyout.ts      |  3 +-
 3 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx b/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
index 6ad966e50fd8dc..85d12847529777 100644
--- a/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
+++ b/x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx
@@ -8,6 +8,7 @@ import type { CoreStart } from '@kbn/core/public';
 import { CustomizationCallback, DiscoverStateContainer } from '@kbn/discover-plugin/public';
 import React from 'react';
 import { type BehaviorSubject, combineLatest, from, map, Subscription } from 'rxjs';
+import useObservable from 'react-use/lib/useObservable';
 import { dynamic } from '../utils/dynamic';
 import { LogExplorerProfileStateService } from '../state_machines/log_explorer_profile';
 import { LogExplorerStateContainer } from '../components/log_explorer';
@@ -116,25 +117,20 @@ export const createLogExplorerProfileCustomizations =
           viewSurroundingDocument: { disabled: true },
         },
       },
-      /**
-       * The Content customization is currently under development, but not MVP ready.
-       * As soon as the following application is commented, the flyout will keep showing the default Discover flyout content.
-       * For local development, just uncomment the following code and you'll be able to see the changes you are working on applied.
-       */
-      // Content: (props) => {
-      //   const KibanaContextProviderForPlugin = useKibanaContextForPluginProvider(core, plugins);
-
-      //   const internalState = useObservable(
-      //     stateContainer.internalState.state$,
-      //     stateContainer.internalState.get()
-      //   );
-
-      //   return (
-      //     <KibanaContextProviderForPlugin>
-      //       <LazyCustomFlyoutContent {...props} dataView={internalState.dataView} />
-      //     </KibanaContextProviderForPlugin>
-      //   );
-      // },
+      Content: (props) => {
+        const KibanaContextProviderForPlugin = useKibanaContextForPluginProvider(core, plugins);
+
+        const internalState = useObservable(
+          stateContainer.internalState.state$,
+          stateContainer.internalState.get()
+        );
+
+        return (
+          <KibanaContextProviderForPlugin>
+            <LazyCustomFlyoutContent {...props} dataView={internalState.dataView} />
+          </KibanaContextProviderForPlugin>
+        );
+      },
     });
 
     return () => {
diff --git a/x-pack/test/functional/apps/observability_log_explorer/flyout.ts b/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
index 6ef43ffec974f0..f8277db16e8db8 100644
--- a/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
+++ b/x-pack/test/functional/apps/observability_log_explorer/flyout.ts
@@ -36,8 +36,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const PageObjects = getPageObjects(['observabilityLogExplorer']);
 
-  // Skip the tests until the feature will be fully enabled on the Log Explorer.
-  describe.skip('Flyout content customization', () => {
+  describe('Flyout content customization', () => {
     let cleanupDataStreamSetup: () => Promise<void>;
 
     before('initialize tests', async () => {
diff --git a/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/flyout.ts b/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/flyout.ts
index e078af9d0451f5..79f241c8948b65 100644
--- a/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/flyout.ts
+++ b/x-pack/test_serverless/functional/test_suites/observability/observability_log_explorer/flyout.ts
@@ -36,8 +36,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const PageObjects = getPageObjects(['observabilityLogExplorer', 'svlCommonPage']);
 
-  // Skip the tests until the feature will be fully enabled on the Log Explorer.
-  describe.skip('Flyout content customization', () => {
+  describe('Flyout content customization', () => {
     let cleanupDataStreamSetup: () => Promise<void>;
 
     before('initialize tests', async () => {