Improve duration formatting

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/__snapshots__/ResultItemTitle.test.js.snap

@@ -29,7 +29,7 @@ exports[`ResultItemTitle renders as expected 1`] = `
     <span
       className="ub-right ub-relative"
     >
-      0.15ms
+      150μs
     </span>
     <h3
       className="ResultItemTitle--title"

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/__snapshots__/TraceHeader.test.js.snap

@@ -24,7 +24,7 @@ exports[`TraceHeader Attrs Attrs renders as expected when missing props 1`] = `
       Duration: 
     </span>
     <strong>
-      0ms
+      0μs
     </strong>
   </li>
   <li
@@ -67,7 +67,7 @@ exports[`TraceHeader Attrs renders as expected when provided props 1`] = `
       Duration: 
     </span>
     <strong>
-      0.7ms
+      700μs
     </strong>
   </li>
   <li

packages/jaeger-ui/src/utils/date.test.js

@@ -0,0 +1,61 @@
+// Copyright (c) 2020 The Jaeger Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { formatDuration, ONE_MILLISECOND, ONE_SECOND, ONE_MINUTE, ONE_HOUR, ONE_DAY } from './date.tsx';
+
+describe('formatDuration', () => {
+  it('keeps microseconds the same', () => {
+    expect(formatDuration(1)).toBe('1μs');
+  });
+
+  it('displays a maximum of 2 units and rounds the last one', () => {
+    const input = 10 * ONE_DAY + 13 * ONE_HOUR + 30 * ONE_MINUTE;
+    expect(formatDuration(input)).toBe('10d 14h');
+  });
+
+  it('skips units that are empty', () => {
+    const input = 2 * ONE_DAY + 5 * ONE_MINUTE;
+    expect(formatDuration(input)).toBe('2d');
+  });
+
+  it('displays milliseconds in decimals', () => {
+    const input = 2 * ONE_MILLISECOND + 357;
+    expect(formatDuration(input)).toBe('2.36ms');
+  });
+
+  it('displays seconds in decimals', () => {
+    const input = 2 * ONE_SECOND + 357 * ONE_MILLISECOND;
+    expect(formatDuration(input)).toBe('2.36s');
+  });
+
+  it('displays minutes in split units', () => {
+    const input = 2 * ONE_MINUTE + 30 * ONE_SECOND + 555 * ONE_MILLISECOND;
+    expect(formatDuration(input)).toBe('2m 31s');
+  });
+
+  it('displays hours in split units', () => {
+    const input = 2 * ONE_HOUR + 30 * ONE_MINUTE + 30 * ONE_SECOND;
+    expect(formatDuration(input)).toBe('2h 31m');
+  });
+
+  it('displays times less than a μs', () => {
+    const input = 0.1;
+    expect(formatDuration(input)).toBe('0.1μs');
+  });
+
+  it('displays times of 0', () => {
+    const input = 0;
+    expect(formatDuration(input)).toBe('0μs');
+  });
+});

packages/jaeger-ui/src/utils/date.tsx

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import moment from 'moment';
+import _dropWhile from 'lodash/dropWhile';
 import _round from 'lodash/round';
 
 import { toFloatPrecision } from './number';
@@ -25,8 +26,20 @@ export const STANDARD_TIME_FORMAT = 'HH:mm';
 export const STANDARD_DATETIME_FORMAT = 'MMMM D YYYY, HH:mm:ss.SSS';
 export const ONE_MILLISECOND = 1000;
 export const ONE_SECOND = 1000 * ONE_MILLISECOND;
+export const ONE_MINUTE = 60 * ONE_SECOND;
+export const ONE_HOUR = 60 * ONE_MINUTE;
+export const ONE_DAY = 24 * ONE_HOUR;
 export const DEFAULT_MS_PRECISION = Math.log10(ONE_MILLISECOND);
 
+const UNIT_STEPS: { unit: string; microseconds: number; ofPrevious: number }[] = [
+  { unit: 'd', microseconds: ONE_DAY, ofPrevious: 24 },
+  { unit: 'h', microseconds: ONE_HOUR, ofPrevious: 60 },
+  { unit: 'm', microseconds: ONE_MINUTE, ofPrevious: 60 },
+  { unit: 's', microseconds: ONE_SECOND, ofPrevious: 1000 },
+  { unit: 'ms', microseconds: ONE_MILLISECOND, ofPrevious: 1000 },
+  { unit: 'μs', microseconds: 1, ofPrevious: 1000 },
+];
+
 /**
  * @param {number} timestamp
  * @param {number} initialTimestamp
@@ -83,23 +96,33 @@ export function formatSecondTime(duration: number) {
 }
 
 /**
- * Humanizes the duration based on the inputUnit
+ * Humanizes the duration for display.
  *
  * Example:
  * 5000ms => 5s
  * 1000μs => 1ms
+ * 183840s => 2d 3h
+ *
+ * @param {number} duration (in microseconds)
+ * @return {string} formatted duration
  */
-export function formatDuration(duration: number, inputUnit: string = 'microseconds'): string {
-  let d = duration;
-  if (inputUnit === 'microseconds') {
-    d = duration / 1000;
-  }
-  let units = 'ms';
-  if (d >= 1000) {
-    units = 's';
-    d /= 1000;
+export function formatDuration(duration: number): string {
+  // Drop all units that are too large except the last one
+  const [primaryUnit, secondaryUnit] = _dropWhile(
+    UNIT_STEPS,
+    ({ microseconds }, index) => index < UNIT_STEPS.length - 1 && microseconds > duration
+  );
+
+  if (primaryUnit.ofPrevious === 1000) {
+    // If the unit is decimal based, display as a decimal
+    return `${_round(duration / primaryUnit.microseconds, 2)}${primaryUnit.unit}`;
   }
-  return _round(d, 2) + units;
+
+  const primaryValue = Math.floor(duration / primaryUnit.microseconds);
+  const primaryUnitString = `${primaryValue}${primaryUnit.unit}`;
+  const secondaryValue = Math.round((duration / secondaryUnit.microseconds) % primaryUnit.ofPrevious);
+  const secondaryUnitString = `${secondaryValue}${secondaryUnit.unit}`;
+  return secondaryValue === 0 ? primaryUnitString : `${primaryUnitString} ${secondaryUnitString}`;
 }
 
 export function formatRelativeDate(value: any, fullMonthName: boolean = false) {