[8.x] [Security Solution] Fix analyzer no data message in flyout when…

… analyzer is not enabled (#211981) (#211989) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] Fix analyzer no data message in flyout when analyzer is not enabled (#211981)](#211981)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: christineweng <18648970+christineweng@users.noreply.github.com>
elastic · Feb 21, 2025 · 955e0a6 · 955e0a6
1 parent f1f557f
commit 955e0a6
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 28 deletions.
diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@@ -40618,7 +40618,6 @@
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.analyzerPreviewTitle": "Aperçu de l'analyseur",
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.errorDescription": "Une erreur empêche l'analyse de cette alerte.",
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.loadingAriaLabel": "aperçu de l'analyseur",
-    "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.noDataDescription": "Vous pouvez uniquement visualiser les événements déclenchés par les hôtes configurés avec l'intégration Elastic Defend ou les données {sysmon} provenant de {winlogbeat}. Pour en savoir plus, consultez {link}.",
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.noDataLinkText": "Visualiser l'analyseur d'événement",
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.treeViewAriaLabel": "Aperçu de l'analyseur",
     "xpack.securitySolution.flyout.right.visualizations.assignees.popoverTooltip": "Assigner une alerte",

diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@@ -40474,7 +40474,6 @@
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.analyzerPreviewTitle": "アナライザープレビュー",
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.errorDescription": "エラーが発生したため、このアラートを分析できません。",
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.loadingAriaLabel": "アナライザープレビュー",
-    "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.noDataDescription": "Elastic Defend統合で構成されたホストまたは{winlogbeat}の{sysmon}データによってトリガーされたイベントのみを可視化できます。詳細については、{link}を参照してください。",
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.noDataLinkText": "ビジュアルイベントアナライザー",
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.treeViewAriaLabel": "アナライザープレビュー",
     "xpack.securitySolution.flyout.right.visualizations.assignees.popoverTooltip": "アラートの割り当て",

diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@@ -40570,7 +40570,6 @@
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.analyzerPreviewTitle": "分析器预览",
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.errorDescription": "出现错误，无法分析此告警。",
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.loadingAriaLabel": "分析器预览",
-    "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.noDataDescription": "您只能可视化由使用 Elastic Defend 集成或来自 {winlogbeat} 的任何 {sysmon} 数据配置的主机触发的事件。请参阅 {link} 了解更多信息。",
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.noDataLinkText": "可视化事件分析器",
     "xpack.securitySolution.flyout.right.visualizations.analyzerPreview.treeViewAriaLabel": "分析器预览",
     "xpack.securitySolution.flyout.right.visualizations.assignees.popoverTooltip": "分配告警",

diff --git a/...s/security_solution/public/flyout/document_details/left/components/analyze_graph.test.tsx b/...s/security_solution/public/flyout/document_details/left/components/analyze_graph.test.tsx
@@ -17,6 +17,7 @@ import { ANALYZER_GRAPH_TEST_ID } from './test_ids';
 import { useWhichFlyout } from '../../shared/hooks/use_which_flyout';
 import { mockFlyoutApi } from '../../shared/mocks/mock_flyout_context';
 import { DocumentDetailsAnalyzerPanelKey } from '../../shared/constants/panel_keys';
+import { useIsInvestigateInResolverActionEnabled } from '../../../../detections/components/alerts_table/timeline_actions/investigate_in_resolver';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
@@ -25,6 +26,10 @@ jest.mock('react-router-dom', () => {
 jest.mock('@kbn/expandable-flyout');
 jest.mock('../../../../resolver/view/use_resolver_query_params_cleaner');
 jest.mock('../../shared/hooks/use_which_flyout');
+jest.mock(
+  '../../../../detections/components/alerts_table/timeline_actions/investigate_in_resolver'
+);
+
 const mockUseWhichFlyout = useWhichFlyout as jest.Mock;
 const FLYOUT_KEY = 'securitySolution';
 
@@ -38,13 +43,17 @@ jest.mock('react-redux', () => {
   };
 });
 
+const NO_ANALYZER_MESSAGE =
+  'You can only visualize events triggered by hosts configured with the Elastic Defend integration or any sysmon data from winlogbeat. Refer to Visual event analyzer(external, opens in a new tab or window) for more information.';
+
 describe('<AnalyzeGraph />', () => {
   beforeEach(() => {
     mockUseWhichFlyout.mockReturnValue(FLYOUT_KEY);
     jest.mocked(useExpandableFlyoutApi).mockReturnValue(mockFlyoutApi);
   });
 
   it('renders analyzer graph correctly', () => {
+    (useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
     const contextValue = {
       eventId: 'eventId',
       scopeId: TableId.test,
@@ -60,7 +69,26 @@ describe('<AnalyzeGraph />', () => {
     expect(wrapper.getByTestId(ANALYZER_GRAPH_TEST_ID)).toBeInTheDocument();
   });
 
+  it('renders no data message when analyzer is not enabled', () => {
+    (useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(false);
+    const contextValue = {
+      eventId: 'eventId',
+      scopeId: TableId.test,
+      dataAsNestedObject: {},
+    } as unknown as DocumentDetailsContext;
+
+    const { container } = render(
+      <TestProviders>
+        <DocumentDetailsContext.Provider value={contextValue}>
+          <AnalyzeGraph />
+        </DocumentDetailsContext.Provider>
+      </TestProviders>
+    );
+    expect(container).toHaveTextContent(NO_ANALYZER_MESSAGE);
+  });
+
   it('clicking view button should open details panel in preview', () => {
+    (useIsInvestigateInResolverActionEnabled as jest.Mock).mockReturnValue(true);
     const contextValue = {
       eventId: 'eventId',
       scopeId: TableId.test,

diff --git a/...lugins/security_solution/public/flyout/document_details/left/components/analyze_graph.tsx b/...lugins/security_solution/public/flyout/document_details/left/components/analyze_graph.tsx
@@ -9,13 +9,16 @@ import type { FC } from 'react';
 import React, { useMemo, useCallback } from 'react';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import { i18n } from '@kbn/i18n';
+import { EuiPanel } from '@elastic/eui';
 import { useWhichFlyout } from '../../shared/hooks/use_which_flyout';
 import { useDocumentDetailsContext } from '../../shared/context';
 import { ANALYZER_GRAPH_TEST_ID } from './test_ids';
 import { Resolver } from '../../../../resolver/view';
 import { useTimelineDataFilters } from '../../../../timelines/containers/use_timeline_data_filters';
 import { isActiveTimeline } from '../../../../helpers';
 import { DocumentDetailsAnalyzerPanelKey } from '../../shared/constants/panel_keys';
+import { useIsInvestigateInResolverActionEnabled } from '../../../../detections/components/alerts_table/timeline_actions/investigate_in_resolver';
+import { AnalyzerPreviewNoDataMessage } from '../../right/components/analyzer_preview_container';
 
 export const ANALYZE_GRAPH_ID = 'analyze_graph';
 
@@ -34,7 +37,9 @@ export const ANALYZER_PREVIEW_BANNER = {
  * Analyzer graph view displayed in the document details expandable flyout left section under the Visualize tab
  */
 export const AnalyzeGraph: FC = () => {
-  const { eventId, scopeId } = useDocumentDetailsContext();
+  const { eventId, scopeId, dataAsNestedObject } = useDocumentDetailsContext();
+  const isEnabled = useIsInvestigateInResolverActionEnabled(dataAsNestedObject);
+
   const key = useWhichFlyout() ?? 'memory';
   const { from, to, shouldUpdate, selectedPatterns } = useTimelineDataFilters(
     isActiveTimeline(scopeId)
@@ -52,7 +57,7 @@ export const AnalyzeGraph: FC = () => {
     });
   }, [openPreviewPanel, key, scopeId]);
 
-  return (
+  return isEnabled ? (
     <div data-test-subj={ANALYZER_GRAPH_TEST_ID}>
       <Resolver
         databaseDocumentID={eventId}
@@ -64,6 +69,10 @@ export const AnalyzeGraph: FC = () => {
         showPanelOnClick={onClick}
       />
     </div>
+  ) : (
+    <EuiPanel hasShadow={false}>
+      <AnalyzerPreviewNoDataMessage />
+    </EuiPanel>
   );
 };
 

diff --git a/...y_solution/public/flyout/document_details/right/components/analyzer_preview_container.tsx b/...y_solution/public/flyout/document_details/right/components/analyzer_preview_container.tsx
@@ -120,31 +120,38 @@ export const AnalyzerPreviewContainer: React.FC = () => {
       }}
       data-test-subj={ANALYZER_PREVIEW_TEST_ID}
     >
-      {isEnabled ? (
-        <AnalyzerPreview />
-      ) : (
-        <FormattedMessage
-          id="xpack.securitySolution.flyout.right.visualizations.analyzerPreview.noDataDescription"
-          defaultMessage="You can only visualize events triggered by hosts configured with the Elastic Defend integration or any {sysmon} data from {winlogbeat}. Refer to {link} for more information."
-          values={{
-            sysmon: <EuiMark>{'sysmon'}</EuiMark>,
-            winlogbeat: <EuiMark>{'winlogbeat'}</EuiMark>,
-            link: (
-              <EuiLink
-                href="https://www.elastic.co/guide/en/security/current/visual-event-analyzer.html"
-                target="_blank"
-              >
-                <FormattedMessage
-                  id="xpack.securitySolution.flyout.right.visualizations.analyzerPreview.noDataLinkText"
-                  defaultMessage="Visual event analyzer"
-                />
-              </EuiLink>
-            ),
-          }}
-        />
-      )}
+      {isEnabled ? <AnalyzerPreview /> : <AnalyzerPreviewNoDataMessage />}
     </ExpandablePanel>
   );
 };
 
 AnalyzerPreviewContainer.displayName = 'AnalyzerPreviewContainer';
+
+/**
+ * No data message for the analyzer preview.
+ */
+export const AnalyzerPreviewNoDataMessage: React.FC = () => {
+  return (
+    <FormattedMessage
+      id="xpack.securitySolution.flyout.visualizations.analyzerPreview.noDataDescription"
+      defaultMessage="You can only visualize events triggered by hosts configured with the Elastic Defend integration or any {sysmon} data from {winlogbeat}. Refer to {link} for more information."
+      values={{
+        sysmon: <EuiMark>{'sysmon'}</EuiMark>,
+        winlogbeat: <EuiMark>{'winlogbeat'}</EuiMark>,
+        link: (
+          <EuiLink
+            href="https://www.elastic.co/guide/en/security/current/visual-event-analyzer.html"
+            target="_blank"
+          >
+            <FormattedMessage
+              id="xpack.securitySolution.flyout.right.visualizations.analyzerPreview.noDataLinkText"
+              defaultMessage="Visual event analyzer"
+            />
+          </EuiLink>
+        ),
+      }}
+    />
+  );
+};
+
+AnalyzerPreviewNoDataMessage.displayName = 'AnalyzerPreviewNoDataMessage';