[Synthetics] Handle overview errors for large number of monitors !!

x-pack/plugins/observability_solution/synthetics/kibana.jsonc

@@ -19,6 +19,7 @@
       "actions",
       "alerting",
       "cases",
+      "charts",
       "data",
       "fleet",
       "embeddable",
@@ -67,4 +68,4 @@
       "unifiedDocViewer"
     ]
   }
-}
+}

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_errors_histogram.ts

@@ -0,0 +1,148 @@
+/*
+ * 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.
+ */
+
+import { useSelector } from 'react-redux';
+import { useMemo } from 'react';
+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,
+  getRangeFilter,
+} from '../../../../../../common/constants/client_defaults';
+import { useSyntheticsRefreshContext } from '../../../contexts/synthetics_refresh_context';
+import { SYNTHETICS_INDEX_PATTERN } from '../../../../../../common/constants';
+
+export const useErrorFilters = (spaceId?: string) => {
+  const { locations, monitorTypes, tags, query, projects } = useGetUrlParams();
+
+  const filters: QueryDslQueryContainer[] = [
+    {
+      exists: {
+        field: 'summary',
+      },
+    },
+    {
+      term: {
+        'meta.space_id': spaceId,
+      },
+    },
+    {
+      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, loading } = useReduxEsSearch(
+    {
+      index: SYNTHETICS_INDEX_PATTERN,
+      body: {
+        size: 0,
+        query: {
+          bool: {
+            filter: filters,
+          },
+        },
+        sort: {
+          '@timestamp': {
+            order: 'desc',
+          },
+        },
+        aggs: {
+          errorsHistogram: {
+            date_histogram: {
+              field: '@timestamp',
+              min_doc_count: 0,
+              fixed_interval: '30m',
+              extended_bounds: {
+                min: 'now-24h',
+                max: 'now',
+              },
+            },
+            aggs: {
+              errors: {
+                cardinality: {
+                  field: 'state.id',
+                },
+              },
+            },
+          },
+          totalErrors: {
+            cardinality: {
+              field: 'state.id',
+            },
+          },
+        },
+      },
+    },
+    [syntheticsMonitors, lastRefresh, JSON.stringify(filters)],
+    { name: 'getMonitorErrors', isRequestReady: !!space?.id }
+  );
+
+  return useMemo(() => {
+    const histogram =
+      data?.aggregations?.errorsHistogram.buckets.map((bucket) => {
+        const count = bucket.errors.value;
+        return {
+          x: bucket.key,
+          y: count,
+        };
+      }) ?? [];
+
+    const totalErrors = data?.aggregations?.totalErrors.value ?? 0;
+
+    return { histogram, totalErrors, loading };
+  }, [
+    data?.aggregations?.errorsHistogram?.buckets,
+    data?.aggregations?.totalErrors?.value,
+    loading,
+  ]);
+}

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx

@@ -12,26 +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 { useMonitorQueryIds } from '../overview_alerts';
-import { selectOverviewStatus } from '../../../../../state/overview_status';
+import { ERRORS_LABEL } from '../../../../monitor_details/monitor_summary/monitor_errors_count';
+import { useErrorsHistogram } from '../../../hooks/use_errors_histogram';
 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, loading } = useErrorsHistogram();
 
   return (
     <EuiPanel hasShadow={false} hasBorder>
@@ -44,20 +34,16 @@ export function OverviewErrors() {
       ) : (
         <EuiFlexGroup gutterSize="xl">
           <EuiFlexItem grow={false}>
-            <OverviewErrorsCount
-              from={from}
-              to={to}
-              monitorIds={monitorIds}
-              locations={locations}
+            <EuiStat
+              description={ERRORS_LABEL}
+              title={totalErrors}
+              titleColor="danger"
+              reverse
+              titleSize="m"
             />
           </EuiFlexItem>
           <EuiFlexItem grow={true}>
-            <OverviewErrorsSparklines
-              from={from}
-              to={to}
-              monitorIds={monitorIds}
-              locations={locations}
-            />
+            <OverviewErrorsSparklines histogram={histogram} />
           </EuiFlexItem>
         </EuiFlexGroup>
       )}

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors_sparklines.tsx

@@ -6,48 +6,59 @@
  */
 
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import React, { useMemo } from 'react';
-import { useEuiTheme } from '@elastic/eui';
+import React from 'react';
+import { useEuiTheme, formatDate } from '@elastic/eui';
+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 }: Props) => {
-  const {
-    exploratoryView: { ExploratoryViewEmbeddable },
-  } = useKibana<ClientPluginsStart>().services;
+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 (
-    <ExploratoryViewEmbeddable
-      id="overviewErrorsSparklines"
-      reportType="kpi-over-time"
-      axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
-      legendIsVisible={false}
-      hideTicks={true}
-      attributes={[
-        {
-          time,
-          seriesType: 'area',
-          reportDefinitions: {
-            'monitor.id': monitorIds.length > 0 ? monitorIds : ['false-monitor-id'],
-            ...(locations?.length ? { 'observer.geo.name': locations } : {}),
-          },
-          dataType: 'synthetics',
-          selectedMetricField: 'monitor_errors',
-          name: ERRORS_LABEL,
-          color: euiTheme.colors.danger,
-          operationType: 'unique_count',
-        },
-      ]}
-    />
+    <>
+      <Chart
+        size={{
+          height: 70,
+        }}
+      >
+        <Settings baseTheme={baseTheme} />
+        <Axis
+          id="bottomAxis"
+          position={Position.Bottom}
+          tickFormat={(d: any) => formatDate(d, 'LTS')}
+          style={{
+            tickLabel: {
+              visible: false,
+            },
+          }}
+        />
+        <Axis
+          id="leftAxis"
+          position={Position.Left}
+          style={{
+            tickLabel: {
+              visible: false,
+            },
+          }}
+        />
+        <AreaSeries
+          id="errorsSparklines"
+          name={ERRORS_LABEL}
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor="x"
+          yAccessors={['y']}
+          data={histogram}
+          color={euiTheme.colors.danger}
+        />
+      </Chart>
+    </>
   );
 };

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/contexts/synthetics_shared_context.tsx

@@ -40,6 +40,7 @@ export const SyntheticsSharedContext: React.FC<
         unifiedSearch: startPlugins.unifiedSearch,
         embeddable: startPlugins.embeddable,
         slo: startPlugins.slo,
+        charts: startPlugins.charts,
         serverless: startPlugins.serverless,
       }}
     >

x-pack/plugins/observability_solution/synthetics/public/plugin.ts

@@ -61,6 +61,7 @@ import type { UiActionsSetup } from '@kbn/ui-actions-plugin/public';
 import type { PresentationUtilPluginStart } from '@kbn/presentation-util-plugin/public';
 import { DashboardStart, DashboardSetup } from '@kbn/dashboard-plugin/public';
 import { SloPublicStart } from '@kbn/slo-plugin/public';
+import type { ChartsPluginStart } from '@kbn/charts-plugin/public';
 import { registerSyntheticsEmbeddables } from './apps/embeddables/register_embeddables';
 import { kibanaService } from './utils/kibana_service';
 import { PLUGIN } from '../common/constants/plugin';
@@ -114,6 +115,7 @@ export interface ClientPluginsStart {
   slo?: SloPublicStart;
   presentationUtil: PresentationUtilPluginStart;
   dashboard: DashboardStart;
+  charts: ChartsPluginStart;
 }
 
 export interface SyntheticsPluginServices extends Partial<CoreStart> {