To make it easier to use the filter interface for config errors,
use the patternfly react-table actions menu feature to put a single
search icon on the right of the table row which pops up a menu
that allows users to add a filter for each filterable column.
This makes it easy to "zoom in" to errors of a particular type o
for a particular project.
The action menu is not compatible with our custom "zuul-table" css,
so that class has been removed here. The main difference at this point
is that it doesn't have the animated highlight on the left side during
mouseover.
Change-Id: I3ebac23296e61cfafcec3d5b37e65fffa4baad40
On the config error page in the web ui, if we have no filters,
and we have performed the tenant info lookup, then we do know how
many total errors there are, so use that value in the pagination
header (but only under those circumstances).
Change-Id: Ia93d46927191ccbbc6577cb504ebe04054bc97af
This switches the config error page to use the new server-side
filtering and pagination support. Note that we still fetch the
full set of config errors in order to display the bell icon. That
will be updated in a future change.
Change-Id: I08a554c2a8151e24e5423608ef016f3273b3d663
This updates the config-errors page to show errors in table format
along with a filter bar.
This allows users to see all of the errors at a glance, or filter
by project or error type.
The table rows show a summary of error information, and each row
can be expanded to show the full error message.
Change-Id: Ie019d4193c730fe84f4bc2827106825093fa68a4
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
There was a type update to our configErrors state from a list of errors
to a dict containing a list of errors and a ready state flag. This broke
the map() call on configErrors in the dedicated config errors page
because you can't map an object only an Array. We fix this by mapping
the objects errors attribute into the page as the config errors allowing
us to keep mapping over it.
Change-Id: Ib84ca9241fb456f9493a07d1c7e1220f5fa925c8
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
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
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
- 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
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
James E. Blair