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>
</BlockSlot>
<BlockSlot @name="details">
<ul>
<ConsulExternalSource @item={{item.Service}} as |ExternalSource|>
<li>
<ExternalSource />
</li>
</ConsulExternalSource>
<ConsulExternalSource @item={{item.Service}} />
{{#let (reject-by 'ServiceID' '' item.Checks) as |checks|}}
{{#let (service/instance-checks checks) as |serviceCheck| }}
{{#if (eq serviceCheck.check 'empty') }}
<li class={{serviceCheck.check}}>
No service checks
</li>
<dl class={{serviceCheck.check}}>
<dt>
<Tooltip>
Service Checks
</Tooltip>
</dt>
<dd>No service checks</dd>
</dl>
{{else}}
{{#if (eq serviceCheck.count checks.length)}}
<li class={{serviceCheck.check}}>
All service checks {{serviceCheck.status}}
</li>
<dl class={{serviceCheck.check}}>
<dt>
<Tooltip>
Service Checks
</Tooltip>
</dt>
<dd>All service checks {{serviceCheck.status}}</dd>
</dl>
{{else}}
<li class={{serviceCheck.check}}>
{{serviceCheck.count}}/{{checks.length}} service checks {{serviceCheck.status}}
</li>
<dl class={{serviceCheck.check}}>
<dt>
<Tooltip>
Service Checks
</Tooltip>
</dt>
<dd>{{serviceCheck.count}}/{{checks.length}} service checks {{serviceCheck.status}}</dd>
</dl>
{{/if}}
{{/if}}
{{/let}}
@ -34,45 +44,76 @@
{{#let (filter-by 'ServiceID' '' item.Checks) as |checks|}}
{{#let (service/instance-checks checks) as |nodeCheck| }}
{{#if (eq nodeCheck.check 'empty') }}
<li class={{nodeCheck.check}}>
No node checks
</li>
<dl class={{nodeCheck.check}}>
<dt>
<Tooltip>
Node Checks
</Tooltip>
</dt>
<dd>No node checks</dd>
</dl>
{{else}}
{{#if (eq nodeCheck.count checks.length)}}
<li class={{nodeCheck.check}}>
All node checks {{nodeCheck.status}}
</li>
<dl class={{nodeCheck.check}}>
<dt>
<Tooltip>
Node Checks
</Tooltip>
</dt>
<dd>All node checks {{nodeCheck.status}}</dd>
</dl>
{{else}}
<li class={{nodeCheck.check}}>
{{nodeCheck.count}}/{{checks.length}} node checks {{nodeCheck.status}}
</li>
<dl class={{nodeCheck.check}}>
<dt>
<Tooltip>
Node Checks
</Tooltip>
</dt>
<dd>{{nodeCheck.count}}/{{checks.length}} node checks {{nodeCheck.status}}</dd>
</dl>
{{/if}}
{{/if}}
{{/let}}
{{/let}}
{{#if (get proxies item.Service.ID)}}
<li class="proxy">
{{#if (get proxies item.Service.ID)}}
<dl class="proxy">
<dt>
<Tooltip>
Proxy
</Tooltip>
</dt>
<dd data-test-proxy>
connected with proxy
</li>
{{/if}}
{{#if (gt item.Node.Node.length 0)}}
<li class="node">
</dd>
</dl>
{{/if}}
{{#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>
</li>
{{/if}}
<li class="address" data-test-address>
</dd>
</dl>
{{/if}}
<dl class="address" data-test-address>
<dt>
<Tooltip>
IP Address and Port
</Tooltip>
</dt>
<dd>
{{#if (not-eq item.Service.Address '')}}
{{item.Service.Address}}:{{item.Service.Port}}
{{else}}
{{item.Node.Address}}:{{item.Service.Port}}
{{/if}}
</li>
<TagList @item={{item.Service}} as |Tags|>
<li>
<Tags />
</li>
</TagList>
</ul>
</dd>
</dl>
<TagList @item={{item.Service}} />
</BlockSlot>
</ListCollection>
{{/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 (service/health-checks item proxy) as |health|}}
<dl class={{health}}>
<dt>
Health
</dt>
<dd>
<Tooltip @position="top-start">
{{#if (eq 'critical' health)}}
@ -35,40 +38,40 @@
{{/if}}
</BlockSlot>
<BlockSlot @name="details">
<ul>
{{#if (and nspace (env 'CONSUL_NSPACES_ENABLED'))}}
{{#if (not-eq item.Namespace nspace)}}
<li class="nspace">
{{item.Namespace}}
</li>
{{/if}}
{{/if}}
<ConsulKind @item={{item}} as |Kind|>
<li>
<Kind />
</li>
</ConsulKind>
<ConsulExternalSource @item={{item}} as |ExternalSource|>
<li>
<ExternalSource />
</li>
</ConsulExternalSource>
{{#if (not-eq item.InstanceCount 0)}}
<li>
{{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}}
</li>
{{/if}}
{{#if (get proxies item.Name)}}
<li data-test-proxy class="proxy">
{{#if (and nspace (env 'CONSUL_NSPACES_ENABLED'))}}
{{#if (not-eq item.Namespace nspace)}}
<dl class="nspace">
<dt>
<Tooltip>
Namespace
</Tooltip>
</dt>
<dd>
{{item.Namespace}}
</dd>
</dl>
{{/if}}
{{/if}}
<ConsulKind @item={{item}} />
<ConsulExternalSource @item={{item}} />
{{#if (not-eq item.InstanceCount 0)}}
<span>
{{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}}
</span>
{{/if}}
{{#if (get proxies item.Name)}}
<dl class="proxy">
<dt>
<Tooltip>
This service uses a proxy for the Consul service mesh
</Tooltip>
</dt>
<dd data-test-proxy>
connected with proxy
</li>
{{/if}}
<TagList @item={{item}} as |Tags|>
<li>
<Tags />
</li>
</TagList>
</ul>
</dd>
</dl>
{{/if}}
<TagList @item={{item}} />
</BlockSlot>
</ListCollection>
{{/if}}

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

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

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

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

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

@ -56,21 +56,15 @@
flex-wrap: nowrap;
}
%composite-row-detail dl,
%composite-row-detail > ul > li {
%composite-row-detail > span {
margin-right: 12px;
}
%composite-row-detail .node::before,
%composite-row-detail .tag-list::before {
position: relative;
}
%composite-row-detail .node::before {
top: 1px;
}
%composite-row-detail .tag-list::before {
top: 2px;
%composite-row-detail dl.node dt::before {
margin-top: 3px;
}
%composite-row-detail dl dt::before {
margin-right: 4px;
margin-top: 2px;
}
// Copy 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);
}
// Health Checks
%composite-row-detail li.passing::before,
%composite-row-detail dl.passing dt::before,
%composite-row-header .passing dd::before {
@extend %with-check-circle-fill-color-mask, %as-pseudo;
background-color: $green-500;
}
%composite-row-detail li.warning::before,
%composite-row-detail dl.warning dt::before,
%composite-row-header .warning dd::before {
@extend %with-alert-triangle-color-mask, %as-pseudo;
background-color: $orange-500;
}
%composite-row-detail li.critical::before,
%composite-row-detail dl.critical dt::before,
%composite-row-header .critical dd::before {
@extend %with-cancel-square-fill-color-mask, %as-pseudo;
background-color: $red-500;
}
%composite-row-detail li.empty::before,
%composite-row-detail dl.empty dt::before,
%composite-row-header .empty dd::before {
@extend %with-minus-square-fill-color-mask, %as-pseudo;
background-color: $gray-500;
@ -74,15 +74,15 @@
color: $color-action;
text-decoration: underline;
}
%composite-row .node::before {
%composite-row dl.node dt::before {
@extend %with-git-commit-mask, %as-pseudo;
background-color: $gray-500;
}
%composite-row .address::before {
%composite-row dl.address dt::before {
@extend %with-public-default-mask, %as-pseudo;
background-color: $gray-500;
}
%composite-row .proxy::before {
%composite-row dl.proxy dt::before {
@extend %with-swap-horizontal-mask, %as-pseudo;
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 {
display: inline-block;
width: auto;
vertical-align: baseline;
}
span.policy-node-identity::before {
content: 'Node Identity: ';

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

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