[Log Explorer] Add logic to display highlights in Flyout

x-pack/plugins/log_explorer/common/constants.ts

@@ -13,6 +13,19 @@ export const HOST_NAME_FIELD = 'host.name';
 export const LOG_LEVEL_FIELD = 'log.level';
 export const MESSAGE_FIELD = 'message';
 export const SERVICE_NAME_FIELD = 'service.name';
+export const TRACE_ID = 'trace.id';
+
+export const AGENT_NAME = 'agent.name';
+export const ORCHESTRATOR_CLUSTER_NAME = 'orchestrator.cluster.name';
+export const ORCHESTRATOR_RESOURCE_ID = 'orchestrator.resource.id';
+export const CLOUD_PROVIDER = 'cloud.provider';
+export const CLOUD_REGION = 'cloud.region';
+export const CLOUD_AVAILABILITY_ZONE = 'cloud.availability_zone';
+export const CLOUD_PROJECT_ID = 'cloud.project.id';
+export const CLOUD_INSTANCE_ID = 'cloud.instance.id';
+export const LOG_FILE_PATH = 'log.file.path';
+export const DATASTREAM_NAMESPACE = 'data_stream.namespace';
+export const DATASTREAM_DATASET = 'data_stream.dataset';
 
 // Sizing
 export const DATA_GRID_COLUMN_WIDTH_SMALL = 240;

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

@@ -6,42 +6,24 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { LogLevel } from './sub_components/log_level';
-import { Timestamp } from './sub_components/timestamp';
+import { EuiHorizontalRule } from '@elastic/eui';
 import { FlyoutProps, LogDocument } from './types';
-import { getDocDetailRenderFlags, useDocDetail } from './use_doc_detail';
-import { Message } from './sub_components/message';
+import { useDocDetail } from './use_doc_detail';
+import { FlyoutHeader } from './fylout_header';
+import { FlyoutHighlights } from './flyout_highlights';
 
