From 7d8ea08da701af1f147a6f037544fa43ea3f0c85 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Tue, 1 Dec 2020 15:45:09 +0000 Subject: [PATCH] ui: Add 'Search Across' for finer grained searching (#9282) --- .../app/components/consul/acl/list/index.hbs | 122 ++++++++++ .../consul/acl/search-bar/index.hbs | 59 +++++ .../consul/intention/list/index.hbs | 23 +- .../components/consul/intention/list/index.js | 25 +- .../consul/intention/search-bar/index.hbs | 61 +++-- .../consul/intention/search-bar/index.js | 5 - .../consul/intention/search-bar/index.scss | 5 +- .../app/components/consul/kv/list/index.hbs | 114 +++++---- .../app/components/consul/kv/list/index.js | 6 - .../components/consul/kv/search-bar/index.hbs | 68 ++++++ .../app/components/consul/node/list/index.hbs | 11 +- .../app/components/consul/node/list/index.js | 5 - .../consul/node/search-bar/index.hbs | 59 +++-- .../consul/node/search-bar/index.js | 5 - .../components/consul/nspace/list/index.hbs | 117 ++++----- .../components/consul/nspace/list/index.js | 16 +- .../consul/nspace/search-bar/index.hbs | 46 +++- .../consul/nspace/search-bar/index.js | 5 - .../components/consul/policy/list/index.hbs | 11 +- .../components/consul/policy/list/index.js | 5 - .../consul/policy/search-bar/index.hbs | 56 +++-- .../consul/policy/search-bar/index.js | 4 +- .../app/components/consul/role/list/index.hbs | 12 +- .../app/components/consul/role/list/index.js | 5 - .../consul/role/search-bar/index.hbs | 49 +++- .../consul/role/search-bar/index.js | 3 - .../consul/service-instance/list/index.hbs | 146 ++++++------ .../consul/service-instance/list/index.js | 5 - .../service-instance/search-bar/index.hbs | 71 ++++-- .../service-instance/search-bar/index.js | 5 - .../components/consul/service/list/index.hbs | 12 +- .../components/consul/service/list/index.js | 18 +- .../consul/service/search-bar/index.hbs | 80 ++++--- .../consul/service/search-bar/index.js | 5 - .../components/consul/token/list/index.hbs | 21 +- .../app/components/consul/token/list/index.js | 5 - .../consul/token/search-bar/index.hbs | 54 +++-- .../consul/token/search-bar/index.js | 3 - .../components/consul/upstream/list/index.hbs | 25 +- .../components/consul/upstream/list/index.js | 18 +- .../consul/upstream/search-bar/index.hbs | 54 +++-- .../consul/upstream/search-bar/index.js | 5 - .../app/components/data-collection/index.hbs | 5 + .../app/components/data-collection/index.js | 56 +++++ .../app/components/filter-bar/index.scss | 5 + .../app/components/filter-bar/layout.scss | 45 ++++ .../app/components/filter-bar/skin.scss | 13 + .../freetext-filter/README.stories.mdx | 45 ++++ .../app/components/freetext-filter/index.hbs | 23 +- .../app/components/freetext-filter/index.js | 42 ++-- .../freetext-filter}/index.scss | 0 .../components/freetext-filter/layout.scss | 28 +++ .../app/components/freetext-filter/skin.scss | 49 ++++ .../components/more-popover-menu/index.hbs | 11 +- .../app/components/popover-menu/index.hbs | 83 +++---- .../popover-menu/menu-item/index.hbs | 2 +- .../app/components/popover-select/index.hbs | 9 +- .../app/components/popover-select/index.js | 5 +- .../app/components/toggle-button/index.hbs | 7 +- .../app/controllers/dc/acls/index.js | 18 -- .../app/controllers/dc/acls/policies/index.js | 13 - .../app/controllers/dc/acls/roles/index.js | 10 - .../app/controllers/dc/acls/tokens/index.js | 12 - .../app/controllers/dc/intentions/index.js | 12 - .../consul-ui/app/controllers/dc/kv/index.js | 10 - .../app/controllers/dc/nodes/index.js | 12 - .../app/controllers/dc/nspaces/index.js | 10 - .../app/controllers/dc/services/index.js | 11 - .../controllers/dc/services/show/instances.js | 10 - .../dc/services/show/intentions/index.js | 11 - .../controllers/dc/services/show/services.js | 12 - .../controllers/dc/services/show/upstreams.js | 12 - .../consul-ui/app/filter/predicates/acl.js | 6 + .../app/filter/predicates/intention.js | 6 +- .../consul-ui/app/filter/predicates/kv.js | 6 + .../consul-ui/app/filter/predicates/node.js | 7 +- .../consul-ui/app/filter/predicates/policy.js | 7 +- .../app/filter/predicates/service-instance.js | 5 +- .../app/filter/predicates/service.js | 5 +- .../consul-ui/app/filter/predicates/token.js | 7 +- ui/packages/consul-ui/app/models/kv.js | 5 + .../consul-ui/app/models/service-instance.js | 2 + .../consul-ui/app/routes/dc/acls/index.js | 8 +- .../app/routes/dc/acls/policies/index.js | 4 + .../app/routes/dc/acls/roles/index.js | 4 + .../app/routes/dc/acls/tokens/index.js | 4 + .../app/routes/dc/intentions/index.js | 4 + .../consul-ui/app/routes/dc/kv/index.js | 1 + .../consul-ui/app/routes/dc/nodes/index.js | 4 + .../consul-ui/app/routes/dc/nspaces/index.js | 4 + .../consul-ui/app/routes/dc/services/index.js | 19 +- .../app/routes/dc/services/show/instances.js | 4 + .../dc/services/show/intentions/index.js | 4 + .../app/routes/dc/services/show/services.js | 16 +- .../app/routes/dc/services/show/upstreams.js | 12 + ui/packages/consul-ui/app/routing/route.js | 33 ++- .../consul-ui/app/search/filters/acl.js | 14 -- .../consul-ui/app/search/filters/kv.js | 10 - .../consul-ui/app/search/filters/node.js | 14 -- .../consul-ui/app/search/filters/nspace.js | 20 -- .../consul-ui/app/search/filters/service.js | 34 --- .../consul-ui/app/search/filters/token.js | 27 --- .../consul-ui/app/search/predicates/acl.js | 4 + .../app/search/predicates/intention.js | 19 +- .../consul-ui/app/search/predicates/kv.js | 9 + .../consul-ui/app/search/predicates/node.js | 8 + .../consul-ui/app/search/predicates/nspace.js | 16 ++ .../consul-ui/app/search/predicates/policy.js | 4 + .../consul-ui/app/search/predicates/role.js | 17 ++ .../app/search/predicates/service-instance.js | 24 ++ .../app/search/predicates/service.js | 4 + .../consul-ui/app/search/predicates/token.js | 20 ++ ui/packages/consul-ui/app/services/filter.js | 17 +- ui/packages/consul-ui/app/services/search.js | 56 +++-- ui/packages/consul-ui/app/services/sort.js | 6 +- .../consul-ui/app/sort/comparators/acl.js | 3 + .../app/sort/comparators/intention.js | 2 +- .../consul-ui/app/sort/comparators/kv.js | 4 +- .../consul-ui/app/sort/comparators/node.js | 4 +- .../consul-ui/app/sort/comparators/nspace.js | 4 +- .../app/sort/comparators/service-instance.js | 4 +- .../consul-ui/app/sort/comparators/service.js | 4 +- .../consul-ui/app/sort/comparators/token.js | 4 +- .../consul-ui/app/styles/components.scss | 4 +- .../app/styles/components/app-view.scss | 3 - .../app/styles/components/filter-bar.scss | 22 -- .../styles/components/filter-bar/layout.scss | 50 ---- .../styles/components/filter-bar/skin.scss | 38 --- .../styles/components/freetext-filter.scss | 17 -- .../components/freetext-filter/index.scss | 2 - .../components/freetext-filter/layout.scss | 17 -- .../components/freetext-filter/skin.scss | 24 -- .../app/styles/variables/custom-query.scss | 9 +- .../consul-ui/app/templates/dc/acls/index.hbs | 171 +++---------- .../app/templates/dc/acls/policies/index.hbs | 31 ++- .../app/templates/dc/acls/roles/index.hbs | 172 ++++++++------ .../app/templates/dc/acls/tokens/index.hbs | 59 +++-- .../app/templates/dc/intentions/index.hbs | 100 ++++---- .../consul-ui/app/templates/dc/kv/index.hbs | 224 +++++++++--------- .../app/templates/dc/nodes/index.hbs | 32 ++- .../app/templates/dc/nspaces/index.hbs | 156 ++++++------ .../app/templates/dc/services/index.hbs | 92 ++++--- .../templates/dc/services/show/instances.hbs | 36 ++- .../dc/services/show/intentions/index.hbs | 90 ++++--- .../templates/dc/services/show/services.hbs | 50 ++-- .../templates/dc/services/show/upstreams.hbs | 34 ++- .../consul-ui/app/utils/filter/index.js | 2 +- .../v1/internal/ui/gateway-services-nodes/_ | 4 +- ui/packages/consul-ui/package.json | 1 + .../acceptance/components/acl-filter.feature | 12 - .../components/catalog-filter.feature | 6 - .../components/data-collection-test.js | 26 ++ .../unit/controllers/dc/acls/index-test.js | 12 - .../dc/acls/policies/index-test.js | 12 - .../controllers/dc/acls/roles/index-test.js | 12 - .../controllers/dc/acls/tokens/index-test.js | 12 - .../controllers/dc/intentions/index-test.js | 12 - .../unit/controllers/dc/kv/index-test.js | 12 - .../unit/controllers/dc/nodes/index-test.js | 12 - .../unit/controllers/dc/nspaces/index-test.js | 12 - .../controllers/dc/services/index-test.js | 12 - .../unit/filter/predicates/intention-test.js | 5 +- .../unit/filter/predicates/service-test.js | 5 +- .../tests/unit/search/filters/acl-test.js | 36 --- .../tests/unit/search/filters/kv-test.js | 36 --- .../tests/unit/search/filters/node-test.js | 58 ----- .../tests/unit/search/predicates/acl-test.js | 33 +++ .../unit/search/predicates/intention-test.js | 59 +++-- .../tests/unit/search/predicates/kv-test.js | 32 +++ .../tests/unit/search/predicates/node-test.js | 47 ++++ .../{filters => predicates}/service-test.js | 17 +- .../{filters => predicates}/token-test.js | 57 +++-- .../unit/sort/comparators/service-test.js | 5 +- ui/yarn.lock | 10 +- 174 files changed, 2442 insertions(+), 2084 deletions(-) create mode 100644 ui/packages/consul-ui/app/components/consul/acl/list/index.hbs create mode 100644 ui/packages/consul-ui/app/components/consul/acl/search-bar/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/consul/intention/search-bar/index.js delete mode 100644 ui/packages/consul-ui/app/components/consul/kv/list/index.js create mode 100644 ui/packages/consul-ui/app/components/consul/kv/search-bar/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/consul/node/list/index.js delete mode 100644 ui/packages/consul-ui/app/components/consul/node/search-bar/index.js delete mode 100644 ui/packages/consul-ui/app/components/consul/nspace/search-bar/index.js delete mode 100644 ui/packages/consul-ui/app/components/consul/policy/list/index.js delete mode 100644 ui/packages/consul-ui/app/components/consul/role/list/index.js delete mode 100644 ui/packages/consul-ui/app/components/consul/role/search-bar/index.js delete mode 100644 ui/packages/consul-ui/app/components/consul/service-instance/list/index.js delete mode 100644 ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.js delete mode 100644 ui/packages/consul-ui/app/components/consul/service/search-bar/index.js delete mode 100644 ui/packages/consul-ui/app/components/consul/token/list/index.js delete mode 100644 ui/packages/consul-ui/app/components/consul/token/search-bar/index.js delete mode 100644 ui/packages/consul-ui/app/components/consul/upstream/search-bar/index.js create mode 100644 ui/packages/consul-ui/app/components/data-collection/index.hbs create mode 100644 ui/packages/consul-ui/app/components/data-collection/index.js create mode 100644 ui/packages/consul-ui/app/components/filter-bar/index.scss create mode 100644 ui/packages/consul-ui/app/components/filter-bar/layout.scss create mode 100644 ui/packages/consul-ui/app/components/filter-bar/skin.scss create mode 100644 ui/packages/consul-ui/app/components/freetext-filter/README.stories.mdx rename ui/packages/consul-ui/app/{styles/components/filter-bar => components/freetext-filter}/index.scss (100%) create mode 100644 ui/packages/consul-ui/app/components/freetext-filter/layout.scss create mode 100644 ui/packages/consul-ui/app/components/freetext-filter/skin.scss delete mode 100644 ui/packages/consul-ui/app/controllers/dc/acls/index.js delete mode 100644 ui/packages/consul-ui/app/controllers/dc/acls/policies/index.js delete mode 100644 ui/packages/consul-ui/app/controllers/dc/acls/roles/index.js delete mode 100644 ui/packages/consul-ui/app/controllers/dc/acls/tokens/index.js delete mode 100644 ui/packages/consul-ui/app/controllers/dc/intentions/index.js delete mode 100644 ui/packages/consul-ui/app/controllers/dc/kv/index.js delete mode 100644 ui/packages/consul-ui/app/controllers/dc/nodes/index.js delete mode 100644 ui/packages/consul-ui/app/controllers/dc/nspaces/index.js delete mode 100644 ui/packages/consul-ui/app/controllers/dc/services/show/intentions/index.js delete mode 100644 ui/packages/consul-ui/app/controllers/dc/services/show/services.js delete mode 100644 ui/packages/consul-ui/app/controllers/dc/services/show/upstreams.js create mode 100644 ui/packages/consul-ui/app/filter/predicates/acl.js create mode 100644 ui/packages/consul-ui/app/filter/predicates/kv.js delete mode 100644 ui/packages/consul-ui/app/search/filters/acl.js delete mode 100644 ui/packages/consul-ui/app/search/filters/kv.js delete mode 100644 ui/packages/consul-ui/app/search/filters/node.js delete mode 100644 ui/packages/consul-ui/app/search/filters/nspace.js delete mode 100644 ui/packages/consul-ui/app/search/filters/service.js delete mode 100644 ui/packages/consul-ui/app/search/filters/token.js create mode 100644 ui/packages/consul-ui/app/search/predicates/acl.js create mode 100644 ui/packages/consul-ui/app/search/predicates/kv.js create mode 100644 ui/packages/consul-ui/app/search/predicates/node.js create mode 100644 ui/packages/consul-ui/app/search/predicates/nspace.js create mode 100644 ui/packages/consul-ui/app/search/predicates/policy.js create mode 100644 ui/packages/consul-ui/app/search/predicates/role.js create mode 100644 ui/packages/consul-ui/app/search/predicates/service-instance.js create mode 100644 ui/packages/consul-ui/app/search/predicates/service.js create mode 100644 ui/packages/consul-ui/app/search/predicates/token.js create mode 100644 ui/packages/consul-ui/app/sort/comparators/acl.js delete mode 100644 ui/packages/consul-ui/app/styles/components/filter-bar.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/filter-bar/layout.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/filter-bar/skin.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/freetext-filter.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/freetext-filter/index.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/freetext-filter/layout.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/freetext-filter/skin.scss create mode 100644 ui/packages/consul-ui/tests/integration/components/data-collection-test.js delete mode 100644 ui/packages/consul-ui/tests/unit/controllers/dc/acls/index-test.js delete mode 100644 ui/packages/consul-ui/tests/unit/controllers/dc/acls/policies/index-test.js delete mode 100644 ui/packages/consul-ui/tests/unit/controllers/dc/acls/roles/index-test.js delete mode 100644 ui/packages/consul-ui/tests/unit/controllers/dc/acls/tokens/index-test.js delete mode 100644 ui/packages/consul-ui/tests/unit/controllers/dc/intentions/index-test.js delete mode 100644 ui/packages/consul-ui/tests/unit/controllers/dc/kv/index-test.js delete mode 100644 ui/packages/consul-ui/tests/unit/controllers/dc/nodes/index-test.js delete mode 100644 ui/packages/consul-ui/tests/unit/controllers/dc/nspaces/index-test.js delete mode 100644 ui/packages/consul-ui/tests/unit/controllers/dc/services/index-test.js delete mode 100644 ui/packages/consul-ui/tests/unit/search/filters/acl-test.js delete mode 100644 ui/packages/consul-ui/tests/unit/search/filters/kv-test.js delete mode 100644 ui/packages/consul-ui/tests/unit/search/filters/node-test.js create mode 100644 ui/packages/consul-ui/tests/unit/search/predicates/acl-test.js create mode 100644 ui/packages/consul-ui/tests/unit/search/predicates/kv-test.js create mode 100644 ui/packages/consul-ui/tests/unit/search/predicates/node-test.js rename ui/packages/consul-ui/tests/unit/search/{filters => predicates}/service-test.js (75%) rename ui/packages/consul-ui/tests/unit/search/{filters => predicates}/token-test.js (68%) diff --git a/ui/packages/consul-ui/app/components/consul/acl/list/index.hbs b/ui/packages/consul-ui/app/components/consul/acl/list/index.hbs new file mode 100644 index 000000000..371e0155e --- /dev/null +++ b/ui/packages/consul-ui/app/components/consul/acl/list/index.hbs @@ -0,0 +1,122 @@ +
+ + + Name + Type + + + + {{item.Name}} + + + {{#if (eq item.Type 'management')}} + {{item.Type}} + {{else}} + {{item.Type}} + {{/if}} + + + + + + More + + +
  • + Edit +
    • + {{#if (eq item.ID token.SecretID) }} +
  • + +
    +
    +
    +
    + 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}} +
  • + +
    • + {{# if (not-eq item.ID 'anonymous') }} +
  • + +
    +
    +
    +
    + Confirm Delete +
    +

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

    +
    +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    +
    • + {{/if}} +     +     +     +     +
    diff --git a/ui/packages/consul-ui/app/components/consul/acl/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/acl/search-bar/index.hbs new file mode 100644 index 000000000..c5beb16ad --- /dev/null +++ b/ui/packages/consul-ui/app/components/consul/acl/search-bar/index.hbs @@ -0,0 +1,59 @@ +
    +
    + +
    +
    + + + + Type + + + +{{#let components.Optgroup components.Option as |Optgroup Option|}} + + +{{/let}} + + +
    +
    + + + + {{#let (from-entries (array + (array "Name:asc" "A to Z") + (array "Name:desc" "Z to A") + )) + as |selectable| + }} + {{get selectable @sort}} + {{/let}} + + + +{{#let components.Optgroup components.Option as |Optgroup Option|}} + + +{{/let}} + + +
    +
    diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/list/index.hbs index 92a43a603..9c1606db5 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/list/index.hbs @@ -3,15 +3,8 @@ ...attributes {{did-update this.updateCRDManagement @items}} > - - - -{{#let (hash - Table=(component 'consul/intention/list/table' delete=writer.delete items=this.items) +{{yield (hash + Table=(component 'consul/intention/list/table' delete=@delete items=this.items) CheckNotice=(if this.checkedItem (component 'consul/intention/list/check' item=this.checkedItem) '' @@ -20,15 +13,5 @@ (component 'consul/intention/notice/custom-resource') '' ) -) as |api|}} - - {{#if (gt this.items.length 0)}} - {{yield api to="idle"}} - {{else}} - {{yield api to="empty"}} - {{/if}} -{{/let}} - - - +)}} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/index.js b/ui/packages/consul-ui/app/components/consul/intention/list/index.js index 01d0181ba..e07c637a2 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/list/index.js +++ b/ui/packages/consul-ui/app/components/consul/intention/list/index.js @@ -5,13 +5,8 @@ import { tracked } from '@glimmer/tracking'; import { sort } from '@ember/object/computed'; export default class ConsulIntentionList extends Component { - @service('filter') filter; - @service('sort') sort; - @service('search') search; @service('repository/intention') repo; - @sort('searched', 'comparator') sorted; - @tracked isManagedByCRDs; constructor(owner, args) { @@ -19,25 +14,11 @@ export default class ConsulIntentionList extends Component { this.updateCRDManagement(args.items); } get items() { - return this.sorted; - } - get filtered() { - const predicate = this.filter.predicate('intention'); - return this.args.items.filter(predicate(this.args.filters)); - } - get searched() { - if (typeof this.args.search === 'undefined') { - return this.filtered; - } - const predicate = this.search.predicate('intention'); - return this.filtered.filter(predicate(this.args.search)); - } - get comparator() { - return [this.args.sort]; + return this.args.items || []; } get checkedItem() { - if (this.searched.length === 1) { - return this.searched[0].SourceName === this.args.search ? this.searched[0] : null; + if (this.items.length === 1 && this.args.check) { + return this.items[0].SourceName === this.args.check ? this.items[0] : null; } return null; } diff --git a/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs index 630376dde..57cfa5faa 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.hbs @@ -2,27 +2,48 @@ class="consul-intention-search-bar filter-bar" ...attributes > - +
    + + + + + Search across + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + {{/let}} + + + +
    - Intent + Permission {{#let components.Optgroup components.Option as |Optgroup Option|}} - - - + + + {{/let}} @@ -32,7 +53,7 @@ class="type-sort" data-test-sort-control @position="right" - @onchange={{action onsort}} + @onchange={{action @onsort}} @multiple={{false}} as |components|> @@ -49,27 +70,27 @@ )) as |selectable| }} - {{get selectable sort}} + {{get selectable @sort}} {{/let}} {{#let components.Optgroup components.Option as |Optgroup Option|}} - - + + - - + + - - + + - - + + {{/let}} diff --git a/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.js b/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.js deleted file mode 100644 index 479865264..000000000 --- a/ui/packages/consul-ui/app/components/consul/intention/search-bar/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/consul/intention/search-bar/index.scss b/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.scss index 22ee1ea74..a823657d4 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/search-bar/index.scss @@ -1,9 +1,12 @@ .consul-intention-search-bar { .value-allow button::before { - @extend %with-arrow-right-color-mask, %as-pseudo; + @extend %with-arrow-right-mask, %as-pseudo; color: $green-500; } .value-deny button::before { @extend %with-deny-color-icon, %as-pseudo; } + .value- button::before { + @extend %with-layers-mask, %as-pseudo; + } } diff --git a/ui/packages/consul-ui/app/components/consul/kv/list/index.hbs b/ui/packages/consul-ui/app/components/consul/kv/list/index.hbs index efef90339..8099596e3 100644 --- a/ui/packages/consul-ui/app/components/consul/kv/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/kv/list/index.hbs @@ -1,58 +1,56 @@ - - -{{#if (gt items.length 0)}} - - - Name - - - - {{right-trim (left-trim item.Key parent.Key) '/'}} - - - - - - More - - -
  • - {{if item.isFolder 'View' 'Edit'}} -
    • -
  • - -
    -
    -
    -
    - Confirm Delete -
    -

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

    -
    -
      -
    • - -
      • -
    • - -
      • -
    -
    -
    -
    • -     -     -     -     -{{else}} - {{yield}} -{{/if}} -     -     \ No newline at end of file + + + Name + + + + {{right-trim (left-trim item.Key @parent.Key) '/'}} + + + + + + More + + +
  • + {{if item.isFolder 'View' 'Edit'}} +
    • +
  • + +
    +
    +
    +
    + Confirm Delete +
    +

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

    +
    +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    +
    • +     +     +     +     \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/kv/list/index.js b/ui/packages/consul-ui/app/components/consul/kv/list/index.js deleted file mode 100644 index 8e9833de2..000000000 --- a/ui/packages/consul-ui/app/components/consul/kv/list/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import Component from '@ember/component'; - -export default Component.extend({ - tagName: '', - ondelete: function() {}, -}); diff --git a/ui/packages/consul-ui/app/components/consul/kv/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/kv/search-bar/index.hbs new file mode 100644 index 000000000..0652216a1 --- /dev/null +++ b/ui/packages/consul-ui/app/components/consul/kv/search-bar/index.hbs @@ -0,0 +1,68 @@ +
    +
    + +
    +
    + + + + Type + + + +{{#let components.Optgroup components.Option as |Optgroup Option|}} + + +{{/let}} + + +
    +
    + + + + {{#let (from-entries (array + (array "Key:asc" "A to Z") + (array "Key:desc" "Z to A") + (array "Kind:asc" "Folders to Keys") + (array "Kind:desc" "Keys to Folders") + )) + as |selectable| + }} + {{get selectable @sort}} + {{/let}} + + + +{{#let components.Optgroup components.Option as |Optgroup Option|}} + + + + + + + + +{{/let}} + + +
    +
    \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/node/list/index.hbs b/ui/packages/consul-ui/app/components/consul/node/list/index.hbs index 081655a42..a7a9f871b 100644 --- a/ui/packages/consul-ui/app/components/consul/node/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/node/list/index.hbs @@ -1,5 +1,7 @@ -{{#if (gt items.length 0)}} - +
    @@ -24,8 +26,8 @@ - {{#if (eq item.Address leader.Address)}} - Leader + {{#if (eq item.Address @leader.Address)}} + Leader {{/if}} {{#if (gt item.Services.length 0)}} @@ -46,4 +48,3 @@
    -{{/if}} diff --git a/ui/packages/consul-ui/app/components/consul/node/list/index.js b/ui/packages/consul-ui/app/components/consul/node/list/index.js deleted file mode 100644 index 479865264..000000000 --- a/ui/packages/consul-ui/app/components/consul/node/list/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/consul/node/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/node/search-bar/index.hbs index 82814f07a..eb377d583 100644 --- a/ui/packages/consul-ui/app/components/consul/node/search-bar/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/node/search-bar/index.hbs @@ -1,14 +1,39 @@ -
    - + +
    + + + + + Search across + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + + {{/let}} + + + +
    @@ -18,10 +43,10 @@ {{#let components.Optgroup components.Option as |Optgroup Option|}} - - - - + + + + {{/let}} @@ -31,7 +56,7 @@ class="type-sort" data-test-sort-control @position="right" - @onchange={{action onsort}} + @onchange={{action @onsort}} @multiple={{false}} as |components|> @@ -44,19 +69,19 @@ )) as |selectable| }} - {{get selectable sort}} + {{get selectable @sort}} {{/let}} {{#let components.Optgroup components.Option as |Optgroup Option|}} - - + + - - + + {{/let}} diff --git a/ui/packages/consul-ui/app/components/consul/node/search-bar/index.js b/ui/packages/consul-ui/app/components/consul/node/search-bar/index.js deleted file mode 100644 index 479865264..000000000 --- a/ui/packages/consul-ui/app/components/consul/node/search-bar/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/consul/nspace/list/index.hbs b/ui/packages/consul-ui/app/components/consul/nspace/list/index.hbs index d5fcc588e..085f9d045 100644 --- a/ui/packages/consul-ui/app/components/consul/nspace/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/nspace/list/index.hbs @@ -1,59 +1,60 @@ -{{#if (gt items.length 0)}} - - - {{#if item.DeletedAt}} -

    - Deleting {{item.Name}}... -

    - {{else}} - {{item.Name}} - {{/if}} -     - -
    -
    Description
    -
    - {{item.Description}} -
    -
    - {{#if (env 'CONSUL_ACLS_ENABLED')}} - - {{/if}} -     - - {{#if (not item.DeletedAt)}} - - - - Edit - - - {{#if (not-eq item.Name 'default') }} - - - Delete - - - - - Confirm delete - - -

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

    -     - - Delete - -     -     -     - {{/if}} -     - {{/if}} -     -     + + +{{#if item.DeletedAt}} +

    + Deleting {{item.Name}}... +

    {{else}} - {{yield to="empty"}} -{{/if}} \ No newline at end of file + {{item.Name}} +{{/if}} +     + +
    +
    Description
    +
    + {{item.Description}} +
    +
    + {{#if (env 'CONSUL_ACLS_ENABLED')}} + + {{/if}} +     + +{{#if (not item.DeletedAt)}} + + + + Edit + + + {{#if (not-eq item.Name 'default') }} + + + Delete + + + + + Confirm delete + + +

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

    +     + + Delete + +     +     +     + {{/if}} +     +{{/if}} +     +     \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/nspace/list/index.js b/ui/packages/consul-ui/app/components/consul/nspace/list/index.js index 287b2bea3..5b894ebb4 100644 --- a/ui/packages/consul-ui/app/components/consul/nspace/list/index.js +++ b/ui/packages/consul-ui/app/components/consul/nspace/list/index.js @@ -1,10 +1,8 @@ -import Component from '@ember/component'; +import Component from '@glimmer/component'; +import { action } from '@ember/object'; -export default Component.extend({ - tagName: '', - actions: { - isLinkable: function(item) { - return !item.DeletedAt; - }, - }, -}); +export default class ConsulNspaceList extends Component { + isLinkable(item) { + return !item.DeletedAt; + } +} diff --git a/ui/packages/consul-ui/app/components/consul/nspace/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/nspace/search-bar/index.hbs index f7a5beca9..ab47be81b 100644 --- a/ui/packages/consul-ui/app/components/consul/nspace/search-bar/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/nspace/search-bar/index.hbs @@ -1,15 +1,41 @@ - - + +
    + + + + + Search across + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + + + {{/let}} + + + +
    @@ -20,15 +46,15 @@ )) as |selectable| }} - {{get selectable sort}} + {{get selectable @sort}} {{/let}} {{#let components.Optgroup components.Option as |Optgroup Option|}} - - + + {{/let}} diff --git a/ui/packages/consul-ui/app/components/consul/nspace/search-bar/index.js b/ui/packages/consul-ui/app/components/consul/nspace/search-bar/index.js deleted file mode 100644 index 479865264..000000000 --- a/ui/packages/consul-ui/app/components/consul/nspace/search-bar/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/consul/policy/list/index.hbs b/ui/packages/consul-ui/app/components/consul/policy/list/index.hbs index cf5985f11..738b581d6 100644 --- a/ui/packages/consul-ui/app/components/consul/policy/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/policy/list/index.hbs @@ -1,5 +1,7 @@ -{{#if (gt items.length 0)}} - + {{#if (eq (policy/typeof item) 'policy-management')}}
    @@ -40,7 +42,7 @@ {{#if (not-eq (policy/typeof item) 'policy-management')}} - + Delete @@ -63,5 +65,4 @@ {{/if}} - -{{/if}} \ No newline at end of file + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/policy/list/index.js b/ui/packages/consul-ui/app/components/consul/policy/list/index.js deleted file mode 100644 index 479865264..000000000 --- a/ui/packages/consul-ui/app/components/consul/policy/list/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/consul/policy/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/policy/search-bar/index.hbs index 0bddc4fcb..5572c00dc 100644 --- a/ui/packages/consul-ui/app/components/consul/policy/search-bar/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/policy/search-bar/index.hbs @@ -1,14 +1,38 @@ - - + +
    + + + + + Search across + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + {{/let}} + + + +
    @@ -19,16 +43,16 @@ {{#let components.Optgroup components.Option as |Optgroup Option|}} {{#each dcs as |dc|}} - + {{/each}} {{/let}} - + @@ -38,8 +62,8 @@ {{#let components.Optgroup components.Option as |Optgroup Option|}} - - + + {{/let}} @@ -49,7 +73,7 @@ class="type-sort" data-test-sort-control @position="right" - @onchange={{action onsort}} + @onchange={{action @onsort}} @multiple={{false}} as |components|> @@ -60,15 +84,15 @@ )) as |selectable| }} - {{get selectable sort}} + {{get selectable @sort}} {{/let}} {{#let components.Optgroup components.Option as |Optgroup Option|}} - - + + {{/let}} diff --git a/ui/packages/consul-ui/app/components/consul/policy/search-bar/index.js b/ui/packages/consul-ui/app/components/consul/policy/search-bar/index.js index 557064773..2d96508a2 100644 --- a/ui/packages/consul-ui/app/components/consul/policy/search-bar/index.js +++ b/ui/packages/consul-ui/app/components/consul/policy/search-bar/index.js @@ -1,3 +1,3 @@ -import Component from '@ember/component'; +import Component from '@glimmer/component'; -export default Component.extend({}); +export default class ConsulPolicySearchBarComponent extends Component {} diff --git a/ui/packages/consul-ui/app/components/consul/role/list/index.hbs b/ui/packages/consul-ui/app/components/consul/role/list/index.hbs index d45d4398f..ba2da7e60 100644 --- a/ui/packages/consul-ui/app/components/consul/role/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/role/list/index.hbs @@ -1,5 +1,8 @@ -{{#if (gt items.length 0)}} - + {{item.Name}} @@ -19,7 +22,7 @@ Edit - + Delete @@ -41,5 +44,4 @@ - -{{/if}} \ No newline at end of file + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/role/list/index.js b/ui/packages/consul-ui/app/components/consul/role/list/index.js deleted file mode 100644 index 479865264..000000000 --- a/ui/packages/consul-ui/app/components/consul/role/list/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/consul/role/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/role/search-bar/index.hbs index 359f672c4..0aae4f197 100644 --- a/ui/packages/consul-ui/app/components/consul/role/search-bar/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/role/search-bar/index.hbs @@ -1,15 +1,40 @@ - - + +
    + + + + + Search across + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + + {{/let}} + + + +
    @@ -22,19 +47,19 @@ )) as |selectable| }} - {{get selectable sort}} + {{get selectable @sort}} {{/let}} {{#let components.Optgroup components.Option as |Optgroup Option|}} - - + + - - + + {{/let}} diff --git a/ui/packages/consul-ui/app/components/consul/role/search-bar/index.js b/ui/packages/consul-ui/app/components/consul/role/search-bar/index.js deleted file mode 100644 index 557064773..000000000 --- a/ui/packages/consul-ui/app/components/consul/role/search-bar/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Component from '@ember/component'; - -export default Component.extend({}); diff --git a/ui/packages/consul-ui/app/components/consul/service-instance/list/index.hbs b/ui/packages/consul-ui/app/components/consul/service-instance/list/index.hbs index e305b9035..603b29c09 100644 --- a/ui/packages/consul-ui/app/components/consul/service-instance/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/service-instance/list/index.hbs @@ -1,84 +1,86 @@ -{{#if (gt items.length 0)}} - - - {{#if (eq routeName "dc.services.show")}} - - {{item.ID}} - - {{else}} - - {{item.Service.ID}} - - {{/if}} - - - {{#if checks}} - - + + + {{#if (eq @routeName "dc.services.show")}} + + {{item.ID}} + {{else}} - - - + + {{item.Service.ID}} + {{/if}} + + + {{#if @checks}} + + + {{else}} + + + + {{/if}} {{#if item.ProxyInstance}} -
    -
    - - This service uses a proxy for the Consul service mesh - -
    -
    - in service mesh with proxy -
    -
    +
    +
    + + This service uses a proxy for the Consul service mesh + +
    +
    + in service mesh with proxy +
    +
    {{/if}} {{#if (gt item.Node.Node.length 0)}} -
    -
    - - Node - -
    -
    - {{item.Node.Node}} -
    -
    +
    +
    + + Node + +
    +
    + {{item.Node.Node}} +
    +
    {{/if}} {{#if item.Service.Port}} -
    -
    - - IP Address and Port - -
    -
    - {{#if (not-eq item.Service.Address '')}} - {{item.Service.Address}}:{{item.Service.Port}} - {{else}} - {{item.Node.Address}}:{{item.Service.Port}} - {{/if}} -
    -
    +
    +
    + + IP Address and Port + +
    +
    + {{#if (not-eq item.Service.Address '')}} + {{item.Service.Address}}:{{item.Service.Port}} + {{else}} + {{item.Node.Address}}:{{item.Service.Port}} + {{/if}} +
    +
    {{/if}} -{{#if (and checks item.Port)}} -
    -
    - Port -
    -
    - - :{{item.Port}} -
    -
    +{{#if (and @checks item.Port)}} +
    +
    + Port +
    +
    + + :{{item.Port}} +
    +
    {{/if}} {{#if checks}} - + {{else}} - + {{/if}} -     -     -{{/if}} \ No newline at end of file +     +     \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/service-instance/list/index.js b/ui/packages/consul-ui/app/components/consul/service-instance/list/index.js deleted file mode 100644 index 479865264..000000000 --- a/ui/packages/consul-ui/app/components/consul/service-instance/list/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/consul/service-instance/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.hbs index 95df8a292..d4d44b52b 100644 --- a/ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.hbs @@ -1,14 +1,43 @@ - - + +
    + + + + + Search across + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + + + + + + {{/let}} + + + +
    @@ -18,18 +47,18 @@ {{#let components.Optgroup components.Option as |Optgroup Option|}} - - - - + + + + {{/let}} -{{#if (gt sources.length 0)}} +{{#if (gt @sources.length 0)}} @@ -39,8 +68,8 @@ {{#let components.Optgroup components.Option as |Optgroup Option|}} -{{#each sources as |source|}} - +{{#each @sources as |source|}} + {{/each}} {{/let}} @@ -52,7 +81,7 @@ class="type-sort" data-test-sort-control @position="right" - @onchange={{action onsort}} + @onchange={{action @onsort}} @multiple={{false}} as |components|> @@ -65,19 +94,19 @@ )) as |selectable| }} - {{get selectable sort}} + {{get selectable @sort}} {{/let}} {{#let components.Optgroup components.Option as |Optgroup Option|}} - - + + - - + + {{/let}} diff --git a/ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.js b/ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.js deleted file mode 100644 index 479865264..000000000 --- a/ui/packages/consul-ui/app/components/consul/service-instance/search-bar/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/consul/service/list/index.hbs b/ui/packages/consul-ui/app/components/consul/service/list/index.hbs index 4d29021fd..9aaac6180 100644 --- a/ui/packages/consul-ui/app/components/consul/service/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/service/list/index.hbs @@ -1,5 +1,10 @@ -{{#if (gt items.length 0)}} - +
    @@ -84,5 +89,4 @@ {{/if}} - -{{/if}} \ No newline at end of file + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/service/list/index.js b/ui/packages/consul-ui/app/components/consul/service/list/index.js index b802add9e..b90fa5ee4 100644 --- a/ui/packages/consul-ui/app/components/consul/service/list/index.js +++ b/ui/packages/consul-ui/app/components/consul/service/list/index.js @@ -1,11 +1,9 @@ -import Component from '@ember/component'; -import { get } from '@ember/object'; +import Component from '@glimmer/component'; +import { action } from '@ember/object'; -export default Component.extend({ - tagName: '', - actions: { - isLinkable: function(item) { - return get(item, 'InstanceCount') > 0; - }, - }, -}); +export default class ConsulServiceList extends Component { + @action + isLinkable(item) { + return item.InstanceCount > 0; + } +} diff --git a/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs index 79e9066d3..007bd3e9d 100644 --- a/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs @@ -1,14 +1,38 @@ - - + +
    + + + + + Search across + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + {{/let}} + + + +
    @@ -18,16 +42,16 @@ {{#let components.Optgroup components.Option as |Optgroup Option|}} - - - - + + + + {{/let}} @@ -37,24 +61,24 @@ {{#let components.Optgroup components.Option as |Optgroup Option|}} - + - - - + + + - - + + {{/let}} -{{#if (gt sources.length 0)}} +{{#if (gt @sources.length 0)}} @@ -64,8 +88,8 @@ {{#let components.Optgroup components.Option as |Optgroup Option|}} -{{#each sources as |source|}} - +{{#each @sources as |source|}} + {{/each}} {{/let}} @@ -77,7 +101,7 @@ class="type-sort" data-test-sort-control @position="right" - @onchange={{action onsort}} + @onchange={{action @onsort}} @multiple={{false}} as |components|> @@ -90,19 +114,19 @@ )) as |selectable| }} - {{get selectable sort}} + {{get selectable @sort}} {{/let}} {{#let components.Optgroup components.Option as |Optgroup Option|}} - - + + - - + + {{/let}} diff --git a/ui/packages/consul-ui/app/components/consul/service/search-bar/index.js b/ui/packages/consul-ui/app/components/consul/service/search-bar/index.js deleted file mode 100644 index 479865264..000000000 --- a/ui/packages/consul-ui/app/components/consul/service/search-bar/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/consul/token/list/index.hbs b/ui/packages/consul-ui/app/components/consul/token/list/index.hbs index 82160db51..544045875 100644 --- a/ui/packages/consul-ui/app/components/consul/token/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/token/list/index.hbs @@ -1,7 +1,9 @@ -{{#if (gt items.length 0)}} - + -{{#if (eq item.AccessorID token.AccessorID)}} +{{#if (eq item.AccessorID @token.AccessorID)}}
    @@ -35,14 +37,14 @@ {{#if (not (token/is-legacy item))}} - + Duplicate {{/if}} {{#if (eq item.AccessorID token.AccessorID)}} - + Logout @@ -63,7 +65,7 @@ {{else}} - + Use @@ -84,8 +86,8 @@ {{/if}} - {{#if (not (or (token/is-anonymous item) (eq item.AccessorID token.AccessorID)))}} - + {{#if (not (or (token/is-anonymous item) (eq item.AccessorID @token.AccessorID)))}} + Delete @@ -108,5 +110,4 @@ {{/if}} - -{{/if}} \ No newline at end of file + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/token/list/index.js b/ui/packages/consul-ui/app/components/consul/token/list/index.js deleted file mode 100644 index 479865264..000000000 --- a/ui/packages/consul-ui/app/components/consul/token/list/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/consul/token/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/token/search-bar/index.hbs index 52618e540..e5cdacd1c 100644 --- a/ui/packages/consul-ui/app/components/consul/token/search-bar/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/token/search-bar/index.hbs @@ -1,13 +1,39 @@ - - + +
    + + + + + Search across + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + + + {{/let}} + + + +
    @@ -17,9 +43,9 @@ {{#let components.Optgroup components.Option as |Optgroup Option|}} - - - + + + {{/let}} @@ -29,7 +55,7 @@ class="type-sort" data-test-sort-control @position="right" - @onchange={{action onsort}} + @onchange={{action @onsort}} @multiple={{false}} as |components|> @@ -40,15 +66,15 @@ )) as |selectable| }} - {{get selectable sort}} + {{get selectable @sort}} {{/let}} {{#let components.Optgroup components.Option as |Optgroup Option|}} - - + + {{/let}} diff --git a/ui/packages/consul-ui/app/components/consul/token/search-bar/index.js b/ui/packages/consul-ui/app/components/consul/token/search-bar/index.js deleted file mode 100644 index 557064773..000000000 --- a/ui/packages/consul-ui/app/components/consul/token/search-bar/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Component from '@ember/component'; - -export default Component.extend({}); diff --git a/ui/packages/consul-ui/app/components/consul/upstream/list/index.hbs b/ui/packages/consul-ui/app/components/consul/upstream/list/index.hbs index 5668c935b..5a1aade21 100644 --- a/ui/packages/consul-ui/app/components/consul/upstream/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/upstream/list/index.hbs @@ -1,4 +1,9 @@ - + {{#if (gt item.InstanceCount 0)}}
    @@ -19,8 +24,9 @@
    - {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace nspace))}} - + {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace @nspace))}} + {{item.Namespace}} + {{item.Name}} {{else}} @@ -35,11 +41,11 @@ {{/if}}     - {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace nspace))}} + {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace @nspace))}}
    - Namespace + Namespace
    @@ -47,18 +53,19 @@
    {{/if}} -{{#if (gt item.GatewayConfig.Addresses.length 0)}} {{#each item.GatewayConfig.Addresses as |address|}}
    + Address +
    +
    -
    -
    {{address}}
    + {{address}} +
    {{/each}} -{{/if}}     diff --git a/ui/packages/consul-ui/app/components/consul/upstream/list/index.js b/ui/packages/consul-ui/app/components/consul/upstream/list/index.js index b802add9e..b90fa5ee4 100644 --- a/ui/packages/consul-ui/app/components/consul/upstream/list/index.js +++ b/ui/packages/consul-ui/app/components/consul/upstream/list/index.js @@ -1,11 +1,9 @@ -import Component from '@ember/component'; -import { get } from '@ember/object'; +import Component from '@glimmer/component'; +import { action } from '@ember/object'; -export default Component.extend({ - tagName: '', - actions: { - isLinkable: function(item) { - return get(item, 'InstanceCount') > 0; - }, - }, -}); +export default class ConsulServiceList extends Component { + @action + isLinkable(item) { + return item.InstanceCount > 0; + } +} diff --git a/ui/packages/consul-ui/app/components/consul/upstream/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/upstream/search-bar/index.hbs index d8a4af87b..9cdc7242a 100644 --- a/ui/packages/consul-ui/app/components/consul/upstream/search-bar/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/upstream/search-bar/index.hbs @@ -1,13 +1,37 @@ - - + +
    + + + + + Search across + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + {{/let}} + + + +
    @@ -17,8 +41,8 @@ {{#let components.Optgroup components.Option as |Optgroup Option|}} - - + + {{/let}} @@ -28,7 +52,7 @@ class="type-sort" data-test-sort-control @position="right" - @onchange={{action onsort}} + @onchange={{action @onsort}} @multiple={{false}} as |components|> @@ -41,19 +65,19 @@ )) as |selectable| }} - {{get selectable sort}} + {{get selectable @sort}} {{/let}} {{#let components.Optgroup components.Option as |Optgroup Option|}} - - + + - - + + {{/let}} diff --git a/ui/packages/consul-ui/app/components/consul/upstream/search-bar/index.js b/ui/packages/consul-ui/app/components/consul/upstream/search-bar/index.js deleted file mode 100644 index 479865264..000000000 --- a/ui/packages/consul-ui/app/components/consul/upstream/search-bar/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/data-collection/index.hbs b/ui/packages/consul-ui/app/components/data-collection/index.hbs new file mode 100644 index 000000000..45e6c381c --- /dev/null +++ b/ui/packages/consul-ui/app/components/data-collection/index.hbs @@ -0,0 +1,5 @@ +{{yield (hash + items=this.items + Collection=(if (gt this.items.length 0) (component 'anonymous') '') + Empty=(if (eq this.items.length 0) (component 'anonymous') '') +)}} diff --git a/ui/packages/consul-ui/app/components/data-collection/index.js b/ui/packages/consul-ui/app/components/data-collection/index.js new file mode 100644 index 000000000..fcde9b9f1 --- /dev/null +++ b/ui/packages/consul-ui/app/components/data-collection/index.js @@ -0,0 +1,56 @@ +import Component from '@glimmer/component'; +import { inject as service } from '@ember/service'; +import { sort } from '@ember/object/computed'; +import { defineProperty } from '@ember/object'; + +export default class DataCollectionComponent extends Component { + @service('filter') filter; + @service('sort') sort; + @service('search') search; + + get type() { + return this.args.type; + } + + get items() { + // the ember sort computed accepts either: + // 1. The name of a property (as a string) returning an array properties to sort by + // 2. A function to use for sorting + let comparator = 'comparator'; + if (typeof this.comparator === 'function') { + comparator = this.comparator; + } + defineProperty(this, 'sorted', sort('searched', comparator)); + return this.sorted; + } + + get searched() { + if (typeof this.args.search === 'undefined') { + return this.filtered; + } + const predicate = this.search.predicate(this.type); + const options = {}; + if (typeof this.args.filters.searchproperties !== 'undefined') { + options.properties = this.args.filters.searchproperties; + } + return this.filtered.filter(predicate(this.args.search, options)); + } + + get filtered() { + if (typeof this.args.filters === 'undefined') { + return this.args.items; + } + const predicate = this.filter.predicate(this.type); + if (typeof predicate === 'undefined') { + return this.args.items; + } + return this.args.items.filter(predicate(this.args.filters)); + } + + get comparator() { + if (typeof this.args.sort === 'undefined') { + return []; + } + return this.sort.comparator(this.type)(this.args.sort); + } +} diff --git a/ui/packages/consul-ui/app/components/filter-bar/index.scss b/ui/packages/consul-ui/app/components/filter-bar/index.scss new file mode 100644 index 000000000..1e3f2d0f8 --- /dev/null +++ b/ui/packages/consul-ui/app/components/filter-bar/index.scss @@ -0,0 +1,5 @@ +@import './skin'; +@import './layout'; +%filter-bar-reversed { + color: inherit; +} diff --git a/ui/packages/consul-ui/app/components/filter-bar/layout.scss b/ui/packages/consul-ui/app/components/filter-bar/layout.scss new file mode 100644 index 000000000..eb9019ea0 --- /dev/null +++ b/ui/packages/consul-ui/app/components/filter-bar/layout.scss @@ -0,0 +1,45 @@ +.filter-bar { + &, + > div { + display: flex; + } + & { + padding: 4px 8px; + } + .sort { + margin-left: auto; + } + .popover-select { + position: relative; + z-index: 3; + } + .popover-menu > [type='checkbox'] + label button { + padding-left: 1.5rem !important; + padding-right: 1.5rem !important; + + } + .popover-menu [role='menuitem'] { + justify-content: normal !important; + } +} +@media #{$--lt-horizontal-filters} { + .filter-bar { + &, + & > div { + flex-wrap: wrap; + } + .search { + position: relative; + z-index: 4; + width: 100%; + margin-bottom: .3rem; + } + } +} +@media #{$--lt-horizontal-selects} { + .filter-bar { + .filters, .sort { + display: none; + } + } +} diff --git a/ui/packages/consul-ui/app/components/filter-bar/skin.scss b/ui/packages/consul-ui/app/components/filter-bar/skin.scss new file mode 100644 index 000000000..49feb3c5e --- /dev/null +++ b/ui/packages/consul-ui/app/components/filter-bar/skin.scss @@ -0,0 +1,13 @@ +.filter-bar { + & { + background-color: $gray-010; + border-bottom: $decor-border-100; + border-color: $gray-200; + } + .filters, .sort { + .popover-menu > [type='checkbox']:checked + label button { + color: $blue-500; + background-color: $gray-100; + } + } +} diff --git a/ui/packages/consul-ui/app/components/freetext-filter/README.stories.mdx b/ui/packages/consul-ui/app/components/freetext-filter/README.stories.mdx new file mode 100644 index 000000000..009a68ec3 --- /dev/null +++ b/ui/packages/consul-ui/app/components/freetext-filter/README.stories.mdx @@ -0,0 +1,45 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; + + + +# FreetextFilter + + + {(args) => ({ + template: hbs``, + context: args + })} + + {(args) => ({ + template: hbs` + + + + Search across + + + + {{#let popover.Optgroup popover.Option as |Optgroup Option|}} + + + {{/let}} + + + `, + context: args + })} + + + diff --git a/ui/packages/consul-ui/app/components/freetext-filter/index.hbs b/ui/packages/consul-ui/app/components/freetext-filter/index.hbs index 8ec2ffde2..8c70ff8b8 100644 --- a/ui/packages/consul-ui/app/components/freetext-filter/index.hbs +++ b/ui/packages/consul-ui/app/components/freetext-filter/index.hbs @@ -1,6 +1,19 @@ -
    - +
    + + {{yield}}
    \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/freetext-filter/index.js b/ui/packages/consul-ui/app/components/freetext-filter/index.js index 98f6a3109..a8eeda4ae 100644 --- a/ui/packages/consul-ui/app/components/freetext-filter/index.js +++ b/ui/packages/consul-ui/app/components/freetext-filter/index.js @@ -1,19 +1,25 @@ -import Component from '@ember/component'; -import { inject as service } from '@ember/service'; +import Component from '@glimmer/component'; +import { action } from '@ember/object'; + const ENTER = 13; -export default Component.extend({ - dom: service('dom'), - tagName: '', - actions: { - change: function(e) { - this.onsearch( - this.dom.setEventTargetProperty(e, 'value', value => (value === '' ? undefined : value)) - ); - }, - keydown: function(e) { - if (e.keyCode === ENTER) { - e.preventDefault(); - } - }, - }, -}); +export default class FreetextFilter extends Component { + get placeholder() { + return this.args.placeholder || 'Search'; + } + + get onsearch() { + return this.args.onsearch || (() => {}); + } + + @action + change(e) { + this.onsearch(e); + } + + @action + keydown(e) { + if (e.keyCode === ENTER) { + e.preventDefault(); + } + } +} diff --git a/ui/packages/consul-ui/app/styles/components/filter-bar/index.scss b/ui/packages/consul-ui/app/components/freetext-filter/index.scss similarity index 100% rename from ui/packages/consul-ui/app/styles/components/filter-bar/index.scss rename to ui/packages/consul-ui/app/components/freetext-filter/index.scss diff --git a/ui/packages/consul-ui/app/components/freetext-filter/layout.scss b/ui/packages/consul-ui/app/components/freetext-filter/layout.scss new file mode 100644 index 000000000..57fc5b72a --- /dev/null +++ b/ui/packages/consul-ui/app/components/freetext-filter/layout.scss @@ -0,0 +1,28 @@ +.freetext-filter { + --height: 2.2rem; + & { + display: flex; + position: relative; + height: var(--height); + } + &_input, + & > label { + flex-grow: 1; + } + &_input, + &_label { + height: 100%; + } + &_input { + padding: 8px 10px; + padding-left: var(--height); + min-width: 12.7rem; + width: 100%; + } + &_label { + visibility: hidden; + position: absolute; + z-index: 1; + width: var(--height); + } +} diff --git a/ui/packages/consul-ui/app/components/freetext-filter/skin.scss b/ui/packages/consul-ui/app/components/freetext-filter/skin.scss new file mode 100644 index 000000000..26d51da71 --- /dev/null +++ b/ui/packages/consul-ui/app/components/freetext-filter/skin.scss @@ -0,0 +1,49 @@ +.freetext-filter { + & { + border: $decor-border-100; + border-radius: $decor-radius-100; + + background-color: $white; + border-color: $gray-200; + color: $gray-400; + } + &:hover, + &:hover * { + border-color: $gray-400; + } + & *, + &_input::placeholder { + cursor: inherit; + color: inherit; + border-color: inherit; + } + + &_input { + -webkit-appearance: none; + border: none; + } + &_label::after { + @extend %as-pseudo; + position: absolute; + top: 50%; + left: 50%; + width: 16px; + height: 16px; + margin-left: -8px; + margin-top: -8px; + } + &_label::after { + @extend %with-search-mask; + } + .popover-menu { + background-color: $gray-050; + color: $gray-800; + } + .popover-menu { + border-left: 1px solid; + border-color: inherit; + } + .popover-menu > [type='checkbox']:checked + label button { + background-color: $gray-200; + } +} diff --git a/ui/packages/consul-ui/app/components/more-popover-menu/index.hbs b/ui/packages/consul-ui/app/components/more-popover-menu/index.hbs index 614a70c72..6fd727f11 100644 --- a/ui/packages/consul-ui/app/components/more-popover-menu/index.hbs +++ b/ui/packages/consul-ui/app/components/more-popover-menu/index.hbs @@ -1,5 +1,12 @@ -
    - +
    + More diff --git a/ui/packages/consul-ui/app/components/popover-menu/index.hbs b/ui/packages/consul-ui/app/components/popover-menu/index.hbs index b72f25d66..a894f2d5f 100644 --- a/ui/packages/consul-ui/app/components/popover-menu/index.hbs +++ b/ui/packages/consul-ui/app/components/popover-menu/index.hbs @@ -1,6 +1,9 @@ - {{yield}} -
    - +{{yield}} +
    + {{#let (hash MenuItem=(component @@ -18,46 +21,46 @@ ) ) as |components|}} - {{#let (hash - toggle=this.toggle.click - ) - as |api|}} +{{#let (hash + toggle=this.toggle.click +) +as |api|}} - - - - + + + + - - - - - {{#each submenus as |sub|}} - - {{/each}} + + + + + {{#each submenus as |sub|}} + + {{/each}} + + {{#if hasHeader}} + + {{yield components api}} + {{#yield-slot name="header"}}{{else}}{{/yield-slot}} - {{#if hasHeader}} - - {{yield components api}} - {{#yield-slot name="header"}}{{else}}{{/yield-slot}} - - {{/if}} - - - {{yield components api}} - - - + {{/if}} + + + {{yield components api}} + + + - {{/let}} +{{/let}} {{/let}} - -
    \ No newline at end of file +     +
    \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/popover-menu/menu-item/index.hbs b/ui/packages/consul-ui/app/components/popover-menu/menu-item/index.hbs index ef42ac9dc..347097969 100644 --- a/ui/packages/consul-ui/app/components/popover-menu/menu-item/index.hbs +++ b/ui/packages/consul-ui/app/components/popover-menu/menu-item/index.hbs @@ -7,7 +7,7 @@
    {{yield}} diff --git a/ui/packages/consul-ui/app/components/popover-select/index.hbs b/ui/packages/consul-ui/app/components/popover-select/index.hbs index 871fb3250..a3ceb2cde 100644 --- a/ui/packages/consul-ui/app/components/popover-select/index.hbs +++ b/ui/packages/consul-ui/app/components/popover-select/index.hbs @@ -1,4 +1,9 @@ - + {{yield}} {{#let (component 'popover-select/optgroup' components=components) @@ -28,4 +33,4 @@ {{/let}} - + diff --git a/ui/packages/consul-ui/app/components/popover-select/index.js b/ui/packages/consul-ui/app/components/popover-select/index.js index 5c63497fb..4062c054e 100644 --- a/ui/packages/consul-ui/app/components/popover-select/index.js +++ b/ui/packages/consul-ui/app/components/popover-select/index.js @@ -40,10 +40,7 @@ export default Component.extend(Slotted, { this.dom.setEventTargetProperties(e, { selected: target => value, selectedItems: target => { - const opts = [...options]; - if (opts.length > 0) { - return opts.join(','); - } + return [...options].join(','); }, }) ); diff --git a/ui/packages/consul-ui/app/components/toggle-button/index.hbs b/ui/packages/consul-ui/app/components/toggle-button/index.hbs index deeb81d9d..0f497bdb1 100644 --- a/ui/packages/consul-ui/app/components/toggle-button/index.hbs +++ b/ui/packages/consul-ui/app/components/toggle-button/index.hbs @@ -1,12 +1,15 @@ -