[Log Explorer] Implement Flyout content header (elastic#169832)

## 📓 Summary

Closes elastic#169501 

🛑 ~**Merge blocked by:** elastic#169634

This work implements the first frame for a detailed log flyout.
It adds highlight on the log level, timestamp and message details for a
log.
This first layer of customization will work as a base for all the
upcoming enhancements on the flyout detail.


https://github.com/elastic/kibana/assets/34506779/a1c2997c-5fef-4899-836f-ff810de3f148

---------

Co-authored-by: Marco Antonio Ghiani <[email protected]>
Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Achyut Jhunjhunwala <[email protected]>

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 { DataTableRecord } from '@kbn/discover-utils/types';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import React, { type ComponentType } from 'react';

src/plugins/discover/public/index.ts

@@ -26,6 +26,8 @@ export type {
   DiscoverCustomization,
   DiscoverCustomizationService,
   FlyoutCustomization,
+  FlyoutContentActions,
+  FlyoutContentProps,
   SearchBarCustomization,
   UnifiedHistogramCustomization,
   TopNavCustomization,

x-pack/plugins/log_explorer/kibana.jsonc

@@ -15,6 +15,7 @@
       "data",
       "dataViews",
       "discover",
+      "fieldFormats",
       "fleet",
       "kibanaReact",
       "kibanaUtils",

x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_detail.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { LogLevel } from './sub_components/log_level';
+import { Timestamp } from './sub_components/timestamp';
+import { FlyoutProps, LogDocument } from './types';
+import { getDocDetailRenderFlags, useDocDetail } from './use_doc_detail';
+import { Message } from './sub_components/message';
+
+export function FlyoutDetail({ dataView, doc }: Pick<FlyoutProps, 'dataView' | 'doc' | 'actions'>) {
+  const parsedDoc = useDocDetail(doc as LogDocument, { dataView });
+
+  const { hasTimestamp, hasLogLevel, hasMessage, hasBadges, hasFlyoutHeader } =
+    getDocDetailRenderFlags(parsedDoc);
+
+  return hasFlyoutHeader ? (
+    <EuiFlexGroup direction="column" gutterSize="m" data-test-subj="logExplorerFlyoutDetail">
+      <EuiFlexItem grow={false}>
+        {hasBadges && (
+          <EuiFlexGroup responsive={false} gutterSize="m">
+            {hasLogLevel && (
+              <EuiFlexItem grow={false}>
+                <LogLevel level={parsedDoc['log.level']} />
+              </EuiFlexItem>
+            )}
+            {hasTimestamp && (
+              <EuiFlexItem grow={false}>
+                <Timestamp timestamp={parsedDoc['@timestamp']} />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        )}
+      </EuiFlexItem>
+      {hasMessage && (
+        <EuiFlexItem grow={false}>
+          <Message message={parsedDoc.message} />
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  ) : null;
+}

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';

x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/log_level.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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['log.level'];
+}
+
+export function LogLevel({ level }: LogLevelProps) {
+  if (!level) return null;
+
+  const levelColor = LEVEL_DICT[level] ?? LEVEL_DICT.default;
+
+  return (
+    <EuiBadge color={levelColor} data-test-subj="logExplorerFlyoutLogLevel">
+      {level}
+    </EuiBadge>
+  );
+}

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" data-test-subj="logExplorerFlyoutLogMessage">
+      <EuiFlexItem>
+        <EuiText color="subdued" size="xs">
+          {flyoutMessageLabel}
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiCodeBlock overflowHeight={100} paddingSize="m" isCopyable language="txt" fontSize="m">
+          {message}
+        </EuiCodeBlock>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/timestamp.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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" data-test-subj="logExplorerFlyoutLogTimestamp">
+      {timestamp}
+    </EuiBadge>
+  );
+}

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',
+});

x-pack/plugins/log_explorer/public/components/flyout_detail/types.ts

@@ -0,0 +1,35 @@
+/*
+ * 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 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: {
+    '@timestamp': string;
+    'log.level'?: string;
+    message?: string;
+  };
+}
+
+export interface FlyoutDoc {
+  '@timestamp': string;
+  'log.level'?: string;
+  message?: string;
+}
+
+export interface FlyoutHighlightField {
+  label: string;
+  value: string;
+  iconType?: EuiIconType;
+}

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 { formatFieldValue } from '@kbn/discover-utils';
+import { LOG_LEVEL_FIELD, MESSAGE_FIELD, TIMESTAMP_FIELD } from '../../../common/constants';
+import { useKibanaContextForPlugin } from '../../utils/use_kibana';
+import { FlyoutDoc, FlyoutProps, LogDocument } from './types';
+
+export function useDocDetail(
+  doc: LogDocument,
+  { dataView }: Pick<FlyoutProps, 'dataView'>
+): FlyoutDoc {
+  const { services } = useKibanaContextForPlugin();
+
+  const formatField = <F extends keyof LogDocument['flattened']>(
+    field: F
+  ): LogDocument['flattened'][F] => {
+    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 {
+    [LOG_LEVEL_FIELD]: level,
+    [TIMESTAMP_FIELD]: timestamp,
+    [MESSAGE_FIELD]: message,
+  };
+}
+
+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;
+
+  const hasFlyoutHeader = hasBadges || hasMessage;
+
+  return {
+    hasTimestamp,
+    hasLogLevel,
+    hasMessage,
+    hasBadges,
+    hasFlyoutHeader,
+  };
+};

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 { 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,
+}: FlyoutProps) => {
+  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;

x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx

@@ -8,14 +8,16 @@ 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';
 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 +117,20 @@ 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>
+        );
+      },
     });
 
     return () => {

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;
 }

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/**/*"]
 }