We render ANSI colors in 3 places:
* Streaming console
* Build task summary tab
* Build console tab
(We do not render ANSI colors in the Build log tab.)
In the streaming console, the default color scheme is white-on-black
which is probably what most devs expect when they render color output.
The other two locations maintain the black-on-white Patternfly default
scheme. This means that some colors (eg yellow) are difficult to read.
In order to accommodate cases where ANSI colors are used, the
color scheme of the preformatted sections in the Build task summary or
Build console tabs is changed to white on black iff an ANSI color
sequence is detected. Otherwise, it remains the Patternfly default
of black on white.
Change-Id: If99d09f614c51495af4ee400891b9a8f2e217db8
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
Currently this displays the task OK, Changed and Failure(s) results in
a traffic-light format. I've been looking at the way some other
similar tools present this sort of info, and I think that a few things
stand out
- the orange for the "changed" status is a bit of a red-herring,
because it suggests a warning but really a changed task is as
"good" as an OK task.
- Secondly, the failure case doesn't stand out enough; failures are
going to be the cause of problems, but you get the same
traffic-light for hosts that ran successfully and failed.
- When nothing has failed, we show "0 failures" -- but that is pretty
much implied by things working. It's a bit redundant and puts up a
red box when there isn't a failure.
This proposes moving into a single tasks results label that is either
green for success, or red if there are failures. If there are no
failures, you just see the count of OK/Changed tasks -- if there are,
you'll also see the failed count.
Change-Id: Iebadc4ddb77209f69242ebc5ac46f2ae6d67789f
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
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 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
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
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
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
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
- 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
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
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
Improves navigation on results page by assuring that browser does wrap
long lines in results <pre> blocks.
Trackpad users are most affected by this because when they scroll a
page vertically, the browser will attempt to also do some horizontal
scrolling of the <pre> block.
The previous experience was relatively similar to the old iframes.
Change-Id: I970c421997b01c27a8f5da431115a3a811499dd8
This change updates the build page to fetch the job-output.json file
and display the failed tasks. Logserver needs to enables CORS
header for the zuul-web service.
Change-Id: Ied9d1bb6489f608bc5402a98c8ae3a24b37b91e2
James E. Blair
