revert changes in resolver

.eslintrc.js

@@ -826,17 +826,6 @@ module.exports = {
           {
             // prevents UI code from importing server side code and then webpack including it when doing builds
             patterns: ['**/server/*'],
-            paths: [
-              /*
-                prevents importing raw useSelector which is using different equality function than mapStateToProps,
-                so to make sure we keep the logic while moving to hooks let's use useShallowEqualSelector
-              */
-              {
-                name: 'react-redux',
-                importNames: ['useSelector'],
-                message: 'Please use "useShallowEqualSelector" instead or create your own selector',
-              },
-            ],
           },
         ],
       },

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts

@@ -4,24 +4,26 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { useSelector } from 'react-redux';
 import { useMemo } from 'react';
 
 import { useKibana } from '../../../../common/lib/kibana';
-import { useShallowEqualSelector } from '../../../../common/hooks/use_selector';
 import { EndpointState } from '../types';
 import {
   MANAGEMENT_STORE_ENDPOINTS_NAMESPACE,
   MANAGEMENT_STORE_GLOBAL_NAMESPACE,
 } from '../../../common/constants';
+import { State } from '../../../../common/store';
 
-export const useEndpointSelector = <TSelected>(selector: (state: EndpointState) => TSelected) =>
-  useShallowEqualSelector((state) =>
-    selector(
+export function useEndpointSelector<TSelected>(selector: (state: EndpointState) => TSelected) {
+  return useSelector(function (state: State) {
+    return selector(
       state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][
         MANAGEMENT_STORE_ENDPOINTS_NAMESPACE
       ] as EndpointState
-    )
-  );
+    );
+  });
+}
 
 /**
  * Returns an object that contains Ingest app and URL information

x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts

@@ -4,8 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { useSelector } from 'react-redux';
 import { PolicyListState, PolicyDetailsState } from '../types';
-import { useShallowEqualSelector } from '../../../../common/hooks/use_selector';
+import { State } from '../../../../common/store';
 import {
   MANAGEMENT_STORE_GLOBAL_NAMESPACE,
   MANAGEMENT_STORE_POLICY_DETAILS_NAMESPACE,
@@ -16,26 +17,28 @@ import {
  * Narrows global state down to the PolicyListState before calling the provided Policy List Selector
  * @param selector
  */
-export const usePolicyListSelector = <TSelected>(selector: (state: PolicyListState) => TSelected) =>
-  useShallowEqualSelector((state) =>
-    selector(
+export function usePolicyListSelector<TSelected>(selector: (state: PolicyListState) => TSelected) {
+  return useSelector((state: State) => {
+    return selector(
       state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][
         MANAGEMENT_STORE_POLICY_LIST_NAMESPACE
       ] as PolicyListState
-    )
-  );
+    );
+  });
+}
 
 /**
  * Narrows global state down to the PolicyDetailsState before calling the provided Policy Details Selector
  * @param selector
  */
-export const usePolicyDetailsSelector = <TSelected>(
+export function usePolicyDetailsSelector<TSelected>(
   selector: (state: PolicyDetailsState) => TSelected
-) =>
-  useShallowEqualSelector((state) =>
+) {
+  return useSelector((state: State) =>
     selector(
       state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][
         MANAGEMENT_STORE_POLICY_DETAILS_NAMESPACE
       ] as PolicyDetailsState
     )
   );
+}

x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx

@@ -9,14 +9,12 @@
 import React, { useCallback, useMemo, useContext } from 'react';
 import styled from 'styled-components';
 import { EuiRange, EuiPanel, EuiIcon } from '@elastic/eui';
-import { useDispatch } from 'react-redux';
-
+import { useSelector, useDispatch } from 'react-redux';
 import { SideEffectContext } from './side_effect_context';
 import { Vector2 } from '../types';
 import * as selectors from '../store/selectors';
 import { useResolverTheme } from './assets';
 import { ResolverAction } from '../store/actions';
