DISTMYSQL-358: Tags are not displayed for unhealthy instances

https://jira.percona.com/browse/DISTMYSQL-358

Problem:
DISTMYSQL-169 added display of instance tags on GUI, however, tags are
not displayed for unhealthy instances.

Cause:
Unhealthy instances display is driven from another callstack (display
of unhealthy instances didn't consider tags)

Solution:
Move tags display logic into the common code.

Author: kamil-holubicki

resources/public/js/cluster.js

@@ -1546,25 +1546,27 @@ function Cluster() {
       recoveryListing.append('<li role="separator" class="divider"></li>');
 
       // Suggest successor
-      instance.children.forEach(function(replica) {
-        if (!replica.LogBinEnabled) {
-          return
-        }
-        if (replica.SQLDelay > 0) {
-          return
-        }
-        if (!replica.LogReplicationUpdatesEnabled) {
-          return
-        }
-        if (replica.lastCheckInvalidProblem()) {
-          return
-        }
-        if (replica.notRecentlyCheckedProblem()) {
-          return
-        }
-        recoveryListing.append(
-          '<li><a href="#" data-btn="recover-suggested-successor" data-command="recover-suggested-successor" data-successor-host="' + replica.Key.Hostname + '" data-successor-port="' + replica.Key.Port + '">Recover, try to promote <code>' + replica.title + '</code></a></li>');
-      });
+      if (instance.children) {
+        instance.children.forEach(function(replica) {
+          if (!replica.LogBinEnabled) {
+            return
+          }
+          if (replica.SQLDelay > 0) {
+            return
+          }
+          if (!replica.LogReplicationUpdatesEnabled) {
+            return
+          }
+          if (replica.lastCheckInvalidProblem()) {
+            return
+          }
+          if (replica.notRecentlyCheckedProblem()) {
+            return
+          }
+          recoveryListing.append(
+            '<li><a href="#" data-btn="recover-suggested-successor" data-command="recover-suggested-successor" data-successor-host="' + replica.Key.Hostname + '" data-successor-port="' + replica.Key.Port + '">Recover, try to promote <code>' + replica.title + '</code></a></li>');
+        });
+      }
     }
     if (!instance.isMaster) {
       recoveryListing.append('<li><a href="#" data-btn="auto" data-command="recover-auto">Auto (implies running external hooks/processes)</a></li>');
@@ -1633,16 +1635,6 @@ function Cluster() {
     }
   }
 
-  function showInstanceTags(instance) {
-    if (instance.hasOwnProperty('tagStrings') && instance.tagStrings.length) {
-      var tagsText = "";
-      instance.tagStrings.forEach(function(tag){
-        tagsText = tagsText.concat(tag, '&#10;');
-      });
-      getInstanceDiv(instance.id).find("h3 div.pull-right").prepend('<span class="glyphicon glyphicon-tags" title="' + tagsText +'"></span> ');
-    }
-  }
-
   function indicateClusterPoolInstances(clusterPoolInstances) {
     var instancesMap = _instancesMap;
     for (var pool in clusterPoolInstances.Details) {
@@ -1682,15 +1674,6 @@ function Cluster() {
 
     reviewReplicationAnalysis(replicationAnalysis);
 
-    // Tags are displayed only for not aggregated instances
-    for (var instanceId in _instancesMap) {
-      let instance = _instancesMap[instanceId];
-      getData("/api/tags/" + instance.Key.Hostname + "/" + instance.Key.Port, function(tagStrings) {
-        instance.tagStrings = tagStrings;
-        showInstanceTags(instance)
-      });
-    }
-
     instances.forEach(function(instance) {
       if (instance.isMaster) {
         getData("/api/recently-active-instance-recovery/" + instance.Key.Hostname + "/" + instance.Key.Port, function(recoveries) {

resources/public/js/orchestrator.js

@@ -973,6 +973,18 @@ function renderInstanceElement(popoverElement, instance, renderType) {
       popoverElement.find("h3 div.pull-right").prepend('<span class="glyphicon glyphicon-volume-off" title="' + downtimeMessage + '"></span> ');
     }
 
+    $.get(appUrl("/api/tags/" + instance.Key.Hostname + "/" + instance.Key.Port), function(tagStrings) {
+      if (tagStrings.length) {
+        // Need to remember this. It is used in instance's modal window.
+        instance.tagStrings = tagStrings;
+        var tagsText = "";
+        instance.tagStrings.forEach(function(tag) {
+          tagsText = tagsText.concat(tag, '&#10;');
+        });
+        popoverElement.find("h3 div.pull-right").prepend('<span class="glyphicon glyphicon-tags" title="' + tagsText +'"></span> ');
+      }
+    }, "json");
+
     if (instance.lastCheckInvalidProblem()) {
       instance.renderHint = "fatal";
       indicateLastSeenInStatus = true;