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

ui: Add health check icon to Ingress Upstreams and add Tooltips in additional areas (#8091) 

* Add Health Checks and update Tooltips in Ingress Upstreams

* Update Tooltip in Proxy Info tab Upstreams

* Add Tooltips to Proxy Info tab Exposed Paths

* Add Health Checks with Tooltips to Service List page
This commit is contained in:
Kenia 2020-06-12 09:35:52 -04:00 committed by hashicorp-ci
parent 51660ffb25
commit fb1fd730a4
8 changed files with 146 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ui-v2/app/components/consul-service-list/index.hbs
View File

@ -1,19 +1,34 @@
{{yield}}
{{#if (gt items.length 0)}}
<ListCollection @items={{items}} class="consul-service-list" as |item index|>
{{#if (eq item.Kind 'terminating-gateway')}}
<a data-test-service-name href={{href-to "dc.services.show.services" item.Name}} class={{service/health-checks item}}>
{{item.Name}}
</a>
{{else if (eq item.Kind 'ingress-gateway')}}
<a data-test-service-name href={{href-to "dc.services.show.upstreams" item.Name}} class={{service/health-checks item}}>
{{item.Name}}
</a>
{{else}}
<a data-test-service-name href={{href-to "dc.services.show.instances" item.Name}} class={{service/health-checks item}}>
{{item.Name}}
</a>
<li>
<span class={{service/health-checks item}}>
<Tooltip>
{{#if (eq 'critical' (service/health-checks item))}}
At least one health check on one instance is failing.
{{else if (eq 'warning' (service/health-checks item))}}
At least one health check on one instance has a warning.
{{else if (eq 'passing' (service/health-checks item))}}
All health checks are passing.
{{else}}
There are no health checks.
{{/if}}
</Tooltip>
</span>
{{#if (eq item.Kind 'terminating-gateway')}}
<a data-test-service-name href={{href-to "dc.services.show.services" item.Name}}>
{{item.Name}}
</a>
{{else if (eq item.Kind 'ingress-gateway')}}
<a data-test-service-name href={{href-to "dc.services.show.upstreams" item.Name}}>
{{item.Name}}
</a>
{{else}}
<a data-test-service-name href={{href-to "dc.services.show.instances" item.Name}}>
{{item.Name}}
</a>
{{/if}}
</li>
<ul>
{{#if (and nspace (env 'CONSUL_NSPACES_ENABLED'))}}
{{#if (not-eq item.Namespace nspace)}}

4
ui-v2/app/components/tooltip/index.hbs
View File

@ -1,3 +1,3 @@
<EmberTooltip @popperContainer=".app-view">
<EmberTooltip @popperContainer=".app-view" @side="top-start">
{{yield}}
</EmberTooltip>
</EmberTooltip>

1
ui-v2/app/styles/base/components/tooltip/layout.scss
View File

@ -54,4 +54,5 @@
// Ember Tooltips
.ember-tooltip {
padding: 12px;
max-width: 192px;
}

3
ui-v2/app/styles/components/composite-row/index.scss
View File

@ -6,7 +6,8 @@
@extend %composite-row-intent;
}
%composite-row > a,
%composite-row > p {
%composite-row > p,
%composite-row > li > * {
@extend %composite-row-header;
}
%composite-row > ul {

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

@ -19,13 +19,23 @@
%composite-row-detail * {
white-space: nowrap;
}
%composite-row-detail > li:not(:first-child) {
margin-left: 12px;
%composite-row-detail > li {
margin-right: 12px;
}
%composite-row-detail .node::before {
margin-top: 2px;
}
//Health Checks
%composite-row > li > span.passing::before,
%composite-row > li > span.warning::before,
%composite-row > li > span.critical::before,
%composite-row > li > span.empty::before {
height: 18px;
width: 18px;
margin-top: 2px;
}
// Copy Button with Feedback
%composite-row .copy-button button {
padding: 0 !important;

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

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

80
ui-v2/app/templates/dc/services/instance/proxy.hbs
View File

@ -14,32 +14,44 @@
{{#if (env 'CONSUL_NSPACES_ENABLED')}}
{{#if (not-eq item.DestinationType 'prepared_query')}}
<li class="nspace">
{{or item.DestinationNamespace 'default'}}
<Tooltip>
Namespace
</Tooltip>
<span>
<Tooltip>
Namespace
</Tooltip>
</span>
<span>
{{or item.DestinationNamespace 'default'}}
</span>
</li>
{{/if}}
{{/if}}
{{#if (and (not-eq item.Datacenter proxyDatacenter) (not-eq item.Datacenter ""))}}
<li class="datacenter">
{{item.Datacenter}}
<Tooltip>
Datacenter
</Tooltip>
<span>
<Tooltip>
Datacenter
</Tooltip>
</span>
<span>
{{item.Datacenter}}
</span>
</li>
{{/if}}
{{#if (gt item.LocalBindPort 0)}}
{{#let (concat (or item.LocalBindAddress '127.0.0.1') ':' item.LocalBindPort) as |combinedAddress| }}
<li class="port">
<span>{{combinedAddress}}</span>
<CopyButton
@value={{combinedAddress}}
@name="Address"
/>
<Tooltip>
Address
</Tooltip>
<span>
<Tooltip>
Address
</Tooltip>
</span>
<span>
<span>{{combinedAddress}}</span>
<CopyButton
@value={{combinedAddress}}
@name="Address"
/>
</span>
</li>
{{/let}}
{{/if}}
@ -73,22 +85,50 @@
<ul>
{{#if path.Protocol}}
<li class="protocol">
{{path.Protocol}}
<span>
<Tooltip>
Protocol
</Tooltip>
</span>
<span>
{{path.Protocol}}
</span>
</li>
{{/if}}
{{#if path.ListenerPort}}
<li class="port">
listening on :{{path.ListenerPort}}
<span>
<Tooltip>
Port
</Tooltip>
</span>
<span>
listening on :{{path.ListenerPort}}
</span>
</li>
{{/if}}
{{#if path.LocalPathPort}}
<li class="port">
local port :{{path.LocalPathPort}}
<span>
<Tooltip>
Port
</Tooltip>
</span>
<span>
local port :{{path.LocalPathPort}}
</span>
</li>
{{/if}}
{{#if path.Path}}
<li class="path">
{{path.Path}}
<span>
<Tooltip>
Path
</Tooltip>
</span>
<span>
{{path.Path}}
</span>
</li>
{{/if}}
</ul>

53
ui-v2/app/templates/dc/services/show/upstreams.hbs
View File

@ -9,8 +9,22 @@
<ListCollection @items={{gatewayServices}} class="consul-upstream-list" as |item index|>
{{#if (service/exists item)}}
{{#let item.Namespace as |gatewayNspace|}}
<li>
<span class={{service/health-checks item}}>
<Tooltip>
{{#if (eq 'critical' (service/health-checks item))}}
At least one health check on one instance is failing.
{{else if (eq 'warning' (service/health-checks item))}}
At least one health check on one instance has a warning.
{{else if (eq 'passing' (service/health-checks item))}}
All health checks are passing.
{{else}}
There are no health checks.
{{/if}}
</Tooltip>
</span>
{{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq gatewayNspace nspace))}}
<a data-test-service-name href={{href-to 'nspace.dc.services.show' (concat '~' gatewayNspace) dc item.Name}}>
<a data-test-service-name href={{href-to 'nspace.dc.services.show' (concat '~' gatewayNspace) dc item.Name }}>
{{item.Name}}
</a>
{{else}}
@ -18,6 +32,7 @@
{{item.Name}}
</a>
{{/if}}
</li>
{{/let}}
{{else}}
<p data-test-service-name>
@ -25,26 +40,32 @@
</p>
{{/if}}
<ul>
{{#if (env 'CONSUL_NSPACES_ENABLED')}}
{{#if (not-eq item.Namespace nspace)}}
<li class="nspace">
{{item.Namespace}}
{{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace nspace))}}
<li class="nspace">
<span>
<Tooltip>
Namespace
</Tooltip>
</li>
{{/if}}
</Tooltip>
</span>
<span>
{{item.Namespace}}
</span>
</li>
{{/if}}
{{#if (not-eq item.GatewayConfig.ListenerPort 0)}}
<li class="port">
<span>:{{item.GatewayConfig.ListenerPort}}</span>
<CopyButton
@value={{item.GatewayConfig.ListenerPort}}
@name="Port"
/>
<Tooltip>
Port
</Tooltip>
<span>
<Tooltip>
Port
</Tooltip>
</span>
<span>
<span>:{{item.GatewayConfig.ListenerPort}}</span>
<CopyButton
@value={{item.GatewayConfig.ListenerPort}}
@name="Port"
/>
</span>
</li>
{{/if}}
</ul>