From fb1fd730a4d038b628a5564a56cc60db4c69f436 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Fri, 12 Jun 2020 09:35:52 -0400
Subject: [PATCH] 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
---
 .../components/consul-service-list/index.hbs  | 39 ++++++---
 ui-v2/app/components/tooltip/index.hbs        |  4 +-
 .../base/components/tooltip/layout.scss       |  1 +
 .../components/composite-row/index.scss       |  3 +-
 .../components/composite-row/layout.scss      | 14 +++-
 .../styles/components/composite-row/skin.scss | 10 +--
 .../templates/dc/services/instance/proxy.hbs  | 80 ++++++++++++++-----
 .../templates/dc/services/show/upstreams.hbs  | 53 ++++++++----
 8 files changed, 146 insertions(+), 58 deletions(-)

diff --git a/ui-v2/app/components/consul-service-list/index.hbs b/ui-v2/app/components/consul-service-list/index.hbs
index c20a6194fb..740f152a9f 100644
--- a/ui-v2/app/components/consul-service-list/index.hbs
+++ b/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')}}
-  <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)}}
diff --git a/ui-v2/app/components/tooltip/index.hbs b/ui-v2/app/components/tooltip/index.hbs
index 6292eac5a6..a1017355e8 100644
--- a/ui-v2/app/components/tooltip/index.hbs
+++ b/ui-v2/app/components/tooltip/index.hbs
@@ -1,3 +1,3 @@
-<EmberTooltip @popperContainer=".app-view">
+<EmberTooltip @popperContainer=".app-view" @side="top-start">
   {{yield}}
-</EmberTooltip>
\ No newline at end of file
+</EmberTooltip>
diff --git a/ui-v2/app/styles/base/components/tooltip/layout.scss b/ui-v2/app/styles/base/components/tooltip/layout.scss
index 8b66248397..321b8b5e30 100644
--- a/ui-v2/app/styles/base/components/tooltip/layout.scss
+++ b/ui-v2/app/styles/base/components/tooltip/layout.scss
@@ -54,4 +54,5 @@
 // Ember Tooltips
 .ember-tooltip {
   padding: 12px;
+  max-width: 192px;
 }
diff --git a/ui-v2/app/styles/components/composite-row/index.scss b/ui-v2/app/styles/components/composite-row/index.scss
index 4b20237c60..28099ea973 100644
--- a/ui-v2/app/styles/components/composite-row/index.scss
+++ b/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 {
diff --git a/ui-v2/app/styles/components/composite-row/layout.scss b/ui-v2/app/styles/components/composite-row/layout.scss
index ef8ef68ed7..d841eaf040 100644
--- a/ui-v2/app/styles/components/composite-row/layout.scss
+++ b/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) {
-  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;
diff --git a/ui-v2/app/styles/components/composite-row/skin.scss b/ui-v2/app/styles/components/composite-row/skin.scss
index 1ea49497e1..32e2bde835 100644
--- a/ui-v2/app/styles/components/composite-row/skin.scss
+++ b/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;
 }
diff --git a/ui-v2/app/templates/dc/services/instance/proxy.hbs b/ui-v2/app/templates/dc/services/instance/proxy.hbs
index e6563dd786..387b051c05 100644
--- a/ui-v2/app/templates/dc/services/instance/proxy.hbs
+++ b/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'}}
-                <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>
diff --git a/ui-v2/app/templates/dc/services/show/upstreams.hbs b/ui-v2/app/templates/dc/services/show/upstreams.hbs
index 518e53c14c..b9595c492f 100644
--- a/ui-v2/app/templates/dc/services/show/upstreams.hbs
+++ b/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 (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>