[Security Solution] render graph in new tools flyout in Security Solution and Discover

x-pack/platform/plugins/private/translations/translations/de-DE.json

@@ -44308,11 +44308,8 @@
     "xpack.securitySolution.flyout.right.response.sectionTitle": "Antwort",
     "xpack.securitySolution.flyout.right.rule.rulePreviewTitle": "Vorschau der Regeldetails",
     "xpack.securitySolution.flyout.right.user.userPreviewTitle": "Nutzerdetails in der Vorschau anzeigen",
-    "xpack.securitySolution.flyout.right.visualizations.graphPreview.errorDescription": "Ein Fehler verhindert, dass diese Warnung visualisiert wird.",
-    "xpack.securitySolution.flyout.right.visualizations.graphPreview.graphAriaLabel": "Graph-Vorschau",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.graphPreviewOpenGraphTooltip": "Graph erweitern",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.graphPreviewTitle": "Graph-Vorschau",
-    "xpack.securitySolution.flyout.right.visualizations.graphPreview.loadingAriaLabel": "Graph-Vorschau",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.technicalPreviewLabel": "Technische Vorschau",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.technicalPreviewTooltip": "Diese Funktionalität befindet sich in der technischen Vorschau und kann in einer zukünftigen Version geändert oder vollständig entfernt werden. Elastic wird sich bemühen, alle Probleme zu beheben, aber die Features in der technischen Vorschau unterliegen nicht dem Support-SLA der offiziellen GA-Features.",
     "xpack.securitySolution.flyout.right.vulnerabilityFinding.PreviewTitle": "Vorschau der Schwachstellendetails",
@@ -44325,10 +44322,6 @@
     "xpack.securitySolution.flyout.settings.anonymizeValues": "Anonymisierte Werte anzeigen",
     "xpack.securitySolution.flyout.settings.anonymizeValues.disabled.tooltip": "Die Warnzusammenfassung wurde nicht erstellt und enthält keine anonymisierten Felder.",
     "xpack.securitySolution.flyout.settings.anonymizeValues.tooltip": "Schalten Sie um, um Feldwerte in Ihrer Alert-Zusammenfassung anzuzeigen oder auszublenden. Die an das LLM gesendeten Daten werden weiterhin gemäß den Einstellungen unter „Konfigurationen > KI-Einstellungen > Anonymisierung“ anonymisiert.",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorInvalidEntityPanel": "Entitätsvorschau kann nicht geöffnet werden",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorInvalidTimeRange": "Ungültiger Zeitbereich",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorInvalidTimeRangeDescription": "Bitte wählen Sie einen gültigen Zeitraum aus.",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorOpenNodePreview": "Vorschau konnte nicht angezeigt werden",
     "xpack.securitySolution.flyout.shared.errorDescription": "Bei der Anzeige von {message} ist ein Fehler aufgetreten.",
     "xpack.securitySolution.flyout.shared.errorTitle": "{title} kann nicht angezeigt werden.",
     "xpack.securitySolution.flyout.shared.ExpandablePanelButtonIconAriaLabel": "Erweiterbares Panel umschalten",

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

@@ -44156,11 +44156,8 @@
     "xpack.securitySolution.flyout.right.response.sectionTitle": "Réponse",
     "xpack.securitySolution.flyout.right.rule.rulePreviewTitle": "Afficher les détails de la règle",
     "xpack.securitySolution.flyout.right.user.userPreviewTitle": "Aperçu des détails de l'utilisateur",
-    "xpack.securitySolution.flyout.right.visualizations.graphPreview.errorDescription": "Une erreur empêche la visualisation de cette alerte.",
-    "xpack.securitySolution.flyout.right.visualizations.graphPreview.graphAriaLabel": "Aperçu du graphique",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.graphPreviewOpenGraphTooltip": "Développer le graphique",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.graphPreviewTitle": "Aperçu du graphique",
-    "xpack.securitySolution.flyout.right.visualizations.graphPreview.loadingAriaLabel": "aperçu du graphique",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.technicalPreviewLabel": "Version d'évaluation technique",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.technicalPreviewTooltip": "Cette fonctionnalité est en version d'évaluation technique et pourra être modifiée ou retirée complètement dans une future version. Elastic s'efforcera de corriger tout problème, mais les fonctionnalités des versions d'évaluation technique ne sont pas soumises aux SLA de support des fonctionnalités officielles en disponibilité générale.",
     "xpack.securitySolution.flyout.right.vulnerabilityFinding.PreviewTitle": "Prévisualiser les détails de la vulnérabilité",
