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
As a frequent user of the Zuul web UI, I have often wished there were
a way to jump to the top of the build page after scrolling down a
large log file.
This adds a button in the bottom right corner that jumps to the top of
the page when clicked.
Change-Id: I7782055d64255844b682e282fcd1d74cf88f4ced
If the job encounters an execution error, the error_detail field
should be returned by the API. Display that in the task summary
section if there is no other output and it is available.
Alternative to: I49f3b1578637a6d081de579dbe2272d8ddda886a
Change-Id: I83c78ed3a6b63b3215be23a7a596cdcf15a80399
Both the build and buildset doesn't change once stored in the SQL
database. Thus, clicking on the refresh button just reloads the same
information again which doesn't make much sense IMHO.
Since there is no other information on the build that would change over
time, simply remove the refresh button.
Change-Id: I3fccea38824cc4ffbda9d8619f548878b0a60542
When opening the builds page there is a short moment when an empty state
pattern is shown before the data is actually fetched. This happens for
the build itself ("Build not found") and for the tab contents like logs,
task summary and console information ("This build does not provide any
..."). The same applies for the buildset page on initial load.
Interestingly, this moment is extremely short in chrome (so you can't
even see it without actually pausing the state transitions with the
redux developer tools), but in firefox it's much longer so you usually
see it when opening the page.
To avoid this from happen, this change does two things.
1. It splits the build, manifest, output, hosts and errorIds into
separate fields of the state. This allows us to fetch as much in
parallel as possible without always waiting for the actual build to
be present. To simplify the usage in the Build page react component,
we use the mapStateToProps() function to combine all those values
into a single build object.
2. Unfortunately, this is not enough as some information like the logs
rely on the manifest entries and the build.log_url to be present. To
still distinguish between a "unknown" value (e.g. the build or
manifest wasn't fetched yet or is currently fetching but we don't
know if it will be found) and a "non-existing" value (e.g. the build
or manifest could not be found after fetching), we use the difference
between undefined and null. In JavaScript tongue, every variable is
undefined that hasn't assigned a value yet (though we could also
assign undefined explicitly). The null value on the other hand is
used to say "I define this variable and explicitly set it to an empty
value".
Thus, we explictly set every entity we didn't found to null in the
reducer functions and check for (undefined || isFetching) instead to
show the spinner animation. This way, the page always starts with the
fetching animation and only switches to showing the result or an
empty state depending on if the entity could be found or not.
Change-Id: I800dfe71128bb00638a51cea0d9be9be623bd923
I think the log-viewer page could do with some PF4-ness.
This incorporates the previous log-viewer page into the builds page.
When selecting a logfile from the listing in the logs tab, the log will
directly show inside the tab rather than on a new page. Breadcrumbs are
used to show the path to the current log file relative to the logs
directory.
Additionally, this change improves the state handling of log files in
redux and allows multiple log files to be stored in the redux state.
This enables fast switching between different logfiles without always
downloading them again.
To remove some boilerplate code, the LogFile component is changed into a
functional component rather than a class component.
The filters are moved from jammed-together links into a button
toggle-group, which is a mutually-exclusive set perfect for this
interface. This component requires the latest release of PF4, which
is why the packages have been updated.
Change-Id: Ibcbc2bd9497f1d8b75acd9e4979a289173d014b2
This removes some unused parameters from the various fetchBuild...()
actions, introduces async/await to avoid function chaining and improves
the state-to-props handling on the BuildPage.
The last one is done by using the mapStateToProps() function which
allows us to explicitly map the parts of the redux state in which we are
interested to properties of our React component (BuildPage). This way we
keep the mapping in a single place and don't need to "unpack" the redux
state in various places in our component. In addition we use
mapDispatchToProps to automatically wrap all actions we use in our React
component into a dispatch call.
This change also fixe a bug when trying to call substr() on a missing
log_url. Additionally, a missing log url and a missing manifest file are
no longer treated as failure to avoid showing toast notifications for
those. This mainly applies to noop builds, which by definition don't
provide any log at all.
Change-Id: I056448b8735ac4ed5d271a7f55ca558fe9bf317f
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
The original change was reverted to fix a scrolling bug that was introduced by a different change. Using this commit in combination with [1] should restore the old behaviour.
Applying [2] on top of them should finally get rid of the scrolling issues.
[1]: https://review.opendev.org/#/c/750361/
[2]: https://review.opendev.org/#/c/750322/
This reverts commit b4b5b9fd58.
Change-Id: Icd498314762a8edca751413b7ee07b9b72317c5b
This reverts commits:
04fa7c498935572d20577d78448ec5
Long log lines cause the tabs to be wider than the browser window
which make them virtually inacessible. Revert this change until
we work out how to handle that.
Change-Id: I22fd8ef859b7ef3af4fadc95074fbceb30fae9a2
Story: 2008096
It looks like this was never working because the function call supplied
to many parameters.
Fix by removing the additional and unnecessary null parameter.
I would keep this change after the PF4 changes of the buildset page
since it otherwise might result in some awkward behaviour due to the
different tabs and their contents.
Change-Id: I6fa62343a22d7a54e85a7e8d0babdabdc08b6352
Following up on the patterns used for the buildset result page this now
updates the layout of the build result page in the same manner.
The "Summary" part is now always shown above the tabs (Logs, Console,
...) and the first tab is split into two (Results and Artifacts).
The contents of the Logs and Console tabs are unchanged.
Change-Id: If04b65596f189c343cda05a4a8fb3e1b740a0be2
So far, these three tabs were split up in three different Pages to allow
each page being reachable via a different URL (rather than a #<tab>
anchor which is usually used for tabs). This makes changing the builds
page much more difficult as we have keep all three files in sync.
React-router allows a Route to pass custom props to the component that
is rendered when the Route matches a certain URL. We can use this
functionality to provide the active tab via a property for each route
using to the BuildPage component.
This change keeps the way the tabs are working, but maps all three URLs
to a single component with different props to show the activate tab.
Change-Id: Icb5729d759bafdfc396ea3642c8c6c71b3461d00
Currently the "refresh" animations look quite different depending on the
page and the type of event (refresh button, initial page load, ...).
This tries to make a start by updating the "Fetching info ..." animation
(shown on initial page load) with Patternfly's "empty state" pattern [1]
in combination with an animated spinner.
For "Refreshable" pages, a similar animation is used in the upper right
corner (like before) but with an updated spinner and icon. By using a
dedicated React component rather than a base class, the "refresh" button
can be more nicely integrated into the layout of the page/container and
it doesn't look "out of scope" for the refreshable component.
For the API page I've removed the refresh completely since it wasn't
implemented at all.
[1] https://www.patternfly.org/v4/documentation/react/components/emptystate
Change-Id: I2274c212f14aece27ff49bfc7900d9b1a0fd01d0
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
Instead of having a single page with tabs selected by the URL
hash (eg "uuid#console"), make each "tab" its own page routed with
the URL path (eg "uuid/console"). The "tabs" look and behave the
same, but the change in URL format will allow us to later use
the hash for items on the pages themselves. For example, we
may be able to deep-link to a task in the console log using the
hash.
This refactoring should also make it easier for us to rearrange
these components in the future.
Change-Id: Ib8174d9b39be3c63ef63cbcbf8682c195ac80c91
This looks for a zuul_manifest artifact, and if it is present,
it fetches it and shows a tree view of logs. Text logs are
displayed in-app with some basic line anchoring.
Part of the implementation of
https://zuul-ci.org/docs/zuul/developer/specs/logs.html
es6 added to .eslint to allow use of Promise.
Change-Id: Ib04d013b4118005ba66a91d2bec0b0c429d12863
This change updates the build page component to use a container
for build information rendering. This enable decoupling the network
logic from the actual rendering.
Change-Id: I8c7c03b5efa80ea884249ffdee31c7819a336bfc
This change updates the build page component to dispatch reducer
action instead of direct axios call. This enables using the generic
error reducers as well as keeping the builds in the store to avoid
repeated query.
Change-Id: I705514e5fa32ec2d81a5b0ca9c5ebb7d8ac6ac2a
This change adds a /build/{build_uuid} web interface.
Depends-On: https://review.openstack.org/592225
Change-Id: I4c4b3dc028b7be9f11e959bfca37867eafa9ca3f
Tobias Urdin