https://perconadev.atlassian.net/issues/DISTMYSQL-370

Problem:
When the instance has tags and the user hits 'Refresh' button in the
instance config modal window, tags disappear.

Problem:
When we query for the instance detais it does not contain tags info.
There is a separate API endpoint to retrieve a single instance tags.
So these two things has to be done separately.

Before the fix the information about tags related to the particular
instance were retrieved and cached during instance rendering on the
cluster view in renderInstanceElement() function.
It is an asynchronous process, but it worked fine as it was very
unlikely that the user opens the instance's config modal dialog before
tags were retrieved. Then, the config window used already cached tags.

However, when the user hits 'Refresh' button, the config modal window
is rendered immediately, before tags are retrieved, which results in
empty tags after refresh.

Solution:
Do not cache tags during renderInstanceElement(). Just request and
render the proper icon asynchronously.
Do the same for the config modal window. Just request tags and render
them asynchronously.

Possible improvement:
Probably it would be better if instances returned by the API already
contained related tags (like /api/cluster/clusterHint), or if we had
a dedicated API for retrieving tags related for a given set
of instances. For now, let's leave it as it is, improve if needed.

Author: kamil-holubicki

resources/public/js/orchestrator.js

@@ -385,13 +385,16 @@ 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);
+  $.get(appUrl("/api/tags/" + node.Key.Hostname + "/" + node.Key.Port), function(tagStrings) {
+    var tagsText = "";
+    if (tagStrings.length) {
+      tagStrings.forEach(function(tag){
+        tagsText = tagsText.concat(tag, '<br>');
+      })
+      addNodeModalDataAttribute("Tags", tagsText);
+    }
+  }, "json");
+
 
   $('#node_modal [data-btn]').unbind("click");
 
@@ -975,10 +978,8 @@ function renderInstanceElement(popoverElement, instance, renderType) {
 
     $.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) {
+        tagStrings.forEach(function(tag) {
           tagsText = tagsText.concat(tag, '&#10;');
         });
         popoverElement.find("h3 div.pull-right").prepend('<span class="glyphicon glyphicon-tags" title="' + tagsText +'"></span> ');