Commit graph

164 commits

Author SHA1 Message Date
Kenia c9b7fe5051
ui: Fix empty SVG height to prevent service mesh from breaking when there are no upstreams (#10122) 2021-04-28 09:22:18 -04:00
John Cowen a389eab7b0
ui: Adds human formatting to nanosecond based session durations (#10062)
* ui: Adds human formatting to nanosecond based session durations
2021-04-28 12:12:56 +01:00
John Cowen 26d1789acf
ui: Vertically stack methods listing in the L7 intentions form (#10052)
* ui: Vertically stack methods listing in the L7 intentions form
2021-04-22 12:23:41 +01:00
John Cowen 2534eb0908
ui: Add Admin Partition feature flag (#10051)
* ui: Add Admin Partition feature flag

This adds a `PartitionEnabled`/`CONSUL_PARTITIONS_ENABLED` feature flag
that can be set during production form the consul binary, or
additionally during development/testing via cookies.

* Add partitions bookmarklet and docs, and all eng docs from main README to the docs instead.

You probably already have the app running once you need these, and it reduces the amount of text/detail in the main README

* Add the env variable section back into the README with actual env vars
2021-04-22 12:22:40 +01:00
John Cowen 363cc8211f
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 72733d9034
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
Freddy 7c9826040c
Merge pull request #10002 from hashicorp/ui/feature/banners-and-labels-for-tproxy-changes 2021-04-15 14:14:20 -06:00
John Cowen 3d0632cf10
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 b62042fe44 review note fixes 2021-04-15 09:19:22 -04:00
kenia f2d8c6fadf Update catalog mock data for Mode attr 2021-04-15 09:19:22 -04:00
kenia 4662f1f35b Refactor TopologyMetrics Notices 2021-04-15 09:19:22 -04:00
kenia a7672cc5ba Create placeholder *(All Services) Card 2021-04-15 09:19:22 -04:00
kenia 31840e6c34 Add translations for topology-mterics and transparent-proxy components 2021-04-15 09:19:22 -04:00
kenia 672c0a818e Create icon and dashed line for intention not explictly defined 2021-04-15 09:19:21 -04:00
kenia 3f86e22a05 Create not explicitly defined intentions banner 2021-04-15 09:19:21 -04:00
kenia eb2b804211 Create TransparentProxy mode label for service instance page 2021-04-15 09:19:21 -04:00
kenia ba3b84085f Create Topology Metrics Source Type to be in each Card 2021-04-15 09:19:21 -04:00
kenia db23ab7d16 Refactor Topology Metrics Card component 2021-04-15 09:19:21 -04:00
kenia 44df7a5cd4 Create warning banners for permissive default-allow and wildcard-intention 2021-04-15 09:19:21 -04:00
kenia bcad886efd Update service-topology mock data with new attributes: TransparentProxy, DefaultAllow, WildcardIntention, and Source 2021-04-15 09:19:21 -04:00
Kenia eb8024375a
ui: Return empty string protocol for upstream/downstream metrics request (#9989) 2021-04-12 09:03:57 -04:00
Kenia 0e0d54d15d
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 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
Kenia 1be5b80d26
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 5ce88774b8
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 5b4ca28c0a
ui: Add a README to the new Certificate component (#9908) 2021-03-23 09:22:09 -04:00
John Cowen 49cf327ab7
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 9fc31000f5
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 f8ea01e615
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 e09b9a2891
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 d47ccb859f
ui: Improves UI engineering docs (#9875)
Also fixes some typos in with-overlay
2021-03-17 15:58:17 +00:00
Kenia eab741eab8
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 5ff1897070
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 62a9dffcae
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 887d8038b1
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 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 ac65aa80c6
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 7c36d749f5
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 1ba9e61e37
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 fbbdc4d352
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 dc183b1786
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 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
Kenia da8280f4c5
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 836527646e
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 08cf0f18a6
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 551ac7b794
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 8b58d81d64
ui: Adds unique-id helper (#9676) 2021-02-02 10:03:46 +00:00
John Cowen 75167fac83
ui: Add 'Scenario' debug function for easy saving debug scenarios (#9675) 2021-02-01 17:50:11 +00:00
John Cowen 30d8ee056e
ui: Adds the dump router dumping function only in dev mode (#9666) 2021-02-01 17:29:43 +00:00
John Cowen 4a7e789cac
ui: Keep track of previous node checks and avoid adding them twice (#9661)
* Keep track of previous node checks and avoid adding them twice
2021-01-29 15:57:47 +00:00