This migrates the Labels, Nodes and
Projects pages to using the react-table
component from patternfly.
Change-Id: Iaa75e70f4b0c25113369939f97a297571f2ea7a5
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
When a node is attached multiple labels then all labels are
displayed without seperator.
This changes make sure the labels column is called "Labels" and
that each node's labels is separated by a comma.
Change-Id: I8d3d90ef131847ee6319bb19ec00a07bfd0e82a8
This change updates the nodes page to dispatch reducer action instead
of direct axios call. This enables using the generic error reducers as
well as keeping the nodes in the store to avoid repeated query.
Change-Id: I452c2ea50ae036ba059c18a4973914d100f2a07f
This changes adds a new dashboard page to display nodes status.
Depends-On: https://review.openstack.org/553998
Change-Id: If17ddc2788e8e62f9860c405ad401b04bdf4502b