show graph in alert details

x-pack/plugins/graph/kibana.json

@@ -4,6 +4,7 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
+  "extraPublicDirs": ["public/components/graph_visualization", "public/services/workspace"],
   "requiredPlugins": [
     "licensing",
     "data",

x-pack/plugins/graph/public/services/workspace/graph_client_workspace.js

@@ -522,6 +522,7 @@ function GraphWorkspace(options) {
     const visibleNodes = self.nodes.filter(function (n) {
       return n.parent === undefined;
     });
+    console.log("VISIBLE NODES: ", visibleNodes);
     //reset then roll-up all the counts
     const allNodes = self.nodes;
     allNodes.forEach((node) => {
@@ -890,6 +891,7 @@ function GraphWorkspace(options) {
       self.addUndoLogEntry(lastOps);
     }
 
+    console.log("MERGED!!: ", this);
     this.runLayout();
   };
 

x-pack/plugins/graph/public/services/workspace/index.d.ts

@@ -0,0 +1,10 @@
+/*
+ * 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 { Workspace, WorkspaceOptions } from '../../types';
+
+declare function createWorkspace(options: WorkspaceOptions): Workspace;

x-pack/plugins/graph/public/services/workspace/index.js

@@ -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 './graph_client_workspace';

x-pack/plugins/security_solution/kibana.json

@@ -19,6 +19,7 @@
     "embeddable",
     "eventLog",
     "features",
+    "graph",
     "inspector",
     "kubernetesSecurity",
     "lens",

x-pack/plugins/security_solution/public/app/font_awesome/font-awesome.scss

@@ -0,0 +1,139 @@
+@font-face {
+    font-family: 'FontAwesome';
+    src: url('~font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
+    src: url('~font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
+      url('~font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
+      url('~font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
+      url('~font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
+      url('~font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  @import 'font-awesome/scss/variables';
+  @import 'font-awesome/scss/core';
+  @import 'font-awesome/scss/icons';
+
+  // new file icon
+  .#{$fa-css-prefix}-file-new-o:before { content: $fa-var-file-o; }
+  .#{$fa-css-prefix}-file-new-o:after { content: $fa-var-plus; position: relative; margin-left: -1.0em; font-size: .5em; }
+
+  // alias for alert types - allows class="fa fa-{{alertType}}"
+  .fa-success:before { content: $fa-var-check; }
+  .fa-danger:before { content: $fa-var-exclamation-circle; }
+
+  /**
+ * THE SVG Graph
+ * 1. Calculated px values come from the open/closed state of the global nav sidebar
+ */
+
+ #graphBasic {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.gphGraph__container {
+  display: flex;
+  flex-direction: column;
+  background: $euiColorEmptyShade;
+  position: relative;
+  flex: 1;
+}
+
+.gphGraph__menus {
+  margin: $euiSizeS;
+}
+
+.gphGraph__flexGroup {
+  display: flex;
+  width: 100%;
+}
+
+.gphGraph__flexGroupFiller {
+  flex: 1 1 auto;
+}
+
+@mixin gphSvgText() {
+  font-family: $euiFontFamily;
+  font-size: $euiSizeS;
+  line-height: $euiSizeM;
+  fill: $euiColorDarkShade;
+  color: $euiColorDarkShade;
+}
+
+.gphVisualization {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.gphGraph {
+  flex: 1;
+  overflow: hidden;
+}
+
+.gphEdge {
+  fill: $euiColorMediumShade;
+  stroke: $euiColorMediumShade;
+  stroke-width: 2;
+  stroke-opacity: .5;
+
+  &--selected {
+    stroke: $euiColorDarkShade;
+    stroke-opacity: .95;
+  }
+}
+
+.gphEdge--clickable {
+  fill: transparent;
+  opacity: 0;
+}
+
+.gphEdge--wrapper:hover {
+  .gphEdge {
+    stroke-opacity: .95;
+    cursor: pointer;
+  }
+}
+
+.gphNode {
+  cursor: pointer;
+}
+
+.gphNode__label {
+  @include gphSvgText;
+  cursor: pointer;
+  &--html {
+    @include euiTextTruncate;
+    text-align: center;
+  }
+}
+
+.gphNode__markerCircle {
+  fill: $euiColorDarkShade;
+  stroke: $euiColorEmptyShade;
+}
+
+.gphNode__markerText {
+  @include gphSvgText;
+  font-size: $euiSizeS - 2px;
+  fill: $euiColorEmptyShade;
+}
+
+.gphNode__circle {
+  fill: $euiColorMediumShade;
+  &--selected {
+    stroke-width: $euiSizeXS;
+    stroke: transparentize($euiColorPrimary, .25);
+  }
+}
+
+.gphNode__text {
+  fill: $euiColorInk;
+
+  &--inverse {
+    fill: $euiColorGhost;
+  }
+}

x-pack/plugins/security_solution/public/app/font_awesome/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.
+ */
+
+import './font-awesome.scss';

x-pack/plugins/security_solution/public/app/index.tsx

@@ -13,6 +13,7 @@ import { Route } from '@kbn/kibana-react-plugin/public';
 import { NotFoundPage } from './404';
 import { SecurityApp } from './app';
 import type { RenderAppProps } from './types';
+import('./font_awesome');
 
 export const renderApp = ({
   element,

x-pack/plugins/security_solution/public/detections/pages/alert_details/index.tsx

@@ -70,7 +70,7 @@ export const AlertDetailsPage = memo(() => {
       {loading && <AlertDetailsLoadingPage eventId={eventId} />}
       {dataNotFound && <AlertDetailsErrorPage eventId={eventId} />}
       {hasData && (
-        <>
+        <div style={{ height: '100%' }}>
           <AlertDetailsHeader loading={loading} ruleName={ruleName} timestamp={timestamp} />
           <SecuritySolutionTabNavigation navTabs={getAlertDetailsNavTabs(eventId)} />
           <EuiSpacer size="l" />
@@ -86,7 +86,7 @@ export const AlertDetailsPage = memo(() => {
               <AlertDetailsVisualizeTab data={detailsData} id={eventId} searchHit={searchHit} />
             </Route>
           </Switch>
-        </>
+        </div>
       )}
       <SpyRoute pageName={SecurityPageName.alerts} state={{ ruleName }} />
     </>