Commit Graph

41 Commits

Author SHA1 Message Date
James E. Blair 59a53b8c7b Update moment version
This updates the js moment dependency to the latest version.  There
have been some CVEs (unclear if they are applicable in Zuul).

Change-Id: Id9d0cdec6d6a39542e8248c8690d8a94018296b5
2023-11-08 13:55:29 -08:00
Clark Boylan c07bacf4b5 Build zuul web with esbuild
This uses react-app-rewired and react-app-required-esbuild to replace
Babel with esbuild to build zuul-web. We do this to speed things up as
Babel is quite slow (6 minutes or so in CI) and esbuild should be much
quicker.

Change-Id: If8f59c0e93e3b8c963ac967e93ffe52b6ba54e06
2022-10-10 10:01:52 -07:00
Ian Wienand 85786777db
web: update to patternfly 4.235.7
This is the result of "npm udpate @patternfly/react-core" which brings
in 4.235.7, which is 2022.11 release (2022-08-31) [1]

The one thing I want from this is that it adds the ability to size
Chip elements, which is helpful when using them as node icons with
nodes that have long names.

[1] https://www.patternfly.org/v4/developer-resources/release-notes/#2022.11-release-notes-2022-08-31

Change-Id: I83061e9b38916d88711a06e3c38b83d7649967fd
2022-09-13 11:24:58 +10:00
James E. Blair 97376adc21 Add job graph support to web UI
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
2022-08-02 08:03:30 -07:00
Tristan Cacqueray 4f61bf13f9 Update axios to fix CVE-2022-0536
This change updates axios to update follow-redirects.

RHBZ# 2062729

Change-Id: I66cb6f2ccada7944660779ab9921a2e84ae9343a
2022-03-21 22:01:57 +00:00
James E. Blair d6ea2cea58 Update patternfly-react
This updates to the latest release of patternfly-react.  This is
needed for new features for the dropdown component.

