From e4e85a8f835c3890e6c61452ba24990ca4946698 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Tue, 6 Apr 2021 13:40:40 +0100 Subject: [PATCH] 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 --- .../app/components/app-error/index.hbs | 5 +- .../app/components/app-view/index.hbs | 2 +- .../consul-ui/app/components/app/index.hbs | 9 +- .../consul/intention/form/fieldsets/index.hbs | 3 + .../consul/intention/form/index.hbs | 3 + .../app/components/empty-state/README.mdx | 81 ++++++ .../app/components/empty-state/index.hbs | 9 +- .../components/empty-state/index.scss | 2 +- .../components/empty-state/layout.scss | 5 +- .../components/empty-state/skin.scss | 0 .../app/components/error-state/README.mdx | 34 +++ .../components/error-state/README.stories.mdx | 38 --- .../app/components/error-state/index.hbs | 4 +- .../app/components/error-state/index.js | 5 - .../app/components/hashicorp-consul/index.hbs | 45 +++- .../components/hashicorp-consul/pageobject.js | 2 +- .../components/main-nav-horizontal/index.scss | 4 +- .../app/components/modal-dialog/README.mdx | 69 +++++ .../app/components/modal-dialog/index.hbs | 101 ++++---- .../app/components/modal-dialog/index.js | 3 - .../app/components/modal-layer/README.mdx | 8 + .../app/components/outlet/README.mdx | 43 +++ .../app/components/policy-form/index.hbs | 1 + .../app/components/policy-selector/index.hbs | 5 +- .../components/policy-selector/pageobject.js | 2 +- .../app/components/role-form/index.hbs | 3 +- .../app/components/role-selector/index.hbs | 5 +- .../consul-ui/app/components/route/README.mdx | 35 +++ .../consul-ui/app/components/route/index.hbs | 5 + .../consul-ui/app/components/route/index.js | 5 + .../app/components/skip-links/layout.scss | 9 + .../app/components/skip-links/skin.scss | 1 + .../topology-metrics/series/index.hbs | 3 + .../base/decoration/base-placeholders.scss | 11 +- .../app/styles/components/empty-state.scss | 2 +- .../consul-ui/app/templates/application.hbs | 8 +- .../consul-ui/app/templates/dc/acls.hbs | 11 +- .../templates/dc/acls/auth-methods/index.hbs | 190 +++++++------- .../consul-ui/app/templates/dc/acls/edit.hbs | 97 +++---- .../consul-ui/app/templates/dc/acls/index.hbs | 178 +++++++------ .../app/templates/dc/acls/policies/-form.hbs | 3 + .../app/templates/dc/acls/policies/edit.hbs | 113 ++++---- .../app/templates/dc/acls/policies/index.hbs | 215 +++++++-------- .../app/templates/dc/acls/roles/-form.hbs | 7 +- .../app/templates/dc/acls/roles/edit.hbs | 97 ++++--- .../app/templates/dc/acls/roles/index.hbs | 204 +++++++-------- .../app/templates/dc/acls/tokens/edit.hbs | 183 +++++++------ .../app/templates/dc/acls/tokens/index.hbs | 230 ++++++++-------- .../app/templates/dc/intentions/edit.hbs | 62 ++--- .../app/templates/dc/intentions/index.hbs | 245 +++++++++--------- .../consul-ui/app/templates/dc/kv/edit.hbs | 110 ++++---- .../consul-ui/app/templates/dc/kv/index.hbs | 12 +- .../app/templates/dc/nodes/index.hbs | 134 +++++----- .../consul-ui/app/templates/dc/nodes/show.hbs | 162 ++++++------ .../templates/dc/nodes/show/healthchecks.hbs | 124 ++++----- .../app/templates/dc/nodes/show/metadata.hbs | 30 ++- .../app/templates/dc/nodes/show/rtt.hbs | 53 ++-- .../app/templates/dc/nodes/show/services.hbs | 128 ++++----- .../app/templates/dc/nodes/show/sessions.hbs | 66 ++--- .../app/templates/dc/nspaces/edit.hbs | 66 ++--- .../app/templates/dc/nspaces/index.hbs | 192 +++++++------- .../app/templates/dc/services/index.hbs | 8 +- .../app/templates/dc/services/instance.hbs | 14 +- .../dc/services/instance/addresses.hbs | 60 +++-- .../dc/services/instance/exposedpaths.hbs | 36 +-- .../dc/services/instance/healthchecks.hbs | 118 +++++---- .../dc/services/instance/metadata.hbs | 64 ++--- .../dc/services/instance/upstreams.hbs | 110 ++++---- .../app/templates/dc/services/show.hbs | 14 +- .../templates/dc/services/show/instances.hbs | 2 +- .../templates/dc/services/show/intentions.hbs | 13 +- .../dc/services/show/intentions/edit.hbs | 22 +- .../dc/services/show/intentions/index.hbs | 182 ++++++------- .../templates/dc/services/show/routing.hbs | 17 +- .../templates/dc/services/show/services.hbs | 124 ++++----- .../app/templates/dc/services/show/tags.hbs | 34 +-- .../templates/dc/services/show/topology.hbs | 80 +++--- .../templates/dc/services/show/upstreams.hbs | 126 ++++----- .../consul-ui/app/templates/nspace.hbs | 13 +- .../dc/acls/roles/as-many/add-new.feature | 2 +- 80 files changed, 2493 insertions(+), 2028 deletions(-) create mode 100644 ui/packages/consul-ui/app/components/empty-state/README.mdx rename ui/packages/consul-ui/app/{styles => }/components/empty-state/index.scss (92%) rename ui/packages/consul-ui/app/{styles => }/components/empty-state/layout.scss (91%) rename ui/packages/consul-ui/app/{styles => }/components/empty-state/skin.scss (100%) create mode 100644 ui/packages/consul-ui/app/components/error-state/README.mdx delete mode 100644 ui/packages/consul-ui/app/components/error-state/README.stories.mdx delete mode 100644 ui/packages/consul-ui/app/components/error-state/index.js create mode 100644 ui/packages/consul-ui/app/components/modal-dialog/README.mdx create mode 100644 ui/packages/consul-ui/app/components/modal-layer/README.mdx create mode 100644 ui/packages/consul-ui/app/components/outlet/README.mdx create mode 100644 ui/packages/consul-ui/app/components/route/README.mdx diff --git a/ui/packages/consul-ui/app/components/app-error/index.hbs b/ui/packages/consul-ui/app/components/app-error/index.hbs index fabaec5ea0..aa243ac485 100644 --- a/ui/packages/consul-ui/app/components/app-error/index.hbs +++ b/ui/packages/consul-ui/app/components/app-error/index.hbs @@ -5,6 +5,9 @@ - + diff --git a/ui/packages/consul-ui/app/components/app-view/index.hbs b/ui/packages/consul-ui/app/components/app-view/index.hbs index 783cd8e6f9..eca3d01bba 100644 --- a/ui/packages/consul-ui/app/components/app-view/index.hbs +++ b/ui/packages/consul-ui/app/components/app-view/index.hbs @@ -108,7 +108,7 @@ @error={{hash status='403' }} - @allowLogin={{true}} + @login={{login}} /> {{else}} {{yield}} diff --git a/ui/packages/consul-ui/app/components/app/index.hbs b/ui/packages/consul-ui/app/components/app/index.hbs index f18811831c..726f03c61e 100644 --- a/ui/packages/consul-ui/app/components/app/index.hbs +++ b/ui/packages/consul-ui/app/components/app/index.hbs @@ -6,12 +6,15 @@ class="app" ...attributes > -
+ {{t 'components.app.skip_to_content'}} {{!-- In order to add further skip links from within other templates use: @@ -21,11 +24,13 @@ from within your template --}}
+ + diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs index 193fbf047d..096658810d 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs @@ -38,6 +38,9 @@ as |api|> diff --git a/ui/packages/consul-ui/app/components/empty-state/README.mdx b/ui/packages/consul-ui/app/components/empty-state/README.mdx new file mode 100644 index 0000000000..2e3d9e466d --- /dev/null +++ b/ui/packages/consul-ui/app/components/empty-state/README.mdx @@ -0,0 +1,81 @@ +--- +class: ember +--- +# EmptyState + +Consul UIs default 'empty state' used for when we retrive an empty result set, +whether that set is successful or erroneous. This is mainly used via the +`ErrorState` component, so also consider using that directly instead of this +component if dealing with errors. + +## Arguments + +| Argument | Type | Default | Description | +| --- | --- | --- | --- | +| `login` | `Function` | `undefined` | A login action to call when the login button is pressed (if not provided no login button will be shown | + +Icons are controlled via a `status-xxx` class. `xxx` should be some sort of +3 digit error code, special icons are used for `404` and `403`, otherwise a +generic icon will be used. To add any further special icons please add to the +component's `skin` file. + +If the `@login` attribute is provided, a button will be shown directly +underneath the body text clicking on which will fire the provided `@login` +function. + +```hbs preview-template + + +

