[Synthetics] Errors page added failed test count (elastic#143633)

x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes/single_metric_attributes.ts

@@ -15,7 +15,7 @@ import {
 import type { DataView } from '@kbn/data-views-plugin/common';
 
 import { Query } from '@kbn/es-query';
-import { FORMULA_COLUMN } from '../constants';
+import { FORMULA_COLUMN, RECORDS_FIELD } from '../constants';
 import { ColumnFilter, MetricOption } from '../../types';
 import { SeriesConfig } from '../../../../..';
 import {
@@ -105,7 +105,7 @@ export class SingleMetricLensAttributes extends LensAttributes {
             [this.columnId]: {
               ...buildNumberColumn(sourceField),
               label: columnLabel ?? '',
-              operationType: sourceField === 'Records' ? 'count' : operationType || 'median',
+              operationType: sourceField === RECORDS_FIELD ? 'count' : operationType || 'median',
               filter: columnFilter,
             },
           },

x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/synthetics/single_metric_config.ts

@@ -6,12 +6,14 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { LegacyMetricState } from '@kbn/lens-plugin/common';
+import { euiPaletteForStatus } from '@elastic/eui';
 import {
   SYNTHETICS_STEP_DURATION,
   SYNTHETICS_STEP_NAME,
 } from '../constants/field_names/synthetics';
 import { ConfigProps, SeriesConfig } from '../../types';
-import { FieldLabels, FORMULA_COLUMN } from '../constants';
+import { FieldLabels, FORMULA_COLUMN, RECORDS_FIELD } from '../constants';
 import { buildExistsFilter } from '../utils';
 
 export function getSyntheticsSingleMetricConfig({ dataView }: ConfigProps): SeriesConfig {
@@ -93,35 +95,54 @@ export function getSyntheticsSingleMetricConfig({ dataView }: ConfigProps): Seri
       },
       {
         id: 'monitor_errors',
-        field: 'state.id',
         label: i18n.translate('xpack.observability.expView.errors', {
           defaultMessage: 'Errors',
         }),
         metricStateOptions: {
           titlePosition: 'bottom',
           colorMode: 'Labels',
-          palette: {
-            name: 'custom',
-            type: 'palette',
-            params: {
-              steps: 3,
-              name: 'custom',
-              reverse: false,
-              rangeType: 'number',
-              rangeMin: 0,
-              progression: 'fixed',
-              stops: [{ color: '#E7664C', stop: 100 }],
-              colorStops: [{ color: '#E7664C', stop: 0 }],
-              continuity: 'above',
-              maxSteps: 5,
-            },
-          },
+          palette: getColorPalette('danger'),
         },
         columnType: FORMULA_COLUMN,
         formula: 'unique_count(state.id, kql=\'monitor.status: "down"\')',
         format: 'number',
       },
+      {
+        id: 'monitor_failed_tests',
+        label: i18n.translate('xpack.observability.expView.failedTests', {
+          defaultMessage: 'Failed tests',
+        }),
+        metricStateOptions: {
+          titlePosition: 'bottom',
+        },
+        field: RECORDS_FIELD,
+        format: 'number',
+        columnFilter: { language: 'kuery', query: 'summary.down > 0' },
+      },
     ],
     labels: FieldLabels,
   };
 }
+
+const getColorPalette = (color: 'danger' | 'warning' | 'success'): LegacyMetricState['palette'] => {
+  const statusPalette = euiPaletteForStatus(5);
+
+  // TODO: add more colors
+
+  return {
+    name: 'custom',
+    type: 'palette',
+    params: {
+      steps: 3,
+      name: 'custom',
+      reverse: false,
+      rangeType: 'number',
+      rangeMin: 0,
+      progression: 'fixed',
+      stops: [{ color: statusPalette[3], stop: 100 }],
+      colorStops: [{ color: statusPalette[3], stop: 0 }],
+      continuity: 'above',
+      maxSteps: 5,
+    },
+  };
+};

