[Synthetics] Update duration chart legend labels (#145116)

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

@@ -108,7 +108,7 @@ describe('Lens Attribute', () => {
             to: 'now',
           },
           dataView: mockDataView,
-          name: 'ux-series-1',
+          name: 'Page load time',
           breakdown: 'percentile',
           reportDefinitions: {},
           selectedMetricField: 'transaction.duration.us',
@@ -139,7 +139,7 @@ describe('Lens Attribute', () => {
             query: 'transaction.type: page-load and processor.event: transaction',
           },
           isBucketed: false,
-          label: `${rank} percentile of page load time`,
+          label: 'Page load time',
           operationType: 'percentile',
           params: {
             percentile: Number(rank.slice(0, 2)),

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

@@ -331,7 +331,6 @@ export class LensAttributes {
     columnType,
     columnFilter,
     operationType,
-    shortLabel,
   }: {
     sourceField: string;
     columnType?: string;
@@ -339,7 +338,6 @@ export class LensAttributes {
     operationType?: SupportedOperations | 'last_value';
     label?: string;
     seriesConfig: SeriesConfig;
-    shortLabel?: boolean;
   }) {
     if (columnType === 'operation' || operationType) {
       if (
@@ -352,7 +350,6 @@ export class LensAttributes {
           label,
           seriesConfig,
           columnFilter,
-          shortLabel,
         });
       }
       if (operationType === 'last_value') {
@@ -365,7 +362,7 @@ export class LensAttributes {
         });
       }
       if (operationType?.includes('th')) {
-        return this.getPercentileNumberColumn(sourceField, operationType, seriesConfig!);
+        return this.getPercentileNumberColumn(sourceField, operationType, seriesConfig!, label);
       }
     }
     return this.getNumberRangeColumn(sourceField, seriesConfig!, label);
@@ -402,14 +399,12 @@ export class LensAttributes {
     seriesConfig,
     operationType,
     columnFilter,
-    shortLabel,
   }: {
     sourceField: string;
     operationType: SupportedOperations;
     label?: string;
     seriesConfig: SeriesConfig;
     columnFilter?: ColumnFilter;
-    shortLabel?: boolean;
   }):
     | MinIndexPatternColumn
     | MaxIndexPatternColumn
@@ -469,14 +464,17 @@ export class LensAttributes {
   getPercentileNumberColumn(
     sourceField: string,
     percentileValue: string,
-    seriesConfig: SeriesConfig
+    seriesConfig: SeriesConfig,
+    label?: string
   ): PercentileIndexPatternColumn {
     return {
       ...buildNumberColumn(sourceField),
-      label: i18n.translate('xpack.observability.expView.columns.label', {
-        defaultMessage: '{percentileValue} percentile of {sourceField}',
-        values: { sourceField: seriesConfig.labels[sourceField]?.toLowerCase(), percentileValue },
-      }),
+      label:
+        label ??
+        i18n.translate('xpack.observability.expView.columns.label', {
+          defaultMessage: '{percentileValue} percentile of {sourceField}',
+          values: { sourceField: seriesConfig.labels[sourceField]?.toLowerCase(), percentileValue },
+        }),
       operationType: 'percentile',
       params: getPercentileParam(percentileValue),
       customLabel: true,
@@ -552,7 +550,6 @@ export class LensAttributes {
     colIndex,
     layerId,
     metricOption,
-    shortLabel,
   }: {
     sourceField: string;
     metricOption?: MetricOption;
@@ -561,7 +558,6 @@ export class LensAttributes {
     layerId: string;
     layerConfig: LayerConfig;
     colIndex?: number;
-    shortLabel?: boolean;
   }) {
     const { breakdown, seriesConfig } = layerConfig;
     const fieldMetaInfo = this.getFieldMeta(sourceField, layerConfig, metricOption);
@@ -614,7 +610,8 @@ export class LensAttributes {
         ...this.getPercentileNumberColumn(
           fieldName,
           operationType || PERCENTILE_RANKS[0],
-          seriesConfig!
+          seriesConfig!,
+          label || columnLabel
         ),
         filter: colIndex !== undefined ? columnFilters?.[colIndex] : undefined,
       };
@@ -628,7 +625,6 @@ export class LensAttributes {
         operationType,
         label: label || columnLabel,
         seriesConfig: layerConfig.seriesConfig,
-        shortLabel,
       });
     }
     if (operationType === 'unique_count' || fieldType === 'string') {
@@ -745,7 +741,6 @@ export class LensAttributes {
         return this.getColumnBasedOnType({
           layerConfig,
           layerId,
-          shortLabel: true,
           label: item.label,
           sourceField: REPORT_METRIC_FIELD,
           metricOption: item,

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

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { i18n } from '@kbn/i18n';
 import { ClientPluginsStart } from '../../../../../plugin';
 import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
 import { useSelectedLocation } from '../hooks/use_selected_location';
@@ -24,8 +25,6 @@ export const MonitorDurationTrend = (props: MonitorDurationTrendProps) => {
   const monitorId = useMonitorQueryId();
   const selectedLocation = useSelectedLocation();
 
-  const metricsToShow = ['min', 'max', 'median', '25th', '75th'];
-
   if (!selectedLocation) {
     return null;
   }
@@ -34,10 +33,10 @@ export const MonitorDurationTrend = (props: MonitorDurationTrendProps) => {
     <ExploratoryViewEmbeddable
       customHeight="240px"
       reportType="kpi-over-time"
-      attributes={metricsToShow.map((metric) => ({
+      attributes={Object.keys(metricsToShow).map((metric) => ({
         dataType: 'synthetics',
         time: props,
-        name: metric + ' Series',
+        name: metricsToShow[metric],
         selectedMetricField: 'monitor.duration.us',
         reportDefinitions: {
           'monitor.id': [monitorId],
@@ -49,3 +48,31 @@ export const MonitorDurationTrend = (props: MonitorDurationTrendProps) => {
     />
   );
 };
+
+const MIN_LABEL = i18n.translate('xpack.synthetics.durationTrend.min', {
+  defaultMessage: 'Min',
+});
+
+const MAX_LABEL = i18n.translate('xpack.synthetics.durationTrend.max', {
+  defaultMessage: 'Max',
+});
+
+const MEDIAN_LABEL = i18n.translate('xpack.synthetics.durationTrend.median', {
+  defaultMessage: 'Median',
+});
+
+const PERCENTILE_25_LABEL = i18n.translate('xpack.synthetics.durationTrend.percentile25', {
+  defaultMessage: '25th',
+});
+
+const PERCENTILE_75_LABEL = i18n.translate('xpack.synthetics.durationTrend.percentile75', {
+  defaultMessage: '75th',
+});
+
+const metricsToShow: Record<string, string> = {
+  max: MAX_LABEL,
+  '75th': PERCENTILE_75_LABEL,
+  median: MEDIAN_LABEL,
+  '25th': PERCENTILE_25_LABEL,
+  min: MIN_LABEL,
+};