[8.x] [Cloud Security] Added graph visualization in alert's flyout (#196034)

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

@@ -18,43 +18,44 @@ 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_shared',
+  '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';

.github/CODEOWNERS

@@ -1841,10 +1841,10 @@ x-pack/plugins/osquery @elastic/security-defend-workflows
 /x-pack/plugins/security_solution/public/detections/components/osquery @elastic/security-defend-workflows
 
 # Cloud Defend
-/x-pack/plugins/cloud_defend/ @elastic/kibana-cloud-security-posture
 /x-pack/plugins/security_solution/public/cloud_defend @elastic/kibana-cloud-security-posture
 
 # Cloud Security Posture
+x-pack/packages/kbn-cloud-security-posture @elastic/kibana-cloud-security-posture
 /x-pack/test_serverless/functional/test_suites/security/config.cloud_security_posture.* @elastic/kibana-cloud-security-posture
 /x-pack/plugins/security_solution/public/cloud_security_posture @elastic/kibana-cloud-security-posture
 /x-pack/test/api_integration/apis/cloud_security_posture/ @elastic/kibana-cloud-security-posture

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

@@ -259,6 +259,27 @@ export function getWebpackConfig(
             },
           },
         },
+        {
+          test: /\.js$/,
+          include: /node_modules[\\\/]@dagrejs/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              envName: worker.dist ? 'production' : 'development',
+              presets: ['@babel/preset-env'], // Doesn't work with BABEL_PRESET
+              plugins: ['@babel/plugin-proposal-class-properties'],
+            },
+          },
+        },
+        {
+          test: /node_modules[\/\\]@?xyflow[\/\\].*.js$/,
+          loaders: 'babel-loader',
+          options: {
+            envName: worker.dist ? 'production' : 'development',
+            presets: [BABEL_PRESET],
+            plugins: ['@babel/plugin-transform-logical-assignment-operators'],
+          },
+        },
         {
           test: /\.(html|md|txt|tmpl)$/,
           use: {

packages/kbn-storybook/src/webpack.config.ts

@@ -136,6 +136,25 @@ export default ({ config: storybookConfig }: { config: Configuration }) => {
             },
           },
         },
+        {
+          test: /\.js$/,
+          include: /node_modules[\\\/]@dagrejs/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env'], // Doesn't work with @kbn/babel-preset/webpack_preset
+              plugins: ['@babel/plugin-proposal-class-properties'],
+            },
+          },
+        },
+        {
+          test: /node_modules[\/\\]@?xyflow[\/\\].*.js$/,
+          loaders: 'babel-loader',
+          options: {
+            presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
+            plugins: ['@babel/plugin-transform-logical-assignment-operators'],
+          },
+        },
       ],
     },
     plugins: [new IgnoreNotFoundExportPlugin()],

x-pack/packages/kbn-cloud-security-posture/common/kibana.jsonc

@@ -1,6 +1,5 @@
-
 {
-    "id": "@kbn/cloud-security-posture-common",
-    "owner": "@elastic/kibana-cloud-security-posture",
-    "type": "shared-common"
-  }
+  "id": "@kbn/cloud-security-posture-common",
+  "owner": "@elastic/kibana-cloud-security-posture",
+  "type": "shared-common"
+}

x-pack/packages/kbn-cloud-security-posture/common/package.json

@@ -1,8 +1,8 @@
 {
-    "name": "@kbn/cloud-security-posture-common",
-    "private": true,
-    "version": "1.0.0",
-    "license": "Elastic License 2.0",
-    "description": "Shared components for cloud security posture, both client and server side",
-    "sideEffects": false
-  }
+  "name": "@kbn/cloud-security-posture-common",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0",
+  "description": "Shared components for cloud security posture, both client and server side",
+  "sideEffects": false
+}

x-pack/packages/kbn-cloud-security-posture/common/schema/graph/v1.ts

