Merge pull request elastic#11 from Elastic-AWP-Platform/alerted_proce…

…sses

Alerted processes

x-pack/plugins/session_view/common/utils/expand_dotted_object.ts

@@ -0,0 +1,55 @@
+/*
+ * 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 { merge } from '@kbn/std';
+
+const expandDottedField = (dottedFieldName: string, val: unknown): object => {
+  const parts = dottedFieldName.split('.');
+  if (parts.length === 1) {
+    return { [parts[0]]: val };
+  } else {
+    return { [parts[0]]: expandDottedField(parts.slice(1).join('.'), val) };
+  }
+};
+
+/*
+ * Expands an object with "dotted" fields to a nested object with unflattened fields.
+ *
+ * Example:
+ *   expandDottedObject({
+ *     "kibana.alert.depth": 1,
+ *     "kibana.alert.ancestors": [{
+ *       id: "d5e8eb51-a6a0-456d-8a15-4b79bfec3d71",
+ *       type: "event",
+ *       index: "signal_index",
+ *       depth: 0,
+ *     }],
+ *   })
+ *
+ *   => {
+ *     kibana: {
+ *       alert: {
+ *         ancestors: [
+ *           id: "d5e8eb51-a6a0-456d-8a15-4b79bfec3d71",
+ *           type: "event",
+ *           index: "signal_index",
+ *           depth: 0,
+ *         ],
+ *         depth: 1,
+ *       },
+ *     },
+ *   }
+ */
+export const expandDottedObject = (dottedObj: object) => {
+  if (Array.isArray(dottedObj)) {
+    return dottedObj;
+  }
+  return Object.entries(dottedObj).reduce(
+    (acc, [key, val]) => merge(acc, expandDottedField(key, val)),
+    {}
+  );
+};

x-pack/plugins/session_view/public/components/ProcessTree/index.tsx

@@ -10,6 +10,8 @@ import { useProcessTree, ProcessEvent, Process } from '../../hooks/use_process_t
 import { useScroll } from '../../hooks/use_scroll';
 import { useStyles } from './styles';
 
