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

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

@@ -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')}}
+  <li>
-  <a data-test-service-name href={{href-to "dc.services.show.services" item.Name}} class={{service/health-checks item}}>
+    <span class={{service/health-checks item}}>
-    {{item.Name}}
+      <Tooltip>
-  </a>
+        {{#if (eq 'critical' (service/health-checks item))}}
-{{else if (eq item.Kind 'ingress-gateway')}}
+          At least one health check on one instance is failing.
-  <a data-test-service-name href={{href-to "dc.services.show.upstreams" item.Name}} class={{service/health-checks item}}>
+        {{else if (eq 'warning' (service/health-checks item))}}
-    {{item.Name}}
+          At least one health check on one instance has a warning.
-  </a>
+        {{else if (eq 'passing' (service/health-checks item))}}
-{{else}}
+          All health checks are passing.
-  <a data-test-service-name href={{href-to "dc.services.show.instances" item.Name}} class={{service/health-checks item}}>
+        {{else}}
-    {{item.Name}}
+          There are no health checks.
-  </a>
+        {{/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)}}

ui-v2/app/components/tooltip/index.hbs

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

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

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

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

@@ -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 {

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

@@ -19,13 +19,23 @@
 %composite-row-detail * {
   white-space: nowrap;
 }
-%composite-row-detail > li:not(:first-child) {
+%composite-row-detail > li {
-  margin-left: 12px;
+  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;

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

@@ -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;
 }

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

@@ -14,32 +14,44 @@
           {{#if (env 'CONSUL_NSPACES_ENABLED')}}
             {{#if (not-eq item.DestinationType 'prepared_query')}}
               <li class="nspace">
-                {{or item.DestinationNamespace 'default'}}
+                <span>
-                <Tooltip>
+                  <Tooltip>
-                  Namespace
+                      Namespace
-                </Tooltip>
+                  </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}}
+                <span>
-                <Tooltip>
+                  <Tooltip>
-                  Datacenter
+                      Datacenter
-                </Tooltip>
+                  </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>
+                <span>
-                <CopyButton
+                  <Tooltip>
-                  @value={{combinedAddress}}
+                    Address
-                  @name="Address"
+                  </Tooltip>
-                />
+                </span>
-                <Tooltip>
+                <span>
-                  Address
+                  <span>{{combinedAddress}}</span>
-                </Tooltip>
+                  <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>

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

@@ -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 (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace nspace))}}
-          {{#if (not-eq item.Namespace nspace)}}
+          <li class="nspace">
-            <li class="nspace">
+            <span>
-              {{item.Namespace}}
               <Tooltip>
                   Namespace
-                </Tooltip>
+              </Tooltip>
-            </li>
+            </span>
-          {{/if}}
+            <span>
+              {{item.Namespace}}
+            </span>
+          </li>
         {{/if}}
         {{#if (not-eq item.GatewayConfig.ListenerPort 0)}}
           <li class="port">
-            <span>:{{item.GatewayConfig.ListenerPort}}</span>
+            <span>
-            <CopyButton
+              <Tooltip>
-              @value={{item.GatewayConfig.ListenerPort}}
+                Port
-              @name="Port"
+              </Tooltip>
-            />
+            </span>
-            <Tooltip>
+            <span>
-              Port
+              <span>:{{item.GatewayConfig.ListenerPort}}</span>
-            </Tooltip>
+              <CopyButton
+                @value={{item.GatewayConfig.ListenerPort}}
+                @name="Port"
+              />
+            </span>
           </li>
         {{/if}}
         </ul>