+ Header +

+ + +

+ Subheader +

+ + +

+ Body text +

+ + +
  • + + Documentation on K/V + +
    • +
  • + + Read the guide + +
    • +     +     +``` + +The component has four slots for specifying header, subheader, body and +'actions', although the component will show a minimal empty slot if only the +body slot is specified: + +```hbs preview-template + + +

    + Minimal text +

    +     +     +``` diff --git a/ui/packages/consul-ui/app/components/empty-state/index.hbs b/ui/packages/consul-ui/app/components/empty-state/index.hbs index 9b16309fe6..c550534956 100644 --- a/ui/packages/consul-ui/app/components/empty-state/index.hbs +++ b/ui/packages/consul-ui/app/components/empty-state/index.hbs @@ -16,8 +16,11 @@ {{#yield-slot name="body"}}
    {{yield}} - {{#if (and (env 'CONSUL_ACLS_ENABLED') allowLogin)}} -
    {{/yield-slot}} diff --git a/ui/packages/consul-ui/app/styles/components/empty-state/index.scss b/ui/packages/consul-ui/app/components/empty-state/index.scss similarity index 92% rename from ui/packages/consul-ui/app/styles/components/empty-state/index.scss rename to ui/packages/consul-ui/app/components/empty-state/index.scss index fae69d384f..04fc9dfeec 100644 --- a/ui/packages/consul-ui/app/styles/components/empty-state/index.scss +++ b/ui/packages/consul-ui/app/components/empty-state/index.scss @@ -13,6 +13,6 @@ %empty-state > ul > li > label > button { @extend %empty-state-anchor; } -%empty-state label { +%empty-state div > button { @extend %primary-button; } diff --git a/ui/packages/consul-ui/app/styles/components/empty-state/layout.scss b/ui/packages/consul-ui/app/components/empty-state/layout.scss similarity index 91% rename from ui/packages/consul-ui/app/styles/components/empty-state/layout.scss rename to ui/packages/consul-ui/app/components/empty-state/layout.scss index d035f9a368..60a8f7f543 100644 --- a/ui/packages/consul-ui/app/styles/components/empty-state/layout.scss +++ b/ui/packages/consul-ui/app/components/empty-state/layout.scss @@ -15,8 +15,9 @@ width: 370px; margin: 0 auto; } -%empty-state label { - margin: 0 auto !important; +%empty-state button { + margin: 0 auto; + display: inline; } %empty-state-header { margin-bottom: -3px; diff --git a/ui/packages/consul-ui/app/styles/components/empty-state/skin.scss b/ui/packages/consul-ui/app/components/empty-state/skin.scss similarity index 100% rename from ui/packages/consul-ui/app/styles/components/empty-state/skin.scss rename to ui/packages/consul-ui/app/components/empty-state/skin.scss diff --git a/ui/packages/consul-ui/app/components/error-state/README.mdx b/ui/packages/consul-ui/app/components/error-state/README.mdx new file mode 100644 index 0000000000..252b419378 --- /dev/null +++ b/ui/packages/consul-ui/app/components/error-state/README.mdx @@ -0,0 +1,34 @@ +# ErrorState + +Consul UIs default 'error state' used when an error is returned form the +backend. This component used `EmptyState` internally, so please refer to that +for more details. + +Using this component for all of our errors means we can show a consistent +error page for generic errors. + +This component show slighltly different visuals and copy depending on the +`status` of the error (the status is generally a HTTP error code) + +## Arguments + +| Argument | Type | Default | Description | +| --- | --- | --- | --- | +| `login` | `Function` | `undefined` | A login action to call when the login button is pressed (if not provided no login button will be shown | +| `error` | `Object` | `undefined` | 'Consul UI error shaped' JSON `{status: String, message: String, detail: String}` | + +```hbs preview-template + +``` + +As with `EmptyState` you can optionally chose to show a login button using the +`@login` argument. + +```hbs preview-template + +``` diff --git a/ui/packages/consul-ui/app/components/error-state/README.stories.mdx b/ui/packages/consul-ui/app/components/error-state/README.stories.mdx deleted file mode 100644 index 4742d859b0..0000000000 --- a/ui/packages/consul-ui/app/components/error-state/README.stories.mdx +++ /dev/null @@ -1,38 +0,0 @@ -import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; -import { hbs } from 'ember-cli-htmlbars'; - - - -# ErrorState - - - {(args) => ({ - template: hbs``, - context: args - })} - - diff --git a/ui/packages/consul-ui/app/components/error-state/index.hbs b/ui/packages/consul-ui/app/components/error-state/index.hbs index 039fb4ade8..d32ad7c0e9 100644 --- a/ui/packages/consul-ui/app/components/error-state/index.hbs +++ b/ui/packages/consul-ui/app/components/error-state/index.hbs @@ -1,7 +1,7 @@ {{#if (not-eq @error.status "403")}}

    {{or @error.message "Consul returned an error"}}

    @@ -34,7 +34,7 @@ {{else}}

    You are not authorized

    diff --git a/ui/packages/consul-ui/app/components/error-state/index.js b/ui/packages/consul-ui/app/components/error-state/index.js deleted file mode 100644 index 4798652642..0000000000 --- a/ui/packages/consul-ui/app/components/error-state/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import Component from '@ember/component'; - -export default Component.extend({ - tagName: '', -}); diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs index 5819452934..e5c467e34b 100644 --- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs +++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs @@ -218,14 +218,28 @@ > {{#let components.AuthForm components.AuthProfile as |AuthForm AuthProfile|}} - - +

    Log in with a different token

    @@ -261,6 +282,14 @@     + + + Logout @@ -295,7 +324,7 @@ <:main> {{yield (hash - modal=this.modal + login=(if (env 'CONSUL_ACLS_ENABLED') this.modal (hash open=undefined)) )}} diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/pageobject.js b/ui/packages/consul-ui/app/components/hashicorp-consul/pageobject.js index b5d3075c78..6b650defa8 100644 --- a/ui/packages/consul-ui/app/components/hashicorp-consul/pageobject.js +++ b/ui/packages/consul-ui/app/components/hashicorp-consul/pageobject.js @@ -42,7 +42,7 @@ export default (collection, clickable, attribute, is, authForm, emptyState) => s status: attribute('data-test-status', '[data-test-status]'), }, }; - page.navigation.login = clickable('[data-test-main-nav-auth] label'); + page.navigation.login = clickable('[data-test-main-nav-auth] button'); page.navigation.dc = clickable('[data-test-datacenter-menu] button'); page.navigation.nspace = clickable('[data-test-nspace-menu] button'); page.navigation.manageNspaces = clickable('[data-test-main-nav-nspaces] a'); diff --git a/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss b/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss index 45fef2c079..a8484febe2 100644 --- a/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss +++ b/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss @@ -4,13 +4,13 @@ /* things that should look like nav buttons */ %main-nav-horizontal > ul > li > a, %main-nav-horizontal > ul > li > span, -%main-nav-horizontal > ul > li > label, +%main-nav-horizontal > ul > li > button, %main-nav-horizontal > ul > li > .popover-menu > label > button { @extend %main-nav-horizontal-action; } %main-nav-horizontal .popover-menu [type='checkbox']:checked + label > *, %main-nav-horizontal > ul > li.is-active > a, -%main-nav-horizontal > ul > li.is-active > label > * { +%main-nav-horizontal > ul > li.is-active > button { @extend %main-nav-horizontal-action-active; } /* Whilst we want spans to look the same as actions */ diff --git a/ui/packages/consul-ui/app/components/modal-dialog/README.mdx b/ui/packages/consul-ui/app/components/modal-dialog/README.mdx new file mode 100644 index 0000000000..0fbcbde88f --- /dev/null +++ b/ui/packages/consul-ui/app/components/modal-dialog/README.mdx @@ -0,0 +1,69 @@ +--- +class: ember +--- +# ModalDialog + +## Arguments + +| Argument | Type | Default | Description | +| --- | --- | --- | --- | +| `onopen` | `Function` | `undefined` | A function to call when the modal has opened | +| `onclose` | `Function` | `undefined` | A function to call when the modal has closed | +| `aria` | `Object` | `undefined` | A `hash` of aria properties used in the component, currently only label is supported | + +## Exports + +| Name | Type | Description | +| --- | --- | --- | +| `open` | `Function` | Opens the modal dialog | +| `close` | `Function` | Closes the modal dialog | + +Works in tandem with `` to render modals. First of all ensure +you have a modal layer on the page (it doesn't have to be in the same +template) + +```hbs + +``` + +Then all modals will be rendered into the `` for example: + +```hbs preview-template + + + + {{did-insert (set this 'modal' modal)}} + + +

    + Modal Header +

    +     + +

    + Modal body +

    +     + + + +     + + + +``` diff --git a/ui/packages/consul-ui/app/components/modal-dialog/index.hbs b/ui/packages/consul-ui/app/components/modal-dialog/index.hbs index 80f1e2fc17..9ad3cd6f3a 100644 --- a/ui/packages/consul-ui/app/components/modal-dialog/index.hbs +++ b/ui/packages/consul-ui/app/components/modal-dialog/index.hbs @@ -1,56 +1,59 @@ - - {{yield}} - - + {{/let}} + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/templates/dc/nodes/show/metadata.hbs b/ui/packages/consul-ui/app/templates/dc/nodes/show/metadata.hbs index d97fd9740a..b3cecf1427 100644 --- a/ui/packages/consul-ui/app/templates/dc/nodes/show/metadata.hbs +++ b/ui/packages/consul-ui/app/templates/dc/nodes/show/metadata.hbs @@ -1,13 +1,17 @@ -
    -{{#if item.Meta}} - -{{else}} - - -

    - This node has no metadata. -

    -     -     -{{/if}} -
    + +
    + {{#if item.Meta}} + + {{else}} + + +

    + This node has no metadata. +

    +     +     + {{/if}} +
    +     diff --git a/ui/packages/consul-ui/app/templates/dc/nodes/show/rtt.hbs b/ui/packages/consul-ui/app/templates/dc/nodes/show/rtt.hbs index cc1539259b..a37eb7670f 100644 --- a/ui/packages/consul-ui/app/templates/dc/nodes/show/rtt.hbs +++ b/ui/packages/consul-ui/app/templates/dc/nodes/show/rtt.hbs @@ -1,26 +1,29 @@ -
    -
    -
    -
    - Minimum -
    -
    - {{format-number tomography.min maximumFractionDigits=2}}ms -
    -
    - Median -
    -
    - {{format-number tomography.median maximumFractionDigits=2}}ms -
    -
    - Maximum -
    -
    - {{format-number tomography.max maximumFractionDigits=2}}ms -
    -
    + +
    +
    +
    +
    + Minimum +
    +
    + {{format-number tomography.min maximumFractionDigits=2}}ms +
    +
    + Median +
    +
    + {{format-number tomography.median maximumFractionDigits=2}}ms +
    +
    + Maximum +
    +
    + {{format-number tomography.max maximumFractionDigits=2}}ms +
    +
    +
    +
    - -
    - + diff --git a/ui/packages/consul-ui/app/templates/dc/nodes/show/services.hbs b/ui/packages/consul-ui/app/templates/dc/nodes/show/services.hbs index 68b0ff9ecc..f9cccb8a6c 100644 --- a/ui/packages/consul-ui/app/templates/dc/nodes/show/services.hbs +++ b/ui/packages/consul-ui/app/templates/dc/nodes/show/services.hbs @@ -1,71 +1,75 @@ -{{#let + + {{#let - (hash - value=(or sortBy "Status:asc") - change=(action (mut sortBy) value="target.selected") - ) + (hash + value=(or sortBy "Status:asc") + change=(action (mut sortBy) value="target.selected") + ) - (hash - status=(hash - value=(if status (split status ',') undefined) - change=(action (mut status) value="target.selectedItems") - ) - source=(hash - value=(if source (split source ',') undefined) - change=(action (mut source) value="target.selectedItems") - ) - searchproperty=(hash - value=(if (not-eq searchproperty undefined) - (split searchproperty ',') - searchProperties + (hash + status=(hash + value=(if status (split status ',') undefined) + change=(action (mut status) value="target.selectedItems") + ) + source=(hash + value=(if source (split source ',') undefined) + change=(action (mut source) value="target.selectedItems") + ) + searchproperty=(hash + value=(if (not-eq searchproperty undefined) + (split searchproperty ',') + searchProperties + ) + change=(action (mut searchproperty) value="target.selectedItems") + default=searchProperties ) - change=(action (mut searchproperty) value="target.selectedItems") - default=searchProperties ) - ) - item.MeshServiceInstances + item.MeshServiceInstances -as |sort filters items|}} -
    - {{#if (gt items.length 0) }} - - + {{#if (gt items.length 0) }} + + - {{/if}} - {{! filter out any sidecar proxies }} - - - - - - - -

    - This node has no service instances{{#if (gt items.length 0)}} matching that search{{/if}}. -

    -     -     -     -     -
    -{{/let}} \ No newline at end of file + {{/if}} + {{! filter out any sidecar proxies }} + + + + + + + +

    + This node has no service instances{{#if (gt items.length 0)}} matching that search{{/if}}. +

    +     +     +     +     +
    + {{/let}} + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/templates/dc/nodes/show/sessions.hbs b/ui/packages/consul-ui/app/templates/dc/nodes/show/sessions.hbs index a4321d23fe..5b78fc6693 100644 --- a/ui/packages/consul-ui/app/templates/dc/nodes/show/sessions.hbs +++ b/ui/packages/consul-ui/app/templates/dc/nodes/show/sessions.hbs @@ -1,30 +1,36 @@ - -
    -{{#if (gt sessions.length 0)}} - -{{else}} - - -

    - Welcome to Lock Sessions -

    -     - -

    - Consul provides a session mechanism which can be used to build distributed locks. Sessions act as a binding layer between nodes, health checks, and key/value data. There are currently no lock sessions present, or you may not have permission to view lock sessions. -

    -     - -
  • - Documentation on sessions -
    • -
  • - Read the guide -
    • -     -     -{{/if}} -
    + + +
    + {{#if (gt sessions.length 0)}} + + {{else}} + + +

    + Welcome to Lock Sessions +

    +     + +

    + Consul provides a session mechanism which can be used to build distributed locks. Sessions act as a binding layer between nodes, health checks, and key/value data. There are currently no lock sessions present, or you may not have permission to view lock sessions. +

    +     + +
  • + Documentation on sessions +
    • +
  • + Read the guide +
    • +     +     + {{/if}} +
    +     diff --git a/ui/packages/consul-ui/app/templates/dc/nspaces/edit.hbs b/ui/packages/consul-ui/app/templates/dc/nspaces/edit.hbs index bf2a5eab65..246daba371 100644 --- a/ui/packages/consul-ui/app/templates/dc/nspaces/edit.hbs +++ b/ui/packages/consul-ui/app/templates/dc/nspaces/edit.hbs @@ -1,33 +1,33 @@ -{{#if create }} - {{page-title 'New Namespace'}} -{{else}} - {{page-title 'Edit Namespace'}} -{{/if}} - - - - - -
      -
    1. All Namespaces
      2. -
    -     - -

    -{{#if create }} - New Namespace -{{else}} - Edit {{item.Name}} -{{/if}} -

    -     - - - - {{ partial 'dc/nspaces/form'}} - -     + + + + + + +
      +
    1. All Namespaces
      2. +
    +     + +

    + {{#if create }} + New Namespace + {{else}} + Edit {{item.Name}} + {{/if}} +

    +     + + + + {{ partial 'dc/nspaces/form'}} + +     +     diff --git a/ui/packages/consul-ui/app/templates/dc/nspaces/index.hbs b/ui/packages/consul-ui/app/templates/dc/nspaces/index.hbs index a3a9eadd57..6b874cc005 100644 --- a/ui/packages/consul-ui/app/templates/dc/nspaces/index.hbs +++ b/ui/packages/consul-ui/app/templates/dc/nspaces/index.hbs @@ -1,100 +1,106 @@ -{{page-title 'Namespaces'}} - -{{#let + + + {{#let - (hash - value=(or sortBy "Name:asc") - change=(action (mut sortBy) value="target.selected") - ) - - (hash - searchproperty=(hash - value=(if (not-eq searchproperty undefined) - (split searchproperty ',') - searchProperties - ) - change=(action (mut searchproperty) value="target.selectedItems") - default=searchProperties + (hash + value=(or sortBy "Name:asc") + change=(action (mut sortBy) value="target.selected") ) - ) - items + (hash + searchproperty=(hash + value=(if (not-eq searchproperty undefined) + (split searchproperty ',') + searchProperties + ) + change=(action (mut searchproperty) value="target.selectedItems") + default=searchProperties + ) + ) -as |sort filters items|}} + items - - - - - -

    - Namespaces -

    -     - - Create - - - {{#if (gt items.length 0)}} - + + + + +

    + Namespaces +

    +     + + Create + + + {{#if (gt items.length 0)}} + - {{/if}} - - - - - - - - - -

    - {{#if (gt items.length 0)}} - No namespaces found - {{else}} - Welcome to Namespaces - {{/if}} -

    -     - -

    - {{#if (gt items.length 0)}} - No namespaces where found matching that search, or you may not have access to view the namespaces you are searching for. - {{else}} - There don't seem to be any namespaces, or you may not have access to view namespaces yet. - {{/if}} -

    -     - -
  • - Documentation on namespaces -
    • -
  • - Read the guide -
    • -     -     -     -     -     -     -{{/let}} \ No newline at end of file + @sort={{sort}} + + @filter={{filters}} + /> + {{/if}} +     + + + + + + + + +

    + {{#if (gt items.length 0)}} + No namespaces found + {{else}} + Welcome to Namespaces + {{/if}} +

    +     + +

    + {{#if (gt items.length 0)}} + No namespaces where found matching that search, or you may not have access to view the namespaces you are searching for. + {{else}} + There don't seem to be any namespaces, or you may not have access to view namespaces yet. + {{/if}} +

    +     + +
  • + Documentation on namespaces +
    • +
  • + Read the guide +
    • +     +     +     +     +     + + {{/let}} + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/templates/dc/services/index.hbs b/ui/packages/consul-ui/app/templates/dc/services/index.hbs index 205827a24d..51de43d715 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/index.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/index.hbs @@ -1,7 +1,7 @@ -{{page-title 'Services'}} + @title="Services" +as |route|> @@ -76,7 +76,9 @@ as |sort filters items|}} - +

    {{#if (gt services.length 0)}} diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs index 417ce52094..d42586c88c 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs @@ -1,4 +1,7 @@ -{{page-title item.Service.ID}} + @@ -10,7 +13,10 @@ - + @@ -88,10 +94,12 @@ }}/> {{outlet}} - \ No newline at end of file + + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance/addresses.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance/addresses.hbs index 6e11c73beb..10b4122261 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/instance/addresses.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/instance/addresses.hbs @@ -1,28 +1,32 @@ -
    - {{#if item.Service.TaggedAddresses }} - - - Tag - Address - - - {{#with (object-at 1 taggedAddress) as |address|}} - - {{object-at 0 taggedAddress}}{{#if (and (eq address.Address item.Address) (eq address.Port item.Port))}} (default){{/if}} - - - {{address.Address}}:{{address.Port}} - - {{/with}} - - - {{else}} -

    - There are no additional addresses. -

    - {{/if}} -
    + +
    + {{#if item.Service.TaggedAddresses }} + + + Tag + Address + + + {{#with (object-at 1 taggedAddress) as |address|}} + + {{object-at 0 taggedAddress}}{{#if (and (eq address.Address item.Address) (eq address.Port item.Port))}} (default){{/if}} + + + {{address.Address}}:{{address.Port}} + + {{/with}} + + + {{else}} +

    + There are no additional addresses. +

    + {{/if}} +
    +     diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance/exposedpaths.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance/exposedpaths.hbs index 9b144f04be..8ac01041c2 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/instance/exposedpaths.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/instance/exposedpaths.hbs @@ -1,16 +1,20 @@ -
    -{{#if (gt proxy.Service.Proxy.Expose.Paths.length 0)}} -

    - The following list shows individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our documentation. -

    - -{{else}} - - -

    - There are no individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our documentation. -

    -     -     -{{/if}} -
    \ No newline at end of file + +
    + {{#if (gt proxy.Service.Proxy.Expose.Paths.length 0)}} +

    + The following list shows individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our documentation. +

    + + {{else}} + + +

    + There are no individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our documentation. +

    +     +     + {{/if}} +
    +     \ No newline at end of file diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance/healthchecks.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance/healthchecks.hbs index c718e194bf..6be92a7365 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/instance/healthchecks.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/instance/healthchecks.hbs @@ -1,68 +1,72 @@ -{{#let + + {{#let - (hash - value=(or sortBy "Status:asc") - change=(action (mut sortBy) value="target.selected") - ) + (hash + value=(or sortBy "Status:asc") + change=(action (mut sortBy) value="target.selected") + ) - (hash - status=(hash - value=(if status (split status ',') undefined) - change=(action (mut status) value="target.selectedItems") - ) - check=(hash - value=(if check (split check ',') undefined) - change=(action (mut check) value="target.selectedItems") - ) - searchproperty=(hash - value=(if (not-eq searchproperty undefined) - (split searchproperty ',') - searchProperties + (hash + status=(hash + value=(if status (split status ',') undefined) + change=(action (mut status) value="target.selectedItems") + ) + check=(hash + value=(if check (split check ',') undefined) + change=(action (mut check) value="target.selectedItems") + ) + searchproperty=(hash + value=(if (not-eq searchproperty undefined) + (split searchproperty ',') + searchProperties + ) + change=(action (mut searchproperty) value="target.selectedItems") + default=searchProperties ) - change=(action (mut searchproperty) value="target.selectedItems") - default=searchProperties ) - ) - item.MeshChecks + item.MeshChecks -as |sort filters items|}} -
    + as |sort filters items|}} +
    - {{#if (gt items.length 0) }} - - + - {{/if}} - - - - - - - - -

    - This instance has no health checks{{#if (gt items.length 0)}} matching that search{{/if}}. -

    -     -     -     -     + {{/if}} -
    -{{/let}} + + + + + + + +

    + This instance has no health checks{{#if (gt items.length 0)}} matching that search{{/if}}. +

    +     +     +     +     + +
    + {{/let}} +     diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance/metadata.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance/metadata.hbs index 0f4a4328df..30cc783a50 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/instance/metadata.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/instance/metadata.hbs @@ -1,30 +1,34 @@ -
    -
    -

    Tags

    - {{#if (gt item.Tags.length 0) }} - - {{else}} - - -

    - There are no tags. -

    -     -     - {{/if}} -
    -
    -

    Meta

    - {{#if item.Meta}} - - {{else}} - - -

    - This instance has no metadata. -

    -     -     - {{/if}} -
    -
    + +
    +
    +

    Tags

    + {{#if (gt item.Tags.length 0) }} + + {{else}} + + +

    + There are no tags. +

    +     +     + {{/if}} +
    +
    +

    Meta

    + {{#if item.Meta}} + + {{else}} + + +

    + This instance has no metadata. +

    +     +     + {{/if}} +
    +
    +     diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs index 6cb5bd5e90..4034f711a3 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs @@ -1,60 +1,64 @@ -
    -{{#let + +
    + {{#let - (hash - value=(or sortBy "DestinationName:asc") - change=(action (mut sortBy) value="target.selected") - ) - - (hash - searchproperty=(hash - value=(if (not-eq searchproperty undefined) - (split searchproperty ',') - searchProperties - ) - change=(action (mut searchproperty) value="target.selectedItems") - default=searchProperties + (hash + value=(or sortBy "DestinationName:asc") + change=(action (mut sortBy) value="target.selected") ) - ) - proxy.Service.Proxy.Upstreams + (hash + searchproperty=(hash + value=(if (not-eq searchproperty undefined) + (split searchproperty ',') + searchProperties + ) + change=(action (mut searchproperty) value="target.selectedItems") + default=searchProperties + ) + ) -as |sort filters items|}} - {{#if (gt items.length 0)}} - - + - {{/if}} - - - - - - - -

    - This service has no upstreams{{#if (gt items.length 0)}} matching that search{{/if}}. -

    -     -     -     -     -{{/let}} -
    \ No newline at end of file + {{/if}} + + + + + + + +

    + This service has no upstreams{{#if (gt items.length 0)}} matching that search{{/if}}. +

    +     +     +     +     + {{/let}} +
    + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/templates/dc/services/show.hbs b/ui/packages/consul-ui/app/templates/dc/services/show.hbs index 8bcc10232e..2542ec769e 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show.hbs @@ -1,8 +1,8 @@ +{{#let items.firstObject as |item|}} - {{#let items.firstObject as |item|}} - {{page-title item.Service.Service}} @@ -14,7 +14,10 @@ as |route|> - + @@ -107,6 +110,7 @@ as |route|> {{outlet}} @@ -114,5 +118,5 @@ as |route|> - {{/let}} - \ No newline at end of file + +{{/let}} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/instances.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/instances.hbs index d1907e0179..b3dc2eb60d 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/instances.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/instances.hbs @@ -1,6 +1,6 @@ +as |route|>
    {{#let diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/intentions.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/intentions.hbs index d20d940ecb..a02351727a 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/intentions.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/intentions.hbs @@ -1,5 +1,10 @@ - - {{outlet}} - +as |route|> + + {{outlet}} + + diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/intentions/edit.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/intentions/edit.hbs index e92ea2c223..e7a71dc14f 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/intentions/edit.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/intentions/edit.hbs @@ -1,9 +1,13 @@ - + + + diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/intentions/index.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/intentions/index.hbs index 8b594f32cd..33a0e81ed1 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/intentions/index.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/intentions/index.hbs @@ -1,96 +1,100 @@ - - - - - -{{#let - - (hash - value=(or sortBy "Action:asc") - change=(action (mut sortBy) value="target.selected") - ) - - (hash - access=(hash - value=(if access (split access ',') undefined) - change=(action (mut access) value="target.selectedItems") - ) - searchproperty=(hash - value=(if (not-eq searchproperty undefined) - (split searchproperty ',') - searchProperties + + + + + + + {{#let + + (hash + value=(or sortBy "Action:asc") + change=(action (mut sortBy) value="target.selected") ) - ) - api.data + (hash + access=(hash + value=(if access (split access ',') undefined) + change=(action (mut access) value="target.selectedItems") + ) + searchproperty=(hash + value=(if (not-eq searchproperty undefined) + (split searchproperty ',') + searchProperties + ) + change=(action (mut searchproperty) value="target.selectedItems") + default=searchProperties + ) + ) -as |sort filters items|}} -
    -{{#if (can 'create intentions')}} - - Create - -{{/if}} -{{#if (gt items.length 0) }} - + {{#if (can 'create intentions')}} + + Create + + {{/if}} + {{#if (gt items.length 0) }} + -{{/if}} + @sort={{sort}} - - - - - - - - - - - - - -

    - There are no intentions {{if (gt items.length 0) 'found '}} for this service. -

    -     -     -     -     -     -     -
    -{{/let}} -     -     + @filter={{filters}} + /> + {{/if}} + + + + + + + + + + + + + + +

    + There are no intentions {{if (gt items.length 0) 'found '}} for this service. +

    +     +     +     +     +     +     +
    + {{/let}} + + +     diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/routing.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/routing.hbs index d89c5a2843..bb81a5ebf3 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/routing.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/routing.hbs @@ -1,7 +1,10 @@ - -
    - -
    - + + +
    + +
    +     diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/services.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/services.hbs index a080c23637..35f4043af8 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/services.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/services.hbs @@ -1,68 +1,72 @@ - -
    -{{#let + + +
    + {{#let - (hash - value=(or sortBy "Status:asc") - change=(action (mut sortBy) value="target.selected") - ) - - (hash - instance=(hash - value=(if instance (split instance ',') undefined) - change=(action (mut instance) value="target.selectedItems") + (hash + value=(or sortBy "Status:asc") + change=(action (mut sortBy) value="target.selected") ) - searchproperty=(hash - value=(if (not-eq searchproperty undefined) - (split searchproperty ',') - searchProperties + + (hash + instance=(hash + value=(if instance (split instance ',') undefined) + change=(action (mut instance) value="target.selectedItems") + ) + searchproperty=(hash + value=(if (not-eq searchproperty undefined) + (split searchproperty ',') + searchProperties + ) + change=(action (mut searchproperty) value="target.selectedItems") + default=searchProperties ) - change=(action (mut searchproperty) value="target.selectedItems") - default=searchProperties ) - ) - items + items -as |sort filters items|}} -{{#if (gt items.length 0)}} - - + -{{/if}} -

    - The following services may receive traffic from external services through this gateway. Learn more about configuring gateways in our - step-by-step guide. -

    - - - - - - - - -

    - There are no linked services{{#if (gt items.length 0)}} matching that search{{/if}}. -

    -     -     -     -     -{{/let}} -
    + @filter={{filters}} + /> + {{/if}} +

    + The following services may receive traffic from external services through this gateway. Learn more about configuring gateways in our + step-by-step guide. +

    + + + + + + + + +

    + There are no linked services{{#if (gt items.length 0)}} matching that search{{/if}}. +

    +     +     +     +     + {{/let}} +
    + diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/tags.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/tags.hbs index 6013df45e9..eb70eb0c89 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/tags.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/tags.hbs @@ -1,15 +1,19 @@ -
    -{{#let (flatten (map-by "Tags" items)) as |tags|}} - {{#if (gt tags.length 0) }} - - {{else}} - - -

    - There are no tags. -

    -     -     - {{/if}} -{{/let}} -
    + +
    + {{#let (flatten (map-by "Tags" items)) as |tags|}} + {{#if (gt tags.length 0) }} + + {{else}} + + +

    + There are no tags. +

    +     +     + {{/if}} + {{/let}} +
    +     diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs index 67457639dc..d9650f24a4 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs @@ -1,39 +1,43 @@ - -
    - {{#if (and (eq topology.Upstreams.length 0) (eq topology.Downstreams.length 0))}} - - -

    - No dependencies -

    -     - -

    - This service has neither downstreams nor upstreams, which means that no services are configured to connect with it. Add upstreams and intentions to ensure this service is connected with the rest of your service mesh. -

    -     - -
  • - Documentation on upstreams -
    • -     -     - {{else}} - {{#if topology.FilteredByACLs}} - + + +
    + {{#if (and (eq topology.Upstreams.length 0) (eq topology.Downstreams.length 0))}} + + +

    + No dependencies +

    +     + +

    + This service has neither downstreams nor upstreams, which means that no services are configured to connect with it. Add upstreams and intentions to ensure this service is connected with the rest of your service mesh. +

    +     + +
  • + Documentation on upstreams +
    • +     +     + {{else}} + {{#if topology.FilteredByACLs}} + + {{/if}} + {{/if}} - - {{/if}} -
    +
    + diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/upstreams.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/upstreams.hbs index f6f54c8f04..0288ce4699 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/upstreams.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/upstreams.hbs @@ -1,68 +1,72 @@ - -
    -{{#let + + +
    + {{#let - (hash - value=(or sortBy "Status:asc") - change=(action (mut sortBy) value="target.selected") - ) - - (hash - instance=(hash - value=(if instance (split instance ',') undefined) - change=(action (mut instance) value="target.selectedItems") + (hash + value=(or sortBy "Status:asc") + change=(action (mut sortBy) value="target.selected") ) - searchproperty=(hash - value=(if (not-eq searchproperty undefined) - (split searchproperty ',') - searchProperties + + (hash + instance=(hash + value=(if instance (split instance ',') undefined) + change=(action (mut instance) value="target.selectedItems") + ) + searchproperty=(hash + value=(if (not-eq searchproperty undefined) + (split searchproperty ',') + searchProperties + ) + change=(action (mut searchproperty) value="target.selectedItems") + default=searchProperties ) - change=(action (mut searchproperty) value="target.selectedItems") - default=searchProperties ) - ) - items + items -as |sort filters items|}} -{{#if (gt items.length 0)}} - - -{{/if}} -

    - Upstreams are services that may receive traffic from this gateway. Learn more about configuring gateways in our documentation. -

    - + - - - - - - - -

    - There are no upstreams{{#if (gt items.length 0)}} matching that search{{/if}}. -

    -     -     -     -     -{{/let}} -
    + @onsearch={{action (mut search) value="target.value"}} + + @sort={{sort}} + + @filter={{filters}} + /> + {{/if}} +

    + Upstreams are services that may receive traffic from this gateway. Learn more about configuring gateways in our documentation. +

    + + + + + + + + +

    + There are no upstreams{{#if (gt items.length 0)}} matching that search{{/if}}. +

    +     +     +     +     + {{/let}} +
    + diff --git a/ui/packages/consul-ui/app/templates/nspace.hbs b/ui/packages/consul-ui/app/templates/nspace.hbs index 2929fdf923..a02351727a 100644 --- a/ui/packages/consul-ui/app/templates/nspace.hbs +++ b/ui/packages/consul-ui/app/templates/nspace.hbs @@ -1,5 +1,10 @@ - - {{outlet}} - \ No newline at end of file +as |route|> + + {{outlet}} + + diff --git a/ui/packages/consul-ui/tests/acceptance/dc/acls/roles/as-many/add-new.feature b/ui/packages/consul-ui/tests/acceptance/dc/acls/roles/as-many/add-new.feature index 66dbb06038..7e0746ad28 100644 --- a/ui/packages/consul-ui/tests/acceptance/dc/acls/roles/as-many/add-new.feature +++ b/ui/packages/consul-ui/tests/acceptance/dc/acls/roles/as-many/add-new.feature @@ -51,7 +51,7 @@ Feature: dc / acls / roles / as-many / add-new: Add new And "[data-notification]" has the "notification-update" class And "[data-notification]" has the "success" class Scenario: Add Role that has an existing Policy - And I click "#new-role-toggle + div .ember-power-select-trigger" + And I click "#new-role .ember-power-select-trigger" And I click ".ember-power-select-option:first-child" And I click submit on the roles.form Then a PUT request was made to "/v1/acl/role?dc=datacenter" from yaml