diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/auth-method/search-bar/index.hbs index be122a1d83..00238194cb 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/search-bar/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/auth-method/search-bar/index.hbs @@ -1,148 +1,176 @@ - - <:status as |search|> + + <:status as |search|> -{{#let - - (t (concat "components.consul.auth-method.search-bar." search.status.key ".name") - default=(array - (concat "common.search." search.status.key) - (concat "common.consul." search.status.key) + {{#let + (t + (concat 'components.consul.auth-method.search-bar.' search.status.key '.name') + default=(array + (concat 'common.search.' search.status.key) (concat 'common.consul.' search.status.key) + ) ) - ) - - (t (concat "components.consul.auth-method.search-bar." search.status.key ".options." search.status.value) - default=(array - (concat "common.search." search.status.value) - (concat "common.consul." search.status.value) - (concat "common.brand." search.status.value) + (t + (concat + 'components.consul.auth-method.search-bar.' + search.status.key + '.options.' + search.status.value + ) + default=(array + (concat 'common.search.' search.status.value) + (concat 'common.consul.' search.status.value) + (concat 'common.brand.' search.status.value) + ) ) - ) - -as |key value|}} - + as |key value| + }} +
{{key}}
{{value}}
 -{{/let}} + {{/let}} - - <:search as |search|> - + <:search as |search|> + + - - - - {{t "common.search.searchproperty"}} - - - - {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + {{t 'common.search.searchproperty'}} + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} {{#each @filter.searchproperty.default as |prop|}} {{/each}} - {{/let}} - - - - - <:filter as |search|> - - - - {{t "components.consul.auth-method.search-bar.kind.name"}} - + {{/let}} - + + + + <:filter as |search|> + + + + {{t 'components.consul.auth-method.search-bar.kind.name'}} + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} - - - {{#if (env 'CONSUL_SSO_ENABLED')}} - - {{/if}} - {{/let}} - - - - - - {{t "components.consul.auth-method.search-bar.locality.name"}} - - - - {{#let components.Optgroup components.Option as |Optgroup Option|}} - {{#each (array "local" "global") as |option|}} - - {{/each}} - {{/let}} - - - - <:sort as |search|> - - - - {{#let (from-entries (array - (array "MethodName:asc" (t "common.sort.alpha.asc")) - (array "MethodName:desc" (t "common.sort.alpha.desc")) - (array "TokenTTL:desc" (t "common.sort.duration.asc")) - (array "TokenTTL:asc" (t "common.sort.duration.desc")) - )) - as |selectable| - }} - {{get selectable @sort.value}} - {{/let}} - - - - {{#let components.Optgroup components.Option as |Optgroup Option|}} - - - - - - - - - {{/let}} - - - + + {{#if (env 'CONSUL_SSO_ENABLED')}} + + {{/if}} + {{/let}} + + + + + + {{t 'components.consul.auth-method.search-bar.locality.name'}} + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + {{#each (array 'local' 'global') as |option|}} + + {{/each}} + {{/let}} + + + + <:sort as |search|> + + + + {{#let + (from-entries + (array + (array 'MethodName:asc' (t 'common.sort.alpha.asc')) + (array 'MethodName:desc' (t 'common.sort.alpha.desc')) + (array 'TokenTTL:desc' (t 'common.sort.duration.asc')) + (array 'TokenTTL:asc' (t 'common.sort.duration.desc')) + ) + ) + as |selectable| + }} + {{get selectable @sort.value}} + {{/let}} + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + + + + + + + {{/let}} + + + diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs b/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs index 6aadacc3ca..7d4e4aa87d 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs @@ -1,3 +1,8 @@ - - {{t (concat "common.brand." @item.Type)}} - +{{#let (icon-mapping @item.Type) as |flightIcon|}} + + {{#if flightIcon}} + + {{/if}} + {{t (concat "common.brand." @item.Type)}} + +{{/let}} diff --git a/ui/packages/consul-ui/app/components/consul/external-source/index.hbs b/ui/packages/consul-ui/app/components/consul/external-source/index.hbs index a2ee22a001..19d33a8ab6 100644 --- a/ui/packages/consul-ui/app/components/consul/external-source/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/external-source/index.hbs @@ -5,9 +5,10 @@
+ Registered via {{t (concat "common.brand." externalSource)}}
@@ -32,9 +33,10 @@ {{else if externalSource}} + {{#if @label}} {{@label}} {{else}} diff --git a/ui/packages/consul-ui/app/components/consul/external-source/index.scss b/ui/packages/consul-ui/app/components/consul/external-source/index.scss index 0b6656edef..b79530dfeb 100644 --- a/ui/packages/consul-ui/app/components/consul/external-source/index.scss +++ b/ui/packages/consul-ui/app/components/consul/external-source/index.scss @@ -6,29 +6,6 @@ --icon-size: icon-300; } -.consul-external-source.kubernetes::before { - @extend %with-logo-kubernetes-color-icon, %as-pseudo; -} -.consul-external-source.terraform::before { - @extend %with-logo-terraform-color-icon, %as-pseudo; -} -.consul-external-source.nomad::before { - @extend %with-logo-nomad-color-icon, %as-pseudo; -} -.consul-external-source.consul::before, -.consul-external-source.consul-api-gateway::before { - @extend %with-logo-consul-color-icon, %as-pseudo; -} -.consul-external-source.vault::before { - @extend %with-vault-300; -} -.consul-external-source.lambda::before, -.consul-external-source.aws::before { - @extend %with-aws-300; -} -.consul-external-source.leader::before { - @extend %with-star-outline-mask, %as-pseudo; -} .consul-external-source.jwt::before { @extend %with-logo-jwt-color-icon, %as-pseudo; } diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs index e8190f4838..9dbd2a8e50 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs @@ -1,171 +1,187 @@ - - Source -   - Destination - - Permissions - - Permissions intercept an Intention's traffic using Layer 7 criteria, such as path prefixes and http headers. - - -   - - - - - {{#if (eq item.SourceName '*') }} - All Services (*) - {{else}} - {{item.SourceName}} - {{/if}} - {{! TODO: slugify }} - - - - - - - {{capitalize (or item.Action "App aware")}} - - - - {{#if (eq item.DestinationName '*') }} - All Services (*) - {{else}} - {{item.DestinationName}} - {{/if}} - {{#if (or (can 'use nspaces') (can 'use partitions'))}} - {{! TODO: slugify }} - - {{or item.DestinationPartition 'default'}} / {{or item.DestinationNS 'default'}} - - {{/if}} - - - - {{#if (gt item.Permissions.length 0)}} - {{pluralize item.Permissions.length 'Permission'}} - {{/if}} - - - {{#if item.IsManagedByCRD}} - - {{/if}} - - - - + + Source +   + Destination + + Permissions + + Permissions intercept an Intention's traffic using Layer 7 criteria, such as path + prefixes and http headers. + + +   + + + + - - More - - - {{#if (can "write intention" item=item)}} -
  • - Edit -
    • -
  • - -
    - - <:header> - Confirm Delete - - <:body> -

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

    - - <:actions as |Actions|> - - - Delete - - - - - Cancel - - - -     -
    -
    • - {{else if (can "view CRD intention" item=item)}} -
  • -
    - - <:header> + {{#if (eq item.SourceName '*')}} + All Services (*) + {{else}} + {{item.SourceName}} + {{/if}} + {{! TODO: slugify }} + + + + + + + {{capitalize (or item.Action 'App aware')}} + + + + {{#if (eq item.DestinationName '*')}} + All Services (*) + {{else}} + {{item.DestinationName}} + {{/if}} + {{#if (or (can 'use nspaces') (can 'use partitions'))}} + {{! TODO: slugify }} + + {{or + item.DestinationPartition + 'default' + }} + / + {{or + item.DestinationNS + 'default' + }} + + {{/if}} + + + + {{#if (gt item.Permissions.length 0)}} + {{pluralize item.Permissions.length 'Permission'}} + {{/if}} + + + {{#if item.IsManagedByCRD}} + + {{/if}} + + + + + + More + + + {{#if (can 'write intention' item=item)}} +
  • + Edit +
    • +
  • + +
    + + <:header> + Confirm Delete + + <:body> +

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

    + + <:actions as |Actions|> + + + Delete + + + + + Cancel + + + +     +
    +
    • + {{else if (can 'view CRD intention' item=item)}} +
  • +
    + + <:header> + + Managed by CRD - - <:body> -

    - This intention is being managed through an Intention Custom Resource in your Kubernetes cluster. It is view only in the UI. -

    - - <:actions as |Actions|> - - - View - - - - - Cancel - - - -     -
    -
    • - {{else}} -
  • - - View - -
    • - {{/if}} -     -     -     +     + + <:body> +

    + This intention is being managed through an Intention Custom Resource in your + Kubernetes cluster. It is view only in the UI. +

    + + <:actions as |Actions|> + + + View + + + + + Cancel + + + + + + + {{else}} +
  • + + View + +
    • + {{/if}} + + + diff --git a/ui/packages/consul-ui/app/components/consul/logo/index.hbs b/ui/packages/consul-ui/app/components/consul/logo/index.hbs deleted file mode 100644 index f6152df806..0000000000 --- a/ui/packages/consul-ui/app/components/consul/logo/index.hbs +++ /dev/null @@ -1,4 +0,0 @@ - - Consul - - \ No newline at end of file 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 b8fdbcf9af..919926b04f 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,156 +1,160 @@ - - <:status as |search|> + + <:status as |search|> -{{#let - - (t (concat "components.consul.service-instance.search-bar." search.status.key ".name") - default=(array - (concat "common.search." search.status.key) - (concat "common.consul." search.status.key) + {{#let + (t + (concat 'components.consul.service-instance.search-bar.' search.status.key '.name') + default=(array + (concat 'common.search.' search.status.key) (concat 'common.consul.' search.status.key) + ) ) - ) - - (t (concat "components.consul.service-instance.search-bar." search.status.key ".options." search.status.value) - default=(array - (concat "common.search." search.status.value) - (concat "common.consul." search.status.value) - (concat "common.brand." search.status.value) + (t + (concat + 'components.consul.service-instance.search-bar.' + search.status.key + '.options.' + search.status.value + ) + default=(array + (concat 'common.search.' search.status.value) + (concat 'common.consul.' search.status.value) + (concat 'common.brand.' search.status.value) + ) ) - ) - -as |key value|}} - + as |key value| + }} +
    {{key}}
    {{value}}
     -{{/let}} + {{/let}} - - <:search as |search|> - -{{#if @filter.searchproperty}} + + <:search as |search|> + + {{#if @filter.searchproperty}} - + as |components| + > + - {{t "common.search.searchproperty"}} + {{t 'common.search.searchproperty'}} - - {{#let components.Optgroup components.Option as |Optgroup Option|}} - {{#each @filter.searchproperty.default as |prop|}} - - {{/each}} - {{/let}} + + {{#let components.Option as |Option|}} + {{#each @filter.searchproperty.default as |prop|}} + + {{/each}} + {{/let}} - {{/if}} - - - <:filter as |search|> + {{/if}} + + + <:filter as |search|> + + + + {{t 'common.consul.status'}} + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + {{#each (array 'passing' 'warning' 'critical' 'empty') as |state|}} + + {{/each}} + {{/let}} + + + {{#if (gt @sources.length 0)}} - - - {{t "common.consul.status"}} - - - - {{#let components.Optgroup components.Option as |Optgroup Option|}} - {{#each (array "passing" "warning" "critical" "empty") as |state|}} - - {{/each}} - {{/let}} - - - {{#if (gt @sources.length 0)}} - - - - {{t "common.search.source"}} - - - - {{#let components.Optgroup components.Option as |Optgroup Option|}} - {{#each @sources as |source|}} - - {{/each}} - {{/let}} - + as |components| + > + - {{/if}} - - <:sort as |search|> - - - - {{#let (from-entries (array - (array "Name:asc" (t "common.sort.alpha.asc")) - (array "Name:desc" (t "common.sort.alpha.desc")) - (array "Status:asc" (t "common.sort.status.asc")) - (array "Status:desc" (t "common.sort.status.desc")) - )) - as |selectable| - }} - {{get selectable @sort.value}} - {{/let}} - - - -{{#let components.Optgroup components.Option as |Optgroup Option|}} - - - - - - - - -{{/let}} - - - + {{/if}} + + <:sort as |search|> + + + + {{#let + (from-entries + (array + (array 'Name:asc' (t 'common.sort.alpha.asc')) + (array 'Name:desc' (t 'common.sort.alpha.desc')) + (array 'Status:asc' (t 'common.sort.status.asc')) + (array 'Status:desc' (t 'common.sort.status.desc')) + ) + ) + as |selectable| + }} + {{get selectable @sort.value}} + {{/let}} + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + + + + + + + {{/let}} + + +     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 c88651b5eb..5c76cf501c 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 @@ -126,33 +126,11 @@ @multiple={{true}} as |components| > - - - {{t 'common.search.source'}} - - - - {{#let components.Option as |Option|}} - {{#if (gt @sources.length 0)}} - - {{#each this.sortedSources as |source|}} - - {{/each}} - {{/if}} - {{/let}} - + {{/if}} @@ -205,4 +183,4 @@ -     \ No newline at end of file +     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 index 700434c900..d4747b1855 100644 --- 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 @@ -11,6 +11,7 @@ export default class ConsulServiceSearchBar extends Component { get sortedSources() { const sources = this.args.sources || []; + sources.unshift(['consul']); if (sources.includes('consul-api-gateway')) { return [...sources.filter((s) => s !== 'consul-api-gateway'), 'consul-api-gateway']; diff --git a/ui/packages/consul-ui/app/components/consul/sources-select/index.hbs b/ui/packages/consul-ui/app/components/consul/sources-select/index.hbs new file mode 100644 index 0000000000..8109ef18e0 --- /dev/null +++ b/ui/packages/consul-ui/app/components/consul/sources-select/index.hbs @@ -0,0 +1,25 @@ +{{#if (gt @sources.length 0)}} + + + {{t 'common.search.source'}} + + + + {{#let @components.Option as |Option|}} + {{#each @sources as |source|}} + {{#let (icon-mapping source) as |flightIcon|}} + + {{/let}} + {{/each}} + {{/let}} + +{{/if}} diff --git a/ui/packages/consul-ui/app/components/custom-element/README.mdx b/ui/packages/consul-ui/app/components/custom-element/README.mdx deleted file mode 100644 index 4aa9d64c80..0000000000 --- a/ui/packages/consul-ui/app/components/custom-element/README.mdx +++ /dev/null @@ -1,87 +0,0 @@ -# CustomElement - -A renderless component to aid with the creation of HTML custom elements a.k.a -WebComponents. - -All of the CustomElement component arguments are only used at construction -time (within the components constructor) therefore they are, by design, static. -You shouldn't be dynamically updating these values at all. They are only for -type checking and documention purposes and therefore once defined/hardcoded -they should only change if you as the author wishes to change them. - -The component is built from various other components, also see their documentaton -for further details (``, ``). - -```hbs preview-template - - - - -``` - -## Arguments - -All `descriptions` in attributes will be compiled out at build time as well as the `@description` attribute itself. - -| Attribute | Type | Default | Description | -| :------------ | :------------- | :------ | :------------------------------------------------------------------------- | -| element | string | | The custom tag to be used for the custom element. Must include a dash | -| description | string | | Short 1 line description for the element. Think "git commit title" style | -| attrs | attrInfo[] | | An array of attributes that can be used on the element | -| slots | slotsInfo[] | | An array of slots that can be used for the element (100% compiled out) | -| cssprops | cssPropsInfo[] | | An array of CSS properties that are relevant to the component | -| cssparts | cssPartsInfo[] | | An array of CSS parts that can be used for the element (100% compiled out) | -| args | argsInfo[] | | An array of Glimmer arguments used for the component (100% compiled out) | - -## Exports - -### custom - -| Attribute | Type | Description | -| :--------- | :------- | :---------------------------------------------------------------------------------- | -| connect | function | A did-insert-able callback for tagging an element to be used for the custom element | -| disconnect | function | A will-destroy-able callback for destroying an element used for the custom element | - -### element - -| Attribute | Type | Description | -| :--------- | :------- | :------------------------------------------------------------------------------- | -| attributes | object | An object containing a reference to all the custom elements' observed properties | -| * | | All other properties proxy through to the CustomElements class | - - diff --git a/ui/packages/consul-ui/app/components/custom-element/index.hbs b/ui/packages/consul-ui/app/components/custom-element/index.hbs deleted file mode 100644 index a040d5eca9..0000000000 --- a/ui/packages/consul-ui/app/components/custom-element/index.hbs +++ /dev/null @@ -1,11 +0,0 @@ - - {{yield - (hash - root=(fn this.setHost (fn shadow.host)) - connect=(fn this.setHost (fn shadow.host)) - Template=shadow.Template - disconnect=(fn this.disconnect) - ) - this.element - }} - diff --git a/ui/packages/consul-ui/app/components/custom-element/index.js b/ui/packages/consul-ui/app/components/custom-element/index.js deleted file mode 100644 index 7e1605a68a..0000000000 --- a/ui/packages/consul-ui/app/components/custom-element/index.js +++ /dev/null @@ -1,189 +0,0 @@ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; -import { assert } from '@ember/debug'; - -const ATTRIBUTE_CHANGE = 'custom-element.attributeChange'; -const elements = new Map(); -const proxies = new WeakMap(); - -const typeCast = (attributeInfo, value) => { - let type = attributeInfo.type; - const d = attributeInfo.default; - value = value == null ? attributeInfo.default : value; - if (type.indexOf('|') !== -1) { - assert( - `"${value} is not of type '${type}'"`, - type - .split('|') - .map((item) => item.replaceAll('"', '').trim()) - .includes(value) - ); - type = 'string'; - } - switch (type) { - case '': - case '': - case '': - case 'number': { - const num = parseFloat(value); - if (isNaN(num)) { - return typeof d === 'undefined' ? 0 : d; - } else { - return num; - } - } - case '': - return parseInt(value); - case '': - case 'string': - return (value || '').toString(); - } -}; - -const attributeChangingElement = (name, Cls = HTMLElement, attributes = {}, cssprops = {}) => { - const attrs = Object.keys(attributes); - - const customClass = class extends Cls { - static get observedAttributes() { - return attrs; - } - - attributeChangedCallback(name, oldValue, newValue) { - const prev = typeCast(attributes[name], oldValue); - const value = typeCast(attributes[name], newValue); - - const cssProp = cssprops[`--${name}`]; - if (typeof cssProp !== 'undefined' && cssProp.track === `[${name}]`) { - this.style.setProperty(`--${name}`, value); - } - - if (typeof super.attributeChangedCallback === 'function') { - super.attributeChangedCallback(name, prev, value); - } - - this.dispatchEvent( - new CustomEvent(ATTRIBUTE_CHANGE, { - detail: { - name: name, - previousValue: prev, - value: value, - }, - }) - ); - } - }; - customElements.define(name, customClass); - return () => {}; -}; - -const infoFromArray = (arr, keys) => { - return (arr || []).reduce((prev, info) => { - let key; - const obj = {}; - keys.forEach((item, i) => { - if (item === '_') { - key = i; - return; - } - obj[item] = info[i]; - }); - prev[info[key]] = obj; - return prev; - }, {}); -}; -const debounceRAF = (cb, prev) => { - if (typeof prev !== 'undefined') { - cancelAnimationFrame(prev); - } - return requestAnimationFrame(cb); -}; -const createElementProxy = ($element, component) => { - return new Proxy($element, { - get: (target, prop, receiver) => { - switch (prop) { - case 'attrs': - return component.attributes; - default: - if (typeof target[prop] === 'function') { - // need to ensure we use a MultiWeakMap here - // if(this.methods.has(prop)) { - // return this.methods.get(prop); - // } - const method = target[prop].bind(target); - // this.methods.set(prop, method); - return method; - } - } - }, - }); -}; - -export default class CustomElementComponent extends Component { - @tracked $element; - @tracked _attributes = {}; - - __attributes; - _attchange; - - constructor(owner, args) { - super(...arguments); - if (!elements.has(args.element)) { - const cb = attributeChangingElement( - args.element, - args.class, - infoFromArray(args.attrs, ['_', 'type', 'default', 'description']), - infoFromArray(args.cssprops, ['_', 'type', 'track', 'description']) - ); - elements.set(args.element, cb); - } - } - - get attributes() { - return this._attributes; - } - - get element() { - if (this.$element) { - if (proxies.has(this.$element)) { - return proxies.get(this.$element); - } - const proxy = createElementProxy(this.$element, this); - proxies.set(this.$element, proxy); - return proxy; - } - return undefined; - } - - @action - setHost(attachShadow, $element) { - attachShadow($element); - this.$element = $element; - this.$element.addEventListener(ATTRIBUTE_CHANGE, this.attributeChange); - - (this.args.attrs || []).forEach((entry) => { - const value = $element.getAttribute(entry[0]); - $element.attributeChangedCallback(entry[0], value, value); - }); - } - - @action - disconnect() { - this.$element.removeEventListener(ATTRIBUTE_CHANGE, this.attributeChange); - } - - @action - attributeChange(e) { - e.stopImmediatePropagation(); - // currently if one single attribute changes - // they all change - this.__attributes = { - ...this.__attributes, - [e.detail.name]: e.detail.value, - }; - this._attchange = debounceRAF(() => { - // tell glimmer we changed the attrs - this._attributes = this.__attributes; - }, this._attchange); - } -} diff --git a/ui/packages/consul-ui/app/components/disclosure-card/README.mdx b/ui/packages/consul-ui/app/components/disclosure-card/README.mdx deleted file mode 100644 index 0984564529..0000000000 --- a/ui/packages/consul-ui/app/components/disclosure-card/README.mdx +++ /dev/null @@ -1,125 +0,0 @@ - -# DisclosureCard - - -```hbs preview-template - -
    - -
    - Use the component -
    - - - -
    -

    api-service-1

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{if disclosure.expanded "View less" "View more"}} - - -     - -
    -``` - -## Attributes - - - - -## Arguments - - - - -## Slots - - - - -## CSS Parts - - - - -## CSS Properties - - - - -## Contextual Components - - - diff --git a/ui/packages/consul-ui/app/components/disclosure-card/index.hbs b/ui/packages/consul-ui/app/components/disclosure-card/index.hbs deleted file mode 100644 index 9ce8bb5ed0..0000000000 --- a/ui/packages/consul-ui/app/components/disclosure-card/index.hbs +++ /dev/null @@ -1,90 +0,0 @@ - - - - - -
    -
    - - -
    -
    - - -
    -     - - {{yield disclosure}} - -     -     -     diff --git a/ui/packages/consul-ui/app/components/distribution-meter/README.mdx b/ui/packages/consul-ui/app/components/distribution-meter/README.mdx deleted file mode 100644 index 2fd1c1016a..0000000000 --- a/ui/packages/consul-ui/app/components/distribution-meter/README.mdx +++ /dev/null @@ -1,83 +0,0 @@ ---- -type: custom-element ---- - -# DistributionMeter - - - -A meter-like component to show a distribution of values. - - -```hbs preview-template -
    -
    - Provide a widget so we can try switching between all types of meter -
    - -
    -
    - - - {{#let - (group-by "MeshStatus" (or source.data (array))) - as |grouped|}} - - {{#each (array 'passing' 'warning' 'critical') as |status|}} - {{#let - (concat (percentage-of (get grouped (concat status '.length')) source.data.length) '%') - as |percentage|}} - - {{/let}} - {{/each}} - - {{/let}} - -
    -``` - -## Attributes - - -| Attribute | Type | Default | Description | -| :-------- | :--------------------------------- | :------ | :------------------------------------ | -| type | "linear" \| "radial" \| "circular" | linear | The type of distribution meter to use | - - - -## Contextual Components - - - -### DistributionMeter::Meter - -#### Attributes - -| Attribute | Type | Default | Description | -| :---------- | :----- | :------ | :----------------------------------------- | -| percentage | number | 0 | The percentage to be used for the meter | -| description | string | | Textual value to describe the meters value | - - -#### CSS Properties - -| Property | Type | Tracks | Description | -| :---------------------- | :--------- | :----------- | :---------------------------------------------------------------- | -| --percentage | percentage | [percentage] | Read-only alias of the percentage attribute | -| --aggregated-percentage | percentage | | Aggregated percentage of all meters within the distribution meter | - - diff --git a/ui/packages/consul-ui/app/components/distribution-meter/index.css.js b/ui/packages/consul-ui/app/components/distribution-meter/index.css.js deleted file mode 100644 index 336511f681..0000000000 --- a/ui/packages/consul-ui/app/components/distribution-meter/index.css.js +++ /dev/null @@ -1,32 +0,0 @@ -export default (css) => { - return css` - :host { - display: block; - width: 100%; - height: 100%; - } - dl { - position: relative; - height: 100%; - } - :host([type='linear']) { - height: 3px; - } - :host([type='radial']), - :host([type='circular']) { - height: 300px; - } - :host([type='linear']) dl { - background-color: currentColor; - color: rgb(var(--tone-gray-100)); - border-radius: var(--decor-radius-999); - transition-property: transform; - transition-timing-function: ease-out; - transition-duration: 0.1s; - } - :host([type='linear']) dl:hover { - transform: scaleY(3); - box-shadow: var(--decor-elevation-200); - } - `; -}; diff --git a/ui/packages/consul-ui/app/components/distribution-meter/index.hbs b/ui/packages/consul-ui/app/components/distribution-meter/index.hbs deleted file mode 100644 index 7e5a71ffc0..0000000000 --- a/ui/packages/consul-ui/app/components/distribution-meter/index.hbs +++ /dev/null @@ -1,30 +0,0 @@ - - - -
    - -
    -     - {{yield (hash - Meter=(component 'distribution-meter/meter' - type=element.attrs.type - ) - )}} -     -     diff --git a/ui/packages/consul-ui/app/components/distribution-meter/meter/element.js b/ui/packages/consul-ui/app/components/distribution-meter/meter/element.js deleted file mode 100644 index 5c058fdf0c..0000000000 --- a/ui/packages/consul-ui/app/components/distribution-meter/meter/element.js +++ /dev/null @@ -1,29 +0,0 @@ -const parseFloatWithDefault = (val, d = 0) => { - const num = parseFloat(val); - return isNaN(num) ? d : num; -}; - -export default (Component) => { - return class extends Component { - attributeChangedCallback(name, prev, value) { - const target = this; - switch (name) { - case 'percentage': { - let prevSibling = target; - while (prevSibling) { - const nextSibling = prevSibling.nextElementSibling; - const aggregatedPercentage = nextSibling - ? parseFloatWithDefault(nextSibling.style.getPropertyValue('--aggregated-percentage')) - : 0; - const perc = - parseFloatWithDefault(prevSibling.getAttribute('percentage')) + aggregatedPercentage; - prevSibling.style.setProperty('--aggregated-percentage', perc); - prevSibling.setAttribute('aggregated-percentage', perc); - prevSibling = prevSibling.previousElementSibling; - } - break; - } - } - } - }; -}; diff --git a/ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js b/ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js deleted file mode 100644 index 7f105a8d9b..0000000000 --- a/ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js +++ /dev/null @@ -1,80 +0,0 @@ -export default (css) => { - return css` - /*@import '~/styles/base/decoration/visually-hidden.css';*/ - - :host(.critical) { - color: rgb(var(--tone-red-500)); - } - :host(.warning) { - color: rgb(var(--tone-orange-500)); - } - :host(.passing) { - color: rgb(var(--tone-green-500)); - } - - :host { - position: absolute; - top: 0; - height: 100%; - - transition-timing-function: ease-out; - transition-duration: 0.5s; - } - dt, - dd meter { - animation-name: visually-hidden; - animation-fill-mode: forwards; - animation-play-state: paused; - } - - :host(.type-linear) { - transition-property: width; - width: calc(var(--aggregated-percentage) * 1%); - height: 100%; - background-color: currentColor; - border-radius: var(--decor-radius-999); - } - - :host svg { - height: 100%; - } - :host(.type-radial), - :host(.type-circular) { - transition-property: none; - } - :host(.type-radial) dd, - :host(.type-circular) dd { - width: 100%; - height: 100%; - } - :host(.type-radial) circle, - :host(.type-circular) circle { - transition-timing-function: ease-out; - transition-duration: 0.5s; - pointer-events: stroke; - transition-property: stroke-dashoffset, stroke-width; - transform: rotate(-90deg); - transform-origin: 50%; - fill: transparent; - stroke: currentColor; - stroke-dasharray: 100, 100; - stroke-dashoffset: calc(calc(100 - var(--aggregated-percentage)) * 1px); - } - :host([aggregated-percentage='100']) circle { - stroke-dasharray: 0 !important; - } - :host([aggregated-percentage='0']) circle { - stroke-dasharray: 0, 100 !important; - } - :host(.type-radial) circle, - :host(.type-circular]) svg { - pointer-events: none; - } - :host(.type-radial) circle { - stroke-width: 32; - } - :host(.type-circular) circle { - stroke-width: 14; - } - `; -}; diff --git a/ui/packages/consul-ui/app/components/distribution-meter/meter/index.hbs b/ui/packages/consul-ui/app/components/distribution-meter/meter/index.hbs deleted file mode 100644 index a557e1701c..0000000000 --- a/ui/packages/consul-ui/app/components/distribution-meter/meter/index.hbs +++ /dev/null @@ -1,64 +0,0 @@ - - - - -
    {{element.attrs.description}}
    -
    - - {{concat element.attrs.percentage '%'}} - - {{#if (or (eq @type 'circular') (eq @type 'radial'))}} - - {{/if}} -
    -     -     - -     - diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs index 672985310d..6942abded6 100644 --- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs +++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs @@ -1,88 +1,83 @@ - + <:notifications as |app|> -{{#each flashMessages.queue as |flash|}} - - {{#if flash.dom}} - {{{flash.dom}}} - {{else}} -{{#let (lowercase flash.type) (lowercase flash.action) as |status type|}} - - - - {{capitalize status}}! - - - -

    - {{#if (eq type 'logout')}} - {{#if (eq status 'success') }} - You are now logged out. - {{else}} - There was an error logging out. - {{/if}} - {{else if (eq type 'authorize')}} - {{#if (eq status 'success') }} - You are now logged in. - {{else}} - There was an error, please check your SecretID/Token - {{/if}} + {{#each flashMessages.queue as |flash|}} + + {{#if flash.dom}} + {{{flash.dom}}} {{else}} - {{#if (or (eq type 'use') (eq flash.model 'token'))}} - - {{else if (eq flash.model 'intention')}} - - {{else if (eq flash.model 'role')}} - - {{else if (eq flash.model 'policy')}} - - {{/if}} + {{#let (lowercase flash.type) (lowercase flash.action) as |status type|}} + + + + {{capitalize status}}! + + + +

    + {{#if (eq type 'logout')}} + {{#if (eq status 'success')}} + You are now logged out. + {{else}} + There was an error logging out. + {{/if}} + {{else if (eq type 'authorize')}} + {{#if (eq status 'success')}} + You are now logged in. + {{else}} + There was an error, please check your SecretID/Token + {{/if}} + {{else}} + {{#if (or (eq type 'use') (eq flash.model 'token'))}} + + {{else if (eq flash.model 'intention')}} + + {{else if (eq flash.model 'role')}} + + {{else if (eq flash.model 'policy')}} + + {{/if}} + {{/if}} +

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

    - - -{{/let}} - {{/if}} -     -{{/each}} + + {{/each}} <:home-nav> - + + + <:main-nav> @@ -99,147 +94,110 @@ @partition={{@partition}} @nspace={{@nspace}} @partitions={{this.partitions}} - @onchange={{action (mut this.partitions) value="data"}} + @onchange={{action (mut this.partitions) value='data'}} /> -{{#if (can 'access overview')}} + {{#if (can 'access overview')}}
  • - + Overview
    • -{{/if}} -{{#if (can "read services")}} + {{/if}} + {{#if (can 'read services')}}
  • - Services + Services
    • -{{/if}} -{{#if (can "read nodes")}} + {{/if}} + {{#if (can 'read nodes')}}
  • - Nodes + Nodes
    • -{{/if}} -{{#if (can "read kv")}} + {{/if}} + {{#if (can 'read kv')}}
  • - Key/Value + Key/Value
    • -{{/if}} -{{#if (can "read intentions")}} -
  • - Intentions + {{/if}} + {{#if (can 'read intentions')}} +
  • + Intentions
    • -{{/if}} - - + {{/if}} + + <:complementary-nav>
      - -
    • - - - Help - - - - - Consul v{{env 'CONSUL_VERSION'}} - - +
    • + + + Help + + + + + Consul v{{env 'CONSUL_VERSION'}} + + + + Documentation + + + + - - Documentation - - - - - HashiCorp Learn - - - - - - - -
      • -
    • - - Settings - -
      • - - - + HashiCorp Learn + + + + + + + + +
    • + + Settings + +
      • + + +
    <:main> - {{yield (hash - login=(if this.tokenSelector this.tokenSelector (hash open=undefined close=undefined)) - )}} + {{yield + (hash login=(if this.tokenSelector this.tokenSelector (hash open=undefined close=undefined))) + }} <:content-info> @@ -249,4 +207,4 @@ {{{concat ''}}} -     \ No newline at end of file +     diff --git a/ui/packages/consul-ui/app/components/informed-action/skin.scss b/ui/packages/consul-ui/app/components/informed-action/skin.scss index 72b3624449..25b7fba8d8 100644 --- a/ui/packages/consul-ui/app/components/informed-action/skin.scss +++ b/ui/packages/consul-ui/app/components/informed-action/skin.scss @@ -66,12 +66,6 @@ background-color: rgb(var(--tone-yellow-050)); } } - /* brands */ - &.kubernetes { - header::before { - @extend %with-logo-kubernetes-color-icon, %without-mask, %as-pseudo; - } - } /**/ > ul > .action > * { color: rgb(var(--tone-blue-500)); diff --git a/ui/packages/consul-ui/app/components/pill/index.scss b/ui/packages/consul-ui/app/components/pill/index.scss index c528bd9ff3..242924aa59 100644 --- a/ui/packages/consul-ui/app/components/pill/index.scss +++ b/ui/packages/consul-ui/app/components/pill/index.scss @@ -30,10 +30,3 @@ span.policy-service-identity::before { %pill.oidc::before { @extend %with-logo-oidc-color-icon, %as-pseudo; } -%pill.kubernetes::before { - @extend %with-logo-kubernetes-color-icon, %as-pseudo; -} -%pill.aws-iam::before { - --icon-name: icon-aws-color; - content: ''; -} diff --git a/ui/packages/consul-ui/app/components/popover-select/index.scss b/ui/packages/consul-ui/app/components/popover-select/index.scss index dad07b2cdd..ac45555434 100644 --- a/ui/packages/consul-ui/app/components/popover-select/index.scss +++ b/ui/packages/consul-ui/app/components/popover-select/index.scss @@ -56,30 +56,10 @@ @extend %with-user-team-mask, %as-pseudo; color: rgb(var(--tone-gray-500)); } -%popover-select .lambda button::before, -%popover-select .aws button::before { - @extend %with-aws-300; -} -%popover-select .kubernetes button::before { - @extend %with-logo-kubernetes-color-icon, %as-pseudo; -} %popover-select .jwt button::before { @extend %with-logo-jwt-color-icon, %as-pseudo; } %popover-select .oidc button::before { @extend %with-logo-oidc-color-icon, %as-pseudo; } -%popover-select .consul button::before, -%popover-select .consul-api-gateway button::before { - @extend %with-logo-consul-color-icon, %as-pseudo; -} -%popover-select .nomad button::before { - @extend %with-logo-nomad-color-icon, %as-pseudo; -} -%popover-select .vault button::before { - @extend %with-vault-300; -} -%popover-select .terraform button::before { - @extend %with-logo-terraform-color-icon, %as-pseudo; -} /**/ diff --git a/ui/packages/consul-ui/app/components/shadow-host/README.mdx b/ui/packages/consul-ui/app/components/shadow-host/README.mdx deleted file mode 100644 index c83c58eb94..0000000000 --- a/ui/packages/consul-ui/app/components/shadow-host/README.mdx +++ /dev/null @@ -1,29 +0,0 @@ -# ShadowHost - -`ShadowHost` is a small renderless mainly utility component for easily attaching -ShadowDOM to any applicable DOM node. It mainly exists to provide a context for -passing around a reference to the element to be used for the shadow template, -but named appropriately for recognition. - -If you are looking to write a custom element, please use the `CustomElement` -component. If you are simply attaching ShadowDOM to a native HTML element then -this is the component for you. - -```hbs preview-template - -
    - -

    hi

    -     -
    -     -``` - -## Exports - -| Attribute | Type | Description | -| :-------- | :---------------------- | :------------------------------------------------------------------------------- | -| host | function | A did-insert-able callback for tagging an element to be used for the shadow root | -| Template | ShadowTemplateComponent | ShadowTemplate component pre-configured with the shadow host | diff --git a/ui/packages/consul-ui/app/components/shadow-host/index.hbs b/ui/packages/consul-ui/app/components/shadow-host/index.hbs deleted file mode 100644 index 3c70ea8f0b..0000000000 --- a/ui/packages/consul-ui/app/components/shadow-host/index.hbs +++ /dev/null @@ -1,5 +0,0 @@ -{{yield (hash - host=(fn this.attachShadow) - root=this.shadowRoot - Template=(component 'shadow-template' shadowRoot=this.shadowRoot) -)}} diff --git a/ui/packages/consul-ui/app/components/shadow-host/index.js b/ui/packages/consul-ui/app/components/shadow-host/index.js deleted file mode 100644 index d13e34c199..0000000000 --- a/ui/packages/consul-ui/app/components/shadow-host/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; - -export default class ShadowHostComponent extends Component { - @tracked shadowRoot; - - @action - attachShadow($element) { - this.shadowRoot = $element.attachShadow({ mode: 'open' }); - } -} diff --git a/ui/packages/consul-ui/app/components/shadow-template/README.mdx b/ui/packages/consul-ui/app/components/shadow-template/README.mdx deleted file mode 100644 index 64d352a7d2..0000000000 --- a/ui/packages/consul-ui/app/components/shadow-template/README.mdx +++ /dev/null @@ -1,162 +0,0 @@ -# ShadowTemplate - -A component to aid creating ShadowDOM based components (when required), heavily -inspired by the upcoming Declarative Shadow DOM spec, a new way to implement and -use Shadow DOM directly in HTML. - -Instead of passing `shadowroot="open|closed"` as you would with Declarative -Shadow DOM we have a `@shadowRoot` argument to which you would pass the actual -Shadow DOM element (which itself either open or closed). You can get a reference -to this by using the `{{attach-shadow}}` modifier. - -Additionally a `@styles` argument is made available for you to optionally -pass completely isolated, scoped, constructable stylesheets to be used for the -Shadow DOM tree (you can also continue to use `