[Synthetics] [ON Week] Refactor Synthetics Overview page for increase…

…d scalability (elastic#187092) ## Summary Resolves elastic#183622. This is part of some ON Week PoC work I did that introduces [React Window](https://github.com/bvaughn/react-window) and its [Infinite Loader](https://github.com/bvaughn/react-window-infinite-loader) to the Synthetics Overview page. Additionally, I have refactored the way that duration fetching is done for the overview cards; the fetching is now handled at a top-level and as-needed during the infinite scroll. This results in a page that is scrollable all the way to the end of very large amounts of monitors. The example deployment I'm using has about 900 monitors, and in the latest versions of Kibana this dataset causes the overview page to crash the tab. --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Shahzad <[email protected]>
nreese · Sep 4, 2024 · fd704de · fd704de
1 parent 7cb2a59
commit fd704de
Show file tree

Hide file tree

Showing 32 changed files with 738 additions and 900 deletions.
diff --git a/package.json b/package.json
@@ -1201,11 +1201,13 @@
     "react-use": "^15.3.8",
     "react-virtualized": "^9.22.5",
     "react-window": "^1.8.10",
+    "react-window-infinite-loader": "^1.0.9",
     "reduce-reducers": "^1.0.4",
     "redux": "^4.2.1",
     "redux-actions": "^2.6.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-saga": "^1.1.3",
+    "redux-saga-testing": "^2.0.2",
     "redux-thunk": "^2.4.2",
     "redux-thunks": "^1.0.0",
     "reflect-metadata": "^0.2.1",
@@ -1597,6 +1599,7 @@
     "@types/react-test-renderer": "^17.0.2",
     "@types/react-virtualized": "^9.21.22",
     "@types/react-window": "^1.8.8",
+    "@types/react-window-infinite-loader": "^1.0.9",
     "@types/redux-actions": "^2.6.1",
     "@types/resolve": "^1.20.1",
     "@types/seedrandom": ">=2.0.0 <4.0.0",

diff --git a/x-pack/plugins/observability_solution/synthetics/common/constants/synthetics/rest_api.ts b/x-pack/plugins/observability_solution/synthetics/common/constants/synthetics/rest_api.ts
@@ -26,6 +26,7 @@ export enum SYNTHETICS_API_URLS {
   SYNTHETICS_OVERVIEW = '/internal/synthetics/overview',
   PINGS = '/internal/synthetics/pings',
   PING_STATUSES = '/internal/synthetics/ping_statuses',
+  OVERVIEW_TRENDS = '/internal/synthetics/overview_trends',
   OVERVIEW_STATUS = `/internal/synthetics/overview_status`,
   INDEX_SIZE = `/internal/synthetics/index_size`,
   AGENT_POLICIES = `/internal/synthetics/agent_policies`,

diff --git a/...bservability_solution/synthetics/common/runtime_types/monitor_management/monitor_types.ts b/...bservability_solution/synthetics/common/runtime_types/monitor_management/monitor_types.ts
@@ -395,6 +395,7 @@ export const MonitorOverviewItemCodec = t.intersection([
     schedule: t.string,
   }),
   t.partial({
+    status: t.string,
     projectId: t.string,
   }),
 ]);

diff --git a/x-pack/plugins/observability_solution/synthetics/common/types/index.ts b/x-pack/plugins/observability_solution/synthetics/common/types/index.ts
@@ -8,3 +8,4 @@
 export * from './synthetics_monitor';
 export * from './monitor_validation';
 export * from './default_alerts';
+export * from './overview';
diff --git a/x-pack/plugins/observability_solution/synthetics/common/types/overview.ts b/x-pack/plugins/observability_solution/synthetics/common/types/overview.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export interface TrendKey {
+  configId: string;
+  locationId: string;
+}
+
+export type TrendRequest = TrendKey & { schedule: string };
+
+export interface TrendDatum {
+  x: number;
+  y: number;
+}
+
+export interface OverviewTrend {
+  configId: string;
+  locationId: string;
+  data: TrendDatum[];
+  count: number;
+  min: number;
+  max: number;
+  avg: number;
+  sum: number;
+  median: number;
+}
+
+export type TrendTable = Record<string, OverviewTrend | null>;
diff --git a/...s/synthetics/components/monitors_page/overview/overview/grid_by_group/grid_group_item.tsx b/...s/synthetics/components/monitors_page/overview/overview/grid_by_group/grid_group_item.tsx
@@ -23,8 +23,9 @@ import { useKey } from 'react-use';
 import { OverviewLoader } from '../overview_loader';
 import { useFilteredGroupMonitors } from './use_filtered_group_monitors';
 import { MonitorOverviewItem } from '../../types';
-import { FlyoutParamProps, OverviewGridItem } from '../overview_grid_item';
 import { selectOverviewStatus } from '../../../../../state/overview_status';
+import { MetricItem } from '../metric_item';
+import { FlyoutParamProps } from '../types';
 
 const PER_ROW = 4;
 const DEFAULT_ROW_SIZE = 2;
