[Cloud Security] Added graph visualization in alert's flyout

.buildkite/scripts/steps/storybooks/build_and_upload.ts

@@ -18,42 +18,43 @@ const STORYBOOKS = [
   'canvas',
   'cases',
   'cell_actions',
-  'coloring',
   'chart_icons',
+  'cloud_security_posture_packages',
+  'coloring',
   'content_management_examples',
   'custom_integrations',
   'dashboard_enhanced',
   'dashboard',
   'data',
-  'logs_explorer',
   'embeddable',
+  'esql_editor',
   'expression_error',
   'expression_image',
   'expression_metric',
   'expression_repeat_image',
   'expression_reveal_image',
   'expression_shape',
   'expression_tagcloud',
-  'management',
   'fleet',
   'grouping',
   'home',
   'infra',
   'kibana_react',
+  'language_documentation_popover',
   'lists',
-  'observability',
+  'logs_explorer',
+  'management',
   'observability_ai_assistant',
+  'observability',
   'presentation',
-  'security_solution',
+  'random_sampling',
   'security_solution_packages',
+  'security_solution',
   'serverless',
   'shared_ux',
   'triggers_actions_ui',
   'ui_actions_enhanced',
-  'language_documentation_popover',
   'unified_search',
-  'random_sampling',
-  'esql_editor',
 ];
 
 const GITHUB_CONTEXT = 'Build and Publish Storybooks';

packages/kbn-optimizer/src/worker/webpack.config.ts

@@ -259,6 +259,29 @@ export function getWebpackConfig(
             },
           },
         },
