Commit Graph

34 Commits

Author SHA1 Message Date
James E. Blair 4a7e86f7f6 Update web ui for dependency refactor
This updates the web ui to handle multiple changes per item.  It
is compatible with the current data output as well as the upcoming
API.

Change-Id: I536967e51b22b60c8ff7baa46b902a36d1ea44dd
2024-02-05 15:38:59 -08:00
James E. Blair cfe7ca6155 Add early failure indication to the web UI
This changes the job progress bar to red, and also the job's component
of the queue item progress bar to red in the case where an early failure
in the job is detected.  This lets users see what has caused the queue
item to flip to the failure status before the first failure report.

It also adds some explanatory text to the job progress bar mouseover.

Change-Id: Ic9fd1eb000b6a6fce44d2c820dedc02fb0ca9438
2023-07-29 13:30:14 -07:00
Tobias Urdin 59cd5de78b web: add dark mode and theme selection
This adds a theme selection in the preferences in the
config modal and adds a new dark theme.

Removes the line.png image and instead uses CSS
linear-gradient that is available in all browsers
since around 2018, also fixes the 15 pixels spacing
issue that is there today.

You can select between three different themes.

Auto will use your system preference to choose either the
light or dark theme, changes dynamically based on your
system preference.

Light is the current theme.

Dark is the theme added by this patch series.

The UX this changes is that if somebody has their system
preferences set to dark, for example in Mac OS X that is
in System Settings -> Appearance -> Dark the user will
get the Zuul web UI in dark by default and same for the
opposite.

This uses a poor man's dark mode for swagger-ui
as per the comment in [1].

[1] https://github.com/swagger-api/swagger-ui/issues/5327#issuecomment-742375520

Change-Id: I01cf32f3decdb885307a76eb79d644667bbbf9a3
2023-04-21 11:23:56 +00:00
James E. Blair feb032d9b5 Hide skipped jobs in status/reports
For heavy users of "dispatch jobs" (where many jobs are declared as
dependencies of a single job which then mutates the child_jobs
return value to indicate which few of those should be run), there
may be large numbers of "SKIPPED" jobs in the status page and in the
final job report, which reduces the usability of both of those.

Yet it is important for users to be able to see skipped jobs since
they may represent an error (they may be inadvertently skipped).

To address this, we remove "SKIPPED" jobs from the status page by
default, but add a button at the bottom of the change box which
can toggle their display.

We remove "SKIPPED" jobs from the report, but add a note at the
bottom which says "Skipped X jobs".  Users can follow the buildset
link to see which ones were skipped.

The buildset page will continue to show all the jobs for the buildset.

Change-Id: Ie297168cdf5b39d1d6f219e9b2efc44c01e87f35
2022-07-21 18:16:42 -07:00
James E. Blair f602c6953f Calculate elapsed and remaining times in javascript
The scheduler may now skip pipeline processing if there are no
pending events.  And we only write the status JSON to ZK when we
process pipelines.  That means that the JSON received by the web
app may be very old.  Everything in it should still be correct
except for the calculated values such as elapsed and remaining time.

This means that if a tenant is less active, the times and progress
bars may appear frozen.  To mitigate this, use the absolute timestamps
and calculate the relative times on the client.

Change-Id: Ia2bf8bb3b5495e3db13723f81c44186e5ca6ff53
2022-02-26 12:50:45 -08:00
James E. Blair 960d2966fd Add waiting status to queued
We currently supply no "waiting status" information (which would appear
in the mouseover text on the status page) for jobs that are queued.
This represents jobs for which we have submitted a node request but the
build has not started.

This change adds two new "waiting_status" values: the node request id
for the period between node request submission and executor build
request submission, and the string "executor" for the period between
executor build request submission and build start.

This updates the status page to display waiting_status as mouseover
text for the "queued" status label.

Change-Id: Ic1151944f4a8da8d1ab0a3ae96efb0877f86aebd
2022-02-23 11:38:30 -08:00
Matthieu Huin 54635a4de7 web UI: allow a privileged user to promote a change
Add a "promote" button in the actions menu of a change, if the
currently logged in user is an admin on the tenant and if the pipeline
is dependent.
Clicking the button opens a modal, so that the user can confirm her decision.

Change-Id: I8262888aef9ba1a106e0b321cc4cf2e14465b90c
2021-11-23 11:36:45 +00:00
James E. Blair 75ff0e3d91 Adjust spacing on status page
Apparently PF sets <small> to display:block which adds too much
vertical space to the status page boxes.  Switch those back
to display:inline.

Change-Id: Ib096fa1de9f5c7678584009fbee51e09794c0b81
2021-10-30 09:02:18 -07:00
Andrii Ostapenko 8e3abe62a4 Treat 'waiting' jobs same as 'queued' in buildset progress bar
Currently 'waiting' jobs are marked the same color as 'running' in
buildset progress bar that is counterintuitive.