-export function FlyoutDetail({ dataView, doc }: Pick<FlyoutProps, 'dataView' | 'doc' | 'actions'>) {
+export function FlyoutDetail({
+  dataView,
+  doc,
+  actions,
+}: 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;
+  return (
+    <>
+      <FlyoutHeader doc={parsedDoc} />
+      <EuiHorizontalRule margin="xs" />
+      <FlyoutHighlights formattedDoc={parsedDoc} flattenedDoc={doc.flattened} actions={actions} />
+    </>
+  );
 }

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

@@ -0,0 +1,217 @@
+/*
+ * 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 { EuiPanel, EuiFlexItem } from '@elastic/eui';
+import React from 'react';
+import { FlyoutContentActions } from '@kbn/discover-plugin/public';
+import { DataTableRecord } from '@kbn/discover-utils/src/types';
+import { FlyoutDoc } from './types';
+import * as constants from '../../../common/constants';
+import { HighlightField } from './sub_components/highlight_field';
+import {
+  cloudAccordionTitle,
+  flyoutCloudAvailabilityZoneLabel,
+  flyoutCloudInstanceIdLabel,
+  flyoutCloudProjectIdLabel,
+  flyoutCloudProviderLabel,
+  flyoutCloudRegionLabel,
+  flyoutDatasetLabel,
+  flyoutHostNameLabel,
+  flyoutLogPathFileLabel,
+  flyoutNamespaceLabel,
+  flyoutOrchestratorClusterNameLabel,
+  flyoutOrchestratorResourceIdLabel,
+  flyoutServiceLabel,
+  flyoutShipperLabel,
+  flyoutTraceLabel,
+  infraAccordionTitle,
+  otherAccordionTitle,
+  serviceAccordionTitle,
+} from './translations';
+import { HighlightSection } from './sub_components/highlight_container';
+import { DiscoverActionContext } from '../../context/discover_actions/discover_actions_context';
+
+export function FlyoutHighlights({
+  formattedDoc,
+  flattenedDoc,
+  actions,
+}: {
+  formattedDoc: FlyoutDoc;
+  flattenedDoc: DataTableRecord['flattened'];
+  actions: FlyoutContentActions;
+}) {
+  return (
+    <DiscoverActionContext.Provider value={{ actions }}>
+      <EuiPanel paddingSize="m" hasShadow={false} hasBorder={true}>
+        <HighlightSection title={serviceAccordionTitle}>
+          {formattedDoc[constants.SERVICE_NAME_FIELD] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutServiceLabel}
+                field={constants.SERVICE_NAME_FIELD}
+                value={flattenedDoc[constants.SERVICE_NAME_FIELD]}
+                formattedValue={formattedDoc[constants.SERVICE_NAME_FIELD]}
+                dataTestSubj="logExplorerFlyoutService"
+              />
+            </EuiFlexItem>
+          )}
+          {formattedDoc[constants.TRACE_ID] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutTraceLabel}
+                field={constants.TRACE_ID}
+                value={flattenedDoc[constants.TRACE_ID]}
+                formattedValue={formattedDoc[constants.TRACE_ID]}
+                dataTestSubj="logExplorerFlyoutTrace"
+              />
+            </EuiFlexItem>
+          )}
+        </HighlightSection>
+
+        <HighlightSection title={infraAccordionTitle}>
+          {formattedDoc[constants.HOST_NAME_FIELD] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutHostNameLabel}
+                field={constants.HOST_NAME_FIELD}
+                value={flattenedDoc[constants.HOST_NAME_FIELD]}
+                formattedValue={formattedDoc[constants.HOST_NAME_FIELD]}
+                dataTestSubj="logExplorerFlyoutHostName"
+              />
+            </EuiFlexItem>
+          )}
+          {formattedDoc[constants.ORCHESTRATOR_CLUSTER_NAME] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutOrchestratorClusterNameLabel}
+                field={constants.ORCHESTRATOR_CLUSTER_NAME}
+                value={flattenedDoc[constants.ORCHESTRATOR_CLUSTER_NAME]}
+                formattedValue={formattedDoc[constants.ORCHESTRATOR_CLUSTER_NAME]}
+                dataTestSubj="logExplorerFlyoutClusterName"
+              />
+            </EuiFlexItem>
+          )}
+          {formattedDoc[constants.ORCHESTRATOR_RESOURCE_ID] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutOrchestratorResourceIdLabel}
+                field={constants.ORCHESTRATOR_RESOURCE_ID}
+                value={flattenedDoc[constants.ORCHESTRATOR_RESOURCE_ID]}
+                formattedValue={formattedDoc[constants.ORCHESTRATOR_RESOURCE_ID]}
+                dataTestSubj="logExplorerFlyoutResourceId"
+              />
+            </EuiFlexItem>
+          )}
+        </HighlightSection>
+
+        <HighlightSection title={cloudAccordionTitle}>
+          {formattedDoc[constants.CLOUD_PROVIDER] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutCloudProviderLabel}
+                field={constants.CLOUD_PROVIDER}
+                value={flattenedDoc[constants.CLOUD_PROVIDER]}
+                formattedValue={formattedDoc[constants.CLOUD_PROVIDER]}
+                dataTestSubj="logExplorerFlyoutCloudProvider"
+              />
+            </EuiFlexItem>
+          )}
+          {formattedDoc[constants.CLOUD_REGION] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutCloudRegionLabel}
+                field={constants.CLOUD_REGION}
+                value={flattenedDoc[constants.CLOUD_REGION]}
+                formattedValue={formattedDoc[constants.CLOUD_REGION]}
+                dataTestSubj="logExplorerFlyoutCloudRegion"
+              />
+            </EuiFlexItem>
+          )}
+          {formattedDoc[constants.CLOUD_AVAILABILITY_ZONE] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutCloudAvailabilityZoneLabel}
+                field={constants.CLOUD_AVAILABILITY_ZONE}
+                value={flattenedDoc[constants.CLOUD_AVAILABILITY_ZONE]}
+                formattedValue={formattedDoc[constants.CLOUD_AVAILABILITY_ZONE]}
+                dataTestSubj="logExplorerFlyoutCloudAz"
+              />
+            </EuiFlexItem>
+          )}
+          {formattedDoc[constants.CLOUD_PROJECT_ID] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutCloudProjectIdLabel}
+                field={constants.CLOUD_PROJECT_ID}
+                value={flattenedDoc[constants.CLOUD_PROJECT_ID]}
+                formattedValue={formattedDoc[constants.CLOUD_PROJECT_ID]}
+                dataTestSubj="logExplorerFlyoutCloudProjectId"
+              />
+            </EuiFlexItem>
+          )}
+          {formattedDoc[constants.CLOUD_INSTANCE_ID] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutCloudInstanceIdLabel}
+                field={constants.CLOUD_INSTANCE_ID}
+                value={flattenedDoc[constants.CLOUD_INSTANCE_ID]}
+                formattedValue={formattedDoc[constants.CLOUD_INSTANCE_ID]}
+                dataTestSubj="logExplorerFlyoutCloudInstanceId"
+              />
+            </EuiFlexItem>
+          )}
+        </HighlightSection>
+
+        <HighlightSection title={otherAccordionTitle} showBottomRule={false}>
+          {formattedDoc[constants.LOG_FILE_PATH] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutLogPathFileLabel}
+                field={constants.LOG_FILE_PATH}
+                value={flattenedDoc[constants.LOG_FILE_PATH]}
+                formattedValue={formattedDoc[constants.LOG_FILE_PATH]}
+                dataTestSubj="logExplorerFlyoutLogPathFile"
+              />
+            </EuiFlexItem>
+          )}
+          {formattedDoc[constants.DATASTREAM_NAMESPACE] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutNamespaceLabel}
+                field={constants.DATASTREAM_NAMESPACE}
+                value={flattenedDoc[constants.DATASTREAM_NAMESPACE]}
+                formattedValue={formattedDoc[constants.DATASTREAM_NAMESPACE]}
+                dataTestSubj="logExplorerFlyoutNamespace"
+              />
+            </EuiFlexItem>
+          )}
+          {formattedDoc[constants.DATASTREAM_DATASET] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutDatasetLabel}
+                field={constants.DATASTREAM_DATASET}
+                value={flattenedDoc[constants.DATASTREAM_DATASET]}
+                formattedValue={formattedDoc[constants.DATASTREAM_DATASET]}
+                dataTestSubj="logExplorerFlyoutDataset"
+              />
+            </EuiFlexItem>
+          )}
+          {formattedDoc[constants.AGENT_NAME] && (
+            <EuiFlexItem>
+              <HighlightField
+                label={flyoutShipperLabel}
+                field={constants.AGENT_NAME}
+                value={flattenedDoc[constants.AGENT_NAME]}
+                formattedValue={formattedDoc[constants.AGENT_NAME]}
+                dataTestSubj="logExplorerFlyoutLogShipper"
+              />
+            </EuiFlexItem>
+          )}
+        </HighlightSection>
+      </EuiPanel>
+    </DiscoverActionContext.Provider>
+  );
+}

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

@@ -0,0 +1,46 @@
+/*
+ * 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 { FlyoutDoc } from './types';
+import { getDocDetailHeaderRenderFlags } from './use_doc_detail';
+import { LogLevel } from './sub_components/log_level';
+import { Timestamp } from './sub_components/timestamp';
+import { Message } from './sub_components/message';
+import * as constants from '../../../common/constants';
+
+export function FlyoutHeader({ doc }: { doc: FlyoutDoc }) {
+  const { hasTimestamp, hasLogLevel, hasMessage, hasBadges, hasFlyoutHeader } =
+    getDocDetailHeaderRenderFlags(doc);
+
+  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={doc[constants.LOG_LEVEL_FIELD]} />
+              </EuiFlexItem>
+            )}
+            {hasTimestamp && (
+              <EuiFlexItem grow={false}>
+                <Timestamp timestamp={doc[constants.TIMESTAMP_FIELD]} />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        )}
+      </EuiFlexItem>
+      {hasMessage && (
+        <EuiFlexItem grow={false}>
+          <Message message={doc[constants.MESSAGE_FIELD]} />
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  ) : null;
+}

x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_container.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 {
+  EuiAccordion,
+  EuiFlexGrid,
+  EuiHorizontalRule,
+  EuiTitle,
+  useGeneratedHtmlId,
+} from '@elastic/eui';
+
+interface HighlightSectionProps {
+  title: string;
+  children: React.ReactNode;
+  showBottomRule?: boolean;
+}
+
+export function HighlightSection({
+  title,
+  children,
+  showBottomRule = true,
+}: HighlightSectionProps) {
+  const shouldRenderSection = React.Children.toArray(children).filter(Boolean).length > 0;
+  const accordionTitle = (
+    <EuiTitle size="xs">
+      <p>{title}</p>
+    </EuiTitle>
+  );
+
+  const accordionId = useGeneratedHtmlId({
+    prefix: title,
+  });
+
+  return shouldRenderSection ? (
+    <>
+      <EuiAccordion
+        id={accordionId}
+        buttonContent={accordionTitle}
+        paddingSize="s"
+        initialIsOpen={true}
+        data-test-subj={title}
+      >
+        <EuiFlexGrid columns={3}>{children}</EuiFlexGrid>
+      </EuiAccordion>
+      {showBottomRule && <EuiHorizontalRule margin="xs" />}
+    </>
+  ) : null;
+}