add apm tracking to matrixHistogram (#143950)

x-pack/plugins/security_solution/public/common/containers/matrix_histogram/index.test.ts

@@ -10,8 +10,16 @@ import { useKibana } from '../../lib/kibana';
 import { useMatrixHistogram, useMatrixHistogramCombined } from '.';
 import { MatrixHistogramType } from '../../../../common/search_strategy';
 import { TestProviders } from '../../mock/test_providers';
+import { useTrackHttpRequest } from '../../lib/apm/use_track_http_request';
 
 jest.mock('../../lib/kibana');
+jest.mock('../../lib/apm/use_track_http_request');
+
+const mockEndTracking = jest.fn();
+const mockStartTracking = jest.fn(() => ({ endTracking: mockEndTracking }));
+(useTrackHttpRequest as jest.Mock).mockReturnValue({
+  startTracking: mockStartTracking,
+});
 
 const basicResponse = {
   isPartial: false,
@@ -42,7 +50,7 @@ describe('useMatrixHistogram', () => {
   };
 
   afterEach(() => {
-    (useKibana().services.data.search.search as jest.Mock).mockClear();
+    jest.clearAllMocks();
   });
 
   it('should update request when props has changed', async () => {
@@ -156,6 +164,58 @@ describe('useMatrixHistogram', () => {
     act(() => rerender());
     expect(abortSpy).toHaveBeenCalledTimes(3);
   });
+
+  describe('trackHttpRequest', () => {
+    it('should start tracking when request starts', () => {
+      renderHook(useMatrixHistogram, {
+        initialProps: props,
+        wrapper: TestProviders,
+      });
+
+      expect(mockStartTracking).toHaveBeenCalledWith({
+        name: `securitySolutionUI matrixHistogram ${MatrixHistogramType.events}`,
+      });
+    });
+
+    it('should end tracking success when the request succeeds', () => {
+      (useKibana().services.data.search.search as jest.Mock).mockReturnValueOnce({
+        subscribe: ({ next }: { next: Function }) => next(basicResponse),
+      });
+
+      renderHook(useMatrixHistogram, {
+        initialProps: props,
+        wrapper: TestProviders,
+      });
+
+      expect(mockEndTracking).toHaveBeenCalledWith('success');
+    });
+
+    it('should end tracking error when the partial request is invalid', () => {
+      (useKibana().services.data.search.search as jest.Mock).mockReturnValueOnce({
+        subscribe: ({ next }: { next: Function }) => next(null),
+      });
+
+      renderHook(useMatrixHistogram, {
+        initialProps: props,
+        wrapper: TestProviders,
+      });
+
+      expect(mockEndTracking).toHaveBeenCalledWith('invalid');
+    });
+
+    it('should end tracking error when the request fails', () => {
+      (useKibana().services.data.search.search as jest.Mock).mockReturnValueOnce({
+        subscribe: ({ error }: { error: Function }) => error('some error'),
+      });
+
+      renderHook(useMatrixHistogram, {
+        initialProps: props,
+        wrapper: TestProviders,
+      });
+
+      expect(mockEndTracking).toHaveBeenCalledWith('error');
+    });
+  });
 });
 
 describe('useMatrixHistogramCombined', () => {

x-pack/plugins/security_solution/public/common/containers/matrix_histogram/index.ts

@@ -28,6 +28,8 @@ import { getInspectResponse } from '../../../helpers';
 import type { InspectResponse } from '../../../types';
 import * as i18n from './translations';
 import { useAppToasts } from '../../hooks/use_app_toasts';
+import { useTrackHttpRequest } from '../../lib/apm/use_track_http_request';
+import { APP_UI_ID } from '../../../../common/constants';
 
 export type Buckets = Array<{
   key: string;
@@ -71,6 +73,7 @@ export const useMatrixHistogram = ({
   const abortCtrl = useRef(new AbortController());
   const searchSubscription$ = useRef(new Subscription());
   const [loading, setLoading] = useState(false);
+  const { startTracking } = useTrackHttpRequest();
 
   const [matrixHistogramRequest, setMatrixHistogramRequest] =
     useState<MatrixHistogramRequestOptions>({
@@ -102,11 +105,14 @@ export const useMatrixHistogram = ({
     buckets: [],
   });
 
-  const hostsSearch = useCallback(
+  const search = useCallback(
     (request: MatrixHistogramRequestOptions) => {
       const asyncSearch = async () => {
         abortCtrl.current = new AbortController();
         setLoading(true);
+        const { endTracking } = startTracking({
+          name: `${APP_UI_ID} matrixHistogram ${histogramType}`,
+        });
 
         searchSubscription$.current = data.search
           .search<MatrixHistogramRequestOptions, MatrixHistogramStrategyResponse>(request, {
@@ -130,10 +136,12 @@ export const useMatrixHistogram = ({
                   totalCount: histogramBuckets.reduce((acc, bucket) => bucket.doc_count + acc, 0),
                   buckets: histogramBuckets,
                 }));
+                endTracking('success');
                 searchSubscription$.current.unsubscribe();
               } else if (isErrorResponse(response)) {
                 setLoading(false);
                 addWarning(i18n.ERROR_MATRIX_HISTOGRAM);
+                endTracking('invalid');
                 searchSubscription$.current.unsubscribe();
               }
             },
@@ -142,6 +150,7 @@ export const useMatrixHistogram = ({
               addError(msg, {
                 title: errorMessage ?? i18n.FAIL_MATRIX_HISTOGRAM,
               });
+              endTracking('error');
               searchSubscription$.current.unsubscribe();
             },
           });
@@ -151,7 +160,7 @@ export const useMatrixHistogram = ({
       asyncSearch();
       refetch.current = asyncSearch;
     },
-    [data.search, errorMessage, addError, addWarning, histogramType]
+    [data.search, histogramType, addWarning, addError, errorMessage, startTracking]
   );
 
   useEffect(() => {
@@ -189,13 +198,13 @@ export const useMatrixHistogram = ({
   useEffect(() => {
     // We want to search if it is not skipped, stackByField ends with ip and include missing data
     if (!skip) {
-      hostsSearch(matrixHistogramRequest);
+      search(matrixHistogramRequest);
     }
     return () => {
       searchSubscription$.current.unsubscribe();
       abortCtrl.current.abort();
     };
-  }, [matrixHistogramRequest, hostsSearch, skip]);
+  }, [matrixHistogramRequest, search, skip]);
 
   useEffect(() => {
     if (skip) {
@@ -207,7 +216,7 @@ export const useMatrixHistogram = ({
 
   const runMatrixHistogramSearch = useCallback(
     (to: string, from: string) => {
-      hostsSearch({
+      search({
         ...matrixHistogramRequest,
         timerange: {
           interval: '12h',
@@ -216,7 +225,7 @@ export const useMatrixHistogram = ({
         },
       });
     },
-    [matrixHistogramRequest, hostsSearch]
+    [matrixHistogramRequest, search]
   );
 
   return [loading, matrixHistogramResponse, runMatrixHistogramSearch];