Change-Id: I6357f477171a1a2b265801de55cc222f2c329ed8
2022-03-02 12:44:39 -08:00
Tristan Cacqueray e0b57df4f5 web: bump re-ansi version
This change updates the re-ansi version to include support
for [m and [K:
  https://softwarefactory-project.io/r/c/software-factory/re-ansi/+/24175

Change-Id: I5cf32b108220407b7c966c5f0ad11f8603c7892a
2022-03-01 20:52:36 +00:00
Matthieu Huin 2e0645fc24 Update patternfly/react-core to 4.175.11
Change-Id: I2cc7f0abadd12f572d31178e76b4a1a2243ece8a
2021-11-30 16:01:18 +01:00
James E. Blair 560fa563db Support auth in multiple tabs
By default the UserManager uses session storage for its authentication
credentials.  That is restricted to a single tab.  In order to support
using the same auth token in multiple tabs, we could switch that to
localStorage which is shared by all tabs of the same domain.  But then
if a user exited the browser, they might be surprised to find that they
were still logged in when restarting.  The typically short lifetime of
OIDC tokens mitigates that somewhat, but it's probably best not to
subvert that expectation anyway.

Instead, we can continue to use session storage by using a BroadcastChannel
to notify other tabs of login/out events and transfer the token info as
well.  This is a standard feature of modern browsers, but we're using
a library that wraps it for two reasons: it supports older browsers
with compatability workarounds if required, and it implements a leader
election protocol.  More on that in a minute.

We would also like to automatically renew tokens shortly before they
expire.  The UserManager has an automatic facility for that, but it
isn't multi-tab aware, so every tab would try to renew at the same time
if we used it.  Instead, we hook into the UserManager timer that fires
about one minute before token expiration and use the leader election to
decide which tab will renew the token.

We renew the token silently in the background with a hidden iframe.  In
this case, instead of using our normal auth callback page, we use a much
simpler "silent callback" which does not render the rest of our application.
This avoids confusion and reduces resource usage.

This also moves any remaining token lifecycle handling out of the Auth
component and into ZuulAuthProvider, so the division of responsibilities
is much simpler.

Change-Id: I17af1a98bf8d704dd7650109aa4979b34086e2fa
2021-11-18 17:40:04 +01:00
Matthieu Huin b13ff51dda web UI: user login with OpenID Connect
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
2021-11-18 16:39:17 +01:00
James E. Blair 59af3e2c17 Upgrade react-router-dom
This updates react-router-dom to not quite the latest version, but
a new enough version that it supports hooks.

This also changes how React Refs are handled in such a way that
it breaks some tests which rely on on reaching through the redux
store into child nodes.  To resolve this, some tests are updated
to use the react-test-renderer instead.

The tests in App.test.jsx were not asserting anything past the
initial toEqual assertion in the path, which is why they are only
now being updated to match links added since the test inception.

Change-Id: Ia80fbfe3cf2d2d275fd8422111ec193c467bf606
2021-11-18 16:39:17 +01:00
Tristan Cacqueray 0e2967814c web: integrate re-ansi to render ANSI code in Zuul consoles
This change replaces react-ansi with a new implementation to render ANSI code
tailored for Zuul consoles. The new implementation supports
font style such as bold, and it detects progress bar sequences.

re-ansi is a simpler component that integrates directly in Zuul UI.

Change-Id: I2511d25d194934b474d1df16b05c46940436880f
2021-11-09 15:09:53 +00:00
Matthieu Huin 288aca320a Web UI: add builds timeline on buildset page
On a given buildset page, the user can toggle a modal displaying
a GANTT-like chart of builds. Builds are color-coded according to
their result.

Change-Id: I9f3cec48308915aa101b358954cfc389275c5737
2021-10-04 10:56:55 +02:00
Matthieu Huin ad1e92089d UI: remove immutability-helper dependency
Replace calls to immutability-helper's "update" with equivalent
spread operations.

Change-Id: I5b913fdd6c793b48dfdc6ed765f7142f14d72711
2021-09-20 14:57:02 +02:00
Matthieu Huin fd599b1019 web: yarn update to patternfly 2021.11
Change-Id: I387949409ca0b78cb89a010b0a83d3b611479e64
2021-09-08 15:49:51 +02:00
Ian Wienand e00ced38cd web: JobVariant: use @patternfly/react-table
Update this to use @patternfly/react-table; apparently the new hotness
is TableComposable so use that.

There is no option in this table component for vertical dividers.  To
maintain a visual difference between heading and data, and for
consistency with the build page, we bold the description column.

This includes the results of a 'yarn upgrade @patternfly/react-table
--latest' run for good measure.

Change-Id: I2f28d49ba1dee6b8d487cf7c5b1043b42f649c9f
2021-08-16 10:47:31 +10:00
Ian Wienand 5a029a560f web: yarn update to latest @patternfly/react-core
This has some new CSS layout classes to set margins/padding on
elements which would be useful.

Change-Id: Ie085c58b677d4bdc19d141a21975c5f3524571f0
2021-08-13 09:02:45 +10:00
Ian Wienand bf4b169525 web: update to latest xterm; disabled selection overrides
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
2021-06-08 19:28:40 +10:00
James E. Blair 5068fdd5e6 Update react-json-view
When showing JSON data in the web app, arrays are currently sorted
as if indexes were strings, not integers.  This is fixed in the
master branch of react-json-view[1] which we assume is in the latest
release.  Update to take advantage of this fix.

[1] https://github.com/mac-s-g/react-json-view/pull/263

Change-Id: I45e26b23981ba8a1d3edc6bd452319c2c6159199
2021-02-23 12:54:15 -08:00
James E. Blair 789f419595 Revert "Enable ANSI rendering via react-ansi"
This reverts commit 896dac877a.

The following issues have been raised:

1) This performs very slowly on large log files.
2) We should confirm that the contrast is appropriate to make
   the text easy for those without perfect vision.
3) We should have consistency between the log and console views.
4) This eliminated horizontal scrolling.  Our previous decision on
   that was that we should maintain horizontal scrolling until we
   add a toggle to switch between that and wrapping.

Change-Id: Ie5a8f4b61e641751fcc9e1c1c5aa944c2c4a5436
2020-11-19 06:19:51 -08:00
Zuul 45ff2bde31 Merge "PF4: Rework of log viewer page" 2020-11-16 02:31:39 +00:00
Ian Wienand 072bf45ff8
PF4: Rework of log viewer page
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
2020-11-04 09:19:07 +01:00
Sorin Sbarnea 896dac877a Enable ANSI rendering via react-ansi
Enables ANSI rendering using react-ansi, which emulates a terminal
and also gives line numbering for free, even being able to colorize
output from some other commands.

Easy to test using build b4655eb004d143379d424fd968c2e196
https://sbarnea.com/ss/Screen-Shot-2020-08-25-16-23-03.45.png

Change-Id: If65641216e43865735cee6e8fb932c41c0cb5f21
2020-11-03 15:24:04 +00:00
Felix Edel 7abe44ef73
Configure redux for development
This enables the redux developer tools for the browser. To make use of
this, one must also install the Redux DevTools extension which is
available for various browsers. The extension visualize all state
transitions in the redux store and also allows changing them manually to
see the effects.

Additionally, this change makes use of the third-party library called
"redux-immutable-state-invariant", which throws exception in development
mode whenever a state is mutated directly within an action or reducer.

