[Resolver] Remove currentPanelView selector (#71154)

The `currentPanelView` selector returns a value that's out of sync with the component that uses it.
elastic · Jul 8, 2020 · a0b47ca · a0b47ca
1 parent a8aee2c
commit a0b47ca
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 57 deletions.
diff --git a/x-pack/plugins/security_solution/public/resolver/store/actions.ts b/x-pack/plugins/security_solution/public/resolver/store/actions.ts
@@ -24,17 +24,6 @@ interface UserBroughtProcessIntoView {
   };
 }
 
-/**
- * Dispatched to notify state that a different panel needs to be displayed
- */
-interface AppDisplayedDifferentPanel {
-  readonly type: 'appDisplayedDifferentPanel';
-  /**
-   * The name of the panel to display
-   */
-  readonly payload: string;
-}
-
 /**
  * When an examination of query params in the UI indicates that state needs to
  * be updated to reflect the new selection
@@ -130,5 +119,4 @@ export type ResolverAction =
   | UserRequestedRelatedEventData
   | UserSelectedRelatedEventCategory
   | AppDetectedNewIdFromQueryParams
-  | AppDisplayedDifferentPanel
   | AppDetectedMissingEventData;
diff --git a/x-pack/plugins/security_solution/public/resolver/store/reducer.ts b/x-pack/plugins/security_solution/public/resolver/store/reducer.ts
@@ -24,7 +24,6 @@ const uiReducer: Reducer<ResolverUIState, ResolverAction> = (
     activeDescendantId: null,
     selectedDescendantId: null,
     processEntityIdOfSelectedDescendant: null,
-    panelToDisplay: null,
   },
   action
 ) => {
@@ -39,11 +38,6 @@ const uiReducer: Reducer<ResolverUIState, ResolverAction> = (
       selectedDescendantId: action.payload.nodeId,
       processEntityIdOfSelectedDescendant: action.payload.selectedProcessId,
     };
-  } else if (action.type === 'appDisplayedDifferentPanel') {
-    return {
-      ...uiState,
-      panelToDisplay: action.payload,
-    };
   } else if (
     action.type === 'userBroughtProcessIntoView' ||
     action.type === 'appDetectedNewIdFromQueryParams'

diff --git a/x-pack/plugins/security_solution/public/resolver/store/selectors.ts b/x-pack/plugins/security_solution/public/resolver/store/selectors.ts
@@ -127,11 +127,6 @@ export const uiSelectedDescendantProcessId = composeSelectors(
   uiSelectors.selectedDescendantProcessId
 );
 
-/**
- * The current panel to display
- */
-export const currentPanelView = composeSelectors(uiStateSelector, uiSelectors.currentPanelView);
-
 /**
  * Returns the camera state from within ResolverState
  */

diff --git a/x-pack/plugins/security_solution/public/resolver/store/ui/selectors.ts b/x-pack/plugins/security_solution/public/resolver/store/ui/selectors.ts
@@ -39,8 +39,3 @@ export const selectedDescendantProcessId = createSelector(
     return processEntityIdOfSelectedDescendant;
   }
 );
-
-// Select the current panel to be displayed
-export const currentPanelView = (uiState: ResolverUIState) => {
-  return uiState.panelToDisplay;
-};
diff --git a/x-pack/plugins/security_solution/public/resolver/types.ts b/x-pack/plugins/security_solution/public/resolver/types.ts
@@ -45,10 +45,6 @@ export interface ResolverUIState {
    * The entity_id of the process for the resolver's currently selected descendant.
    */
   readonly processEntityIdOfSelectedDescendant: string | null;
-  /**
-   * Which panel the ui should display
-   */
-  readonly panelToDisplay: string | null;
 }
 
 /**

diff --git a/x-pack/plugins/security_solution/public/resolver/view/panel.tsx b/x-pack/plugins/security_solution/public/resolver/view/panel.tsx
@@ -4,15 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, {
-  memo,
-  useCallback,
-  useMemo,
-  useContext,
-  useLayoutEffect,
-  useState,
-  useEffect,
-} from 'react';
+import React, { memo, useCallback, useMemo, useContext, useLayoutEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 // eslint-disable-next-line import/no-nodejs-modules
@@ -205,21 +197,12 @@ const PanelContent = memo(function PanelContent() {
     return 'processListWithCounts';
   }, [uiSelectedEvent, crumbEvent, crumbId, graphableProcessEntityIds]);
 
-  useEffect(() => {
-    // dispatch `appDisplayedDifferentPanel` to sync state with which panel gets displayed
-    dispatch({
-      type: 'appDisplayedDifferentPanel',
-      payload: panelToShow,
-    });
-  }, [panelToShow, dispatch]);
-
-  const currentPanelView = useSelector(selectors.currentPanelView);
   const terminatedProcesses = useSelector(selectors.terminatedProcesses);
   const processEntityId = uiSelectedEvent ? event.entityId(uiSelectedEvent) : undefined;
   const isProcessTerminated = processEntityId ? terminatedProcesses.has(processEntityId) : false;
 
   const panelInstance = useMemo(() => {
-    if (currentPanelView === 'processDetails') {
+    if (panelToShow === 'processDetails') {
       return (
         <ProcessDetails
           processEvent={uiSelectedEvent!}
@@ -230,7 +213,7 @@ const PanelContent = memo(function PanelContent() {
       );
     }
 
-    if (currentPanelView === 'eventCountsForProcess') {
+    if (panelToShow === 'eventCountsForProcess') {
       return (
         <EventCountsForProcess
           processEvent={uiSelectedEvent!}
@@ -240,7 +223,7 @@ const PanelContent = memo(function PanelContent() {
       );
     }
 
-    if (currentPanelView === 'processEventListNarrowedByType') {
+    if (panelToShow === 'processEventListNarrowedByType') {
       return (
         <ProcessEventListNarrowedByType
           processEvent={uiSelectedEvent!}
@@ -251,7 +234,7 @@ const PanelContent = memo(function PanelContent() {
       );
     }
 
-    if (currentPanelView === 'relatedEventDetail') {
+    if (panelToShow === 'relatedEventDetail') {
       const parentCount: number = Object.values(
         relatedStatsForIdFromParams?.events.byCategory || {}
       ).reduce((sum, val) => sum + val, 0);
@@ -278,7 +261,7 @@ const PanelContent = memo(function PanelContent() {
     crumbId,
     pushToQueryParams,
     relatedStatsForIdFromParams,
-    currentPanelView,
+    panelToShow,
     isProcessTerminated,
   ]);
 

diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx
@@ -82,10 +82,13 @@ const invalidDateText = i18n.translate(
   }
 );
 /**
- * @param {ConstructorParameters<typeof Date>[0]} timestamp To be passed through Date->Intl.DateTimeFormat
  * @returns {string} A nicely formatted string for a date
  */
-export function formatDate(timestamp: ConstructorParameters<typeof Date>[0]) {
+export function formatDate(
+  /** To be passed through Date->Intl.DateTimeFormat */ timestamp: ConstructorParameters<
+    typeof Date
+  >[0]
+): string {
   const date = new Date(timestamp);
   if (isFinite(date.getTime())) {
     return formatter.format(date);