Also refactors function for better readability.

Change-Id: Id580b843f9c9fd06468bcdc31c9a0677a132ccc2
Signed-off-by: Andrii Ostapenko <aostapenko@stackalytics.io>
2021-09-20 19:10:54 +00:00
Ian Wienand 89cc0422c0 Use ordinal rules for retries
Make the retries read a little better by using correct ordinal rules.
Apparently, this is the way to do it with modern javascript.

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/PluralRules

Change-Id: I6e38d27fb5a96ed846ad8ab611ef4890c0014c3f
2021-06-02 14:06:09 +10:00
James E. Blair 94bf1d306e Add waiting status to status page
If a job is "waiting", add a tooltip so users can find out upon
what the job is waiting.

Change-Id: I94ec3bb6bfc8c0cb828f9dab8999e8df5a60aea9
2021-04-29 17:49:47 -07:00
Sorin Sbarnea ebad14f1f9 Consolidate js/jsx indentation
Previously indentation was not checked at all and in order to avoid
reviewers time with style checks, we can enforce it with eslint.

Current js/jsx changes were made by: yarn lint-fix

Note this this change can easily become outdated so we need to
coordinate and merge it quickly as each rebase would loose previous
votes.

Change-Id: I85883fc8db924ad4ce9acad5acdd42aed7e4d0e4
2020-11-20 09:39:31 +00:00
Paul Belanger 7015626e8a Round width of change progress bar to 2 decimals
It is possible for a gap in the progress bar to remain empty due to how
we round the width to no decimals. This should allow us to properly fill
the progress bar closer to 100%.

Change-Id: I2fb11660b00abb741dc6b973e449efe05cb5bc9f
Signed-off-by: Paul Belanger <pabelanger@redhat.com>
2020-07-14 22:34:56 -04:00
Simon Westphahl 001858d7fc Render buildset progress bar correctly
The buildset progress bar was not rendered using the same colors as the
job statuses itself. This happened because the job results were
interpreted differently for the job status and the progress bar.

There is now a common jobStrResult() function to have the same result
string in both cases. Missing result cases were added as needed.

Change-Id: I202959766e193efacd00b0dc85bf5160f8412a24
2020-04-02 09:59:55 +02:00
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
Clark Boylan 3f08a93e9e Be more specific with remaining time
With the old code using humaized time it appears to always round down.
This means a job that will run for an hour and 45 minutes is estimated
to complete in an hour. With these sorts of estimates it is my
experience that it is better to over rather than under estimate as
people will get frustrated if it takes twice as long to get their
results as is stated.

To address this we can provide a more specific estimate. We can say "One
hour 45 minutes" instead of "an hour". This gives users a much better
indication of when they can expect results.

Change-Id: I705a636cd2483cdd2b880093747b720f91e6f0e3
2020-01-27 09:10:28 -08:00
Paul Belanger 09b4b8a5b3 Add estimated time remaining tooltip to UI
With help from TristanC, this should create a tooltip when users hover
over the status bar of a running job, that displays the estimated time
left.

Change-Id: I8d386ea9dce81088eb09293e4d9643ce448434f4
Signed-off-by: Paul Belanger <pabelanger@redhat.com>
2020-01-24 13:56:23 -05:00
Tobias Henkel cb3ed6ed71
Don't expand change panel on middle click
When middle clicking on the link to the change a user typically
doesn't want the item to expand/contract. Instead it should not react
on this event.

Change-Id: I663732887d0b7b6e13fe38da555e5a092d49f05f
Story: 2005895
Task: 33754
2020-01-17 13:00:06 +01:00
Felix Schmidt 7acabe2601
Change colors of various "negative" results in UI
Some job results like RETRY_LIMIT, NODE_FAILURE and POST_FAILURE are
often indicators for problems regarding infrastructure, network or node
provisioning via OpenStack. Unfortunately, they are not that visible on
the zuul status page and often get lost between those PAUSED, QUEUED
and WAITING jobs.

To still differentiate from FAILED builds, I used the orange color
instead of red.

Change-Id: Icbd22a373e4355d3555759214605ab07918cd39b
2019-10-29 10:12:05 +01:00
Felix Schmidt cf1642b747
Improve visualization retry attempts in UI
As a follow-up on https://review.opendev.org/#/c/660960/,
this will add the keyword 'attempt' to the number of retries to clarify
the meaning of the number in the brackets.

Change-Id: Ib8f2492bc91b418eb27b956ed8867282e72a9474
2019-08-23 13:25:26 +02:00
Felix Schmidt 426a1ea1a3
Differentiate between queued and waiting jobs in zuul web UI
When working with job dependencies, the zuul web UI does not
differentiate between jobs that are able to run and those that are
waiting for another job to finish before they can actually run. As both
are marked as 'queued', this often leads to confusion and people are
wondering why the queuing takes so long. To better differentiate between
these states, this change introduces a new state 'waiting' in zuul web.

