* 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
* Update list items to be linkable to auth-methods show
* Add general, namespace, and binding sub-routes
* Remove namespace and binding tabs to be done separately
* Update auth-method byId endpoint
* Style the show auth-method kubernetes type
* Finish Kubernetes auth-method type styling
* OIDC and JWT auth-method styling
* Create consul-auth-method-view component
* Add navigation test for auth-methods
* Create Certificate component
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.
This commit use the internal authorize endpoint along wiht ember-can to further restrict user access to certain UI features and navigational elements depending on the users ACL token
* 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
* Create mock-api endpoints for auth-methods
* Implement auth-method endpoints and model with tests
* Create route and tab for auth-methods
* Create auth-method list and type components with styles
* Add JWT and OIDC svg logos to codebase
* Add brand translations
* Add SearchBar to Auth Methods
* Add acceptance test for Auth Methods UI
* Skip auth method repo test
* Changes from review notes
* Fixup auth-method modela and mock-data
* Update SearhBar with rebased changes
* Add filterBy source and sortBy max token ttl
* Update to SortBy MethodName
* Update UI acceptance tests
* Update mock data DisplayNames
* Skip repo test
* Fix to breaking serializer test
* Implement auth-method endpoints and model with tests
* Add acceptance test for Auth Methods UI
* Update SearhBar with rebased changes
* Add filterBy source and sortBy max token ttl
* Update to SortBy MethodName
* Update UI acceptance tests
* Update mock data DisplayNames
* Fix to breaking serializer test
* Update class for search
* Add auth-methods link to sidebar
* Fixup PR review notes
* Fixup review notes
* Only show OIDC filter with enterprise
* Update conditionals for MaxTokenTTL & TokenLocality
* Refactor
* CSS for moving from a horizontal main menu to a side/vertical one
* Add <App /> Component and rearrange <HashcorpConsul /> to use it
1. HashicorpConsul now uses <App />
2. <App /> is now translated and adds 'skip to main content' functionality
3. Adds ember-in-viewport addon in order to visibly hide main navigation
items in order to take them out of focus/tabbing
4. Slight amends to the dom service while I was there
* ui: Keep track of existing intentions and use those to save changes
Previously we risked overwriting existing data in an intention if we
tried to save an intention without having loaded it first, for example
Description and Metadata would have been overwritten.
This change loads in all the intentions for an origin service so we can
pick off the one we need to save and change to ensure that we don't
overwrite any existing data.
* Rename a model attr to not be overwritten by ember-data
* Make sure we can click on the instances
* Make sure we can click back to the preevious page, not root
* Add a forwards/back/forwards navigation test for service instances
* Rename a model attr to not be overwritten by ember-data
Co-authored-by: John Cowen <jcowen@hashicorp.com>
This PR adds the ns=* query parameter when namespaces are enabled to keep backwards compatibility with how the UI used to work (Intentions page always lists all intention across all namespace you have access to)
I found a tiny dev bug for printing out the current URL during acceptance testing and fixed that up while I was there.
Nodes themselves are not namespaced, so we'd originally assumed we did not need to pass through the ns query parameter when listing or viewing nodes.
As it turns out the API endpoints we use to list and view nodes (and related things) return things that are namespaced, therefore any API requests for nodes do require a the ns query parameter to be passed through to the request.
This PR adds the necessary ns query param to all things Node, apart from the querying for the leader which only returns node related information.
Additionally here we decided to show 0 Services text in the node listing if there are nodes with no service instances within the namespace you are viewing, as this is clearer than showing nothing at all. We also cleaned up/standardized the text we use to in the empty state for service instances.
* ui: Install ember-intl
Also:
1. Removes our own format-number in order to use ember-intl's instead
2. Moves format-time to format-short-time so as to not clash with
ember-intls own format-time
In order to test certain setups for our metrics visualizations we need to be able to setup several different `ui_config` settings during development/testing. Generally in the UI, we use the Web Inspector to set various cookie values to configure the UI how we need to see it whilst developing, so this PR:
1. Routes `ui_config` through a dev time only `CONSUL_UI_CONFIG` env variable so we can change it via cookies vars.
2. Adds `CONSUL_METRICS_PROXY_ENABLE`, `CONSUL_METRICS_PROVIDER` and `CONSUL_SERVICE_DASHBOARD_URL` so it's easy to set/unset these only values during development.
3. Adds an acceptance testing step so we can setup `ui_config` to whatever we want during testing.
4. Adds an async 'repository-like' method to the `UiConfig` Service so it feels like a repository - incase we ever need to get this via an HTTP API+blocking query.
5. Vaguely unrelated: we allow cookie values to be set via the location.hash whilst in development only e.g. `/ui/services#CONSUL_METRICS_PROXY_ENABLE=1` so we can link to different setups if we ever need to.
All values added here are empty/falsey by default, so in order to see how it was previously you'll need to set the appropriate cookies values, but you can now also easily preview/test the the metrics viz in different/disabled states (with differing `ui_config`)
* Model layer changes to turn Node:ServiceInstances into hasMany
We tried to make something that feels a little like ember-data yet
not leave our approach of re-shaping the JSON directly from the
response.
1. We added transformHasManyResponse for re-shaping JSON for hasMany
relationships. we avoided the normalize word as ember-data serialize
methods usually return something JSON:API shaped and we distinctly don't
want to do that. Transform was the best word we could think of.
2. The integration tests across all of our models here feel very much
like those types of tests that aren't really testing much, or assert
too much to an extent that they get in the way rather than be of any
use. I'd very much like to move a lot of this to unit tests. Currently
most of the fingerprinting functionality is unit tested and these
integration tests were originally to give confidence that IDs and
related properties were being added correctly.
3. We've added a hasMany relationship, but not the corresponding
belongsTo - yet at least. We don't require the belongsTo right now, and
if we do we can add it later.
* Integrate ServiceInstance search bar for Node:ServiceInstances
* Hide Node.Meta when on the Node:ServiceINstance page
We use a little string replace hack here for a human-like label, this is
soon to be replaced with proper i10n replacement
* Always ensure that a Namespace is set, and add comment explaining
* ui: ServiceInstance.Name should be the Service.Name, never the ID
The ServiceInstance.ID should try Service.ID and fallback to
Service.Name, not ServiceInstance.Name. ServiceInstance.Name is just an
alias to Service.Name which is always set.
* ui: Ensure search is enabled for child items in the ACLs area
* Refactor comparators to reuse some utility functions
* Add search and sorting to the ACLs child selector
* Add tests for searching within child selectors
* Allow sorting by CreateIndex
* ui: Fixup service instance healthcheck list not to show ghost check
If the proxy is undefined, then an undefined vaule is appended to the
list of checks
* There are only 6 checks in the mocks so only expect 6
* Remove Proxy Info and create Upstreams and Exposed Paths tabs
* Update routes formatting
* Update typo for Expose.Checks
* Remove, update, and add tests
* Make consul-upstream-instance-list into a glimmer component
* Create styling for upstream-instance-list component
* ui: Add a warning dialog if you go to remove permissions from an intention
* ui: Move modal styles next to component, add warning style
* ui: Move back to using the input name for a selector
* ui: Fixup negative "isn't" step so its optional
* Add warning modal to pageobject
* Fixup test for whether to show the warning modal or not
* Intention change action warning acceptence test
* Add a null/undefined Action
* Prevent redirect to topology url and hide Topology tab if service has no proxies
* Remove unused computed function from topology model
* Fix up tests
* Remove use of Exists computed function
* Add tests for hiding topology tab
* Update Topology metrics dashboard and configuration links
* Fixup tests
* Remove Dashboard Link from settings page
* Removing use of settings Dashboard links
* 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
John Cowen
Kenia