Show health status when enabled; add new icons

app/assets/javascripts/geo_nodes.js

 /* eslint-disable no-new*/
 import './smart_interval';
 
-const healthyClass = 'geo-node-icon-healthy';
-const unhealthyClass = 'geo-node-icon-unhealthy';
+const healthyClass = 'geo-node-healthy';
+const unhealthyClass = 'geo-node-unhealthy';
+const healthyIcon = 'fa-check';
+const unhealthyIcon = 'fa-close'
 
 class GeoNodeStatus {
   constructor(el) {
     this.$el = $(el);
     this.$icon = $('.js-geo-node-icon', this.$el);
+    this.$healthStatus = $('.js-health-status', this.$el);
     this.$status = $('.js-geo-node-status', this.$el);
     this.$repositoriesSynced = $('.js-repositories-synced', this.$status);
     this.$repositoriesFailed = $('.js-repositories-failed', this.$status);
@@ -29,11 +32,14 @@ class GeoNodeStatus {
   getStatus() {
     $.getJSON(this.endpoint, (status) => {
       this.setStatusIcon(status.healthy);
+      this.setHealthStatus(status.healthy);
       this.$repositoriesSynced.html(`${status.repositories_synced_count}/${status.repositories_count} (${status.repositories_synced_in_percentage})`);
       this.$repositoriesFailed.html(status.repositories_failed_count);
       this.$lfsObjectsSynced.html(`${status.lfs_objects_synced_count}/${status.lfs_objects_count} (${status.lfs_objects_synced_in_percentage})`);
       this.$attachmentsSynced.html(`${status.attachments_synced_count}/${status.attachments_count} (${status.attachments_synced_in_percentage})`);
-      this.$health.html(status.health);
+      if (status.health !== 'Healthy') {
+        this.$health.html('<code class="geo-health">' + status.health + '</code>');
+      }
 
       this.$status.show();
     });
@@ -41,17 +47,29 @@ class GeoNodeStatus {
 
   setStatusIcon(healthy) {
     if (healthy) {
-      this.$icon.removeClass(unhealthyClass)
-                .addClass(healthyClass)
+      this.$icon.removeClass(unhealthyClass + ' ' + unhealthyIcon)
+                .addClass(healthyClass + ' ' + healthyIcon)
                 .attr('title', 'Healthy');
     } else {
-      this.$icon.removeClass(healthyClass)
-                .addClass(unhealthyClass)
+      this.$icon.removeClass(healthyClass + ' ' + healthyIcon)
+                .addClass(unhealthyClass + ' ' + unhealthyIcon)
                 .attr('title', 'Unhealthy');
     }
 
     this.$icon.tooltip('fixTitle');
   }
+
+  setHealthStatus(healthy) {
+    if (healthy) {
+      this.$healthStatus.removeClass(unhealthyClass)
+                        .addClass(healthyClass)
+                        .html('Healthy');
+    } else {
+      this.$healthStatus.removeClass(healthyClass)
+                        .addClass(unhealthyClass)
+                        .html('Unhealthy');
+    }
+  }
 }
 
 class GeoNodes {

app/helpers/ee/geo_helper.rb

@@ -4,20 +4,18 @@ module EE
       unless node.primary?
         status = node.enabled? ? 'healthy' : 'disabled'
 
-        icon 'check fw',
+        if status == 'healthy'
+          icon = 'check'
+        else
+          icon = 'times'
+        end
+
+        icon "#{icon} fw",
              class: "js-geo-node-icon geo-node-#{status} has-tooltip",
              title: status.capitalize
       end
     end
 
-    def node_status(node)
-      status = node.enabled? ? 'healthy' : 'disabled'
-
-      content_tag :span, class: "geo-node-#{status}" do
-        status.capitalize
-      end
-    end
-
     def toggle_node_button(node)
       btn_class, title, data =
         if node.enabled?

app/serializers/geo_node_status_entity.rb

@@ -5,7 +5,7 @@ class GeoNodeStatusEntity < Grape::Entity
 
   expose :healthy?, as: :healthy
   expose :health do |node|
-    node.healthy? ? 'No Health Problems Detected' : node.health
+    node.healthy? ? 'Healthy' : node.health
   end
 
   expose :attachments_count

app/views/admin/geo_nodes/index.html.haml

@@ -25,10 +25,11 @@
               %span.help-block Primary node
             - else
               .js-geo-node-status{ style: 'display: none' }
-                %p
-                  %span.help-block
-                    Health Status:
-                    %span= node_status(node)
+                - if node.enabled?
+                  %p
+                    %span.help-block
+                      Health Status:
+                      %span.js-health-status
                 %p
                   %span.help-block
                     Repositories synced:
@@ -46,7 +47,7 @@
                     Attachments synced:
                     %span.node-info.js-attachments-synced
                 %p
-                  %code.geo-health.js-health
+                  .js-health
 
           .node-actions
             - if Gitlab::Geo.license_allows?