Commit Graph

471 Commits

Author SHA1 Message Date
John Cowen f6f282ac77
ui: Add information regarding Host header for ingress gateways (#10050)
* Add inline-code CSS component

* Add %inline-code to all the places where we need it

* Inject selected env variables into the translations file

* Add ingress gateway upstream 'host header' intro text

* Make sure we can use actual correct component casing for titles but still have nice consistent menu item casing in the side nav
2021-04-22 12:16:56 +01:00
John Cowen d008dc3d85
ui: Hoist DC menu into the top navigation bar (#10034)
* Add story for %main-nav-vertical plus additions for hoisting menu items

* Make sure we don't source app.css twice

* Hoist the DC menu
2021-04-16 12:13:06 +01:00
Mike Morris f00d5e3a2a
ui: fix mismatched curly brace in mock-api (#10044)
* ui: fix mismatched curly brace in mock-api

* ui: add missing closing paren in mock-api
2021-04-15 18:24:52 -04:00
Freddy daf897f1a9
Merge pull request #10002 from hashicorp/ui/feature/banners-and-labels-for-tproxy-changes 2021-04-15 14:14:20 -06:00
John Cowen f33feeeec4
ui: Never respond with empty gateway addresses (mock-api) (#10035)
We noticed that our mock API would sometimes respond with an empty array
of addresses - which resulted in an empty space in the gateway upstream
listing which looked as though it could be broken.

I checked with backend, and as this will never happen, I made the change
here also so the gateway upstream list is always fully populated with
addresses.
2021-04-15 19:18:37 +01:00
John Cowen 76b2122f38
ui: remove old nspace argument from the proxy instance repository (#10039)
The extra argument meant that the blocking query configuration wasn't
being read properly, and therefore the correct ?index wasn't being sent
with the request.
2021-04-15 19:18:07 +01:00
kenia 703869603e review note fixes 2021-04-15 09:19:22 -04:00
kenia 53a0fc56e9 Update catalog mock data for Mode attr 2021-04-15 09:19:22 -04:00
kenia 876d03a81b Refactor TopologyMetrics Notices 2021-04-15 09:19:22 -04:00
kenia 041245c7dd Create placeholder *(All Services) Card 2021-04-15 09:19:22 -04:00
kenia 934db376f4 Add translations for topology-mterics and transparent-proxy components 2021-04-15 09:19:22 -04:00
kenia 727b6e966b Create icon and dashed line for intention not explictly defined 2021-04-15 09:19:21 -04:00
kenia f5849fd500 Create not explicitly defined intentions banner 2021-04-15 09:19:21 -04:00
kenia 52e88bbf65 Create TransparentProxy mode label for service instance page 2021-04-15 09:19:21 -04:00
kenia fc40212823 Create Topology Metrics Source Type to be in each Card 2021-04-15 09:19:21 -04:00
kenia e9d01a3d4c Refactor Topology Metrics Card component 2021-04-15 09:19:21 -04:00
kenia cdf77e32f2 Create warning banners for permissive default-allow and wildcard-intention 2021-04-15 09:19:21 -04:00
kenia 57d3bf59ee Update service-topology mock data with new attributes: TransparentProxy, DefaultAllow, WildcardIntention, and Source 2021-04-15 09:19:21 -04:00
Kenia 84064f972e
ui: Return empty string protocol for upstream/downstream metrics request (#9989) 2021-04-12 09:03:57 -04:00
Kenia a0d12ff164
ui: Reformat MaxTokenTTL to sortBy as an integer (#9969)
* Install Duration JS

* Use Duration.js to sortBy reformatted MaxTokenTTL

* Remove @icholy/duration package

* Install parse-duration package

* Use parse-duration in auth-method model
2021-04-07 12:43:04 -04:00
John Cowen e4e85a8f83
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
Kenia ee5c3e3aa5
ui: Auth Methods - Namespace rules tab (#9935)
* Add mock data for NamespaceRules

* Create NamespaceTable component and styling

* Add NamespaceRules route and add to model

* Create Namespace Rules tab and implement with flag to only show in ent

* Add emptystate to namespace rules page

* Rename namespace-rules to be nspace-rules

* Rename NamespaceTable to be NspaceList
2021-03-31 10:55:31 -04:00
Kenia 4d13e31ae0
ui: Auth Methods - Create Binding Rules tab (#9914)
* Create BindingRule adapter and tests

* Create BindingRule serializer and test

* Create BindingRule model and repository

* Add binding-rules mock data

* Create binding-rules router and call endpoint

* Create Binding rules tab

* Create and use BindingView component

* Create empty state for BindingView

* Remove binding rule requestForQueryRecord endpoint and tests

* Update binding rules selector to be monospaced

* Add bind type tooltip

* Create and Tabular-dl styling component

* Update hr tag global styling

* Rename BindingView to BindingList and refactor

* Add translations for bind types tooltip info

* Remove unused endpoint

* Refactor based on review notes
2021-03-26 11:47:47 -04:00
Kenia 232921b60e
ui: Add a README to the new Certificate component (#9908) 2021-03-23 09:22:09 -04:00
John Cowen a7a56ca39c
ui: Ensure intention form cancel button works (#9901)
* ui: Ensure intention form cancel button works

By adding `@action` decorators to the actions called form within the
template
2021-03-19 15:14:46 +00:00
John Cowen 0863806769
ui: Dependency Upgrade (#9907)
* Pin ember-changeset-validations and its dependencies to 3.9

Future versions produce a 'validator is not a function' error

* yarn upgrade

* Upgrade the majority of user facing deps that don't required add. change

not upgraded here due to more changes required:

- ember-page-title
- ember-href-to

* Upgrade ember-page-title which no longer requires ember-cli-head

* Upgrade some devtools related dependencies

* Upgrade some non ember-core test utils

* Upgrade js-yaml which required safeLoad > load

* Upgrade some compilation utils

* Yarn install from workspace root

* Add Python-2.0 to compliance checker
2021-03-19 15:14:07 +00:00
Kenia 980299d519
ui: Auth Methods- Updates to certificate and empty state in show page (#9895)
* Update Certificate to be monospaced

* Add empty states for claim and list claim mappings

* Update the styling of empty state actions block

* Update mocked PEM certificate format
2021-03-18 11:18:23 -04:00
John Cowen 8dc590cf11
ui: Add all tooltips to the default tabbing order in the page (#9888)
* ui: Add all tooltips to the default tabbing order in the page

This amends our tooltip modifier to automatically add a tabindex="0" to
all of our tooltips (if they aren't tabbable already).

This means that all tooltips will automatically be
added to the natural tab order of the page. I'm pretty sure we don't
currently require the ability to disable this automatic functionality
but if we do at some point in the future we can add an option to disable
it, meaning all tooltips will be tabbable by default.
2021-03-18 14:35:50 +00:00
John Cowen 9e715842d9
ui: Improves UI engineering docs (#9875)
Also fixes some typos in with-overlay
2021-03-17 15:58:17 +00:00
Kenia f9e8b26af6
ui: Create auth-method show page with General Info Tab (#9845)
* 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
2021-03-17 10:40:56 -04:00
John Cowen aca7976580
ui: Adds warning icon to side menu when ACLs are disabled (#9864)
* ui: Adds warning icon to side menu when ACLs are are disabled
2021-03-17 11:23:00 +00:00
John Cowen 41471719e6
ui: CSP Improvements (#9847)
* Configure ember-auto-import so we can use a stricter CSP

* Create a fake filesystem using JSON to avoid inline scripts in index

We used to have inline scripts in index.html in order to support embers
filepath fingerprinting and our configurable rootURL.

Instead of using inline scripts we use application/json plus a JSON blob
to create a fake filesystem JSON blob/hash/map to hold all of the
rootURL'ed fingerprinted file paths which we can then retrive later in
non-inline scripts.

We move our inlined polyfills script into the init.js external script,
and we move the CodeMirror syntax highlighting configuration inline
script into the main app itself - into the already existing CodeMirror
initializer (this has been moved so we can lookup a service located
document using ember's DI container)

* Set a strict-ish CSP policy during development
2021-03-17 10:46:21 +00:00
John Cowen fa6687b7f4
ui: Implement ACLs access based on ACLs (#9835)
Adds restrictions to everything within the ACLs (and nspaces) area based on your ACLs (including readonly views etc.)
2021-03-11 09:29:11 +00:00
John Cowen 33d0383779
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 308e5a480e
ui: Remove storybook, add docfy (#9831)
This PR removes storybook and adds docfy and uses docfy to render our existing README files.

This now means we can keep adding README documentation without committing any specific format or framework. If we eventually move to storybook then fine, or if we just want to remove docfy for whatever reason then fine - we will still have a full set of README files viewable via GitHub.
2021-03-08 12:22:01 +00:00
John Cowen 61eef053db
ui: Add Route component / routlet service (#9813)
* Add Routlet service and Route Component

* Add ember-assign-helper (already an indirect dependency)

* Use EventListeners for is-href instead of observing

* Don't include :active in '-intent' styles
2021-03-08 12:15:54 +00:00
John Cowen 779f7f7b60
ui: Side navigation tweaks (#9812)
* Remove footer and add the Consul version to the Help menu

* Tweak menu text and button styling

* Tweak some coloring and spacing

* Add slightly larger Consul logo
2021-02-25 09:35:53 +00:00
John Cowen f9b0e50ca0
ui: Update project blueprints for native classes (#9775) 2021-02-24 09:03:18 +00:00
John Cowen 8b12d0d09d
ui: DataSource Decorator (#9746)
We use a `<DataSource @src={{url}} />` component throughout our UI for when we want to load data from within our components. The URL specified as the `@src` is used to map/lookup what is used in to retrieve data, for example we mostly use our repository methods wrapped with our Promise backed `EventSource` implementation, but DataSource URLs can also be mapped to EventTarget backed `EventSource`s and native `EventSource`s or `WebSockets` if we ever need to use those (for example these are options for potential streaming support with the Consul backend).

The URL to function/method mapping previous to this PR used a very naive humongous `switch` statement which was a temporary 'this is fine for the moment' solution, although we'd always wanted to replace with something more manageable.

Here we add `wayfarer` as a dependency - a very small (1kb), very fast, radix trie based router, and use that to perform the URL to function/method mapping.

This essentially turns every `DataSource` into a very small SPA - change its URL and the view of data changes. When the data itself changes, either the yielded view of data changes or the `onchange` event is fired with the changed data, making the externally sourced view of data completely reactive.

```javascript
// use the new decorator a service somewhere to annotate/decorate
// a method with the URL that can be used to access this method
@dataSource('/:ns/:dc/services')
async findAllByDatacenter(params) {
  // get the data
}

// can use with JS in a route somewhere
async model() {
  return this.data.source(uri => uri`/${nspace}/${dc}/services`)
}
```

```hbs
{{!-- or just straight in a template using the component --}}
<DataSource @src="/default/dc1/services" @onchange="" />
```

This also uses a new `container` Service to automatically execute/import certain services yet not execute them. This new service also provides a lookup that supports both standard ember DI lookup plus Class based lookup or these specific services. Lastly we also provide another debug function called DataSourceRoutes() which can be called from console which gives you a list of URLs and their mappings.
2021-02-23 08:56:42 +00:00
John Cowen 2c2e9d1ce5
ui: Add an optional environment variable to control how testem starts (#9793)
Here we look for a TESTEM_AUTOLAUNCH environment variable, which can be
set to either Chrome, Firefox or Safari, which will control which
browser to automatically start when running testem tests.

If the variable is set to anything else, then it will not automatically
start a browser in order to run the tests and you will need to visit the
tests manually. e.g.:

TESTEM_AUTOLAUNCH=0 make test-oss-view

Previously we only ever tested in Chrome and therefore there are no
specific settings for Firefox or Safari. If specific settings are
required for these browsers they can be added at a later date.
2021-02-22 14:53:05 +00:00
John Cowen 8263879e6f
ui: Restrict the viewing/editing of certain UI elements based on the users ACLs (#9687)
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
2021-02-19 16:42:16 +00:00
John Cowen 7be21a9027
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
Kenia 1507dd8ab3
ui: Auth Methods List view (#9617)
* 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
2021-02-17 13:56:56 -05:00
Kenia 1b5087f6e5
ui: Use ember-on-resize-modifier to fix bug with sidebar (#9761)
* Use ember-on-resize-modifier to fix bug with sidebar

* Fix recursive height by dynamically setting fixed height

* Refactor
2021-02-17 13:51:48 -05:00
John Cowen 96204a21d8
ui: [BUGFIX] Ensure we show the correct count of instances for each node (#9749)
* Add MeshServiceInstances property to node model

* Use MeshServiceInstances property

* Make sure we show the 'No * checks' if Checks.length is zero
2021-02-11 11:36:36 +00:00
John Cowen 369637aff7
ui: Update browser targets to ~2016 browsers (#9729)
* ui: Reduce range of browsers in targets.js `'Chrome 55', 'Firefox 53', 'Safari 13', 'Edge 15'`

* ui: Remove auto-prefixer
2021-02-11 10:03:13 +00:00
John Cowen eda38a0ba1
ui: [BUGFIX] Replace all replaceAll with split.join for older browsers without replaceAll (#9715)
* ui: replace all `replaceAll` with split.join

* Use a div instead of fieldset for flex-box reasons
2021-02-11 09:49:39 +00:00
John Cowen e0ff7080ae
ui: Adds unique-id helper (#9676) 2021-02-02 10:03:46 +00:00
John Cowen 0b7d676dcb
ui: Add 'Scenario' debug function for easy saving debug scenarios (#9675) 2021-02-01 17:50:11 +00:00
John Cowen 3aef5cde20
ui: Adds the dump router dumping function only in dev mode (#9666) 2021-02-01 17:29:43 +00:00