Commit Graph

12 Commits

Author SHA1 Message Date
John Cowen f461906883
ui: Fixup prettier for scss files and run (#10296)
* ui: Ensure prettier makes all our scss files pretty

* Run prettier on all our scss files
2021-05-27 13:23:54 +01:00
John Cowen 489b60105f
ui: Move control of login modal to use JS rather than HTML (label/id) (#9883)
* Add before and after skip links portals

* Move EmptyState and ErrorState to use a @login action/function

* Move page title setting to the Route component

* Add Routes and Outlets everywhere, and use those to access login modal

* Add some aria-labels to the modals

* Docs

* Remove the label/input now we no longer need it, fixup pageobject

* Add basic modal docs

* Switch out old toggle names for ids

* Wrap nspace Route template in a Route component

* type > class
2021-04-06 13:40:40 +01:00
John Cowen a2fa60681a
ui: a11y modals (#9819)
This PR uses the excellent a11y-dialog to implement our modal functionality across the UI.

This package covers all our a11y needs - overlay click and ESC to close, controlling aria-* attributes, focus trap and restore. It's also very small (1.6kb) and has good DOM and JS APIs and also seems to be widely used and well tested.

There is one downside to using this, and that is:

We made use of a very handy characteristic of the relationship between HTML labels and inputs in order to implement our modals previously. Adding a for="id" attribute to a label meant you can control an <input id="id" /> from anywhere else in the page without having to pass javascript objects around. It's just based on using the same string for the for attribute and the id attribute. This allowed us to easily open our login dialog with CSS from anywhere within the UI without having to manage passing around a javascript object/function/method in order to open the dialog.

We've PRed #9813 which includes an approach which would make passing around JS modal object easier to do. But in the meantime we've added a little 'hack' here using an additional <input /> element and a change listener which allows us to keep this label/input characteristic of our old modals. I'd originally thought this would be a temporary amend in order to wait on #9813 but the more I think about it, the more I think its quite a nice thing to keep - so longer term we may/may not keep this.
2021-03-09 09:30:01 +00:00
John Cowen a13ea63484
ui: Add some acceptance testing around the Metrics graph (#9785)
* Add a way to set the local datacenter

* Amend step so we can positively and negatively look for elements

* Add a data-test selector so we can get to the topology series graph

* Add a couple of tests to verify the series graph shows/doesn't show
2021-02-18 18:31:49 +00:00
John Cowen c5978b71e8
ui: Change URI helper to a template based approach (#9344)
This moves our uri helper to use a the template renderer we already have for rendering URLs.
2020-12-09 09:22:46 +00:00
Kenia 811703c302
ui: Refactor topology components (#9339)
* Refactor Stats and Series components

* Refactor metrics error message for ingress-gateway

* Fix upLines icon positioning

* Remove unused variable from being passed down to Stats
2020-12-08 10:47:55 -05:00
Kenia 1b4c8a5515
ui: Fix empty state conditional for Series Graph (#9221) 2020-11-18 14:02:13 -05:00
Kenia c6672da331
ui: Pass down nspace and dc from Service model down to prometheus request (#9175)
* Pass down nspace and dc from Service model down to prometheus request

* Reviewing notes fix-ups

* Fix on dc/nspace to send from upstream/downstream card
2020-11-13 10:39:00 -05:00
Kenia 285962b25b
ui: Topology Intentions Popovers (#9137)
* Refactor grid styling for Topology page

* Crate TopologyMetrics Button component and move styling

* Create intention ID

* fixup button styling

* Return a link to the create intention page

* Rename Button to Popover component

* Fixup serializer test

* ui: Inline Topology Intention Actions  (#9153)

* Add arrow and dot to/from metrics back in

* Add addional space to have metrics wrap and show in smaller screens

* Move logic for finding positioning

* Use color variables

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-11-12 10:40:15 -05:00
Paul Banks df1eec292f
UI metrics provider dc (#9001)
* Plumb Datacenter and Namespace to metrics provider in preparation for them being usable.

* Move metrics loader/status to a new component and show reason for being disabled.

* Remove stray console.log

* Rebuild AssetFS to resolve conflicts

* Yarn upgrade

* mend
2020-10-26 19:48:23 +00:00
Kenia e82004c01a
ui: Fix the pointer events to view the tooltips when hovering over the icons (#9014)
* Fix the pointer events to view the tooltips when hovering over the icons

* Update to use class instead of id
2020-10-23 09:45:39 -04:00
John Cowen c98130cc08
ui: Move to Workspaced Structure (#8994)
* ui: Add the most basic workspace root in /ui

* We already have a LICENSE file in the repository root

* Change directory path in build scripts ui-v2 -> ui

* Make yarn install flags configurable from elsewhere

* Minimal workspace root makefile

* Call the new docker specific target

* Update yarn in the docker build image

* Reconfigure the netlify target and move to the higher makefile

* Move ui-v2 -> ui/packages/consul-ui

* Change repo root to refleect new folder structure

* Temporarily don't hoist consul-api-double

* Fixup CI configuration

* Fixup lint errors

* Fixup Netlify target
2020-10-21 15:23:16 +01:00