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

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

Browse source 
* 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

50
ui-v2/app/components/consul-exposed-path-list/index.hbs
View file

@ -15,56 +15,54 @@
{{/let}}
</div>
<div>
<ul>
{{#if path.Protocol}}
<li class="protocol">
<span>
<dl class="protocol">
<dt>
<Tooltip>
Protocol
</Tooltip>
</span>
<span>
</dt>
<dd>
{{path.Protocol}}
</span>
</li>
</dd>
</dl>
{{/if}}
{{#if path.ListenerPort}}
<li class="port">
<span>
<dl class="port">
<dt>
<Tooltip>
Port
</Tooltip>
</span>
<span>
</dt>
<dd>
listening on :{{path.ListenerPort}}
</span>
</li>
</dd>
</dl>
{{/if}}
{{#if path.LocalPathPort}}
<li class="port">
<span>
<dl class="port">
<dt>
<Tooltip>
Port
</Tooltip>
</span>
<span>
</dt>
<dd>
local port :{{path.LocalPathPort}}
</span>
</li>
</dd>
</dl>
{{/if}}
{{#if path.Path}}
<li class="path">
<span>
<dl class="path">
<dt>
<Tooltip>
Path
</Tooltip>
</span>
<span>
</dt>
<dd>
{{path.Path}}
</span>
</li>
</dd>
</dl>
{{/if}}
</ul>
</div>
</li>
{{/each}}

39
ui-v2/app/components/consul-upstream-instance-list/index.hbs
View file

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

27
ui-v2/app/components/consul-upstream-list/index.hbs
View file

@ -35,35 +35,26 @@
{{/if}}
</BlockSlot>
<BlockSlot @name="details">
<ul>
{{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace nspace))}}
<li class="nspace">
<span>
<dl class="nspace">
<dt>
<Tooltip>
Namespace
</Tooltip>
</span>
<span>
</dt>
<dd>
{{item.Namespace}}
</span>
</li>
</dd>
</dl>
{{/if}}
{{#if (not-eq item.GatewayConfig.ListenerPort 0)}}
<li class="port">
<span>
<Tooltip>
Port
</Tooltip>
</span>
<span>
<span>:{{item.GatewayConfig.ListenerPort}}</span>
<dl class="port">
<CopyButton
@value={{item.GatewayConfig.ListenerPort}}
@name="Port"
/>
</span>
</li>
<dd>:{{item.GatewayConfig.ListenerPort}}</dd>
</dl>
{{/if}}
</ul>
</BlockSlot>
</ListCollection>

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

@ -29,7 +29,7 @@
align-self: center;
}
%composite-row-icon {
margin-right: 10px;
margin-right: 6px;
}
%composite-row-icon dt {
display: none;
@ -50,15 +50,12 @@
display: inline-flex;
flex-wrap: nowrap;
}
%composite-row-detail dt {
display: none;
}
%composite-row-header *,
%composite-row-detail * {
white-space: nowrap;
flex-wrap: nowrap;
}
%composite-row-detail > dl,
%composite-row-detail dl,
%composite-row-detail > ul > li {
margin-right: 12px;
}
@ -72,13 +69,18 @@
%composite-row-detail .tag-list::before {
top: 2px;
}
%composite-row-detail dl dt::before {
margin-right: 4px;
}
// Copy Button
%composite-row .copy-button button {
padding: 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;
}
%composite-row .copy-button {
@ -86,11 +88,9 @@
}
/* buttons need to be displayed in order for the tooltip */
/* to track them */
%composite-row-header .copy-button button,
%composite-row-detail .copy-button button {
%composite-row-header .copy-button button {
opacity: 0;
}
%composite-row-header:hover .copy-button button,
%composite-row-detail:hover .copy-button button {
%composite-row-header:hover .copy-button button {
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;
background-color: $gray-500;
}
%composite-row li.datacenter > span:first-child::before {
@extend %with-user-organization-mask, %as-pseudo;
background-color: $gray-500;
}
%composite-row-detail li.nspace > span:first-child::before {
%composite-row-detail dl.nspace dt::before {
@extend %with-folder-outline-mask, %as-pseudo;
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;
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;
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;
background-color: $gray-500;
}