x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts

@@ -23,6 +23,7 @@ import {
   FieldFormatParams as BaseFieldFormatParams,
   SerializedFieldFormat,
 } from '@kbn/field-formats-plugin/common';
+import { TermsIndexPatternColumn } from '@kbn/lens-plugin/public';
 import { FORMULA_COLUMN } from './configurations/constants';
 
 export const ReportViewTypes = {
@@ -167,3 +168,7 @@ export interface BuilderItem {
 }
 
 export type SupportedOperations = 'average' | 'median' | 'sum' | 'unique_count' | 'min' | 'max';
+
+type TermColumnParams = TermsIndexPatternColumn['params'];
+
+export type TermColumnParamsOrderBy = TermColumnParams['orderBy'];

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_count.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 { useKibana } from '@kbn/kibana-react-plugin/public';
+import React from 'react';
+import { ClientPluginsStart } from '../../../../../plugin';
+import { KpiWrapper } from '../monitor_summary/kpi_wrapper';
+import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
+
+export const FailedTestsCount = (time: { to: string; from: string }) => {
+  const { observability } = useKibana<ClientPluginsStart>().services;
+
+  const { ExploratoryViewEmbeddable } = observability;
+
+  const monitorId = useMonitorQueryId();
+
+  return (
+    <KpiWrapper>
+      <ExploratoryViewEmbeddable
+        reportType="single-metric"
+        attributes={[
+          {
+            time,
+            reportDefinitions: {
+              'monitor.id': [monitorId],
+            },
+            dataType: 'synthetics',
+            selectedMetricField: 'monitor_failed_tests',
+            name: 'synthetics-series-1',
+          },
+        ]}
+      />
+    </KpiWrapper>
+  );
+};

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/monitor_errors.tsx

@@ -14,6 +14,7 @@ import {
 } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { FailedTestsCount } from './failed_tests_count';
 import { useGetUrlParams } from '../../../hooks';
 import { SyntheticsDatePicker } from '../../common/date_picker/synthetics_date_picker';
 import { MonitorErrorsCount } from '../monitor_summary/monitor_errors_count';
@@ -34,7 +35,14 @@ export const MonitorErrors = () => {
             <EuiTitle size="xs">
               <h3 css={{ margin: euiTheme.size.s, marginBottom: 0 }}>{OVERVIEW_LABEL}</h3>
             </EuiTitle>
-            <MonitorErrorsCount to={dateRangeEnd} from={dateRangeStart} />
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <MonitorErrorsCount to={dateRangeEnd} from={dateRangeStart} />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <FailedTestsCount to={dateRangeEnd} from={dateRangeStart} />
+              </EuiFlexItem>
+            </EuiFlexGroup>
           </EuiPanel>
         </EuiFlexItem>
         <EuiFlexItem grow={3}>

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_errors_count.tsx

@@ -8,9 +8,9 @@
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import React from 'react';
 import { ReportTypes } from '@kbn/observability-plugin/public';
-import { useParams } from 'react-router-dom';
 import { KpiWrapper } from './kpi_wrapper';
 import { ClientPluginsStart } from '../../../../../plugin';
+import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
 
 interface MonitorErrorsCountProps {
   from: string;
@@ -22,7 +22,7 @@ export const MonitorErrorsCount = (props: MonitorErrorsCountProps) => {
 
   const { ExploratoryViewEmbeddable } = observability;
 
-  const { monitorId } = useParams<{ monitorId: string }>();
+  const monitorId = useMonitorQueryId();
 
   return (
     <KpiWrapper>
@@ -34,7 +34,7 @@ export const MonitorErrorsCount = (props: MonitorErrorsCountProps) => {
             time: props,
             reportDefinitions: { config_id: [monitorId] },
             dataType: 'synthetics',
-            selectedMetricField: 'state.id',
+            selectedMetricField: 'monitor_errors',
             name: 'synthetics-series-1',
           },
         ]}