Change-Id: Id0e85dc2db9660925209dc3cee365aa5c1241190
2019-06-20 19:52:47 +02:00
Felix Schmidt 4fac5c41b9
Show retry attempts in UI
Currently, it's not visible in the Zuul UI if a job runs for the first
time or had already a retry. This change adds the number of tries to the
job name if the job had a least one retry.

Change-Id: I75f400b7eec1e623045b600a7bd93846a6ac3090
2019-05-23 11:55:14 +02:00
Clark Boylan 465d95b090 Tiny cleanup in change panel js
We wrap this switch statement in a result !== queued check but then have
a queued case. Remove this redundant case.

Change-Id: I920cf2f31c10b82756957d7512b349ceb1a1ad00
2019-04-28 15:14:52 +00:00
Clark Boylan 7140cc0da5 Make paused status bar blue
Currently we don't set a contextual class for the progress bar when
state is paused. Set it to blue to indicate the job is still running but
with success. The old behavior was default grey which indicates the job
is queued.

Change-Id: Ie2b7d0c6f4246796c0f9d0385b4589a17418ce48
Signed-off-by: Paul Belanger <pabelanger@redhat.com>
2019-04-27 14:46:31 -04:00
Tobias Henkel 7c7ee2cfa1
Resolve todo after stream.html to stream renaming
The change I074b3a88a893e04d504e9cf21ced14ba86efc7ec has merged months
ago so we can resolve that todo now.

Change-Id: I14b71bfc2c6f8ff3d0777f65e83ee65662d0bcc9
2019-03-30 16:32:17 +01:00
Tobias Henkel 95625df196
Fix slightly smaller font of in progress jobs
On the status page the font of in progress jobs is slightly smaller
than the font size of finished or queued jobs. This is caused by the
missing class zuul-job-name when constructing the link.

Change-Id: I8dee14334567227ccca74c45ef393c0e7e6e64c9
2019-03-30 16:28:08 +01:00
Simon Westphahl 7bc29ec544 Show animated progress bar in preparation phase
Show an animated progress bar in the web UI during the preparation
phase. In this phase the job already has a log URL but no 'elapsedTime'
or 'remainingTime', leading to an empty progress bar.

E.g. with large repos the prep phase can take a while during which there
is no visible feedback to the user.

Change-Id: Ia1e25e662f38f2d469eb65a16dd127dbb0414c3c
2019-02-19 11:05:22 +01:00
Tobias Henkel 6e940f0b72 Display ref instead of NA for time triggered items
Currently time triggered items show up as 'NA' in the status ui. If we
want to dequeue such an item we need the ref which is not existing
anywere in the status, not even in the pure json. So add the ref if
it's there and display the ref instead of 'NA' in the status ui if the
ref is set.

Change-Id: Iedae91d96ab91f4b4131da66ee317072f38e376b
2018-11-21 18:30:29 +00:00
Zuul b44d87a6d9 Merge "web: fix stream url from status json" 2018-10-16 21:13:10 +00:00
Tristan Cacqueray d54b67e2ea web: fix stream url from status json
This change removes the legacy url format from the status.json.

Change-Id: I074b3a88a893e04d504e9cf21ced14ba86efc7ec
2018-10-11 05:37:40 +00:00
Tristan Cacqueray 7abad96ae3 web: expand status panels only when the header is clicked
This change fixes change panel being collapsed when clicking on job link.

Change-Id: I628acda5d6a6063b4d7bdcadcb64731048e1d3d4
2018-10-10 10:15:54 +00:00
Tristan Cacqueray 68d1189871
Revert "Revert "web: rewrite interface in react""
This reverts commit 3dba813c64.

Change-Id: I233797a9b4e3485491c49675da2c2efbdba59449
2018-10-06 10:42:31 -05:00
James E. Blair 3dba813c64 Revert "web: rewrite interface in react"
Revert "Fix publish-openstack-javascript-content"

This reverts commit ca199eb9db.
This reverts commit 1082faae95.

This appears to remove the tarball publishing system that we rely on.

Change-Id: Id746fb826dfc01b157c5b772adc1d2991ddcd93a
2018-09-29 11:51:43 -07:00
Tristan Cacqueray 1082faae95 web: rewrite interface in react
This change rewrites the web interface using React:
http://lists.zuul-ci.org/pipermail/zuul-discuss/2018-August/000528.html

Depends-On: https://review.openstack.org/591964
Change-Id: Ic6c33102ac3da69ebd0b8e9c6c8b431d51f3cfd4
Co-Authored-By: Monty Taylor <mordred@inaugust.com>
Co-Authored-By: James E. Blair <jeblair@redhat.com>
2018-09-27 02:14:46 +00:00