@@ -44173,10 +44170,6 @@
     "xpack.securitySolution.flyout.settings.anonymizeValues": "Afficher les valeurs anonymisées",
     "xpack.securitySolution.flyout.settings.anonymizeValues.disabled.tooltip": "Le résumé d'alerte n'a pas été généré et ne contient pas de champs anonymisés.",
     "xpack.securitySolution.flyout.settings.anonymizeValues.tooltip": "Activez ou désactivez cette fonctionnalité pour afficher ou masquer les valeurs de champs dans votre résumé d'alerte. Les données envoyées au LLM sont toujours anonymisées en fonction des paramètres définis dans Configurations > Paramètres de l'IA > Anonymisation.",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorInvalidEntityPanel": "Impossible d’ouvrir l’aperçu de l’entité",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorInvalidTimeRange": "Période non valide",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorInvalidTimeRangeDescription": "Veuillez sélectionner une période valide.",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorOpenNodePreview": "Impossible d'afficher l'aperçu",
     "xpack.securitySolution.flyout.shared.errorDescription": "Une erreur est survenue lors de l'affichage de {message}.",
     "xpack.securitySolution.flyout.shared.errorTitle": "Impossible d'afficher {title}.",
     "xpack.securitySolution.flyout.shared.ExpandablePanelButtonIconAriaLabel": "Activer/Désactiver le panneau extensible",

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

@@ -44475,11 +44475,8 @@
     "xpack.securitySolution.flyout.right.response.sectionTitle": "応答",
     "xpack.securitySolution.flyout.right.rule.rulePreviewTitle": "ルール詳細をプレビュー",
     "xpack.securitySolution.flyout.right.user.userPreviewTitle": "ユーザー詳細をプレビュー",
-    "xpack.securitySolution.flyout.right.visualizations.graphPreview.errorDescription": "エラーが発生したため、このアラートを可視化できません。",
-    "xpack.securitySolution.flyout.right.visualizations.graphPreview.graphAriaLabel": "グラフプレビュー",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.graphPreviewOpenGraphTooltip": "グラフを展開",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.graphPreviewTitle": "グラフプレビュー",
-    "xpack.securitySolution.flyout.right.visualizations.graphPreview.loadingAriaLabel": "グラフプレビュー",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.technicalPreviewLabel": "テクニカルプレビュー",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.technicalPreviewTooltip": "この機能はテクニカルプレビュー中であり、将来のリリースでは変更されたり完全に削除されたりする場合があります。Elasticはすべての問題の修正に努めますが、テクニカルプレビュー中の機能には正式なGA機能のサポートSLAが適用されません。",
     "xpack.securitySolution.flyout.right.vulnerabilityFinding.PreviewTitle": "脆弱性の詳細をプレビュー",
@@ -44492,10 +44489,6 @@
     "xpack.securitySolution.flyout.settings.anonymizeValues": "匿名化された値を表示",
     "xpack.securitySolution.flyout.settings.anonymizeValues.disabled.tooltip": "アラート概要は生成されておらず、匿名化されたフィールドも含まれていません。",
     "xpack.securitySolution.flyout.settings.anonymizeValues.tooltip": "アラートの概要でフィールド値の表示または難読化を切り替えます。LLMに送信されるデータは、［設定］>［AI設定］>［匿名化］の設定に基づいて、依然として匿名化されています。",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorInvalidEntityPanel": "エンティティプレビューを開くことができません",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorInvalidTimeRange": "無効な時間範囲",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorInvalidTimeRangeDescription": "有効な時間範囲を選択してください。",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorOpenNodePreview": "プレビューの表示に失敗しました",
     "xpack.securitySolution.flyout.shared.errorDescription": "{message}の表示中にエラーが発生しました。",
     "xpack.securitySolution.flyout.shared.errorTitle": "{title}を表示できません。",
     "xpack.securitySolution.flyout.shared.ExpandablePanelButtonIconAriaLabel": "展開可能なパネルトグル",

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

@@ -44468,11 +44468,8 @@
     "xpack.securitySolution.flyout.right.response.sectionTitle": "响应",
     "xpack.securitySolution.flyout.right.rule.rulePreviewTitle": "预览规则详情",
     "xpack.securitySolution.flyout.right.user.userPreviewTitle": "预览用户详情",
