Fix merge conflict

kqualters-elastic · Nov 29, 2021 · fc0be8a · fc0be8a
2 parents c7f6108 + 64f5b84
commit fc0be8a
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 41 deletions.
diff --git a/x-pack/plugins/session_view/public/components/ProcessTreeNode/index.tsx b/x-pack/plugins/session_view/public/components/ProcessTreeNode/index.tsx
@@ -15,7 +15,7 @@ import React, { useMemo, useRef, useLayoutEffect, useState, useEffect, MouseEven
 import { EuiButton, EuiIcon } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Process } from '../../hooks/use_process_tree';
-import { useStyles } from './styles';
+import { useStyles, ButtonType } from './styles';
 import { ProcessTreeAlerts } from '../ProcessTreeAlerts';
 
 interface ProcessDeps {
@@ -119,7 +119,7 @@ export function ProcessTreeNode({
     if (!isSessionLeader && process.children.length > 0) {
       buttons.push(
         <EuiButton
-          css={styles.getButtonStyle(styles.ButtonType.children)}
+          css={styles.getButtonStyle(ButtonType.children)}
           onClick={() => setChildrenExpanded(!childrenExpanded)}
         >
           <FormattedMessage
@@ -134,7 +134,7 @@ export function ProcessTreeNode({
     if (alerts.length) {
       buttons.push(
         <EuiButton
-          css={styles.getButtonStyle(styles.ButtonType.alerts)}
+          css={styles.getButtonStyle(ButtonType.alerts)}
           onClick={() => setAlertsExpanded(!alertsExpanded)}
         >
           <FormattedMessage id="xpack.sessionView.alerts" defaultMessage="Alerts" />
@@ -202,7 +202,7 @@ export function ProcessTreeNode({
 
     if (user.name === 'root' && user.id !== parent.user.id) {
       return (
-        <EuiButton css={styles.getButtonStyle(styles.ButtonType.userChanged)}>
+        <EuiButton css={styles.getButtonStyle(ButtonType.userChanged)}>
           <FormattedMessage
             id="xpack.sessionView.execUserChange"
             defaultMessage="Root escalation"

diff --git a/x-pack/plugins/session_view/public/components/ProcessTreeNode/styles.ts b/x-pack/plugins/session_view/public/components/ProcessTreeNode/styles.ts
@@ -16,28 +16,28 @@ interface StylesDeps {
   hasAlerts: boolean;
 }
 
+export enum ButtonType {
+  children = 'children',
+  alerts = 'alerts',
+  output = 'output',
+  userChanged = 'user',
+}
+
 export const useStyles = ({ depth, hasAlerts }: StylesDeps) => {
   const { euiTheme } = useEuiTheme();
 
   const cached = useMemo(() => {
     const { colors, border, font, size } = euiTheme;
 
-    enum ButtonType {
-      children = 'children',
-      alerts = 'alerts',
-      output = 'output',
-      userChanged = 'user',
-    }
-
     const darkText: CSSObject = {
       color: colors.text,
     };
 
-    const searchHighlight = `
-      background-color: ${colors.highlight};
-      color: ${colors.text};
-      border-radius: ${border.radius.medium};
-    `;
+    const searchHighlight: CSSObject = {
+      backgroundColor: colors.highlight,
+      color: colors.text,
+      borderRadius: border.radius.medium,
+    };
 
     const children: CSSObject = {
       position: 'relative',
@@ -73,7 +73,7 @@ export const useStyles = ({ depth, hasAlerts }: StylesDeps) => {
       marginLeft: size.s,
     };
 
-    const getButtonStyle = (type: string) => {
+    const getButtonStyle = (type: string): CSSObject => {
       let background = 'rgba(170, 101, 86, 0.04)';
       let borderStyle = '1px solid rgba(170, 101, 86, 0.48)';
 
@@ -175,7 +175,6 @@ export const useStyles = ({ depth, hasAlerts }: StylesDeps) => {
       workingDir,
       userEnteredIcon,
       buttonArrow,
-      ButtonType,
       getButtonStyle,
       alertDetails,
     };

diff --git a/x-pack/plugins/session_view/public/components/SessionView/index.tsx b/x-pack/plugins/session_view/public/components/SessionView/index.tsx
@@ -103,7 +103,7 @@ export const SessionView = ({ sessionEntityId, height }: SessionViewDeps) => {
   };
 
   const renderSessionViewDetailPanel = () => {
-    if (selectedProcess && isDetailOpen) {
+    if (isDetailOpen) {
       return (
         <SessionViewDetailPanel
           isDetailMounted={isDetailMounted}

diff --git a/x-pack/plugins/session_view/public/components/SessionViewDetailPanel/index.tsx b/x-pack/plugins/session_view/public/components/SessionViewDetailPanel/index.tsx
@@ -6,9 +6,10 @@
  */
 import React, { useState, useEffect, ReactNode } from 'react';
 import MonacoEditor from 'react-monaco-editor';
+import { partition } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiSpacer, EuiSplitPanel, EuiTitle, EuiTabs, EuiTab } from '@elastic/eui';
-import { Process } from '../../hooks/use_process_tree';
+import { EventKind, Process } from '../../hooks/use_process_tree';
 import { useStyles } from './styles';
 
 interface SessionViewDetailPanelDeps {
@@ -19,10 +20,11 @@ interface SessionViewDetailPanelDeps {
   session?: any;
 }
 
-interface ProcessEventTabData {
+interface ProcessDetailTabData {
   id: string | number;
   name: string;
   content: ReactNode;
+  kind: string;
 }
 
 /**
@@ -34,8 +36,10 @@ export const SessionViewDetailPanel = ({
   selectedProcess,
   setIsDetailOpen,
 }: SessionViewDetailPanelDeps) => {
-  const [selectedDetailTab, setSelectedDetailTab] = useState<string | number>('');
-  const [processEventsTabs, setProcessEventsTabs] = useState<ProcessEventTabData[]>([]);
+  const [selectedCommandTab, setSelectedCommandTab] = useState<string | number>('');
+  const [commandTabs, setCommandTabs] = useState<ProcessDetailTabData[]>([]);
+  const [selectedAlertTab, setSelectedAlertTab] = useState<string | number>('');
+  const [alertTabs, setAlertTabs] = useState<ProcessDetailTabData[]>([]);
 
   const styles = useStyles({ height });
 
@@ -57,10 +61,15 @@ export const SessionViewDetailPanel = ({
           <EuiSpacer size="xxl" />
         </div>
       ),
+      kind: processEvent?.event.kind,
     }));
 
-    setProcessEventsTabs(selectedProcessEvents);
-    setSelectedDetailTab(selectedProcessEvents?.[0]?.id || '');
+    const [commandTabs, alertTabs] = partition(selectedProcessEvents, { kind: EventKind.event });
+
+    setCommandTabs(commandTabs);
+    setSelectedCommandTab(commandTabs[0]?.id || '');
+    setAlertTabs(alertTabs);
+    setSelectedAlertTab(alertTabs[0]?.id || '');
   }, [selectedProcess]);
 
   const handleAnimationEnd = () => {
@@ -69,7 +78,7 @@ export const SessionViewDetailPanel = ({
     }
   };
 
-  const renderSelectedProcessEvents = () => {
+  const renderSelectedProcessCommandDetail = () => {
     if (selectedProcess) {
       return (
         <div>
@@ -83,18 +92,49 @@ export const SessionViewDetailPanel = ({
           </EuiTitle>
           <EuiSpacer />
           <EuiTabs>
-            {processEventsTabs.map((tab, idx) => (
+            {commandTabs.map((tab, idx) => (
+              <EuiTab
+                key={idx}
+                onClick={() => setSelectedCommandTab(tab.id)}
+                isSelected={tab.id === selectedCommandTab}
+              >
+                {tab.name}
+              </EuiTab>
+            ))}
+          </EuiTabs>
+          <EuiSpacer size="xxl" />
+          {commandTabs.find((tab) => tab.id === selectedCommandTab)?.content}
+        </div>
+      );
+    }
+  };
+
+  const renderSelectedProcessAlertDetail = () => {
+    if (selectedProcess && selectedProcess.hasAlerts()) {
+      return (
+        <div>
+          <EuiTitle size="s">
+            <span>
+              <FormattedMessage
+                id="xpack.sessionView.alertDetail"
+                defaultMessage="Alert detail"
+              />
+            </span>
+          </EuiTitle>
+          <EuiSpacer />
+          <EuiTabs>
+            {alertTabs.map((tab, idx) => (
               <EuiTab
                 key={idx}
-                onClick={() => setSelectedDetailTab(tab.id)}
-                isSelected={tab.id === selectedDetailTab}
+                onClick={() => setSelectedAlertTab(tab.id)}
+                isSelected={tab.id === selectedAlertTab}
               >
                 {tab.name}
               </EuiTab>
             ))}
           </EuiTabs>
           <EuiSpacer size="xxl" />
-          {processEventsTabs.find((tab) => tab.id === selectedDetailTab)?.content}
+          {alertTabs.find((tab) => tab.id === selectedAlertTab)?.content}
         </div>
       );
     }
@@ -107,7 +147,7 @@ export const SessionViewDetailPanel = ({
       css={isDetailMounted ? styles.detailPanelIn : styles.detailPanelOut}
       onAnimationEnd={handleAnimationEnd}
     >
-      {renderSelectedProcessEvents()}
+      {renderSelectedProcessCommandDetail()}
       <EuiTitle size="s">
         <span>
           <FormattedMessage id="xpack.sessionView.sessionDetail" defaultMessage="Session detail" />
@@ -122,12 +162,7 @@ export const SessionViewDetailPanel = ({
       </EuiTitle>
       {/* Add server detail */}
       <EuiSpacer size="xxl" />
-      <EuiTitle size="s">
-        <span>
-          <FormattedMessage id="xpack.sessionView.alertDetail" defaultMessage="Alert detail" />
-        </span>
-      </EuiTitle>
-      {/* Add alert detail conditionally */}
+      {renderSelectedProcessAlertDetail()}
     </EuiSplitPanel.Inner>
   );
 };
diff --git a/x-pack/plugins/session_view/public/hooks/use_process_tree.ts b/x-pack/plugins/session_view/public/hooks/use_process_tree.ts
@@ -26,6 +26,13 @@ export enum EventAction {
   output = 'output',
 }
 
+interface EventActionPartition {
+  fork: ProcessEvent[];
+  exec: ProcessEvent[];
+  exit: ProcessEvent[];
+  output: ProcessEvent[];
+}
+
 interface User {
   id: string;
   name: string;
@@ -160,11 +167,26 @@ class ProcessImpl implements Process {
   }
 
   getDetails() {
-    const execsForks = this.events.filter(
-      ({ event }) => event.action === EventAction.exec || event.action === EventAction.fork
+    const eventsPartition = this.events.reduce(
+      (currEventsParition, processEvent) => {
+        currEventsParition[processEvent.event.action]?.push(processEvent);
+        return currEventsParition;
+      },
+      Object.values(EventAction).reduce((currActions, action) => {
+        currActions[action] = [] as ProcessEvent[];
+        return currActions;
+      }, {} as EventActionPartition)
     );
 
-    return execsForks[execsForks.length - 1];
+    if (eventsPartition.exec.length) {
+      return eventsPartition.exec[eventsPartition.exec.length - 1];
+    }
+
+    if (eventsPartition.fork.length) {
+      return eventsPartition.fork[eventsPartition.fork.length - 1];
+    }
+
+    return {} as ProcessEvent;
   }
 
   getOutput() {
@@ -244,7 +266,7 @@ export const useProcessTree = ({
       if (parentProcess) {
         process.parent = parentProcess; // handy for recursive operations (like auto expand)
 
-        if (!parentProcess.children.includes(process)) {
+        if (!parentProcess.children.includes(process) && parentProcess.id !== process.id) {
           if (backwardDirection) {
             parentProcess.children.unshift(process);
           } else {