[ResponseOps] Change the duration/percentile display format to mm:ss (#124647)

* Change the duration/percentile display format to mm:ss

* Addressed comments

* Add time format to tooltip

* Addressed comments, percentiles can show N/A

* Fix flaky test

* remove only

* address comments, now tests for N/A

Co-authored-by: Kibana Machine <[email protected]>

Author: JiaweiWu

x-pack/plugins/triggers_actions_ui/public/application/lib/monitoring_utils.test.ts

@@ -4,17 +4,30 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { getFormattedSuccessRatio, getFormattedRuleExecutionPercentile } from './monitoring_utils';
+import {
+  getFormattedSuccessRatio,
+  getFormattedDuration,
+  getFormattedMilliseconds,
+} from './monitoring_utils';
 
 describe('monitoring_utils', () => {
   it('should return a decimal as a percent', () => {
     expect(getFormattedSuccessRatio(0.66)).toEqual('66%');
     expect(getFormattedSuccessRatio(0.75345345345345)).toEqual('75%');
   });
 
-  it('should return percentiles as an integer', () => {
-    expect(getFormattedRuleExecutionPercentile(0)).toEqual('0ms');
-    expect(getFormattedRuleExecutionPercentile(100.5555)).toEqual('101ms');
-    expect(getFormattedRuleExecutionPercentile(99.1111)).toEqual('99ms');
+  it('should return a formatted duration', () => {
+    expect(getFormattedDuration(0)).toEqual('00:00');
+    expect(getFormattedDuration(100.111)).toEqual('00:00');
+    expect(getFormattedDuration(50000)).toEqual('00:50');
+    expect(getFormattedDuration(500000)).toEqual('08:20');
+    expect(getFormattedDuration(5000000)).toEqual('83:20');
+    expect(getFormattedDuration(50000000)).toEqual('833:20');
+  });
+
+  it('should format a duration as an integer', () => {
+    expect(getFormattedMilliseconds(0)).toEqual('0 ms');
+    expect(getFormattedMilliseconds(100.5555)).toEqual('101 ms');
+    expect(getFormattedMilliseconds(99.1111)).toEqual('99 ms');
   });
 });

x-pack/plugins/triggers_actions_ui/public/application/lib/monitoring_utils.ts

@@ -4,14 +4,25 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import moment from 'moment';
 import numeral from '@elastic/numeral';
 
 export function getFormattedSuccessRatio(successRatio: number) {
   const formatted = numeral(successRatio! * 100).format('0,0');
   return `${formatted}%`;
 }
 
-export function getFormattedRuleExecutionPercentile(percentile: number) {
-  const formatted = numeral(percentile).format('0,0');
-  return `${formatted}ms`;
+export function getFormattedDuration(value: number) {
+  if (!value) {
+    return '00:00';
+  }
+  const duration = moment.duration(value);
+  const minutes = Math.floor(duration.asMinutes()).toString().padStart(2, '0');
+  const seconds = duration.seconds().toString().padStart(2, '0');
+  return `${minutes}:${seconds}`;
+}
+
+export function getFormattedMilliseconds(value: number) {
+  const formatted = numeral(value).format('0,0');
+  return `${formatted} ms`;
 }

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx

@@ -18,6 +18,8 @@ import {
   ALERTS_FEATURE_ID,
   parseDuration,
 } from '../../../../../../alerting/common';
+import { getFormattedDuration, getFormattedMilliseconds } from '../../../lib/monitoring_utils';
+
 import { useKibana } from '../../../../common/lib/kibana';
 jest.mock('../../../../common/lib/kibana');
 
@@ -180,22 +182,22 @@ describe('alerts_list component with items', () => {
           history: [
             {
               success: true,
-              duration: 100,
+              duration: 1000000,
             },
             {
               success: true,
-              duration: 200,
+              duration: 200000,
             },
             {
               success: false,
-              duration: 300,
+              duration: 300000,
             },
           ],
           calculated_metrics: {
             success_ratio: 0.66,
-            p50: 200,
-            p95: 300,
-            p99: 300,
+            p50: 200000,
+            p95: 300000,
+            p99: 300000,
           },
         },
       },
@@ -227,18 +229,18 @@ describe('alerts_list component with items', () => {
           history: [
             {
               success: true,
-              duration: 100,
+              duration: 100000,
             },
             {
               success: true,
-              duration: 500,
+              duration: 500000,
             },
           ],
           calculated_metrics: {
             success_ratio: 1,
             p50: 0,
-            p95: 100,
-            p99: 500,
+            p95: 100000,
+            p99: 500000,
           },
         },
       },
@@ -458,7 +460,7 @@ describe('alerts_list component with items', () => {
 
     wrapper.update();
     expect(wrapper.find('.euiToolTipPopover').text()).toBe(
-      'The length of time it took for the rule to run.'
+      'The length of time it took for the rule to run (mm:ss).'
     );
 
     // Status column
@@ -508,14 +510,24 @@ describe('alerts_list component with items', () => {
     ).toBeTruthy();
 
     let percentiles = wrapper.find(
-      `EuiTableRowCell[data-test-subj="alertsTableCell-ruleExecutionPercentile"] span[data-test-subj="${Percentiles.P50}Percentile"]`
+      `EuiTableRowCell[data-test-subj="alertsTableCell-ruleExecutionPercentile"] span[data-test-subj="rule-duration-format-value"]`
     );
 
     mockedAlertsData.forEach((rule, index) => {
       if (typeof rule.monitoring?.execution.calculated_metrics.p50 === 'number') {
+        // Ensure the table cells are getting the correct values
         expect(percentiles.at(index).text()).toEqual(
-          `${rule.monitoring.execution.calculated_metrics.p50}ms`
+          getFormattedDuration(rule.monitoring.execution.calculated_metrics.p50)
         );
+        // Ensure the tooltip is showing the correct content
+        expect(
+          wrapper
+            .find(
+              'EuiTableRowCell[data-test-subj="alertsTableCell-ruleExecutionPercentile"] [data-test-subj="rule-duration-format-tooltip"]'
+            )
+            .at(index)
+            .props().content
+        ).toEqual(getFormattedMilliseconds(rule.monitoring.execution.calculated_metrics.p50));
       } else {
         expect(percentiles.at(index).text()).toEqual('N/A');
       }
@@ -581,13 +593,13 @@ describe('alerts_list component with items', () => {
     ).toBeTruthy();
 
     percentiles = wrapper.find(
-      `EuiTableRowCell[data-test-subj="alertsTableCell-ruleExecutionPercentile"] span[data-test-subj="${Percentiles.P95}Percentile"]`
+      `EuiTableRowCell[data-test-subj="alertsTableCell-ruleExecutionPercentile"] span[data-test-subj="rule-duration-format-value"]`
     );
 
     mockedAlertsData.forEach((rule, index) => {
       if (typeof rule.monitoring?.execution.calculated_metrics.p95 === 'number') {
         expect(percentiles.at(index).text()).toEqual(
-          `${rule.monitoring.execution.calculated_metrics.p95}ms`
+          getFormattedDuration(rule.monitoring.execution.calculated_metrics.p95)
         );
       } else {
         expect(percentiles.at(index).text()).toEqual('N/A');

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx

@@ -86,14 +86,9 @@ import { ManageLicenseModal } from './manage_license_modal';
 import { checkAlertTypeEnabled } from '../../../lib/check_alert_type_enabled';
 import { RuleEnabledSwitch } from './rule_enabled_switch';
 import { PercentileSelectablePopover } from './percentile_selectable_popover';
-import {
-  formatMillisForDisplay,
-  shouldShowDurationWarning,
-} from '../../../lib/execution_duration_utils';
-import {
-  getFormattedSuccessRatio,
-  getFormattedRuleExecutionPercentile,
-} from '../../../lib/monitoring_utils';
+import { RuleDurationFormat } from './rule_duration_format';
+import { shouldShowDurationWarning } from '../../../lib/execution_duration_utils';
+import { getFormattedSuccessRatio } from '../../../lib/monitoring_utils';
 
 const ENTER_KEY = 13;
 
@@ -396,7 +391,7 @@ export const AlertsList: React.FunctionComponent = () => {
           content={i18n.translate(
             'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.ruleExecutionPercentileTooltip',
             {
-              defaultMessage: `{percentileOrdinal} percentile of this rule's past {sampleLimit} execution durations`,
+              defaultMessage: `{percentileOrdinal} percentile of this rule's past {sampleLimit} execution durations (mm:ss).`,
               values: {
                 percentileOrdinal: percentileOrdinals[selectedPercentile!],
                 sampleLimit: MONITORING_HISTORY_LIMIT,
@@ -420,7 +415,7 @@ export const AlertsList: React.FunctionComponent = () => {
   const renderPercentileCellValue = (value: number) => {
     return (
       <span data-test-subj={`${selectedPercentile}Percentile`}>
-        {typeof value === 'number' ? getFormattedRuleExecutionPercentile(value) : 'N/A'}
+        <RuleDurationFormat allowZero={false} duration={value} />
       </span>
     );
   };
@@ -630,7 +625,7 @@ export const AlertsList: React.FunctionComponent = () => {
             content={i18n.translate(
               'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.durationTitle',
               {
-                defaultMessage: 'The length of time it took for the rule to run.',
+                defaultMessage: 'The length of time it took for the rule to run (mm:ss).',
               }
             )}
           >
@@ -651,7 +646,7 @@ export const AlertsList: React.FunctionComponent = () => {
 
           return (
             <>
-              {`${formatMillisForDisplay(value)}`}
+              {<RuleDurationFormat duration={value} />}
               {showDurationWarning && (
                 <EuiIconTip
                   data-test-subj="ruleDurationWarning"
@@ -671,6 +666,7 @@ export const AlertsList: React.FunctionComponent = () => {
           );
         },
       },
+      getPercentileColumn(),
       {
         field: 'monitoring.execution.calculated_metrics.success_ratio',
         width: '12%',
@@ -680,7 +676,7 @@ export const AlertsList: React.FunctionComponent = () => {
             content={i18n.translate(
               'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.successRatioTitle',
               {
-                defaultMessage: 'How often this rule executes successfully',
+                defaultMessage: 'How often this rule executes successfully.',
               }
             )}
           >
@@ -701,7 +697,6 @@ export const AlertsList: React.FunctionComponent = () => {
           );
         },
       },
-      getPercentileColumn(),
       {
         field: 'executionStatus.status',
         name: i18n.translate(

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/rule_duration_format.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 React, { memo, useMemo } from 'react';
+import { EuiToolTip } from '@elastic/eui';
+import { getFormattedDuration, getFormattedMilliseconds } from '../../../lib/monitoring_utils';
+
+interface Props {
+  duration: number;
+  allowZero?: boolean;
+}
+
+export const RuleDurationFormat = memo((props: Props) => {
+  const { duration, allowZero = true } = props;
+
+  const formattedDuration = useMemo(() => {
+    if (allowZero || typeof duration === 'number') {
+      return getFormattedDuration(duration);
+    }
+    return 'N/A';
+  }, [duration, allowZero]);
+
+  const formattedTooltip = useMemo(() => {
+    if (allowZero || typeof duration === 'number') {
+      return getFormattedMilliseconds(duration);
+    }
+    return 'N/A';
+  }, [duration, allowZero]);
+
+  return (
+    <EuiToolTip data-test-subj="rule-duration-format-tooltip" content={formattedTooltip}>
+      <span data-test-subj="rule-duration-format-value">{formattedDuration}</span>
+    </EuiToolTip>
+  );
+});

x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alert_create_flyout.ts

@@ -168,7 +168,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         tags: '',
         interval: '1 min',
       });
-      expect(searchResultAfterSave.duration).to.match(/\d{2}:\d{2}:\d{2}.\d{3}/);
+      expect(searchResultAfterSave.duration).to.match(/\d{2,}:\d{2}/);
 
       // clean up created alert
       const alertsToDelete = await getAlertsByName(alertName);