dashboard: fix vm tour in different vm states

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

@@ -392,6 +392,7 @@ function checkNewActivity(runs) {
       } else {
       } else {
         icon.prop("class", "fa " + data['icon']);
         icon.prop("class", "fa " + data['icon']);
       }
       }
+      $("#vm-details-state").data("status", data['status']);
       $("#vm-details-state span").html(data['human_readable_status'].toUpperCase());
       $("#vm-details-state span").html(data['human_readable_status'].toUpperCase());
       if(data['status'] == "RUNNING") {
       if(data['status'] == "RUNNING") {
         if(data['connect_uri']) {
         if(data['connect_uri']) {

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

@@ -37,8 +37,11 @@ function get_steps() {
   deploy_selector = "#ops";
   deploy_selector = "#ops";
   save_as_selector = "#ops";
   save_as_selector = "#ops";
   if(!$('.timeline .activity i').hasClass('fa-spin')) {
   if(!$('.timeline .activity i').hasClass('fa-spin')) {
-    deploy_selector += ' a[class*="operation-deploy"]';
-    save_as_selector += ' a[class*="operation-save_as"]';
+    vm_status = $("#vm-details-state").data("status");
+    if(vm_status === "PENDING")
+      deploy_selector += ' a[class*="operation-deploy"]';
+    if(vm_status === "RUNNING" || vm_status === "STOPPED")
+      save_as_selector += ' a[class*="operation-save_as_template"]';
   }
   }
 
 
   steps = [
   steps = [
@@ -55,7 +58,7 @@ function get_steps() {
     },
     },
     {
     {
       element: document.querySelector('a[href="#resources"]'),
       element: document.querySelector('a[href="#resources"]'),
-      intro: gettext("On the resources tab you can edit the CPU/RAM options and add/remove disks!"),
+      intro: gettext("On the resources tab you can edit the CPU/RAM options and add/remove disks."),
     },
     },
     {
     {
       element: document.querySelector('#vm-details-resources-form'),
       element: document.querySelector('#vm-details-resources-form'),
@@ -82,7 +85,7 @@ function get_steps() {
     },
     },
     {
     {
       element: document.querySelector("#vm-info-pane"),
       element: document.querySelector("#vm-info-pane"),
-      intro: gettext("Use the connection string or connect with your choice of client!"),
+      intro: gettext("Use the CIRCLE client or the connection string to connect to the virtual machine."),
     },
     },
     {
     {
       element: document.querySelector("#vm-info-pane"),
       element: document.querySelector("#vm-info-pane"),
@@ -94,7 +97,7 @@ function get_steps() {
     },
     },
     {
     {
       element: document.querySelector(".alert-new-template"),
       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: gettext("This is the last message, if something is not clear you can do the the tour again."),
     },
     },
   ];
   ];
   return steps;
   return steps;

circle/dashboard/templates/dashboard/vm-detail.html

@@ -76,7 +76,7 @@
   <div class="row">
   <div class="row">
     <div class="col-md-4" id="vm-info-pane">
     <div class="col-md-4" id="vm-info-pane">
       <div class="big">
       <div class="big">
-        <span id="vm-details-state" class="label label-success">
+        <span id="vm-details-state" class="label label-success" data-status="{{ instance.status }}">
           <i class="fa
           <i class="fa
             {% if is_new_state %}
             {% if is_new_state %}
             fa-spinner fa-spin
             fa-spinner fa-spin