Refactoring overview network to use useSearchStrategy

x-pack/plugins/security_solution/public/overview/containers/overview_network/index.test.tsx

@@ -4,25 +4,67 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
 import { act, renderHook } from '@testing-library/react-hooks';
 import { TestProviders } from '../../../common/mock';
 import { useNetworkOverview } from '.';
+import { useSearchStrategy } from '../../../common/containers/use_search_strategy';
+
+jest.mock('../../../common/containers/use_search_strategy', () => ({
+  useSearchStrategy: jest.fn(),
+}));
+const mockUseSearchStrategy = useSearchStrategy as jest.Mock;
+const mockSearch = jest.fn();
+
+const defaultProps = {
+  endDate: '2020-07-08T08:20:18.966Z',
+  indexNames: ['fakebeat-*'],
+  skip: false,
+  startDate: '2020-07-07T08:20:18.966Z',
+};
 
 describe('useNetworkOverview', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseSearchStrategy.mockReturnValue({
+      loading: false,
+      result: {
+        overviewNetwork: {},
+      },
+      search: mockSearch,
+      refetch: jest.fn(),
+      inspect: {},
+    });
+  });
+
+  it('runs search', () => {
+    renderHook(() => useNetworkOverview(defaultProps), {
+      wrapper: TestProviders,
+    });
+
+    expect(mockSearch).toHaveBeenCalled();
+  });
+
+  it('does not run search when skip = true', () => {
+    const props = {
+      ...defaultProps,
+      skip: true,
+    };
+    renderHook(() => useNetworkOverview(props), {
+      wrapper: TestProviders,
+    });
+
+    expect(mockSearch).not.toHaveBeenCalled();
+  });
   it('skip = true will cancel any running request', () => {
-    const abortSpy = jest.spyOn(AbortController.prototype, 'abort');
-    const localProps = {
-      startDate: '2020-07-07T08:20:18.966Z',
-      endDate: '2020-07-08T08:20:18.966Z',
-      indexNames: ['cool'],
-      skip: false,
+    const props = {
+      ...defaultProps,
     };
-    const { rerender } = renderHook(() => useNetworkOverview(localProps), {
+    const { rerender } = renderHook(() => useNetworkOverview(props), {
       wrapper: TestProviders,
     });
-    localProps.skip = true;
+    props.skip = true;
     act(() => rerender());
-    expect(abortSpy).toHaveBeenCalledTimes(4);
+    expect(mockUseSearchStrategy).toHaveBeenCalledTimes(2);
+    expect(mockUseSearchStrategy.mock.calls[1][0].abort).toEqual(true);
   });
 });

x-pack/plugins/security_solution/public/overview/containers/overview_network/index.tsx

@@ -5,25 +5,16 @@
  * 2.0.
  */
 
-import { noop } from 'lodash/fp';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import deepEqual from 'fast-deep-equal';
-import { Subscription } from 'rxjs';
+import { useEffect, useMemo } from 'react';
 
-import { isCompleteResponse, isErrorResponse } from '@kbn/data-plugin/common';
-import type {
-  NetworkOverviewRequestOptions,
-  NetworkOverviewStrategyResponse,
-} from '../../../../common/search_strategy/security_solution';
+import type { NetworkOverviewStrategyResponse } from '../../../../common/search_strategy/security_solution';
 import { NetworkQueries } from '../../../../common/search_strategy/security_solution';
-import { useKibana } from '../../../common/lib/kibana';
 import type { inputsModel } from '../../../common/store/inputs';
 import { createFilter } from '../../../common/containers/helpers';
 import type { ESQuery } from '../../../../common/typed_json';
-import { getInspectResponse } from '../../../helpers';
 import type { InspectResponse } from '../../../types';
 import * as i18n from './translations';
-import { useAppToasts } from '../../../common/hooks/use_app_toasts';
+import { useSearchStrategy } from '../../../common/containers/use_search_strategy';
 
 export const ID = 'overviewNetworkQuery';
 
@@ -50,109 +41,53 @@ export const useNetworkOverview = ({
   skip = false,
   startDate,
 }: UseNetworkOverview): [boolean, NetworkOverviewArgs] => {
-  const { data } = useKibana().services;
-  const refetch = useRef<inputsModel.Refetch>(noop);
-  const abortCtrl = useRef(new AbortController());
-  const searchSubscription$ = useRef(new Subscription());
-  const [loading, setLoading] = useState(false);
-  const [overviewNetworkRequest, setNetworkRequest] =
-    useState<NetworkOverviewRequestOptions | null>(null);
-
-  const [overviewNetworkResponse, setNetworkOverviewResponse] = useState<NetworkOverviewArgs>({
-    overviewNetwork: {},
-    id: ID,
-    inspect: {
-      dsl: [],
-      response: [],
+  const {
+    loading,
+    result: response,
+    search,
+    refetch,
+    inspect,
+  } = useSearchStrategy<NetworkQueries.overview>({
+    factoryQueryType: NetworkQueries.overview,
+    initialResult: {
+      overviewNetwork: {},
     },
-    isInspected: false,
-    refetch: refetch.current,
+    errorMessage: i18n.FAIL_NETWORK_OVERVIEW,
+    abort: skip,
   });
-  const { addError, addWarning } = useAppToasts();
-
-  const overviewNetworkSearch = useCallback(
-    (request: NetworkOverviewRequestOptions | null) => {
-      if (request == null || skip) {
-        return;
-      }
 
-      const asyncSearch = async () => {
-        abortCtrl.current = new AbortController();
-        setLoading(true);
-
-        searchSubscription$.current = data.search
-          .search<NetworkOverviewRequestOptions, NetworkOverviewStrategyResponse>(request, {
-            strategy: 'securitySolutionSearchStrategy',
-            abortSignal: abortCtrl.current.signal,
-          })
-          .subscribe({
-            next: (response) => {
-              if (isCompleteResponse(response)) {
-                setLoading(false);
-                setNetworkOverviewResponse((prevResponse) => ({
-                  ...prevResponse,
-                  overviewNetwork: response.overviewNetwork,
-                  inspect: getInspectResponse(response, prevResponse.inspect),
-                  refetch: refetch.current,
-                }));
-                searchSubscription$.current.unsubscribe();
-              } else if (isErrorResponse(response)) {
-                setLoading(false);
-                addWarning(i18n.ERROR_NETWORK_OVERVIEW);
-                searchSubscription$.current.unsubscribe();
-              }
-            },
-            error: (msg) => {
-              setLoading(false);
-              addError(msg, {
-                title: i18n.FAIL_NETWORK_OVERVIEW,
-              });
-              searchSubscription$.current.unsubscribe();
-            },
-          });
-      };
-      searchSubscription$.current.unsubscribe();
-      abortCtrl.current.abort();
-      asyncSearch();
-      refetch.current = asyncSearch;
-    },
-    [data.search, addError, addWarning, skip]
+  const overviewNetworkResponse = useMemo(
+    () => ({
+      endDate,
+      overviewNetwork: response.overviewNetwork,
+      id: ID,
+      inspect,
+      isInspected: false,
+      refetch,
+      startDate,
+    }),
+    [endDate, inspect, refetch, response.overviewNetwork, startDate]
   );
 
-  useEffect(() => {
-    setNetworkRequest((prevRequest) => {
-      const myRequest = {
-        ...(prevRequest ?? {}),
-        defaultIndex: indexNames,
-        factoryQueryType: NetworkQueries.overview,
-        filterQuery: createFilter(filterQuery),
-        timerange: {
-          interval: '12h',
-          from: startDate,
-          to: endDate,
-        },
-      };
-      if (!deepEqual(prevRequest, myRequest)) {
-        return myRequest;
-      }
-      return prevRequest;
-    });
-  }, [indexNames, endDate, filterQuery, startDate]);
-
-  useEffect(() => {
-    overviewNetworkSearch(overviewNetworkRequest);
-    return () => {
-      searchSubscription$.current.unsubscribe();
-      abortCtrl.current.abort();
-    };
-  }, [overviewNetworkRequest, overviewNetworkSearch]);
+  const overviewNetworkRequest = useMemo(
+    () => ({
+      defaultIndex: indexNames,
+      factoryQueryType: NetworkQueries.overview,
+      filterQuery: createFilter(filterQuery),
+      timerange: {
+        interval: '12h',
+        from: startDate,
+        to: endDate,
+      },
+    }),
+    [endDate, filterQuery, indexNames, startDate]
+  );
 
   useEffect(() => {
-    if (skip) {
-      searchSubscription$.current.unsubscribe();
-      abortCtrl.current.abort();
+    if (!skip) {
+      search(overviewNetworkRequest);
     }
-  }, [skip]);
+  }, [overviewNetworkRequest, search, skip]);
 
   return [loading, overviewNetworkResponse];
 };