DISTMYSQL-169: Make tags visible in the GUI

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

Problem:
Instance tags are not visible in Orchestrator's web GUI.

Solution:
1. If instance tags are present, 'tags' icon is displayed on the top
bar of the instance. When the mouse is hovered on, tags are displayed.
2. Added new row 'Tags' to instance modal view.

Additionally fixed handling of /api/recently-active-cluster-recovery
endpoint result.

Author: kamil-holubicki

resources/public/css/orchestrator.css

@@ -143,6 +143,10 @@ body {
     cursor: default;
 }
 
+.instance h3 .glyphicon-tags {
+    margin-right: 0.4em;
+}
+
 .instance h3 .instance-glyphs {
     cursor: pointer;
 }

resources/public/js/cluster.js

@@ -1633,6 +1633,15 @@ function Cluster() {
     }
   }
 
+  function showInstanceTags(instance) {
+    if (instance.hasOwnProperty('tagStrings') && instance.tagStrings.length) {
+      var tagsText = "";
+      instance.tagStrings.forEach(function(tag){
+        tagsText = tagsText.concat(tag, '
');
+      });
+      getInstanceDiv(instance.id).find("h3 div.pull-right").prepend('<span class="glyphicon glyphicon-tags" title="' + tagsText +'"></span> ');
+    }
+  }
 
   function indicateClusterPoolInstances(clusterPoolInstances) {
     var instancesMap = _instancesMap;
@@ -1673,10 +1682,19 @@ 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) {
-          if (!recoveries) {
+          if (!recoveries || !recoveries.length) {
             return
           }
           // Result is an array: either empty (no active recovery) or with multiple entries
@@ -1767,7 +1785,7 @@ function Cluster() {
       });
     });
     getData("/api/recently-active-cluster-recovery/" + currentClusterName(), function(recoveries) {
-      if (!recoveries) {
+      if (!recoveries || !recoveries.length) {
         return
       }
       // Result is an array: either empty (no active recovery) or with multiple entries

resources/public/js/orchestrator.js

@@ -385,6 +385,14 @@ function openNodeModal(node) {
   addNodeModalDataAttribute("Agent",
     '<a href="' + appUrl('/web/agent/' + node.Key.Hostname) + '">' + node.Key.Hostname + '</a>');
 
+  var tagsText = "";
+  if (node.hasOwnProperty('tagStrings') && node.tagStrings.length) {
+    node.tagStrings.forEach(function(tag){
+      tagsText = tagsText.concat(tag, '<br>');
+    });
+  }
+  addNodeModalDataAttribute("Tags", tagsText);
+
   $('#node_modal [data-btn]').unbind("click");
 
   $("#beginDowntimeOwner").val(getUserId());