-    "xpack.securitySolution.flyout.right.visualizations.graphPreview.errorDescription": "阻止对此告警进行可视化时出错。",
-    "xpack.securitySolution.flyout.right.visualizations.graphPreview.graphAriaLabel": "图表预览",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.graphPreviewOpenGraphTooltip": "展开图表",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.graphPreviewTitle": "图表预览",
-    "xpack.securitySolution.flyout.right.visualizations.graphPreview.loadingAriaLabel": "图表预览",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.technicalPreviewLabel": "技术预览",
     "xpack.securitySolution.flyout.right.visualizations.graphPreview.technicalPreviewTooltip": "此功能处于技术预览状态，在未来版本中可能会更改或完全移除。Elastic 将努力修复任何问题，但处于技术预览状态的功能不受正式 GA 功能支持 SLA 的约束。",
     "xpack.securitySolution.flyout.right.vulnerabilityFinding.PreviewTitle": "漏洞预览详情",
@@ -44485,10 +44482,6 @@
     "xpack.securitySolution.flyout.settings.anonymizeValues": "显示已匿名处理值",
     "xpack.securitySolution.flyout.settings.anonymizeValues.disabled.tooltip": "告警摘要尚未生成，且不包含已匿名处理的字段。",
     "xpack.securitySolution.flyout.settings.anonymizeValues.tooltip": "切换以显示或隐藏告警摘要中的字段值。根据“配置 > AI 设置 > 匿名化”中的设置，发送到 LLM 的数据仍会进行匿名化处理。",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorInvalidEntityPanel": "无法打开实体预览",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorInvalidTimeRange": "时间范围无效",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorInvalidTimeRangeDescription": "请选择有效的时间范围。",
-    "xpack.securitySolution.flyout.shared.components.graphVisualization.errorOpenNodePreview": "显示预览失败",
     "xpack.securitySolution.flyout.shared.errorDescription": "显示 {message} 时出现错误。",
     "xpack.securitySolution.flyout.shared.errorTitle": "无法显示 {title}。",
     "xpack.securitySolution.flyout.shared.ExpandablePanelButtonIconAriaLabel": "可展开面板切换按钮",

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/graph_grouped_node_preview_panel/actions_context.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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, { createContext, useContext, useMemo, type FC, type ReactNode } from 'react';
+import type { EntityOrEventItem, EntityItem, EventItem, AlertItem } from './components/grouped_item/types';
+
+export interface GroupedNodePreviewActions {
+  /**
+   * Optional handler invoked when the user requests the preview for a single grouped item.
+   * When provided, leaf components (title link, kebab menu) call this instead of dispatching
+   * `openPreviewPanel` via `useExpandableFlyoutApi`. This is the seam Flyout v2 hosts use to
+   * route previews through `overlays.openSystemFlyout` while the legacy expandable-flyout host
+   * keeps the original behavior by simply not providing a handler.
+   */
+  onShowItemDetails?: (item: EntityOrEventItem) => void;
+}
+
+const GroupedNodePreviewActionsContext = createContext<GroupedNodePreviewActions>({});
+
+export const GroupedNodePreviewActionsProvider: FC<
+  { children: ReactNode } & GroupedNodePreviewActions
+> = ({ children, onShowItemDetails }) => {
+  const value = useMemo<GroupedNodePreviewActions>(
+    () => ({ onShowItemDetails }),
+    [onShowItemDetails]
+  );
+  return (
+    <GroupedNodePreviewActionsContext.Provider value={value}>
+      {children}
+    </GroupedNodePreviewActionsContext.Provider>
+  );
+};
+
+export const useGroupedNodePreviewActions = (): GroupedNodePreviewActions =>
+  useContext(GroupedNodePreviewActionsContext);
+
+export type { EntityOrEventItem, EntityItem, EventItem, AlertItem };

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/graph_grouped_node_preview_panel/components/grouped_item/parts/entity_actions_button.tsx

@@ -29,6 +29,7 @@ import {
 } from '../../../../filters/filter_store';
 import { RELATED_ENTITY, RELATED_HOST, RELATED_USER } from '../../../../../common/constants';
 import { useOpenEntityPreviewPanel } from '../../../hooks/use_open_entity_preview_panel';
