From 50e64b66c023ba45425ff5d6e9b36a01880fa321 Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad31comp@gmail.com>
Date: Fri, 8 Nov 2024 17:30:01 +0100
Subject: [PATCH 1/8] handle overview page

---
 .../configurations/lens_attributes.ts         |  35 ++++-
 .../embeddable/embeddable.tsx                 |   2 +
 .../embeddable/use_embeddable_attributes.ts   |   9 +-
 .../common/constants/client_defaults.ts       |  15 ++
 .../hooks/use_monitor_filters.ts              |  29 ++++
 .../hooks/use_monitor_query_filters.ts        |  18 +++
 .../overview/overview/overview_alerts.tsx     | 146 +++++++++---------
 .../overview_errors/overview_errors.tsx       |  21 +--
 .../overview_errors/overview_errors_count.tsx |  19 +--
 .../overview_errors_sparklines.tsx            |  14 +-
 10 files changed, 197 insertions(+), 111 deletions(-)
 create mode 100644 x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts
 create mode 100644 x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_query_filters.ts

diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes.ts b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes.ts
index 69080c22a13d0..dd98e9879e82a 100644
--- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes.ts
+++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes.ts
@@ -7,7 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { capitalize } from 'lodash';
-import { ExistsFilter, isExistsFilter } from '@kbn/es-query';
+import { ExistsFilter, Filter, isExistsFilter } from '@kbn/es-query';
 import {
   AvgIndexPatternColumn,
   CardinalityIndexPatternColumn,
@@ -41,6 +41,7 @@ import type { DataView } from '@kbn/data-views-plugin/common';
 import { PersistableFilter } from '@kbn/lens-plugin/common';
 import { DataViewSpec } from '@kbn/data-views-plugin/common';
 import { LegendSize } from '@kbn/visualizations-plugin/common/constants';
+import { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
 import { urlFiltersToKueryString } from '../utils/stringify_kueries';
 import {
   FILTER_RECORDS,
@@ -169,17 +170,20 @@ export class LensAttributes {
   globalFilter?: { query: string; language: string };
   reportType: string;
   lensFormulaHelper?: FormulaPublicApi;
+  dslFilters?: QueryDslQueryContainer[];
 
   constructor(
     layerConfigs: LayerConfig[],
     reportType: string,
-    lensFormulaHelper?: FormulaPublicApi
+    lensFormulaHelper?: FormulaPublicApi,
+    dslFilters?: QueryDslQueryContainer[]
   ) {
     this.layers = {};
     this.seriesReferenceLines = {};
     this.reportType = reportType;
     this.lensFormulaHelper = lensFormulaHelper;
     this.isMultiSeries = layerConfigs.length > 1;
+    this.dslFilters = dslFilters;
 
     layerConfigs.forEach(({ seriesConfig, operationType }) => {
       if (operationType && reportType !== ReportTypes.SINGLE_METRIC) {
@@ -1267,6 +1271,31 @@ export class LensAttributes {
     return { internalReferences, adHocDataViews };
   }
 
+  getFilters(): Filter[] {
+    const { internalReferences } = this.getReferences();
+
+    const dslFilters = this.dslFilters;
+    if (!dslFilters) {
+      return [];
+    }
+    return dslFilters.map((filter) => {
+      return {
+        meta: {
+          index: internalReferences?.[0].id,
+          type: 'query_string',
+          disabled: false,
+          negate: false,
+          alias: null,
+          key: 'query',
+        },
+        $state: {
+          store: 'appState',
+        },
+        query: filter,
+      } as Filter;
+    });
+  }
+
   getJSON(
     visualizationType: 'lnsXY' | 'lnsLegacyMetric' | 'lnsHeatmap' = 'lnsXY',
     lastRefresh?: number
@@ -1290,7 +1319,7 @@ export class LensAttributes {
         },
         visualization: this.visualization,
         query: query || { query: '', language: 'kuery' },
-        filters: [],
+        filters: this.getFilters(),
       },
     };
   }
diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
index a7760014dec8c..3b91e04725708 100644
--- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
+++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
@@ -19,6 +19,7 @@ import { ViewMode } from '@kbn/embeddable-plugin/common';
 import { observabilityFeatureId } from '@kbn/observability-shared-plugin/public';
 import styled from 'styled-components';
 import { AnalyticsServiceSetup } from '@kbn/core-analytics-browser';
+import { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
 import { useEBTTelemetry } from '../hooks/use_ebt_telemetry';
 import { AllSeries } from '../../../..';
 import { AppDataType, ReportViewType } from '../types';
@@ -57,6 +58,7 @@ export interface ExploratoryEmbeddableProps {
   lineHeight?: number;
   dataTestSubj?: string;
   searchSessionId?: string;
+  dslFilters?: QueryDslQueryContainer[];
 }
 
 export interface ExploratoryEmbeddableComponentProps extends ExploratoryEmbeddableProps {
diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts
index 4b58ce5366516..93e6a9f489a74 100644
--- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts
+++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts
@@ -21,6 +21,7 @@ export const useEmbeddableAttributes = ({
   reportType,
   reportConfigMap = {},
   lensFormulaHelper,
+  dslFilters,
 }: ExploratoryEmbeddableComponentProps) => {
   const spaceId = useKibanaSpace();
   const theme = useTheme();
@@ -51,7 +52,12 @@ export const useEmbeddableAttributes = ({
         );
         return lensAttributes?.getJSON('lnsHeatmap');
       } else {
-        const lensAttributes = new LensAttributes(layerConfigs, reportType, lensFormulaHelper);
+        const lensAttributes = new LensAttributes(
+          layerConfigs,
+          reportType,
+          lensFormulaHelper,
+          dslFilters
+        );
         return lensAttributes?.getJSON();
       }
     } catch (error) {
@@ -60,6 +66,7 @@ export const useEmbeddableAttributes = ({
   }, [
     attributes,
     dataViewState,
+    dslFilters,
     lensFormulaHelper,
     reportConfigMap,
     reportType,
diff --git a/x-pack/plugins/observability_solution/synthetics/common/constants/client_defaults.ts b/x-pack/plugins/observability_solution/synthetics/common/constants/client_defaults.ts
index f1098c89b7caa..456eca82739aa 100644
--- a/x-pack/plugins/observability_solution/synthetics/common/constants/client_defaults.ts
+++ b/x-pack/plugins/observability_solution/synthetics/common/constants/client_defaults.ts
@@ -112,3 +112,18 @@ export const getTimeSpanFilter = () => ({
     },
   },
 });
+
+export const getQueryFilters = (query: string) => ({
+  query_string: {
+    query: `${query}*`,
+    fields: [
+      'monitor.name.text',
+      'tags',
+      'observer.geo.name',
+      'observer.name',
+      'urls',
+      'hosts',
+      'monitor.project.id',
+    ],
+  },
+});
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts
new file mode 100644
index 0000000000000..bf50a96b0e0b9
--- /dev/null
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 { UrlFilter } from '@kbn/exploratory-view-plugin/public';
+import { useGetUrlParams } from '../../../hooks';
+import { useKibanaSpace } from '../../../../../hooks/use_kibana_space';
+
+export const useMonitorFilters = ({ forAlerts }: { forAlerts?: boolean }): UrlFilter[] => {
+  const { space } = useKibanaSpace();
+  const { locations, monitorTypes, tags, projects } = useGetUrlParams();
+
+  return [
+    ...(projects?.length ? [{ field: 'monitor.project.id', values: getValues(projects) }] : []),
+    ...(monitorTypes?.length ? [{ field: 'monitor.type', values: getValues(monitorTypes) }] : []),
+    ...(tags?.length ? [{ field: 'tags', values: getValues(tags) }] : []),
+    ...(locations?.length ? [{ field: 'observer.geo.name', values: getValues(locations) }] : []),
+    ...(space
+      ? [{ field: forAlerts ? 'kibana.space_ids' : 'meta.space_id', values: [space.id] }]
+      : []),
+  ];
+};
+
+const getValues = (values: string | string[]): string[] => {
+  return Array.isArray(values) ? values : [values];
+};
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_query_filters.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_query_filters.ts
new file mode 100644
index 0000000000000..5ddf208da6115
--- /dev/null
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_query_filters.ts
@@ -0,0 +1,18 @@
+/*
+ * 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 { useMemo } from 'react';
+import { useGetUrlParams } from '../../../hooks';
+import { getQueryFilters } from '../../../../../../common/constants/client_defaults';
+
+export const useMonitorQueryFilters = () => {
+  const { query } = useGetUrlParams();
+
+  return useMemo(() => {
+    return query ? [getQueryFilters(query)] : undefined;
+  }, [query]);
+};
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx
index e9c86eef3767a..9dda697dda272 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx
@@ -6,19 +6,18 @@
  */
 
 import React, { useMemo } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSkeletonText,
-  EuiPanel,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useTheme } from '@kbn/observability-shared-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useSelector } from 'react-redux';
 import { RECORDS_FIELD } from '@kbn/exploratory-view-plugin/public';
+import { useMonitorQueryFilters } from '../../hooks/use_monitor_query_filters';
+import {
+  SYNTHETICS_STATUS_RULE,
+  SYNTHETICS_TLS_RULE,
+} from '../../../../../../../common/constants/synthetics_alerts';
+import { useMonitorFilters } from '../../hooks/use_monitor_filters';
 import { selectOverviewStatus } from '../../../../state/overview_status';
 import { AlertsLink } from '../../../common/links/view_alerts';
 import { useRefreshedRange, useGetUrlParams } from '../../../../hooks';
@@ -64,83 +63,86 @@ export const OverviewAlerts = () => {
   } = useKibana<ClientPluginsStart>().services;
 
   const theme = useTheme();
-
-  const { status } = useSelector(selectOverviewStatus);
+  const filters = useMonitorFilters({ forAlerts: true });
 
   const { locations } = useGetUrlParams();
 
-  const loading = !status?.allIds || status?.allIds.length === 0;
-
   const monitorIds = useMonitorQueryIds();
 
+  const queryFilters = useMonitorQueryFilters();
+
   return (
     <EuiPanel hasShadow={false} paddingSize="m" hasBorder>
       <EuiTitle size="xs">
         <h3>{headingText}</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
-      {loading ? (
-        <EuiSkeletonText lines={3} />
-      ) : (
-        <EuiFlexGroup alignItems="center" gutterSize="m">
-          <EuiFlexItem grow={false}>
-            <ExploratoryViewEmbeddable
-              id="monitorActiveAlertsCount"
-              dataTestSubj="monitorActiveAlertsCount"
-              reportType="single-metric"
-              customHeight="70px"
-              attributes={[
-                {
-                  dataType: 'alerts',
-                  time: {
-                    from,
-                    to,
-                  },
-                  name: ALERTS_LABEL,
-                  selectedMetricField: RECORDS_FIELD,
-                  reportDefinitions: {
-                    'kibana.alert.rule.category': ['Synthetics monitor status'],
-                    'monitor.id': monitorIds,
-                    ...(locations?.length ? { 'observer.geo.name': locations } : {}),
-                  },
-                  filters: [{ field: 'kibana.alert.status', values: ['active', 'recovered'] }],
-                  color: theme.eui.euiColorVis1,
+      <EuiFlexGroup alignItems="center" gutterSize="m">
+        <EuiFlexItem grow={false}>
+          <ExploratoryViewEmbeddable
+            id="monitorActiveAlertsCount"
+            dataTestSubj="monitorActiveAlertsCount"
+            reportType="single-metric"
+            customHeight="70px"
+            dslFilters={queryFilters}
+            attributes={[
+              {
+                dataType: 'alerts',
+                time: {
+                  from,
+                  to,
+                },
+                name: ALERTS_LABEL,
+                selectedMetricField: RECORDS_FIELD,
+                reportDefinitions: {
+                  'kibana.alert.rule.rule_type_id': [SYNTHETICS_STATUS_RULE, SYNTHETICS_TLS_RULE],
+                  'monitor.id': monitorIds,
+                  ...(locations?.length ? { 'observer.geo.name': locations } : {}),
+                },
+                filters: [
+                  { field: 'kibana.alert.status', values: ['active', 'recovered'] },
+                  ...filters,
+                ],
+                color: theme.eui.euiColorVis1,
+              },
+            ]}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <ExploratoryViewEmbeddable
+            id="monitorActiveAlertsOverTime"
+            sparklineMode
+            customHeight="70px"
+            reportType="kpi-over-time"
+            dslFilters={queryFilters}
+            attributes={[
+              {
+                seriesType: 'area',
+                time: {
+                  from,
+                  to,
                 },
-              ]}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <ExploratoryViewEmbeddable
-              id="monitorActiveAlertsOverTime"
-              sparklineMode
-              customHeight="70px"
-              reportType="kpi-over-time"
-              attributes={[
-                {
-                  seriesType: 'area',
-                  time: {
-                    from,
-                    to,
-                  },
-                  reportDefinitions: {
-                    'kibana.alert.rule.category': ['Synthetics monitor status'],
-                    'monitor.id': monitorIds,
-                    ...(locations?.length ? { 'observer.geo.name': locations } : {}),
-                  },
-                  dataType: 'alerts',
-                  selectedMetricField: RECORDS_FIELD,
-                  name: ALERTS_LABEL,
-                  filters: [{ field: 'kibana.alert.status', values: ['active', 'recovered'] }],
-                  color: theme.eui.euiColorVis1_behindText,
+                reportDefinitions: {
+                  'kibana.alert.rule.rule_type_id': [SYNTHETICS_STATUS_RULE, SYNTHETICS_TLS_RULE],
+                  'monitor.id': monitorIds,
+                  ...(locations?.length ? { 'observer.geo.name': locations } : {}),
                 },
-              ]}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false} css={{ alignSelf: 'center' }}>
-            <AlertsLink />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      )}
+                dataType: 'alerts',
+                selectedMetricField: RECORDS_FIELD,
+                name: ALERTS_LABEL,
+                filters: [
+                  { field: 'kibana.alert.status', values: ['active', 'recovered'] },
+                  ...filters,
+                ],
+                color: theme.eui.euiColorVis1_behindText,
+              },
+            ]}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false} css={{ alignSelf: 'center' }}>
+          <AlertsLink />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiPanel>
   );
 };
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx
index 34d113da9901b..a88afbaaa88d2 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx
@@ -16,10 +16,9 @@ import {
 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 { OverviewErrorsSparklines } from './overview_errors_sparklines';
-import { useRefreshedRange, useGetUrlParams } from '../../../../../hooks';
+import { useRefreshedRange } from '../../../../../hooks';
 import { OverviewErrorsCount } from './overview_errors_count';
 
 export function OverviewErrors() {
@@ -29,10 +28,6 @@ export function OverviewErrors() {
 
   const { from, to } = useRefreshedRange(6, 'hours');
 
-  const { locations } = useGetUrlParams();
-
-  const monitorIds = useMonitorQueryIds();
-
   return (
     <EuiPanel hasShadow={false} hasBorder>
       <EuiTitle size="xs">
@@ -44,20 +39,10 @@ export function OverviewErrors() {
       ) : (
         <EuiFlexGroup gutterSize="xl">
           <EuiFlexItem grow={false}>
-            <OverviewErrorsCount
-              from={from}
-              to={to}
-              monitorIds={monitorIds}
-              locations={locations}
-            />
+            <OverviewErrorsCount from={from} to={to} />
           </EuiFlexItem>
           <EuiFlexItem grow={true}>
-            <OverviewErrorsSparklines
-              from={from}
-              to={to}
-              monitorIds={monitorIds}
-              locations={locations}
-            />
+            <OverviewErrorsSparklines from={from} to={to} />
           </EuiFlexItem>
         </EuiFlexGroup>
       )}
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors_count.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors_count.tsx
index aaebf3e4bb041..e7365ccc7520c 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors_count.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors_count.tsx
@@ -8,27 +8,23 @@
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import React, { useMemo } from 'react';
 import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
+import { useMonitorFilters } from '../../../hooks/use_monitor_filters';
 import { ERRORS_LABEL } from '../../../../monitor_details/monitor_summary/monitor_errors_count';
 import { ClientPluginsStart } from '../../../../../../../plugin';
+import { useMonitorQueryFilters } from '../../../hooks/use_monitor_query_filters';
 
 interface MonitorErrorsCountProps {
   from: string;
   to: string;
-  locationLabel?: string;
-  monitorIds: string[];
-  locations?: string[];
 }
 
-export const OverviewErrorsCount = ({
-  monitorIds,
-  from,
-  to,
-  locations,
-}: MonitorErrorsCountProps) => {
+export const OverviewErrorsCount = ({ from, to }: MonitorErrorsCountProps) => {
   const {
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
 
+  const filters = useMonitorFilters({});
+
   const time = useMemo(() => ({ from, to }), [from, to]);
 
   return (
@@ -36,17 +32,18 @@ export const OverviewErrorsCount = ({
       id="overviewErrorsCount"
       align="left"
       customHeight="70px"
+      dslFilters={useMonitorQueryFilters()}
       reportType={ReportTypes.SINGLE_METRIC}
       attributes={[
         {
           time,
           reportDefinitions: {
-            'monitor.id': monitorIds.length > 0 ? monitorIds : ['false-monitor-id'],
-            ...(locations?.length ? { 'observer.geo.name': locations } : {}),
+            'monitor.type': ['http', 'tcp', 'browser', 'icmp'],
           },
           dataType: 'synthetics',
           selectedMetricField: 'monitor_errors',
           name: ERRORS_LABEL,
+          filters,
         },
       ]}
     />
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors_sparklines.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors_sparklines.tsx
index b97e0eef8bbb5..41d6a5bc34d7d 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors_sparklines.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors_sparklines.tsx
@@ -8,20 +8,21 @@
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import React, { useMemo } from 'react';
 import { useEuiTheme } from '@elastic/eui';
-import { ClientPluginsStart } from '../../../../../../../plugin';
 import { ERRORS_LABEL } from '../../../../monitor_details/monitor_summary/monitor_errors_count';
+import { ClientPluginsStart } from '../../../../../../../plugin';
+import { useMonitorFilters } from '../../../hooks/use_monitor_filters';
+import { useMonitorQueryFilters } from '../../../hooks/use_monitor_query_filters';
 
 interface Props {
   from: string;
   to: string;
-  monitorIds: string[];
-  locations?: string[];
 }
-export const OverviewErrorsSparklines = ({ from, to, monitorIds, locations }: Props) => {
+export const OverviewErrorsSparklines = ({ from, to }: Props) => {
   const {
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
 
+  const filters = useMonitorFilters({});
   const { euiTheme } = useEuiTheme();
 
   const time = useMemo(() => ({ from, to }), [from, to]);
@@ -33,19 +34,20 @@ export const OverviewErrorsSparklines = ({ from, to, monitorIds, locations }: Pr
       axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}
       legendIsVisible={false}
       hideTicks={true}
+      dslFilters={useMonitorQueryFilters()}
       attributes={[
         {
           time,
           seriesType: 'area',
           reportDefinitions: {
-            'monitor.id': monitorIds.length > 0 ? monitorIds : ['false-monitor-id'],
-            ...(locations?.length ? { 'observer.geo.name': locations } : {}),
+            'monitor.type': ['http', 'tcp', 'browser', 'icmp'],
           },
           dataType: 'synthetics',
           selectedMetricField: 'monitor_errors',
           name: ERRORS_LABEL,
           color: euiTheme.colors.danger,
           operationType: 'unique_count',
+          filters,
         },
       ]}
     />

From d24afc369e0e7863d21513af1022ad213e06c807 Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad31comp@gmail.com>
Date: Fri, 8 Nov 2024 17:55:16 +0100
Subject: [PATCH 2/8] fix stats panels

---
 .../monitor_errors/monitor_async_error.tsx          |  2 +-
 .../management/monitor_stats/monitor_stats.tsx      |  4 ++--
 .../management/monitor_stats/monitor_test_runs.tsx  | 11 ++++++++---
 .../monitor_stats/monitor_test_runs_sparkline.tsx   | 13 +++++++++----
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_errors/monitor_async_error.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_errors/monitor_async_error.tsx
index ae5a035b76b54..a40bb6e370783 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_errors/monitor_async_error.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_errors/monitor_async_error.tsx
@@ -36,7 +36,7 @@ export const MonitorAsyncError = () => {
             defaultMessage="There was a problem running your monitors for one or more locations:"
           />
         </p>
-        <ul>
+        <ul style={{ maxHeight: 100, overflow: 'auto' }}>
           {Object.values(syncErrors ?? {}).map((e) => {
             return (
               <li key={e.locationId}>
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_stats.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_stats.tsx
index 67ce536fc3c8e..db0e54b078752 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_stats.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_stats.tsx
@@ -73,9 +73,9 @@ export const MonitorStats = ({
           <EuiFlexItem
             css={{ display: 'flex', flexDirection: 'row', gap: euiTheme.size.l, height: '200px' }}
           >
-            <MonitorTestRunsCount monitorIds={overviewStatus?.allIds ?? []} />
+            <MonitorTestRunsCount />
             <EuiFlexItem grow={true}>
-              <MonitorTestRunsSparkline monitorIds={overviewStatus?.allIds ?? []} />
+              <MonitorTestRunsSparkline />
             </EuiFlexItem>
           </EuiFlexItem>
         </EuiPanel>
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_test_runs.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_test_runs.tsx
index 90a7d705b5c39..18eaa74b4cdcd 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_test_runs.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_test_runs.tsx
@@ -11,31 +11,36 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useTheme } from '@kbn/observability-shared-plugin/public';
 import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
 
+import { useMonitorFilters } from '../../hooks/use_monitor_filters';
 import { useRefreshedRange } from '../../../../hooks';
 import { ClientPluginsStart } from '../../../../../../plugin';
 import * as labels from '../labels';
+import { useMonitorQueryFilters } from '../../hooks/use_monitor_query_filters';
 
-export const MonitorTestRunsCount = ({ monitorIds }: { monitorIds: string[] }) => {
+export const MonitorTestRunsCount = () => {
   const {
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
   const theme = useTheme();
 
   const { from, to } = useRefreshedRange(30, 'days');
+  const filters = useMonitorFilters({});
+  const queryFilter = useMonitorQueryFilters();
 
   return (
     <ExploratoryViewEmbeddable
+      dslFilters={queryFilter}
       align="left"
       reportType={ReportTypes.SINGLE_METRIC}
       attributes={[
         {
+          filters,
           time: { from, to },
           reportDefinitions: {
-            'monitor.id': monitorIds.length > 0 ? monitorIds : ['false-monitor-id'], // Show no data when monitorIds is empty
+            'monitor.type': ['http', 'tcp', 'browser', 'icmp'],
           },
           dataType: 'synthetics',
           selectedMetricField: 'monitor_total_runs',
-          filters: [],
           name: labels.TEST_RUNS_LABEL,
           color: theme.eui.euiColorVis1,
         },
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_test_runs_sparkline.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_test_runs_sparkline.tsx
index c2930a1d22ffb..8713dfb77769e 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_test_runs_sparkline.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_test_runs_sparkline.tsx
@@ -10,11 +10,13 @@ import React, { useMemo } from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useTheme } from '@kbn/observability-shared-plugin/public';
 
+import { useMonitorQueryFilters } from '../../hooks/use_monitor_query_filters';
+import { useMonitorFilters } from '../../hooks/use_monitor_filters';
 import { useRefreshedRange } from '../../../../hooks';
 import { ClientPluginsStart } from '../../../../../../plugin';
 import * as labels from '../labels';
 
-export const MonitorTestRunsSparkline = ({ monitorIds }: { monitorIds: string[] }) => {
+export const MonitorTestRunsSparkline = () => {
   const {
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
@@ -22,6 +24,8 @@ export const MonitorTestRunsSparkline = ({ monitorIds }: { monitorIds: string[]
   const theme = useTheme();
 
   const { from, to } = useRefreshedRange(30, 'days');
+  const filters = useMonitorFilters({});
+  const queryFilter = useMonitorQueryFilters();
 
   const attributes = useMemo(() => {
     return [
@@ -29,18 +33,18 @@ export const MonitorTestRunsSparkline = ({ monitorIds }: { monitorIds: string[]
         seriesType: 'area' as const,
         time: { from, to },
         reportDefinitions: {
-          'monitor.id': monitorIds.length > 0 ? monitorIds : ['false-monitor-id'], // Show no data when monitorIds is empty
+          'monitor.type': ['http', 'tcp', 'browser', 'icmp'],
         },
         dataType: 'synthetics' as const,
         selectedMetricField: 'total_test_runs',
-        filters: [],
+        filters,
         name: labels.TEST_RUNS_LABEL,
         color: theme.eui.euiColorVis1,
         operationType: 'count',
       },
     ];
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [from, JSON.stringify({ ids: [...monitorIds].sort() }), theme.eui.euiColorVis1, to]);
+  }, [from, theme.eui.euiColorVis1, to]);
 
   return (
     <ExploratoryViewEmbeddable
@@ -51,6 +55,7 @@ export const MonitorTestRunsSparkline = ({ monitorIds }: { monitorIds: string[]
       hideTicks={true}
       attributes={attributes}
       customHeight={'68px'}
+      dslFilters={queryFilter}
     />
   );
 };

From cb3e513319f5086cf0926f43a6e8e2ad6e192fa5 Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad31comp@gmail.com>
Date: Thu, 14 Nov 2024 11:38:49 +0100
Subject: [PATCH 3/8] fix ref warnings

---
 .../overview/overview/overview_alerts.tsx     |  5 -
 .../overview/overview/overview_grid.tsx       | 92 +++++++++----------
 2 files changed, 46 insertions(+), 51 deletions(-)

diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx
index 9dda697dda272..8174b7fb63f73 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx
@@ -66,9 +66,6 @@ export const OverviewAlerts = () => {
   const filters = useMonitorFilters({ forAlerts: true });
 
   const { locations } = useGetUrlParams();
-
-  const monitorIds = useMonitorQueryIds();
-
   const queryFilters = useMonitorQueryFilters();
 
   return (
@@ -96,7 +93,6 @@ export const OverviewAlerts = () => {
                 selectedMetricField: RECORDS_FIELD,
                 reportDefinitions: {
                   'kibana.alert.rule.rule_type_id': [SYNTHETICS_STATUS_RULE, SYNTHETICS_TLS_RULE],
-                  'monitor.id': monitorIds,
                   ...(locations?.length ? { 'observer.geo.name': locations } : {}),
                 },
                 filters: [
@@ -124,7 +120,6 @@ export const OverviewAlerts = () => {
                 },
                 reportDefinitions: {
                   'kibana.alert.rule.rule_type_id': [SYNTHETICS_STATUS_RULE, SYNTHETICS_TLS_RULE],
-                  'monitor.id': monitorIds,
                   ...(locations?.length ? { 'observer.geo.name': locations } : {}),
                 },
                 dataType: 'alerts',
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid.tsx
index f0612498f8664..507b971c6a40f 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid.tsx
@@ -114,7 +114,6 @@ export const OverviewGrid = memo(() => {
     return acc;
   }, [monitorsSortedByStatus]);
 
-  const listRef: React.LegacyRef<FixedSizeList<ListItem[][]>> | undefined = React.createRef();
   useEffect(() => {
     dispatch(refreshOverviewTrends.get());
   }, [dispatch, lastRefresh]);
@@ -165,50 +164,52 @@ export const OverviewGrid = memo(() => {
                   minimumBatchSize={MIN_BATCH_SIZE}
                   threshold={LIST_THRESHOLD}
                 >
-                  {({ onItemsRendered }) => (
-                    <FixedSizeList
-                      // pad computed height to avoid clipping last row's drop shadow
-                      height={listHeight + 16}
-                      width={width}
-                      onItemsRendered={onItemsRendered}
-                      itemSize={ITEM_HEIGHT}
-                      itemCount={listItems.length}
-                      itemData={listItems}
-                      ref={listRef}
-                    >
-                      {({
-                        index: listIndex,
-                        style,
-                        data: listData,
-                      }: React.PropsWithChildren<ListChildComponentProps<ListItem[][]>>) => {
-                        setCurrentIndex(listIndex);
-                        return (
-                          <EuiFlexGroup
-                            data-test-subj={`overview-grid-row-${listIndex}`}
-                            gutterSize="m"
-                            style={{ ...style }}
-                          >
-                            {listData[listIndex].map((_, idx) => (
-                              <EuiFlexItem
-                                data-test-subj="syntheticsOverviewGridItem"
-                                key={listIndex * ROW_COUNT + idx}
-                              >
-                                <MetricItem
-                                  monitor={monitorsSortedByStatus[listIndex * ROW_COUNT + idx]}
-                                  onClick={setFlyoutConfigCallback}
-                                />
-                              </EuiFlexItem>
-                            ))}
-                            {listData[listIndex].length % ROW_COUNT !== 0 &&
-                              // Adds empty items to fill out row
-                              Array.from({
-                                length: ROW_COUNT - listData[listIndex].length,
-                              }).map((_, idx) => <EuiFlexItem key={idx} />)}
-                          </EuiFlexGroup>
-                        );
-                      }}
-                    </FixedSizeList>
-                  )}
+                  {({ onItemsRendered, ref }) => {
+                    return (
+                      <FixedSizeList
+                        // pad computed height to avoid clipping last row's drop shadow
+                        height={listHeight + 16}
+                        width={width}
+                        onItemsRendered={onItemsRendered}
+                        itemSize={ITEM_HEIGHT}
+                        itemCount={listItems.length}
+                        itemData={listItems}
+                        ref={ref}
+                      >
+                        {({
+                          index: listIndex,
+                          style,
+                          data: listData,
+                        }: React.PropsWithChildren<ListChildComponentProps<ListItem[][]>>) => {
+                          setCurrentIndex(listIndex);
+                          return (
+                            <EuiFlexGroup
+                              data-test-subj={`overview-grid-row-${listIndex}`}
+                              gutterSize="m"
+                              style={{ ...style }}
+                            >
+                              {listData[listIndex].map((_, idx) => (
+                                <EuiFlexItem
+                                  data-test-subj="syntheticsOverviewGridItem"
+                                  key={listIndex * ROW_COUNT + idx}
+                                >
+                                  <MetricItem
+                                    monitor={monitorsSortedByStatus[listIndex * ROW_COUNT + idx]}
+                                    onClick={setFlyoutConfigCallback}
+                                  />
+                                </EuiFlexItem>
+                              ))}
+                              {listData[listIndex].length % ROW_COUNT !== 0 &&
+                                // Adds empty items to fill out row
+                                Array.from({
+                                  length: ROW_COUNT - listData[listIndex].length,
+                                }).map((_, idx) => <EuiFlexItem key={idx} />)}
+                            </EuiFlexGroup>
+                          );
+                        }}
+                      </FixedSizeList>
+                    );
+                  }}
                 </InfiniteLoader>
               )}
             </EuiAutoSizer>
@@ -239,7 +240,6 @@ export const OverviewGrid = memo(() => {
                       data-test-subj="syntheticsOverviewGridButton"
                       onClick={() => {
                         window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
-                        listRef.current?.scrollToItem(0);
                       }}
                       iconType="sortUp"
                       iconSide="right"

From c9b61b57d0b3377f13c3ab2f9780b94261361499 Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad31comp@gmail.com>
Date: Thu, 14 Nov 2024 18:16:33 +0100
Subject: [PATCH 4/8] fix query filters

---
 .../lens_attributes/single_metric_attributes.ts             | 6 ++++--
 .../embeddable/use_embeddable_attributes.ts                 | 3 ++-
 .../synthetics/common/constants/client_defaults.ts          | 2 +-
 .../synthetics/server/routes/common.ts                      | 2 +-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.ts b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.ts
index 1aab4261a5d15..cbe6cd2b3451f 100644
--- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.ts
+++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.ts
@@ -10,6 +10,7 @@ import { FormulaPublicApi, MetricState, OperationType } from '@kbn/lens-plugin/p
 import type { DataView } from '@kbn/data-views-plugin/common';
 
 import { Query } from '@kbn/es-query';
+import { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
 import { getColorPalette } from '../synthetics/single_metric_config';
 import { FORMULA_COLUMN, RECORDS_FIELD } from '../constants';
 import { ColumnFilter, MetricOption } from '../../types';
@@ -28,9 +29,10 @@ export class SingleMetricLensAttributes extends LensAttributes {
   constructor(
     layerConfigs: LayerConfig[],
     reportType: string,
-    lensFormulaHelper: FormulaPublicApi
+    lensFormulaHelper: FormulaPublicApi,
+    dslFilters?: QueryDslQueryContainer[]
   ) {
-    super(layerConfigs, reportType, lensFormulaHelper);
+    super(layerConfigs, reportType, lensFormulaHelper, dslFilters);
     this.layers = {};
     this.reportType = reportType;
 
diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts
index 93e6a9f489a74..f1124d2a32a30 100644
--- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts
+++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts
@@ -41,7 +41,8 @@ export const useEmbeddableAttributes = ({
         const lensAttributes = new SingleMetricLensAttributes(
           layerConfigs,
           reportType,
-          lensFormulaHelper!
+          lensFormulaHelper!,
+          dslFilters
         );
         return lensAttributes?.getJSON('lnsLegacyMetric');
       } else if (reportType === ReportTypes.HEATMAP) {
diff --git a/x-pack/plugins/observability_solution/synthetics/common/constants/client_defaults.ts b/x-pack/plugins/observability_solution/synthetics/common/constants/client_defaults.ts
index 456eca82739aa..0f4f2ca9441ad 100644
--- a/x-pack/plugins/observability_solution/synthetics/common/constants/client_defaults.ts
+++ b/x-pack/plugins/observability_solution/synthetics/common/constants/client_defaults.ts
@@ -115,7 +115,7 @@ export const getTimeSpanFilter = () => ({
 
 export const getQueryFilters = (query: string) => ({
   query_string: {
-    query: `${query}*`,
+    query: `${query}`,
     fields: [
       'monitor.name.text',
       'tags',
diff --git a/x-pack/plugins/observability_solution/synthetics/server/routes/common.ts b/x-pack/plugins/observability_solution/synthetics/server/routes/common.ts
index 2a906f3cf6a4d..24d16d323e480 100644
--- a/x-pack/plugins/observability_solution/synthetics/server/routes/common.ts
+++ b/x-pack/plugins/observability_solution/synthetics/server/routes/common.ts
@@ -111,7 +111,7 @@ export const getMonitors = async (
     sortField: parseMappingKey(sortField),
     sortOrder,
     searchFields: SEARCH_FIELDS,
-    search: query ? `${query}*` : undefined,
+    search: query,
     filter: filtersStr,
     searchAfter,
     fields,

From ede58e5fbb8ece7cb261372d812ae4040821f1ff Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad31comp@gmail.com>
Date: Thu, 14 Nov 2024 18:24:58 +0100
Subject: [PATCH 5/8] work around for schedule

---
 .../components/monitors_page/hooks/use_monitor_filters.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts
index bf50a96b0e0b9..3f549523e373d 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts
@@ -6,14 +6,20 @@
  */
 
 import { UrlFilter } from '@kbn/exploratory-view-plugin/public';
+import { useSelector } from 'react-redux';
 import { useGetUrlParams } from '../../../hooks';
 import { useKibanaSpace } from '../../../../../hooks/use_kibana_space';
+import { selectOverviewStatus } from '../../../state/overview_status';
 
 export const useMonitorFilters = ({ forAlerts }: { forAlerts?: boolean }): UrlFilter[] => {
   const { space } = useKibanaSpace();
-  const { locations, monitorTypes, tags, projects } = useGetUrlParams();
+  const { locations, monitorTypes, tags, projects, schedules } = useGetUrlParams();
+  const { status: overviewStatus } = useSelector(selectOverviewStatus);
+  const allIds = overviewStatus?.allIds ?? [];
 
   return [
+    // since schedule isn't available in heartbeat data, in that case we rely on monitor.id
+    ...(allIds?.length && schedules ? [{ field: 'monitor.id', values: allIds }] : []),
     ...(projects?.length ? [{ field: 'monitor.project.id', values: getValues(projects) }] : []),
     ...(monitorTypes?.length ? [{ field: 'monitor.type', values: getValues(monitorTypes) }] : []),
     ...(tags?.length ? [{ field: 'tags', values: getValues(tags) }] : []),

From 2626be8a9bae1ec50adc9342294cb271b07b1f81 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 14 Nov 2024 17:41:39 +0000
Subject: [PATCH 6/8] [CI] Auto-commit changed files from 'make api-docs'

---
 oas_docs/output/kibana.serverless.yaml | 78 ++++++--------------------
 oas_docs/output/kibana.yaml            | 78 ++++++--------------------
 2 files changed, 36 insertions(+), 120 deletions(-)

diff --git a/oas_docs/output/kibana.serverless.yaml b/oas_docs/output/kibana.serverless.yaml
index 117e52586c5ad..4f54e401b14c2 100644
--- a/oas_docs/output/kibana.serverless.yaml
+++ b/oas_docs/output/kibana.serverless.yaml
@@ -1018,24 +1018,17 @@ paths:
                       - last_execution_date
                   flapping:
                     additionalProperties: false
-                    description: >-
-                      When flapping detection is turned on, alerts that switch
-                      quickly between active and recovered states are identified
-                      as “flapping” and notifications are reduced.
+                    description: When flapping detection is turned on, alerts that switch quickly between active and recovered states are identified as “flapping” and notifications are reduced.
                     nullable: true
                     type: object
                     properties:
                       look_back_window:
-                        description: >-
-                          The minimum number of runs in which the threshold must
-                          be met.
+                        description: The minimum number of runs in which the threshold must be met.
                         maximum: 20
                         minimum: 2
                         type: number
                       status_change_threshold:
-                        description: >-
-                          The minimum number of times an alert must switch
-                          states in the look back window.
+                        description: The minimum number of times an alert must switch states in the look back window.
                         maximum: 20
                         minimum: 2
                         type: number
@@ -1610,24 +1603,17 @@ paths:
                   type: boolean
                 flapping:
                   additionalProperties: false
-                  description: >-
-                    When flapping detection is turned on, alerts that switch
-                    quickly between active and recovered states are identified
-                    as “flapping” and notifications are reduced.
+                  description: When flapping detection is turned on, alerts that switch quickly between active and recovered states are identified as “flapping” and notifications are reduced.
                   nullable: true
                   type: object
                   properties:
                     look_back_window:
-                      description: >-
-                        The minimum number of runs in which the threshold must
-                        be met.
+                      description: The minimum number of runs in which the threshold must be met.
                       maximum: 20
                       minimum: 2
                       type: number
                     status_change_threshold:
-                      description: >-
-                        The minimum number of times an alert must switch states
-                        in the look back window.
+                      description: The minimum number of times an alert must switch states in the look back window.
                       maximum: 20
                       minimum: 2
                       type: number
@@ -1945,24 +1931,17 @@ paths:
                       - last_execution_date
                   flapping:
                     additionalProperties: false
-                    description: >-
-                      When flapping detection is turned on, alerts that switch
-                      quickly between active and recovered states are identified
-                      as “flapping” and notifications are reduced.
+                    description: When flapping detection is turned on, alerts that switch quickly between active and recovered states are identified as “flapping” and notifications are reduced.
                     nullable: true
                     type: object
                     properties:
                       look_back_window:
-                        description: >-
-                          The minimum number of runs in which the threshold must
-                          be met.
+                        description: The minimum number of runs in which the threshold must be met.
                         maximum: 20
                         minimum: 2
                         type: number
                       status_change_threshold:
-                        description: >-
-                          The minimum number of times an alert must switch
-                          states in the look back window.
+                        description: The minimum number of times an alert must switch states in the look back window.
                         maximum: 20
                         minimum: 2
                         type: number
@@ -2540,24 +2519,17 @@ paths:
                     - active
                 flapping:
                   additionalProperties: false
-                  description: >-
-                    When flapping detection is turned on, alerts that switch
-                    quickly between active and recovered states are identified
-                    as “flapping” and notifications are reduced.
+                  description: When flapping detection is turned on, alerts that switch quickly between active and recovered states are identified as “flapping” and notifications are reduced.
                   nullable: true
                   type: object
                   properties:
                     look_back_window:
-                      description: >-
-                        The minimum number of runs in which the threshold must
-                        be met.
+                      description: The minimum number of runs in which the threshold must be met.
                       maximum: 20
                       minimum: 2
                       type: number
                     status_change_threshold:
-                      description: >-
-                        The minimum number of times an alert must switch states
-                        in the look back window.
+                      description: The minimum number of times an alert must switch states in the look back window.
                       maximum: 20
                       minimum: 2
                       type: number
@@ -2847,24 +2819,17 @@ paths:
                       - last_execution_date
                   flapping:
                     additionalProperties: false
-                    description: >-
-                      When flapping detection is turned on, alerts that switch
-                      quickly between active and recovered states are identified
-                      as “flapping” and notifications are reduced.
+                    description: When flapping detection is turned on, alerts that switch quickly between active and recovered states are identified as “flapping” and notifications are reduced.
                     nullable: true
                     type: object
                     properties:
                       look_back_window:
-                        description: >-
-                          The minimum number of runs in which the threshold must
-                          be met.
+                        description: The minimum number of runs in which the threshold must be met.
                         maximum: 20
                         minimum: 2
                         type: number
                       status_change_threshold:
-                        description: >-
-                          The minimum number of times an alert must switch
-                          states in the look back window.
+                        description: The minimum number of times an alert must switch states in the look back window.
                         maximum: 20
                         minimum: 2
                         type: number
@@ -3902,24 +3867,17 @@ paths:
                       - last_execution_date
                   flapping:
                     additionalProperties: false
-                    description: >-
-                      When flapping detection is turned on, alerts that switch
-                      quickly between active and recovered states are identified
-                      as “flapping” and notifications are reduced.
+                    description: When flapping detection is turned on, alerts that switch quickly between active and recovered states are identified as “flapping” and notifications are reduced.
                     nullable: true
                     type: object
                     properties:
                       look_back_window:
-                        description: >-
-                          The minimum number of runs in which the threshold must
-                          be met.
+                        description: The minimum number of runs in which the threshold must be met.
                         maximum: 20
                         minimum: 2
                         type: number
                       status_change_threshold:
-                        description: >-
-                          The minimum number of times an alert must switch
-                          states in the look back window.
+                        description: The minimum number of times an alert must switch states in the look back window.
                         maximum: 20
                         minimum: 2
                         type: number
diff --git a/oas_docs/output/kibana.yaml b/oas_docs/output/kibana.yaml
index 82acbdb311f2f..0e2811d1a4647 100644
--- a/oas_docs/output/kibana.yaml
+++ b/oas_docs/output/kibana.yaml
@@ -1367,24 +1367,17 @@ paths:
                       - last_execution_date
                   flapping:
                     additionalProperties: false
-                    description: >-
-                      When flapping detection is turned on, alerts that switch
-                      quickly between active and recovered states are identified
-                      as “flapping” and notifications are reduced.
+                    description: When flapping detection is turned on, alerts that switch quickly between active and recovered states are identified as “flapping” and notifications are reduced.
                     nullable: true
                     type: object
                     properties:
                       look_back_window:
-                        description: >-
-                          The minimum number of runs in which the threshold must
-                          be met.
+                        description: The minimum number of runs in which the threshold must be met.
                         maximum: 20
                         minimum: 2
                         type: number
                       status_change_threshold:
-                        description: >-
-                          The minimum number of times an alert must switch
-                          states in the look back window.
+                        description: The minimum number of times an alert must switch states in the look back window.
                         maximum: 20
                         minimum: 2
                         type: number
@@ -1958,24 +1951,17 @@ paths:
                   type: boolean
                 flapping:
                   additionalProperties: false
-                  description: >-
-                    When flapping detection is turned on, alerts that switch
-                    quickly between active and recovered states are identified
-                    as “flapping” and notifications are reduced.
+                  description: When flapping detection is turned on, alerts that switch quickly between active and recovered states are identified as “flapping” and notifications are reduced.
                   nullable: true
                   type: object
                   properties:
                     look_back_window:
-                      description: >-
-                        The minimum number of runs in which the threshold must
-                        be met.
+                      description: The minimum number of runs in which the threshold must be met.
                       maximum: 20
                       minimum: 2
                       type: number
                     status_change_threshold:
-                      description: >-
-                        The minimum number of times an alert must switch states
-                        in the look back window.
+                      description: The minimum number of times an alert must switch states in the look back window.
                       maximum: 20
                       minimum: 2
                       type: number
@@ -2293,24 +2279,17 @@ paths:
                       - last_execution_date
                   flapping:
                     additionalProperties: false
-                    description: >-
-                      When flapping detection is turned on, alerts that switch
-                      quickly between active and recovered states are identified
-                      as “flapping” and notifications are reduced.
+                    description: When flapping detection is turned on, alerts that switch quickly between active and recovered states are identified as “flapping” and notifications are reduced.
                     nullable: true
                     type: object
                     properties:
                       look_back_window:
-                        description: >-
-                          The minimum number of runs in which the threshold must
-                          be met.
+                        description: The minimum number of runs in which the threshold must be met.
                         maximum: 20
                         minimum: 2
                         type: number
                       status_change_threshold:
-                        description: >-
-                          The minimum number of times an alert must switch
-                          states in the look back window.
+                        description: The minimum number of times an alert must switch states in the look back window.
                         maximum: 20
                         minimum: 2
                         type: number
@@ -2887,24 +2866,17 @@ paths:
                     - active
                 flapping:
                   additionalProperties: false
-                  description: >-
-                    When flapping detection is turned on, alerts that switch
-                    quickly between active and recovered states are identified
-                    as “flapping” and notifications are reduced.
+                  description: When flapping detection is turned on, alerts that switch quickly between active and recovered states are identified as “flapping” and notifications are reduced.
                   nullable: true
                   type: object
                   properties:
                     look_back_window:
-                      description: >-
-                        The minimum number of runs in which the threshold must
-                        be met.
+                      description: The minimum number of runs in which the threshold must be met.
                       maximum: 20
                       minimum: 2
                       type: number
                     status_change_threshold:
-                      description: >-
-                        The minimum number of times an alert must switch states
-                        in the look back window.
+                      description: The minimum number of times an alert must switch states in the look back window.
                       maximum: 20
                       minimum: 2
                       type: number
@@ -3194,24 +3166,17 @@ paths:
                       - last_execution_date
                   flapping:
                     additionalProperties: false
-                    description: >-
-                      When flapping detection is turned on, alerts that switch
-                      quickly between active and recovered states are identified
-                      as “flapping” and notifications are reduced.
+                    description: When flapping detection is turned on, alerts that switch quickly between active and recovered states are identified as “flapping” and notifications are reduced.
                     nullable: true
                     type: object
                     properties:
                       look_back_window:
-                        description: >-
-                          The minimum number of runs in which the threshold must
-                          be met.
+                        description: The minimum number of runs in which the threshold must be met.
                         maximum: 20
                         minimum: 2
                         type: number
                       status_change_threshold:
-                        description: >-
-                          The minimum number of times an alert must switch
-                          states in the look back window.
+                        description: The minimum number of times an alert must switch states in the look back window.
                         maximum: 20
                         minimum: 2
                         type: number
@@ -4241,24 +4206,17 @@ paths:
                       - last_execution_date
                   flapping:
                     additionalProperties: false
-                    description: >-
-                      When flapping detection is turned on, alerts that switch
-                      quickly between active and recovered states are identified
-                      as “flapping” and notifications are reduced.
+                    description: When flapping detection is turned on, alerts that switch quickly between active and recovered states are identified as “flapping” and notifications are reduced.
                     nullable: true
                     type: object
                     properties:
                       look_back_window:
-                        description: >-
-                          The minimum number of runs in which the threshold must
-                          be met.
+                        description: The minimum number of runs in which the threshold must be met.
                         maximum: 20
                         minimum: 2
                         type: number
                       status_change_threshold:
-                        description: >-
-                          The minimum number of times an alert must switch
-                          states in the look back window.
+                        description: The minimum number of times an alert must switch states in the look back window.
                         maximum: 20
                         minimum: 2
                         type: number

From 977957f10e4fe37d0413c965af3ed00f8d38d89c Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad31comp@gmail.com>
Date: Wed, 20 Nov 2024 18:07:43 +0100
Subject: [PATCH 7/8] Added tests

---
 .../single_metric_attributes.ts               |   2 +-
 .../synthetics/kpi_over_time_config.ts        |   2 +-
 .../synthetics/single_metric_config.ts        |   3 +-
 .../hooks/use_monitor_filters.test.ts         | 124 ++++++++++++++++++
 .../hooks/use_monitor_filters.ts              |   5 +-
 .../overview_errors/overview_errors.tsx       |  35 ++---
 .../public/hooks/use_kibana_space.tsx         |   2 +-
 7 files changed, 140 insertions(+), 33 deletions(-)
 create mode 100644 x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.test.ts

diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.ts b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.ts
index cbe6cd2b3451f..fe206c64dd61c 100644
--- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.ts
+++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.ts
@@ -147,7 +147,7 @@ export class SingleMetricLensAttributes extends LensAttributes {
             ? {
                 id: 'percent',
                 params: {
-                  decimals: 1,
+                  decimals: 3,
                 },
               }
             : undefined,
diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/synthetics/kpi_over_time_config.ts b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/synthetics/kpi_over_time_config.ts
index 115bb41f6630d..c935d45f9e124 100644
--- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/synthetics/kpi_over_time_config.ts
+++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/synthetics/kpi_over_time_config.ts
@@ -106,7 +106,7 @@ export function getSyntheticsKPIConfig({ dataView }: ConfigProps): SeriesConfig
         label: 'Monitor Errors',
         id: 'monitor_errors',
         columnType: OPERATION_COLUMN,
-        field: 'monitor.check_group',
+        field: 'state.id',
         columnFilters: [
           {
             language: 'kuery',
diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/synthetics/single_metric_config.ts b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/synthetics/single_metric_config.ts
index 5f74974a81a04..13d509a0919de 100644
--- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/synthetics/single_metric_config.ts
+++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/synthetics/single_metric_config.ts
@@ -16,8 +16,7 @@ import { ConfigProps, SeriesConfig } from '../../types';
 import { FieldLabels, FORMULA_COLUMN, RECORDS_FIELD } from '../constants';
 import { buildExistsFilter } from '../utils';
 
-export const FINAL_SUMMARY_KQL =
-  'summary: * and (summary.final_attempt: true or not summary.final_attempt: *)';
+export const FINAL_SUMMARY_KQL = 'summary.final_attempt: true';
 export function getSyntheticsSingleMetricConfig({ dataView }: ConfigProps): SeriesConfig {
   return {
     defaultSeriesType: 'line',
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.test.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.test.ts
new file mode 100644
index 0000000000000..830e2bce119ce
--- /dev/null
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.test.ts
@@ -0,0 +1,124 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import * as spaceHook from '../../../../../hooks/use_kibana_space';
+import * as paramHook from '../../../hooks/use_url_params';
+import * as redux from 'react-redux';
+import { useMonitorFilters } from './use_monitor_filters';
+import { WrappedHelper } from '../../../utils/testing';
+
+describe('useMonitorFilters', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const spaceSpy = jest.spyOn(spaceHook, 'useKibanaSpace');
+  const paramSpy = jest.spyOn(paramHook, 'useGetUrlParams');
+  const selSPy = jest.spyOn(redux, 'useSelector');
+
+  it('should return an empty array when no parameters are provided', () => {
+    const { result } = renderHook(() => useMonitorFilters({}), { wrapper: WrappedHelper });
+
+    expect(result.current).toEqual([]);
+  });
+
+  it('should return filters for allIds and schedules', () => {
+    spaceSpy.mockReturnValue({} as any);
+    paramSpy.mockReturnValue({ schedules: 'daily' } as any);
+    selSPy.mockReturnValue({ status: { allIds: ['id1', 'id2'] } });
+
+    const { result } = renderHook(() => useMonitorFilters({}), { wrapper: WrappedHelper });
+
+    expect(result.current).toEqual([{ field: 'monitor.id', values: ['id1', 'id2'] }]);
+  });
+
+  it('should return filters for allIds and empty schedules', () => {
+    spaceSpy.mockReturnValue({} as any);
+    paramSpy.mockReturnValue({ schedules: [] } as any);
+    selSPy.mockReturnValue({ status: { allIds: ['id1', 'id2'] } });
+
+    const { result } = renderHook(() => useMonitorFilters({}), { wrapper: WrappedHelper });
+
+    expect(result.current).toEqual([]);
+  });
+
+  it('should return filters for project IDs', () => {
+    spaceSpy.mockReturnValue({ space: null } as any);
+    paramSpy.mockReturnValue({ projects: ['project1', 'project2'] } as any);
+    selSPy.mockReturnValue({ status: { allIds: [] } });
+
+    const { result } = renderHook(() => useMonitorFilters({}), { wrapper: WrappedHelper });
+
+    expect(result.current).toEqual([
+      { field: 'monitor.project.id', values: ['project1', 'project2'] },
+    ]);
+  });
+
+  it('should return filters for tags and locations', () => {
+    spaceSpy.mockReturnValue({ space: null } as any);
+    paramSpy.mockReturnValue({
+      tags: ['tag1', 'tag2'],
+      locations: ['location1', 'location2'],
+    } as any);
+    selSPy.mockReturnValue({ status: { allIds: [] } });
+
+    const { result } = renderHook(() => useMonitorFilters({}), { wrapper: WrappedHelper });
+
+    expect(result.current).toEqual([
+      { field: 'tags', values: ['tag1', 'tag2'] },
+      { field: 'observer.geo.name', values: ['location1', 'location2'] },
+    ]);
+  });
+
+  it('should include space filters for alerts', () => {
+    spaceSpy.mockReturnValue({ space: { id: 'space1' } } as any);
+    paramSpy.mockReturnValue({} as any);
+    selSPy.mockReturnValue({ status: { allIds: [] } });
+
+    const { result } = renderHook(() => useMonitorFilters({ forAlerts: true }), {
+      wrapper: WrappedHelper,
+    });
+
+    expect(result.current).toEqual([{ field: 'kibana.space_ids', values: ['space1'] }]);
+  });
+
+  it('should include space filters for non-alerts', () => {
+    spaceSpy.mockReturnValue({ space: { id: 'space2' } } as any);
+    paramSpy.mockReturnValue({} as any);
+    selSPy.mockReturnValue({ status: { allIds: [] } });
+
+    const { result } = renderHook(() => useMonitorFilters({}), { wrapper: WrappedHelper });
+
+    expect(result.current).toEqual([{ field: 'meta.space_id', values: ['space2'] }]);
+  });
+
+  it('should handle a combination of parameters', () => {
+    spaceSpy.mockReturnValue({ space: { id: 'space3' } } as any);
+    paramSpy.mockReturnValue({
+      schedules: 'daily',
+      projects: ['projectA'],
+      tags: ['tagB'],
+      locations: ['locationC'],
+      monitorTypes: 'http',
+    } as any);
+    selSPy.mockReturnValue({ status: { allIds: ['id3', 'id4'] } });
+
+    const { result } = renderHook(() => useMonitorFilters({ forAlerts: false }), {
+      wrapper: WrappedHelper,
+    });
+
+    expect(result.current).toEqual([
+      { field: 'monitor.id', values: ['id3', 'id4'] },
+      { field: 'monitor.project.id', values: ['projectA'] },
+      { field: 'monitor.type', values: ['http'] },
+      { field: 'tags', values: ['tagB'] },
+      { field: 'observer.geo.name', values: ['locationC'] },
+      { field: 'meta.space_id', values: ['space3'] },
+    ]);
+  });
+});
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts
index 3f549523e373d..ed20d021349c0 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_filters.ts
@@ -7,7 +7,8 @@
 
 import { UrlFilter } from '@kbn/exploratory-view-plugin/public';
 import { useSelector } from 'react-redux';
-import { useGetUrlParams } from '../../../hooks';
+import { isEmpty } from 'lodash';
+import { useGetUrlParams } from '../../../hooks/use_url_params';
 import { useKibanaSpace } from '../../../../../hooks/use_kibana_space';
 import { selectOverviewStatus } from '../../../state/overview_status';
 
@@ -19,7 +20,7 @@ export const useMonitorFilters = ({ forAlerts }: { forAlerts?: boolean }): UrlFi
 
   return [
     // since schedule isn't available in heartbeat data, in that case we rely on monitor.id
-    ...(allIds?.length && schedules ? [{ field: 'monitor.id', values: allIds }] : []),
+    ...(allIds?.length && !isEmpty(schedules) ? [{ field: 'monitor.id', values: allIds }] : []),
     ...(projects?.length ? [{ field: 'monitor.project.id', values: getValues(projects) }] : []),
     ...(monitorTypes?.length ? [{ field: 'monitor.type', values: getValues(monitorTypes) }] : []),
     ...(tags?.length ? [{ field: 'tags', values: getValues(tags) }] : []),
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx
index a88afbaaa88d2..acabd436d83fc 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx
@@ -5,27 +5,14 @@
  * 2.0.
  */
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSkeletonText,
-  EuiPanel,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { i18n } from '@kbn/i18n';
-import { selectOverviewStatus } from '../../../../../state/overview_status';
 import { OverviewErrorsSparklines } from './overview_errors_sparklines';
 import { useRefreshedRange } 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');
 
   return (
@@ -34,18 +21,14 @@ export function OverviewErrors() {
         <h3>{headingText}</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
-      {loading ? (
-        <EuiSkeletonText lines={3} />
-      ) : (
-        <EuiFlexGroup gutterSize="xl">
-          <EuiFlexItem grow={false}>
-            <OverviewErrorsCount from={from} to={to} />
-          </EuiFlexItem>
-          <EuiFlexItem grow={true}>
-            <OverviewErrorsSparklines from={from} to={to} />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      )}
+      <EuiFlexGroup gutterSize="xl">
+        <EuiFlexItem grow={false}>
+          <OverviewErrorsCount from={from} to={to} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={true}>
+          <OverviewErrorsSparklines from={from} to={to} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiPanel>
   );
 }
diff --git a/x-pack/plugins/observability_solution/synthetics/public/hooks/use_kibana_space.tsx b/x-pack/plugins/observability_solution/synthetics/public/hooks/use_kibana_space.tsx
index 6dbc979397b30..0b5291e890ecc 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/hooks/use_kibana_space.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/hooks/use_kibana_space.tsx
@@ -8,7 +8,7 @@ import type { Space } from '@kbn/spaces-plugin/common';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useFetcher } from '@kbn/observability-shared-plugin/public';
 import { DEFAULT_SPACE_ID } from '@kbn/spaces-plugin/common';
-import { ClientPluginsStart } from '../plugin';
+import type { ClientPluginsStart } from '../plugin';
 
 export const useKibanaSpace = () => {
   const { services } = useKibana<ClientPluginsStart>();

From 40631f49b5316944399a7f43aaa112bd2d1de6c6 Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad31comp@gmail.com>
Date: Wed, 20 Nov 2024 18:10:20 +0100
Subject: [PATCH 8/8] update decimals

---
 .../configurations/test_data/test_formula_metric_attribute.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/test_data/test_formula_metric_attribute.ts b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/test_data/test_formula_metric_attribute.ts
index 914ac7174f5e9..a269a7d4c6059 100644
--- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/test_data/test_formula_metric_attribute.ts
+++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/test_data/test_formula_metric_attribute.ts
@@ -50,7 +50,7 @@ export const sampleMetricFormulaAttribute = {
                   format: {
                     id: 'percent',
                     params: {
-                      decimals: 1,
+                      decimals: 3,
                     },
                   },
                   formula: "1- (count(kql='summary.down > 0') / count())",