[Security Solution][Documents Flyout] Fix analyzer preview copy (#197348

)

## Summary

This PR fixed a small copy bug related to the visualizations in flyout
feature. When analyzer preview is open, the header and footer should
reflect whether the document is an alert or event.

Prerequisite: enable advanced setting `enableVisualizationsInFlyout`


![image](https://github.com/user-attachments/assets/795fa383-2de3-468d-a962-cd20bdf5da13)


![image](https://github.com/user-attachments/assets/30b87a52-1a18-4d7c-aab8-edb273faf7f2)



### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

x-pack/plugins/security_solution/public/flyout/document_details/analyzer_panels/index.tsx

@@ -13,7 +13,7 @@ import type { DocumentDetailsAnalyzerPanelKey } from '../shared/constants/panel_
 import { DetailsPanel } from '../../../resolver/view/details_panel';
 import type { NodeEventOnClick } from '../../../resolver/view/panels/node_events_of_type';
 import { DocumentDetailsPreviewPanelKey } from '../shared/constants/panel_keys';
-import { ALERT_PREVIEW_BANNER } from '../preview/constants';
+import { ALERT_PREVIEW_BANNER, EVENT_PREVIEW_BANNER } from '../preview/constants';
 
 interface AnalyzerPanelProps extends Record<string, unknown> {
   /**
@@ -34,7 +34,7 @@ export const AnalyzerPanel: React.FC<AnalyzerPanelProps> = ({ resolverComponentI
   const { openPreviewPanel } = useExpandableFlyoutApi();
 
   const openPreview = useCallback<NodeEventOnClick>(
-    ({ documentId, indexName, scopeId }) =>
+    ({ documentId, indexName, scopeId, isAlert }) =>
       () => {
         openPreviewPanel({
           id: DocumentDetailsPreviewPanelKey,
@@ -43,7 +43,7 @@ export const AnalyzerPanel: React.FC<AnalyzerPanelProps> = ({ resolverComponentI
             indexName,
             scopeId,
             isPreviewMode: true,
-            banner: ALERT_PREVIEW_BANNER,
+            banner: isAlert ? ALERT_PREVIEW_BANNER : EVENT_PREVIEW_BANNER,
           },
         });
       },

x-pack/plugins/security_solution/public/flyout/document_details/preview/constants.ts

@@ -8,12 +8,17 @@
 import { i18n } from '@kbn/i18n';
 
 export const ALERT_PREVIEW_BANNER = {
-  title: i18n.translate(
-    'xpack.securitySolution.flyout.left.insights.correlations.alertPreviewTitle',
-    {
-      defaultMessage: 'Preview alert details',
-    }
-  ),
+  title: i18n.translate('xpack.securitySolution.flyout.preview.alertPreviewTitle', {
+    defaultMessage: 'Preview alert details',
+  }),
+  backgroundColor: 'warning',
+  textColor: 'warning',
+};
+
+export const EVENT_PREVIEW_BANNER = {
+  title: i18n.translate('xpack.securitySolution.flyout.preview.eventPreviewTitle', {
+    defaultMessage: 'Preview event details',
+  }),
   backgroundColor: 'warning',
   textColor: 'warning',
 };

x-pack/plugins/security_solution/public/flyout/document_details/preview/footer.test.tsx

@@ -34,7 +34,7 @@ describe('<PreviewPanelFooter />', () => {
     jest.mocked(useExpandableFlyoutApi).mockReturnValue(mockFlyoutApi);
   });
 
-  it('should render footer', () => {
+  it('should render footer for alert', () => {
     const { getByTestId } = render(
       <TestProviders>
         <DocumentDetailsContext.Provider value={mockContextValue}>
@@ -43,6 +43,20 @@ describe('<PreviewPanelFooter />', () => {
       </TestProviders>
     );
     expect(getByTestId(PREVIEW_FOOTER_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(PREVIEW_FOOTER_TEST_ID)).toHaveTextContent('Show full alert details');
+  });
+
+  it('should render footer for event', () => {
+    const { getByTestId } = render(
+      <TestProviders>
+        <DocumentDetailsContext.Provider
+          value={{ ...mockContextValue, getFieldsData: () => 'event' }}
+        >
+          <PreviewPanelFooter />
+        </DocumentDetailsContext.Provider>
+      </TestProviders>
+    );
+    expect(getByTestId(PREVIEW_FOOTER_TEST_ID)).toHaveTextContent('Show full event details');
   });
 
   it('should open document details flyout when clicked', () => {

x-pack/plugins/security_solution/public/flyout/document_details/preview/footer.tsx

@@ -6,10 +6,12 @@
  */
 
 import { EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import { FlyoutFooter } from '@kbn/security-solution-common';
+import { getField } from '../shared/utils';
+import { EventKind } from '../shared/constants/event_kinds';
 import { DocumentDetailsRightPanelKey } from '../shared/constants/panel_keys';
 import { useDocumentDetailsContext } from '../shared/context';
 import { PREVIEW_FOOTER_TEST_ID, PREVIEW_FOOTER_LINK_TEST_ID } from './test_ids';
@@ -19,10 +21,15 @@ import { useKibana } from '../../../common/lib/kibana';
  * Footer at the bottom of preview panel with a link to open document details flyout
  */
 export const PreviewPanelFooter = () => {
-  const { eventId, indexName, scopeId } = useDocumentDetailsContext();
+  const { eventId, indexName, scopeId, getFieldsData } = useDocumentDetailsContext();
   const { openFlyout } = useExpandableFlyoutApi();
   const { telemetry } = useKibana().services;
 
+  const isAlert = useMemo(
+    () => getField(getFieldsData('event.kind')) === EventKind.signal,
+    [getFieldsData]
+  );
+
   const openDocumentFlyout = useCallback(() => {
     openFlyout({
       right: {
@@ -49,9 +56,12 @@ export const PreviewPanelFooter = () => {
             target="_blank"
             data-test-subj={PREVIEW_FOOTER_LINK_TEST_ID}
           >
-            {i18n.translate('xpack.securitySolution.flyout.preview.openFlyoutLabel', {
-              defaultMessage: 'Show full alert details',
-            })}
+            <>
+              {i18n.translate('xpack.securitySolution.flyout.preview.openFlyoutLabel', {
+                values: { isAlert },
+                defaultMessage: 'Show full {isAlert, select, true{alert} other{event}} details',
+              })}
+            </>
           </EuiLink>
         </EuiFlexItem>
       </EuiFlexGroup>

x-pack/plugins/security_solution/public/resolver/view/panels/node_events_of_type.test.tsx

@@ -130,6 +130,7 @@ describe('<NodeEventsListItem />', () => {
             '@timestamp': 1726589803115,
             event: {
               id: 'event id',
+              kind: 'signal',
             },
           }}
         />
@@ -141,6 +142,7 @@ describe('<NodeEventsListItem />', () => {
       documentId: 'test _id',
       indexName: '_index',
       scopeId: 'test',
+      isAlert: true,
     });
   });
 });

x-pack/plugins/security_solution/public/resolver/view/panels/node_events_of_type.tsx

@@ -30,15 +30,18 @@ import { useFormattedDate } from './use_formatted_date';
 import { expandDottedObject } from '../../../../common/utils/expand_dotted';
 import type { State } from '../../../common/store/types';
 import { userRequestedAdditionalRelatedEvents } from '../../store/data/action';
+import { EventKind } from '../../../flyout/document_details/shared/constants/event_kinds';
 
 export type NodeEventOnClick = ({
   documentId,
   indexName,
   scopeId,
+  isAlert,
 }: {
   documentId: string | undefined;
   indexName: string | undefined;
   scopeId: string;
+  isAlert: boolean;
 }) => () => void;
 
 /**
@@ -128,6 +131,7 @@ export const NodeEventsListItem = memo(function ({
   const expandedEvent = expandDottedObject(event);
   const timestamp = eventModel.eventTimestamp(expandedEvent);
   const eventID = eventModel.eventID(expandedEvent);
+  const isAlert = eventModel.eventKind(expandedEvent)[0] === EventKind.signal;
   const documentId = eventModel.documentID(expandedEvent);
   const indexName = eventModel.indexName(expandedEvent);
   const winlogRecordID = eventModel.winlogRecordID(expandedEvent);
@@ -172,7 +176,7 @@ export const NodeEventsListItem = memo(function ({
       {nodeEventOnClick ? (
         <EuiButtonEmpty
           data-test-subj="resolver:panel:node-events-in-category:event-link"
-          onClick={nodeEventOnClick({ documentId, indexName, scopeId: id })}
+          onClick={nodeEventOnClick({ documentId, indexName, scopeId: id, isAlert })}
         >
           <DescriptiveName event={expandedEvent} />
         </EuiButtonEmpty>

x-pack/plugins/translations/translations/fr-FR.json

@@ -38718,7 +38718,6 @@
     "xpack.securitySolution.flyout.entityDetails.valuesColumnTitle": "Valeurs",
     "xpack.securitySolution.flyout.host.preview.viewDetailsLabel": "Ouvrir le menu volant des détails de l'hôte",
     "xpack.securitySolution.flyout.left.insights.buttonGroupLegendLabel": "Options des informations exploitables",
-    "xpack.securitySolution.flyout.left.insights.correlations.alertPreviewTitle": "Aperçu des détails de l'alerte",
     "xpack.securitySolution.flyout.left.insights.correlations.ancestryAlertsNoDataDescription": "Aucune alerte associée par ancêtre.",
     "xpack.securitySolution.flyout.left.insights.correlations.ancestryAlertsTitle": "{count} {count, plural, one {alerte associée} other {alertes associées}} par ancêtre",
     "xpack.securitySolution.flyout.left.insights.correlations.nameColumnLabel": "Nom",
@@ -38794,7 +38793,6 @@
     "xpack.securitySolution.flyout.left.visualize.sessionViewButtonLabel": "Vue de session",
     "xpack.securitySolution.flyout.left.visualize.tabLabel": "Visualize",
     "xpack.securitySolution.flyout.preview.alertReason.panelTitle": "Raison d'alerte",
-    "xpack.securitySolution.flyout.preview.openFlyoutLabel": "Afficher tous les détails de l'alerte",
     "xpack.securitySolution.flyout.preview.rule.aboutLabel": "À propos",
     "xpack.securitySolution.flyout.preview.rule.actionsLabel": "Actions",
     "xpack.securitySolution.flyout.preview.rule.definitionLabel": "Définition",

x-pack/plugins/translations/translations/ja-JP.json

@@ -38461,7 +38461,6 @@
     "xpack.securitySolution.flyout.entityDetails.valuesColumnTitle": "値",
     "xpack.securitySolution.flyout.host.preview.viewDetailsLabel": "ホスト詳細フライアウトを開く",
     "xpack.securitySolution.flyout.left.insights.buttonGroupLegendLabel": "インサイトオプション",
-    "xpack.securitySolution.flyout.left.insights.correlations.alertPreviewTitle": "アラート詳細を表示",
     "xpack.securitySolution.flyout.left.insights.correlations.ancestryAlertsNoDataDescription": "上位項目に関連するアラートはありません。",
     "xpack.securitySolution.flyout.left.insights.correlations.ancestryAlertsTitle": "上位項目に関連する{count}件の{count, plural, other {アラート}}",
     "xpack.securitySolution.flyout.left.insights.correlations.nameColumnLabel": "名前",
@@ -38537,7 +38536,6 @@
     "xpack.securitySolution.flyout.left.visualize.sessionViewButtonLabel": "セッションビュー",
     "xpack.securitySolution.flyout.left.visualize.tabLabel": "可視化",
     "xpack.securitySolution.flyout.preview.alertReason.panelTitle": "アラートの理由",
-    "xpack.securitySolution.flyout.preview.openFlyoutLabel": "完全なアラート詳細を表示",
     "xpack.securitySolution.flyout.preview.rule.aboutLabel": "概要",
     "xpack.securitySolution.flyout.preview.rule.actionsLabel": "アクション",
     "xpack.securitySolution.flyout.preview.rule.definitionLabel": "定義",

x-pack/plugins/translations/translations/zh-CN.json

@@ -38507,7 +38507,6 @@
     "xpack.securitySolution.flyout.entityDetails.valuesColumnTitle": "值",
     "xpack.securitySolution.flyout.host.preview.viewDetailsLabel": "打开主机详情浮出控件",
     "xpack.securitySolution.flyout.left.insights.buttonGroupLegendLabel": "洞见选项",
-    "xpack.securitySolution.flyout.left.insights.correlations.alertPreviewTitle": "预览告警详情",
     "xpack.securitySolution.flyout.left.insights.correlations.ancestryAlertsNoDataDescription": "无告警与体系相关。",
     "xpack.securitySolution.flyout.left.insights.correlations.ancestryAlertsTitle": "{count} 个{count, plural, other {告警}}与体系相关",
     "xpack.securitySolution.flyout.left.insights.correlations.nameColumnLabel": "名称",
@@ -38583,7 +38582,6 @@
     "xpack.securitySolution.flyout.left.visualize.sessionViewButtonLabel": "会话视图",
     "xpack.securitySolution.flyout.left.visualize.tabLabel": "Visualize",
     "xpack.securitySolution.flyout.preview.alertReason.panelTitle": "告警原因",
-    "xpack.securitySolution.flyout.preview.openFlyoutLabel": "显示完整告警详情",
     "xpack.securitySolution.flyout.preview.rule.aboutLabel": "关于",
     "xpack.securitySolution.flyout.preview.rule.actionsLabel": "操作",
     "xpack.securitySolution.flyout.preview.rule.definitionLabel": "定义",