Merge pull request elastic#10 from Elastic-AWP-Platform/session-detai…

…l-view
kqualters-elastic · Nov 23, 2021 · c5b51af · c5b51af
2 parents 3580636 + b2b98a1
commit c5b51af
Show file tree

Hide file tree

Showing 8 changed files with 352 additions and 44 deletions.
diff --git a/x-pack/plugins/session_view/common/test/mock_data.ts b/x-pack/plugins/session_view/common/test/mock_data.ts
@@ -4,14 +4,14 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import uuid from 'uuid';
-import { EventAction, ProcessEvent } from '../../public/hooks/use_process_tree';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { EventAction, ProcessEvent, EventKind } from '../../public/hooks/use_process_tree';
 
 export const getStart = () => {
   return [
     {
-      '@timestamp': 'Thu Oct 14 2021 12: 06: 48 GMT-0700 (Pacific Daylight Time)',
+      '@timestamp': new Date('Thu Oct 14 2021 12: 06: 48 GMT-0700 (Pacific Daylight Time)'),
       event: {
         kind: 'event',
         category: 'process',
@@ -110,7 +110,7 @@ export const getEvent = () => {
 
   return [
     {
-      '@timestamp': 'Thu Oct 14 2021 12: 06: 52 GMT-0700 (Pacific Daylight Time)',
+      '@timestamp': new Date('Thu Oct 14 2021 12: 06: 52 GMT-0700 (Pacific Daylight Time)'),
       event: {
         kind: 'event',
         category: 'process',
@@ -187,7 +187,7 @@ export const getEvent = () => {
 export const getEnd = () => {
   return [
     {
-      '@timestamp': 'Thu Oct 14 2021 12: 07: 52 GMT-0700 (Pacific Daylight Time)',
+      '@timestamp': new Date('Thu Oct 14 2021 12: 07: 52 GMT-0700 (Pacific Daylight Time)'),
       event: {
         kind: 'event',
         category: 'process',
@@ -259,7 +259,7 @@ export const getEnd = () => {
       },
     },
     {
-      '@timestamp': 'Thu Oct 14 2021 12: 07: 56 GMT-0700 (Pacific Daylight Time)',
+      '@timestamp': new Date('Thu Oct 14 2021 12: 07: 56 GMT-0700 (Pacific Daylight Time)'),
       event: {
         kind: 'event',
         category: 'process',
@@ -333,7 +333,7 @@ export const getEnd = () => {
       },
     },
     {
-      '@timestamp': 'Thu Oct 14 2021 12: 07: 56 GMT-0700 (Pacific Daylight Time)',
+      '@timestamp': new Date('Thu Oct 14 2021 12: 07: 56 GMT-0700 (Pacific Daylight Time)'),
       event: {
         kind: 'event',
         category: 'process',
@@ -407,11 +407,11 @@ export const getEnd = () => {
       },
     },
     {
-      '@timestamp': 'Thu Oct 14 2021 12: 08: 56 GMT-0700 (Pacific Daylight Time)',
+      '@timestamp': new Date('Thu Oct 14 2021 12: 08: 56 GMT-0700 (Pacific Daylight Time)'),
       event: {
         kind: 'event',
         category: 'process',
-        action: EventAction.end,
+        action: EventAction.exit,
       },
       process: {
         args: ['df', 'nested'],
@@ -487,9 +487,9 @@ export const getEnd = () => {
 
 export const mockData: ProcessEvent[] = [
   {
-    '@timestamp': 'Thu Oct 14 2021 12: 06: 48 GMT-0700 (Pacific Daylight Time)',
+    '@timestamp': new Date('Thu Oct 14 2021 12: 06: 48 GMT-0700 (Pacific Daylight Time)'),
     event: {
-      kind: 'event',
+      kind: EventKind.event,
       category: 'process',
       action: EventAction.exec,
     },
@@ -561,9 +561,9 @@ export const mockData: ProcessEvent[] = [
     },
   },
   {
-    '@timestamp': 'Thu Oct 14 2021 12: 06: 52 GMT-0700 (Pacific Daylight Time)',
+    '@timestamp': new Date('Thu Oct 14 2021 12: 06: 52 GMT-0700 (Pacific Daylight Time)'),
     event: {
-      kind: 'event',
+      kind: EventKind.event,
       category: 'process',
       action: EventAction.exec,
     },
@@ -633,9 +633,9 @@ export const mockData: ProcessEvent[] = [
     },
   },
   {
-    '@timestamp': 'Thu Oct 14 2021 12: 07: 52 GMT-0700 (Pacific Daylight Time)',
+    '@timestamp': new Date('Thu Oct 14 2021 12: 07: 52 GMT-0700 (Pacific Daylight Time)'),
     event: {
-      kind: 'event',
+      kind: EventKind.event,
       category: 'process',
       action: EventAction.exec,
     },
@@ -705,9 +705,9 @@ export const mockData: ProcessEvent[] = [
     },
   },
   {
-    '@timestamp': 'Thu Oct 14 2021 12: 07: 56 GMT-0700 (Pacific Daylight Time)',
+    '@timestamp': new Date('Thu Oct 14 2021 12: 07: 56 GMT-0700 (Pacific Daylight Time)'),
     event: {
-      kind: 'event',
+      kind: EventKind.event,
       category: 'process',
       action: EventAction.fork,
     },
@@ -779,9 +779,9 @@ export const mockData: ProcessEvent[] = [
     },
   },
   {
-    '@timestamp': 'Thu Oct 14 2021 12: 07: 56 GMT-0700 (Pacific Daylight Time)',
+    '@timestamp': new Date('Thu Oct 14 2021 12: 07: 56 GMT-0700 (Pacific Daylight Time)'),
     event: {
-      kind: 'event',
+      kind: EventKind.event,
       category: 'process',
       action: EventAction.exec,
     },
@@ -853,11 +853,11 @@ export const mockData: ProcessEvent[] = [
     },
   },
   {
-    '@timestamp': 'Thu Oct 14 2021 12: 08: 56 GMT-0700 (Pacific Daylight Time)',
+    '@timestamp': new Date('Thu Oct 14 2021 12: 08: 56 GMT-0700 (Pacific Daylight Time)'),
     event: {
-      kind: 'event',
+      kind: EventKind.event,
       category: 'process',
-      action: EventAction.end,
+      action: EventAction.exit,
     },
     process: {
       args: ['df', 'nested'],

diff --git a/x-pack/plugins/session_view/public/components/ProcessTree/styles.ts b/x-pack/plugins/session_view/public/components/ProcessTree/styles.ts
@@ -13,16 +13,12 @@ export const useStyles = () => {
 
   const cached = useMemo(() => {
     const defaultSelectionColor = euiTheme.colors.accent;
-    const padding = euiTheme.size.s;
 
     const scroller = `
       font-family: ${euiTheme.font.familyCode};
       overflow: auto;
       height: 100%;
       background-color: ${euiTheme.colors.lightestShade};
-      padding-top: ${padding};
-      padding-left: ${padding};
-      padding-bottom: ${padding};
       display: flex;
       flex-direction: column;
     `;

diff --git a/x-pack/plugins/session_view/public/components/ProcessTreeNode/index.tsx b/x-pack/plugins/session_view/public/components/ProcessTreeNode/index.tsx
@@ -49,20 +49,19 @@ export function ProcessTreeNode({
 
   const processDetails = useMemo(() => {
     return process.getDetails();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [process.events.length]);
 
   const hasExec = useMemo(() => {
     return process.hasExec();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [process.events.length]);
 
   const alerts = useMemo(() => {
     return process.getAlerts();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [process.events.length]);
 
-  if (!processDetails) {
-    return null;
-  }
-
   const styles = useStyles({ depth, hasAlerts: !!alerts.length });
 
   useLayoutEffect(() => {
@@ -74,9 +73,14 @@ export function ProcessTreeNode({
         return `<span style="${styles.searchHighlight}">${match}</span>`;
       });
 
+      // eslint-disable-next-line no-unsanitized/property
       textRef.current.innerHTML = html;
     }
-  }, [searchMatched]);
+  }, [searchMatched, styles.searchHighlight]);
+
+  if (!processDetails) {
+    return null;
+  }
 
   const { interactive } = processDetails.process;
 

diff --git a/x-pack/plugins/session_view/public/components/SessionView/index.tsx b/x-pack/plugins/session_view/public/components/SessionView/index.tsx
@@ -6,13 +6,22 @@
  */
 import React, { useState, useEffect } from 'react';
 import { useQuery } from 'react-query';
-import { EuiSearchBar, EuiSearchBarOnChangeArgs, EuiEmptyPrompt } from '@elastic/eui';
+import {
+  EuiSearchBar,
+  EuiSearchBarOnChangeArgs,
+  EuiEmptyPrompt,
+  EuiButton,
+  EuiSplitPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import { CoreStart } from '../../../../../../src/core/public';
 import { SectionLoading } from '../../shared_imports';
 import { ProcessTree } from '../ProcessTree';
 import { Process, ProcessEvent } from '../../hooks/use_process_tree';
+import { SessionViewDetailPanel } from '../SessionViewDetailPanel';
 import { useStyles } from './styles';
 import { PROCESS_EVENTS_ROUTE } from '../../../common/constants';
 
@@ -44,6 +53,8 @@ interface ProcessEventResults {
 export const SessionView = ({ sessionEntityId, height }: SessionViewDeps) => {
   const [searchQuery, setSearchQuery] = useState('');
   const [data, setData] = useState<ProcessEvent[]>([]);
+  const [isDetailOpen, setIsDetailOpen] = useState(false);
+  const [isDetailMounted, setIsDetailMounted] = useState(false);
   const [selectedProcess, setSelectedProcess] = useState<Process | null>(null);
 
   const { http } = useKibana<CoreStart>().services;
@@ -91,10 +102,10 @@ export const SessionView = ({ sessionEntityId, height }: SessionViewDeps) => {
       return;
     }
 
-    const events: ProcessEvent[] = getData.events.hits.map(
+    const events: ProcessEvent[] = (getData.events?.hits || []).map(
       (event: any) => event._source as ProcessEvent
     );
-    const alerts: ProcessEvent[] = getData.alerts.hits.map((event: any) => {
+    const alerts: ProcessEvent[] = (getData.alerts?.hits || []).map((event: any) => {
       return event._source as ProcessEvent;
     });
     const all: ProcessEvent[] = events.concat(alerts).sort(sortEvents);
@@ -146,14 +157,57 @@ export const SessionView = ({ sessionEntityId, height }: SessionViewDeps) => {
     }
   };
 
+  const renderSessionViewDetailPanel = () => {
+    if (selectedProcess && isDetailOpen) {
+      return (
+        <SessionViewDetailPanel
+          isDetailMounted={isDetailMounted}
+          height={height}
+          selectedProcess={selectedProcess}
+          setIsDetailOpen={setIsDetailOpen}
+          session={data?.[0]?.process.session}
+        />
+      );
+    }
+  };
+
+  const toggleDetailPanel = () => {
+    setIsDetailMounted(!isDetailMounted);
+    if (!isDetailOpen) {
+      setIsDetailOpen(true);
+    }
+  };
+
   if (!(isLoading || isError || data.length)) {
     return renderNoData();
   }
 
   return (
     <>
-      <EuiSearchBar query={searchQuery} onChange={onSearch} />
-      {renderProcessTree()}
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiSearchBar query={searchQuery} onChange={onSearch} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton onClick={toggleDetailPanel} iconType="list" fill>
+            <FormattedMessage
+              id="xpack.sessionView.buttonOpenDetailPanel"
+              defaultMessage="Detail panel"
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSplitPanel.Outer
+        direction="row"
+        color="transparent"
+        borderRadius="none"
+        css={styles.outerPanel}
+      >
+        <EuiSplitPanel.Inner paddingSize="none" css={styles.treePanel}>
+          {renderProcessTree()}
+        </EuiSplitPanel.Inner>
+        {renderSessionViewDetailPanel()}
+      </EuiSplitPanel.Outer>
     </>
   );
 };
diff --git a/x-pack/plugins/session_view/public/components/SessionView/styles.ts b/x-pack/plugins/session_view/public/components/SessionView/styles.ts
@@ -6,27 +6,83 @@
  */
 
 import { useMemo } from 'react';
-// import { useEuiTheme } from '@elastic/eui';
-import { CSSObject } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
+import { keyframes, CSSObject } from '@emotion/react';
 
 interface StylesDeps {
   height: number | undefined;
 }
 
 export const useStyles = ({ height = 500 }: StylesDeps) => {
-  // const { euiTheme } = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
 
   const cached = useMemo(() => {
     // const { colors, border, font, size } = euiTheme;
+    const padding = euiTheme.size.s;
 
     const processTree: CSSObject = {
-      height: height + 'px',
+      height: `${height}px`,
     };
 
+    const outerPanel: CSSObject = {
+      fontFamily: euiTheme.font.familyCode,
+      position: 'relative',
+      overflowX: 'hidden',
+    };
+
+    const treePanel: CSSObject = {
+      paddingTop: padding,
+      paddingLeft: padding,
+    };
+
+    const slideIn = keyframes({
+      to: {
+        right: '0',
+      },
+    });
+
+    const slideOut = keyframes({
+      from: {
+        right: '0',
+      },
+      to: {
+        right: '-100%',
+      },
+    });
+
+    const detailPanel: CSSObject = {
+      width: '424px',
+      height: `${height}px`,
+      overflowY: 'auto',
+      position: 'absolute',
+      top: '8px',
+      right: '-100%',
+    };
+
+    const detailPanelIn: Array<string | CSSObject> = [
+      slideIn.styles,
+      {
+        ...detailPanel,
+        animation: `${slideIn.name} 200ms ease forwards`,
+      },
+    ];
+
+    const detailPanelOut: Array<string | CSSObject> = [
+      slideOut.styles,
+      {
+        ...detailPanel,
+        animation: `${slideOut.name} 150ms ease`,
+      },
+    ];
+
     return {
       processTree,
+      outerPanel,
+      treePanel,
+      detailPanelIn,
+      detailPanelOut,
     };
-  }, []);
+  }, [height, euiTheme]);
 
   return cached;
 };