+import { useGroupedNodePreviewActions } from '../../../actions_context';
 
 const actionsButtonAriaLabel = i18n.translate(
   'securitySolutionPackages.csp.graph.groupedItem.actionsButton.ariaLabel',
@@ -57,6 +58,7 @@ export const EntityActionsButton = ({ item, scopeId }: EntityActionsButtonProps)
   const togglePopover = useCallback(() => setIsPopoverOpen((prev) => !prev), []);
 
   const openEntityPreviewPanel = useOpenEntityPreviewPanel();
+  const { onShowItemDetails } = useGroupedNodePreviewActions();
   const sourceFields = (item.entity.sourceFields ?? {}) as Record<string, string | string[]>;
   const engineType = item.entity.engine_type;
 
@@ -135,7 +137,13 @@ export const EntityActionsButton = ({ item, scopeId }: EntityActionsButtonProps)
   const items = getEntityExpandItems({
     nodeId: item.id,
     entityFilterActions,
-    onShowEntityDetails: () => openEntityPreviewPanel(item.id, scopeId, item.entity),
+    onShowEntityDetails: () => {
+      if (onShowItemDetails) {
+        onShowItemDetails(item);
+        return;
+      }
+      openEntityPreviewPanel(item.id, scopeId, item.entity);
+    },
     onClose: closePopover,
     shouldRender: {
       showEntityRelationships: true,

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/graph_grouped_node_preview_panel/components/grouped_item/parts/event_actions_button.tsx

@@ -23,6 +23,7 @@ import {
   ALERT_PREVIEW_BANNER,
   EVENT_PREVIEW_BANNER,
 } from '../../../constants';
+import { useGroupedNodePreviewActions } from '../../../actions_context';
 
 const actionsButtonAriaLabel = i18n.translate(
   'securitySolutionPackages.csp.graph.groupedItem.actionsButton.ariaLabel',
@@ -48,11 +49,16 @@ export interface EventActionsButtonProps {
 export const EventActionsButton = ({ item, scopeId }: EventActionsButtonProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const { openPreviewPanel } = useExpandableFlyoutApi();
+  const { onShowItemDetails } = useGroupedNodePreviewActions();
 
   const closePopover = useCallback(() => setIsPopoverOpen(false), []);
   const togglePopover = useCallback(() => setIsPopoverOpen((prev) => !prev), []);
 
   const handleShowEventDetails = useCallback(() => {
+    if (onShowItemDetails) {
+      onShowItemDetails(item);
+      return;
+    }
     openPreviewPanel({
       id: DocumentDetailsPreviewPanelKey,
       params: {
@@ -63,7 +69,7 @@ export const EventActionsButton = ({ item, scopeId }: EventActionsButtonProps) =
         isPreviewMode: true,
       },
     });
-  }, [item, openPreviewPanel, scopeId]);
+  }, [item, onShowItemDetails, openPreviewPanel, scopeId]);
 
   // Generate items fresh on each render to reflect current filter state
   const items = getLabelExpandItems({

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/graph_grouped_node_preview_panel/components/grouped_item/parts/header_row.tsx

@@ -39,6 +39,7 @@ import {
   EVENT_PREVIEW_BANNER,
 } from '../../../constants';
 import { useOpenEntityPreviewPanel } from '../../../hooks/use_open_entity_preview_panel';
+import { useGroupedNodePreviewActions } from '../../../actions_context';
 
 const entityUnavailableTooltip = i18n.translate(
   'securitySolutionPackages.csp.graph.groupedItem.entityUnavailable.tooltip',
@@ -59,6 +60,7 @@ export const HeaderRow = ({ item, scopeId }: HeaderRowProps) => {
   const { euiTheme } = useEuiTheme();
   const { openPreviewPanel } = useExpandableFlyoutApi();
   const openEntityPreviewPanel = useOpenEntityPreviewPanel();
+  const { onShowItemDetails } = useGroupedNodePreviewActions();
 
   const title = useMemo(() => {
     switch (item.itemType) {
@@ -76,6 +78,11 @@ export const HeaderRow = ({ item, scopeId }: HeaderRowProps) => {
     (e: React.MouseEvent<HTMLAnchorElement>) => {
       e.preventDefault();
 
+      if (onShowItemDetails) {
+        onShowItemDetails(item);
+        return;
+      }
+
       if (item.itemType === DOCUMENT_TYPE_ENTITY) {
         const entityItem = item as EntityItem;
         openEntityPreviewPanel(entityItem.id, scopeId, entityItem.entity);
@@ -95,7 +102,7 @@ export const HeaderRow = ({ item, scopeId }: HeaderRowProps) => {
         });
       }
     },
-    [item, openPreviewPanel, openEntityPreviewPanel, scopeId]
+    [item, onShowItemDetails, openPreviewPanel, openEntityPreviewPanel, scopeId]
   );
 
   const isClickable =