From 66c139ceae295ebc16082e458b268bd88c1abeba Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Thu, 17 Jan 2019 09:20:00 +0000
Subject: [PATCH] UI: Text change and clarity Node Health > Health Checks
 (#5115)

Text change Node Health > Health Checks
Also adds an info icon and tooltip to Health Checks column header
---
 ui-v2/app/styles/components/table.scss    | 33 +++++++++++++++++++++++
 ui-v2/app/templates/dc/services/index.hbs |  2 +-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss
index 04519486eb..7f497a3b43 100644
--- a/ui-v2/app/styles/components/table.scss
+++ b/ui-v2/app/styles/components/table.scss
@@ -36,3 +36,36 @@ td dt.critical,
 td dt.critical + dd {
   color: $ui-color-failure;
 }
+/* Header Tooltips/Icon*/
+th {
+  overflow: visible;
+}
+th span {
+  @extend %tooltip;
+  @extend %with-info;
+  margin-left: 12px;
+  top: 3px;
+  width: 23px;
+  height: 15px;
+}
+th span:after {
+  left: -8px;
+}
+th span em::after {
+  @extend %tooltip-tail;
+  @extend %blink-in-fade-out;
+  top: auto !important;
+  bottom: -13px;
+}
+th span em {
+  @extend %tooltip-bubble;
+  @extend %blink-in-fade-out;
+  width: 250px;
+  font-style: normal;
+  white-space: normal !important;
+}
+
+th span:hover em::after,
+th span:hover em {
+  @extend %blink-in-fade-out-active;
+}
diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs
index 37ef964c84..f3029d046f 100644
--- a/ui-v2/app/templates/dc/services/index.hbs
+++ b/ui-v2/app/templates/dc/services/index.hbs
@@ -23,7 +23,7 @@
         }}
             {{#block-slot 'header'}}
                 <th style={{remainingWidth}}>Service</th>
-                <th style={{totalWidth}}>Node Health</th>
+                <th style={{totalWidth}}>Health Checks<span><em>The number of health checks for the service on all nodes</em></span></th>
                 <th style={{remainingWidth}}>Tags</th>
             {{/block-slot}}
             {{#block-slot 'row'}}