@@ -71,8 +71,6 @@ export const groupNodeDataSchema = schema.allOf([
 export const labelNodeDataSchema = schema.allOf([
   nodeBaseDataSchema,
   schema.object({
-    source: schema.string(),
-    target: schema.string(),
     shape: schema.literal('label'),
     parentId: schema.maybe(schema.string()),
     color: colorSchema,
@@ -82,8 +80,6 @@ export const labelNodeDataSchema = schema.allOf([
 export const edgeDataSchema = schema.object({
   id: schema.string(),
   source: schema.string(),
-  sourceShape: nodeShapeSchema,
   target: schema.string(),
-  targetShape: nodeShapeSchema,
   color: colorSchema,
 });

x-pack/packages/kbn-cloud-security-posture/graph/README.md

@@ -7,11 +7,104 @@ security solution plugin.
 
 ## How to use this
 
-Standalone examples will follow. In the meantime check out storybook to view the graph's progress.
+### Step 1: Import the Component
 
-## The most important public api members
+First, import the `Graph` component into your desired file.
 
-- GraphComponent itself (comming soon..)
+```tsx
+import { Graph } from '@kbn/cloud-security-posture-graph';
+```
+
+### Step 2: Prepare the Data
+
+Create the nodes and edges data models. These should follow the `NodeViewModel` and `EdgeViewModel` interfaces.
+
+```tsx
+const nodes: NodeViewModel[] = [
+  {
+    id: 'node1',
+    label: 'Node 1',
+    color: 'primary',
+    shape: 'ellipse',
+    icon: 'user',
+  },
+  {
+    id: 'node2',
+    label: 'Node 2',
+    color: 'primary',
+    shape: 'hexagon',
+    icon: 'questionInCircle',
+  },
+];
+
+const edges: EdgeViewModel[] = [
+  {
+    id: 'edge1',
+    source: 'node1',
+    target: 'node2',
+    color: 'primary',
+  },
+];
+```
+
+### Step 3: Render the Component
+
+Use the `Graph` component in your JSX/TSX, passing the nodes, edges, and interactivity flag as props.
+
+```tsx
+<Graph nodes={nodes} edges={edges} interactive={true} />
+```
+
+### Example Usage
+
+Here is a complete example of how to use the `Graph` component in a React component.
+
+```tsx
+import React from 'react';
+import { Graph } from '@kbn/cloud-security-posture-graph';
+import type { NodeViewModel, EdgeViewModel } from '@kbn/cloud-security-posture-graph';
+
+const App: React.FC = () => {
+  const nodes: NodeViewModel[] = [
+    {
+      id: 'node1',
+      label: 'Node 1',
+      color: 'primary',
+      shape: 'ellipse',
+      icon: 'user',
+    },
+    {
+      id: 'node2',
+      label: 'Node 2',
+      color: 'primary',
+      shape: 'hexagon',
+      icon: 'questionInCircle',
+    },
+  ];
+
+  const edges: EdgeViewModel[] = [
+    {
+      id: 'edge1',
+      source: 'node1',
+      target: 'node2',
+      color: 'primary',
+    },
+  ];
+
+  return (
+    <div>
+      <h1>Graph Visualization</h1>
+      <Graph nodes={nodes} edges={edges} interactive={true} />
+    </div>
+  );
+};
+
+export default App;
+```
+
+### Storybook Example
+
+You can also see how the `Graph` component is used in the Storybook file `graph_layout.stories.tsx`. 
 
 ### Extras
 

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/jest.config.js

@@ -9,4 +9,6 @@ module.exports = {
   preset: '@kbn/test',
   roots: ['<rootDir>/x-pack/packages/kbn-cloud-security-posture/graph'],
   rootDir: '../../../..',
+  setupFiles: ['jest-canvas-mock'],
+  setupFilesAfterEnv: ['<rootDir>/x-pack/packages/kbn-cloud-security-posture/graph/setup_tests.ts'],
 };

x-pack/packages/kbn-cloud-security-posture/graph/kibana.jsonc

@@ -1,5 +1,5 @@
 {
-  "type": "shared-browser",
   "id": "@kbn/cloud-security-posture-graph",
-  "owner": "@elastic/kibana-cloud-security-posture"
+  "owner": "@elastic/kibana-cloud-security-posture",
+  "type": "shared-browser"
 }

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

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+// eslint-disable-next-line @kbn/imports/no_boundary_crossing
+import { mockReactFlow } from './src/components/mock/react_flow';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@testing-library/jest-dom';
+
+mockReactFlow();