Long job names should be wrapped so that they don't disrupt the layout
of the status page. Job names with hyphens (the dominant style in
opendev) don't exhibit a problem because they will automatially wrap
at hyphenation points. However, if jobs lack hyphens, then they will
appear as very long strings which widen the change boxes.
To address this, set the overflow-wrap css style in the change box
so that they are able to wrap at any point (but still preferentially
at hyphenation points).
Change-Id: Ieaedd722293dd9ca1ab7cffc378bceb05d3d5ee3
In some cases a gap appears in the status page subway graph.
This change corrects that by only leaving a gap when necessary for
an icon or branch line.
Change-Id: I0abb156aa9d9b30fae4ec18ce2da9e4deaf7dbf1
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
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
On a non whitelabeled setup, allow a user to jump from one tenant to
another without having to go back to the tenants page.
On a whitelabeled setup, make the tenant item non-clickable (the click
doesn't do anything anyway).
Change-Id: I94d27445c65ed5c3f8d02fae9d47d426528d2332
To keep consistency with the console page
(I6df896497f3a20d639fc67f256e1d2566aa2903c), put the failed tasks in a
light red box to highlight the failure case.
Change-Id: I48e1b616663919787fb52d53ee27882efea825f9
I've noticed that when making the console page very narrow (mobile)
the entries are difficult to differentiate in their compressed form.
This proposes adding alternating colors on the play entries to
differentiate them. Since the grey is used between elements, the
highlight is modified to the the lightest blue in the PF family.
Putting a small border-radius on this makes it look a bit more
differentiated.
Change-Id: I7afcb64a5e41348f14bd297c8c8bde27312dff97
The current logo has a lot of whitespace around it and is offset with
the viewbox. I've imported this into inkscape, selected just the logo
and re-exported it with no whitespace, then ran it through the
minimizer at [1].
I've set the height to 1.5em -- the icons in the same bar have a
height of 1em; to my eye this look good just a bit bigger than that.
[1] https://jakearchibald.github.io/svgomg/
Change-Id: Idf4e676d33a4626c0b80e06986d8b24b41924065
After converting the console to PF4 with
Ie480deb046502879542e41844e919a362203e25d, flipping back through the
tabs I notied some inconsistency with the "Task Summary" tab.
Firstly this puts a <br> so it is vertically aligned the same as the
other tabs. We remove the card around it because nothing else uses
this; now it is a DataList that is the same as the console page. CSS
is added to remove the top line which is also inconsistent with the
other tabs.
We convert the node to a chip with a node icon as used elsewhere.
Future work would probably be to put the failed tasks as expandable
content in each node's summary line.
Change-Id: Ic134cf560cc78540f6af71964ac366f89ca594d9
This is a selection of rules to override the default datalist layout;
it removes the lines and compresses entries. This is the result of
inspection and trial-and-error; i.e. there may be better ways to do
all of this.
The box-shadow on hover mouseover doesn't really work that well with
the compressed entries, as they are too close together to get a good
offset for it. This replaces it with a light background; the hover
should also highlight on the left.
Change-Id: Ie3d79b11be517136a62db61c57a112885b0e10eb
The console page is currently based on the ListView from PF3. The
most direct conversion to PF4 is a DataList, which is similar but
different.
This is intended to be a like-for-like replacement of the console page
using the DataList model.
The things I have explicitly thought about:
* The trusted flag on the playbook remains with tooltip
* The task line output is the same order, with
task <+>- (STATUS) [hosts] <time>
The magnifying glass and status share a cell to keep them close
* You can click on either the magnifying glass or the status to bring
up the modal with the full task status. Both have a tooltip.
* The status and hosts are modified to use PF4 label and chip models
for a standard look.
* Plays start rolled up, but tasks start in the expanded state as
before.
* If there is a failed task, the playbook and play are unrolled to
show it automatically as before.
* "run" playbooks are expanded by default
* Tasks highlight on hover, but now using a light boxshadow rather
than background color which is more consistent with other parts of
the ui (like the build table, for example).
* No colours in the background of the playbook rows; the DataList now
has a blue line that runs down the side showing you the groupings
when a playbook row is opened. I think this is more consistent
with "less is more" type approach.
* deep-link permalinks on the modal display of the task results open
up the same task display when pasted into a new window.
While I think there is plenty of room for improvement in the way this
information is displayed, I've deliberately tried to keep everything
the same in this changeset to a) ease review and b) so we have a
PF4-based grounding to work from. There wasn't really a way to do
this more incrementally; although almost everything moves around there
is no tricky code to call out -- some fiddling of things that needed
to state properties and some toggle javascript-code bits are the main
additions.
Change-Id: Ie480deb046502879542e41844e919a362203e25d
This was suggested and written by Joachim Schuler in [1]. It moves
the top navbar as a "tertiary" option to the page header. This bar is
always visible and doesn't roll-up into the "top" area. This means we
can drop the more complex grid layout that is trying to keep this bar
always visible for some much more simple styling.
As this moves the navbar location the link matching is updated to find
new elements.
[1] https://github.com/patternfly/patternfly-react/issues/7960#issuecomment-1244017295
Change-Id: I4a61a1e246ca4fe0d96f630a06be7f0264782723
This was suggsted and written by Joachim Schuler in [1]. It is
probably a bug that due to asynchronous loading of CSS rules our
logo-height rule here sometimes comes and goes. However, putting this
in a zuul-page class both seems to fix this (I always see the logo
now) and is just generally a nicer way to organise things.
[1] https://github.com/patternfly/patternfly-react/issues/7960#issuecomment-1244017295
Change-Id: Ib1b6be1b554b30ce7a7d2aacae476cefbed63782
This corrects the tab titles on the project page which currently
typically just say "master", "master", "master", ... because they
all display the default branch of the project stanza.
Instead, use the branch of the source context for the project stanza,
or, if the project stanza is not from the current project, then
use the name of its project.
This causes them to appear like:
"openstack/project-config", "master", "stable/diablo", ...
Also, update the entire Project page component hierarchy to use
hooks instead of classes.
Update the styling on the H2 element so that we can have the
refresh icon share the same vertical space (so that we don't have
large amounts of wasted vertical space at the top of each page.
Change-Id: I863e0eb4a7f20ee6363e596e61cc49b2cbc22953
This adds the ability to display the frozen job graph for a project.
It adds a toolbar to the Project page that allows a user to enter
a pipeline and branch. Hit the button and it will use the API
to freeze the job graph and then display it with graphviz (there
is a webassembly build of the graphviz libray).
Change-Id: Ieb5899a63a4c85eb5d445fa69dd1e85ddc11575d
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
A user can list active autoholds for a given tenant. If the user is a
tenant admin, she can also discard a autohold request from the autoholds
page.
Add a autohold page holding information about a single autohold request,
in particular links to held builds if any.
Change-Id: I4f5f2cfdf8e46ce8fb7ac69e330d6e51bd8b19fe
This adds a new page /components that lists all components which are
retieved from the /components API endpoint.
For the look and feel this page has a similar design like the builds and
buildsets pages.
Change-Id: I38b3a9b456b71e49f02712b63417a905a0aa1397
On a buildset page, add a switch to toggle the display of non-final
jobs. By default, show all jobs.
Add a button in front of each final job to show/hide retries for
that specific job.
Hide the toggle switch if there are no retried jobs in the buildset.
Change-Id: I22057dbd404e80f03a466610bc13968f9c8cbf10
Currently when I try to select any text on the streaming console it
goes a white-on-white color and you can't see the selected text.
Using the sample console on the xterm.js page it correctly uses a
light-grey selection that you can see through. This doesn't appear to
set any theme or css settings to achieve this.
Upgrade to the latest release. This requires a few changes to the way
things are imported and as far as I can tell, just calling the fit
addon fit() function on resize seems to make things work as expected.
This removes any overrides for selection related things; the console
now highlights in a light grey correctly.
Change-Id: I9699e6d9abe82a20791770a1a8f169d65be27bc9
Making the whole row table row clickable in these pages makes makes it
impossible to mark & copy any text from those rows. Users have
expressed this is an annoyance worth fixing.
This change removes the stretchable link from the whole table row and
instead allows clicking on the job name or status icon to go to
details about the job.
We have added an optional link prop to title-with-icon; note this is
used in other contexts where it does not make sense to be a link thus
the optional implementation steps. It is intentional that these links
retain their underline for discoverability.
For the mobile version (which renders the table as a nice card list), we
fall back to the "action column" solution which will be rendered nicely
as a button in the top right corner of each card. For larger screens we
hide this action column.
Note this change is a squash of several other changes to make a
consolidated review; for original details see:
I788ea37b2ca1899d90160cc52761db0a77f78508
Ifc54edf9ca348ada8e3bfd07fd135d22f9f08489
Ifc54edf9ca348ada8e3bfd07fd135d22f9f08489
Ib4c3a2159e7bad58fcc27eb3ba4b62926ce73099
Co-Authored-By: Ian Wienand <iwienand@redhat.com>
Change-Id: I276ff316b17aee932f2724f86e8f0eb1abe73c60
PF4 has highlighted to me we have a range of different font sizes in
the "results" and "console" tab. I think this stands out a lot more
now because you have the header section with consistent font sizes,
then we start shrinking various things below that.
This removes the Panel font-sizes from CSS so we just keep the
defaults, which to my eye look good.
However, Panel's aren't in PF4, so I've reword the results page to use
Cards.
The host/task summary card is the same generally, but has some bubble
labels and I think the colors make more sense now (green for OK, for
example). Icons remain the same, but instead of hiding what the value
is in a tool-tip it is included in the label. I also moved it to be
first always, as it is supposed to be an overview.
If there is are task failures, they are in cards too. Again this is
basically the same; but I put the host it fails on in a bubble that
matches the "failed" bubble from the summary for consistency, and made
the title a bit clearer explaining what follows is the failed task
output.
I've also renamed the tab title "Task Summary", which to me conveys
more exact info than just "Results" which could be all sorts of
things.
Change-Id: I7b56efbfc9c25872e399853045e9d08f38a0a3bb
This updates the tables shown on the builds and buildsets pages with new
PF4 components. While the data is loading, a fetching animation is shown
and in case no results could be found the page shows an empty state.
Each table row is clickable and points to the build/buildset result page.
The table uses the same hover effect as the build list on the buildset
result page.
This change also updates the used @patternfly/react-core version to
match the current version of @patternfly/react-table [1]. Otherwise,
some of the styles in the different @patternfly/react-core versions
conflict with each other leading to wrong font-weights and wrong text
colors in labels.
[1] patternfly.org/v4/documentation/react/overview/release-notes#202010-release-notes-2020-08-17
Change-Id: I0f5e0815c53d18e8ae3570dc94594c77fecb90ce
PF4 broke the horizontal scrolling behaviour of the pre/table
combination used on this page. This restores it by setting the overflow
attribute on the pre element.
Change-Id: I038942d235fd13cae90ed82429558f441f1dcbb4
Since we introduced PF4 together with the Drawer component to show the
config errors, we are not able to scroll the page by using the keyboard.
So far, no workaround really did the trick and every one came with
another drawback in different areas.
So we decided to ditch the Drawer component and use a Modal as
replacement. This should still serve the use case as we have "something
popping up when clicking on the bell icon", but this something doesn't
break the layout and/or the scrolling behaviour.
Additionally this change removes the "height: 100%" CSS rule on the root
element. In combination with the removed drawer this should restore the
scrolling behaviour via keyboard without introducing any further
drawbacks like wrong tabbing or focus behaviour.
For additional background information on this topic, please refer to the
changes [1], [2] and [3]. There is also a PF4 issue on Github available
[4].
[1] https://review.opendev.org/#/c/743239/
[2] https://review.opendev.org/#/c/743917/
[3] https://review.opendev.org/#/c/742759/
[4] https://github.com/patternfly/patternfly-react/issues/4624
Change-Id: I45df9cabc96d2d7fb4ddebdf1c72d0dd8a3adfd2
This accidentally broke the layout of the build result page and the tabs only reachable by scrolling horizontally in case a build log contained very long log lines.
This reverts commit 8d0f440e1b.
Change-Id: Ifcdf5c737ef6f2e178c9a4531ead81e8c0fe6505
Change I4201b935abb9b1365b3a570f3e00a0b492240bf8 intended to bold
pipeline names, but actually bolded the descriptions. Correct that.
Also correct an apparent typo in an unrelated selector.
Change-Id: I154e0040a15832024d4770c47abf5da7b46b3a10
- assure we display cmd on build output
- assure we display cmd using <pre>, like exc,stdout, stderr as
can easily be multiline-script
- add tooltips mentioning field name to avoid confusions.
Change-Id: I8bc3ff07d270b647fdd7834151649a2eb26a34d6
The status page shows a lot of content wich makes it sometimes difficult
to see where a pipeline "container" (in terms of UI) starts or ends.
This change emphasizes the pipeline names a little, so the beginning of
a new pipeline container is easier to spot.
Change-Id: I4201b935abb9b1365b3a570f3e00a0b492240bf8
Currently pageup/pagedown, etc. keys don't do anything.
I tried a couple of things; including putting refs on various things
and trying to give them focus on componentDidMount(), but the scroll
keys didn't seem to make it in.
This I just found from fiddling around with the inspector. Resetting
these overflow values gives me a standard "whole-page" scroll bar on
the left hand side, and all the expected keyboard nagivation keys
work.
Honestly, this is maybe more for discussion with someone who
understands patternfly page/panels etc. a bit more; but empirically it
seems to work.
Change-Id: Ib723b125e39f707972a15891ec411f322c335993
This updates the buildset result page with Patternfly 4 components and
a new design based on inspirations from other CI systems, Patternfly 4
demos and my own ideas.
I chose the buildset result page because it doesn't contain too much
elements und therefore is a good starting point. If you like the
design, I will continue with that also for other pages like the build
result pages or the various "list" pages like builds and buildsets.
Change-Id: I978ee448ddf6e22e4a6ec8211204f694932eaa4e
As a low-cost attempt to indicate that the results button is
clickable and will bring up details, add a search-with-plus icon
("zoom in") to the left of it. Let's see if that indicates to
users that they can click on it (or at least mouseover and read
the help text that explains it).
This also updates the other icons in the task rows to use the
newest recommendations for PF4. There are some minor size and
style differences, so keeping all of them in sync makes sense.
Change-Id: I3fff295d2b3b38b9e1c75e13f9a8a967e812168e
The logo is taken from [1]. I've just adapted the color and viewport to
fit to the new design and fill out the available space in the navbar.
[1] https://www.openstack.org/brand/openstack-logo/logo-download/
Change-Id: I4bd83446237935e9a1c2d29992fd9eef9d359eed
Since Patternfly 4 (PF4) is a complete rewrite of the framework that
doesn't require bootstrap and comes with a new npm package, it's
possible to include both side-by-side in a project.
This change includes the necessary PF4 packages and updates the header,
navbar, drawer (shows the config errors) and global page layout with PF4
components. Once this is done, we should be able to update the other
components step by step to PF4.
Points to keep in mind for the migration phase:
1. Some Patternfly 3 CSS rules are overridden by Patternfly 4
wildcards, mostly (re)setting the padding and margin of various
elements to 0.
To fix this unwanted behaviour, there is a pf4-migration.css file
included were we can keep track on those rules and ensure that the
old padding and margin values are re-applied after Patternfly 4 is
imported.
Change-Id: I77b81fa0f97fe718207ba5a506cee300371c693b
Add a 'more/less' button for displaying the unabridged stdout/stderr
in case is longer than the default max_lines.
Move styling from inline to the stylesheet and reuses existing
logging styles.
Change-Id: Ic7f25d3bd1495da143147e1e7d2e1473367d775d
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
This change removes lines number link and implements a manual click handler
to update the window hash so that line doesn't move under the navbar.
Change-Id: Ia51d5f7704cacfb909ffae02305b0aff121f741b
This change adds a background to the line selector.
This change also implements multiple lines highlighting, but
without proper onclick handler to detect shift click selection.
Change-Id: I02764e5e61946f9398659fdab98f3e0446985775
Add line numbers to each line of the log file and make these the
hyperlinks/anchors. This frees up the line itself to be plain
text (if the line text is a hyperlink, it's difficult to select
it for copy/paste).
Change-Id: I1c08782bf743c93bdb77f23327035006f9a43675
Confining the log view to a patternfly panel means that the inner
panel needs to be horizontally scrolled, but to get to the horizontal
scrollbar, you have to go to the bottom of the log. Instead, render
the logs outside of any panels, with no overflow handling and let
the browser do what it does natually.
Change-Id: I8258ecf6feb036ee15aae3e314363376d71292de
This adds a link icon to the title of the modal dialog that opens
when the task status is clicked. It uses the URL hash to supply
a path to the task which will cause all the parent tasks to be
expanded and the dialog open when a user visits the url with the
hash.
Change-Id: I3cf5b7115b775de103b9af7986ac0b8318688b42
If a task has no interesting output, don't show the expansion
caret. In order to make this look right, we add in a blank
leftContent section in place of the caret, and tweak the css
for that so it takes the same amount of space.
Since the row isn't clickable in that case, make sure that we
use the pointer icon over the details button, and while we're
at it, make sure we use the default cursor over the additional
info items which are not clickable.
Change-Id: I5d5691ef480af932fab0d592eacfd260426352dd
James E. Blair