integrates with resolver pr

elastic · Mar 2, 2020 · 5500167 · 5500167
1 parent ce5d25b
commit 5500167
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 25 deletions.
diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/selectors.ts b/x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/selectors.ts
@@ -15,7 +15,7 @@ import {
   AlertsAPIQueryParams,
   CreateStructuredSelector,
 } from '../../types';
-import { Immutable, LegacyEndpointEvent } from '../../../../../common/types';
+import { Immutable } from '../../../../../common/types';
 
 const createStructuredSelector: CreateStructuredSelector = createStructuredSelectorWithBadType;
 /**
@@ -98,6 +98,11 @@ export const hasSelectedAlert: (state: AlertListState) => boolean = createSelect
 /**
  * Determine if the alert event is most likely compatible with LegacyEndpointEvent.
  */
-function isAlertEventLegacyEndpointEvent(event: { endgame?: {} }): event is LegacyEndpointEvent {
-  return event.endgame !== undefined && 'unique_pid' in event.endgame;
-}
+export const selectedAlertIsLegacyEndpointEvent: (
+  state: AlertListState
+) => boolean = createSelector(selectedAlertDetailsData, function(event) {
+  if (event === undefined) {
+    return false;
+  }
+  return 'endgame' in event;
+});
diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/details/overview/index.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/details/overview/index.tsx
@@ -11,12 +11,16 @@ import { useAlertListSelector } from '../../hooks/use_alerts_selector';
 import * as selectors from '../../../../store/alerts/selectors';
 import { MetadataPanel } from './metadata_panel';
 import { FormattedDate } from '../../formatted_date';
+import { AlertDetailResolver } from '../../resolver';
 
 export const AlertDetailsOverview = memo(() => {
   const alertDetailsData = useAlertListSelector(selectors.selectedAlertDetailsData);
   if (alertDetailsData === undefined) {
     return null;
   }
+  const selectedAlertIsLegacyEndpointEvent = useAlertListSelector(
+    selectors.selectedAlertIsLegacyEndpointEvent
+  );
 
   const tabs = useMemo(() => {
     return [
@@ -43,10 +47,15 @@ export const AlertDetailsOverview = memo(() => {
             defaultMessage: 'Resolver',
           }
         ),
-        content: 'Resolver',
+        content: (
+          <>
+            <EuiSpacer />
+            {selectedAlertIsLegacyEndpointEvent && <AlertDetailResolver />}
+          </>
+        ),
       },
     ];
-  }, []);
+  }, [selectedAlertIsLegacyEndpointEvent]);
 
   return (
     <>

diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/index.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/index.tsx
@@ -93,7 +93,6 @@ export const AlertIndex = memo(() => {
   const alertListData = useAlertListSelector(selectors.alertListData);
   const hasSelectedAlert = useAlertListSelector(selectors.hasSelectedAlert);
   const queryParams = useAlertListSelector(selectors.uiQueryParams);
-  const selectedEvent = useAlertListSelector(selectors.selectedEvent);
 
   const onChangeItemsPerPage = useCallback(
     newPageSize => {

diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/resolver.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/resolver.tsx
@@ -16,25 +16,22 @@ import { useAlertListSelector } from './hooks/use_alerts_selector';
 import * as selectors from '../../store/alerts/selectors';
 
 export const AlertDetailResolver = styled(
-  React.memo(
-    ({ className, selectedEvent }: { className?: string; selectedEvent?: LegacyEndpointEvent }) => {
-      const context = useKibana<EndpointPluginServices>();
-      const { store } = storeFactory(context);
-      // Different shit
-      const alertDetailsData = useAlertListSelector(selectors.selectedAlertDetailsData);
-      if (alertDetailsData === undefined) {
-        return null;
-      }
-
-      return (
-        <div className={className} data-test-subj="alertResolver" data-testid="alertResolver">
-          <Provider store={store}>
-            <Resolver selectedEvent={selectedEvent} />
-          </Provider>
-        </div>
-      );
+  React.memo(({ className }: { className?: string }) => {
+    const alertDetailsData = useAlertListSelector(selectors.selectedAlertDetailsData);
+    if (alertDetailsData === undefined) {
+      return null;
     }
-  )
+    const context = useKibana<EndpointPluginServices>();
+    const { store } = storeFactory(context);
+
+    return (
+      <div className={className} data-test-subj="alertResolver" data-testid="alertResolver">
+        <Provider store={store}>
+          <Resolver selectedEvent={(alertDetailsData as unknown) as LegacyEndpointEvent} />
+        </Provider>
+      </div>
+    );
+  })
 )`
   height: 100%;
   width: 100%;