diff --git a/ui/app/helpers/format-duration.js b/ui/app/helpers/format-duration.js index c85a14b41..8ff4f73f3 100644 --- a/ui/app/helpers/format-duration.js +++ b/ui/app/helpers/format-duration.js @@ -1,8 +1,8 @@ import Helper from '@ember/component/helper'; import formatDuration from '../utils/format-duration'; -function formatDurationHelper([duration], { units }) { - return formatDuration(duration, units); +function formatDurationHelper([duration], { units, longForm }) { + return formatDuration(duration, units, longForm); } export default Helper.helper(formatDurationHelper); diff --git a/ui/app/utils/format-duration.js b/ui/app/utils/format-duration.js index 2f8ea1b72..a7f2da486 100644 --- a/ui/app/utils/format-duration.js +++ b/ui/app/utils/format-duration.js @@ -4,15 +4,26 @@ const allUnits = [ { name: 'years', suffix: 'year', inMoment: true, pluralizable: true }, { name: 'months', suffix: 'month', inMoment: true, pluralizable: true }, { name: 'days', suffix: 'day', inMoment: true, pluralizable: true }, - { name: 'hours', suffix: 'h', inMoment: true, pluralizable: false }, - { name: 'minutes', suffix: 'm', inMoment: true, pluralizable: false }, - { name: 'seconds', suffix: 's', inMoment: true, pluralizable: false }, + { name: 'hours', suffix: 'h', longSuffix: 'hour', inMoment: true, pluralizable: false }, + { name: 'minutes', suffix: 'm', longSuffix: 'minute', inMoment: true, pluralizable: false }, + { name: 'seconds', suffix: 's', longSuffix: 'second', inMoment: true, pluralizable: false }, { name: 'milliseconds', suffix: 'ms', inMoment: true, pluralizable: false }, { name: 'microseconds', suffix: 'µs', inMoment: false, pluralizable: false }, { name: 'nanoseconds', suffix: 'ns', inMoment: false, pluralizable: false }, ]; -export default function formatDuration(duration = 0, units = 'ns') { +const pluralizeUnits = (amount, unit, longForm) => { + let suffix; + if (longForm && unit.longSuffix) { + suffix = amount === 1 ? unit.longSuffix : unit.longSuffix.pluralize(); + } else { + suffix = amount === 1 || !unit.pluralizable ? unit.suffix : unit.suffix.pluralize(); + } + const addSpace = unit.pluralizable || (longForm && unit.longSuffix); + return `${amount}${addSpace ? ' ' : ''}${suffix}`; +}; + +export default function formatDuration(duration = 0, units = 'ns', longForm = false) { const durationParts = {}; // Moment only handles up to millisecond precision. @@ -46,9 +57,7 @@ export default function formatDuration(duration = 0, units = 'ns') { const displayParts = allUnits.reduce((parts, unitType) => { if (durationParts[unitType.name]) { const count = durationParts[unitType.name]; - const suffix = - count === 1 || !unitType.pluralizable ? unitType.suffix : unitType.suffix.pluralize(); - parts.push(`${count}${unitType.pluralizable ? ' ' : ''}${suffix}`); + parts.push(pluralizeUnits(count, unitType, longForm)); } return parts; }, []); @@ -58,7 +67,5 @@ export default function formatDuration(duration = 0, units = 'ns') { } // When the duration is 0, show 0 in terms of `units` - const unitTypeForUnits = allUnits.findBy('suffix', units); - const suffix = unitTypeForUnits.pluralizable ? units.pluralize() : units; - return `0${unitTypeForUnits.pluralizable ? ' ' : ''}${suffix}`; + return pluralizeUnits(0, allUnits.findBy('suffix', units), longForm); } diff --git a/ui/tests/unit/utils/format-duration-test.js b/ui/tests/unit/utils/format-duration-test.js index c4867590f..69cb02b32 100644 --- a/ui/tests/unit/utils/format-duration-test.js +++ b/ui/tests/unit/utils/format-duration-test.js @@ -26,3 +26,10 @@ test('When duration is 0, 0 is shown in terms of the units provided to the funct assert.equal(formatDuration(0), '0ns', 'formatDuration(0) -> 0ns'); assert.equal(formatDuration(0, 'year'), '0 years', 'formatDuration(0, "year") -> 0 years'); }); + +test('The longForm option expands suffixes to words', function(assert) { + const expectation1 = '3 seconds 20ms'; + const expectation2 = '5 hours 59 minutes'; + assert.equal(formatDuration(3020, 'ms', true), expectation1, expectation1); + assert.equal(formatDuration(60 * 5 + 59, 'm', true), expectation2, expectation2); +});