[Synthetics] Summary page duration trends (#135809)

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

@@ -166,6 +166,7 @@ export const PERCENTILE_RANKS = [
   '90th' as OperationType,
   '75th' as OperationType,
   '50th' as OperationType,
+  '25th' as OperationType,
 ];
 export const LABEL_FIELDS_FILTER = 'LABEL_FIELDS_FILTER';
 export const LABEL_FIELDS_BREAKDOWN = 'LABEL_FIELDS_BREAKDOWN';

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

@@ -31,6 +31,8 @@ import {
   XYState,
   FormulaPublicApi,
   YAxisMode,
+  MinIndexPatternColumn,
+  MaxIndexPatternColumn,
 } from '@kbn/lens-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import { PersistableFilter } from '@kbn/lens-plugin/common';
@@ -51,6 +53,7 @@ import {
   MetricOption,
   ParamFilter,
   SeriesConfig,
+  SupportedOperations,
   UrlFilter,
   URLReportDefinition,
 } from '../types';
@@ -287,20 +290,18 @@ export class LensAttributes {
     sourceField: string;
     columnType?: string;
     columnFilter?: ColumnFilter;
-    operationType?: string;
+    operationType?: SupportedOperations | 'last_value';
     label?: string;
     seriesConfig: SeriesConfig;
   }) {
     if (columnType === 'operation' || operationType) {
       if (
-        operationType === 'median' ||
-        operationType === 'average' ||
-        operationType === 'sum' ||
-        operationType === 'unique_count'
+        operationType &&
+        ['median', 'average', 'sum', 'min', 'max', 'unique_count'].includes(operationType)
       ) {
         return this.getNumberOperationColumn({
           sourceField,
-          operationType,
+          operationType: operationType as SupportedOperations,
           label,
           seriesConfig,
           columnFilter,
@@ -361,11 +362,13 @@ export class LensAttributes {
     columnFilter,
   }: {
     sourceField: string;
-    operationType: 'average' | 'median' | 'sum' | 'unique_count';
+    operationType: SupportedOperations;
     label?: string;
     seriesConfig: SeriesConfig;
     columnFilter?: ColumnFilter;
   }):
+    | MinIndexPatternColumn
+    | MaxIndexPatternColumn
     | AvgIndexPatternColumn
     | MedianIndexPatternColumn
     | SumIndexPatternColumn
@@ -398,7 +401,7 @@ export class LensAttributes {
       lensColumns[`y-axis-column-${i}`] = {
         ...this.getColumnBasedOnType({
           sourceField: mainSourceField!,
-          operationType: PERCENTILE_RANKS[i],
+          operationType: PERCENTILE_RANKS[i] as SupportedOperations,
           label: mainLabel,
           layerConfig,
           layerId,
@@ -499,7 +502,7 @@ export class LensAttributes {
     layerId,
   }: {
     sourceField: string;
-    operationType?: OperationType;
+    operationType?: SupportedOperations;
     label?: string;
     layerId: string;
     layerConfig: LayerConfig;
@@ -637,7 +640,9 @@ export class LensAttributes {
       label,
       layerConfig,
       colIndex: 0,
-      operationType: breakdown === PERCENTILE ? PERCENTILE_RANKS[0] : operationType,
+      operationType: (breakdown === PERCENTILE
+        ? PERCENTILE_RANKS[0]
+        : operationType) as SupportedOperations,
       layerId,
     });
   }
@@ -677,7 +682,7 @@ export class LensAttributes {
 
       lensColumns[`y-axis-column-${i}`] = this.getColumnBasedOnType({
         sourceField: sourceField!,
-        operationType,
+        operationType: operationType as SupportedOperations,
         label,
         layerConfig,
         colIndex: i,

x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/operation_type_select.tsx

@@ -46,6 +46,18 @@ export function OperationTypeComponent({
   onChange: (value: OperationType) => void;
 }) {
   const options = [
+    {
+      value: 'min' as OperationType,
+      inputDisplay: i18n.translate('xpack.observability.expView.operationType.min', {
+        defaultMessage: 'Min',
+      }),
+    },
+    {
+      value: 'max' as OperationType,
+      inputDisplay: i18n.translate('xpack.observability.expView.operationType.max', {
+        defaultMessage: 'Max',
+      }),
+    },
     {
       value: 'average' as OperationType,
       inputDisplay: i18n.translate('xpack.observability.expView.operationType.average', {

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

@@ -161,3 +161,5 @@ export interface BuilderItem {
   series: SeriesUrl;
   seriesConfig?: SeriesConfig;
 }
+
+export type SupportedOperations = 'average' | 'median' | 'sum' | 'unique_count' | 'min' | 'max';

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

@@ -19,7 +19,7 @@ export const MonitorSummaryTitle = () => {
   const { monitorId } = useParams<{ monitorId: string }>();
 
   useEffect(() => {
-    dispatch(getMonitorStatusAction.get({ monitorId, dateStart: 'now-15m', dateEnd: 'now' }));
+    dispatch(getMonitorStatusAction.get({ monitorId, dateStart: 'now-30d', dateEnd: 'now' }));
   }, [dispatch, monitorId]);
 
   return (

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_summary/tabs_content/duration_trend.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 React from 'react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useParams } from 'react-router-dom';
+import { ClientPluginsStart } from '../../../../../plugin';
+
+export const MonitorDurationTrend = () => {
+  const { observability } = useKibana<ClientPluginsStart>().services;
+
+  const { ExploratoryViewEmbeddable } = observability;
+
+  const { monitorId } = useParams<{ monitorId: string }>();
+
+  const metricsToShow = ['min', 'max', 'median', '25th', '75th'];
+
+  return (
+    <ExploratoryViewEmbeddable
+      customHeight={'300px'}
+      reportType="kpi-over-time"
+      attributes={metricsToShow.map((metric) => ({
+        dataType: 'synthetics',
+        time: {
+          from: 'now-30d/d',
+          to: 'now',
+        },
+        name: metric + ' Series',
+        selectedMetricField: 'monitor.duration.us',
+        reportDefinitions: {
+          'monitor.id': [monitorId],
+        },
+        seriesType: 'line',
+        operationType: metric,
+      }))}
+    />
+  );
+};

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_summary/tabs_content/summary_tab_content.tsx

@@ -6,9 +6,10 @@
  */
 
 import React from 'react';
-import { EuiTitle, EuiPanel, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiTitle, EuiPanel, EuiFlexGroup, EuiFlexItem, EuiText, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import { MonitorDurationTrend } from './duration_trend';
 import { StepDurationPanel } from './step_duration_panel';
 import { MonitorDetailsPanel } from './monitor_details_panel';
 
@@ -25,7 +26,25 @@ export const SummaryTabContent = () => {
           </EuiPanel>
         </EuiFlexItem>
         <EuiFlexItem grow={2}>
-          <EuiPanel />
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiPanel>
+                <EuiFlexGroup alignItems="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiTitle size="s">
+                      <h3>{DURATION_TREND_LABEL}</h3>
+                    </EuiTitle>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiText color="subdued" size="s">
+                      {LAST_30_DAYS_LABEL}
+                    </EuiText>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+                <MonitorDurationTrend />
+              </EuiPanel>
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="s" />
@@ -46,3 +65,11 @@ export const SummaryTabContent = () => {
 const MONITOR_DETAILS_LABEL = i18n.translate('xpack.synthetics.detailsPanel.monitorDetails', {
   defaultMessage: 'Monitor details',
 });
+
+const DURATION_TREND_LABEL = i18n.translate('xpack.synthetics.detailsPanel.durationTrends', {
+  defaultMessage: 'Duration trends',
+});
+
+const LAST_30_DAYS_LABEL = i18n.translate('xpack.synthetics.detailsPanel.last30Days', {
+  defaultMessage: 'Last 30 days',
+});