Change-Id: I8a8588cd7f5f1b17b247d9700a492e5c1e27f040
2020-10-14 08:20:50 +02:00
Felix Edel 28ecbf42be
PF4: Update builds and buildsets tables + use newest patternfly release
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
2020-09-23 13:07:07 +02:00
Felix Edel 65653bcd01
Introduce Patternfly 4
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
2020-07-07 11:16:48 +02:00
Monty Taylor 36de1dd85b Update to create-react-app 3.4.1
While trying to figure out why the ansi patch wouldn't
build it emerged that we're now 2 major releases behind
on create-react-app.

Update create-react-app to the latest 3.4.1. This also updates
react to 16.13, and updates eslint globals processing so that
we don't have to declare globals in headers when we've
declared them already in the eslint file.

Finally, although this doesn't do it, create-react-app 3
has support for typescript, so if we want we can start migrating
files to .ts or .tsx extensions and start doing typing in
them.

Pin nanoid to v2 until such a time as create-react-app can be
updated to 3.4.2 which is needed ot handle .cjs extensions
being used by nanoid.

Change-Id: Ibc69bef605a62e4fdd2ebba33d9d1b822e7dfeba
2020-05-21 10:55:29 -05:00
Andy Ladjadj 86eba8b05d Add new timezone selector in web interface
- 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
2020-05-20 16:54:54 -05: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 672c4160ee Update xterm to >= 3.14.5
Upstream claims to have fixed the setTheme issue with xterm that led to
us capping it [0]. Separately I've found that latest Firefox 69 beta 6
seems to be broken with log streaming and it appears to be stuck
requesting and animation frame for xterm.js. In an effort to aid
debugging lets update to latest xterm.js as that may fix the problem and
if it doesn't maybe we can escalate to firefox.

[0] https://github.com/xtermjs/xterm.js/pull/2222

Change-Id: I954ee2800e23bbce9c789dc5854a9de6c29f8dcf
2019-07-19 14:16:08 -07:00
Tristan Cacqueray 85616c4c09 web: add OpenAPI documentation
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
2019-06-12 22:35:13 +02:00
Tobias Henkel 651e79d047
Cap xterm.js to < 3.14
This breaks setting the color theme [1].

[1] Trace:
TypeError: Cannot read property 'setTheme' of undefined
Terminal../node_modules/xterm/lib/Terminal.js.Terminal._setTheme
src/zuul/web/node_modules/xterm/lib/Terminal.js:587

Change-Id: I15041815224dd9e0132202ba3c4aebd50466a8ec
2019-06-10 19:22:02 +02:00
Clark Boylan ba6306bc1f Update axios version and yarn.lock
Axios <= 0.18.0 should apparently not be used any longer. Bump this to
0.19.0 and regenerate the yarn lock. This does update all the other
packages too because that is how yarn.lock works.

Note we have to fix the linter errors in the process (and clear out an
annoying warning).

Change-Id: Iabf5171ce8e0ccfabbebc7784da3299b2fd04693
2019-06-06 12:05:52 -07:00
David Shrewsbury da721e6e08 Revert "web: upgrade react and react-scripts to ^2.0.0"
Dashboard appears to be broken by this. JS errors at: http://paste.openstack.org/show/751488/

This reverts commit 9a4cd7a026.

Change-Id: I881b28815237cf4b0bc151a267a49162613df72e
2019-05-16 19:55:31 +00:00
Tristan Cacqueray 9a4cd7a026 web: upgrade react and react-scripts to ^2.0.0
- react-scripts>2.0.0 supports requirements written in newer javascript.
- eslint=5.6.0 is required by react-scripts>2.0.0
- update redux, patternfly-react and react to latest release
- default browserslist is added to the packages.json
- fix new eslint error

Change-Id: Ibee14604b364ce8d4133bcc409a70402bdde9df0
2019-05-02 09:20:22 +00:00
Tobias Henkel bb352a3559
Use xterm.js for live log streaming
We currently use a very simplistic self written mechanism for live log
streaming. This has severe performance drawbacks when dealing with
large live logs. The component xterm.js widely used out there that is
specialized for this task and handles huge logs just fine.

We also don't need the autoscroll checkbox anymore as this is handled
automagically by xterm.js. It stops following the stream when
scrolling and starts following again after scrolling to the bottom.

Further it makes it easy to have clickable links in the live log.

Change-Id: I3492e983bf248b4f286edc1bf9db3d52297da993
2019-04-01 18:56:23 +02:00
Tristan Cacqueray f312f68ec6 web: add error reducer and info toast notification
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
2018-12-02 05:56:38 +00:00
Tristan Cacqueray 6cb6b73615 web: add job page
This change adds a /job/{job_name} web interface.

Change-Id: Idbeae3a11ec4180a193923def7dc7f9c53dc9043
2018-10-11 02:58:06 +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