zuul/web/src/pages
Antoine Musso 448596cfe0 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
2020-02-04 13:23:38 +01:00
..
Build.jsx Refactor build page tabs 2019-08-07 18:37:12 -07:00
BuildConsole.jsx web: refactor the errorsIds into the build action 2019-08-08 15:05:18 -07:00
BuildLogs.jsx Refactor build page tabs 2019-08-07 18:37:12 -07:00
Builds.jsx web: humanize time durations 2020-02-04 13:23:38 +01:00
Buildset.jsx web: add buildset page 2019-08-08 22:20:39 +00:00
Buildsets.jsx web: add buildset page 2019-08-08 22:20:39 +00:00
ChangeStatus.jsx web: refactor change page to use a reducer 2018-12-14 05:36:21 +00:00
ConfigErrors.jsx Revert "web: upgrade react and react-scripts to ^2.0.0" 2019-05-16 19:55:31 +00:00
Job.jsx web: refactor job page to use a reducer 2018-12-06 07:42:32 +00:00
Jobs.jsx web: refactor job page to use a reducer 2018-12-06 07:42:32 +00:00
Labels.jsx web: refactor labels page to use a reducer 2018-12-14 08:33:48 +00:00
LogFile.jsx web: logfile remember if initial scroll was performed 2019-08-16 14:10:53 +00:00
Nodes.jsx Builds page - Fix bad labels display 2019-07-26 14:56:25 +02:00
OpenApi.jsx web: add OpenAPI documentation 2019-06-12 22:35:13 +02:00
Project.jsx web: refactor job page to use a reducer 2018-12-14 08:33:48 +00:00
Projects.jsx Change links on projects page to canonical name 2020-01-18 14:19:15 +01:00
Status.jsx web: prevent status update loop in background 2019-02-12 14:14:08 +00:00
Stream.jsx Update xterm to >= 3.14.5 2019-07-19 14:16:08 -07:00
Tenants.jsx web: add buildsets page 2019-02-21 03:31:01 +00:00