dashboard: hide template tour box

circle/dashboard/static/dashboard/dashboard.css

@@ -684,7 +684,7 @@ textarea[name="list-new-namelist"] {
 
 .dashboard-vm-details-connect-command {
   /* for mobile view */
-  margin-bottom: 20px;
+  padding-bottom: 20px;
 }
 
 #store-list-list {
@@ -956,3 +956,11 @@ textarea[name="list-new-namelist"] {
 #vm-list-search-checkbox-span {
   cursor: pointer
 }
+
+#vm-details-resources-disk {
+  padding: 2px 5px 10px 5px;
+}
+
+#vm-details-start-template-tour {
+  margin-right: 5px;
+}

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

@@ -315,6 +315,24 @@ $(function() {
     if(Boolean($(this).data("disabled"))) return false;
   });
 
+  $("#dashboard-tutorial-toggle").click(function() {
+    var box = $("#alert-new-template");
+    var list = box.find("ol")
+    list.stop().slideToggle(function() {
+      var url = box.find("form").prop("action");
+      var hidden = list.css("display") === "none";
+      box.find("button i").prop("class", "fa fa-caret-" + (hidden ? "down" : "up"));
+      $.ajax({
+        type: 'POST',
+        url: url,
+        data: {'hidden': hidden},
+        headers: {"X-CSRFToken": getCookie('csrftoken')},
+        success: function(re, textStatus, xhr) {}
+      });
+    }); 
+    return false;
+  });
+
 });
 
 

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

 $(function() {
-  $(".vm-details-start-template-tour").click(function() {
+  $("#vm-details-start-template-tour").click(function() {
     var intro = introJs();
     intro.setOptions({
       'nextLabel': gettext("Next"),
@@ -10,7 +10,7 @@ $(function() {
     intro.setOptions({
       steps: [
         {
-          element: document.querySelector("#vm-details-template-tour-button"),
+          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 " +
@@ -27,19 +27,21 @@ $(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>", 
+                 '<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"),
+          element: document.querySelector('#ops a[class*="operation-deploy"]'),
           intro: gettext("Deploy the virtual machine."),
         },
         {
@@ -51,7 +53,7 @@ $(function() {
           intro: gettext("After you have connected to the virtual machine do your modifications then log off."),
         },
         {
-          element: document.querySelector("#ops"),
+          element: document.querySelector('#ops a[class*="operation-save_as"]'),
           intro: gettext('Press the "Save as template" button and wait until the activity finishes.'),
         },
         {

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

@@ -6,14 +6,25 @@
 {% block content %}
 
 {% if instance.is_base %}
-<div class="alert alert-info alert-new-template">
-  <strong>{% trans "This is the master vm of your new template" %}</strong>
-  <div id="vm-details-template-tour-button" class="pull-right">
-    <a href="#" class="btn btn-default btn-lg pull-right vm-details-start-template-tour">
+<div class="alert alert-info alert-new-template" id="alert-new-template" style="position: relative;"> 
+  <form action="{% url "dashboard.views.vm-toggle-tutorial" pk=instance.pk %}"
+    method="POST">
+    {% csrf_token %}
+    <input name="hidden" type="hidden" 
+     value="{{ hide_tutorial|yesno:"false,true" }}"/>
+    <button type="submit" 
+      id="dashboard-tutorial-toggle" class="btn btn-sm pull-right btn-success">
+      <i class="fa fa-caret-{% if hide_tutorial %}down{% else %}up{% endif %}"></i> 
+      {% trans "Toggle tutorial panel" %}
+    </button>
+
+    <a href="#" class="btn btn-default btn-sm pull-right" 
+      id="vm-details-start-template-tour">
       <i class="fa fa-play"></i> {% trans "Start template tutorial" %}
     </a>
-  </div>
-  <ol>
+  </form>
+  <strong>{% trans "This is the master vm of your new template" %}</strong>
+  <ol {% if hide_tutorial %}style="display: none;"{% endif %}>
     <li>{% trans "Modify the virtual machine to suit your needs <strong>(optional)</strong>" %}
       <ul>
         <li>{% trans "Change the description" %}</li>

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

@@ -18,34 +18,28 @@
 {% endif %}
 </form>
 
-
 <hr />
 
-
-<div class="row" id="vm-details-resources-disk">
-  <div class="col-sm-11">
-    <h3>
-      {% trans "Disks" %}
-      <div class="pull-right">
-        <div id="disk-ops">
-          {% include "dashboard/vm-detail/_disk-operations.html" %}
-        </div>
+<div id="vm-details-resources-disk">
+  <h3>
+    {% trans "Disks" %}
+    <div class="pull-right">
+      <div id="disk-ops">
+        {% include "dashboard/vm-detail/_disk-operations.html" %}
       </div>
-    </h3>
-
-    <div class="row" id="vm-details-disk-add-for-form"></div>
-
-    {% if not instance.disks.all %}
-      {% trans "No disks are added!" %}
-    {% endif %}
-    {% for d in instance.disks.all %}
-      <h4 class="list-group-item-heading dashboard-vm-details-network-h3">
-        {% with long_remove=True %}
-          {% include "dashboard/_disk-list-element.html" %}
-        {% endwith %}
-      </h4>
-    {% endfor %}
-  </div>
+    </div>
+  </h3>
+
+  {% if not instance.disks.all %}
+    {% trans "No disks are added." %}
+  {% endif %}
+  {% for d in instance.disks.all %}
+    <h4 class="list-group-item-heading dashboard-vm-details-network-h3">
+      {% with long_remove=True %}
+        {% include "dashboard/_disk-list-element.html" %}
+      {% endwith %}
+    </h4>
+  {% endfor %}
 </div>
 
 {% if user.is_superuser %}

circle/dashboard/urls.py

@@ -45,6 +45,7 @@ from .views import (
     VmTraitsUpdate, VmRawDataUpdate,
     GroupPermissionsView,
     LeaseAclUpdateView,
+    toggle_template_tutorial,
 )
 
 autocomplete_light.autodiscover()
@@ -97,6 +98,8 @@ urlpatterns = patterns(
         name='dashboard.views.vm-traits'),
     url(r'^vm/(?P<pk>\d+)/raw_data/$', VmRawDataUpdate.as_view(),
         name='dashboard.views.vm-raw-data'),
+    url(r'^vm/(?P<pk>\d+)/toggle_tutorial/$', toggle_template_tutorial,
+        name='dashboard.views.vm-toggle-tutorial'),
 
     url(r'^node/list/$', NodeList.as_view(), name='dashboard.views.node-list'),
     url(r'^node/(?P<pk>\d+)/$', NodeDetailView.as_view(),

circle/dashboard/views.py

@@ -361,13 +361,16 @@ class VmDetailView(CheckedDetailView):
         instance = context['instance']
         user = self.request.user
         ops = get_operations(instance, user)
+        hide_tutorial = self.request.COOKIES.get(
+            "hide_tutorial_for_%s" % instance.pk) == "True"
         context.update({
             'graphite_enabled': settings.GRAPHITE_URL is not None,
             'vnc_url': reverse_lazy("dashboard.views.detail-vnc",
                                     kwargs={'pk': self.object.pk}),
             'ops': ops,
             'op': {i.op: i for i in ops},
-            'connect_commands': user.profile.get_connect_commands(instance)
+            'connect_commands': user.profile.get_connect_commands(instance),
+            'hide_tutorial': hide_tutorial,
         })
 
         # activity data
@@ -3635,3 +3638,13 @@ def store_refresh_toplist(request):
 
 def absolute_url(url):
     return urljoin(settings.DJANGO_URL, url)
+
+
+@login_required
+def toggle_template_tutorial(request, pk):
+    hidden = request.POST.get("hidden", "").lower() == "true"
+    instance = get_object_or_404(Instance, pk=pk)
+    response = HttpResponseRedirect(instance.get_absolute_url())
+    response.set_cookie(  # for a week
+        "hide_tutorial_for_%s" % pk, hidden, 7 * 24 * 60 * 60)
+    return response