Merge branch 'sh-fix-issue-3987' into 'master'

Fix Geo Node admin screen no longer displaying data

Closes #3987

See merge request gitlab-org/gitlab-ee!3344

app/assets/javascripts/geo_nodes.js

 /* eslint-disable no-new*/
-import './smart_interval';
+import axios from 'axios';
+import SmartInterval from '~/smart_interval';
 import { parseSeconds, stringifyTime } from './lib/utils/pretty_time';
 
 const healthyClass = 'geo-node-healthy';
@@ -31,7 +32,7 @@ class GeoNodeStatus {
     this.$advancedStatus = $('.js-advanced-geo-node-status-toggler', this.$status);
     this.$advancedStatus.on('click', GeoNodeStatus.toggleShowAdvancedStatus);
 
-    this.statusInterval = new gl.SmartInterval({
+    this.statusInterval = new SmartInterval({
       callback: this.getStatus.bind(this),
       startingInterval: 30000,
       maxInterval: 120000,
@@ -59,89 +60,105 @@ class GeoNodeStatus {
 
   static formatCount(count) {
     if (count !== null) {
-      gl.text.addDelimiter(count);
+      return gl.text.addDelimiter(count);
     }
 
     return notAvailable;
   }
 
   getStatus() {
-    $.getJSON(this.endpoint, (status) => {
-      this.setStatusIcon(status.healthy);
-      this.setHealthStatus(status.healthy);
+    return axios.get(this.endpoint)
+      .then((response) => {
+        this.handleStatus(response.data);
+        return response;
+      })
+      .catch((err) => {
+        this.handleError(err);
+      });
+  }
+
+  handleStatus(status) {
+    this.setStatusIcon(status.healthy);
+    this.setHealthStatus(status.healthy);
 
       // Replication lag can be nil if the secondary isn't actually streaming
-      if (status.db_replication_lag_seconds !== null && status.db_replication_lag_seconds >= 0) {
-        const parsedTime = parseSeconds(status.db_replication_lag_seconds, {
-          hoursPerDay: 24,
-          daysPerWeek: 7,
-        });
-        this.$dbReplicationLag.text(stringifyTime(parsedTime));
-      } else {
-        this.$dbReplicationLag.text('UNKNOWN');
-      }
-
-      const repoText = GeoNodeStatus.formatCountAndPercentage(
-        status.repositories_synced_count,
-        status.repositories_count,
-        status.repositories_synced_in_percentage);
-
-      const repoFailedText = GeoNodeStatus.formatCount(status.repositories_failed_count);
-
-      const lfsText = GeoNodeStatus.formatCountAndPercentage(
-        status.lfs_objects_synced_count,
-        status.lfs_objects_count,
-        status.lfs_objects_synced_in_percentage);
-
-      const lfsFailedText = GeoNodeStatus.formatCount(status.lfs_objects_failed_count);
-
-      const attachmentText = GeoNodeStatus.formatCountAndPercentage(
-        status.attachments_synced_count,
-        status.attachments_count,
-        status.attachments_synced_in_percentage);
-
-      const attachmentFailedText = GeoNodeStatus.formatCount(status.attachments_failed_count);
-
-      this.$repositoriesSynced.text(repoText);
-      this.$repositoriesFailed.text(repoFailedText);
-      this.$lfsObjectsSynced.text(lfsText);
-      this.$lfsObjectsFailed.text(lfsFailedText);
-      this.$attachmentsSynced.text(attachmentText);
-      this.$attachmentsFailed.text(attachmentFailedText);
-
-      let eventDate = notAvailable;
-      let cursorDate = notAvailable;
-      let lastEventSeen = notAvailable;
-      let lastCursorEvent = notAvailable;
-
-      if (status.last_event_timestamp !== null && status.last_event_timestamp > 0) {
-        eventDate = gl.utils.formatDate(new Date(status.last_event_timestamp * 1000));
-      }
-
-      if (status.cursor_last_event_timestamp !== null && status.cursor_last_event_timestamp > 0) {
-        cursorDate = gl.utils.formatDate(new Date(status.cursor_last_event_timestamp * 1000));
-      }
-
-      if (status.last_event_id !== null) {
-        lastEventSeen = `${status.last_event_id} (${eventDate})`;
-      }
-
-      if (status.cursor_last_event_id !== null) {
-        lastCursorEvent = `${status.cursor_last_event_id} (${cursorDate})`;
-      }
-
-      this.$lastEventSeen.text(lastEventSeen);
-      this.$lastCursorEvent.text(lastCursorEvent);
-
-      if (status.health === 'Healthy') {
-        this.$health.text('');
-      } else {
-        const strippedData = $('<div>').html(`${status.health}`).text();
-        this.$health.html(`<code class="geo-health">${strippedData}</code>`);
-      }
-
-      this.$status.show();
-    });
+    if (status.db_replication_lag_seconds !== null && status.db_replication_lag_seconds >= 0) {
+      const parsedTime = parseSeconds(status.db_replication_lag_seconds, {
+        hoursPerDay: 24,
+        daysPerWeek: 7,
+      });
+      this.$dbReplicationLag.text(stringifyTime(parsedTime));
+    } else {
+      this.$dbReplicationLag.text('UNKNOWN');
+    }
+
+    const repoText = GeoNodeStatus.formatCountAndPercentage(
+      status.repositories_synced_count,
+      status.repositories_count,
+      status.repositories_synced_in_percentage);
+
+    const repoFailedText = GeoNodeStatus.formatCount(status.repositories_failed_count);
+
+    const lfsText = GeoNodeStatus.formatCountAndPercentage(
+      status.lfs_objects_synced_count,
+      status.lfs_objects_count,
+      status.lfs_objects_synced_in_percentage);
+
+    const lfsFailedText = GeoNodeStatus.formatCount(status.lfs_objects_failed_count);
+
+    const attachmentText = GeoNodeStatus.formatCountAndPercentage(
+      status.attachments_synced_count,
+      status.attachments_count,
+      status.attachments_synced_in_percentage);
+
+    const attachmentFailedText = GeoNodeStatus.formatCount(status.attachments_failed_count);
+
+    this.$repositoriesSynced.text(repoText);
+    this.$repositoriesFailed.text(repoFailedText);
+    this.$lfsObjectsSynced.text(lfsText);
+    this.$lfsObjectsFailed.text(lfsFailedText);
+    this.$attachmentsSynced.text(attachmentText);
+    this.$attachmentsFailed.text(attachmentFailedText);
+
+    let eventDate = notAvailable;
+    let cursorDate = notAvailable;
+    let lastEventSeen = notAvailable;
+    let lastCursorEvent = notAvailable;
+
+    if (status.last_event_timestamp !== null && status.last_event_timestamp > 0) {
+      eventDate = gl.utils.formatDate(new Date(status.last_event_timestamp * 1000));
+    }
+
+    if (status.cursor_last_event_timestamp !== null && status.cursor_last_event_timestamp > 0) {
+      cursorDate = gl.utils.formatDate(new Date(status.cursor_last_event_timestamp * 1000));
+    }
+
+    if (status.last_event_id !== null) {
+      lastEventSeen = `${status.last_event_id} (${eventDate})`;
+    }
+
+    if (status.cursor_last_event_id !== null) {
+      lastCursorEvent = `${status.cursor_last_event_id} (${cursorDate})`;
+    }
+
+    this.$lastEventSeen.text(lastEventSeen);
+    this.$lastCursorEvent.text(lastCursorEvent);
+
+    if (status.health === 'Healthy') {
+      this.$health.text('');
+    } else {
+      const strippedData = $('<div>').html(`${status.health}`).text();
+      this.$health.html(`<code class="geo-health">${strippedData}</code>`);
+    }
+
+    this.$status.show();
+  }
+
+  handleError(err) {
+    this.setStatusIcon(false);
+    this.setHealthStatus(false);
+    this.$health.html(`<code class="geo-health">${err}</code>`);
+    this.$status.show();
   }
 
   setStatusIcon(healthy) {

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

@@ -27,7 +27,7 @@
       Geo nodes (#{@nodes.count})
     %ul.well-list.geo-nodes
       - @nodes.each do |node|
-        %li{ id: dom_id(node), class: node_class(node), data: { status_url: status_admin_geo_node_path(node) } }
+        %li{ id: dom_id(node), class: node_class(node), data: { status_url: status_admin_geo_node_path(node, format: :json) } }
           .node-block
             = node_status_icon(node)
             %strong= node.url