+        {
+          test: /\.js$/,
+          include: /node_modules[\\\/]@dagrejs/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env'],
+              plugins: ['@babel/plugin-proposal-class-properties'],
+            },
+          },
+        },
+        {
+          test: /node_modules[\/\\]@?xyflow[\/\\].*.js$/,
+          loaders: 'babel-loader',
+          options: {
+            presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
+            plugins: [
+              '@babel/plugin-proposal-optional-chaining',
+              '@babel/plugin-proposal-nullish-coalescing-operator',
+              '@babel/plugin-transform-logical-assignment-operators',
+            ],
+          },
+        },
         {
           test: /\.(html|md|txt|tmpl)$/,
           use: {

x-pack/packages/kbn-cloud-security-posture/graph/index.ts

@@ -4,3 +4,5 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+
+export * from './src/components';

x-pack/packages/kbn-cloud-security-posture/graph/src/components/dagree_layout_graph.stories.tsx

@@ -7,59 +7,21 @@
 
 import React from 'react';
 import { ThemeProvider } from '@emotion/react';
-import {
-  ReactFlow,
-  Controls,
-  Background,
-  Node,
-  Edge,
-  Position,
-  useNodesState,
-  useEdgesState,
-} from '@xyflow/react';
 import { Story } from '@storybook/react';
 import type {
   EdgeDataModel,
   LabelNodeDataModel,
   NodeDataModel,
 } from '@kbn/cloud-security-posture-common/types/graph/latest';
 import { Writable } from '@kbn/utility-types';
-import {
-  HexagonNode,
-  PentagonNode,
-  EllipseNode,
-  RectangleNode,
-  DiamondNode,
-  LabelNode,
-  EdgeGroupNode,
-} from './node';
-import type { NodeViewModel } from './types';
-import { DefaultEdge } from './edge';
-import { SvgDefsMarker } from './edge/styles';
-import { GroupStyleOverride } from './node/styles';
-
-import '@xyflow/react/dist/style.css';
-import { layoutGraph } from './graph/layout_graph';
+import { css } from '@emotion/react';
+import { Graph } from './graph/graph';
 
 export default {
   title: 'Components/Graph Components/Dagree Layout Graph',
   description: 'CDR - Graph visualization',
 };
 
-const nodeTypes = {
-  hexagon: HexagonNode,
-  pentagon: PentagonNode,
-  ellipse: EllipseNode,
-  rectangle: RectangleNode,
-  diamond: DiamondNode,
-  label: LabelNode,
-  group: EdgeGroupNode,
-};
-
-const edgeTypes = {
-  default: DefaultEdge,
-};
-
 interface GraphData {
   nodes: NodeDataModel[];
   edges: EdgeDataModel[];
@@ -189,28 +151,18 @@ const extractEdges = (
   return { nodes: Object.values(nodes).reverse(), edges };
 };
 
-const Template: Story<GraphData> = ({ nodes, edges }: GraphData) => {
-  const { initialNodes, initialEdges } = processGraph(nodes, edges);
-
-  const [nodesState, _setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edgesState, _setEdges, onEdgesChange] = useEdgesState(initialEdges);
-
+const Template: Story<GraphData> = ({ nodes, edges, interactive }: GraphData) => {
   return (
     <ThemeProvider theme={{ darkMode: false }}>
-      <SvgDefsMarker />
-      <ReactFlow
-        fitView
-        attributionPosition={undefined}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        nodes={nodesState}
-        edges={edgesState}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-      >
-        <Controls />
-        <Background />
-      </ReactFlow>
+      <Graph
+        css={css`
+          height: 100%;
+          width: 100%;
+        `}
+        nodes={nodes}
+        edges={edges}
+        interactive={interactive ?? true}
+      />
     </ThemeProvider>
   );
 };
@@ -359,7 +311,7 @@ GroupWithWarningAPIMock.args = {
   ],
 };
 
-export const Graph = Template.bind({});
+export const LargeGraph = Template.bind({});
 const baseGraph: NodeDataModel[] = [
   {
     id: 'siem-windows',
@@ -483,7 +435,7 @@ const baseGraph: NodeDataModel[] = [
   },
 ];
 
-Graph.args = {
+LargeGraph.args = {
   ...extractEdges(baseGraph),
 };
 
@@ -541,67 +493,3 @@ GraphStackedEdgeCases.args = {
     },
   ]),
 };
-
-function processGraph(
-  nodesModel: NodeDataModel[],
-  edgesModel: EdgeDataModel[]
-): {
-  initialNodes: Node[];
-  initialEdges: Edge[];
-} {
-  const { nodes: nodesViewModel } = layoutGraph(nodesModel, edgesModel);
-
-  const nodesById: { [key: string]: NodeViewModel } = {};
-
-  const initialNodes = nodesViewModel.map((nodeData) => {
-    nodesById[nodeData.id] = nodeData;
-
-    const node: Node = {
-      id: nodeData.id,
-      type: nodeData.shape,
-      data: { ...nodeData, interactive: true },
-      position: nodeData.position,
-      draggable: true,
-    };
-
-    if (node.type === 'group' && nodeData.shape === 'group') {
-      node.sourcePosition = Position.Right;
-      node.targetPosition = Position.Left;
-      node.resizing = false;
-      node.style = GroupStyleOverride({
-        width: nodeData.size?.width ?? 0,
-        height: nodeData.size?.height ?? 0,
-      });
-    } else if (nodeData.shape === 'label' && nodeData.parentId) {
-      node.parentId = nodeData.parentId;
-      node.extent = 'parent';
-      node.expandParent = false;
-      node.draggable = false;
-    }
-
-    return node;
-  });
-
-  const initialEdges: Edge[] = edgesModel.map((edgeData) => {
-    const isIn =
-      nodesById[edgeData.source].shape !== 'label' && nodesById[edgeData.target].shape === 'group';
-    const isInside =
-      nodesById[edgeData.source].shape === 'group' && nodesById[edgeData.target].shape === 'label';
-    const isOut =
-      nodesById[edgeData.source].shape === 'label' && nodesById[edgeData.target].shape === 'group';
-    const isOutside =
-      nodesById[edgeData.source].shape === 'group' && nodesById[edgeData.target].shape !== 'label';
-
-    return {
-      id: edgeData.id,
-      type: 'default',
-      source: edgeData.source,
-      sourceHandle: isInside ? 'inside' : isOutside ? 'outside' : undefined,
-      target: edgeData.target,
-      targetHandle: isIn ? 'in' : isOut ? 'out' : undefined,
-      data: { ...edgeData },
-    };
-  });
-
-  return { initialNodes, initialEdges };
-}