[8.x] [Cloud Security] Graph visualization and API (elastic#195307) (e…

…lastic#196015) # Backport This will backport the following commits from `main` to `8.x`: - [[Cloud Security] Graph visualization and API (elastic#195307)](elastic#195307)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Kfir Peled <[email protected]>
kibanamachine · Oct 12, 2024 · 73d98d3 · 73d98d3
1 parent 329473f
commit 73d98d3
Show file tree

Hide file tree

Showing 66 changed files with 4,611 additions and 27 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -92,6 +92,7 @@ x-pack/plugins/cloud_integrations/cloud_links @elastic/kibana-core
 x-pack/plugins/cloud @elastic/kibana-core
 x-pack/packages/kbn-cloud-security-posture @elastic/kibana-cloud-security-posture
 x-pack/packages/kbn-cloud-security-posture-common @elastic/kibana-cloud-security-posture
+x-pack/packages/kbn-cloud-security-posture/graph @elastic/kibana-cloud-security-posture
 x-pack/plugins/cloud_security_posture @elastic/kibana-cloud-security-posture
 packages/shared-ux/code_editor/impl @elastic/appex-sharedux
 packages/shared-ux/code_editor/mocks @elastic/appex-sharedux

diff --git a/package.json b/package.json
@@ -106,6 +106,7 @@
     "@aws-crypto/util": "^5.2.0",
     "@babel/runtime": "^7.24.7",
     "@cfworker/json-schema": "^1.12.7",
+    "@dagrejs/dagre": "^1.1.4",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -219,6 +220,7 @@
     "@kbn/cloud-plugin": "link:x-pack/plugins/cloud",
     "@kbn/cloud-security-posture": "link:x-pack/packages/kbn-cloud-security-posture",
     "@kbn/cloud-security-posture-common": "link:x-pack/packages/kbn-cloud-security-posture-common",
+    "@kbn/cloud-security-posture-graph": "link:x-pack/packages/kbn-cloud-security-posture/graph",
     "@kbn/cloud-security-posture-plugin": "link:x-pack/plugins/cloud_security_posture",
     "@kbn/code-editor": "link:packages/shared-ux/code_editor/impl",
     "@kbn/code-editor-mock": "link:packages/shared-ux/code_editor/mocks",
@@ -1054,6 +1056,7 @@
     "@turf/length": "^6.0.2",
     "@xstate/react": "^3.2.2",
     "@xstate5/react": "npm:@xstate/react@^4.1.2",
+    "@xyflow/react": "^12.3.0",
     "adm-zip": "^0.5.9",
     "ai": "^2.2.33",
     "ajv": "^8.12.0",
@@ -1309,6 +1312,7 @@
     "@babel/plugin-transform-class-properties": "^7.24.7",
     "@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
     "@babel/plugin-transform-numeric-separator": "^7.24.7",
+    "@babel/plugin-transform-optional-chaining": "^7.24.8",
     "@babel/plugin-transform-runtime": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",

diff --git a/renovate.json b/renovate.json
@@ -536,6 +536,24 @@
       "labels": ["Team:Cloud Security", "release_note:skip", "backport:skip"],
       "minimumReleaseAge": "7 days",
       "enabled": true
+    },
+    {
+      "groupName": "@xyflow/react",
+      "matchPackageNames": ["@xyflow/react"],
+      "reviewers": ["team:kibana-cloud-security-posture"],
+      "matchBaseBranches": ["main"],
+      "labels": ["Team:Cloud Security", "release_note:skip", "backport:skip"],
+      "minimumReleaseAge": "7 days",
+      "enabled": true
+    },
+    {
+      "groupName": "@dagrejs/dagre",
+      "matchPackageNames": ["@dagrejs/dagre"],
+      "reviewers": ["team:kibana-cloud-security-posture"],
+      "matchBaseBranches": ["main"],
+      "labels": ["Team:Cloud Security", "release_note:skip", "backport:skip"],
+      "minimumReleaseAge": "7 days",
+      "enabled": true
     }
   ],
   "customManagers": [

diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts
@@ -16,6 +16,7 @@ export const storybookAliases = {
   canvas: 'x-pack/plugins/canvas/storybook',
   cases: 'packages/kbn-cases-components/.storybook',
   cell_actions: 'packages/kbn-cell-actions/.storybook',
+  cloud_security_posture_packages: 'x-pack/packages/kbn-cloud-security-posture/storybook/config',
   cloud: 'packages/cloud/.storybook',
   coloring: 'packages/kbn-coloring/.storybook',
   language_documentation_popover: 'packages/kbn-language-documentation/.storybook',

diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -178,6 +178,8 @@
       "@kbn/cloud-security-posture/*": ["x-pack/packages/kbn-cloud-security-posture/*"],
       "@kbn/cloud-security-posture-common": ["x-pack/packages/kbn-cloud-security-posture-common"],
       "@kbn/cloud-security-posture-common/*": ["x-pack/packages/kbn-cloud-security-posture-common/*"],
+      "@kbn/cloud-security-posture-graph": ["x-pack/packages/kbn-cloud-security-posture/graph"],
+      "@kbn/cloud-security-posture-graph/*": ["x-pack/packages/kbn-cloud-security-posture/graph/*"],
       "@kbn/cloud-security-posture-plugin": ["x-pack/plugins/cloud_security_posture"],
       "@kbn/cloud-security-posture-plugin/*": ["x-pack/plugins/cloud_security_posture/*"],
       "@kbn/code-editor": ["packages/shared-ux/code_editor/impl"],

diff --git a/x-pack/packages/kbn-cloud-security-posture-common/schema/graph/index.ts b/x-pack/packages/kbn-cloud-security-posture-common/schema/graph/index.ts
@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export * as graphV1 from './v1';
diff --git a/x-pack/packages/kbn-cloud-security-posture-common/schema/graph/latest.ts b/x-pack/packages/kbn-cloud-security-posture-common/schema/graph/latest.ts
@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export * from './v1';
diff --git a/x-pack/packages/kbn-cloud-security-posture-common/schema/graph/v1.ts b/x-pack/packages/kbn-cloud-security-posture-common/schema/graph/v1.ts
@@ -0,0 +1,89 @@
+/*
+ * 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 { schema } from '@kbn/config-schema';
+
+export const graphRequestSchema = schema.object({
+  query: schema.object({
+    actorIds: schema.arrayOf(schema.string()),
+    eventIds: schema.arrayOf(schema.string()),
+    // TODO: use zod for range validation instead of config schema
+    start: schema.oneOf([schema.number(), schema.string()]),
+    end: schema.oneOf([schema.number(), schema.string()]),
+  }),
+});
+
+export const graphResponseSchema = () =>
+  schema.object({
+    nodes: schema.arrayOf(
+      schema.oneOf([entityNodeDataSchema, groupNodeDataSchema, labelNodeDataSchema])
+    ),
+    edges: schema.arrayOf(edgeDataSchema),
+  });
+
+export const colorSchema = schema.oneOf([
+  schema.literal('primary'),
+  schema.literal('danger'),
+  schema.literal('warning'),
+]);
+
+export const nodeShapeSchema = schema.oneOf([
+  schema.literal('hexagon'),
+  schema.literal('pentagon'),
+  schema.literal('ellipse'),
+  schema.literal('rectangle'),
+  schema.literal('diamond'),
+  schema.literal('label'),
+  schema.literal('group'),
+]);
+
+export const nodeBaseDataSchema = schema.object({
+  id: schema.string(),
+  label: schema.maybe(schema.string()),
+  icon: schema.maybe(schema.string()),
+});
+
+export const entityNodeDataSchema = schema.allOf([
+  nodeBaseDataSchema,
+  schema.object({
+    color: colorSchema,
+    shape: schema.oneOf([
+      schema.literal('hexagon'),
+      schema.literal('pentagon'),
+      schema.literal('ellipse'),
+      schema.literal('rectangle'),
+      schema.literal('diamond'),
+    ]),
+  }),
+]);
+
+export const groupNodeDataSchema = schema.allOf([
+  nodeBaseDataSchema,
+  schema.object({
+    shape: schema.literal('group'),
+  }),
+]);
+
+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,
+  }),
+]);
+
+export const edgeDataSchema = schema.object({
+  id: schema.string(),
+  source: schema.string(),
+  sourceShape: nodeShapeSchema,
+  target: schema.string(),
+  targetShape: nodeShapeSchema,
+  color: colorSchema,
+});
diff --git a/x-pack/packages/kbn-cloud-security-posture-common/types/graph/index.ts b/x-pack/packages/kbn-cloud-security-posture-common/types/graph/index.ts
@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export * as graphV1 from './v1';
diff --git a/x-pack/packages/kbn-cloud-security-posture-common/types/graph/latest.ts b/x-pack/packages/kbn-cloud-security-posture-common/types/graph/latest.ts
@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export * from './v1';
diff --git a/x-pack/packages/kbn-cloud-security-posture-common/types/graph/v1.ts b/x-pack/packages/kbn-cloud-security-posture-common/types/graph/v1.ts
@@ -0,0 +1,35 @@
+/*
+ * 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 type { TypeOf } from '@kbn/config-schema';
+import {
+  colorSchema,
+  edgeDataSchema,
+  entityNodeDataSchema,
+  graphRequestSchema,
+  graphResponseSchema,
+  groupNodeDataSchema,
+  labelNodeDataSchema,
+  nodeShapeSchema,
+} from '../../schema/graph/v1';
+
+export type GraphRequest = TypeOf<typeof graphRequestSchema>;
+export type GraphResponse = TypeOf<typeof graphResponseSchema>;
+
+export type Color = typeof colorSchema.type;
+
+export type NodeShape = TypeOf<typeof nodeShapeSchema>;
+
+export type EntityNodeDataModel = TypeOf<typeof entityNodeDataSchema>;
+
+export type GroupNodeDataModel = TypeOf<typeof groupNodeDataSchema>;
+
+export type LabelNodeDataModel = TypeOf<typeof labelNodeDataSchema>;
+
+export type EdgeDataModel = TypeOf<typeof edgeDataSchema>;
+
+export type NodeDataModel = EntityNodeDataModel | GroupNodeDataModel | LabelNodeDataModel;
diff --git a/x-pack/packages/kbn-cloud-security-posture/README.md b/x-pack/packages/kbn-cloud-security-posture/README.md
@@ -4,6 +4,13 @@ This package includes
 - Hooks that's used on Flyout component that's used in Alerts page on Security Solution Plugins as well as components on CSP plugin
 - Utilities and types thats used for the Hooks above as well as in CSP plugins
 
+## Storybook
+
+General look of the component can be checked visually running the following storybook:
+`yarn storybook cloud_security_posture_graph`
+
+Note that all the interactions are mocked.
+
 ## Maintainers
 
 Maintained by the Cloud Security Team
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/README.md b/x-pack/packages/kbn-cloud-security-posture/graph/README.md
@@ -0,0 +1,25 @@
+# Cloud Security Posture's Graph
+
+## Motivation
+
+The idea behind this package is to have a reusable graph component, embedding the features available to alerts flyout in
+security solution plugin.
+
+## How to use this
+
+Standalone examples will follow. In the meantime checkout storybook to view the graphs progress.
+
+## The most important public api members
+
+- GraphComponent itself (comming soon..)
+
+### Extras
+
+Be sure to check out provided helpers
+
+## Storybook
+
+General look of the component can be checked visually running the following storybook:
+`yarn storybook cloud_security_posture_packages`
+
+Note that all the interactions are mocked.
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/index.ts b/x-pack/packages/kbn-cloud-security-posture/graph/index.ts
@@ -0,0 +1,6 @@
+/*
+ * 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.
+ */
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/jest.config.js b/x-pack/packages/kbn-cloud-security-posture/graph/jest.config.js
@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  roots: ['<rootDir>/x-pack/packages/kbn-cloud-security-posture/graph'],
+  rootDir: '../../../..',
+};
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/kibana.jsonc b/x-pack/packages/kbn-cloud-security-posture/graph/kibana.jsonc
@@ -0,0 +1,5 @@
+{
+  "type": "shared-browser",
+  "id": "@kbn/cloud-security-posture-graph",
+  "owner": "@elastic/kibana-cloud-security-posture"
+}
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/package.json b/x-pack/packages/kbn-cloud-security-posture/graph/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/cloud-security-posture-graph",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0",
+  "sideEffects": false
+}
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/assets/icons/aws.svg b/x-pack/packages/kbn-cloud-security-posture/graph/src/assets/icons/aws.svg
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/assets/icons/aws_ec2.svg b/x-pack/packages/kbn-cloud-security-posture/graph/src/assets/icons/aws_ec2.svg
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/assets/icons/aws_s3.svg b/x-pack/packages/kbn-cloud-security-posture/graph/src/assets/icons/aws_s3.svg