summaryrefslogtreecommitdiff
path: root/web/package.json
Commit message (Collapse)AuthorAgeFilesLines
* Build zuul web with esbuildClark Boylan2022-10-101-6/+9
| | | | | | | | | 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
* Add job graph support to web UIJames E. Blair2022-08-021-1/+2
| | | | | | | | | | | 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
* Update axios to fix CVE-2022-0536Tristan Cacqueray2022-03-211-1/+1
| | | | | | | | This change updates axios to update follow-redirects. RHBZ# 2062729 Change-Id: I66cb6f2ccada7944660779ab9921a2e84ae9343a
* Update patternfly-reactJames E. Blair2022-03-021-4/+4
| | | | | | | This updates to the latest release of patternfly-react. This is needed for new features for the dropdown component. Change-Id: I6357f477171a1a2b265801de55cc222f2c329ed8
* web: bump re-ansi versionTristan Cacqueray2022-03-011-1/+1
| | | | | | | | 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
* Update patternfly/react-core to 4.175.11Matthieu Huin2021-11-301-2/+2
| | | | Change-Id: I2cc7f0abadd12f572d31178e76b4a1a2243ece8a
* Support auth in multiple tabsJames E. Blair2021-11-181-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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
* web UI: user login with OpenID ConnectMatthieu Huin2021-11-181-0/+2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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
* Upgrade react-router-domJames E. Blair2021-11-181-2/+3
| | | | | | | | | | | | | | | | 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
* web: integrate re-ansi to render ANSI code in Zuul consolesTristan Cacqueray2021-11-091-0/+1
| | | | | | | | | | 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
* Web UI: add builds timeline on buildset pageMatthieu Huin2021-10-041-0/+1
| | | | | | | | 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
* UI: remove immutability-helper dependencyMatthieu Huin2021-09-201-1/+0
| | | | | | | Replace calls to immutability-helper's "update" with equivalent spread operations. Change-Id: I5b913fdd6c793b48dfdc6ed765f7142f14d72711
* web: yarn update to patternfly 2021.11Matthieu Huin2021-09-081-2/+2
| | | | Change-Id: I387949409ca0b78cb89a010b0a83d3b611479e64
* web: JobVariant: use @patternfly/react-tableIan Wienand2021-08-161-1/+1
| | | | | | | | | | | | | | 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
* web: yarn update to latest @patternfly/react-coreIan Wienand2021-08-131-1/+1
| | | | | | | This has some new CSS layout classes to set margins/padding on elements which would be useful. Change-Id: Ie085c58b677d4bdc19d141a21975c5f3524571f0
* web: update to latest xterm; disabled selection overridesIan Wienand2021-06-081-1/+4
| | | | | | | | | | | | | | | | | | 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
* Update react-json-viewJames E. Blair2021-02-231-1/+1
| | | | | | | | | | | 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
* Consolidate js/jsx indentationSorin Sbarnea2020-11-201-1/+2
| | | | | | | | | | | | | 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
* Revert "Enable ANSI rendering via react-ansi"James E. Blair2020-11-191-1/+0
| | | | | | | | | | | | | | | | This reverts commit 896dac877a521490f50264d39516e4fc0990fbcf. 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
* Merge "JS: Don't run tests in watch mode"Zuul2020-11-181-1/+1
|\
| * JS: Don't run tests in watch modeFelix Edel2020-10-081-1/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | By default the react-scripts-test command (which is invoked by `yarn test`) runs in watch mode, meaning it runs the tests on every code change while intelligently trying to run only the tests for the files that change. This may be a matter of personal taste, but I don't quite get a benefit out of this watch mode. First of all, running the tests takes quite some time. Even so we only have a few tests, running those takes around 10 to 20 seconds. If watching mode is enabled, the tests run whenever a file is changed and saved. IMHO this is completely unnecessary as I don't want to run the tests on each file change, but when I think that a change is complete and fully functional. Dependending on the size of the actual change using the watch mode spoils the terminal with annoying test failures as - of course - the change is not complete yet and variables might be undefined, the syntax could be broken or similar. Second, running the tests seems quite resource-hungry and it sometimes slows down the terminal. Third, I'm not sure if the "intelligent" test selection always works, so IMHO it's better to manually run all tests (or manually filter for the relevant tests) when I think it's time to run the tests. Change-Id: Iea1276fc405b360f1cfcba66cd3f6735cb7c5565
* | Merge "PF4: Rework of log viewer page"Zuul2020-11-161-2/+2
|\ \
| * | PF4: Rework of log viewer pageIan Wienand2020-11-041-2/+2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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
* | | Enable ANSI rendering via react-ansiSorin Sbarnea2020-11-031-0/+1
|/ / | | | | | | | | | | | | | | | | | | | | 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
* | Configure redux for developmentFelix Edel2020-10-141-0/+1
|/ | | | | | | | | | | | | | 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
* PF4: Update builds and buildsets tables + use newest patternfly releaseFelix Edel2020-09-231-1/+2
| | | | | | | | | | | | | | | | | | | | 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
* Introduce Patternfly 4Felix Edel2020-07-071-0/+1
| | | | | | | | | | | | | | | | | | | | | | | 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
* Update to create-react-app 3.4.1Monty Taylor2020-05-211-11/+20
| | | | | | | | | | | | | | | | | | | | | | 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
* Add new timezone selector in web interfaceAndy Ladjadj2020-05-201-0/+2
| | | | | | | | - 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
* web: humanize time durationsAntoine Musso2020-02-041-0/+2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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
* Update xterm to >= 3.14.5Clark Boylan2019-07-191-1/+1
| | | | | | | | | | | | | 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
* web: add OpenAPI documentationTristan Cacqueray2019-06-121-0/+2
| | | | | | | 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
* Cap xterm.js to < 3.14Tobias Henkel2019-06-101-1/+1
| | | | | | | | | | | 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
* Update axios version and yarn.lockClark Boylan2019-06-061-2/+2
| | | | | | | | | | | 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
* Revert "web: upgrade react and react-scripts to ^2.0.0"David Shrewsbury2019-05-161-17/+9
| | | | | | | | Dashboard appears to be broken by this. JS errors at: http://paste.openstack.org/show/751488/ This reverts commit 9a4cd7a0264ffc936f43e474131e9b6da0cc1499. Change-Id: I881b28815237cf4b0bc151a267a49162613df72e
* web: upgrade react and react-scripts to ^2.0.0Tristan Cacqueray2019-05-021-9/+17
| | | | | | | | | | - 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
* Update references for opendevMonty Taylor2019-04-241-1/+1
| | | | Change-Id: I3c1ac5478efed4dee1d525deb036d457287fa136
* Use xterm.js for live log streamingTobias Henkel2019-04-011-1/+2
| | | | | | | | | | | | | | | 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
* Use node v10 instead of node v8Monty Taylor2019-02-041-1/+1
| | | | | | | | | | | | | | | | nodejs v10 is the latest LTS release of node. Update to use it instead of v8. One would not expect this to impact us much, but in theory v10 is faster so we could see quicker compile times. Update zuul-build-dashboard to run on changes to install-js-tools. Downloaded the 10.x version of the upstream setup script and updated the header. Made a meaningless change in package.json to trigger build jobs. Change-Id: Ibfc732a9b725f8ee5f0eb51ece11692694956592
* web: add error reducer and info toast notificationTristan Cacqueray2018-12-021-0/+2
| | | | | | | 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
* web: add job pageTristan Cacqueray2018-10-111-0/+2
| | | | | | This change adds a /job/{job_name} web interface. Change-Id: Idbeae3a11ec4180a193923def7dc7f9c53dc9043
* Revert "Revert "web: rewrite interface in react""Tristan Cacqueray2018-10-061-0/+40
| | | | | | This reverts commit 3dba813c643ec8f4b3323c2a09c6aecf8ad4d338. Change-Id: I233797a9b4e3485491c49675da2c2efbdba59449
* Revert "web: rewrite interface in react"James E. Blair2018-09-291-41/+0
| | | | | | | | | | | Revert "Fix publish-openstack-javascript-content" This reverts commit ca199eb9dbb64e25490ee5803e4f18c91f34681d. This reverts commit 1082faae958bffa719ab333c3f5ae9776a8b26d7. This appears to remove the tarball publishing system that we rely on. Change-Id: Id746fb826dfc01b157c5b772adc1d2991ddcd93a
* web: rewrite interface in reactTristan Cacqueray2018-09-271-0/+41
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>