Show a warning if secondary node version is not the same of primary

app/assets/javascripts/geo_nodes.js

@@ -13,6 +13,8 @@ const healthyIcon = 'fa-check';
 const unhealthyIcon = 'fa-times';
 const unknownIcon = 'fa-times';
 const notAvailable = 'Not Available';
+const versionMismatch = 'does not match the primary node version';
+const versionMismatchClass = 'geo-node-version-mismatch';
 
 class GeoNodeStatus {
   constructor(el) {
@@ -21,6 +23,7 @@ class GeoNodeStatus {
     this.$loadingIcon = $('.js-geo-node-loading', this.$el);
     this.$dbReplicationLag = $('.js-db-replication-lag', this.$status);
     this.$healthStatus = $('.js-health-status', this.$el);
+    this.$primaryVersion = $('.js-primary-version');
     this.$status = $('.js-geo-node-status', this.$el);
     this.$repositories = $('.js-repositories', this.$status);
     this.$lfsObjects = $('.js-lfs-objects', this.$status);
@@ -30,6 +33,7 @@ class GeoNodeStatus {
     this.$lastCursorEvent = $('.js-last-cursor-event', this.$status);
     this.$health = $('.js-health-message', this.$status.parent());
     this.$version = $('.js-gitlab-version', this.$status);
+    this.$secondaryVersion = $('.js-secondary-version', this.$status);
     this.endpoint = this.$el.data('status-url');
     this.$advancedStatus = $('.js-advanced-geo-node-status-toggler', this.$status.parent());
     this.$advancedStatus.on('click', GeoNodeStatus.toggleShowAdvancedStatus.bind(this));
@@ -196,6 +200,14 @@ class GeoNodeStatus {
       this.$dbReplicationLag.text('UNKNOWN');
     }
 
+    if (this.$primaryVersion.text() !== status.version) {
+      this.$secondaryVersion.removeClass(`${versionMismatchClass}`);
+      this.$secondaryVersion.text(status.version);
+    } else {
+      this.$secondaryVersion.addClass(`${versionMismatchClass}`);
+      this.$secondaryVersion.text(`${status.version} (${versionMismatch})`);
+    }
+
     if (status.repositories_count > 0) {
       const repositoriesStats = GeoNodeStatus.getSyncStatistics({
         syncedCount: status.repositories_synced_count,

app/assets/stylesheets/pages/geo_nodes.scss

@@ -127,6 +127,10 @@
   }
 }
 
+.geo-node-version-mismatch {
+  color: $gl-danger;
+}
+
 .node-badge {
   color: $white-light;
   display: inline-block;

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

@@ -34,7 +34,7 @@
               %p
                 %span.help-block
                   Gitlab version:
-                  %strong.node-info= Gitlab::VERSION
+                  %strong.node-info.js-primary-version= Gitlab::VERSION
             - else
               = status_loading_icon
               %table.geo-node-status.js-geo-node-status.hidden
@@ -44,6 +44,7 @@
                       GitLab Version:
                   %td
                     .node-info.prepend-top-10.prepend-left-5.js-gitlab-version
+                      %span.node-info.geo-node-version-mismatch Foo
                 - if node.enabled?
                   %tr
                     %td