-import { useShallowEqualSelector } from '../../common/hooks/use_selector';
 
 interface StyledGraphControls {
   graphControlsBackground: string;
@@ -66,7 +64,7 @@ const GraphControlsComponent = React.memo(
     className?: string;
   }) => {
     const dispatch: (action: ResolverAction) => unknown = useDispatch();
-    const scalingFactor = useShallowEqualSelector(selectors.scalingFactor);
+    const scalingFactor = useSelector(selectors.scalingFactor);
     const { timestamp } = useContext(SideEffectContext);
     const { colorMap } = useResolverTheme();
 

x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx

@@ -5,12 +5,11 @@
  */
 
 import React, { memo, useMemo, useContext, useLayoutEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { EuiPanel } from '@elastic/eui';
-
 import * as selectors from '../../store/selectors';
 import { useResolverDispatch } from '../use_resolver_dispatch';
 import * as event from '../../../../common/endpoint/models/event';
-import { useShallowEqualSelector } from '../../../common/hooks/use_selector';
 import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types';
 import { SideEffectContext } from '../side_effect_context';
 import { ProcessEventList } from './process_event_list';
@@ -42,7 +41,7 @@ const PanelContent = memo(function PanelContent() {
 
   const { pushToQueryParams, queryParams } = useResolverQueryParams();
 
-  const graphableProcesses = useShallowEqualSelector(selectors.graphableProcesses);
+  const graphableProcesses = useSelector(selectors.graphableProcesses);
   const graphableProcessEntityIds = useMemo(() => {
     return new Set(graphableProcesses.map(event.entityId));
   }, [graphableProcesses]);
@@ -61,7 +60,7 @@ const PanelContent = memo(function PanelContent() {
   // The "selected" node (and its corresponding event) in the tree control.
   // It may need to be synchronized with the ID indicated as selected via the `idFromParams`
   // memo above. When this is the case, it is handled by the layout effect below.
-  const selectedNode = useShallowEqualSelector(selectors.selectedNode);
+  const selectedNode = useSelector(selectors.selectedNode);
   const uiSelectedEvent = useMemo(() => {
     return graphableProcesses.find((evt) => event.entityId(evt) === selectedNode);
   }, [graphableProcesses, selectedNode]);
@@ -98,7 +97,7 @@ const PanelContent = memo(function PanelContent() {
     }
   }, [dispatch, uiSelectedEvent, paramsSelectedEvent, lastUpdatedProcess, timestamp]);
 
-  const relatedEventStats = useShallowEqualSelector(selectors.relatedEventsStats);
+  const relatedEventStats = useSelector(selectors.relatedEventsStats);
   const { crumbId, crumbEvent } = queryParams;
   const relatedStatsForIdFromParams: ResolverNodeStats | undefined = idFromParams
     ? relatedEventStats(idFromParams)

x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { memo, useMemo, HTMLAttributes } from 'react';
+import { useSelector } from 'react-redux';
 import { i18n } from '@kbn/i18n';
 import {
   htmlIdGenerator,
@@ -16,10 +17,8 @@ import {
 import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';
 import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
-
 import * as selectors from '../../store/selectors';
 import * as event from '../../../../common/endpoint/models/event';
-import { useShallowEqualSelector } from '../../../common/hooks/use_selector';
 import { CrumbInfo, formatDate, StyledBreadcrumbs } from './panel_content_utilities';
 import {
   processPath,
@@ -52,7 +51,7 @@ export const ProcessDetails = memo(function ProcessDetails({
 }) {
   const processName = event.eventName(processEvent);
   const entityId = event.entityId(processEvent);
-  const isProcessTerminated = useShallowEqualSelector(selectors.isProcessTerminated)(entityId);
+  const isProcessTerminated = useSelector(selectors.isProcessTerminated)(entityId);
   const processInfoEntry: EuiDescriptionListProps['listItems'] = useMemo(() => {
     const eventTime = event.eventTimestamp(processEvent);
     const dateTime = eventTime === undefined ? null : formatDate(eventTime);

x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx

@@ -7,9 +7,9 @@
 import React, { memo, useMemo, useEffect, Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiTitle, EuiSpacer, EuiText, EuiButtonEmpty, EuiHorizontalRule } from '@elastic/eui';
+import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
-
 import {
   CrumbInfo,
   formatDate,
@@ -18,7 +18,6 @@ import {
   StyledTime,
 } from './panel_content_utilities';
 import * as event from '../../../../common/endpoint/models/event';
-import { useShallowEqualSelector } from '../../../common/hooks/use_selector';
 import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types';
 import * as selectors from '../../store/selectors';
 import { useResolverDispatch } from '../use_resolver_dispatch';
@@ -73,7 +72,7 @@ const DisplayList = memo(function DisplayList({
   eventType: string;
   processEntityId: string;
 }) {
-  const relatedLookupsByCategory = useShallowEqualSelector(selectors.relatedEventInfoByEntityId);
+  const relatedLookupsByCategory = useSelector(selectors.relatedEventInfoByEntityId);
   const lookupsForThisNode = relatedLookupsByCategory(processEntityId);
   const shouldShowLimitWarning = lookupsForThisNode?.shouldShowLimitForCategory(eventType);
   const numberDisplayed = lookupsForThisNode?.numberActuallyDisplayedForCategory(eventType);
@@ -161,7 +160,7 @@ export const ProcessEventList = memo(function ProcessEventList({
     }
   );
 
-  const relatedsReadyMap = useShallowEqualSelector(selectors.relatedEventsReady);
+  const relatedsReadyMap = useSelector(selectors.relatedEventsReady);
   const relatedsReady = relatedsReadyMap.get(processEntityId);
 
   const dispatch = useResolverDispatch();
@@ -186,7 +185,7 @@ export const ProcessEventList = memo(function ProcessEventList({
     ];
   }, [pushToQueryParams, eventsString]);
 
-  const relatedByCategory = useShallowEqualSelector(selectors.relatedEventsByCategory);
+  const relatedByCategory = useSelector(selectors.relatedEventsByCategory);
 
   /**
    * A list entry will be displayed for each of these

x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx

@@ -12,10 +12,9 @@ import {
   EuiInMemoryTable,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
-
 import * as event from '../../../../common/endpoint/models/event';
-import { useShallowEqualSelector } from '../../../common/hooks/use_selector';
 import * as selectors from '../../store/selectors';
 import { CrumbInfo, formatter, StyledBreadcrumbs } from './panel_content_utilities';
 import { useResolverDispatch } from '../use_resolver_dispatch';
@@ -62,7 +61,7 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({
 
   const dispatch = useResolverDispatch();
   const { timestamp } = useContext(SideEffectContext);
-  const isProcessTerminated = useShallowEqualSelector(selectors.isProcessTerminated);
+  const isProcessTerminated = useSelector(selectors.isProcessTerminated);
   const handleBringIntoViewClick = useCallback(
     (processTableViewItem) => {
       dispatch({
@@ -150,7 +149,7 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({
     [pushToQueryParams, handleBringIntoViewClick, isProcessTerminated]
   );
 
-  const { processNodePositions } = useShallowEqualSelector(selectors.layout);
+  const { processNodePositions } = useSelector(selectors.layout);
   const processTableView: ProcessTableView[] = useMemo(
     () =>
       [...processNodePositions.keys()].map((processEvent) => {
@@ -176,8 +175,8 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({
     ];
   }, []);
 
-  const children = useShallowEqualSelector(selectors.hasMoreChildren);
-  const ancestors = useShallowEqualSelector(selectors.hasMoreAncestors);
+  const children = useSelector(selectors.hasMoreChildren);
+  const ancestors = useSelector(selectors.hasMoreAncestors);
   const showWarning = children === true || ancestors === true;
   const rowProps = useMemo(() => ({ 'data-test-subj': 'resolver:node-list:item' }), []);
   return (

x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx

@@ -8,8 +8,8 @@ import React, { memo, useMemo, useEffect, Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiSpacer, EuiText, EuiDescriptionList, EuiTextColor, EuiTitle } from '@elastic/eui';
 import styled from 'styled-components';
+import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
-
 import {
   CrumbInfo,
   formatDate,
@@ -19,7 +19,6 @@ import {
 } from './panel_content_utilities';
 import * as event from '../../../../common/endpoint/models/event';
 import { ResolverEvent } from '../../../../common/endpoint/types';
-import { useShallowEqualSelector } from '../../../common/hooks/use_selector';
 import * as selectors from '../../store/selectors';
 import { useResolverDispatch } from '../use_resolver_dispatch';
 import { PanelContentError } from './panel_content_error';
@@ -122,7 +121,7 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({
     }
   );
 
-  const relatedsReadyMap = useShallowEqualSelector(selectors.relatedEventsReady);
+  const relatedsReadyMap = useSelector(selectors.relatedEventsReady);
   const relatedsReady = relatedsReadyMap.get(processEntityId!);
   const dispatch = useResolverDispatch();
 
@@ -139,9 +138,9 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({
     }
   }, [relatedsReady, dispatch, processEntityId]);
 
-  const relatedEventsForThisProcess = useShallowEqualSelector(
-    selectors.relatedEventsByEntityId
-  ).get(processEntityId!);
+  const relatedEventsForThisProcess = useSelector(selectors.relatedEventsByEntityId).get(
+    processEntityId!
+  );
 
   const [relatedEventToShowDetailsFor, countBySameCategory, relatedEventCategory] = useMemo(() => {
     if (!relatedEventsForThisProcess) {

x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx

@@ -9,15 +9,14 @@
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import { htmlIdGenerator, EuiButton, EuiI18nNumber, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-
+import { useSelector } from 'react-redux';
 import { NodeSubMenu, subMenuAssets } from './submenu';
 import { applyMatrix3 } from '../models/vector2';
 import { Vector2, Matrix3 } from '../types';
 import { SymbolIds, useResolverTheme, calculateResolverFontSize } from './assets';
 import { ResolverEvent, SafeResolverEvent } from '../../../common/endpoint/types';
 import { useResolverDispatch } from './use_resolver_dispatch';
 import * as eventModel from '../../../common/endpoint/models/event';
-import { useShallowEqualSelector } from '../../common/hooks/use_selector';
 import * as selectors from '../store/selectors';
 import { useResolverQueryParams } from './use_resolver_query_params';
 
@@ -100,9 +99,7 @@ const UnstyledProcessEventDot = React.memo(
      */
     timeAtRender: number;
   }) => {
-    const resolverComponentInstanceID = useShallowEqualSelector(
-      selectors.resolverComponentInstanceID
-    );
+    const resolverComponentInstanceID = useSelector(selectors.resolverComponentInstanceID);
     // This should be unique to each instance of Resolver
     const htmlIDPrefix = `resolver:${resolverComponentInstanceID}`;
 
@@ -114,27 +111,27 @@ const UnstyledProcessEventDot = React.memo(
     const [xScale] = projectionMatrix;
 
     // Node (html id=) IDs
-    const ariaActiveDescendant = useShallowEqualSelector(selectors.ariaActiveDescendant);
-    const selectedNode = useShallowEqualSelector(selectors.selectedNode);
+    const ariaActiveDescendant = useSelector(selectors.ariaActiveDescendant);
+    const selectedNode = useSelector(selectors.selectedNode);
     const nodeID: string | undefined = eventModel.entityIDSafeVersion(event);
     if (nodeID === undefined) {
       // NB: this component should be taking nodeID as a `string` instead of handling this logic here
       throw new Error('Tried to render a node with no ID');
     }
-    const relatedEventStats = useShallowEqualSelector(selectors.relatedEventsStats)(nodeID);
+    const relatedEventStats = useSelector(selectors.relatedEventsStats)(nodeID);
 
     // define a standard way of giving HTML IDs to nodes based on their entity_id/nodeID.
     // this is used to link nodes via aria attributes
     const nodeHTMLID = useCallback((id: string) => htmlIdGenerator(htmlIDPrefix)(`${id}:node`), [
       htmlIDPrefix,
     ]);
 
-    const ariaLevel: number | null = useShallowEqualSelector(selectors.ariaLevel)(nodeID);
+    const ariaLevel: number | null = useSelector(selectors.ariaLevel)(nodeID);
 
     // the node ID to 'flowto'
-    const ariaFlowtoNodeID: string | null = useShallowEqualSelector(selectors.ariaFlowtoNodeID)(
-      timeAtRender
-    )(nodeID);
+    const ariaFlowtoNodeID: string | null = useSelector(selectors.ariaFlowtoNodeID)(timeAtRender)(
+      nodeID
+    );
 
     const isShowingEventActions = xScale > 0.8;
     const isShowingDescriptionText = xScale >= 0.55;
@@ -293,9 +290,9 @@ const UnstyledProcessEventDot = React.memo(
       ? subMenuAssets.initialMenuStatus
       : relatedEventOptions;
 
-    const grandTotal: number | null = useShallowEqualSelector(
-      selectors.relatedEventTotalForProcess
-    )(event as ResolverEvent);
+    const grandTotal: number | null = useSelector(selectors.relatedEventTotalForProcess)(
+      event as ResolverEvent
+    );
 
     /* eslint-disable jsx-a11y/click-events-have-key-events */
     /**