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
GitHub
parent
8c601ad8db
commit
15deb4bda1
|
|
@ -2,7 +2,7 @@
|
|||
{{#each items as |path|}}
|
||||
<li>
|
||||
<div>
|
||||
{{#let (concat address ':' path.Path) as |combinedAddress|}}
|
||||
{{#let (concat address ':' path.Path) as |combinedAddress|}}
|
||||
<p class="combined-address">
|
||||
<span>
|
||||
{{combinedAddress}}
|
||||
|
|
@ -12,59 +12,57 @@
|
|||
@name="Address"
|
||||
/>
|
||||
</p>
|
||||
{{/let}}
|
||||
{{/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}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<ul data-test-proxy-upstreams>
|
||||
{{#each items as |item|}}
|
||||
{{#each items as |item|}}
|
||||
<li>
|
||||
<div>
|
||||
<p data-test-destination-name>
|
||||
|
|
@ -7,53 +7,44 @@
|
|||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
{{#if (env 'CONSUL_NSPACES_ENABLED')}}
|
||||
{{#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>
|
||||
{{/if}}
|
||||
{{#if (and (not-eq item.Datacenter dc) (not-eq item.Datacenter ""))}}
|
||||
<dl class="datacenter">
|
||||
<dt>
|
||||
<Tooltip>
|
||||
Datacenter
|
||||
</Tooltip>
|
||||
</span>
|
||||
<span>
|
||||
</dt>
|
||||
<dd>
|
||||
{{item.Datacenter}}
|
||||
</span>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if (gt item.LocalBindPort 0)}}
|
||||
</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>
|
||||
{{/if}}
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<ListCollection @items={{items}} class="consul-upstream-list" as |item index|>
|
||||
<BlockSlot @name="header">
|
||||
{{#if (service/exists item)}}
|
||||
{{#if (service/exists item)}}
|
||||
<dl class={{service/health-checks item}}>
|
||||
<dt>
|
||||
Health
|
||||
|
|
@ -28,42 +28,33 @@
|
|||
{{item.Name}}
|
||||
</a>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{else}}
|
||||
<p data-test-service-name>
|
||||
{{item.Name}}
|
||||
</p>
|
||||
{{/if}}
|
||||
{{/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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue