handle large number of monitors

elastic · Oct 28, 2024 · f3c8b1c · f3c8b1c
1 parent 7abfd68
commit f3c8b1c
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 99 deletions.
diff --git a/.../synthetics/public/apps/synthetics/components/monitors_page/hooks/use_errors_histogram.ts b/.../synthetics/public/apps/synthetics/components/monitors_page/hooks/use_errors_histogram.ts
@@ -7,7 +7,10 @@
 
 import { useSelector } from 'react-redux';
 import { useMemo } from 'react';
-import { useEsSearch } from '@kbn/observability-shared-plugin/public';
+import { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
+import { useKibanaSpace } from '../../../../../hooks/use_kibana_space';
+import { useReduxEsSearch } from '../../../hooks/use_redux_es_search';
+import { useGetUrlParams } from '../../../hooks';
 import { selectEncryptedSyntheticsSavedMonitors } from '../../../state';
 import {
   EXCLUDE_RUN_ONCE_FILTER,
@@ -16,37 +19,76 @@ import {
 import { useSyntheticsRefreshContext } from '../../../contexts/synthetics_refresh_context';
 import { SYNTHETICS_INDEX_PATTERN } from '../../../../../../common/constants';
 
-export const getErrorFilters = () => [
-  {
-    exists: {
-      field: 'summary',
+export const useErrorFilters = (spaceId?: string) => {
+  const { locations, monitorTypes, tags, query, projects } = useGetUrlParams();
+
+  const filters: QueryDslQueryContainer[] = [
+    {
+      exists: {
+        field: 'summary',
+      },
     },
-  },
-  {
-    exists: {
-      field: 'error',
+    {
+      term: {
+        'meta.space_id': spaceId,
+      },
     },
-  },
-  EXCLUDE_RUN_ONCE_FILTER,
-  getRangeFilter({
-    from: 'now-24h',
-    to: 'now',
-  }),
-];
+    {
+      exists: {
+        field: 'error',
+      },
+    },
+    EXCLUDE_RUN_ONCE_FILTER,
+    getRangeFilter({
+      from: 'now-6h',
+      to: 'now',
+    }),
+
+    ...(projects && projects.length > 0 ? [{ terms: { 'monitor.project.id': projects } }] : []),
+    ...(monitorTypes && monitorTypes.length > 0
+      ? [{ terms: { 'monitor.type': monitorTypes } }]
+      : []),
+    ...(tags && tags.length > 0 ? [{ terms: { tags } }] : []),
+    ...(locations && locations.length > 0 ? [{ terms: { 'observer.geo.name': locations } }] : []),
+    ...(query
+      ? [
+          {
+            query_string: {
+              query: `${query}*`,
+              fields: [
+                'monitor.name',
+                'tags',
+                'observer.geo.name',
+                'observer.name',
+                'urls',
+                'hosts',
+                'monitor.project.id',
+              ],
+            },
+          },
+        ]
+      : []),
+  ];
+
+  return filters;
+};
 
 export function useErrorsHistogram() {
   const syntheticsMonitors = useSelector(selectEncryptedSyntheticsSavedMonitors);
 
   const { lastRefresh } = useSyntheticsRefreshContext();
+  const { space } = useKibanaSpace();
+
+  const filters = useErrorFilters(space?.id);
 
-  const { data } = useEsSearch(
+  const { data, loading } = useReduxEsSearch(
     {
       index: SYNTHETICS_INDEX_PATTERN,
       body: {
         size: 0,
         query: {
           bool: {
-            filter: getErrorFilters(),
+            filter: filters,
           },
         },
         sort: {
@@ -59,29 +101,48 @@ export function useErrorsHistogram() {
             date_histogram: {
               field: '@timestamp',
               min_doc_count: 0,
-              fixed_interval: '1h',
+              fixed_interval: '30m',
               extended_bounds: {
                 min: 'now-24h',
                 max: 'now',
               },
             },
+            aggs: {
+              errors: {
+                cardinality: {
+                  field: 'state.id',
+                },
+              },
+            },
+          },
+          totalErrors: {
+            cardinality: {
+              field: 'state.id',
+            },
           },
         },
       },
     },
-    [syntheticsMonitors, lastRefresh],
-    { name: 'getMonitorErrors' }
+    [syntheticsMonitors, lastRefresh, JSON.stringify(filters)],
+    { name: 'getMonitorErrors', isRequestReady: !!space?.id }
   );
 
   return useMemo(() => {
     const histogram =
-      data?.aggregations?.errorsHistogram.buckets.map((bucket) => ({
-        x: bucket.key,
-        y: bucket.doc_count,
-      })) ?? [];
+      data?.aggregations?.errorsHistogram.buckets.map((bucket) => {
+        const count = bucket.errors.value;
+        return {
+          x: bucket.key,
+          y: count,
+        };
+      }) ?? [];
 
-    const totalErrors = histogram.reduce((acc, { y }) => acc + y, 0);
+    const totalErrors = data?.aggregations?.totalErrors.value ?? 0;
 
-    return { histogram, totalErrors };
-  }, [data]);
+    return { histogram, totalErrors, loading };
+  }, [
+    data?.aggregations?.errorsHistogram?.buckets,
+    data?.aggregations?.totalErrors?.value,
+    loading,
+  ]);
 }
diff --git a/...synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx b/...synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx
@@ -12,29 +12,16 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiTitle,
+  EuiStat,
 } from '@elastic/eui';
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { i18n } from '@kbn/i18n';
+import { ERRORS_LABEL } from '../../../../monitor_details/monitor_summary/monitor_errors_count';
 import { useErrorsHistogram } from '../../../hooks/use_errors_histogram';
-import { useMonitorQueryIds } from '../overview_alerts';
-import { selectOverviewStatus } from '../../../../../state/overview_status';
 import { OverviewErrorsSparklines } from './overview_errors_sparklines';
-import { useRefreshedRange, useGetUrlParams } from '../../../../../hooks';
-import { OverviewErrorsCount } from './overview_errors_count';
 
 export function OverviewErrors() {
-  const { status } = useSelector(selectOverviewStatus);
-
-  const loading = !status?.allIds || status?.allIds.length === 0;
-
-  const { from, to } = useRefreshedRange(6, 'hours');
-
-  const { locations } = useGetUrlParams();
-
-  const monitorIds = useMonitorQueryIds();
-
-  const { histogram, totalErrors } = useErrorsHistogram();
+  const { histogram, totalErrors, loading } = useErrorsHistogram();
 
   return (
     <EuiPanel hasShadow={false} hasBorder>
@@ -47,22 +34,16 @@ export function OverviewErrors() {
       ) : (
         <EuiFlexGroup gutterSize="xl">
           <EuiFlexItem grow={false}>
-            <OverviewErrorsCount
-              from={from}
-              to={to}
-              monitorIds={monitorIds}
-              locations={locations}
-              totalErrors={totalErrors}
+            <EuiStat
+              description={ERRORS_LABEL}
+              title={totalErrors}
+              titleColor="danger"
+              reverse
+              titleSize="m"
             />
           </EuiFlexItem>
           <EuiFlexItem grow={true}>
-            <OverviewErrorsSparklines
-              histogram={histogram}
-              from={from}
-              to={to}
-              monitorIds={monitorIds}
-              locations={locations}
-            />
+            <OverviewErrorsSparklines histogram={histogram} />
           </EuiFlexItem>
         </EuiFlexGroup>
       )}

diff --git a/...tics/components/monitors_page/overview/overview/overview_errors/overview_errors_count.tsx b/...tics/components/monitors_page/overview/overview/overview_errors/overview_errors_count.tsx
diff --git a/...components/monitors_page/overview/overview/overview_errors/overview_errors_sparklines.tsx b/...components/monitors_page/overview/overview/overview_errors/overview_errors_sparklines.tsx
@@ -6,28 +6,21 @@
  */
 
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useEuiTheme, formatDate } from '@elastic/eui';
-import { Axis, BarSeries, Chart, ScaleType, Settings, Position } from '@elastic/charts';
+import { Axis, Chart, ScaleType, Settings, Position, AreaSeries } from '@elastic/charts';
 import { ClientPluginsStart } from '../../../../../../../plugin';
 import { ERRORS_LABEL } from '../../../../monitor_details/monitor_summary/monitor_errors_count';
 
 interface Props {
-  from: string;
-  to: string;
-  monitorIds: string[];
-  locations?: string[];
   histogram: Array<{ x: number; y: number }>;
 }
-export const OverviewErrorsSparklines = ({ from, to, monitorIds, locations, histogram }: Props) => {
+export const OverviewErrorsSparklines = ({ histogram }: Props) => {
   const { charts } = useKibana<ClientPluginsStart>().services;
 
   const baseTheme = charts.theme.useChartsBaseTheme();
-
   const { euiTheme } = useEuiTheme();
 
-  const time = useMemo(() => ({ from, to }), [from, to]);
-
   return (
     <>
       <Chart
@@ -55,7 +48,7 @@ export const OverviewErrorsSparklines = ({ from, to, monitorIds, locations, hist
             },
           }}
         />
-        <BarSeries
+        <AreaSeries
           id="errorsSparklines"
           name={ERRORS_LABEL}
           xScaleType={ScaleType.Linear}