dashboard: fix vm tour

If an activity was already active it kept reloading #ops and introjs
couldn't find it.

Also removed the activity check if there is only 1 activity

circle/dashboard/static/dashboard/dashboard.css

@@ -981,3 +981,13 @@ textarea[name="new_members"] {
 .hilight .autocomplete-hl {
   color: orange;
 }
+
+.introjs-button:focus {
+  text-decoration: none;
+  color: #333;
+  outline: none;
+}
+
+.introjs-button:hover {
+  color: #428bca;
+}

circle/dashboard/static/dashboard/vm-details.js

@@ -361,9 +361,6 @@ function decideActivityRefresh() {
   /* if something is still spinning */
   if($('.timeline .activity i').hasClass('fa-spin'))
     check = true;
-  /* if there is only one activity */
-  if($('#activity-timeline div[class="activity"]').length < 2)
-    check = true;
 
   return check;
 }

circle/dashboard/static/dashboard/vm-tour.js

@@ -2,19 +2,52 @@ $(function() {
   $("#vm-details-start-template-tour").click(function() {
     var intro = introJs();
     intro.setOptions({
-      'nextLabel': gettext("Next"),
-      'prevLabel': gettext("Previous"),
+      'nextLabel': gettext("Next") + ' <i class="fa fa-chevron-right"></i>',
+      'prevLabel': '<i class="fa fa-chevron-left"></i> ' + gettext("Previous"),
       'skipLabel': gettext("Skip"),
       'doneLabel': gettext("Done"),
     });
     intro.setOptions({
-      steps: [
+      'steps': get_steps(),
+    });
+    intro.onbeforechange(function(target) {
+      /* if the tab menu item is highlighted */
+      if($(target).data("toggle") == "pill") {
+        $(target).trigger("click");
+      }
+
+      /* if anything in a tab is highlighted change to that tab */
+      var tab = $(target).closest('.tab-pane:not([id^="ipv"])');
+      var id = tab.prop("id");
+      if(id) {
+        id = id.substring(1, id.length);
+        $('a[href="#' + id + '"]').trigger("click");
+      }
+    });
+    intro.start();
+
+    return false;
+  });
+});
+
+
+function get_steps() {
+  // if an activity is running the #ops will be refreshed
+  // and the intro will break
+  deploy_selector = "#ops";
+  save_as_selector = "#ops";
+  if(!$('.timeline .activity i').hasClass('fa-spin')) {
+    deploy_selector += ' a[class*="operation-deploy"]';
+    save_as_selector += ' a[class*="operation-save_as"]';
+  }
+
+  steps = [
     {
       element: document.querySelector("#vm-details-start-template-tour"),
       intro: "<p>" + gettext("Welcome to the template tutorial. In this quick tour, we gonna show you how to do the steps described above.") + "</p>" +
              "<p>" + gettext('For the next tour step press the "Next" button or the right arrow (or "Back" button/left arrow for the previous step).') + "</p>" +
-                 "<p>" + gettext("During the tour please don't try the functions because it may lead to graphical glitches, however " +
-                                 "you can end the tour any time you want with the End Tour button!") + "</p>",
+             "<p>" + gettext("During the tour please don't try the functions because it may lead to graphical glitches, however you can end the tour any time you want with the End Tour button!") + 
+             "</p>",
     },
     {
       element: document.querySelector('a[href="#home"]'),
@@ -26,9 +59,12 @@ $(function() {
     },
     {
       element: document.querySelector('#vm-details-resources-form'),
-          intro: '<p><strong>' + gettext("CPU priority") + ":</strong> " + gettext("higher is better") + "</p>" + 
-                 '<p><strong>' + gettext("CPU count") + ":</strong> " + gettext("number of CPU cores.") + "</p>" +
-                 '<p><strong>' + gettext("RAM amount") + ":</strong> " + gettext("amount of RAM.") + "</p>", 
+      intro: '<p><strong>' + gettext("CPU priority") + ":</strong> " +
+              gettext("higher is better") + "</p>" +
+              "<p><strong>" + gettext("CPU count") + ":</strong> " +
+              gettext("number of CPU cores.") + "</p>" +
+              "<p><strong>" + gettext("RAM amount") + ":</strong> " +
+              gettext("amount of RAM.") + "</p>",
       position: "top",
     },
     {
@@ -41,7 +77,7 @@ $(function() {
       intro: gettext('You can add new network interfaces or remove existing ones here.'),
     },
     {
-          element: document.querySelector('#ops a[class*="operation-deploy"]'),
+      element: document.querySelector(deploy_selector),
       intro: gettext("Deploy the virtual machine."),
     },
     {
@@ -53,31 +89,13 @@ $(function() {
       intro: gettext("After you have connected to the virtual machine do your modifications then log off."),
     },
     {
-          element: document.querySelector('#ops a[class*="operation-save_as"]'),
+      element: document.querySelector(save_as_selector),
       intro: gettext('Press the "Save as template" button and wait until the activity finishes.'),
     },
     {
       element: document.querySelector(".alert-new-template"),
       intro: gettext("This is the last message, if something is not clear you can do the the tour again!"),
     },
-      ]
-    });
-    intro.onbeforechange(function(target) {
-      /* if the tab menu item is highlighted */
-      if($(target).data("toggle") == "pill") {
-        $(target).trigger("click");
-      }
-
-      /* if anything in a tab is highlighted change to that tab */
-      var tab = $(target).closest('.tab-pane:not([id^="ipv"])');
-      var id = tab.prop("id");
-      if(id) {
-        id = id.substring(1, id.length);
-        $('a[href="#' + id + '"]').trigger("click");
-      }
-    });
-    intro.start();
-
-    return false;
-  });
-});
+  ];
+  return steps;
+}