web: humanize time durations

At a lot of place, the duration for an item shows the raw value. It
lacks an indication of the unit (ms, s or minutes??) and is not very
human friendly. `480` is better understood as `8 minutes`.

The `moment-duration-format` package enhance moment duration objects to
ease formatting. It has better options than moment.duration.humanize(),
notably it does not truncate value and trim extra tokens when they are
not needed.
The package does not have any extra dependencies.

https://www.npmjs.com/package/moment-duration-format

Format duration on the pages build, buildset and on the build summary.

The Change panel had custom logic to workaround moment.duration.humanize
over rounding (so that 100 minutes became '1 hour'). The new package
does not have such behavior and offers tuning for all the features we
had:

* `largest: 2`, to only keep the two most significants token. 100
minutes and 30 seconds would thus render as '1 hour 40 minutes',
stripping the extra '30 seconds'.
* `minValue: 1`, based on the least significant token which is minute,
it means any value less than one minute is rendered as:
 < 1 minute
* `usePLural: false`, to disable pluralization since that was not
handled previously.

That reverts https://review.opendev.org/#/c/704191/

Make class="time" to not wrap, they would wrap on the Status page since
the box containing is not large enough.

In the Console, show the duration for each tasks, rounding to 1 second
resolution.  Would ease finding potential slowdown in a play execution.
The tasks do not have a duration property, use moment to compute it
based on start and end times.

Since hostname length might vary, the duration spans might be
misaligned. Use a flex to have them vertically aligned, credits to
mcoker@github:
https://github.com/patternfly/patternfly-react/issues/1393#issuecomment-515202640

Thanks to Tristan Cacqueray for the React guidances!

Change-Id: I955583713778911a8e50f08dc6d077594da4ae44

1 files changed, 3 insertions, 1 deletions

diff --git a/web/src/containers/build/Buildset.jsx b/web/src/containers/build/Buildset.jsx
index 803022a21..89f246c83 100644
--- a/web/src/containers/build/Buildset.jsx
+++ b/web/src/containers/build/Buildset.jsx
@@ -18,6 +18,7 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { Panel } from 'react-bootstrap'
 import * as moment from 'moment'
+import 'moment-duration-format'
 
 
 class Buildset extends React.Component {
@@ -61,7 +62,8 @@ class Buildset extends React.Component {
         if (column === 'job') {
           row.push(build.job_name)
         } else if (column === 'duration') {
-          row.push(moment.duration(build.duration, 'seconds').humanize())
+          row.push(moment.duration(build.duration, 'seconds')
+                   .format('h [hr] m [min] s [sec]'))
         } else if (column === 'voting') {
           row.push(build.voting ? 'true' : 'false')
         } else if (column === 'result') {