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,10 +361,7 @@ 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,65 +2,13 @@ $(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: [
-        {
-          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>",
-        },
-        {
-          element: document.querySelector('a[href="#home"]'),
-          intro: gettext("In this tab you can tag your virtual machine and modify the name and description."),
-        },
-        {
-          element: document.querySelector('a[href="#resources"]'),
-          intro: gettext("On the resources tab you can edit the CPU/RAM options and add/remove disks!"),
-        },
-        {
-          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>", 
-          position: "top",
-        },
-        {
-          element: document.querySelector('#vm-details-resources-disk'),
-          intro: gettext("You can add empty disks, download new ones and remove existing ones here."),
-          position: "top",
-        },
-        {
-          element: document.querySelector('a[href="#network"]'),
-          intro: gettext('You can add new network interfaces or remove existing ones here.'),
-        },
-        {
-          element: document.querySelector('#ops a[class*="operation-deploy"]'),
-          intro: gettext("Deploy the virtual machine."),
-        },
-        {
-          element: document.querySelector("#vm-info-pane"),
-          intro: gettext("Use the connection string or connect with your choice of client!"),
-        },
-        {
-          element: document.querySelector("#vm-info-pane"),
-          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"]'),
-          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!"),
-        },
-      ]
+      'steps': get_steps(),
     });
     intro.onbeforechange(function(target) {
       /* if the tab menu item is highlighted */
@@ -81,3 +29,73 @@ $(function() {
     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>",
+    },
+    {
+      element: document.querySelector('a[href="#home"]'),
+      intro: gettext("In this tab you can tag your virtual machine and modify the name and description."),
+    },
+    {
+      element: document.querySelector('a[href="#resources"]'),
+      intro: gettext("On the resources tab you can edit the CPU/RAM options and add/remove disks!"),
+    },
+    {
+      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>",
+      position: "top",
+    },
+    {
+      element: document.querySelector('#vm-details-resources-disk'),
+      intro: gettext("You can add empty disks, download new ones and remove existing ones here."),
+      position: "top",
+    },
+    {
+      element: document.querySelector('a[href="#network"]'),
+      intro: gettext('You can add new network interfaces or remove existing ones here.'),
+    },
+    {
+      element: document.querySelector(deploy_selector),
+      intro: gettext("Deploy the virtual machine."),
+    },
+    {
+      element: document.querySelector("#vm-info-pane"),
+      intro: gettext("Use the connection string or connect with your choice of client!"),
+    },
+    {
+      element: document.querySelector("#vm-info-pane"),
+      intro: gettext("After you have connected to the virtual machine do your modifications then log off."),
+    },
+    {
+      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!"),
+    },
+  ];
+  return steps;
+}