+const HIDE_ORPHANS = true;
+
 interface ProcessTreeDeps {
   // process.entity_id to act as root node (typically a session (or entry session) leader).
   sessionEntityId: string;
@@ -122,6 +124,21 @@ export const ProcessTree = ({
   // eslint-disable-next-line no-console
   console.log(searchResults);
 
+  const renderOrphans = () => {
+    if (!HIDE_ORPHANS) {
+      return orphans.map((process) => {
+        return (
+          <ProcessTreeNode
+            key={process.id}
+            isOrphan
+            process={process}
+            onProcessSelected={onProcessSelected}
+          />
+        );
+      })
+    }
+  }
+
   return (
     <div ref={scrollerRef} css={styles.scroller}>
       {sessionLeader && (
@@ -131,16 +148,7 @@ export const ProcessTree = ({
           onProcessSelected={onProcessSelected}
         />
       )}
-      {orphans.map((process) => {
-        return (
-          <ProcessTreeNode
-            key={process.id}
-            isOrphan
-            process={process}
-            onProcessSelected={onProcessSelected}
-          />
-        );
-      })}
+      {renderOrphans()}
       <div ref={selectionAreaRef} css={styles.selectionArea} />
     </div>
   );

x-pack/plugins/session_view/public/components/ProcessTree/styles.ts

@@ -22,6 +22,7 @@ export const useStyles = () => {
       background-color: ${euiTheme.colors.lightestShade};
       padding-top: ${padding};
       padding-left: ${padding};
+      padding-bottom: ${padding};
       display: flex;
       flex-direction: column;
     `;

x-pack/plugins/session_view/public/components/ProcessTreeAlerts/index.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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 React from 'react';
+import {
+  EuiButton,
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiSpacer,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { useStyles } from './styles';
+import { ProcessEvent } from '../../hooks/use_process_tree';
+import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { CoreStart } from '../../../../../../src/core/public';
+
+interface ProcessTreeAlertsDeps {
+  alerts: ProcessEvent[];
+}
+
+export function ProcessTreeAlerts({ alerts }: ProcessTreeAlertsDeps) {
+  const styles = useStyles();
+  const { http } = useKibana<CoreStart>().services;
+
+  if (alerts.length === 0) {
+    return null;
+  }
+
+  const getRuleUrl = (alert: ProcessEvent) => {
+    return http.basePath.prepend(`/app/security/rules/id/${alert.kibana?.alert.rule.uuid}`);
+  };
+
+  const renderAlertDetails = (alert: ProcessEvent, index: number) => {
+    if (!alert.kibana) {
+      return null;
+    }
+
+    const { uuid, rule, original_event: event, workflow_status: status } = alert.kibana.alert;
+    const { name, query, severity } = rule;
+
+    return (
+      <EuiText key={uuid} size="s">
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <h6>
+              <FormattedMessage id="kbn.sessionView.rule" defaultMessage="Rule" />
+            </h6>
+            {name}
+            <h6>
+              <FormattedMessage id="kbn.sessionView.query" defaultMessage="Query" />
+            </h6>
+            {query}
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <h6>
+              <FormattedMessage id="kbn.sessionView.severity" defaultMessage="Severity" />
+            </h6>
+            {severity}
+            <h6>
+              <FormattedMessage
+                id="kbn.sessionView.workflowStatus"
+                defaultMessage="Workflow status"
+              />
+            </h6>
+            {status}
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <h6>
+              <FormattedMessage id="kbn.sessionView.action" defaultMessage="Action" />
+            </h6>
+            {event.action}
+            <EuiSpacer />
+            <div>
+              <EuiButton size="s" href={getRuleUrl(alert)}>
+                <FormattedMessage id="kbn.sessionView.viewRule" defaultMessage="View rule" />
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        {index < alerts.length - 1 && (
+          <div>
+            <EuiHorizontalRule margin="m" />
+          </div>
+        )}
+      </EuiText>
+    );
+  };
+
+  return <div css={styles.container}>{alerts.map(renderAlertDetails)}</div>;
+}

x-pack/plugins/session_view/public/components/ProcessTreeAlerts/styles.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 { useMemo } from 'react';
+import { useEuiTheme } from '@elastic/eui';
+import { CSSObject } from '@emotion/react';
+
+export const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  const cached = useMemo(() => {
+    const { size, colors, border } = euiTheme;
+
+    const container: CSSObject = {
+      marginTop: size.s,
+      marginRight: size.s,
+      color: colors.text,
+      padding: size.m,
+      borderStyle: 'solid',
+      borderColor: colors.lightShade,
+      borderWidth: border.width.thin,
+      borderRadius: border.radius.medium,
+      maxWidth: 800,
+      backgroundColor: 'white',
+    };
+
+    return {
+      container,
+    };
+  }, [euiTheme]);
+
+  return cached;
+};

x-pack/plugins/session_view/public/components/ProcessTreeNode/index.tsx

@@ -16,6 +16,7 @@ import { EuiButton, EuiIcon } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Process } from '../../hooks/use_process_tree';
 import { useStyles } from './styles';
+import { ProcessTreeAlerts } from '../ProcessTreeAlerts';
 
 interface ProcessDeps {
   process: Process;
@@ -36,16 +37,35 @@ export function ProcessTreeNode({
   depth = 0,
   onProcessSelected,
 }: ProcessDeps) {
-  const styles = useStyles({ depth });
   const textRef = useRef<HTMLSpanElement>(null);
 
   const [childrenExpanded, setChildrenExpanded] = useState(isSessionLeader || process.autoExpand);
+  const [alertsExpanded, setAlertsExpanded] = useState(false);
   const { searchMatched } = process;
 
   useEffect(() => {
     setChildrenExpanded(isSessionLeader || process.autoExpand);
   }, [isSessionLeader, process.autoExpand]);
 
+
+  const processDetails = useMemo(() => {
+    return process.getDetails();
+  }, [process.events.length]);
+
+  const hasExec = useMemo(() => {
+    return process.hasExec();
+  }, [process.events.length]);
+
+  const alerts = useMemo(() => {
+    return process.getAlerts();
+  }, [process.events.length]);
+
+  if (!processDetails) {
+    return null;
+  }
+
+  const styles = useStyles({ depth, hasAlerts: !!alerts.length });
+
   useLayoutEffect(() => {
     if (searchMatched !== null && textRef.current) {
       const regex = new RegExp(searchMatched);
@@ -59,18 +79,6 @@ export function ProcessTreeNode({
     }
   }, [searchMatched]);
 
-  const processDetails = useMemo(() => {
-    return process.getDetails();
-  }, [process.events.length]);
-
-  const hasExec = useMemo(() => {
-    return process.hasExec();
-  }, [process.events.length]);
-
-  if (!processDetails) {
-    return null;
-  }
-
   const { interactive } = processDetails.process;
 
   const renderChildren = () => {
@@ -98,16 +106,27 @@ export function ProcessTreeNode({
     );
   };
 
+  const getExpandedIcon = (expanded: boolean) => {
+    return expanded ? 'arrowUp' : 'arrowDown';
+  }
+
   const renderButtons = () => {
     const buttons = [];
 
     if (!isSessionLeader && process.children.length > 0) {
-      const childrenExpandedIcon = childrenExpanded ? 'arrowUp' : 'arrowDown';
-
       buttons.push(
-        <EuiButton css={styles.button} onClick={() => setChildrenExpanded(!childrenExpanded)}>
+        <EuiButton css={styles.getButtonStyle(styles.ButtonType.children)} onClick={() => setChildrenExpanded(!childrenExpanded)}>
           <FormattedMessage id="kbn.sessionView.childProcesses" defaultMessage="Child processes" />
-          <EuiIcon css={styles.buttonArrow} size="s" type={childrenExpandedIcon} />
+          <EuiIcon css={styles.buttonArrow} size="s" type={getExpandedIcon(childrenExpanded)} />
+        </EuiButton>
+      );
+    }
+
+    if (alerts.length) {
+      buttons.push(
+        <EuiButton css={styles.getButtonStyle(styles.ButtonType.alerts)} onClick={() => setAlertsExpanded(!alertsExpanded)}>
+          <FormattedMessage id="kbn.sessionView.alerts" defaultMessage="Alerts" />
+          <EuiIcon css={styles.buttonArrow} size="s" type={getExpandedIcon(alertsExpanded)} />
         </EuiButton>
       );
     }
@@ -166,6 +185,16 @@ export function ProcessTreeNode({
     );
   };
 
+  const renderRootEscalation = () => {
+    const { user, parent } = processDetails.process;
+
+    if (user.name === 'root' && user.id !== parent.user.id) {
+      return <EuiButton css={styles.getButtonStyle(styles.ButtonType.userChanged)}>
+        <FormattedMessage id="kbn.sessionView.execUserChange" defaultMessage="Root escalation" />
+      </EuiButton>
+    }
+  }
+
   const onProcessClicked = (e: MouseEvent) => {
     e.stopPropagation();
 
@@ -187,9 +216,11 @@ export function ProcessTreeNode({
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
         <div css={styles.wrapper} onClick={onProcessClicked}>
           {isSessionLeader ? renderSessionLeader() : renderProcess()}
+          {renderRootEscalation()}
           {renderButtons()}
         </div>
       </div>
+      {alertsExpanded && <ProcessTreeAlerts alerts={alerts} />}
       {renderChildren()}
     </>
   );