Add support for taggling advanced status in Geo

app/assets/javascripts/geo_nodes.js

@@ -25,6 +25,8 @@ class GeoNodeStatus {
     this.$lastCursorEvent = $('.js-last-cursor-event', this.$status);
     this.$health = $('.js-health', this.$status);
     this.endpoint = this.$el.data('status-url');
+    this.$advancedStatus = $('.js-advanced-geo-node-status-toggler', this.$status)
+    this.$advancedStatus.on('click', this.toggleShowAdvancedStatus);
 
     this.statusInterval = new gl.SmartInterval({
       callback: this.getStatus.bind(this),
@@ -36,6 +38,13 @@ class GeoNodeStatus {
     });
   }
 
+  toggleShowAdvancedStatus(e) {
+    const element = $(e.currentTarget);
+    const closestStatus = element.siblings().next('.advanced-status')
+    element.find('.fa').toggleClass('fa-angle-down').toggleClass('fa-angle-up');
+    closestStatus.toggleClass('hide-status');
+  }
+
   getStatus() {
     $.getJSON(this.endpoint, (status) => {
       this.setStatusIcon(status.healthy);

app/assets/stylesheets/pages/geo_nodes.scss

@@ -29,6 +29,24 @@
   }
 }
 
+.js-advanced-geo-node-status-toggler {
+  color: $gl-link-color;
+  padding: 10px 0 0;
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+
+  &:hover span {
+    color: $gl-link-color;
+    text-decoration: underline;
+  }
+}
+
+.hide-status {
+  display: none;
+  background: transparent;
+}
+
 .node-info {
   color: $gl-text-color;
 }

app/models/geo_node_status.rb

@@ -21,7 +21,7 @@ class GeoNodeStatus
   def db_replication_lag=(value)
     @db_replication_lag = value
   end
-  
+
   def last_event_id
     @last_event_id ||= latest_event&.id
   end
@@ -58,6 +58,14 @@ class GeoNodeStatus
     @cursor_last_event_date = value
   end
 
+  def db_replication_lag
+    @db_replication_lag ||= Gitlab::Geo::HealthCheck.db_replication_lag
+  end
+
+  def db_replication_lag=(value)
+    @db_replication_lag = value
+  end
+
   def repositories_count
     @repositories_count ||= repositories.count
   end

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

@@ -66,12 +66,18 @@
                     Attachments synced:
                     %strong.node-info.js-attachments-synced
                 %p
-                  %span.help-block
-                    Last event ID seen from primary:
-                    %strong.node-info.js-last-event-seen
-                  %span.help-block
-                    Last event ID processed by cursor:
-                    %strong.node-info.js-last-cursor-event
+                .js-advanced-geo-node-status-toggler
+                  %i.fa.fa-angle-down
+                  %span
+                    Advanced
+                %p
+                  .advanced-status.hide-status
+                    %span.help-block
+                      Last event ID seen from primary:
+                      %strong.node-info.js-last-event-seen
+                    %span.help-block
+                      Last event ID processed by cursor:
+                      %strong.node-info.js-last-cursor-event
                 %p
                   .js-health