We currently fetch all of the config errors in order to decide whether or
not to show the bell icon in the web ui (which indicates that there are
errors). We recently added a tenant-status endpoint which returns a simple
error count instead of the entire data structure. Use that to decide
whether to show the bell instead.
This builds on the previous change that fetches the config errors on-demand
rather than storing them in the redux store. With that change and this
combined, we no longer need to store the errors in redux. Instead we will
store the error count in redux so we only have to fetch it once when
switching tenants.
Change-Id: I3dfd911af9ba55dd55ca3649ee5ecf6edaa3581a
After updating to the latest version of moment, many pages in the
Zuul web dashboard are observed to raise a TypeError about
"ne.utc(...).tz is not a function" which seems to correspond to the
recent moment library update in change
Id9d0cdec6d6a39542e8248c8690d8a94018296b5. Apparently, use of tz
needs explicit importing of moment from the separate moment-timezone
library, so the prior working state of these scripts likely had
something to do with global state and import order.
The moment-timezone library does not provide a duration method, so
use the plain moment library for that.
Change-Id: Ib75eb65cc29261f010df8c9ab8c15d6491205079
Co-Authored-By: James E. Blair <jim@acmegating.com>
This changes the bell icon at the top to link directly to the
config-errors page.
Currently, the bell icon opens a notification drawer which shows
one rendition of a list of config errors, and if the user clicks
on any error, it navigates to the config-errors page which shows
another rendition.
Rather than having two ways of viewing config errors, let's just
have one.
Change-Id: I630fb2311ec5fa47c8a0dbf8a838c4e0453f32e1
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
This updates the web UI to support the requirement for authn/z
for read-only access.
If authz is required for read access, we will automatically redirect.
If we return and still aren't authorized, we will display an
"Authorization required" page (rather than continuing and popping up
API error notifications).
The API methods are updated to send an authorization token whenever
one is present.
Change-Id: I31c13c943d05819b4122fcbcf2eaf41515c5b1d9
We currently only show the login button when in the context of a
tenant. Now that we have an auth context for the "root" level of
a multi-tenant zuul, show the login button there as well.
Change-Id: Ic1d39951a0cf481c6fac4700ba9bb9338478cd7c
Currently we only set the auth redux property within the tenant
scope. But we're going to extend authentication to outside the
tenant scope (to optionally restrict access to the tenant list).
To accommodate that, we will always update the auth property in
redux any time our tenant changes (including when it changes to
undefined), and we will wait until we have finished auth configuration
before rendering any pages in the app.
This is effectively a no-op change from the end-user point of view,
except that we may wait just a bit longer (for the /api/tenant/info
endpoint to return) before showing an initial page for a tenant.
Change-Id: I18e74fa205f75a7b020bf23c8652226e5170d88b
Verifying the auth token and obtaining user metadata involves some
async HTTP requests in the background. If we remove the auth callback
information from the window location too soon, then the UserManager
will not complete the login process. This currently generally works
because this process tends to complete before the /info and /tenant/info
calls to Zuul. However, future changes to support a read-only
authentication requirement will need to alter this sequence.
This approach is more robust and easier to follow. Essentially the
sequence is:
* Return from IdP to /auth_callback
* If /auth_callback is in our location, short-circuit normal rendering
and render only the AuthCallbackPage
* When background processing is complete, onSignIn will be called and
we will set the user.redirect property in redux.
* AuthCallbackPage has an effect callback on user.redirect which will
cause it to perform the redirect away from auth_callback once
signin is complete.
This process leaves the AuthCallbackPage on the screen a little longer,
so this change updates it to use the newer EmptyPage and Spinner elements
that we have been using elsewhere, so if users see it, it appears more
intentional.
Change-Id: I206c020626c7fd73e58efc29dd50376203679721
There is no /api/tenant/$tenant/components URL, so hide the
"Components" link in the page header when the web ui is accessing
a whitelabel tenant.
Change-Id: I707bf03489016264ce6a37b4eb005e9680de90a2
Change Ib1b6be1b554b30ce7a7d2aacae476cefbed63782 modified the CSS so
that this inherits via <Page>; this explicit class isn't needed any
more.
Change-Id: I36dd2869c4b95eea57d3cd8024311606429bf025
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
Add a "re-enqueue" action command on a Buildset page, displayed only
if the currently logged in user is an admin on the tenant. By
clicking this command, the user can re-enqueue the change with
the same parameters as the buildset.
Redux: turned the API error notifications into a more generic
notification system, that can now include success notifications.
Change-Id: I05b6b3deb912b121df8de207944d9ec26e7c92d1
Under the hood, this uses AuthProvider as supplied by oidc-react.
Most of the theory is explained in the comment in ZuulAuthProvider.jsx
The benefit of doing this is that we allow the AuthProvider and
userManager to handle the callback logic, so we don't need to
handle the callback logic ourselves. A callback page is still required
though in order to deal with the parameters passed in a successful
redirection from the Identity Provider.
The challenge in using these classes as-is is that our authority
endpoints (eg, the IDP itself) may change from one tenant to
the next; these classes aren't set up for that. So we need to be
careful about how and when we change those authority URLs.
In terms of functionalities: if the default realm's authentication driver
is set to "OpenIDConnect", display a "Sign in" button. If the the user
is logged in, redirect to the last page visited prior to logging in;
fetch user authorizations and add them to the redux store; display the
user's preferred username in the upper right corner. Clicking on the
user icon in the right corner displays a modal with user information
such as the user's zuul-client configuration, and a sign out button.
Clicking on the sign out button removes user information from the
store (note that it does not log the user out from the Identity Provider).
Add some basic documentation explaining how to configure Zuul with
Google's authentication, and with a Keycloak server.
(This squashes https://review.opendev.org/c/zuul/zuul/+/816208 into
https://review.opendev.org/c/zuul/zuul/+/734082 )
Co-authored-by: James E. Blair <jim@acmegating.com>
Change-Id: I31e71f2795f3f7c4253d0d5b8ed309bfd7d4f98e
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
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
We seem to be putting the actual error message as the header and the
title (the project + error file) as the body. Swap them around.
The error is preformatted text with embedded newlines. Wrap it in a
<pre> with pre-wrap so it displays correctly.
Change-Id: I9fafafe38a2b24ac8558f97000225f7b53fab9bf
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
In order to avoid cluttering Zuul UI with user preferences in various
places, we introduce a simple config dialog.
This moves "auto reload" option to the preferences panel.
Change-Id: I7201d9e021c99f8e5a936dc98efe3c9d563fbcbc
Co-Authored-By: James E. Blair <jeblair@redhat.com>
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
So far, the highlighting of the active navigation item vanished when
clicking somewhere on the page. AFAIK this behaviour was unchanged with
PF4.
Fix this behaviour by using a NavLink component with the correct PF4 CSS
class for an active nav item.
The nav items will be highlighted as long as the user doesn't switch to
a sub page (e.g. /builds -> /build/12345). Once switched, the
highlighting will again vanish as the path doesn't match the route's
path rule anylonger (/build/12345 != /builds/*).
Change-Id: Id17de4086ee567703ba6c8cae124b131d3ef072c
When the zuul dashboard is deployed on a sub-url, the link on the Zuul
logo did not take the basepath into account.
Fix this by using a Link component instead of a simple <a href...> as
the <a> tag is not aware of any react-router configuration.
Change-Id: Id856d75e88b7731c8326b84619ceaf51a3275426
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
- the default value keep UTC
- the timezone is saved in cookie in zuul_timezone_string
- the render format is YYYY-MM-DD HH:mm:ss
Change-Id: Ib4ac2af4194ac2722c5574577661f4ddda8cc398
This change adds a swagger description of the REST API. The description is
rendered in the sphinx user documentations and in the web interface.
Change-Id: I753524f40a09874dab5952f14ab17025525bbab9
This change adds an ErrorBoundary container for the page content to
display an error message instead of a blank page when a rendering
error occurs.
Change-Id: Ifb41e3c67fc89be7f9264bfa4a23b3ba734c9cec
This change adds a new error reducer to manage error from API calls.
The info actions retries failed info request after 5 seconds.
Change-Id: Ieb2b66a2847650788d9bf68080ab208855941f24
This change adds info fetch state action type and simplifies the main App
by using the new info attributes.
Change-Id: I2cfd3f6ae605051e11f58272e62925d8f97e4ac9
This change applies best practices to split the current reducers module
in logical unit. Each reducer and its actions are moved into different
modules to ease further refactor and follow-up tests.
Change-Id: I75cc41ca3d31a61046868aafbc84505de661a99d
This change adds a Notification drawer to display the config errors and
a dedicated config-errors web interface.
Change-Id: I5cfc608219e26848a20f14e6c99bdb166ac67121
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
James E. Blair