status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: Refactor composite rows to use description lists and add Tooltips (#8175) 

* Update Consul Service List composite rows with Tooltips and description lists

* Update Consul Service Instance List composite rows with Tooltips and description lists

* Removed line height in reduced pill to match the description lists in the composite rows
This commit is contained in:
Kenia 2020-06-24 09:54:16 -04:00 committed by hashicorp-ci
parent 657db029b2
commit 6753d81166
8 changed files with 135 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
ui-v2/app/components/consul-service-instance-list/index.hbs
View File

@ -6,27 +6,37 @@
</a> </a>
</BlockSlot> </BlockSlot>
<BlockSlot @name="details"> <BlockSlot @name="details">
<ul> <ConsulExternalSource @item={{item.Service}} />
<ConsulExternalSource @item={{item.Service}} as |ExternalSource|>
<li>
<ExternalSource />
</li>
</ConsulExternalSource>
{{#let (reject-by 'ServiceID' '' item.Checks) as |checks|}} {{#let (reject-by 'ServiceID' '' item.Checks) as |checks|}}
{{#let (service/instance-checks checks) as |serviceCheck| }} {{#let (service/instance-checks checks) as |serviceCheck| }}
{{#if (eq serviceCheck.check 'empty') }} {{#if (eq serviceCheck.check 'empty') }}
<li class={{serviceCheck.check}}> <dl class={{serviceCheck.check}}>
No service checks <dt>
</li> <Tooltip>
Service Checks
</Tooltip>
</dt>
<dd>No service checks</dd>
</dl>
{{else}} {{else}}
{{#if (eq serviceCheck.count checks.length)}} {{#if (eq serviceCheck.count checks.length)}}
<li class={{serviceCheck.check}}> <dl class={{serviceCheck.check}}>
All service checks {{serviceCheck.status}} <dt>
</li> <Tooltip>
Service Checks
</Tooltip>
</dt>
<dd>All service checks {{serviceCheck.status}}</dd>
</dl>
{{else}} {{else}}
<li class={{serviceCheck.check}}> <dl class={{serviceCheck.check}}>
{{serviceCheck.count}}/{{checks.length}} service checks {{serviceCheck.status}} <dt>
</li> <Tooltip>
Service Checks
</Tooltip>
</dt>
<dd>{{serviceCheck.count}}/{{checks.length}} service checks {{serviceCheck.status}}</dd>
</dl>
{{/if}} {{/if}}
{{/if}} {{/if}}
{{/let}} {{/let}}
@ -34,45 +44,76 @@
{{#let (filter-by 'ServiceID' '' item.Checks) as |checks|}} {{#let (filter-by 'ServiceID' '' item.Checks) as |checks|}}
{{#let (service/instance-checks checks) as |nodeCheck| }} {{#let (service/instance-checks checks) as |nodeCheck| }}
{{#if (eq nodeCheck.check 'empty') }} {{#if (eq nodeCheck.check 'empty') }}
<li class={{nodeCheck.check}}> <dl class={{nodeCheck.check}}>
No node checks <dt>
</li> <Tooltip>
Node Checks
</Tooltip>
</dt>
<dd>No node checks</dd>
</dl>
{{else}} {{else}}
{{#if (eq nodeCheck.count checks.length)}} {{#if (eq nodeCheck.count checks.length)}}
<li class={{nodeCheck.check}}> <dl class={{nodeCheck.check}}>
All node checks {{nodeCheck.status}} <dt>
</li> <Tooltip>
Node Checks
</Tooltip>
</dt>
<dd>All node checks {{nodeCheck.status}}</dd>
</dl>
{{else}} {{else}}
<li class={{nodeCheck.check}}> <dl class={{nodeCheck.check}}>
{{nodeCheck.count}}/{{checks.length}} node checks {{nodeCheck.status}} <dt>
</li> <Tooltip>
Node Checks
</Tooltip>
</dt>
<dd>{{nodeCheck.count}}/{{checks.length}} node checks {{nodeCheck.status}}</dd>
</dl>
{{/if}} {{/if}}
{{/if}} {{/if}}
{{/let}} {{/let}}
{{/let}} {{/let}}
{{#if (get proxies item.Service.ID)}} {{#if (get proxies item.Service.ID)}}
<li class="proxy"> <dl class="proxy">
<dt>
<Tooltip>
Proxy
</Tooltip>
</dt>
<dd data-test-proxy>
connected with proxy connected with proxy
</li> </dd>
{{/if}} </dl>
{{#if (gt item.Node.Node.length 0)}} {{/if}}
<li class="node"> {{#if (gt item.Node.Node.length 0)}}
<dl class="node">
<dt>
<Tooltip>
Node
</Tooltip>
</dt>
<dd>
<a href={{href-to 'dc.nodes.show' item.Node.Node}}>{{item.Node.Node}}</a> <a href={{href-to 'dc.nodes.show' item.Node.Node}}>{{item.Node.Node}}</a>
</li> </dd>
{{/if}} </dl>
<li class="address" data-test-address> {{/if}}
<dl class="address" data-test-address>
<dt>
<Tooltip>
IP Address and Port
</Tooltip>
</dt>
<dd>
{{#if (not-eq item.Service.Address '')}} {{#if (not-eq item.Service.Address '')}}
{{item.Service.Address}}:{{item.Service.Port}} {{item.Service.Address}}:{{item.Service.Port}}
{{else}} {{else}}
{{item.Node.Address}}:{{item.Service.Port}} {{item.Node.Address}}:{{item.Service.Port}}
{{/if}} {{/if}}
</li> </dd>
<TagList @item={{item.Service}} as |Tags|> </dl>
<li> <TagList @item={{item.Service}} />
<Tags />
</li>
</TagList>
</ul>
</BlockSlot> </BlockSlot>
</ListCollection> </ListCollection>
{{/if}} {{/if}}

69
ui-v2/app/components/consul-service-list/index.hbs
View File

@ -4,6 +4,9 @@
{{#let (get proxies item.Name) as |proxy|}} {{#let (get proxies item.Name) as |proxy|}}
{{#let (service/health-checks item proxy) as |health|}} {{#let (service/health-checks item proxy) as |health|}}
<dl class={{health}}> <dl class={{health}}>
<dt>
Health
</dt>
<dd> <dd>
<Tooltip @position="top-start"> <Tooltip @position="top-start">
{{#if (eq 'critical' health)}} {{#if (eq 'critical' health)}}
@ -35,40 +38,40 @@
{{/if}} {{/if}}
</BlockSlot> </BlockSlot>
<BlockSlot @name="details"> <BlockSlot @name="details">
<ul> {{#if (and nspace (env 'CONSUL_NSPACES_ENABLED'))}}
{{#if (and nspace (env 'CONSUL_NSPACES_ENABLED'))}} {{#if (not-eq item.Namespace nspace)}}
{{#if (not-eq item.Namespace nspace)}} <dl class="nspace">
<li class="nspace"> <dt>
{{item.Namespace}} <Tooltip>
</li> Namespace
{{/if}} </Tooltip>
{{/if}} </dt>
<ConsulKind @item={{item}} as |Kind|> <dd>
<li> {{item.Namespace}}
<Kind /> </dd>
</li> </dl>
</ConsulKind> {{/if}}
<ConsulExternalSource @item={{item}} as |ExternalSource|> {{/if}}
<li> <ConsulKind @item={{item}} />
<ExternalSource /> <ConsulExternalSource @item={{item}} />
</li> {{#if (not-eq item.InstanceCount 0)}}
</ConsulExternalSource> <span>
{{#if (not-eq item.InstanceCount 0)}} {{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}}
<li> </span>
{{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}} {{/if}}
</li> {{#if (get proxies item.Name)}}
{{/if}} <dl class="proxy">
{{#if (get proxies item.Name)}} <dt>
<li data-test-proxy class="proxy"> <Tooltip>
This service uses a proxy for the Consul service mesh
</Tooltip>
</dt>
<dd data-test-proxy>
connected with proxy connected with proxy
</li> </dd>
{{/if}} </dl>
<TagList @item={{item}} as |Tags|> {{/if}}
<li> <TagList @item={{item}} />
<Tags />
</li>
</TagList>
</ul>
</BlockSlot> </BlockSlot>
</ListCollection> </ListCollection>
{{/if}} {{/if}}

6
ui-v2/app/components/tag-list/index.hbs
View File

@ -5,7 +5,11 @@
}} }}
{{else}} {{else}}
<dl class="tag-list"> <dl class="tag-list">
<dt>Tags</dt> <dt>
<Tooltip>
Tags
</Tooltip>
</dt>
<dd data-test-tags> <dd data-test-tags>
{{#each item.Tags as |item|}} {{#each item.Tags as |item|}}
<span>{{item}}</span> <span>{{item}}</span>

3
ui-v2/app/styles/base/components/pill/layout.scss
View File

@ -15,9 +15,7 @@
background-color: $gray-100; background-color: $gray-100;
padding: 0 8px; padding: 0 8px;
border-radius: $decor-radius-100; border-radius: $decor-radius-100;
height: 18px;
display: inline-block; display: inline-block;
line-height: 0.7rem;
} }
%reduced-pill > span { %reduced-pill > span {
font-size: 14px; font-size: 14px;
@ -30,5 +28,4 @@
height: 14px; height: 14px;
margin-right: 2px; margin-right: 2px;
position: relative; position: relative;
top: 2px;
} }

14
ui-v2/app/styles/components/composite-row/layout.scss
View File

@ -56,21 +56,15 @@
flex-wrap: nowrap; flex-wrap: nowrap;
} }
%composite-row-detail dl, %composite-row-detail dl,
%composite-row-detail > ul > li { %composite-row-detail > span {
margin-right: 12px; margin-right: 12px;
} }
%composite-row-detail .node::before, %composite-row-detail dl.node dt::before {
%composite-row-detail .tag-list::before { margin-top: 3px;
position: relative;
}
%composite-row-detail .node::before {
top: 1px;
}
%composite-row-detail .tag-list::before {
top: 2px;
} }
%composite-row-detail dl dt::before { %composite-row-detail dl dt::before {
margin-right: 4px; margin-right: 4px;
margin-top: 2px;
} }
// Copy Button // Copy Button
%composite-row .copy-button button { %composite-row .copy-button button {

14
ui-v2/app/styles/components/composite-row/skin.scss
View File

@ -41,22 +41,22 @@
background-color: var(--brand-600); background-color: var(--brand-600);
} }
// Health Checks // Health Checks
%composite-row-detail li.passing::before, %composite-row-detail dl.passing dt::before,
%composite-row-header .passing dd::before { %composite-row-header .passing dd::before {
@extend %with-check-circle-fill-color-mask, %as-pseudo; @extend %with-check-circle-fill-color-mask, %as-pseudo;
background-color: $green-500; background-color: $green-500;
} }
%composite-row-detail li.warning::before, %composite-row-detail dl.warning dt::before,
%composite-row-header .warning dd::before { %composite-row-header .warning dd::before {
@extend %with-alert-triangle-color-mask, %as-pseudo; @extend %with-alert-triangle-color-mask, %as-pseudo;
background-color: $orange-500; background-color: $orange-500;
} }
%composite-row-detail li.critical::before, %composite-row-detail dl.critical dt::before,
%composite-row-header .critical dd::before { %composite-row-header .critical dd::before {
@extend %with-cancel-square-fill-color-mask, %as-pseudo; @extend %with-cancel-square-fill-color-mask, %as-pseudo;
background-color: $red-500; background-color: $red-500;
} }
%composite-row-detail li.empty::before, %composite-row-detail dl.empty dt::before,
%composite-row-header .empty dd::before { %composite-row-header .empty dd::before {
@extend %with-minus-square-fill-color-mask, %as-pseudo; @extend %with-minus-square-fill-color-mask, %as-pseudo;
background-color: $gray-500; background-color: $gray-500;
@ -74,15 +74,15 @@
color: $color-action; color: $color-action;
text-decoration: underline; text-decoration: underline;
} }
%composite-row .node::before { %composite-row dl.node dt::before {
@extend %with-git-commit-mask, %as-pseudo; @extend %with-git-commit-mask, %as-pseudo;
background-color: $gray-500; background-color: $gray-500;
} }
%composite-row .address::before { %composite-row dl.address dt::before {
@extend %with-public-default-mask, %as-pseudo; @extend %with-public-default-mask, %as-pseudo;
background-color: $gray-500; background-color: $gray-500;
} }
%composite-row .proxy::before { %composite-row dl.proxy dt::before {
@extend %with-swap-horizontal-mask, %as-pseudo; @extend %with-swap-horizontal-mask, %as-pseudo;
background-color: $gray-500; background-color: $gray-500;
} }

1
ui-v2/app/styles/components/pill.scss
View File

@ -13,6 +13,7 @@ span.policy-service-identity::before,
span.policy-node-identity::before { span.policy-node-identity::before {
display: inline-block; display: inline-block;
width: auto; width: auto;
vertical-align: baseline;
} }
span.policy-node-identity::before { span.policy-node-identity::before {
content: 'Node Identity: '; content: 'Node Identity: ';

5
ui-v2/app/styles/components/tag-list/layout.scss
View File

@ -1,14 +1,11 @@
%tag-list { %tag-list {
white-space: nowrap; white-space: nowrap;
} }
%tag-list dt {
display: none;
}
// TODO: Currently this is here to overwrite // TODO: Currently this is here to overwrite
// the default definition list layout used in edit pages // the default definition list layout used in edit pages
// ideally we'd be more specific with those to say // ideally we'd be more specific with those to say
// only add padding to dl's in edit pages // only add padding to dl's in edit pages
%tag-list::before { %tag-list dt::before {
@extend %with-tag-mask, %as-pseudo; @extend %with-tag-mask, %as-pseudo;
margin-right: 4px; margin-right: 4px;
} }