@@ -163,7 +164,7 @@ export const GroupGridItem = ({
               key={`${monitor.id}-${monitor.location?.id}`}
               data-test-subj="syntheticsOverviewGridItem"
             >
-              <OverviewGridItem monitor={monitor} onClick={setFlyoutConfigCallback} />
+              <MetricItem monitor={monitor} onClick={setFlyoutConfigCallback} />
             </EuiFlexItem>
           ))}
         </EuiFlexGrid>

diff --git a/...nthetics/components/monitors_page/overview/overview/grid_by_group/grid_items_by_group.tsx b/...nthetics/components/monitors_page/overview/overview/grid_by_group/grid_items_by_group.tsx
@@ -18,8 +18,8 @@ import {
 import { useFilters } from '../../../common/monitor_filters/use_filters';
 import { GroupGridItem } from './grid_group_item';
 import { ConfigKey, MonitorOverviewItem } from '../../../../../../../../common/runtime_types';
-import { FlyoutParamProps } from '../overview_grid_item';
 import { selectOverviewState, selectServiceLocationsState } from '../../../../../state';
+import { FlyoutParamProps } from '../types';
 
 export const GridItemsByGroup = ({
   loaded,

diff --git a/...thetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx b/...thetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
@@ -6,16 +6,21 @@
  */
 import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { Chart, Settings, Metric, MetricTrendShape } from '@elastic/charts';
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, EuiSpacer } from '@elastic/eui';
 import { DARK_THEME } from '@elastic/charts';
 import { useTheme } from '@kbn/observability-shared-plugin/public';
-import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
+import { useSelector, useDispatch } from 'react-redux';
+
 import { MetricItemBody } from './metric_item/metric_item_body';
-import { MetricItemExtra } from './metric_item/metric_item_extra';
-import { selectErrorPopoverState, toggleErrorPopoverOpen } from '../../../../state';
+import {
+  selectErrorPopoverState,
+  selectOverviewTrends,
+  toggleErrorPopoverOpen,
+} from '../../../../state';
 import { useLocationName, useStatusByLocationOverview } from '../../../../hooks';
 import { formatDuration } from '../../../../utils/formatting';
 import { MonitorOverviewItem } from '../../../../../../../common/runtime_types';
@@ -26,6 +31,9 @@ import {
   toggleTestNowFlyoutAction,
 } from '../../../../state/manual_test_runs';
 import { MetricItemIcon } from './metric_item_icon';
+import { MetricItemExtra } from './metric_item/metric_item_extra';
+
+const METRIC_ITEM_HEIGHT = 160;
 
 export const getColor = (
   theme: ReturnType<typeof useTheme>,
@@ -49,20 +57,14 @@ export const getColor = (
 
 export const MetricItem = ({
   monitor,
-  stats,
-  data,
   onClick,
+  style,
 }: {
   monitor: MonitorOverviewItem;
-  data: Array<{ x: number; y: number }>;
-  stats: {
-    medianDuration: number;
-    avgDuration: number;
-    minDuration: number;
-    maxDuration: number;
-  };
+  style?: React.CSSProperties;
   onClick: (params: { id: string; configId: string; location: string; locationId: string }) => void;
 }) => {
+  const trendData = useSelector(selectOverviewTrends)[monitor.configId + monitor.location.id];
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const isErrorPopoverOpen = useSelector(selectErrorPopoverState);
   const locationName = useLocationName(monitor);
@@ -77,7 +79,10 @@ export const MetricItem = ({
   const dispatch = useDispatch();
 
   return (
-    <div data-test-subj={`${monitor.name}-metric-item`} style={{ height: '160px' }}>
+    <div
+      data-test-subj={`${monitor.name}-${monitor.location.id}-metric-item`}
+      style={style ?? { height: METRIC_ITEM_HEIGHT }}
+    >
       <EuiPanel
         data-test-subj={`${monitor.name}-metric-item-${locationName}-${status}`}
         paddingSize="none"
@@ -136,10 +141,26 @@ export const MetricItem = ({
                 {
                   title: monitor.name,
                   subtitle: locationName,
-                  value: stats.medianDuration,
+                  value: trendData?.median ?? 0,
                   trendShape: MetricTrendShape.Area,
-                  trend: data,
-                  extra: <MetricItemExtra stats={stats} />,
+                  trend: trendData?.data ?? [],
+                  extra: trendData ? (
+                    <MetricItemExtra
+                      stats={{
+                        medianDuration: trendData.median,
+                        minDuration: trendData.min,
+                        maxDuration: trendData.max,
+                        avgDuration: trendData.avg,
+                      }}
+                    />
+                  ) : (
+                    <div>
+                      <FormattedMessage
+                        defaultMessage="Loading metrics"
+                        id="xpack.synthetics.overview.metricItem.loadingMessage"
+                      />
+                    </div>
+                  ),
                   valueFormatter: (d: number) => formatDuration(d),
                   color: getColor(theme, monitor.isEnabled, status),
                   body: <MetricItemBody monitor={monitor} />,
@@ -167,6 +188,7 @@ export const MetricItem = ({
           />
         )}
       </EuiPanel>
+      <EuiSpacer size="s" />
     </div>
   );
 };