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

ui: Refactor Upstreams and Exposed Paths icons (#8139) 

* Update Ports to have copy-button to the left

* Update exposed paths use a description list
This commit is contained in:
Kenia 2020-06-18 09:23:42 -04:00 committed by GitHub
parent 51c3a605ad
commit 191f0966a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 140 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
ui-v2/app/components/consul-exposed-path-list/index.hbs
View File

@ -2,7 +2,7 @@
{{#each items as |path|}} {{#each items as |path|}}
<li> <li>
<div> <div>
{{#let (concat address ':' path.Path) as |combinedAddress|}} {{#let (concat address ':' path.Path) as |combinedAddress|}}
<p class="combined-address"> <p class="combined-address">
<span> <span>
{{combinedAddress}} {{combinedAddress}}
@ -12,59 +12,57 @@
@name="Address" @name="Address"
/> />
</p> </p>
{{/let}} {{/let}}
</div> </div>
<div> <div>
<ul>
{{#if path.Protocol}} {{#if path.Protocol}}
<li class="protocol"> <dl class="protocol">
<span> <dt>
<Tooltip> <Tooltip>
Protocol Protocol
</Tooltip> </Tooltip>
</span> </dt>
<span> <dd>
{{path.Protocol}} {{path.Protocol}}
</span> </dd>
</li> </dl>
{{/if}} {{/if}}
{{#if path.ListenerPort}} {{#if path.ListenerPort}}
<li class="port"> <dl class="port">
<span> <dt>
<Tooltip> <Tooltip>
Port Port
</Tooltip> </Tooltip>
</span> </dt>
<span> <dd>
listening on :{{path.ListenerPort}} listening on :{{path.ListenerPort}}
</span> </dd>
</li> </dl>
{{/if}} {{/if}}
{{#if path.LocalPathPort}} {{#if path.LocalPathPort}}
<li class="port"> <dl class="port">
<span> <dt>
<Tooltip> <Tooltip>
Port Port
</Tooltip> </Tooltip>
</span> </dt>
<span> <dd>
local port :{{path.LocalPathPort}} local port :{{path.LocalPathPort}}
</span> </dd>
</li> </dl>
{{/if}} {{/if}}
{{#if path.Path}} {{#if path.Path}}
<li class="path"> <dl class="path">
<span> <dt>
<Tooltip> <Tooltip>
Path Path
</Tooltip> </Tooltip>
</span> </dt>
<span> <dd>
{{path.Path}} {{path.Path}}
</span> </dd>
</li> </dl>
{{/if}} {{/if}}
</ul>
</div> </div>
</li> </li>
{{/each}} {{/each}}

55
ui-v2/app/components/consul-upstream-instance-list/index.hbs
View File

@ -1,5 +1,5 @@
<ul data-test-proxy-upstreams> <ul data-test-proxy-upstreams>
{{#each items as |item|}} {{#each items as |item|}}
<li> <li>
<div> <div>
<p data-test-destination-name> <p data-test-destination-name>
@ -7,53 +7,44 @@
</p> </p>
</div> </div>
<div> <div>
<ul> {{#if (env 'CONSUL_NSPACES_ENABLED')}}
{{#if (env 'CONSUL_NSPACES_ENABLED')}}
{{#if (not-eq item.DestinationType 'prepared_query')}} {{#if (not-eq item.DestinationType 'prepared_query')}}
<li class="nspace"> <dl class="nspace">
<span> <dt>
<Tooltip> <Tooltip>
Namespace Namespace
</Tooltip> </Tooltip>
</span> </dt>
<span> <dd>
{{or item.DestinationNamespace 'default'}} {{or item.DestinationNamespace 'default'}}
</span> </dd>
</li> </dl>
{{/if}} {{/if}}
{{/if}} {{/if}}
{{#if (and (not-eq item.Datacenter dc) (not-eq item.Datacenter ""))}} {{#if (and (not-eq item.Datacenter dc) (not-eq item.Datacenter ""))}}
<li class="datacenter"> <dl class="datacenter">
<span> <dt>
<Tooltip> <Tooltip>
Datacenter Datacenter
</Tooltip> </Tooltip>
</span> </dt>
<span> <dd>
{{item.Datacenter}} {{item.Datacenter}}
</span> </dd>
</li> </dl>
{{/if}} {{/if}}
{{#if (gt item.LocalBindPort 0)}} {{#if (gt item.LocalBindPort 0)}}
{{#let (concat (or item.LocalBindAddress '127.0.0.1') ':' item.LocalBindPort) as |combinedAddress|}} {{#let (concat (or item.LocalBindAddress '127.0.0.1') ':' item.LocalBindPort) as |combinedAddress|}}
<li class="port"> <dl class="port">
<span>
<Tooltip>
Address
</Tooltip>
</span>
<span>
<span>{{combinedAddress}}</span>
<CopyButton <CopyButton
@value={{combinedAddress}} @value={{combinedAddress}}
@name="Address" @name="Address"
/> />
</span> <dd>{{combinedAddress}}</dd>
</li> </dl>
{{/let}} {{/let}}
{{/if}} {{/if}}
</ul>
</div> </div>
</li> </li>
{{/each}} {{/each}}
</ul> </ul>

33
ui-v2/app/components/consul-upstream-list/index.hbs
View File

@ -1,6 +1,6 @@
<ListCollection @items={{items}} class="consul-upstream-list" as |item index|> <ListCollection @items={{items}} class="consul-upstream-list" as |item index|>
<BlockSlot @name="header"> <BlockSlot @name="header">
{{#if (service/exists item)}} {{#if (service/exists item)}}
<dl class={{service/health-checks item}}> <dl class={{service/health-checks item}}>
<dt> <dt>
Health Health
@ -28,42 +28,33 @@
{{item.Name}} {{item.Name}}
</a> </a>
{{/if}} {{/if}}
{{else}} {{else}}
<p data-test-service-name> <p data-test-service-name>
{{item.Name}} {{item.Name}}
</p> </p>
{{/if}} {{/if}}
</BlockSlot> </BlockSlot>
<BlockSlot @name="details"> <BlockSlot @name="details">
<ul>
{{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace nspace))}} {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace nspace))}}
<li class="nspace"> <dl class="nspace">
<span> <dt>
<Tooltip> <Tooltip>
Namespace Namespace
</Tooltip> </Tooltip>
</span> </dt>
<span> <dd>
{{item.Namespace}} {{item.Namespace}}
</span> </dd>
</li> </dl>
{{/if}} {{/if}}
{{#if (not-eq item.GatewayConfig.ListenerPort 0)}} {{#if (not-eq item.GatewayConfig.ListenerPort 0)}}
<li class="port"> <dl class="port">
<span>
<Tooltip>
Port
</Tooltip>
</span>
<span>
<span>:{{item.GatewayConfig.ListenerPort}}</span>
<CopyButton <CopyButton
@value={{item.GatewayConfig.ListenerPort}} @value={{item.GatewayConfig.ListenerPort}}
@name="Port" @name="Port"
/> />
</span> <dd>:{{item.GatewayConfig.ListenerPort}}</dd>
</li> </dl>
{{/if}} {{/if}}
</ul>
</BlockSlot> </BlockSlot>
</ListCollection> </ListCollection>

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

@ -29,7 +29,7 @@
align-self: center; align-self: center;
} }
%composite-row-icon { %composite-row-icon {
margin-right: 10px; margin-right: 6px;
} }
%composite-row-icon dt { %composite-row-icon dt {
display: none; display: none;
@ -50,15 +50,12 @@
display: inline-flex; display: inline-flex;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
%composite-row-detail dt {
display: none;
}
%composite-row-header *, %composite-row-header *,
%composite-row-detail * { %composite-row-detail * {
white-space: nowrap; white-space: nowrap;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
%composite-row-detail > dl, %composite-row-detail dl,
%composite-row-detail > ul > li { %composite-row-detail > ul > li {
margin-right: 12px; margin-right: 12px;
} }
@ -72,13 +69,18 @@
%composite-row-detail .tag-list::before { %composite-row-detail .tag-list::before {
top: 2px; top: 2px;
} }
%composite-row-detail dl dt::before {
margin-right: 4px;
}
// Copy Button // Copy Button
%composite-row .copy-button button { %composite-row .copy-button button {
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
} }
%composite-row .copy-button { %composite-row-detail .copy-button {
margin-right: 4px;
}
%composite-row-header .copy-button {
margin-left: 4px; margin-left: 4px;
} }
%composite-row .copy-button { %composite-row .copy-button {
@ -86,11 +88,9 @@
} }
/* buttons need to be displayed in order for the tooltip */ /* buttons need to be displayed in order for the tooltip */
/* to track them */ /* to track them */
%composite-row-header .copy-button button, %composite-row-header .copy-button button {
%composite-row-detail .copy-button button {
opacity: 0; opacity: 0;
} }
%composite-row-header:hover .copy-button button, %composite-row-header:hover .copy-button button {
%composite-row-detail:hover .copy-button button {
opacity: 1; opacity: 1;
} }

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

@ -83,23 +83,23 @@
@extend %with-swap-horizontal-mask, %as-pseudo; @extend %with-swap-horizontal-mask, %as-pseudo;
background-color: $gray-500; background-color: $gray-500;
} }
%composite-row li.datacenter > span:first-child::before { %composite-row-detail dl.nspace dt::before {
@extend %with-user-organization-mask, %as-pseudo;
background-color: $gray-500;
}
%composite-row-detail li.nspace > span:first-child::before {
@extend %with-folder-outline-mask, %as-pseudo; @extend %with-folder-outline-mask, %as-pseudo;
background-color: $gray-500; background-color: $gray-500;
} }
%composite-row-detail li.path > span:first-child::before { %composite-row-detail dl.datacenter dt::before {
@extend %with-user-organization-mask, %as-pseudo;
background-color: $gray-500;
}
%composite-row-detail dl.path dt::before {
@extend %with-path-mask, %as-pseudo; @extend %with-path-mask, %as-pseudo;
background-color: $gray-500; background-color: $gray-500;
} }
%composite-row-detail li.port > span:first-child::before { %composite-row-detail dl.port dt::before {
@extend %with-port-mask, %as-pseudo; @extend %with-port-mask, %as-pseudo;
background-color: $gray-500; background-color: $gray-500;
} }
%composite-row-detail li.protocol > span:first-child::before { %composite-row-detail dl.protocol dt::before {
@extend %with-protocol-mask, %as-pseudo; @extend %with-protocol-mask, %as-pseudo;
background-color: $gray-500; background-color: $gray-500;
} }