diff --git a/ui-v2/app/components/consul-exposed-path-list/index.hbs b/ui-v2/app/components/consul-exposed-path-list/index.hbs new file mode 100644 index 0000000000..ec580f01f8 --- /dev/null +++ b/ui-v2/app/components/consul-exposed-path-list/index.hbs @@ -0,0 +1,71 @@ + diff --git a/ui-v2/app/components/consul-exposed-path-list/index.js b/ui-v2/app/components/consul-exposed-path-list/index.js new file mode 100644 index 0000000000..4798652642 --- /dev/null +++ b/ui-v2/app/components/consul-exposed-path-list/index.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + tagName: '', +}); diff --git a/ui-v2/app/components/consul-metadata-list/README.mdx b/ui-v2/app/components/consul-metadata-list/README.mdx index cb5c04d79c..640807570a 100644 --- a/ui-v2/app/components/consul-metadata-list/README.mdx +++ b/ui-v2/app/components/consul-metadata-list/README.mdx @@ -8,7 +8,7 @@ A presentational component for presenting Consul Metadata | Argument/Attribute | Type | Default | Description | | --- | --- | --- | --- | -| `items` | `array` | | A an array of entries or `[key, value]` pairs as returned by `Object.entries()` | +| `items` | `array` | | An array of entries or `[key, value]` pairs as returned by `Object.entries()` | ### Example diff --git a/ui-v2/app/components/consul-service-instance-list/index.hbs b/ui-v2/app/components/consul-service-instance-list/index.hbs index 20f297a2bb..3756f4b679 100644 --- a/ui-v2/app/components/consul-service-instance-list/index.hbs +++ b/ui-v2/app/components/consul-service-instance-list/index.hbs @@ -1,30 +1,32 @@ -{{yield}} {{#if (gt items.length 0)}} - - {{item.Service.ID}} - - + {{/if}} \ No newline at end of file diff --git a/ui-v2/app/components/consul-service-list/index.hbs b/ui-v2/app/components/consul-service-list/index.hbs index 740f152a9f..8419611956 100644 --- a/ui-v2/app/components/consul-service-list/index.hbs +++ b/ui-v2/app/components/consul-service-list/index.hbs @@ -1,20 +1,24 @@ -{{yield}} {{#if (gt items.length 0)}} -
  • - - - {{#if (eq 'critical' (service/health-checks item))}} - At least one health check on one instance is failing. - {{else if (eq 'warning' (service/health-checks item))}} - At least one health check on one instance has a warning. - {{else if (eq 'passing' (service/health-checks item))}} - All health checks are passing. - {{else}} - There are no health checks. - {{/if}} - - + +
    +
    + Health +
    +
    + + {{#if (eq 'critical' (service/health-checks item))}} + At least one health check on one instance is failing. + {{else if (eq 'warning' (service/health-checks item))}} + At least one health check on one instance has a warning. + {{else if (eq 'passing' (service/health-checks item))}} + All health checks are passing. + {{else}} + There are no health checks. + {{/if}} + +
    +
    {{#if (eq item.Kind 'terminating-gateway')}} {{item.Name}} @@ -28,40 +32,42 @@ {{item.Name}} {{/if}} -
  • - +
    {{/if}} \ No newline at end of file diff --git a/ui-v2/app/components/consul-token-list/README.mdx b/ui-v2/app/components/consul-token-list/README.mdx new file mode 100644 index 0000000000..d75871f9dd --- /dev/null +++ b/ui-v2/app/components/consul-token-list/README.mdx @@ -0,0 +1,32 @@ +## ConsulTokenList + +``` + +``` + +A presentational component for rendering Consul ACL tokens + +### Arguments + +| Argument/Attribute | Type | Default | Description | +| --- | --- | --- | --- | +| `items` | `array` | | An array of ACL tokens | +| `token` | `Token` | | A token object to use for comparision for current token, usually the users current token | +| `onuse` | `function` | | An action to execute when the `Use` action is clicked | +| `ondelete` | `function` | | An action to execute when the `Delete` action is clicked | +| `onlogout` | `function` | | An action to execute when the `Logout` action is clicked | +| `onclone` | `function` | | An action to execute when the `Clone/Duplicate` action is clicked | + +### See + +- [Component Source Code](./index.js) +- [TemplateSource Code](./index.hbs) + +--- diff --git a/ui-v2/app/components/consul-token-list/index.hbs b/ui-v2/app/components/consul-token-list/index.hbs new file mode 100644 index 0000000000..8f5b8f3aaa --- /dev/null +++ b/ui-v2/app/components/consul-token-list/index.hbs @@ -0,0 +1,157 @@ +{{#if (gt items.length 0)}} + + +{{#if (eq item.AccessorID token.AccessorID)}} +
    +
    + + Your token + +
    +
    +{{/if}} +{{substr item.AccessorID -8}} +
    + +
    +
    Scope
    +
    + {{if item.Local 'local' 'global' }} +
    +
    +{{#let (policy/group item.Policies) as |policies|}} + {{#let (get policies 'management') as |management|}} + {{#if (gt management.length 0)}} +
    +
    Management
    +
    + {{#each (get policies 'management') as |item|}} + {{item.Name}} + {{/each}} +
    +
    + {{/if}} + {{/let}} +
    +
    Identities
    +
    + {{#each (append (get policies 'identities')) as |item|}} + Service Identity: {{item.Name}} + {{/each}} +
    +
    +
    +
    Rules
    +
    + {{#if (token/is-legacy item) }} + Legacy tokens have embedded rules. + {{ else }} + {{#each (append (get policies 'policies') item.Roles) as |item|}} + {{item.Name}} + {{/each}} + {{/if}} +
    +
    +{{/let}} +
    +
    Description
    +
    + {{or item.Description item.Name}} +
    +
    +
    + +
    + + + More + + +
  • + Edit +
  • +{{#if (not (token/is-legacy item))}} +
  • + +
  • +{{/if}} +{{#if (eq item.AccessorID token.AccessorID) }} +
  • + +
    +
    +
    +
    + Confirm logout +
    +

    + Are you sure you want to stop using this ACL token? This will log you out. +

    +
    +
      +
    • + +
    • +
    • + +
    • +
    +
    +
    +
  • +{{else}} +
  • + +
    +
    +
    +
    + Confirm use +
    +

    + Are you sure you want to use this ACL token? +

    +
    +
      +
    • + +
    • +
    • + +
    • +
    +
    +
    +
  • +{{/if}} +{{#unless (or (token/is-anonymous item) (eq item.AccessorID token.AccessorID)) }} +
  • + +
    +
    +
    +
    + Confirm Delete +
    +

    + Are you sure you want to delete this token? +

    +
    +
      +
    • + +
    • +
    • + +
    • +
    +
    +
    +
  • +{{/unless}} +
    +
    +
    +
    +
    +{{/if}} \ No newline at end of file diff --git a/ui-v2/app/components/consul-token-list/index.js b/ui-v2/app/components/consul-token-list/index.js new file mode 100644 index 0000000000..4798652642 --- /dev/null +++ b/ui-v2/app/components/consul-token-list/index.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + tagName: '', +}); diff --git a/ui-v2/app/components/consul-token-list/pageobject.js b/ui-v2/app/components/consul-token-list/pageobject.js new file mode 100644 index 0000000000..f03055cfc0 --- /dev/null +++ b/ui-v2/app/components/consul-token-list/pageobject.js @@ -0,0 +1,15 @@ +export default (collection, clickable, attribute, text, deletable) => () => { + return collection('.consul-token-list li:not(:first-child)', { + id: attribute('data-test-token', '[data-test-token]'), + description: text('[data-test-description]'), + policy: text('[data-test-policy].policy', { multiple: true }), + role: text('[data-test-policy].role', { multiple: true }), + serviceIdentity: text('[data-test-policy].policy-service-identity', { multiple: true }), + token: clickable('a'), + actions: clickable('label'), + use: clickable('[data-test-use]'), + confirmUse: clickable('[data-test-confirm-use]'), + clone: clickable('[data-test-clone]'), + ...deletable(), + }); +}; diff --git a/ui-v2/app/components/consul-upstream-instance-list/index.hbs b/ui-v2/app/components/consul-upstream-instance-list/index.hbs new file mode 100644 index 0000000000..131db350e3 --- /dev/null +++ b/ui-v2/app/components/consul-upstream-instance-list/index.hbs @@ -0,0 +1,59 @@ + diff --git a/ui-v2/app/components/consul-upstream-instance-list/index.js b/ui-v2/app/components/consul-upstream-instance-list/index.js new file mode 100644 index 0000000000..4798652642 --- /dev/null +++ b/ui-v2/app/components/consul-upstream-instance-list/index.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + tagName: '', +}); diff --git a/ui-v2/app/components/consul-upstream-list/index.hbs b/ui-v2/app/components/consul-upstream-list/index.hbs new file mode 100644 index 0000000000..f027f8eb5a --- /dev/null +++ b/ui-v2/app/components/consul-upstream-list/index.hbs @@ -0,0 +1,69 @@ + + +{{#if (service/exists item)}} +
    +
    + Health +
    +
    + + {{#if (eq 'critical' (service/health-checks item))}} + At least one health check on one instance is failing. + {{else if (eq 'warning' (service/health-checks item))}} + At least one health check on one instance has a warning. + {{else if (eq 'passing' (service/health-checks item))}} + All health checks are passing. + {{else}} + There are no health checks. + {{/if}} + +
    +
    + {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace nspace))}} + + {{item.Name}} + + {{else}} + + {{item.Name}} + + {{/if}} +{{else}} +

    + {{item.Name}} +

    +{{/if}} +
    + +
      + {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace nspace))}} +
    • + + + Namespace + + + + {{item.Namespace}} + +
    • + {{/if}} + {{#if (not-eq item.GatewayConfig.ListenerPort 0)}} +
    • + + + Port + + + + :{{item.GatewayConfig.ListenerPort}} + + +
    • + {{/if}} +
    +
    +
    diff --git a/ui-v2/app/components/consul-upstream-list/index.js b/ui-v2/app/components/consul-upstream-list/index.js new file mode 100644 index 0000000000..4798652642 --- /dev/null +++ b/ui-v2/app/components/consul-upstream-list/index.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + tagName: '', +}); diff --git a/ui-v2/app/components/copy-button/chart.xstate.js b/ui-v2/app/components/copy-button/chart.xstate.js new file mode 100644 index 0000000000..2d8d9c5944 --- /dev/null +++ b/ui-v2/app/components/copy-button/chart.xstate.js @@ -0,0 +1,29 @@ +export default { + id: 'copy-button', + initial: 'idle', + on: { + RESET: [ + { + target: 'idle', + }, + ], + }, + states: { + idle: { + on: { + SUCCESS: [ + { + target: 'success', + }, + ], + ERROR: [ + { + target: 'error', + }, + ], + }, + }, + success: {}, + error: {}, + }, +}; diff --git a/ui-v2/app/components/copy-button/index.hbs b/ui-v2/app/components/copy-button/index.hbs index 5d76e035fa..541a129e77 100644 --- a/ui-v2/app/components/copy-button/index.hbs +++ b/ui-v2/app/components/copy-button/index.hbs @@ -1,17 +1,16 @@ - - - - - - - -

    - Copied {{name}}! -

    -
    - -

    - Sorry, something went wrong! -

    -
    -
    + + + + + Copied {{name}}! + + + + + There was an problem! + + +
    + +
    +
    diff --git a/ui-v2/app/components/copy-button/index.js b/ui-v2/app/components/copy-button/index.js index e0b3d0ec13..1e2b950b0f 100644 --- a/ui-v2/app/components/copy-button/index.js +++ b/ui-v2/app/components/copy-button/index.js @@ -1,5 +1,6 @@ import Component from '@ember/component'; import { inject as service } from '@ember/service'; +import chart from './chart.xstate'; export default Component.extend({ clipboard: service('clipboard/os'), @@ -7,6 +8,7 @@ export default Component.extend({ tagName: '', init: function() { this._super(...arguments); + this.chart = chart; this.guid = this.dom.guid(this); this._listeners = this.dom.listeners(); }, @@ -16,14 +18,9 @@ export default Component.extend({ }, didInsertElement: function() { this._super(...arguments); - const component = this; - this._listeners.add(this.clipboard.execute(`#${this.guid}`), { - success: function() { - component.success(...arguments); - }, - error: function() { - component.error(...arguments); - }, + this._listeners.add(this.clipboard.execute(`#${this.guid} button`), { + success: () => this.dispatch('SUCCESS'), + error: () => this.dispatch('ERROR'), }); }, }); diff --git a/ui-v2/app/components/feedback-dialog/index.hbs b/ui-v2/app/components/feedback-dialog/index.hbs deleted file mode 100644 index 18961c1bb2..0000000000 --- a/ui-v2/app/components/feedback-dialog/index.hbs +++ /dev/null @@ -1,11 +0,0 @@ -
    - {{yield}} - {{#if (eq state 'success') }} - {{yield}} - {{else if (eq state 'error') }} - {{yield}} - {{/if}} - {{#if (or permanent (eq state 'ready')) }} - {{yield}}{{message}} - {{/if}} -
    diff --git a/ui-v2/app/components/feedback-dialog/index.js b/ui-v2/app/components/feedback-dialog/index.js deleted file mode 100644 index 441d2fa884..0000000000 --- a/ui-v2/app/components/feedback-dialog/index.js +++ /dev/null @@ -1,51 +0,0 @@ -import Component from '@ember/component'; -import { set } from '@ember/object'; -import { inject as service } from '@ember/service'; - -import SlotsMixin from 'block-slots'; -const STATE_READY = 'ready'; -const STATE_SUCCESS = 'success'; -const STATE_ERROR = 'error'; -export default Component.extend(SlotsMixin, { - wait: service('timeout'), - dom: service('dom'), - transition: '', - transitionClassName: 'feedback-dialog-out', - state: STATE_READY, - permanent: true, - tagName: '', - init: function() { - this._super(...arguments); - this.success = this._success.bind(this); - this.error = this._error.bind(this); - }, - applyTransition: function() { - const wait = this.wait.execute; - const className = this.transitionClassName; - // TODO: Make 0 default in wait - wait(0) - .then(() => { - set(this, 'transition', className); - return wait(0); - }) - .then(() => { - return new Promise(resolve => { - this.dom - .element(`.${className}`, this.$feedback) - .addEventListener('transitionend', resolve); - }); - }) - .then(() => { - set(this, 'transition', ''); - set(this, 'state', STATE_READY); - }); - }, - _success: function() { - set(this, 'state', STATE_SUCCESS); - this.applyTransition(); - }, - _error: function() { - set(this, 'state', STATE_ERROR); - this.applyTransition(); - }, -}); diff --git a/ui-v2/app/components/list-collection/index.hbs b/ui-v2/app/components/list-collection/index.hbs index 80349e0808..71518f7996 100644 --- a/ui-v2/app/components/list-collection/index.hbs +++ b/ui-v2/app/components/list-collection/index.hbs @@ -1,15 +1,18 @@ -
  • {{~#each _cells as |cell|~}} -
  • - {{yield cell.item cell.index }} +
  • +
    {{yield cell.item cell.index checked (action "change")}}
    +
    {{yield cell.item cell.index checked (action "change")}}
    +
    {{yield cell.item cell.index checked (action "change")}}
  • {{~/each~}}
    \ No newline at end of file diff --git a/ui-v2/app/components/list-collection/index.js b/ui-v2/app/components/list-collection/index.js index 1507e3bcfb..b414eb477d 100644 --- a/ui-v2/app/components/list-collection/index.js +++ b/ui-v2/app/components/list-collection/index.js @@ -1,18 +1,21 @@ import { inject as service } from '@ember/service'; -import { computed, get } from '@ember/object'; +import { computed, get, set } from '@ember/object'; import Component from 'ember-collection/components/ember-collection'; import PercentageColumns from 'ember-collection/layouts/percentage-columns'; import style from 'ember-computed-style'; +import Slotted from 'block-slots'; import WithResizing from 'consul-ui/mixins/with-resizing'; -export default Component.extend(WithResizing, { +const formatItemStyle = PercentageColumns.prototype.formatItemStyle; +export default Component.extend(Slotted, WithResizing, { dom: service('dom'), tagName: 'div', attributeBindings: ['style'], height: 500, - cellHeight: 73, + cellHeight: 70, style: style('getStyle'), classNames: ['list-collection'], + checked: null, init: function() { this._super(...arguments); this.columns = [100]; @@ -24,6 +27,14 @@ export default Component.extend(WithResizing, { get(this, 'columns'), get(this, 'cellHeight') ); + const o = this; + this['cell-layout'].formatItemStyle = function(itemIndex) { + let style = formatItemStyle.apply(this, arguments); + if (o.checked === itemIndex) { + style = `${style};z-index: 1`; + } + return style; + }; }, getStyle: computed('height', function() { return { @@ -50,5 +61,31 @@ export default Component.extend(WithResizing, { click: function(e) { return this.dom.clickFirstAnchor(e, '.list-collection > ul > li'); }, + change: function(index, e = {}) { + if (e.target.checked && index != get(this, 'checked')) { + set(this, 'checked', parseInt(index)); + this.$row = this.dom.closest('li', e.target); + this.$row.style.zIndex = 1; + + const $group = this.dom.sibling(e.target, 'div'); + const groupRect = $group.getBoundingClientRect(); + const groupBottom = groupRect.top + $group.clientHeight; + + const $footer = this.dom.element('footer[role="contentinfo"]'); + const footerRect = $footer.getBoundingClientRect(); + const footerTop = footerRect.top; + + if (groupBottom > footerTop) { + $group.classList.add('above'); + } else { + $group.classList.remove('above'); + } + } else { + const $group = this.dom.sibling(e.target, 'div'); + $group.classList.remove('above'); + set(this, 'checked', null); + this.$row.style.zIndex = null; + } + }, }, }); diff --git a/ui-v2/app/components/tooltip/index.hbs b/ui-v2/app/components/tooltip/index.hbs index a1017355e8..0794f309f2 100644 --- a/ui-v2/app/components/tooltip/index.hbs +++ b/ui-v2/app/components/tooltip/index.hbs @@ -1,3 +1,11 @@ - + {{yield}} diff --git a/ui-v2/app/controllers/dc/acls/tokens/index.js b/ui-v2/app/controllers/dc/acls/tokens/index.js index 3e096211f7..510563886b 100644 --- a/ui-v2/app/controllers/dc/acls/tokens/index.js +++ b/ui-v2/app/controllers/dc/acls/tokens/index.js @@ -6,9 +6,4 @@ export default Controller.extend({ replace: true, }, }, - actions: { - sendClone: function(item) { - this.send('clone', item); - }, - }, }); diff --git a/ui-v2/app/helpers/policy/group.js b/ui-v2/app/helpers/policy/group.js new file mode 100644 index 0000000000..b58ad46404 --- /dev/null +++ b/ui-v2/app/helpers/policy/group.js @@ -0,0 +1,30 @@ +import { helper } from '@ember/component/helper'; +import { get } from '@ember/object'; + +const MANAGEMENT_ID = '00000000-0000-0000-0000-000000000001'; + +export default helper(function policyGroup([items] /*, hash*/) { + return items.reduce( + function(prev, item) { + let group; + switch (true) { + case get(item, 'ID') === MANAGEMENT_ID: + group = 'management'; + break; + case get(item, 'template') !== '': + group = 'identities'; + break; + default: + group = 'policies'; + break; + } + prev[group].push(item); + return prev; + }, + { + management: [], + identities: [], + policies: [], + } + ); +}); diff --git a/ui-v2/app/routes/dc/services/instance.js b/ui-v2/app/routes/dc/services/instance.js index cb27fbb2f5..f62bb98b60 100644 --- a/ui-v2/app/routes/dc/services/instance.js +++ b/ui-v2/app/routes/dc/services/instance.js @@ -10,6 +10,8 @@ export default Route.extend({ const dc = this.modelFor('dc').dc.Name; const nspace = this.modelFor('nspace').nspace.substr(1); return hash({ + dc: dc, + nspace: nspace || 'default', item: this.repo.findInstanceBySlug(params.id, params.node, params.name, dc, nspace), }).then(model => { // this will not be run in a blocking loop, but this is ok as diff --git a/ui-v2/app/routes/dc/services/show.js b/ui-v2/app/routes/dc/services/show.js index f116df9b97..82c5163881 100644 --- a/ui-v2/app/routes/dc/services/show.js +++ b/ui-v2/app/routes/dc/services/show.js @@ -13,10 +13,10 @@ export default Route.extend({ const dc = this.modelFor('dc').dc.Name; const nspace = this.modelFor('nspace').nspace.substr(1); return hash({ - item: this.repo.findBySlug(params.name, dc, nspace), - urls: this.settings.findBySlug('urls'), dc: dc, nspace: nspace || 'default', + item: this.repo.findBySlug(params.name, dc, nspace), + urls: this.settings.findBySlug('urls'), proxies: [], }) .then(model => { diff --git a/ui-v2/app/styles/base/components/popover-menu/layout.scss b/ui-v2/app/styles/base/components/popover-menu/layout.scss index eed7f3cca1..012d2a8c75 100644 --- a/ui-v2/app/styles/base/components/popover-menu/layout.scss +++ b/ui-v2/app/styles/base/components/popover-menu/layout.scss @@ -18,7 +18,7 @@ @extend %more-popover-menu-panel; } %more-popover-menu-panel:not(.above) { - top: 38px; + top: 48px; } %more-popover-menu-panel:not(.left) { right: 10px; diff --git a/ui-v2/app/styles/components/app-view/layout.scss b/ui-v2/app/styles/components/app-view/layout.scss index 683ec21b13..e320c86be8 100644 --- a/ui-v2/app/styles/components/app-view/layout.scss +++ b/ui-v2/app/styles/components/app-view/layout.scss @@ -56,24 +56,6 @@ padding: 50px; text-align: center; } -/* this should probably be its own component */ -%app-view-content div > dl { - position: relative; -} -%app-view-content div > dl > dt { - position: absolute; -} -%app-view-content div > dl > dt { - width: 140px; -} -%app-view-content div > dl > dd { - padding-left: 140px; -} -%app-view-content div > dl > * { - min-height: 1em; - margin-bottom: 0.4em; -} -/* */ /* TODO: Think about an %app-form or similar */ %app-view-content form:not(.filter-bar) fieldset { padding-bottom: 0.3em; diff --git a/ui-v2/app/styles/components/composite-row.scss b/ui-v2/app/styles/components/composite-row.scss index c4299dc60b..85825e6e3f 100644 --- a/ui-v2/app/styles/components/composite-row.scss +++ b/ui-v2/app/styles/components/composite-row.scss @@ -9,9 +9,14 @@ %composite-row.linkable, .consul-gateway-service-list > ul > li:not(:first-child), .consul-service-instance-list > ul > li:not(:first-child), -.consul-service-list > ul > li:not(:first-child) { +.consul-service-list > ul > li:not(:first-child), +.consul-token-list > ul > li:not(:first-child) { @extend %with-composite-row-intent; } +/* TODO: the service list has a 1px offset */ +.consul-service-list li > div:first-child > dl:first-child dd { + margin-top: 1px; +} .proxy-exposed-paths tbody tr { cursor: default !important; } diff --git a/ui-v2/app/styles/components/composite-row/index.scss b/ui-v2/app/styles/components/composite-row/index.scss index 28099ea973..ee3a0b537d 100644 --- a/ui-v2/app/styles/components/composite-row/index.scss +++ b/ui-v2/app/styles/components/composite-row/index.scss @@ -5,11 +5,15 @@ %with-composite-row-intent:active { @extend %composite-row-intent; } -%composite-row > a, -%composite-row > p, -%composite-row > li > * { +%composite-row > :first-child { @extend %composite-row-header; } -%composite-row > ul { +%composite-row-header > dl:first-child { + @extend %composite-row-icon; +} +%composite-row > :nth-child(2) { @extend %composite-row-detail; } +%composite-row > :nth-child(3) { + @extend %composite-row-actions; +} diff --git a/ui-v2/app/styles/components/composite-row/layout.scss b/ui-v2/app/styles/components/composite-row/layout.scss index d841eaf040..8c234d9ac1 100644 --- a/ui-v2/app/styles/components/composite-row/layout.scss +++ b/ui-v2/app/styles/components/composite-row/layout.scss @@ -1,66 +1,96 @@ %composite-row { - display: block; - box-sizing: border-box; - padding: 12px; - padding-right: 0; - border: 1px solid; + display: grid; + grid-template-columns: auto 50px; + grid-template-rows: 50% 50%; + + grid-template-areas: + 'header actions' + 'detail actions'; + + padding-top: 10px; + padding-bottom: 10px; + /* whilst this isn't in the designs this makes our temporary rollover look better */ + padding-left: 12px; } %composite-row-header { - margin-bottom: 0 !important; -} -%composite-row-intent { - border: 1px solid; - position: relative; + grid-area: header; + align-self: start; } %composite-row-detail { - display: flex; + grid-area: detail; + align-self: end; +} +%composite-row-detail:not(:last-child) { + overflow-x: hidden; +} +%composite-row-actions { + grid-area: actions; + justify-self: center; + align-self: center; +} +%composite-row-icon { + margin-right: 10px; +} +%composite-row-icon dt { + display: none; +} +%composite-row-icon dd::before { + font-size: 0.9em; +} +/* TODO Currently only here due to dl's in %form-row */ +%composite-row dl { + margin: 0; + padding: 0; +} +%composite-row-detail, +%composite-row-detail ul, +%composite-row-detail dl, +%composite-row-header, +%composite-row-header dl { + display: inline-flex; flex-wrap: nowrap; } +%composite-row-detail dt { + display: none; +} +%composite-row-header *, %composite-row-detail * { white-space: nowrap; + flex-wrap: nowrap; } -%composite-row-detail > li { +%composite-row-detail > dl, +%composite-row-detail > ul > li { margin-right: 12px; } +%composite-row-detail .node::before, +%composite-row-detail .tag-list::before { + position: relative; +} %composite-row-detail .node::before { - margin-top: 2px; + top: 1px; +} +%composite-row-detail .tag-list::before { + top: 2px; } -//Health Checks -%composite-row > li > span.passing::before, -%composite-row > li > span.warning::before, -%composite-row > li > span.critical::before, -%composite-row > li > span.empty::before { - height: 18px; - width: 18px; - margin-top: 2px; -} - -// Copy Button with Feedback +// Copy Button %composite-row .copy-button button { padding: 0 !important; margin: 0 !important; } -%composite-row-detail .copy-button { +%composite-row .copy-button { margin-left: 4px; } -%composite-row-header .copy-button { - top: 3px; -} -%composite-row-header .copy-button, -%composite-row-detail .copy-button { - display: none; -} -%composite-row-header:hover .copy-button, -%composite-row-detail:hover .copy-button { +%composite-row .copy-button { display: inline-flex; } - -// Tooltip -%composite-row-detail .feedback-dialog-out { - left: -12px; - bottom: 12px; +/* buttons need to be displayed in order for the tooltip */ +/* to track them */ +%composite-row-header .copy-button button, +%composite-row-detail .copy-button button { + opacity: 0; } -%composite-row-detail .feedback-dialog-out::after { - left: 18px; +%composite-row-header:hover .copy-button button, +%composite-row-detail:hover .copy-button button { + opacity: 1; } diff --git a/ui-v2/app/styles/components/composite-row/skin.scss b/ui-v2/app/styles/components/composite-row/skin.scss index 32e2bde835..4bb9f9ed6b 100644 --- a/ui-v2/app/styles/components/composite-row/skin.scss +++ b/ui-v2/app/styles/components/composite-row/skin.scss @@ -1,5 +1,6 @@ %composite-row { list-style-type: none; + border: 1px solid; border-top-color: $transparent; border-bottom-color: $gray-200; border-right-color: $transparent; @@ -14,28 +15,54 @@ %composite-row-header { color: $black; } +%composite-row-header * { + color: inherit; +} %composite-row-detail { color: $gray-500; } +%composite-row-detail .policy::before { + @extend %with-file-fill-mask, %as-pseudo; + background-color: $gray-500; + margin-right: 3px; +} +%composite-row-detail .role::before { + @extend %with-user-plain-mask, %as-pseudo; + background-color: $gray-500; + margin-right: 3px; +} +%composite-row-detail .policy-management::before { + @extend %with-star-fill-mask, %as-pseudo; + background-color: var(--brand-600); + margin-right: 3px; +} // Health Checks -%composite-row .passing::before { +%composite-row-detail li.passing::before, +%composite-row-header .passing dd::before { @extend %with-check-circle-fill-color-mask, %as-pseudo; background-color: $green-500; } -%composite-row .warning::before { +%composite-row-detail li.warning::before, +%composite-row-header .warning dd::before { @extend %with-alert-triangle-color-mask, %as-pseudo; background-color: $orange-500; } -%composite-row .critical::before { +%composite-row-detail li.critical::before, +%composite-row-header .critical dd::before { @extend %with-cancel-square-fill-color-mask, %as-pseudo; background-color: $red-500; } -%composite-row .empty::before { +%composite-row-detail li.empty::before, +%composite-row-header .empty dd::before { @extend %with-minus-square-fill-color-mask, %as-pseudo; background-color: $gray-500; } +%composite-row-header [rel='me'] dd::before { + @extend %with-check-circle-fill-mask, %as-pseudo; + background-color: $blue-500; +} // Metadata %composite-row .node a { color: $gray-500; diff --git a/ui-v2/app/styles/components/confirmation-alert.scss b/ui-v2/app/styles/components/confirmation-alert.scss new file mode 100644 index 0000000000..e3edea149a --- /dev/null +++ b/ui-v2/app/styles/components/confirmation-alert.scss @@ -0,0 +1,3 @@ +.confirmation-alert { + @extend %confirmation-alert; +} diff --git a/ui-v2/app/styles/components/definition-table.scss b/ui-v2/app/styles/components/definition-table.scss new file mode 100644 index 0000000000..44c69bb3ea --- /dev/null +++ b/ui-v2/app/styles/components/definition-table.scss @@ -0,0 +1,4 @@ +@import './definition-table/index'; +.definition-table { + @extend %definition-table; +} diff --git a/ui-v2/app/styles/components/feedback-dialog/index.scss b/ui-v2/app/styles/components/definition-table/index.scss similarity index 52% rename from ui-v2/app/styles/components/feedback-dialog/index.scss rename to ui-v2/app/styles/components/definition-table/index.scss index 0820684ccb..bc18252196 100644 --- a/ui-v2/app/styles/components/feedback-dialog/index.scss +++ b/ui-v2/app/styles/components/definition-table/index.scss @@ -1 +1,2 @@ +@import './skin'; @import './layout'; diff --git a/ui-v2/app/styles/components/definition-table/layout.scss b/ui-v2/app/styles/components/definition-table/layout.scss new file mode 100644 index 0000000000..8af08c50d4 --- /dev/null +++ b/ui-v2/app/styles/components/definition-table/layout.scss @@ -0,0 +1,16 @@ +%definition-table > dl { + position: relative; +} +%definition-table > dl > dt { + position: absolute; +} +%definition-table > dl > dt { + width: 140px; +} +%definition-table > dl > dd { + padding-left: 140px; +} +%definition-table > dl > * { + min-height: 1em; + margin-bottom: 0.4em; +} diff --git a/ui-v2/app/styles/components/definition-table/skin.scss b/ui-v2/app/styles/components/definition-table/skin.scss new file mode 100644 index 0000000000..d96658f736 --- /dev/null +++ b/ui-v2/app/styles/components/definition-table/skin.scss @@ -0,0 +1,2 @@ +%definition-table { +} diff --git a/ui-v2/app/styles/components/feedback-dialog.scss b/ui-v2/app/styles/components/feedback-dialog.scss deleted file mode 100644 index f6cf6a06c1..0000000000 --- a/ui-v2/app/styles/components/feedback-dialog.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import './feedback-dialog/index'; -.with-feedback { - @extend %feedback-dialog-inline; -} -%feedback-dialog-inline .feedback-dialog-out { - @extend %blink-in-fade-out; - transition-delay: 3s; -} -@media #{$--lt-spacious-page-header} { - .actions .with-feedback p { - bottom: auto; - top: 0px; - } - .actions .with-feedback p::after { - bottom: auto; - top: -13px !important; - border-bottom-width: 18px; - border-top-width: 0; - } -} diff --git a/ui-v2/app/styles/components/feedback-dialog/layout.scss b/ui-v2/app/styles/components/feedback-dialog/layout.scss deleted file mode 100644 index dd1ca76aaf..0000000000 --- a/ui-v2/app/styles/components/feedback-dialog/layout.scss +++ /dev/null @@ -1,12 +0,0 @@ -%feedback-dialog-inline { - @extend %tooltip; -} - -%feedback-dialog-inline p::after { - @extend %tooltip-tail; - top: auto !important; - bottom: -13px; -} -%feedback-dialog-inline p { - @extend %tooltip-bubble; -} diff --git a/ui-v2/app/styles/components/healthcheck-output/layout.scss b/ui-v2/app/styles/components/healthcheck-output/layout.scss index d6232b3162..24369805b1 100644 --- a/ui-v2/app/styles/components/healthcheck-output/layout.scss +++ b/ui-v2/app/styles/components/healthcheck-output/layout.scss @@ -61,7 +61,7 @@ %healthcheck-output pre code { word-wrap: break-word; } -%healthcheck-output .with-feedback { +%healthcheck-output .copy-button { position: absolute; right: 0.5em; top: 1em; diff --git a/ui-v2/app/styles/components/index.scss b/ui-v2/app/styles/components/index.scss index 305a954c92..a46f0417e1 100644 --- a/ui-v2/app/styles/components/index.scss +++ b/ui-v2/app/styles/components/index.scss @@ -20,7 +20,6 @@ @import './flash-message'; @import './code-editor'; @import './confirmation-dialog'; -@import './feedback-dialog'; @import './modal-dialog'; @import './auth-form'; @import './auth-modal'; @@ -35,6 +34,9 @@ @import './popover-select'; @import './tooltip-panel'; @import './menu-panel'; +@import './more-popover-menu'; +@import './confirmation-alert'; +@import './definition-table'; /**/ diff --git a/ui-v2/app/styles/components/more-popover-menu.scss b/ui-v2/app/styles/components/more-popover-menu.scss new file mode 100644 index 0000000000..7d7fb6f0f6 --- /dev/null +++ b/ui-v2/app/styles/components/more-popover-menu.scss @@ -0,0 +1,18 @@ +.more-popover-menu > [type='checkbox'] { + @extend %more-popover-menu; +} +%more-popover-menu-panel [type='checkbox']:checked ~ * { + /* this needs to autocalculate */ + min-height: 143px; + max-height: 143px; +} +%more-popover-menu-panel [id$='logout']:checked ~ * { + /* this needs to autocalculate */ + min-height: 183px; + max-height: 183px; +} +%more-popover-menu-panel [id$='delete']:checked ~ ul label[for$='delete'] + [role='menu'], +%more-popover-menu-panel [id$='logout']:checked ~ ul label[for$='logout'] + [role='menu'], +%more-popover-menu-panel [id$='use']:checked ~ ul label[for$='use'] + [role='menu'] { + display: block; +} diff --git a/ui-v2/app/styles/components/pill.scss b/ui-v2/app/styles/components/pill.scss index b1d38702ad..4094f5e16c 100644 --- a/ui-v2/app/styles/components/pill.scss +++ b/ui-v2/app/styles/components/pill.scss @@ -21,9 +21,6 @@ td strong { %pill.policy-management::before { @extend %with-star-icon; } -%pill.policy-service-identity::before { - @extend %with-service-identity-icon; -} %pill.role::before { @extend %with-user-plain-icon; opacity: 0.3; @@ -33,16 +30,16 @@ td strong { // All of this icon assigning stuff should probably go in the eventual // refactored /components/icons.scss file -td.policy-service-identity a::after { - @extend %with-service-identity-icon, %as-pseudo; - margin-left: 3px; -} -td.policy-management a::after { +span.policy-management a::after { @extend %with-star-icon, %as-pseudo; margin-left: 3px; } +span.policy-service-identity, .consul-external-source, .consul-kind { @extend %reduced-pill; } +span.policy-service-identity::before { + width: 0; +} diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss index a4bc8c3df1..1bc25d71d6 100644 --- a/ui-v2/app/styles/components/table.scss +++ b/ui-v2/app/styles/components/table.scss @@ -4,21 +4,6 @@ %table-actions > [type='checkbox'] { @extend %more-popover-menu; } -%more-popover-menu-panel [type='checkbox']:checked ~ * { - /* this needs to autocalculate */ - min-height: 143px; - max-height: 143px; -} -%more-popover-menu-panel [id$='logout']:checked ~ * { - /* this needs to autocalculate */ - min-height: 183px; - max-height: 183px; -} -%more-popover-menu-panel [id$='delete']:checked ~ ul label[for$='delete'] + [role='menu'], -%more-popover-menu-panel [id$='logout']:checked ~ ul label[for$='logout'] + [role='menu'], -%more-popover-menu-panel [id$='use']:checked ~ ul label[for$='use'] + [role='menu'] { - display: block; -} %table-actions .confirmation-alert { @extend %confirmation-alert; } @@ -27,6 +12,9 @@ top: 8px; right: 15px; } +%table-actions .menu-panel:not(.above) { + top: 38px !important; +} /*TODO: Rename this to %app-view-brand-icon or similar */ %with-external-source-icon { diff --git a/ui-v2/app/styles/components/tabular-collection.scss b/ui-v2/app/styles/components/tabular-collection.scss index c4647244ae..4eb1af707f 100644 --- a/ui-v2/app/styles/components/tabular-collection.scss +++ b/ui-v2/app/styles/components/tabular-collection.scss @@ -69,21 +69,12 @@ table.has-actions tr > *:nth-last-child(5):first-child ~ * { } /*TODO: trs only live in tables, get rid of table */ -html.template-service.template-list main table tr { - @extend %services-row; -} html.template-nspace.has-acls.template-list main table tr { @extend %with-acls-nspaces-row; } html.template-nspace:not(.has-acls).template-list main table tr { @extend %nspaces-row; } -html.template-service.template-show #instances table tr { - @extend %instances-row; -} -html.template-token.template-list main table tr { - @extend %tokens-row; -} html.template-role.template-list main table tr { @extend %roles-row; } @@ -93,66 +84,18 @@ html.template-role.template-edit [role='dialog'] table tr, html.template-role.template-edit main table.token-list tr { @extend %tokens-minimal-row; } -html.template-token.template-list main table tr td.me, -html.template-token.template-list main table tr td.me ~ td, -html.template-token.template-list main table tr th { - @extend %tokens-your-row; -} html.template-node.template-show main table.sessions tr { @extend %node-sessions-row; } -html.template-instance.template-show main table.exposedpaths tr { - @extend %instance-paths-row; -} // this will get auto calculated later in tabular-collection.js // keeping this here for reference // %services-row > * { // (100% / 2) - (160px / 2) // width: calc(50% - 160px); // } -%services-row > *:nth-child(2) { - width: 100px; -} -%services-row > * { - width: auto; -} -%instances-row > * { - width: calc(100% / 5); -} -// instance-paths are for exposed paths -// we make the columns that need as much space as possible -// as wide as possible so 50% each minus enough room -// for the 3 port columns - we probably need a max of 55px -// for each port column so 55 * 3 = 165 -// so column 1 and 5 are 50% - 165 each -// the 3 remaining columns split the 165 thats left between them -%instance-paths-row > *:nth-child(1), -%instance-paths-row > *:nth-child(5) { - width: calc(50% - 165px) !important; -} -%instance-paths-row > *:nth-child(2), -%instance-paths-row > *:nth-child(3), -%instance-paths-row > *:nth-child(4) { - width: 110px !important; -} -%tokens-row > *:first-child, -%tokens-minimal-row > *:not(last-child), -%tokens-row > *:nth-child(2), -%tokens-your-row:nth-last-child(2) { +%tokens-minimal-row > *:not(last-child) { width: 120px; } -%tokens-row > *:nth-child(3) { - width: calc(30% - 150px); -} -%tokens-row > *:nth-child(4) { - width: calc(70% - 150px); -} -%tokens-your-row:nth-child(4) { - width: calc(70% - 270px) !important; -} -%tokens-row > *:last-child { - @extend %table-actions; -} %tokens-minimal-row > *:last-child { width: calc(100% - 240px) !important; } @@ -204,19 +147,3 @@ html.template-instance.template-show main table.exposedpaths tr { display: none; } } -@media #{$--lt-medium-table} { - /* Token > Policies */ - /* Token > Your Token */ - html.template-token.template-list tr > :nth-child(2), - html.template-token.template-list tr > :nth-child(4), - html.template-token.template-list tr th:nth-child(5), - html.template-token.template-list main table tr td.me ~ td:nth-of-type(5) { - display: none; - } - html.template-service.template-show #instances tr > :nth-child(3) { - display: none; - } - %instances-row > * { - width: calc(100% / 4); - } -} diff --git a/ui-v2/app/styles/components/tag-list/layout.scss b/ui-v2/app/styles/components/tag-list/layout.scss index 74cc4bc2a8..aa037b8fb5 100644 --- a/ui-v2/app/styles/components/tag-list/layout.scss +++ b/ui-v2/app/styles/components/tag-list/layout.scss @@ -1,3 +1,6 @@ +%tag-list { + white-space: nowrap; +} %tag-list dt { display: none; } @@ -11,10 +14,11 @@ } %tag-list dd { display: inline-flex; + flex-wrap: wrap; padding-left: 0px; } %tag-list dd > *:not(:last-child)::after { - content: ', '; - white-space: pre; + content: ','; + margin-right: 0.3em; display: inline; } diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 5db9b42e7d..949b2b52de 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -117,6 +117,10 @@ pre code, font-size: $typo-size-450; font-weight: $typo-weight-medium; } +%composite-row-header *:not(button) { + font-size: inherit; + font-weight: inherit; +} /**/ /* TODO: We have nothing else with a 500 */ diff --git a/ui-v2/app/styles/routes/dc/acls/tokens/index.scss b/ui-v2/app/styles/routes/dc/acls/tokens/index.scss index bfd8993c76..8a62e60276 100644 --- a/ui-v2/app/styles/routes/dc/acls/tokens/index.scss +++ b/ui-v2/app/styles/routes/dc/acls/tokens/index.scss @@ -4,17 +4,6 @@ cursor: pointer; float: right; } -%token-yours { - color: $blue-500; -} -%token-yours::before { - @extend %with-check-circle-fill-mask, %as-pseudo; - background-color: $blue-500; - margin-right: 5px; -} -.me ~ :nth-last-child(2) { - @extend %token-yours; -} .template-token.template-edit main dd { display: flex; } diff --git a/ui-v2/app/templates/dc/acls/tokens/edit.hbs b/ui-v2/app/templates/dc/acls/tokens/edit.hbs index 2b52dc6a6c..e648a80582 100644 --- a/ui-v2/app/templates/dc/acls/tokens/edit.hbs +++ b/ui-v2/app/templates/dc/acls/tokens/edit.hbs @@ -66,15 +66,15 @@

    Update. We have upgraded our ACL system by allowing you to create reusable policies which you can then apply to tokens. Don't worry, even though this token was written in the old style, it is still valid. However, we do recommend upgrading your old tokens to the new style. Learn how in our documentation.

    {{/if}} {{#if (not create) }} -
    +
    AccessorID
    - {{item.AccessorID}} + {{item.AccessorID}}
    Token
    - {{item.SecretID}} + {{item.SecretID}}
    {{#if (and (not (token/is-legacy item)) (not create))}}
    Scope
    diff --git a/ui-v2/app/templates/dc/acls/tokens/index.hbs b/ui-v2/app/templates/dc/acls/tokens/index.hbs index 09b64df6fb..60dd60f26f 100644 --- a/ui-v2/app/templates/dc/acls/tokens/index.hbs +++ b/ui-v2/app/templates/dc/acls/tokens/index.hbs @@ -43,151 +43,36 @@ {{/if}} - - - Accessor ID - Scope - Description - Roles & Policies -   - - - - {{substr item.AccessorID -8}} - - - {{if item.Local 'local' 'global' }} - - -

    {{default item.Description item.Name}}

    - - -{{#if (token/is-legacy item) }} -

    Legacy tokens have embedded rules.

    -{{ else }} - {{#each (append item.Policies item.Roles) as |item|}} - {{item.Name}} - {{/each}} -{{/if}} - -{{#if (eq item.AccessorID token.AccessorID)}} - Your token -{{/if}} -
    - - - - More - - -
  • - Edit -
  • -{{#if (not (token/is-legacy item))}} -
  • - -
  • -{{/if}} -{{#if (eq item.AccessorID token.AccessorID) }} -
  • - -
    -
    -
    -
    - Confirm logout -
    -

    - Are you sure you want to stop using this ACL token? This will log you out. -

    -
    -
      -
    • - -
    • -
    • - -
    • -
    -
    -
    -
  • -{{else}} -
  • - -
    -
    -
    -
    - Confirm use -
    -

    - Are you sure you want to use this ACL token? -

    -
    -
      -
    • - -
    • -
    • - -
    • -
    -
    -
    -
  • -{{/if}} -{{#unless (or (token/is-anonymous item) (eq item.AccessorID token.AccessorID)) }} -
  • - -
    -
    -
    -
    - Confirm Delete -
    -

    - Are you sure you want to delete this token? -

    -
    -
      -
    • - -
    • -
    • - -
    • -
    -
    -
    -
  • -{{/unless}} -
    -
    -
    -
    +
    - - -

    - {{#if (gt items.length 0)}} - No tokens found - {{else}} - Welcome to ACL Tokens - {{/if}} -

    -
    - -

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

    -
    -
    + + +

    + {{#if (gt items.length 0)}} + No tokens found + {{else}} + Welcome to ACL Tokens + {{/if}} +

    +
    + +

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

    +
    +
    diff --git a/ui-v2/app/templates/dc/kv/edit.hbs b/ui-v2/app/templates/dc/kv/edit.hbs index bc71677269..7752d5e5b5 100644 --- a/ui-v2/app/templates/dc/kv/edit.hbs +++ b/ui-v2/app/templates/dc/kv/edit.hbs @@ -34,7 +34,7 @@ {{/if}} {{partial 'dc/kv/form'}} {{#if session}} -
    +

    Lock Session

    diff --git a/ui-v2/app/templates/dc/services/instance/proxy.hbs b/ui-v2/app/templates/dc/services/instance/proxy.hbs index 307963c259..011d67f816 100644 --- a/ui-v2/app/templates/dc/services/instance/proxy.hbs +++ b/ui-v2/app/templates/dc/services/instance/proxy.hbs @@ -2,64 +2,8 @@
    {{#if (gt proxy.Proxy.Upstreams.length 0)}}
    -

    Upstreams

    -
      - {{#let proxy.Datacenter as |proxyDatacenter|}} - {{#each proxy.Proxy.Upstreams as |item|}} -
    • -

      - {{item.DestinationName}} -

      -
        - {{#if (env 'CONSUL_NSPACES_ENABLED')}} - {{#if (not-eq item.DestinationType 'prepared_query')}} -
      • - - - Namespace - - - - {{or item.DestinationNamespace 'default'}} - -
      • - {{/if}} - {{/if}} - {{#if (and (not-eq item.Datacenter proxyDatacenter) (not-eq item.Datacenter ""))}} -
      • - - - Datacenter - - - - {{item.Datacenter}} - -
      • - {{/if}} - {{#if (gt item.LocalBindPort 0)}} - {{#let (concat (or item.LocalBindAddress '127.0.0.1') ':' item.LocalBindPort) as |combinedAddress| }} -
      • - - - Address - - - - {{combinedAddress}} - - -
      • - {{/let}} - {{/if}} -
      -
    • - {{/each}} - {{/let}} -
    +

    Upstreams

    +
    {{/if}} {{#if (gt proxy.Proxy.Expose.Paths.length 0)}} @@ -68,73 +12,7 @@

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

    -
      - {{#each proxy.Proxy.Expose.Paths as |path|}} -
    • - {{#let (concat item.Address ':' path.Path) as |combinedAddress| }} -

      - - {{combinedAddress}} - - -

      - {{/let}} -
        - {{#if path.Protocol}} -
      • - - - Protocol - - - - {{path.Protocol}} - -
      • - {{/if}} - {{#if path.ListenerPort}} -
      • - - - Port - - - - listening on :{{path.ListenerPort}} - -
      • - {{/if}} - {{#if path.LocalPathPort}} -
      • - - - Port - - - - local port :{{path.LocalPathPort}} - -
      • - {{/if}} - {{#if path.Path}} -
      • - - - Path - - - - {{path.Path}} - -
      • - {{/if}} -
      -
    • - {{/each}} -
    + {{/if}} {{#if (or (gt proxy.ServiceChecks.length 0) (gt proxy.NodeChecks.length 0))}} diff --git a/ui-v2/app/templates/dc/services/show/services.hbs b/ui-v2/app/templates/dc/services/show/services.hbs index b29e1dc91a..b1441c8fa4 100644 --- a/ui-v2/app/templates/dc/services/show/services.hbs +++ b/ui-v2/app/templates/dc/services/show/services.hbs @@ -6,7 +6,7 @@ The following services may receive traffic from external services through this gateway. Learn more about configuring gateways in our step-by-step guide.

    - + {{else}}

    diff --git a/ui-v2/app/templates/dc/services/show/upstreams.hbs b/ui-v2/app/templates/dc/services/show/upstreams.hbs index b9595c492f..f8526f3d5d 100644 --- a/ui-v2/app/templates/dc/services/show/upstreams.hbs +++ b/ui-v2/app/templates/dc/services/show/upstreams.hbs @@ -5,72 +5,7 @@

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

    - {{#let item.Service.Namespace as |nspace|}} - - {{#if (service/exists item)}} - {{#let item.Namespace as |gatewayNspace|}} -
  • - - - {{#if (eq 'critical' (service/health-checks item))}} - At least one health check on one instance is failing. - {{else if (eq 'warning' (service/health-checks item))}} - At least one health check on one instance has a warning. - {{else if (eq 'passing' (service/health-checks item))}} - All health checks are passing. - {{else}} - There are no health checks. - {{/if}} - - - {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq gatewayNspace nspace))}} - - {{item.Name}} - - {{else}} - - {{item.Name}} - - {{/if}} -
  • - {{/let}} - {{else}} -

    - {{item.Name}} -

    - {{/if}} -
      - {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace nspace))}} -
    • - - - Namespace - - - - {{item.Namespace}} - -
    • - {{/if}} - {{#if (not-eq item.GatewayConfig.ListenerPort 0)}} -
    • - - - Port - - - - :{{item.GatewayConfig.ListenerPort}} - - -
    • - {{/if}} -
    -
    - {{/let}} + {{else}}

    diff --git a/ui-v2/tests/acceptance/components/copy-button.feature b/ui-v2/tests/acceptance/components/copy-button.feature index bb269d89fa..c2c0b96ea6 100644 --- a/ui-v2/tests/acceptance/components/copy-button.feature +++ b/ui-v2/tests/acceptance/components/copy-button.feature @@ -1,4 +1,5 @@ @setupApplicationTest +@ignore Feature: components / copy-button Background: Given 1 datacenter model with the value "dc-1" @@ -22,4 +23,4 @@ Feature: components / copy-button --- Then the url should be /dc-1/nodes/node-0/health-checks When I click ".healthcheck-output:nth-child(1) button.copy-btn" - Then I see the text "Copied output!" in ".healthcheck-output:nth-child(1) p.feedback-dialog-out" + Then I copied "The output" diff --git a/ui-v2/tests/acceptance/dc/acls/tokens/index.feature b/ui-v2/tests/acceptance/dc/acls/tokens/index.feature index 5645f9c473..16377e4535 100644 --- a/ui-v2/tests/acceptance/dc/acls/tokens/index.feature +++ b/ui-v2/tests/acceptance/dc/acls/tokens/index.feature @@ -77,7 +77,7 @@ Feature: dc / acls / tokens / index: ACL Token List s: Si-Search --- And I see 1 token model - And I see 1 token model with the serviceIdentity "Si-Search" + And I see 1 token model with the serviceIdentity "Service Identity: Si-Search" Scenario: I see the legacy message if I have one legacy token Given 1 datacenter model with the value "dc-1" And 3 token models from yaml diff --git a/ui-v2/tests/integration/components/feedback-dialog-test.js b/ui-v2/tests/integration/components/feedback-dialog-test.js deleted file mode 100644 index 1ce0d56993..0000000000 --- a/ui-v2/tests/integration/components/feedback-dialog-test.js +++ /dev/null @@ -1,30 +0,0 @@ -import { module, skip, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | feedback dialog', function(hooks) { - setupRenderingTest(hooks); - - skip("it doesn't render anything when used inline"); - test('it renders', async function(assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.on('myAction', function(val) { ... }); - - await render(hbs`{{feedback-dialog}}`); - - assert.dom('*').hasText(''); - - // Template block usage: - await render(hbs` - {{#feedback-dialog}} - {{#block-slot name='success'}} - {{/block-slot}} - {{#block-slot name='error'}} - {{/block-slot}} - {{/feedback-dialog}} - `); - - assert.dom('*').hasText(''); - }); -}); diff --git a/ui-v2/tests/pages.js b/ui-v2/tests/pages.js index 58371c0875..4d56644e85 100644 --- a/ui-v2/tests/pages.js +++ b/ui-v2/tests/pages.js @@ -34,6 +34,7 @@ import policySelectorFactory from 'consul-ui/components/policy-selector/pageobje import roleFormFactory from 'consul-ui/components/role-form/pageobject'; import roleSelectorFactory from 'consul-ui/components/role-selector/pageobject'; import tokenListFactory from 'consul-ui/components/token-list/pageobject'; +import consulTokenListFactory from 'consul-ui/components/consul-token-list/pageobject'; import consulIntentionListFactory from 'consul-ui/components/consul-intention-list/pageobject'; // pages @@ -86,6 +87,7 @@ const policySelector = policySelectorFactory(clickable, deletable, collection, a const roleForm = roleFormFactory(submitable, cancelable, policySelector); const roleSelector = roleSelectorFactory(clickable, deletable, collection, alias, roleForm); const consulIntentionList = consulIntentionListFactory(collection, clickable, attribute, deletable); +const consulTokenList = consulTokenListFactory(collection, clickable, attribute, text, deletable); const page = pageFactory(clickable, attribute, is, authForm); @@ -131,19 +133,7 @@ export default { ), // TODO: This needs a policyList role: create(role(visitable, submitable, deletable, cancelable, policySelector, tokenList)), - tokens: create( - tokens( - visitable, - submitable, - deletable, - creatable, - clickable, - attribute, - collection, - text, - freetextFilter - ) - ), + tokens: create(tokens(visitable, creatable, text, consulTokenList, freetextFilter)), token: create( token(visitable, submitable, deletable, cancelable, clickable, policySelector, roleSelector) ), diff --git a/ui-v2/tests/pages/dc/acls/tokens/index.js b/ui-v2/tests/pages/dc/acls/tokens/index.js index f611ee1721..49f77fff1b 100644 --- a/ui-v2/tests/pages/dc/acls/tokens/index.js +++ b/ui-v2/tests/pages/dc/acls/tokens/index.js @@ -1,34 +1,9 @@ -export default function( - visitable, - submitable, - deletable, - creatable, - clickable, - attribute, - collection, - text, - filter -) { - return submitable( - creatable({ - visit: visitable('/:dc/acls/tokens'), - update: text('[data-test-notification-update]'), - tokens: collection( - '[data-test-tabular-row]', - deletable({ - id: attribute('data-test-token', '[data-test-token]'), - description: text('[data-test-description]'), - policy: text('[data-test-policy].policy', { multiple: true }), - role: text('[data-test-policy].role', { multiple: true }), - serviceIdentity: text('[data-test-policy].policy-service-identity', { multiple: true }), - token: clickable('a'), - actions: clickable('label'), - use: clickable('[data-test-use]'), - confirmUse: clickable('[data-test-confirm-use]'), - clone: clickable('[data-test-clone]'), - }) - ), - filter: filter(), - }) - ); +export default function(visitable, creatable, text, tokens, filter) { + return { + visit: visitable('/:dc/acls/tokens'), + update: text('[data-test-notification-update]'), + tokens: tokens(), + filter: filter(), + ...creatable(), + }; }