luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

Merge pull request #15153 from hashicorp/ui/chore/update-icons-to-use-flight-icons-component 

ui: update icons to use flight icons component
This commit is contained in:
Tyler Wendlandt 2022-10-27 15:21:56 -06:00 committed by GitHub
parent 3389d3883b 9251801c68
commit 571fd7b6db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
85 changed files with 760 additions and 2653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
ui/packages/consul-ui/app/components/consul/auth-method/search-bar/index.hbs
View File

@ -1,62 +1,61 @@
<SearchBar
class="consul-auth-method-search-bar"
...attributes
@filter={{@filter}}
>
<SearchBar class='consul-auth-method-search-bar' ...attributes @filter={{@filter}}>
<:status as |search|>
{{#let
(t (concat "components.consul.auth-method.search-bar." search.status.key ".name")
{{#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)
(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)
(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)
(concat 'common.search.' search.status.value)
(concat 'common.consul.' search.status.value)
(concat 'common.brand.' search.status.value)
)
)
as |key value|}}
<search.RemoveFilter
aria-label={{t "common.ui.remove" item=(concat key " " value)}}
>
as |key value|
}}
<search.RemoveFilter aria-label={{t 'common.ui.remove' item=(concat key ' ' value)}}>
<dl>
<dt>{{key}}</dt>
<dd>{{value}}</dd>
</dl>
</search.RemoveFilter>
{{/let}}
{{/let}}
</:status>
<:search as |search|>
<search.Search
@onsearch={{action @onsearch}}
@value={{@search}}
@placeholder={{t "common.search.search"}}
@placeholder={{t 'common.search.search'}}
>
<search.Select
class="type-search-properties"
@position="right"
class='type-search-properties'
@position='right'
@onchange={{action @filter.searchproperty.change}}
@multiple={{true}}
@required={{true}}
as |components|>
<BlockSlot @name="selected">
as |components|
>
<BlockSlot @name='selected'>
<span>
{{t "common.search.searchproperty"}}
{{t 'common.search.searchproperty'}}
</span>
</BlockSlot>
<BlockSlot @name="options">
<BlockSlot @name='options'>
{{#let components.Optgroup components.Option as |Optgroup Option|}}
{{#each @filter.searchproperty.default as |prop|}}
<Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
{{t (concat "common.consul." (lowercase prop))}}
{{t (concat 'common.consul.' (lowercase prop))}}
</Option>
{{/each}}
{{/let}}
@ -66,42 +65,59 @@ as |key value|}}
</:search>
<:filter as |search|>
<search.Select
class="type-kind"
@position="left"
class='type-kind'
@position='left'
@onchange={{action @filter.kind.change}}
@multiple={{true}}
as |components|>
<BlockSlot @name="selected">
as |components|
>
<BlockSlot @name='selected'>
<span>
{{t "components.consul.auth-method.search-bar.kind.name"}}
{{t 'components.consul.auth-method.search-bar.kind.name'}}
</span>
</BlockSlot>
<BlockSlot @name="options">
<BlockSlot @name='options'>
{{#let components.Optgroup components.Option as |Optgroup Option|}}
<Option class="kubernetes" @value="kubernetes" @selected={{includes 'kubernetes' @filter.kind.value}}>Kubernetes</Option>
<Option class="jwt" @value="jwt" @selected={{includes 'jwt' @filter.kind.value}}>JWT</Option>
<Option @value='kubernetes' @selected={{includes 'kubernetes' @filter.kind.value}}>
<FlightIcon @name='kubernetes-color' class='mr-2.5' />
Kubernetes
</Option>
<Option
class='jwt'
@value='jwt'
@selected={{includes 'jwt' @filter.kind.value}}
>JWT</Option>
{{#if (env 'CONSUL_SSO_ENABLED')}}
<Option class="oidc" @value="oidc" @selected={{includes 'oidc' @filter.kind.value}}>OIDC</Option>
<Option
class='oidc'
@value='oidc'
@selected={{includes 'oidc' @filter.kind.value}}
>OIDC</Option>
{{/if}}
{{/let}}
</BlockSlot>
</search.Select>
<search.Select
class="type-locality"
@position="left"
class='type-locality'
@position='left'
@onchange={{action @filter.source.change}}
@multiple={{true}}
as |components|>
<BlockSlot @name="selected">
as |components|
>
<BlockSlot @name='selected'>
<span>
{{t "components.consul.auth-method.search-bar.locality.name"}}
{{t 'components.consul.auth-method.search-bar.locality.name'}}
</span>
</BlockSlot>
<BlockSlot @name="options">
<BlockSlot @name='options'>
{{#let components.Optgroup components.Option as |Optgroup Option|}}
{{#each (array "local" "global") as |option|}}
<Option class="{{option}}" @value={{option}} @selected={{includes option @filter.types}}>
{{t (concat "components.consul.auth-method.search-bar.locality.options." option)}}
{{#each (array 'local' 'global') as |option|}}
<Option
class='{{option}}'
@value={{option}}
@selected={{includes option @filter.types}}
>
{{t (concat 'components.consul.auth-method.search-bar.locality.options.' option)}}
</Option>
{{/each}}
{{/let}}
@ -110,36 +126,48 @@ as |key value|}}
</:filter>
<:sort as |search|>
<search.Select
class="type-sort"
class='type-sort'
data-test-sort-control
@position="right"
@position='right'
@onchange={{action @sort.change}}
@multiple={{false}}
@required={{true}}
as |components|>
<BlockSlot @name="selected">
as |components|
>
<BlockSlot @name='selected'>
<span>
{{#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"))
))
{{#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}}
</span>
</BlockSlot>
<BlockSlot @name="options">
<BlockSlot @name='options'>
{{#let components.Optgroup components.Option as |Optgroup Option|}}
<Optgroup @label={{t "common.ui.name"}}>
<Option @value="MethodName:asc" @selected={{eq "MethodName:asc" @sort.value}}>{{t "common.sort.alpha.asc"}}</Option>
<Option @value="MethodName:desc" @selected={{eq "MethodName:desc" @sort.value}}>{{t "common.sort.alpha.desc"}}</Option>
<Optgroup @label={{t 'common.ui.name'}}>
<Option @value='MethodName:asc' @selected={{eq 'MethodName:asc' @sort.value}}>{{t
'common.sort.alpha.asc'
}}</Option>
<Option @value='MethodName:desc' @selected={{eq 'MethodName:desc' @sort.value}}>{{t
'common.sort.alpha.desc'
}}</Option>
</Optgroup>
<Optgroup @label={{t "common.ui.maxttl"}}>
<Option @value="TokenTTL:desc" @selected={{eq "TokenTTL:desc" @sort.value}}>{{t "common.sort.duration.asc"}}</Option>
<Option @value="TokenTTL:asc" @selected={{eq "TokenTTL:asc" @sort.value}}>{{t "common.sort.duration.desc"}}</Option>
<Optgroup @label={{t 'common.ui.maxttl'}}>
<Option @value='TokenTTL:desc' @selected={{eq 'TokenTTL:desc' @sort.value}}>{{t
'common.sort.duration.asc'
}}</Option>
<Option @value='TokenTTL:asc' @selected={{eq 'TokenTTL:asc' @sort.value}}>{{t
'common.sort.duration.desc'
}}</Option>
</Optgroup>
{{/let}}
</BlockSlot>

9
ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs
View File

@ -1,3 +1,8 @@
<span class="consul-auth-method-type {{@item.Type}}" data-test-type={{@item.Type}}>
{{#let (icon-mapping @item.Type) as |flightIcon|}}
<span class="consul-auth-method-type {{unless flightIcon @item.Type}}" data-test-type={{@item.Type}}>
{{#if flightIcon}}
<FlightIcon @name={{flightIcon}} class="mr-1.5 w-4 h-4" />
{{/if}}
{{t (concat "common.brand." @item.Type)}}
</span>
</span>
{{/let}}

6
ui/packages/consul-ui/app/components/consul/external-source/index.hbs
View File

@ -5,9 +5,10 @@
<dt>
<span
data-test-external-source={{externalSource}}
class="consul-external-source {{externalSource}}"
class="consul-external-source"
...attributes
>
<FlightIcon @name={{icon-mapping externalSource}} class="mr-1.5 w-4 h-4" />
Registered via {{t (concat "common.brand." externalSource)}}
</span>
</dt>
@ -32,9 +33,10 @@
{{else if externalSource}}
<span
data-test-external-source={{externalSource}}
class="consul-external-source {{externalSource}}"
class="consul-external-source"
...attributes
>
<FlightIcon @name={{icon-mapping externalSource}} @color="rgb(var(--black))" class="mr-1.5 h-4 w-4" />
{{#if @label}}
{{@label}}
{{else}}

23
ui/packages/consul-ui/app/components/consul/external-source/index.scss
View File

@ -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;
}

140
ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs
View File

@ -1,49 +1,54 @@
<TabularCollection
class="consul-intention-list-table"
class='consul-intention-list-table'
...attributes
@items={{@items}}
@rowHeight={{59}}
as |item index|>
<BlockSlot @name="header">
<th class="source">Source</th>
<th class="intent">&nbsp;</th>
<th class="destination">Destination</th>
<th class="permissions">
as |item index|
>
<BlockSlot @name='header'>
<th class='source'>Source</th>
<th class='intent'>&nbsp;</th>
<th class='destination'>Destination</th>
<th class='permissions'>
Permissions
<span>
<Tooltip>Permissions intercept an Intention's traffic using Layer 7 criteria, such as path prefixes and http headers.</Tooltip>
<Tooltip>Permissions intercept an Intention's traffic using Layer 7 criteria, such as path
prefixes and http headers.</Tooltip>
</span>
</th>
<th class="meta">&nbsp;</th>
<th class='meta'>&nbsp;</th>
</BlockSlot>
<BlockSlot @name="row">
<td class="source" data-test-intention={{item.ID}}>
<a href={{href-to (or @routeName 'dc.intentions.edit') item.ID}} data-test-intention-source={{item.SourceName}}>
{{#if (eq item.SourceName '*') }}
<BlockSlot @name='row'>
<td class='source' data-test-intention={{item.ID}}>
<a
href={{href-to (or @routeName 'dc.intentions.edit') item.ID}}
data-test-intention-source={{item.SourceName}}
>
{{#if (eq item.SourceName '*')}}
All Services (*)
{{else}}
{{item.SourceName}}
{{/if}}
{{! TODO: slugify }}
<em class="consul-intention-list-table__meta-info">
<em class='consul-intention-list-table__meta-info'>
<Consul::Bucket::List
@item={{hash
Namespace=item.SourceNS
Partition=item.SourcePartition
PeerName=item.SourcePeer
}}
@nspace="-"
@partition="-"
@nspace='-'
@partition='-'
/>
</em>
</a>
</td>
<td class="intent intent-{{slugify item.Action}}" data-test-intention-action={{item.Action}}>
<strong>{{capitalize (or item.Action "App aware")}}</strong>
<td class='intent intent-{{slugify item.Action}}' data-test-intention-action={{item.Action}}>
<strong>{{capitalize (or item.Action 'App aware')}}</strong>
</td>
<td class="destination" data-test-intention-destination={{item.DestinationName}}>
<td class='destination' data-test-intention-destination={{item.DestinationName}}>
<span>
{{#if (eq item.DestinationName '*') }}
{{#if (eq item.DestinationName '*')}}
All Services (*)
{{else}}
{{item.DestinationName}}
@ -51,45 +56,58 @@ as |item index|>
{{#if (or (can 'use nspaces') (can 'use partitions'))}}
{{! TODO: slugify }}
<em>
<span
class={{concat 'partition-' (or item.DestinationPartition 'default')}}
>{{or item.DestinationPartition 'default'}}</span> / <span
class={{concat 'nspace-' (or item.DestinationNS 'default')}}
>{{or item.DestinationNS 'default'}}</span>
<span class={{concat 'partition-' (or item.DestinationPartition 'default')}}>{{or
item.DestinationPartition
'default'
}}</span>
/
<span class={{concat 'nspace-' (or item.DestinationNS 'default')}}>{{or
item.DestinationNS
'default'
}}</span>
</em>
{{/if}}
</span>
</td>
<td class="permissions">
<td class='permissions'>
{{#if (gt item.Permissions.length 0)}}
<span>{{pluralize item.Permissions.length 'Permission'}}</span>
{{/if}}
</td>
<td class="meta">
<td class='meta'>
{{#if item.IsManagedByCRD}}
<Consul::ExternalSource @item={{item}} @label="Managed by CRD" />
<Consul::ExternalSource @item={{item}} @label='Managed by CRD' />
{{/if}}
</td>
</BlockSlot>
<BlockSlot @name="actions" as |index change checked|>
<BlockSlot @name='actions' as |index change checked|>
<PopoverMenu
@expanded={{if (eq checked index) true false}}
@onchange={{action change index}} @keyboardAccess={{false}}
@onchange={{action change index}}
@keyboardAccess={{false}}
>
<BlockSlot @name="trigger">
<BlockSlot @name='trigger'>
More
</BlockSlot>
<BlockSlot @name="menu" as |confirm send keypressClick change|>
{{#if (can "write intention" item=item)}}
<li role="none">
<a role="menuitem" tabindex="-1" href={{href-to (or routeName 'dc.intentions.edit') item.ID}}>Edit</a>
<BlockSlot @name='menu' as |confirm send keypressClick change|>
{{#if (can 'write intention' item=item)}}
<li role='none'>
<a
role='menuitem'
tabindex='-1'
href={{href-to (or routeName 'dc.intentions.edit') item.ID}}
>Edit</a>
</li>
<li role="none" class="dangerous">
<label for={{confirm}} role="menuitem" tabindex="-1" onkeypress={{keypressClick}} data-test-delete>Delete</label>
<div role="menu">
<InformedAction
class="warning"
>
<li role='none' class='dangerous'>
<label
for={{confirm}}
role='menuitem'
tabindex='-1'
onkeypress={{keypressClick}}
data-test-delete
>Delete</label>
<div role='menu'>
<InformedAction class='warning'>
<:header>
Confirm Delete
</:header>
@ -99,19 +117,17 @@ as |item index|>
</p>
</:body>
<:actions as |Actions|>
<Actions.Action class="dangerous">
<Actions.Action class='dangerous'>
<Action
class="type-delete"
tabindex="-1"
class='type-delete'
tabindex='-1'
{{on 'click' (queue (action change) (action @delete item))}}
>
Delete
</Action>
</Actions.Action>
<Actions.Action>
<Action
@for={{confirm}}
>
<Action @for={{confirm}}>
Cancel
</Action>
</Actions.Action>
@ -119,34 +135,34 @@ as |item index|>
</InformedAction>
</div>
</li>
{{else if (can "view CRD intention" item=item)}}
<li role="none">
<div role="menu">
<InformedAction
class="info kubernetes"
>
{{else if (can 'view CRD intention' item=item)}}
<li role='none'>
<div role='menu'>
<InformedAction>
<:header>
<span class='flex flex-nowrap items-center'>
<FlightIcon @name='kubernetes-color' class='mr-1.5' />
Managed by CRD
</span>
</:header>
<:body>
<p>
This intention is being managed through an Intention Custom Resource in your Kubernetes cluster. It is view only in the UI.
This intention is being managed through an Intention Custom Resource in your
Kubernetes cluster. It is view only in the UI.
</p>
</:body>
<:actions as |Actions|>
<Actions.Action>
<Action
tabindex="-1"
class="action"
tabindex='-1'
class='action'
@href={{href-to (or @routeName 'dc.intentions.edit') item.ID}}
>
View
</Action>
</Actions.Action>
<Actions.Action>
<Action
@onclick={{action change}}
>
<Action @onclick={{action change}}>
Cancel
</Action>
</Actions.Action>
@ -155,10 +171,10 @@ as |item index|>
</div>
</li>
{{else}}
<li role="none">
<li role='none'>
<a
role="menuitem"
tabindex="-1"
role='menuitem'
tabindex='-1'
href={{href-to (or routeName 'dc.intentions.edit') item.ID}}
>
View

4
ui/packages/consul-ui/app/components/consul/logo/index.hbs
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 KiB

164
ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.hbs
View File

@ -1,63 +1,62 @@
<SearchBar
class="consul-service-instance-search-bar"
...attributes
@filter={{@filter}}
>
<SearchBar class='consul-service-instance-search-bar' ...attributes @filter={{@filter}}>
<:status as |search|>
{{#let
(t (concat "components.consul.service-instance.search-bar." search.status.key ".name")
{{#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)
(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)
(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)
(concat 'common.search.' search.status.value)
(concat 'common.consul.' search.status.value)
(concat 'common.brand.' search.status.value)
)
)
as |key value|}}
<search.RemoveFilter
aria-label={{t "common.ui.remove" item=(concat key " " value)}}
>
as |key value|
}}
<search.RemoveFilter aria-label={{t 'common.ui.remove' item=(concat key ' ' value)}}>
<dl>
<dt>{{key}}</dt>
<dd>{{value}}</dd>
</dl>
</search.RemoveFilter>
{{/let}}
{{/let}}
</:status>
<:search as |search|>
<search.Search
@onsearch={{action @onsearch}}
@value={{@search}}
@placeholder={{t "common.search.search"}}
@placeholder={{t 'common.search.search'}}
>
{{#if @filter.searchproperty}}
{{#if @filter.searchproperty}}
<search.Select
class="type-search-properties"
@position="right"
class='type-search-properties'
@position='right'
@onchange={{action @filter.searchproperty.change}}
@multiple={{true}}
@required={{true}}
as |components|>
<BlockSlot @name="selected">
as |components|
>
<BlockSlot @name='selected'>
<span>
{{t "common.search.searchproperty"}}
{{t 'common.search.searchproperty'}}
</span>
</BlockSlot>
<BlockSlot @name="options">
{{#let components.Optgroup components.Option as |Optgroup Option|}}
<BlockSlot @name='options'>
{{#let components.Option as |Option|}}
{{#each @filter.searchproperty.default as |prop|}}
<Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
{{t (concat "common.consul." (lowercase prop))}}
{{t (concat 'common.consul.' (lowercase prop))}}
</Option>
{{/each}}
{{/let}}
@ -68,25 +67,26 @@ as |key value|}}
</:search>
<:filter as |search|>
<search.Select
class="type-status"
@position="left"
class='type-status'
@position='left'
@onchange={{action @filter.status.change}}
@multiple={{true}}
as |components|>
<BlockSlot @name="selected">
as |components|
>
<BlockSlot @name='selected'>
<span>
{{t "common.consul.status"}}
{{t 'common.consul.status'}}
</span>
</BlockSlot>
<BlockSlot @name="options">
<BlockSlot @name='options'>
{{#let components.Optgroup components.Option as |Optgroup Option|}}
{{#each (array "passing" "warning" "critical" "empty") as |state|}}
<Option class="value-{{state}}" @value={{state}} @selected={{includes state @filter.status.value}}>
{{t (concat "common.consul." state)
default=(array
(concat "common.search." state)
)
}}
{{#each (array 'passing' 'warning' 'critical' 'empty') as |state|}}
<Option
class='value-{{state}}'
@value={{state}}
@selected={{includes state @filter.status.value}}
>
{{t (concat 'common.consul.' state) default=(array (concat 'common.search.' state))}}
</Option>
{{/each}}
{{/let}}
@ -94,62 +94,66 @@ as |key value|}}
</search.Select>
{{#if (gt @sources.length 0)}}
<search.Select
class="type-source"
@position="left"
class='type-source'
@position='left'
@onchange={{action @filter.source.change}}
@multiple={{true}}
as |components|>
<BlockSlot @name="selected">
<span>
{{t "common.search.source"}}
</span>
</BlockSlot>
<BlockSlot @name="options">
{{#let components.Optgroup components.Option as |Optgroup Option|}}
{{#each @sources as |source|}}
<Option class={{source}} @value={{source}} @selected={{includes source @filter.source.value}}>
{{t (concat "common.brand." source)}}
</Option>
{{/each}}
{{/let}}
</BlockSlot>
as |components|
>
<Consul::SourcesSelect
@components={{components}}
@filter={{@filter}}
@sources={{@sources}}
/>
</search.Select>
{{/if}}
</:filter>
<:sort as |search|>
<search.Select
class="type-sort"
class='type-sort'
data-test-sort-control
@position="right"
@position='right'
@onchange={{action @sort.change}}
@multiple={{false}}
@required={{true}}
as |components|>
<BlockSlot @name="selected">
as |components|
>
<BlockSlot @name='selected'>
<span>
{{#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"))
))
{{#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}}
</span>
</BlockSlot>
<BlockSlot @name="options">
{{#let components.Optgroup components.Option as |Optgroup Option|}}
<Optgroup @label={{t "common.consul.status"}}>
<Option @value="Status:asc" @selected={{eq "Status:asc" @sort.value}}>{{t "common.sort.status.asc"}}</Option>
<Option @value="Status:desc" @selected={{eq "Status:desc" @sort.value}}>{{t "common.sort.status.desc"}}</Option>
<BlockSlot @name='options'>
{{#let components.Optgroup components.Option as |Optgroup Option|}}
<Optgroup @label={{t 'common.consul.status'}}>
<Option @value='Status:asc' @selected={{eq 'Status:asc' @sort.value}}>{{t
'common.sort.status.asc'
}}</Option>
<Option @value='Status:desc' @selected={{eq 'Status:desc' @sort.value}}>{{t
'common.sort.status.desc'
}}</Option>
</Optgroup>
<Optgroup @label={{t "components.consul.service-instance.search-bar.sort.name.name"}}>
<Option @value="Name:asc" @selected={{eq "Name:asc" @sort.value}}>{{t "common.sort.alpha.asc"}}</Option>
<Option @value="Name:desc" @selected={{eq "Name:desc" @sort.value}}>{{t "common.sort.alpha.desc"}}</Option>
<Optgroup @label={{t 'components.consul.service-instance.search-bar.sort.name.name'}}>
<Option @value='Name:asc' @selected={{eq 'Name:asc' @sort.value}}>{{t
'common.sort.alpha.asc'
}}</Option>
<Option @value='Name:desc' @selected={{eq 'Name:desc' @sort.value}}>{{t
'common.sort.alpha.desc'
}}</Option>
</Optgroup>
{{/let}}
{{/let}}
</BlockSlot>
</search.Select>
</:sort>

32
ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs
View File

@ -126,33 +126,11 @@
@multiple={{true}}
as |components|
>
<BlockSlot @name='selected'>
<span>
{{t 'common.search.source'}}
</span>
</BlockSlot>
<BlockSlot @name='options'>
{{#let components.Option as |Option|}}
{{#if (gt @sources.length 0)}}
<Option
class='consul'
@value='consul'
@selected={{includes 'consul' @filter.source.value}}
>
{{t 'common.brand.consul'}}
</Option>
{{#each this.sortedSources as |source|}}
<Option
class={{source}}
@value={{source}}
@selected={{includes source @filter.source.value}}
>
{{t (concat 'common.brand.' source)}}
</Option>
{{/each}}
{{/if}}
{{/let}}
</BlockSlot>
<Consul::SourcesSelect
@components={{components}}
@filter={{@filter}}
@sources={{this.sortedSources}}
/>
</search.Select>
{{/if}}
</:filter>

1
ui/packages/consul-ui/app/components/consul/service/search-bar/index.js
View File

@ -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'];

25
ui/packages/consul-ui/app/components/consul/sources-select/index.hbs Normal file
View File

@ -0,0 +1,25 @@
{{#if (gt @sources.length 0)}}
<BlockSlot @name='selected'>
<span>
{{t 'common.search.source'}}
</span>
</BlockSlot>
<BlockSlot @name='options'>
{{#let @components.Option as |Option|}}
{{#each @sources as |source|}}
{{#let (icon-mapping source) as |flightIcon|}}
<Option
class={{unless flightIcon source}}
@value={{source}}
@selected={{includes source @filter.source.value}}
>
{{#if flightIcon}}
<FlightIcon @name={{flightIcon}} class='mr-2.5' />
{{/if}}
{{t (concat 'common.brand.' source)}}
</Option>
{{/let}}
{{/each}}
{{/let}}
</BlockSlot>
{{/if}}

87
ui/packages/consul-ui/app/components/custom-element/README.mdx
View File

@ -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 (`<ShadowHost />`, `<ShadowTemplate />`).
```hbs preview-template
<CustomElement
@element="x-component"
@attrs={{array
(array 'type' '"awesome" | "sauce"' 'awesome' 'Set the type of the x-component')
(array 'x' 'number' 0 'The x-ness of the x-component')
}}
@cssprops={{array
(array '--awesome-x-sauce' 'length' '[x]' 'Makes the x-ness of the sauce available to CSS, automatically synced/tracked from the x attributes')
(array '--awesome-color' 'color' undefined 'This CSS property can be used to set the color of the awesome')
}}
@cssparts={{array
(array 'base' 'Style base from The Outside via ::part(base)')
}}
@slots={{array
(array 'header' "You'll want to document the slots also")
(array '' 'Including the default slot')
}}
as |custom element|>
<x-component
{{did-insert custom.connect}}
{{will-destroy custom.disconnect}}
aria-hidden="true"
...attributes
>
<custom.Template
@styles={{css-map
}}
>
<div part="base"
data-x={{element.attrs.x}}
data-type={{element.attrs.type}}
>
<slot name="header"></slot>
<slot></slot>
</div>
</custom.Template>
</x-component>
</CustomElement>
```
## 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 |

11
ui/packages/consul-ui/app/components/custom-element/index.hbs
View File

@ -1,11 +0,0 @@
<ShadowHost as |shadow|>
{{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
}}
</ShadowHost>

189
ui/packages/consul-ui/app/components/custom-element/index.js
View File

@ -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 '<length>':
case '<percentage>':
case '<dimension>':
case 'number': {
const num = parseFloat(value);
if (isNaN(num)) {
return typeof d === 'undefined' ? 0 : d;
} else {
return num;
}
}
case '<integer>':
return parseInt(value);
case '<string>':
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);
}
}

125
ui/packages/consul-ui/app/components/disclosure-card/README.mdx
View File

@ -1,125 +0,0 @@
<!-- START component-docs:@tagName -->
# DisclosureCard
<!-- END component-docs:@tagName -->
```hbs preview-template
<figure>
<figcaption>
Use the component
</figcaption>
<DisclosureCard as |disclosure|>
<header>
<h4>api-service-1</h4>
</header>
<Consul::Bucket::List
@item={{hash
Namespace="different-nspace"
Partition="different-partition"
}}
@nspace={{'nspace'}}
@partition={{'partition'}}
/>
<DistributionMeter
type="linear"
as |meter|>
<meter.Meter class="warning" percentage="50" />
<meter.Meter class="critical" percentage="30" />
</DistributionMeter>
<disclosure.Details
as |details|>
<Consul::Bucket::List
@item={{hash
Namespace="different-nspace"
Partition="different-partition"
}}
@nspace={{'nspace'}}
@partition={{'partition'}}
/>
<DistributionMeter
type="linear"
as |meter|>
<meter.Meter class="warning" percentage="80" />
<meter.Meter class="critical" percentage="10" />
</DistributionMeter>
<Consul::Bucket::List
@item={{hash
Namespace="different-nspace"
Partition="different-partition"
}}
@nspace={{'nspace'}}
@partition={{'partition'}}
/>
<DistributionMeter
type="linear"
as |meter|>
<meter.Meter class="warning" percentage="10" />
<meter.Meter class="critical" percentage="40" />
</DistributionMeter>
<Consul::Bucket::List
@item={{hash
Namespace="different-nspace"
Partition="different-partition"
}}
@nspace={{'nspace'}}
@partition={{'partition'}}
/>
<DistributionMeter
type="linear"
as |meter|>
<meter.Meter class="warning" percentage="50" />
<meter.Meter class="critical" percentage="30" />
</DistributionMeter>
</disclosure.Details>
<disclosure.Action
slot="action"
{{on 'click' disclosure.toggle}}
>
{{if disclosure.expanded "View less" "View more"}}
</disclosure.Action>
</DisclosureCard>
</figure>
```
## Attributes
<!-- START component-docs:@attrs -->
<!-- END component-docs:@attrs -->
## Arguments
<!-- START component-docs:@args -->
<!-- END component-docs:@args -->
## Slots
<!-- START component-docs:@slots -->
<!-- END component-docs:@slots -->
## CSS Parts
<!-- START component-docs:@cssparts -->
<!-- END component-docs:@cssparts -->
## CSS Properties
<!-- START component-docs:@cssprops -->
<!-- END component-docs:@cssprops -->
## Contextual Components
<!-- START component-docs:@components -->
<!-- END component-docs:@components -->

90
ui/packages/consul-ui/app/components/disclosure-card/index.hbs
View File

@ -1,90 +0,0 @@
<CustomElement
@element="disclosure-card"
@description="Block level component with extra disclosable content"
@attrs={{array
}}
as |custom element|>
<Disclosure as |disclosure|>
<disclosure-card
{{did-insert custom.connect}}
{{will-destroy custom.disconnect}}
expanded={{disclosure.expanded}}
>
<custom.Template
@styles={{css-map
(require '/styles/base/icons/base-keyframes.css' from='/components/disclosure-card')
(require '/styles/base/icons/icons/chevron-down/index.css' from='/components/disclosure-card')
(require '/components/panel/index.css' from='/components/disclosure-card')
(css "
:host {
display: block;
}
slot[name='action']::slotted(button) {
display: block;
cursor: pointer;
width: 100%;
background-color: rgb(var(--tone-gray-050));
color: rgb(var(--tone-gray-800));
padding-top: var(--padding-y);
padding-bottom: var(--padding-y);
}
slot[name='action']::slotted(button)::after {
transition-timing-function: linear;
transition-duration: 300ms;
transition-property: transform;
--icon-name: icon-chevron-down;
--icon-size: icon-000;
content: '';
}
:host([expanded]) slot[name='action']::slotted(button)::after {
transform: scaleY(-100%);
}
:host([expanded]) [style*='max-height'] {
transition-duration: 50ms;
}
[style*='max-height'] {
transition-timing-function: ease-out;
transition-property: max-height;
overflow: hidden;
}
.content {
padding: var(--padding-y) var(--padding-x);
}
")
}}
>
<div part="base"
class={{class-map
"panel"
}}
>
<div
{{on-resize (dom-position (array
(array 'height' 'max-height')
))}}
class={{class-map
'content'
}}
>
<slot>
</slot>
</div>
<hr
class={{class-map
'panel-separator'
}}
/>
<slot name="action">
</slot>
</div>
</custom.Template>
{{yield disclosure}}
</disclosure-card>
</Disclosure>
</CustomElement>

83
ui/packages/consul-ui/app/components/distribution-meter/README.mdx
View File

@ -1,83 +0,0 @@
---
type: custom-element
---
<!-- START component-docs:@tagName -->
# DistributionMeter
<!-- END component-docs:@tagName -->
<!-- START component-docs:@description -->
A meter-like component to show a distribution of values.
<!-- END component-docs:@description -->
```hbs preview-template
<figure>
<figcaption>
Provide a widget so we can try switching between all types of meter
</figcaption>
<select
onchange={{action (mut this.type) value="target.value"}}
>
<option>linear</option>
<option>radial</option>
<option>circular</option>
</select>
</figure>
<figure>
<DataSource
@src={{uri '/partition/namespace/dc-1/services'}}
as |source|>
{{#let
(group-by "MeshStatus" (or source.data (array)))
as |grouped|}}
<DistributionMeter type={{or this.type 'linear'}} as |meter|>
{{#each (array 'passing' 'warning' 'critical') as |status|}}
{{#let
(concat (percentage-of (get grouped (concat status '.length')) source.data.length) '%')
as |percentage|}}
<meter.Meter
description={{capitalize status}}
percentage={{percentage}}
class={{class-map
status
}}
as |meter|></meter.Meter>
{{/let}}
{{/each}}
</DistributionMeter>
{{/let}}
</DataSource>
</figure>
```
## Attributes
<!-- START component-docs:@attrs -->
| Attribute | Type | Default | Description |
| :-------- | :--------------------------------- | :------ | :------------------------------------ |
| type | "linear" \| "radial" \| "circular" | linear | The type of distribution meter to use |
<!-- END component-docs:@attrs -->
## Contextual Components
<!-- START component-docs:@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 |
<!-- END component-docs:@components -->

32
ui/packages/consul-ui/app/components/distribution-meter/index.css.js
View File

@ -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);
}
`;
};

30
ui/packages/consul-ui/app/components/distribution-meter/index.hbs
View File

@ -1,30 +0,0 @@
<CustomElement
@element="distribution-meter"
@description="A meter-like component to show a distribution of values."
@attrs={{array
(array 'type' '"linear" | "radial" | "circular"' 'linear'
'The type of distribution meter to use'
)
}}
as |custom element|>
<distribution-meter
{{did-insert custom.connect}}
{{will-destroy custom.disconnect}}
...attributes
>
<custom.Template
@styles={{css-map
(require './index.css' from='/components/distribution-meter')
}}
>
<dl>
<slot></slot>
</dl>
</custom.Template>
{{yield (hash
Meter=(component 'distribution-meter/meter'
type=element.attrs.type
)
)}}
</distribution-meter>
</CustomElement>

29
ui/packages/consul-ui/app/components/distribution-meter/meter/element.js
View File

@ -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;
}
}
}
};
};

80
ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js
View File

@ -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;
}
`;
};

64
ui/packages/consul-ui/app/components/distribution-meter/meter/index.hbs
View File

@ -1,64 +0,0 @@
<CustomElement
@element="distribution-meter-meter"
@class={{require './element'
from='/components/distribution-meter/meter'}}
@attrs={{array
(array 'percentage' 'number' 0
'The percentage to be used for the meter'
)
(array 'description' 'string' ''
'Textual value to describe the meters value'
)
}}
@cssprops={{array
(array '--percentage' 'percentage' '[percentage]'
'Read-only alias of the percentage attribute'
)
(array '--aggregated-percentage' 'percentage' undefined
'Aggregated percentage of all meters within the distribution meter'
)
}}
as |custom element|>
<distribution-meter-meter
{{did-insert custom.connect}}
{{will-destroy custom.disconnect}}
class={{class-map
(array (concat 'type-' @type) @type)
}}
...attributes
>
<custom.Template
@styles={{css-map
(require '/styles/base/decoration/visually-hidden.css'
from='/components/distribution-meter/meter')
(require './index.css'
from='/components/distribution-meter/meter')
}}
>
<dt>{{element.attrs.description}}</dt>
<dd aria-label={{concat element.attrs.percentage '%'}}>
<meter min="0" max="100" value={{element.attrs.percentage}}>
<slot>{{concat element.attrs.percentage '%'}}</slot>
</meter>
{{#if (or (eq @type 'circular') (eq @type 'radial'))}}
<svg
aria-hidden="true"
viewBox="0 0 32 32"
clip-path="circle()"
>
<circle
r="16"
cx="16"
cy="16"
/>
</svg>
{{/if}}
</dd>
</custom.Template>
</distribution-meter-meter>
</CustomElement>

142
ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
View File

@ -1,24 +1,19 @@
<App
class="hashicorp-consul"
...attributes
>
<App class='hashicorp-consul' ...attributes>
<:notifications as |app|>
{{#each flashMessages.queue as |flash|}}
<app.Notification
@delay={{sub flash.timeout flash.extendedTimeout}}
@sticky={{flash.sticky}}
>
{{#each flashMessages.queue as |flash|}}
<app.Notification @delay={{sub flash.timeout flash.extendedTimeout}} @sticky={{flash.sticky}}>
{{#if flash.dom}}
{{{flash.dom}}}
{{else}}
{{#let (lowercase flash.type) (lowercase flash.action) as |status type|}}
{{#let (lowercase flash.type) (lowercase flash.action) as |status type|}}
<Notice
role="alert"
role='alert'
class={{concat status ' notification-' type}}
data-notification
@type={{status}}
as |notice|>
as |notice|
>
<notice.Header>
<strong>
{{capitalize status}}!
@ -27,13 +22,13 @@
<notice.Body>
<p>
{{#if (eq type 'logout')}}
{{#if (eq status 'success') }}
{{#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') }}
{{#if (eq status 'success')}}
You are now logged in.
{{else}}
There was an error, please check your SecretID/Token
@ -72,17 +67,17 @@
</p>
</notice.Body>
</Notice>
{{/let}}
{{/let}}
{{/if}}
</app.Notification>
{{/each}}
{{/each}}
</:notifications>
<:home-nav>
<a
href={{href-to 'index' params=(hash peer=undefined)}}
><Consul::Logo /></a>
<a class='w-8 h-8' href={{href-to 'index' params=(hash peer=undefined)}}>
<FlightIcon @size='24' @name='consul-color' @stretched={{true}} />
</a>
</:home-nav>
<:main-nav>
@ -99,73 +94,59 @@
@partition={{@partition}}
@nspace={{@nspace}}
@partitions={{this.partitions}}
@onchange={{action (mut this.partitions) value="data"}}
@onchange={{action (mut this.partitions) value='data'}}
/>
<Consul::Nspace::Selector
@dc={{@dc}}
@partition={{@partition}}
@nspace={{@nspace}}
@nspaces={{this.nspaces}}
@onchange={{action (mut this.nspaces) value="data"}}
@onchange={{action (mut this.nspaces) value='data'}}
/>
{{#if (can 'access overview')}}
{{#if (can 'access overview')}}
<li
data-test-main-nav-overview
class={{class-map
(array 'is-active' (is-href 'dc.show' @dc.Name))
}}
>
<Action
@href={{href-to 'dc.show' @dc.Name params=(hash peer=undefined)}}
class={{class-map (array 'is-active' (is-href 'dc.show' @dc.Name))}}
>
<Action @href={{href-to 'dc.show' @dc.Name params=(hash peer=undefined)}}>
Overview
</Action>
</li>
{{/if}}
{{#if (can "read services")}}
{{/if}}
{{#if (can 'read services')}}
<li data-test-main-nav-services class={{if (is-href 'dc.services' @dc.Name) 'is-active'}}>
<a href={{href-to 'dc.services' @dc.Name params=(hash peer=undefined)}}>Services</a>
</li>
{{/if}}
{{#if (can "read nodes")}}
{{/if}}
{{#if (can 'read nodes')}}
<li data-test-main-nav-nodes class={{if (is-href 'dc.nodes' @dc.Name) 'is-active'}}>
<a href={{href-to 'dc.nodes' @dc.Name params=(hash peer=undefined)}}>Nodes</a>
</li>
{{/if}}
{{#if (can "read kv")}}
{{/if}}
{{#if (can 'read kv')}}
<li data-test-main-nav-kvs class={{if (is-href 'dc.kv' @dc.Name) 'is-active'}}>
<a href={{href-to 'dc.kv' @dc.Name params=(hash peer=undefined)}}>Key/Value</a>
</li>
{{/if}}
{{#if (can "read intentions")}}
<li data-test-main-nav-intentions class={{if (is-href 'dc.intentions' @dc.Name) 'is-active'}}>
{{/if}}
{{#if (can 'read intentions')}}
<li
data-test-main-nav-intentions
class={{if (is-href 'dc.intentions' @dc.Name) 'is-active'}}
>
<a href={{href-to 'dc.intentions' @dc.Name params=(hash peer=undefined)}}>Intentions</a>
</li>
{{/if}}
<Consul::Acl::Selector
@dc={{@dc}}
@partition={{@partition}}
@nspace={{@nspace}}
/>
<Consul::Peer::Selector
@dc={{@dc}}
@partition={{@partition}}
@nspace={{@nspace}}
/>
{{/if}}
<Consul::Acl::Selector @dc={{@dc}} @partition={{@partition}} @nspace={{@nspace}} />
<Consul::Peer::Selector @dc={{@dc}} @partition={{@partition}} @nspace={{@nspace}} />
</ul>
</:main-nav>
<:complementary-nav>
<ul>
<Debug::Navigation />
<li
data-test-main-nav-help
>
<DisclosureMenu
as |disclosure|>
<disclosure.Action
{{on 'click' disclosure.toggle}}
>
<li data-test-main-nav-help>
<DisclosureMenu as |disclosure|>
<disclosure.Action {{on 'click' disclosure.toggle}}>
Help
</disclosure.Action>
<disclosure.Menu as |panel|>
@ -173,19 +154,12 @@
<menu.Separator>
Consul v{{env 'CONSUL_VERSION'}}
</menu.Separator>
<menu.Item
class="docs-link"
>
<menu.Action
@href={{env 'CONSUL_DOCS_URL'}}
@external={{true}}
>
<menu.Item class='docs-link'>
<menu.Action @href={{env 'CONSUL_DOCS_URL'}} @external={{true}}>
Documentation
</menu.Action>
</menu.Item>
<menu.Item
class="learn-link"
>
<menu.Item class='learn-link'>
<menu.Action
@href={{concat (env 'CONSUL_DOCS_LEARN_URL') '/consul'}}
@external={{true}}
@ -194,13 +168,8 @@
</menu.Action>
</menu.Item>
<menu.Separator />
<menu.Item
class="feedback-link"
>
<menu.Action
@href={{env 'CONSUL_REPO_ISSUES_URL'}}
@external={{true}}
>
<menu.Item class='feedback-link'>
<menu.Action @href={{env 'CONSUL_REPO_ISSUES_URL'}} @external={{true}}>
Provide Feedback
</menu.Action>
</menu.Item>
@ -208,16 +177,8 @@
</disclosure.Menu>
</DisclosureMenu>
</li>
<li
data-test-main-nav-settings
class={{if (is-href 'settings') 'is-active'}}
>
<a
href={{href-to 'settings' params=(hash
nspace=undefined
partition=undefined
)}}
>
<li data-test-main-nav-settings class={{if (is-href 'settings') 'is-active'}}>
<a href={{href-to 'settings' params=(hash nspace=undefined partition=undefined)}}>
Settings
</a>
</li>
@ -226,20 +187,17 @@
@partition={{@partition}}
@nspace={{@nspace}}
@onchange={{@onchange}}
as |selector|>
<Ref
@target={{this}}
@name="tokenSelector"
@value={{selector}}
/>
as |selector|
>
<Ref @target={{this}} @name='tokenSelector' @value={{selector}} />
</Consul::Token::Selector>
</ul>
</:complementary-nav>
<: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)))
}}
</:main>
<:content-info>

6
ui/packages/consul-ui/app/components/informed-action/skin.scss
View File

@ -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));

7
ui/packages/consul-ui/app/components/pill/index.scss
View File

@ -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: '';
}

20
ui/packages/consul-ui/app/components/popover-select/index.scss
View File

@ -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;
}
/**/

29
ui/packages/consul-ui/app/components/shadow-host/README.mdx
View File

@ -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
<ShadowHost as |shadow|>
<div
{{did-insert shadow.host}}
>
<shadow.Template>
<p>hi</p>
</shadow.Template>
</div>
</ShadowHost>
```
## 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 |

5
ui/packages/consul-ui/app/components/shadow-host/index.hbs
View File

@ -1,5 +0,0 @@
{{yield (hash
host=(fn this.attachShadow)
root=this.shadowRoot
Template=(component 'shadow-template' shadowRoot=this.shadowRoot)
)}}

12
ui/packages/consul-ui/app/components/shadow-host/index.js
View File

@ -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' });
}
}

162
ui/packages/consul-ui/app/components/shadow-template/README.mdx
View File

@ -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 `<style>` within the template
itself also if necessary).
For the moment we'd generally use a standard div element and add Shadow DOM to
it, but as shown in the second example, you could also use it to make
Glimmerized native custom-elements using Declarative ShadowDOM and
Constructable Stylesheets.
**Important:** As ShadowDOM elements are completely isolated please take care
to use the features available (slots/parts etc) to make sure components built in
this way can make use of a11y functionality, i.e. any elements having necessary
`id` relationships for a11y reasons should be slotted to ensure that the all
`id`s remain in the LightDOM. Native form controls such as inputs etc should
also be slotted in order to keep them in the LightDOM to ensure that native
form functionality continues to work.
Beside several advantages of isolated DOM/CSS ShadowDOM slots can also be used
within conditionals, something which is currently not possible with
Glimmer/Ember slots. Mixing Glimmer/Handlebars conditionals with native
ShadowDOM slots will give you this additional feature (see truthy conditional in
the example below).
```hbs preview-template
<div
class={{class-map
"component-name"
}}
...attributes
{{attach-shadow (set this 'shadow')}}
>
<ShadowTemplate
@shadowRoot={{this.shadow}}
@styles={{css '
:host {
background-color: rgb(var(--tone-strawberry-500) / 20%);
padding: 1rem; /* 16px */
}
header {
color: purple;
}
p {
color: green;
}
::slotted(header) {
color: blue;
}
::slotted(p) {
color: red;
}
header {
display: flex;
align-items: center;
}
header::before {
margin-right: 0.375rem; /* 6px */
}
'}}
>
<header part="header">
<slot name="header">
<h1>Default Header</h1>
</slot>
</header>
<!-- Wrap the slot in a conditional -->
{{#if true}}
<slot name="body">
<p>Default Body</p>
</slot>
{{/if}}
<slot>
<!-- The default slot -->
</slot>
</ShadowTemplate>
</div>
```
```css
.component-name::part(header)::before {
@extend %with-logo-consul-color-icon, %as-pseudo;
width: 2rem; /* 32px */
height: 2rem; /* 32px */
}
```
Example with a custom element. **Please note:** These must still be instantiated
using Glimmer syntax i.e. `<ComponentName />` not `<component-name />` but a
`<component-name />` element will be rendered to the DOM instead of a `<div>`.
```hbs preview-template
<component-name
...attributes
{{attach-shadow (set this 'shadow')}}
>
<ShadowTemplate
@shadowRoot={{this.shadow}}
@styles={{css '
header {
color: purple;
}
p {
color: green;
}
::slotted(header) {
color: blue;
}
::slotted(p) {
color: red;
}
header {
display: flex;
align-items: center;
}
header::before {
margin-right: 0.375rem; /* 6px */
}
'}}
>
<header part="header">
<slot name="header">
<h1>Default Header</h1>
</slot>
</header>
{{#if true}}
<slot name="body">
<p>Default Body</p>
</slot>
{{/if}}
<slot>
<!-- The default slot -->
</slot>
</ShadowTemplate>
</component-name>
```
```css
component-name::part(header)::before {
@extend %with-logo-consul-color-icon, %as-pseudo;
width: 2rem; /* 32px */
height: 2rem; /* 32px */
}
```
## Arguments
| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `shadowRoot` | `ShadowRoot` | | A reference to a shadow root (probably retrived using the `{{attach-shadow}}` modifier |
| `styles` | `CSSResultGroup` | | Styles to be adopted by the ShadowRoot |

6
ui/packages/consul-ui/app/components/shadow-template/debug.scss
View File

@ -1,6 +0,0 @@
[id^='docfy-demo-preview-shadow-template'] .component-name::part(header)::before,
[id^='docfy-demo-preview-shadow-template'] component-name::part(header)::before {
@extend %with-logo-consul-color-icon, %as-pseudo;
width: 2rem; /* 32px */
height: 2rem; /* 32px */
}

11
ui/packages/consul-ui/app/components/shadow-template/index.hbs
View File

@ -1,11 +0,0 @@
{{#if @shadowRoot}}
{{#in-element @shadowRoot}}
{{#if @styles}}
{{adopt-styles
@shadowRoot
@styles
}}
{{/if}}
{{yield}}
{{/in-element}}
{{/if}}

28
ui/packages/consul-ui/app/helpers/icon-mapping.js Normal file
View File

@ -0,0 +1,28 @@
import { helper } from '@ember/component/helper';
const ICON_MAPPING = {
kubernetes: 'kubernetes-color',
terraform: 'terraform-color',
nomad: 'nomad-color',
consul: 'consul-color',
'consul-api-gateway': 'consul-color',
vault: 'vault',
aws: 'aws-color',
'aws-iam': 'aws-color',
lambda: 'aws-lambda-color',
};
/**
* Takes a icon name, usually an external-source/auth-method-type, and maps it to a flight-icon name or returns undefined
* if the icon is not currently mapped to a flight-icon name. This is particularly useful when dealing with converting icons to
* use the `<FlightIcon>` component directly instead of our own css. If the icon is not available with `<FlightIcon>` you can leave
* it out of the mapping and handle it in the undefined case.
*
* @param {string} icon
* @returns {string|undefined}
*/
function iconMapping([icon]) {
return ICON_MAPPING[icon];
}
export default helper(iconMapping);

10
ui/packages/consul-ui/app/helpers/icons-debug.js
View File

@ -75,10 +75,6 @@ export default helper(function ([lib], hash) {
'auto-apply-24.svg',
'award-16.svg',
'award-24.svg',
'aws-16.svg',
'aws-24.svg',
'aws-color-16.svg',
'aws-color-24.svg',
'azure-16.svg',
'azure-24.svg',
'azure-color-16.svg',
@ -549,15 +545,12 @@ export default helper(function ([lib], hash) {
'logo-alicloud-color.svg',
'logo-alicloud-monochrome.svg',
'logo-auth0-color.svg',
'logo-aws-color.svg',
'logo-aws-monochrome.svg',
'logo-azure-color.svg',
'logo-azure-dev-ops-color.svg',
'logo-azure-dev-ops-monochrome.svg',
'logo-azure-monochrome.svg',
'logo-bitbucket-color.svg',
'logo-bitbucket-monochrome.svg',
'logo-consul-color.svg',
'logo-ember-circle-color.svg',
'logo-gcp-color.svg',
'logo-gcp-monochrome.svg',
@ -573,15 +566,12 @@ export default helper(function ([lib], hash) {
'logo-kubernetes-color.svg',
'logo-kubernetes-monochrome.svg',
'logo-microsoft-color.svg',
'logo-nomad-color.svg',
'logo-oidc-color.svg',
'logo-okta-color.svg',
'logo-oracle-color.svg',
'logo-oracle-monochrome.svg',
'logo-slack-color.svg',
'logo-slack-monochrome.svg',
'logo-terraform-color.svg',
'logo-vault-color.svg',
'logo-vmware-color.svg',
'logo-vmware-monochrome.svg',
'mail-16.svg',

23
ui/packages/consul-ui/app/modifiers/attach-shadow.js
View File

@ -1,23 +0,0 @@
import { setModifierManager, capabilities } from '@ember/modifier';
export default setModifierManager(
() => ({
capabilities: capabilities('3.13', { disableAutoTracking: true }),
createModifier() {},
installModifier(_state, element, { positional: [fn, ...args], named }) {
let shadow;
try {
shadow = element.attachShadow({ mode: 'open' });
} catch (e) {
// shadow = false;
console.error(e);
}
fn(shadow);
},
updateModifier() {},
destroyModifier() {},
}),
class CustomElementModifier {}
);

28
ui/packages/consul-ui/app/modifiers/attach-shadow.mdx
View File

@ -1,28 +0,0 @@
# attach-shadow
`{{attach-shadow (set this 'shadow')}}` attaches a `ShadowRoot` to the modified DOM element
and pass a reference to that `ShadowRoot` to the setter function.
Please note: This should be used as a utility modifier for when having access
to the shadow DOM is handy, not really for building full blown shadow DOM
based Web Components.
```hbs preview-template
<div
{{attach-shadow (set this 'shadow')}}
>
{{#if this.shadow}}
{{#in-element this.shadow}}
<slot name="name"></slot>
{{/in-element}}
{{/if}}
<p slot="name">Hello from the shadows!</p>
</div>
```
## Positional Arguments
| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `setter` | `function` | | Usually `set` or `mut` or similar |

68
ui/packages/consul-ui/app/styles/base/icons/README.mdx
View File

@ -1,5 +1,12 @@
# Iconography
_We recently started adopting the [@hashicorp/ember-flight-icons](https://flight-hashicorp.vercel.app/) package, in particular the
usage of the `<FlightIcon>` component to render icons. This enables us to use all the
icons listed [on the flight icons page](https://flight-hashicorp.vercel.app/). If an icon is not present in the flight-icons package,
you may resort to the techniques listed below._
---
All our iconography uses native CSS properties for adding iconography from The
Outside. You can also add icons using the same properties within `style=""`
attributes, but you should think twice before adding decorative content into
@ -29,14 +36,14 @@ selectors.
```css
.selector::before {
--icon-name: icon-aws-color;
--icon-name: icon-alert-circle;
content: '';
}
```
```css
.selector::after {
--icon-name: icon-aws;
--icon-name: icon-alert-circle;
--icon-color: rgb(var(---white));
content: '';
}
@ -48,7 +55,7 @@ icons in HTML using these CSS properties.
```hbs preview-template
<h2
style={{style-map
(array '--icon-name-start' 'icon-consul')
(array '--icon-name-start' 'icon-alert-circle')
(array '--icon-color-start' 'rgb(var(--tone-strawberry-500))')
(array '--icon-name-end' 'icon-vault')
(array '--icon-color-end' 'var(--color-vault-500)')
@ -64,9 +71,7 @@ following. Under different circumstances this would give us an option that works
```hbs
<span
class={{class-map
'visually-hidden'
}}
class={{class-map 'visually-hidden'}}
style={{style-map
(array '--icon-name-start' @name)
(array '--icon-color' @color)
@ -75,11 +80,9 @@ following. Under different circumstances this would give us an option that works
...attributes
>{{yield}}</span>
<Icon @name="icon-name" @color="#FF0000" @size="icon-300" />
<Icon @name='icon-name' @color='#FF0000' @size='icon-300' />
```
## Deprecated
Please prefer our Constructable `%placeholder` styles over singular CSS
@ -111,65 +114,56 @@ use `-mask`, use `-icon` instead:
```css
.selector::before {
@extend %with-logo-consul-color-icon, %as-pseudo;
@extend %with-alert-circle-icon, %as-pseudo;
}
```
```hbs preview-template
<figure>
<select
onchange={{action (mut this.type) value="target.value"}}
>
<select onchange={{action (mut this.type) value='target.value'}}>
<option>colored</option>
<option>monochrome</option>
</select>
<select
onchange={{action (mut this.theme) value="target.value"}}
>
<select onchange={{action (mut this.theme) value='target.value'}}>
<option>light</option>
<option>dark</option>
</select>
<input
oninput={{action (mut this.size) value="target.value"}}
type="range" min="100" max="900" step="100"
oninput={{action (mut this.size) value='target.value'}}
type='range'
min='100'
max='900'
step='100'
/>
{{this.size}}
</figure>
<ul
{{css-props (set this 'icons')
prefix='icon-'
}}
class={{class-map
(concat 'theme-' (or this.theme 'light'))
}}
{{css-props (set this 'icons') prefix='icon-'}}
class={{class-map (concat 'theme-' (or this.theme 'light'))}}
style={{style-map
(array '--icon-color' (if (eq this.type 'monochrome') 'rgb(var(--black))'))
(array '--icon-size' (concat 'icon-' (or this.size '500')))
(array '--icon-resolution' (if (gt this.size 500) '.5' '1'))
}}
>
{{#each-in this.icons as |prop value|}}
{{#if (and
{{#each-in this.icons as |prop value|}}
{{#if
(and
(not (includes prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
(not (string-includes prop '-24'))
)
}}
{{#let
(string-replace (string-replace prop '-16' '') '--' '')
as |name|}}
}}
{{#let (string-replace (string-replace prop '-16' '') '--' '') as |name|}}
<li>
<figure
{{with-copyable (concat '--icon-name: ' name ';content: "";')}}
style={{style-map
(array '--icon-name-start' name)
}}
style={{style-map (array '--icon-name-start' name)}}
>
<figcaption>{{name}}</figcaption>
</figure>
</li>
{{/let}}
{{/if}}
{{/each-in}}
{{/let}}
{{/if}}
{{/each-in}}
</ul>
```

502
ui/packages/consul-ui/app/styles/base/icons/debug.scss
View File

File diff suppressed because one or more lines are too long

6
ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/index.scss
View File

@ -1,6 +0,0 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

5
ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/keyframes.scss
View File

@ -1,5 +0,0 @@
@keyframes icon-aws-color {
100% {
background-image: var(--icon-aws-color-16);
}
}

10
ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/placeholders.scss
View File

@ -1,10 +0,0 @@
%with-aws-color-icon {
--icon-name: icon-aws-color;
content: '';
}
%with-aws-color-mask {
--icon-name: icon-aws-color;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/property-16.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-aws-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23252F3E" d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.165-.315c-.415.491-.936.737-1.564.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.191-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.618.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.049-.214c0-.085.043-.133.128-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.1-.208a.365.365 0 01.214-.053h.425c.102 0 .17.016.213.053.043.032.08.107.101.208l.841 3.578.92-3.578a.458.458 0 01.107-.208.346.346 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.76.76 0 01-.038.133l-1.283 4.127c-.032.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.378.378 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.46.46 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.427 2.427 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.436 1.436 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z"/><g fill="%23F90" fill-rule="evenodd" clip-rule="evenodd"><path d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z"/><path d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.218-.1.213-.53.687-1.72.463-2.003z"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/property-24.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-aws-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23252F3E" d="M6.895 10.085c0 .288.031.521.085.692.063.172.14.359.25.561a.338.338 0 01.054.18c0 .077-.047.155-.148.233l-.49.327a.373.373 0 01-.203.07c-.077 0-.155-.039-.233-.11a2.408 2.408 0 01-.28-.365 6.031 6.031 0 01-.241-.46c-.607.717-1.37 1.075-2.288 1.075-.654 0-1.176-.187-1.557-.56-.381-.374-.576-.873-.576-1.495 0-.662.234-1.2.708-1.605.475-.404 1.105-.607 1.907-.607.265 0 .537.023.825.062.288.04.584.102.895.172v-.569c0-.591-.125-1.004-.366-1.246-.249-.24-.67-.358-1.268-.358a3.54 3.54 0 00-.84.102 6.2 6.2 0 00-.841.264 2.234 2.234 0 01-.273.101.477.477 0 01-.124.024c-.11 0-.164-.078-.164-.242V5.95c0-.125.016-.218.055-.273A.583.583 0 012 5.514c.272-.14.599-.257.98-.35a4.716 4.716 0 011.214-.148c.926 0 1.604.21 2.04.63.427.42.645 1.06.645 1.916v2.522h.016zm-3.16 1.183c.257 0 .522-.047.802-.14.28-.094.529-.265.74-.498.124-.148.217-.312.264-.499.046-.187.078-.412.078-.677v-.327a6.494 6.494 0 00-.716-.133 5.86 5.86 0 00-.732-.046c-.521 0-.903.1-1.16.311-.256.21-.381.506-.381.896 0 .366.093.638.288.825.187.195.46.288.817.288zm6.25.841c-.14 0-.234-.023-.296-.078-.062-.047-.117-.156-.164-.304L7.696 5.71a1.364 1.364 0 01-.07-.312c0-.124.063-.195.187-.195h.763c.148 0 .249.024.303.078.063.047.11.156.156.304l1.308 5.155 1.214-5.155c.039-.156.085-.257.147-.304a.535.535 0 01.312-.078h.622c.148 0 .25.024.312.078.062.047.117.156.148.304l1.23 5.217 1.346-5.217c.046-.156.1-.257.155-.304a.508.508 0 01.304-.078h.724c.124 0 .194.063.194.195 0 .039-.008.078-.015.125a1.104 1.104 0 01-.055.194l-1.876 6.02c-.046.155-.1.256-.163.303a.497.497 0 01-.296.078h-.669c-.148 0-.249-.024-.311-.078-.063-.055-.117-.156-.148-.312l-1.206-5.022-1.199 5.015c-.039.155-.086.257-.148.311-.062.055-.171.078-.311.078h-.67zm10 .21a5.15 5.15 0 01-1.198-.14c-.39-.093-.693-.195-.895-.311-.125-.07-.21-.148-.242-.218a.55.55 0 01-.046-.218v-.398c0-.163.062-.24.179-.24a.44.44 0 01.14.022c.047.016.117.047.194.078.265.117.553.21.857.273.31.062.614.093.926.093.49 0 .871-.085 1.136-.257a.838.838 0 00.404-.74.758.758 0 00-.21-.544c-.14-.148-.404-.28-.786-.405l-1.128-.35c-.568-.18-.988-.445-1.245-.795a1.856 1.856 0 01-.39-1.129c0-.327.07-.615.21-.864.14-.25.328-.467.561-.639a2.47 2.47 0 01.81-.405 3.39 3.39 0 01.98-.132c.171 0 .35.008.521.031.18.024.343.055.506.086.156.039.304.078.444.124.14.047.249.094.327.14a.673.673 0 01.233.195.42.42 0 01.07.257V6.2c0 .164-.062.25-.179.25a.81.81 0 01-.295-.094 3.559 3.559 0 00-1.495-.304c-.443 0-.793.07-1.035.218-.241.148-.365.374-.365.693 0 .218.077.405.233.553.156.148.444.296.856.428l1.105.35c.56.18.965.429 1.207.748.24.32.358.685.358 1.09 0 .335-.07.639-.203.903-.14.265-.327.499-.568.686-.241.194-.53.335-.864.436a3.7 3.7 0 01-1.113.163z"/><g fill="%23F90" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.456 16.103c-2.56 1.892-6.28 2.897-9.48 2.897-4.482 0-8.522-1.659-11.572-4.415-.242-.218-.024-.514.264-.343 3.3 1.916 7.37 3.076 11.58 3.076 2.841 0 5.962-.592 8.834-1.806.428-.195.794.28.374.591z"/><path d="M22.522 14.889c-.327-.42-2.164-.203-2.996-.101-.25.03-.288-.187-.063-.35 1.463-1.029 3.868-.733 4.148-.39.28.35-.077 2.756-1.447 3.909-.21.179-.413.085-.32-.148.312-.771 1.005-2.508.678-2.92z"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/index.scss
View File

@ -1,6 +0,0 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

5
ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/keyframes.scss
View File

@ -1,5 +0,0 @@
@keyframes icon-aws-ec2-color {
100% {
background-image: var(--icon-aws-ec2-color-16);
}
}

10
ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/placeholders.scss
View File

@ -1,10 +0,0 @@
%with-aws-ec2-color-icon {
--icon-name: icon-aws-ec2-color;
content: '';
}
%with-aws-ec2-color-mask {
--icon-name: icon-aws-ec2-color;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/property-16.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-aws-ec2-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%239D5025" d="M1.702 2.98L1 3.312v9.376l.702.332 2.842-4.777L1.702 2.98z"/><path fill="%23F58536" d="M3.339 12.657l-1.637.363V2.98l1.637.353v9.324z"/><path fill="%239D5025" d="M2.476 2.612l.863-.406 4.096 6.216-4.096 5.372-.863-.406V2.612z"/><path fill="%23F58536" d="M5.38 13.248l-2.041.546V2.206l2.04.548v10.494z"/><path fill="%239D5025" d="M4.3 1.75l1.08-.512 6.043 7.864-6.043 5.66-1.08-.511V1.749z"/><path fill="%23F58536" d="M7.998 13.856l-2.618.906V1.238l2.618.908v11.71z"/><path fill="%239D5025" d="M6.602.66L7.998 0l6.538 8.453L7.998 16l-1.396-.66V.66z"/><path fill="%23F58536" d="M15 12.686L7.998 16V0L15 3.314v9.372z"/></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/property-24.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-aws-ec2-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%239D5025" d="M3.003 4.47L2 4.967v14.064l1.003.499 4.06-7.167-4.06-7.895z"/><path fill="%23F58536" d="M5.341 18.985l-2.338.546V4.469L5.341 5v13.985z"/><path fill="%239D5025" d="M4.11 3.918L5.34 3.31l5.852 9.324-5.852 8.058-1.232-.61V3.919z"/><path fill="%23F58536" d="M8.257 19.872l-2.916.819V3.309l2.916.822v15.74z"/><path fill="%239D5025" d="M6.714 2.624l1.543-.767 8.633 11.796-8.633 8.49-1.543-.767V2.624z"/><path fill="%23F58536" d="M11.997 20.784l-3.74 1.359V1.857l3.74 1.362v17.565z"/><path fill="%239D5025" d="M10.002.991L11.997 0l9.34 12.68L11.997 24l-1.995-.991V.99z"/><path fill="%23F58536" d="M22 19.03L11.997 24V0L22 4.97v14.06z"/></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/index.scss
View File

@ -1,6 +0,0 @@
@import '../aws-ec2-color/property-16';
@import '../aws-ec2-color/property-24';
@import './keyframes';
@import './placeholders';

9
ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/keyframes.scss
View File

@ -1,9 +0,0 @@
@keyframes icon-aws-ec2 {
100% {
-webkit-mask-image: var(--icon-aws-ec2-color-16);
mask-image: var(--icon-aws-ec2-color-16);
background-color: var(--icon-color, var(--color-aws-ec2-500, currentColor));
}
}

10
ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/placeholders.scss
View File

@ -1,10 +0,0 @@
%with-aws-ec2-icon {
--icon-name: icon-aws-ec2;
content: '';
}
%with-aws-ec2-mask {
--icon-name: icon-aws-ec2;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/property-16.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-aws-ec2-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.602.66L7.998 0 15 3.314v9.372L7.998 16l-1.396-.66V.66zM5.38 1.238L4.3 1.75v12.502l1.08.51V1.239zM2.476 2.612l.863-.406v11.588l-.863-.406V2.612zM1.7 2.98V13.02l-.7-.332V3.312l.7-.33z"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/property-24.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-aws-ec2-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.602.66L7.998 0 15 3.314v9.372L7.998 16l-1.396-.66V.66zM5.38 1.238L4.3 1.75v12.502l1.08.51V1.239zM2.476 2.612l.863-.406v11.588l-.863-.406V2.612zM1.7 2.98V13.02l-.7-.332V3.312l.7-.33z"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/aws/index.scss
View File

@ -1,6 +0,0 @@
@import '../aws-color/property-16';
@import '../aws-color/property-24';
@import './keyframes';
@import './placeholders';

9
ui/packages/consul-ui/app/styles/base/icons/icons/aws/keyframes.scss
View File

@ -1,9 +0,0 @@
@keyframes icon-aws {
100% {
-webkit-mask-image: var(--icon-aws-color-16);
mask-image: var(--icon-aws-color-16);
background-color: var(--icon-color, var(--color-aws-500, currentColor));
}
}

10
ui/packages/consul-ui/app/styles/base/icons/icons/aws/placeholders.scss
View File

@ -1,10 +0,0 @@
%with-aws-icon {
--icon-name: icon-aws;
content: '';
}
%with-aws-mask {
--icon-name: icon-aws;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/aws/property-16.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-aws-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.164-.315c-.416.491-.937.737-1.565.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.192-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.617.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.048-.214c0-.085.042-.133.127-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.101-.208a.365.365 0 01.213-.053h.426c.1 0 .17.016.212.053.043.032.08.107.102.208l.84 3.578.92-3.578a.459.459 0 01.107-.208.347.347 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.768.768 0 01-.038.133l-1.283 4.127c-.031.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.38.38 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.461.461 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.428 2.428 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.435 1.435 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z"/><path fill-rule="evenodd" d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.217-.1.212-.53.686-1.72.462-2.003z" clip-rule="evenodd"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/aws/property-24.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-aws-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.164-.315c-.416.491-.937.737-1.565.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.192-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.617.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.048-.214c0-.085.042-.133.127-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.101-.208a.365.365 0 01.213-.053h.426c.1 0 .17.016.212.053.043.032.08.107.102.208l.84 3.578.92-3.578a.459.459 0 01.107-.208.347.347 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.768.768 0 01-.038.133l-1.283 4.127c-.031.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.38.38 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.461.461 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.428 2.428 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.435 1.435 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z"/><path fill-rule="evenodd" d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.217-.1.212-.53.686-1.72.462-2.003z" clip-rule="evenodd"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/index.scss
View File

@ -1,6 +0,0 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

5
ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/keyframes.scss
View File

@ -1,5 +0,0 @@
@keyframes icon-consul-color {
100% {
background-image: var(--icon-consul-color-16);
}
}

10
ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/placeholders.scss
View File

@ -1,10 +0,0 @@
%with-consul-color-icon {
--icon-name: icon-consul-color;
content: '';
}
%with-consul-color-mask {
--icon-name: icon-consul-color;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/property-16.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-consul-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23E03875"><path d="M8.006 15A7 7 0 1112.74 2.85l-1.66 1.738a4.6 4.6 0 100 6.828l1.66 1.737A6.98 6.98 0 018.006 15zM13.638 11.499a.573.573 0 110-1.147.573.573 0 010 1.147z"/><path d="M7.96 9.517a1.517 1.517 0 11-.012-3.034 1.517 1.517 0 01.013 3.034zM14.296 9.544a.574.574 0 110-1.148.574.574 0 010 1.148zM12.59 9.472a.574.574 0 110-1.148.574.574 0 010 1.148zM14.296 7.61a.574.574 0 110-1.147.574.574 0 010 1.147zM12.59 7.675a.574.574 0 110-1.148.574.574 0 010 1.148zM13.672 5.68a.574.574 0 11-.003-1.147.574.574 0 01.003 1.148z"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/property-24.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-consul-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23E03875"><path d="M12.009 23a11 11 0 117.442-19.092l-2.61 2.73a7.229 7.229 0 100 10.73l2.61 2.73A10.97 10.97 0 0112.009 23zM20.86 17.498a.901.901 0 110-1.802.901.901 0 010 1.802z"/><path d="M11.939 14.383a2.383 2.383 0 11-.02-4.766 2.383 2.383 0 01.02 4.766zM21.895 14.426a.902.902 0 110-1.805.902.902 0 010 1.805zM19.214 14.313a.902.902 0 110-1.804.902.902 0 010 1.804zM21.895 11.387a.901.901 0 110-1.802.901.901 0 010 1.802zM19.214 11.49a.901.901 0 110-1.803.901.901 0 010 1.803zM20.913 8.355a.901.901 0 11-.004-1.803.901.901 0 01.004 1.803z"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/consul/index.scss
View File

@ -1,6 +0,0 @@
@import '../consul-color/property-16';
@import '../consul-color/property-24';
@import './keyframes';
@import './placeholders';

9
ui/packages/consul-ui/app/styles/base/icons/icons/consul/keyframes.scss
View File

@ -1,9 +0,0 @@
@keyframes icon-consul {
100% {
-webkit-mask-image: var(--icon-consul-color-16);
mask-image: var(--icon-consul-color-16);
background-color: var(--icon-color, var(--color-consul-500, currentColor));
}
}

10
ui/packages/consul-ui/app/styles/base/icons/icons/consul/placeholders.scss
View File

@ -1,10 +0,0 @@
%with-consul-icon {
--icon-name: icon-consul;
content: '';
}
%with-consul-mask {
--icon-name: icon-consul;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/consul/property-16.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-consul-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.737 14.193A7 7 0 008.006 15a6.98 6.98 0 004.735-1.847l-1.66-1.737a4.6 4.6 0 110-6.828l1.66-1.738a7 7 0 10-8.004 11.343zM13.32 11.402a.573.573 0 10.637-.953.573.573 0 00-.637.953z"/><path d="M7.96 9.517a1.517 1.517 0 11-.012-3.034 1.517 1.517 0 01.013 3.034zM13.978 9.447a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 9.472a.574.574 0 110-1.148.574.574 0 010 1.148zM13.978 7.514a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 7.675a.574.574 0 110-1.148.574.574 0 010 1.148zM13.353 5.585a.574.574 0 10.635-.956.574.574 0 00-.635.956z"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/consul/property-24.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-consul-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.737 14.193A7 7 0 008.006 15a6.98 6.98 0 004.735-1.847l-1.66-1.737a4.6 4.6 0 110-6.828l1.66-1.738a7 7 0 10-8.004 11.343zM13.32 11.402a.573.573 0 10.637-.953.573.573 0 00-.637.953z"/><path d="M7.96 9.517a1.517 1.517 0 11-.012-3.034 1.517 1.517 0 01.013 3.034zM13.978 9.447a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 9.472a.574.574 0 110-1.148.574.574 0 010 1.148zM13.978 7.514a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 7.675a.574.574 0 110-1.148.574.574 0 010 1.148zM13.353 5.585a.574.574 0 10.635-.956.574.574 0 00-.635.956z"/></g></svg>');
}

14
ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
View File

@ -75,8 +75,6 @@
// @import './lock-open/index.scss';
// @import './logo-alicloud-color/index.scss';
// @import './logo-alicloud-monochrome/index.scss';
// @import './logo-aws-color/index.scss';
// @import './logo-aws-monochrome/index.scss';
// @import './logo-azure-color/index.scss';
// @import './logo-azure-dev-ops-color/index.scss';
// @import './logo-azure-dev-ops-monochrome/index.scss';
@ -192,10 +190,6 @@
// @import './auth0-color/index.scss';
// @import './auto-apply/index.scss';
// @import './award/index.scss';
@import './aws/index.scss';
@import './aws-color/index.scss';
// @import './aws-ec2/index.scss';
// @import './aws-ec2-color/index.scss';
// @import './azure/index.scss';
// @import './azure-color/index.scss';
// @import './azure-devops/index.scss';
@ -276,8 +270,6 @@
// @import './compass/index.scss';
// @import './connection/index.scss';
// @import './connection-gateway/index.scss';
@import './consul/index.scss';
// @import './consul-color/index.scss';
// @import './corner-down-left/index.scss';
// @import './corner-down-right/index.scss';
// @import './corner-left-down/index.scss';
@ -455,8 +447,6 @@
@import './network-alt/index.scss';
// @import './newspaper/index.scss';
// @import './node/index.scss';
// @import './nomad/index.scss';
// @import './nomad-color/index.scss';
// @import './octagon/index.scss';
// @import './okta/index.scss';
// @import './okta-color/index.scss';
@ -635,17 +625,13 @@
// @import './layers/index.scss';
@import './loading-motion/index.scss';
@import './logo-auth0-color/index.scss';
@import './logo-consul-color/index.scss';
@import './logo-ember-circle-color/index.scss';
@import './logo-glimmer-color/index.scss';
// @import './logo-hashicorp-color/index.scss';
@import './logo-jwt-color/index.scss';
@import './logo-microsoft-color/index.scss';
@import './logo-nomad-color/index.scss';
@import './logo-oidc-color/index.scss';
@import './logo-okta-color/index.scss';
@import './logo-terraform-color/index.scss';
// @import './logo-vault-color/index.scss';
@import './mesh/index.scss';
// @import './path/index.scss';
@import './port/index.scss';

6
ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/index.scss
View File

@ -1,6 +0,0 @@
@import '../consul-color/property-16';
@import '../consul-color/property-24';
@import './keyframes';
@import './placeholders';

5
ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/keyframes.scss
View File

@ -1,5 +0,0 @@
@keyframes icon-logo-consul-color {
100% {
background-image: var(--icon-consul-color-16);
}
}

10
ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/placeholders.scss
View File

@ -1,10 +0,0 @@
%with-logo-consul-color-icon {
--icon-name: icon-logo-consul-color;
content: '';
}
%with-logo-consul-color-mask {
--icon-name: icon-logo-consul-color;
content: '';
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/index.scss
View File

@ -1,6 +0,0 @@
@import '../nomad-color/property-16';
@import '../nomad-color/property-24';
@import './keyframes';
@import './placeholders';

5
ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/keyframes.scss
View File

@ -1,5 +0,0 @@
@keyframes icon-logo-nomad-color {
100% {
background-image: var(--icon-nomad-color-16);
}
}

10
ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/placeholders.scss
View File

@ -1,10 +0,0 @@
%with-logo-nomad-color-icon {
--icon-name: icon-logo-nomad-color;
content: '';
}
%with-logo-nomad-color-mask {
--icon-name: icon-logo-nomad-color;
content: '';
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/index.scss
View File

@ -1,6 +0,0 @@
@import '../terraform-color/property-16';
@import '../terraform-color/property-24';
@import './keyframes';
@import './placeholders';

5
ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/keyframes.scss
View File

@ -1,5 +0,0 @@
@keyframes icon-logo-terraform-color {
100% {
background-image: var(--icon-terraform-color-16);
}
}

10
ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/placeholders.scss
View File

@ -1,10 +0,0 @@
%with-logo-terraform-color-icon {
--icon-name: icon-logo-terraform-color;
content: '';
}
%with-logo-terraform-color-mask {
--icon-name: icon-logo-terraform-color;
content: '';
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/index.scss
View File

@ -1,6 +0,0 @@
@import './property-16';
@import './keyframes';
@import './placeholders';

5
ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/keyframes.scss
View File

@ -1,5 +0,0 @@
@keyframes icon-logo-vault-color {
100% {
background-image: var(--icon-logo-vault-color-16);
}
}

10
ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/placeholders.scss
View File

@ -1,10 +0,0 @@
%with-logo-vault-color-icon {
--icon-name: icon-logo-vault-color;
content: '';
}
%with-logo-vault-color-mask {
--icon-name: icon-logo-vault-color;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/property-16.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-logo-vault-color-16: url('data:image/svg+xml;charset=UTF-8,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L14.9453 30L30 0H0ZM16.724 6.02083H18.4635V7.76042H16.724V6.02083ZM11.5208 12.9766H13.2604V11.237H11.5208V12.9766ZM13.2604 10.3724H11.5208V8.6302H13.2604V10.3724ZM11.5208 7.76823H13.2604V6.02083H11.5208V7.76823ZM15.8646 15.5937H14.1302V13.8463H15.8698L15.8646 15.5937ZM14.1302 12.9896H15.8646L15.8698 11.237H14.1302V12.9896ZM15.8646 10.3854H14.1302V8.6302H15.8698L15.8646 10.3854ZM14.1302 7.78125H15.8646L15.8698 6.02083H14.1302V7.78125ZM16.7187 8.65105H18.4635V10.3906H16.7239L16.7187 8.65105ZM16.7344 11.237V13L18.4896 12.9766V11.237H16.7344Z" fill="%23000"/></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/property-24.scss
View File

@ -1,3 +0,0 @@
:root {
--icon-logo-vault-color-24: url('data:image/svg+xml;charset=UTF-8,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L14.9453 30L30 0H0ZM16.724 6.02083H18.4635V7.76042H16.724V6.02083ZM11.5208 12.9766H13.2604V11.237H11.5208V12.9766ZM13.2604 10.3724H11.5208V8.6302H13.2604V10.3724ZM11.5208 7.76823H13.2604V6.02083H11.5208V7.76823ZM15.8646 15.5937H14.1302V13.8463H15.8698L15.8646 15.5937ZM14.1302 12.9896H15.8646L15.8698 11.237H14.1302V12.9896ZM15.8646 10.3854H14.1302V8.6302H15.8698L15.8646 10.3854ZM14.1302 7.78125H15.8646L15.8698 6.02083H14.1302V7.78125ZM16.7187 8.65105H18.4635V10.3906H16.7239L16.7187 8.65105ZM16.7344 11.237V13L18.4896 12.9766V11.237H16.7344Z" fill="%23000"/></svg>');
}

1
ui/packages/consul-ui/app/styles/debug.scss
View File

@ -5,7 +5,6 @@
@import 'consul-ui/components/badge/debug';
@import 'consul-ui/components/panel/debug';
@import 'consul-ui/components/tile/debug';
@import 'consul-ui/components/shadow-template/debug';
@import 'consul-ui/components/csv-list/debug';
@import 'consul-ui/components/horizontal-kv-list/debug';
@import 'consul-ui/components/icon-definition/debug';

2
ui/packages/consul-ui/package.json
View File

@ -70,7 +70,7 @@
"@hashicorp/design-system-components": "^1.0.4",
"@hashicorp/design-system-tokens": "^1.0.0",
"@hashicorp/ember-cli-api-double": "^4.0.0",
"@hashicorp/ember-flight-icons": "^2.0.12",
"@hashicorp/ember-flight-icons": "^3.0.0",
"@html-next/vertical-collection": "^4.0.0",
"@lit/reactive-element": "^1.2.1",
"@xstate/fsm": "^1.4.0",

15
ui/yarn.lock
View File

@ -3315,11 +3315,26 @@
ember-cli-babel "^7.26.11"
ember-cli-htmlbars "^6.0.1"
"@hashicorp/ember-flight-icons@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@hashicorp/ember-flight-icons/-/ember-flight-icons-3.0.0.tgz#fddeb8adfb036aa3573c55b7236b34172b49cba9"
integrity sha512-+QrV38Ix9dWLwMzdVcMcSmFfeSVGvWvB+3OVBq3ltOTmnoLPIAx8LT9UDZUZ1wa65ciO+a1YzLMmwWnQgX/r9Q==
dependencies:
"@hashicorp/flight-icons" "^2.11.0"
ember-auto-import "^2.4.1"
ember-cli-babel "^7.26.11"
ember-cli-htmlbars "^6.0.1"
"@hashicorp/flight-icons@^2.10.0":
version "2.10.0"
resolved "https://registry.yarnpkg.com/@hashicorp/flight-icons/-/flight-icons-2.10.0.tgz#24b03043bacda16e505200e6591dfef896ddacf1"
integrity sha512-jYUA0M6Tz+4RAudil+GW/fHbhZPcKCiIZZAguBDviqbLneMkMgPOBgbXWCGWsEQ1fJzP2cXbUaio8L0aQZPWQw==
"@hashicorp/flight-icons@^2.11.0":
version "2.11.0"
resolved "https://registry.yarnpkg.com/@hashicorp/flight-icons/-/flight-icons-2.11.0.tgz#1500be99a42ee8512e7caece4bdae60ce8790577"
integrity sha512-teFkUY2di63JZ2gsegQgS+3f5YEP+GPuycB1Z2O+weInIrL33Ds0/J+lxFCmi2vkPAeY5xOnsclHYnhU6xOSmA==
"@html-next/vertical-collection@^4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@html-next/vertical-collection/-/vertical-collection-4.0.0.tgz#b3b3d52358e15e7ed46e028d12424dab994690ed"