[APM] Add support for very high durations (minutes and hours) (#41640) (#42068)

Author: bartvanremortele

x-pack/legacy/plugins/apm/public/utils/__test__/formatters.test.ts

@@ -22,6 +22,8 @@ describe('formatters', () => {
       expect(asTime(1000 * 1000)).toEqual('1,000 ms');
       expect(asTime(1000 * 1000 * 10)).toEqual('10,000 ms');
       expect(asTime(1000 * 1000 * 20)).toEqual('20.0 s');
+      expect(asTime(60000000 * 10)).toEqual('10.0 min');
+      expect(asTime(3600000000 * 1.5)).toEqual('1.5 h');
     });
 
     it('formats without unit', () => {

x-pack/legacy/plugins/apm/public/utils/formatters.ts

@@ -9,6 +9,8 @@ import { i18n } from '@kbn/i18n';
 import { memoize } from 'lodash';
 import { NOT_AVAILABLE_LABEL } from '../../common/i18n';
 
+const HOURS_CUT_OFF = 3600000000; // 1 hour (in microseconds)
+const MINUTES_CUT_OFF = 60000000; // 1 minute (in microseconds)
 const SECONDS_CUT_OFF = 10 * 1000000; // 10 seconds (in microseconds)
 const MILLISECONDS_CUT_OFF = 10 * 1000; // 10 milliseconds (in microseconds)
 const SPACE = ' ';
@@ -24,6 +26,38 @@ interface FormatterOptions {
   defaultValue?: string;
 }
 
+export function asHours(
+  value: FormatterValue,
+  { withUnit = true, defaultValue = NOT_AVAILABLE_LABEL }: FormatterOptions = {}
+) {
+  if (value == null) {
+    return defaultValue;
+  }
+  const hoursLabel =
+    SPACE +
+    i18n.translate('xpack.apm.formatters.hoursTimeUnitLabel', {
+      defaultMessage: 'h'
+    });
+  const formatted = asDecimal(value / 3600000000);
+  return `${formatted}${withUnit ? hoursLabel : ''}`;
+}
+
+export function asMinutes(
+  value: FormatterValue,
+  { withUnit = true, defaultValue = NOT_AVAILABLE_LABEL }: FormatterOptions = {}
+) {
+  if (value == null) {
+    return defaultValue;
+  }
+  const minutesLabel =
+    SPACE +
+    i18n.translate('xpack.apm.formatters.minutesTimeUnitLabel', {
+      defaultMessage: 'min'
+    });
+  const formatted = asDecimal(value / 60000000);
+  return `${formatted}${withUnit ? minutesLabel : ''}`;
+}
+
 export function asSeconds(
   value: FormatterValue,
   { withUnit = true, defaultValue = NOT_AVAILABLE_LABEL }: FormatterOptions = {}
@@ -81,6 +115,10 @@ type TimeFormatter = (
 export const getTimeFormatter: TimeFormatter = memoize((max: number) => {
   const unit = timeUnit(max);
   switch (unit) {
+    case 'h':
+      return asHours;
+    case 'm':
+      return asMinutes;
     case 's':
       return asSeconds;
     case 'ms':
@@ -91,7 +129,11 @@ export const getTimeFormatter: TimeFormatter = memoize((max: number) => {
 });
 
 export function timeUnit(max: number) {
-  if (max > SECONDS_CUT_OFF) {
+  if (max > HOURS_CUT_OFF) {
+    return 'h';
+  } else if (max > MINUTES_CUT_OFF) {
+    return 'm';
+  } else if (max > SECONDS_CUT_OFF) {
     return 's';
   } else if (max > MILLISECONDS_CUT_OFF) {
     return 'ms';

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

@@ -3784,6 +3784,8 @@
     "xpack.apm.formatters.millisTimeUnitLabel": "ミリ秒",
     "xpack.apm.formatters.requestsPerMinLabel": "1分あたりリクエスト数",
     "xpack.apm.formatters.secondsTimeUnitLabel": "秒",
+    "xpack.apm.formatters.minutesTimeUnitLabel": "分",
+    "xpack.apm.formatters.hoursTimeUnitLabel": "時",
     "xpack.apm.formatters.transactionsPerMinLabel": "1分あたりトランザクション数",
     "xpack.apm.header.badge.readOnly.text": "読み込み専用",
     "xpack.apm.header.badge.readOnly.tooltip": "を保存できませんでした",

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

@@ -3785,6 +3785,8 @@
     "xpack.apm.formatters.millisTimeUnitLabel": "ms",
     "xpack.apm.formatters.requestsPerMinLabel": "rpm",
     "xpack.apm.formatters.secondsTimeUnitLabel": "s",
+    "xpack.apm.formatters.minutesTimeUnitLabel": "m",
+    "xpack.apm.formatters.hoursTimeUnitLabel": "h",
     "xpack.apm.formatters.transactionsPerMinLabel": "tpm",
     "xpack.apm.header.badge.readOnly.text": "只读",
     "xpack.apm.header.badge.readOnly.tooltip": "无法保存",