luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages 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 8c601ad8db
commit 15deb4bda1
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

102
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}} <dl class="protocol">
<li class="protocol"> <dt>
<span> <Tooltip>
<Tooltip> Protocol
Protocol </Tooltip>
</Tooltip> </dt>
</span> <dd>
<span> {{path.Protocol}}
{{path.Protocol}} </dd>
</span> </dl>
</li> {{/if}}
{{/if}} {{#if path.ListenerPort}}
{{#if path.ListenerPort}} <dl class="port">
<li class="port"> <dt>
<span> <Tooltip>
<Tooltip> Port
Port </Tooltip>
</Tooltip> </dt>
</span> <dd>
<span> listening on :{{path.ListenerPort}}
listening on :{{path.ListenerPort}} </dd>
</span> </dl>
</li> {{/if}}
{{/if}} {{#if path.LocalPathPort}}
{{#if path.LocalPathPort}} <dl class="port">
<li class="port"> <dt>
<span> <Tooltip>
<Tooltip> Port
Port </Tooltip>
</Tooltip> </dt>
</span> <dd>
<span> local port :{{path.LocalPathPort}}
local port :{{path.LocalPathPort}} </dd>
</span> </dl>
</li> {{/if}}
{{/if}} {{#if path.Path}}
{{#if path.Path}} <dl class="path">
<li class="path"> <dt>
<span> <Tooltip>
<Tooltip> Path
Path </Tooltip>
</Tooltip> </dt>
</span> <dd>
<span> {{path.Path}}
{{path.Path}} </dd>
</span> </dl>
</li> {{/if}}
{{/if}}
</ul>
</div> </div>
</li> </li>
{{/each}} {{/each}}

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

@ -1,59 +1,50 @@
<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>
{{item.DestinationName}} {{item.DestinationName}}
</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')}} <dl class="nspace">
<li class="nspace"> <dt>
<span> <Tooltip>
<Tooltip> Namespace
Namespace </Tooltip>
</Tooltip> </dt>
</span> <dd>
<span> {{or item.DestinationNamespace 'default'}}
{{or item.DestinationNamespace 'default'}} </dd>
</span> </dl>
</li> {{/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 ""))}} <dl class="datacenter">
<li class="datacenter"> <dt>
<span> <Tooltip>
<Tooltip> Datacenter
Datacenter </Tooltip>
</Tooltip> </dt>
</span> <dd>
<span> {{item.Datacenter}}
{{item.Datacenter}} </dd>
</span> </dl>
</li> {{/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|}} <dl class="port">
<li class="port"> <CopyButton
<span> @value={{combinedAddress}}
<Tooltip> @name="Address"
Address />
</Tooltip> <dd>{{combinedAddress}}</dd>
</span> </dl>
<span> {{/let}}
<span>{{combinedAddress}}</span> {{/if}}
<CopyButton </div>
@value={{combinedAddress}} </li>
@name="Address" {{/each}}
/>
</span>
</li>
{{/let}}
{{/if}}
</ul>
</div>
</li>
{{/each}}
</ul> </ul>

57
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))}} <dl class="nspace">
<li class="nspace"> <dt>
<span> <Tooltip>
<Tooltip> Namespace
Namespace </Tooltip>
</Tooltip> </dt>
</span> <dd>
<span> {{item.Namespace}}
{{item.Namespace}} </dd>
</span> </dl>
</li> {{/if}}
{{/if}} {{#if (not-eq item.GatewayConfig.ListenerPort 0)}}
{{#if (not-eq item.GatewayConfig.ListenerPort 0)}} <dl class="port">
<li class="port"> <CopyButton
<span> @value={{item.GatewayConfig.ListenerPort}}
<Tooltip> @name="Port"
Port />
</Tooltip> <dd>:{{item.GatewayConfig.ListenerPort}}</dd>
</span> </dl>
<span> {{/if}}
<span>:{{item.GatewayConfig.ListenerPort}}</span>
<CopyButton
@value={{item.GatewayConfig.ListenerPort}}
@name="Port"
/>
</span>
</li>
{{/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;
} }