From 6cb887b820cd2fc0ccd5da036b2a87603a1fac8b Mon Sep 17 00:00:00 2001
From: Brent Kimmel <bkimmel@endgame.com>
Date: Mon, 27 Apr 2020 16:13:34 -0400
Subject: [PATCH] adding type information for related events

---
 .../public/embeddables/resolver/types.ts      |   7 ++
 .../resolver/view/process_event_dot.tsx       | 114 +++++++++---------
 2 files changed, 65 insertions(+), 56 deletions(-)

diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/types.ts b/x-pack/plugins/endpoint/public/embeddables/resolver/types.ts
index d370bda0d1842..aca1eef3de24e 100644
--- a/x-pack/plugins/endpoint/public/embeddables/resolver/types.ts
+++ b/x-pack/plugins/endpoint/public/embeddables/resolver/types.ts
@@ -130,6 +130,13 @@ export type CameraState = {
     }
 );
 
+export const waitingForRelatedEventData = Symbol('The app has requested related event data for this entity ID, but has not yet receieved it');
+export type RelatedEventDataEntry = object;
+export type RelatedEventDataEntryWithStats = RelatedEventDataEntry & {
+  stats: object;
+}
+export type RelatedEventData = Record<string, RelatedEventDataEntryWithStats | typeof waitingForRelatedEventData>;
+
 /**
  * State for `data` reducer which handles receiving Resolver data from the backend.
  */
diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx
index 1dbf0ce94b536..422297d782475 100644
--- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx
+++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx
@@ -105,70 +105,72 @@ const OptionList = React.memo(
   }
 );
 
-const NodeSubMenu = styled(React.memo(
-  ({
-    menuTitle,
-    menuAction,
-    optionsWithActions,
-    className,
-  }: { menuTitle: string; className?: string } & (
-    | {
-        menuAction?: undefined;
-        optionsWithActions: ResolverSubmenuOptionList;
+const NodeSubMenu = styled(
+  React.memo(
+    ({
+      menuTitle,
+      menuAction,
+      optionsWithActions,
+      className,
+    }: { menuTitle: string; className?: string } & (
+      | {
+          menuAction?: undefined;
+          optionsWithActions: ResolverSubmenuOptionList;
+        }
+      | { menuAction: () => unknown; optionsWithActions?: undefined }
+    )) => {
+      const [menuIsOpen, setMenuOpen] = useState(false);
+      const handleMenuOpenClick = useCallback(
+        (clickEvent: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          clickEvent.preventDefault();
+          clickEvent.stopPropagation();
+          setMenuOpen(!menuIsOpen);
+        },
+        [menuIsOpen]
+      );
+      const handleMenuActionClick = useCallback(
+        (clickEvent: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          clickEvent.preventDefault();
+          clickEvent.stopPropagation();
+          if (typeof menuAction === 'function') menuAction();
+        },
+        [menuAction]
+      );
+      if (!optionsWithActions) {
+        /**
+         * When called with a `menuAction`
+         * Render without dropdown and call the supplied action when host button is clicked
+         */
+        return (
+          <div className={className}>
+            <EuiButton onClick={handleMenuActionClick} color="ghost" size="s" tabIndex={-1}>
+              {menuTitle}
+            </EuiButton>
+          </div>
+        );
       }
-    | { menuAction: () => unknown; optionsWithActions?: undefined }
-  )) => {
-    const [menuIsOpen, setMenuOpen] = useState(false);
-    const handleMenuOpenClick = useCallback(
-      (clickEvent: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        clickEvent.preventDefault();
-        clickEvent.stopPropagation();
-        setMenuOpen(!menuIsOpen);
-      },
-      [menuIsOpen]
-    );
-    const handleMenuActionClick = useCallback(
-      (clickEvent: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        clickEvent.preventDefault();
-        clickEvent.stopPropagation();
-        if (typeof menuAction === 'function') menuAction();
-      },
-      [menuAction]
-    );
-    if (!optionsWithActions) {
       /**
-       * When called with a `menuAction`
-       * Render without dropdown and call the supplied action when host button is clicked
+       * When called with a set of `optionsWithActions`:
+       * Render with a panel of options that appear when the menu host button is clicked
        */
       return (
-        <div className={className}>
-          <EuiButton onClick={handleMenuActionClick} color="ghost" size="s" tabIndex={-1}>
+        <div className={className + (menuIsOpen ? ' is-open' : '')}>
+          <EuiButton
+            onClick={handleMenuOpenClick}
+            color="ghost"
+            size="s"
+            iconType="arrowUp"
+            iconSide="right"
+            tabIndex={-1}
+          >
             {menuTitle}
           </EuiButton>
+          {menuIsOpen && <OptionList subMenuOptions={optionsWithActions} />}
         </div>
       );
     }
-    /**
-     * When called with a set of `optionsWithActions`:
-     * Render with a panel of options that appear when the menu host button is clicked
-     */
-    return (
-      <div className={className + (menuIsOpen ? ' is-open' : '')}>
-        <EuiButton
-          onClick={handleMenuOpenClick}
-          color="ghost"
-          size="s"
-          iconType="arrowUp"
-          iconSide="right"
-          tabIndex={-1}
-        >
-          {menuTitle}
-        </EuiButton>
-        {menuIsOpen && <OptionList subMenuOptions={optionsWithActions} />}
-      </div>
-    );
-  }
-))`
+  )
+)`
   margin: 0;
   padding: 0;
   border: none;
@@ -178,7 +180,7 @@ const NodeSubMenu = styled(React.memo(
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
-`
+`;
 
 /**
  * An artefact that represents a process node.