[Synthetics] De-dupe overview status request on load (#161627)

elastic · Jul 11, 2023 · 70ed200 · 70ed200
1 parent 787491e
commit 70ed200
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/x-pack/plugins/synthetics/e2e/synthetics/journeys/overview_scrolling.journey.ts b/x-pack/plugins/synthetics/e2e/synthetics/journeys/overview_scrolling.journey.ts
@@ -21,7 +21,15 @@ journey('OverviewScrolling', async ({ page, params }) => {
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
   const retry: RetryService = params.getService('retry');
 
+  const listOfRequests: string[] = [];
+
   before(async () => {
+    page.on('request', (request) => {
+      const url = request.url();
+      if (url.includes('/synthetics/') || url.includes('/uptime/')) {
+        listOfRequests.push(request.url());
+      }
+    });
     await enableMonitorManagedViaApi(params.kibanaUrl);
     await cleanTestMonitors(params);
 
@@ -48,6 +56,20 @@ journey('OverviewScrolling', async ({ page, params }) => {
     expect(await invalid.isVisible()).toBeFalsy();
   });
 
+  step('validates de-duplicate requests', async () => {
+    await page.waitForSelector(`text="test monitor 0"`);
+
+    const assertUnique = (value: string) => {
+      expect(listOfRequests.filter((req) => req.includes(value)).length).toBe(1);
+    };
+    assertUnique('/overview_status');
+    assertUnique('/overview?');
+    assertUnique('/service/monitors');
+    assertUnique('/monitor/filters');
+
+    expect(listOfRequests.length).toBe(16);
+  });
+
   step('scroll until you see showing all monitors', async () => {
     const gridItems = await page.locator(`[data-test-subj="syntheticsOverviewGridItem"]`);
     await page.waitForSelector(`text="test monitor 0"`);

diff --git a/...s/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_overview_status.ts b/...s/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_overview_status.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useEffect, useCallback } from 'react';
+import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useSyntheticsRefreshContext } from '../../../contexts/synthetics_refresh_context';
 import { selectOverviewPageState } from '../../../state';
@@ -23,21 +23,19 @@ export function useOverviewStatus({ scopeStatusByLocation }: { scopeStatusByLoca
   const { lastRefresh } = useSyntheticsRefreshContext();
 
   const dispatch = useDispatch();
-  const reload = useCallback(() => {
-    dispatch(fetchOverviewStatusAction.get({ pageState, scopeStatusByLocation }));
-  }, [dispatch, pageState, scopeStatusByLocation]);
 
   useEffect(() => {
     if (loaded) {
       dispatch(quietFetchOverviewStatusAction.get({ pageState, scopeStatusByLocation }));
     } else {
-      reload();
+      dispatch(fetchOverviewStatusAction.get({ pageState, scopeStatusByLocation }));
     }
-  }, [dispatch, reload, lastRefresh, pageState, loaded, scopeStatusByLocation]);
+    // loaded is omitted from the dependency array because it is not used in the callback
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dispatch, lastRefresh, pageState, scopeStatusByLocation]);
 
   return {
     status,
     error,
-    reload,
   };
 }