Merge branch 'sh-geo-node-show-loading-try2' into 'master'

Show loading icon when retrieving Geo node status

Closes #1977

See merge request !2309

app/assets/javascripts/geo_nodes.js

@@ -3,13 +3,16 @@ import './smart_interval';
 
 const healthyClass = 'geo-node-healthy';
 const unhealthyClass = 'geo-node-unhealthy';
+const unknownClass = 'geo-node-unknown';
 const healthyIcon = 'fa-check';
-const unhealthyIcon = 'fa-close';
+const unhealthyIcon = 'fa-times';
+const unknownIcon = 'fa-times';
 
 class GeoNodeStatus {
   constructor(el) {
     this.$el = $(el);
     this.$icon = $('.js-geo-node-icon', this.$el);
+    this.$loadingIcon = $('.js-geo-node-loading', this.$el);
     this.$healthStatus = $('.js-health-status', this.$el);
     this.$status = $('.js-geo-node-status', this.$el);
     this.$repositoriesSynced = $('.js-repositories-synced', this.$status);
@@ -48,6 +51,9 @@ class GeoNodeStatus {
   }
 
   setStatusIcon(healthy) {
+    this.$loadingIcon.hide();
+    this.$icon.removeClass(`${unknownClass} ${unknownIcon}`);
+
     if (healthy) {
       this.$icon.removeClass(`${unhealthyClass} ${unhealthyIcon}`)
                 .addClass(`${healthyClass} ${healthyIcon}`)

app/assets/stylesheets/pages/geo_nodes.scss

@@ -10,6 +10,10 @@
   color: $gray-darkest;
 }
 
+.geo-node-unknown {
+  color: $gray-darkest;
+}
+
 .well-list.geo-nodes {
   li {
     position: relative;

app/helpers/ee/geo_helper.rb

@@ -2,7 +2,7 @@ module EE
   module GeoHelper
     def node_status_icon(node)
       unless node.primary?
-        status = node.enabled? ? 'healthy' : 'disabled'
+        status = node.enabled? ? 'unknown' : 'disabled'
         icon = status == 'healthy' ? 'check' : 'times'
 
         icon "#{icon} fw",
@@ -11,6 +11,10 @@ module EE
       end
     end
 
+    def status_loading_icon
+      icon "spinner spin fw", class: 'js-geo-node-loading'
+    end
+
     def node_class(node)
       klass = []
       klass << 'js-geo-secondary-node' if node.secondary?

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

@@ -26,6 +26,7 @@
               .node-badge.primary-node Primary
               %span.help-block Primary node
             - else
+              = status_loading_icon
               .js-geo-node-status{ style: 'display: none' }
                 - if node.enabled?
                   %p