[Uptime] Updated duration chart units and formatting (#91420) (#92173)

Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>

x-pack/plugins/translations/translations/ja-JP.json

@@ -21827,7 +21827,6 @@
  "xpack.uptime.ml.enableAnomalyDetectionPanel.manageMLJobDescription.noteText": "注：ジョブが結果の計算を開始するまでに少し時間がかかる場合があります。",
  "xpack.uptime.ml.enableAnomalyDetectionPanel.startTrial": "無料の 14 日トライアルを開始",
  "xpack.uptime.ml.enableAnomalyDetectionPanel.startTrialDesc": "期間異常検知機能を利用するには、Elastic Platinum ライセンスが必要です。",
- "xpack.uptime.monitorCharts.durationChart.leftAxis.title": "期間（ミリ秒）",
  "xpack.uptime.monitorCharts.monitorDuration.titleLabel": "監視期間",
  "xpack.uptime.monitorCharts.monitorDuration.titleLabelWithAnomaly": "監視期間 (異常: {noOfAnomalies})",
  "xpack.uptime.monitorDetails.ml.confirmAlertDeleteMessage": "異常のアラートを削除しますか?",

x-pack/plugins/translations/translations/zh-CN.json

@@ -21877,7 +21877,6 @@
  "xpack.uptime.ml.enableAnomalyDetectionPanel.manageMLJobDescription.noteText": "注意：可能要过几分钟后，作业才会开始计算结果。",
  "xpack.uptime.ml.enableAnomalyDetectionPanel.startTrial": "开始为期 14 天的免费试用",
  "xpack.uptime.ml.enableAnomalyDetectionPanel.startTrialDesc": "要访问持续时间异常检测，必须订阅 Elastic 白金级许可证。",
- "xpack.uptime.monitorCharts.durationChart.leftAxis.title": "持续时间（毫秒）",
  "xpack.uptime.monitorCharts.monitorDuration.titleLabel": "监测持续时间",
  "xpack.uptime.monitorCharts.monitorDuration.titleLabelWithAnomaly": "监测持续时间（异常：{noOfAnomalies}）",
  "xpack.uptime.monitorDetails.ml.confirmAlertDeleteMessage": "确定要删除异常告警？",

x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx

@@ -18,6 +18,7 @@ import {
  BrushEndListener,
  LegendItemListener,
 } from '@elastic/charts';
+import { useSelector } from 'react-redux';
 import { getChartDateLabel } from '../../../lib/helper';
 import { LocationDurationLine } from '../../../../common/types';
 import { DurationLineSeriesList } from './duration_line_series_list';
@@ -29,6 +30,9 @@ import { DurationAnomaliesBar } from './duration_line_bar_list';
 import { AnomalyRecords } from '../../../state/actions';
 import { UptimeThemeContext } from '../../../contexts';
 import { MONITOR_CHART_HEIGHT } from '../../monitor';
+import { monitorStatusSelector } from '../../../state/selectors';
+import { microToMilli, microToSec } from '../../../lib/formatting';
+import { MS_LABEL, SECONDS_LABEL } from '../translations';
 
 interface DurationChartProps {
  /**
@@ -87,6 +91,8 @@ export const DurationChartComponent = ({
  }
  };
 
+ const monitor = useSelector(monitorStatusSelector);
+
  return (
  <ChartWrapper height={MONITOR_CHART_HEIGHT} loading={loading}>
  {hasLines ? (
@@ -112,10 +118,17 @@ export const DurationChartComponent = ({
  position={Position.Left}
  tickFormat={(d) => getTickFormat(d)}
  title={i18n.translate('xpack.uptime.monitorCharts.durationChart.leftAxis.title', {
- defaultMessage: 'Duration in ms',
+ defaultMessage: 'Duration in {unit}',
+ values: { unit: monitor?.monitor.type === 'browser' ? SECONDS_LABEL : MS_LABEL },
  })}
+ labelFormat={(d) =>
+ monitor?.monitor.type === 'browser' ? `${microToSec(d)}` : `${microToMilli(d)}`
+ }
+ />
+ <DurationLineSeriesList
+ lines={locationDurationLines}
+ monitorType={monitor?.monitor.type!}
  />
- <DurationLineSeriesList lines={locationDurationLines} />
  <DurationAnomaliesBar anomalies={anomalies} hiddenLegends={hiddenLegends} />
  </Chart>
  ) : (

x-pack/plugins/uptime/public/components/common/charts/duration_line_series_list.tsx

@@ -8,19 +8,21 @@
 import React from 'react';
 import { LineSeries, CurveType, Fit } from '@elastic/charts';
 import { LocationDurationLine } from '../../../../common/types';
-import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../../lib/helper';
+import { microToMilli, microToSec } from '../../../lib/formatting';
+import { MS_LABEL, SEC_LABEL } from '../translations';
 
 interface Props {
+ monitorType: string;
  lines: LocationDurationLine[];
 }
 
-export const DurationLineSeriesList = ({ lines }: Props) => (
+export const DurationLineSeriesList = ({ monitorType, lines }: Props) => (
  <>
  {lines.map(({ name, line }) => (
  <LineSeries
  curve={CurveType.CURVE_MONOTONE_X}
  // this id is used for the line chart representing the average duration length
- data={line.map(({ x, y }) => [x, microsToMillis(y || null)])}
+ data={line.map(({ x, y }) => [x, y || null])}
  id={`loc-avg-${name}`}
  key={`loc-line-${name}`}
  name={name}
@@ -30,6 +32,11 @@ export const DurationLineSeriesList = ({ lines }: Props) => (
  yScaleToDataExtent={false}
  yScaleType="linear"
  fit={Fit.Linear}
+ tickFormat={(d) =>
+ monitorType === 'browser'
+ ? `${microToSec(d)} ${SEC_LABEL}`
+ : `${microToMilli(d)} ${MS_LABEL}`
+ }
  />
  ))}
  </>

x-pack/plugins/uptime/public/components/common/translations.ts

@@ -36,3 +36,15 @@ export const STATUS_FAILED_LABEL = i18n.translate(
  defaultMessage: 'Failed',
  }
 );
+
+export const SECONDS_LABEL = i18n.translate('xpack.uptime.seconds.label', {
+ defaultMessage: 'seconds',
+});
+
+export const SEC_LABEL = i18n.translate('xpack.uptime.seconds.shortForm.label', {
+ defaultMessage: 'sec',
+});
+
+export const MS_LABEL = i18n.translate('xpack.uptime.millisecond.abbreviation.label', {
+ defaultMessage: 'ms',
+});

x-pack/plugins/uptime/public/lib/formatting.ts

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+// one second = 1 million micros
+const ONE_SECOND_AS_MICROS = 1000000;
+const ONE_SECOND_AS_MILLI = 1000;
+const ONE_MILLI_AS_MICRO = 1000;
+
+export function milliToSec(ms: number) {
+ return ms / ONE_SECOND_AS_MILLI;
+}
+
+export function microToSec(micro: number) {
+ return (micro / ONE_SECOND_AS_MICROS).toFixed(0);
+}
+
+export function microToMilli(micro: number) {
+ return (micro / ONE_MILLI_AS_MICRO).toFixed(0);
+}

x-pack/plugins/uptime/server/lib/requests/get_monitor_duration.ts

@@ -7,7 +7,7 @@
 
 import { UMElasticsearchQueryFn } from '../adapters';
 import { LocationDurationLine, MonitorDurationResult } from '../../../common/types';
-import { QUERY } from '../../../common/constants';
+import { QUERY, UNNAMED_LOCATION } from '../../../common/constants';
 
 export interface GetMonitorChartsParams {
  /** @member monitorId ID value for the selected monitor */
@@ -46,7 +46,7 @@ export const getMonitorDurationChart: UMElasticsearchQueryFn<
  location: {
  terms: {
  field: 'observer.geo.name',
- missing: 'N/A',
+ missing: UNNAMED_LOCATION,
  },
  aggs: {
  duration: { stats: { field: 'monitor.duration.us' } },