dashboard: improve vnc console

- fix screenshot button
- add warning message if user has no perm to see the console

circle/dashboard/static/dashboard/activity.js

@@ -145,11 +145,13 @@ $(function() {
               $("#dashboard-vm-details-connect-button").removeClass('disabled');
               $("#dashboard-vm-details-connect-button").removeClass('disabled');
           }
           }
           $("[data-target=#_console]").attr("data-toggle", "pill").attr("href", "#console").parent("li").removeClass("disabled");
           $("[data-target=#_console]").attr("data-toggle", "pill").attr("href", "#console").parent("li").removeClass("disabled");
+          $("#getScreenshotButton").prop("disabled", false);
         } else {
         } else {
           if(data.connect_uri) {
           if(data.connect_uri) {
               $("#dashboard-vm-details-connect-button").addClass('disabled');
               $("#dashboard-vm-details-connect-button").addClass('disabled');
           }
           }
           $("[data-target=#_console]").attr("data-toggle", "_pill").attr("href", "#").parent("li").addClass("disabled");
           $("[data-target=#_console]").attr("data-toggle", "_pill").attr("href", "#").parent("li").addClass("disabled");
+          $("#getScreenshotButton").prop("disabled", true);
         }
         }
 
 
         if(data.status == "STOPPED" || data.status == "PENDING") {
         if(data.status == "STOPPED" || data.status == "PENDING") {

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

@@ -185,12 +185,13 @@ $(function() {
     $("i", this).addClass("fa-spinner fa-spin");
     $("i", this).addClass("fa-spinner fa-spin");
     $(this).prop("disabled", true);
     $(this).prop("disabled", true);
     ct.slideDown();
     ct.slideDown();
-    var img = $("img", ct).prop("src", '/dashboard/vm/' + vm + '/screenshot/');
+    var img = $("img", ct).prop("src", '/dashboard/vm/' + vm + '/screenshot/?rnd=' + Math.random());
   });
   });
 
 
   // if the image is loaded remove the spinning stuff
   // if the image is loaded remove the spinning stuff
   // note: this should not work if the image is cached, but it's not
   // note: this should not work if the image is cached, but it's not
   // see: http://stackoverflow.com/a/3877079/1112653
   // see: http://stackoverflow.com/a/3877079/1112653
+  // note #2: it actually gets cached, so a random number is appended
   $("#vm-console-screenshot img").load(function(e) {
   $("#vm-console-screenshot img").load(function(e) {
     $("#getScreenshotButton").prop("disabled", false)
     $("#getScreenshotButton").prop("disabled", false)
     .find("i").removeClass("fa-spinner fa-spin");
     .find("i").removeClass("fa-spinner fa-spin");
@@ -200,7 +201,7 @@ $(function() {
 
 
   // screenshot close
   // screenshot close
   $("#vm-console-screenshot button").click(function() {
   $("#vm-console-screenshot button").click(function() {
-    $(this).parent("div").slideUp();
+    $(this).closest("div").slideUp();
   });
   });
 
 
   // select connection string
   // select connection string

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

 {% load i18n %}
 {% load i18n %}
 {% load staticfiles %}
 {% load staticfiles %}
-<div class="btn-toolbar">
-{% if perms.vm.access_console %}
-  <button id="sendCtrlAltDelButton" class="btn btn-danger btn-sm">{% trans "Send Ctrl+Alt+Del" %}</button>
-  <button id="sendPasswordButton" class="btn btn-default btn-sm">{% trans "Type password" %}</button>
+
+{% if not perms.vm.vm_access_console %}
+  <div class="alert alert-warning">
+    {% trans "You are not authorized to access the VNC console." %}
+  </div>
 {% endif %}
 {% endif %}
-  <button id="getScreenshotButton" class="btn btn-info btn-sm pull-right" data-vm-pk="{{ instance.pk }}"><i class="fa fa-picture"></i> {% trans "Screenshot" %}</button>
+<div class="row">
+  <div class="col-xs-7">
+    <div class="btn-toolbar">
+    {% if perms.vm.access_console %}
+      <button id="sendCtrlAltDelButton" class="btn btn-danger btn-sm">
+        {% trans "Send Ctrl+Alt+Del" %}
+      </button>
+      <button id="sendPasswordButton" class="btn btn-default btn-sm">
+        {% trans "Type password" %}
+      </button>
+    {% endif %}
+    </div>
+  </div>
+  <div class="col-xs-5 text-right">
+    <button id="getScreenshotButton" class="btn btn-info btn-sm" data-vm-pk="{{ instance.pk }}">
+      <i class="fa fa-photo"></i> {% trans "Screenshot" %}
+    </button>
+  </div>
 </div>
 </div>
+
+
 {% if perms.vm.access_console %}
 {% if perms.vm.access_console %}
-<div class="alert alert-info" id="noVNC_status">
-</div>
+  <div class="alert alert-info" id="noVNC_status"></div>
 {% endif %}
 {% endif %}
 
 
 <div id="vm-console-screenshot">
 <div id="vm-console-screenshot">
-  <button class="btn btn-danger btn-sm pull-right">{% trans "Close" %}</button>
-  <h3>{% trans "Screenshot" %}</h3>
+  <h3>
+    <button class="btn btn-danger btn-sm pull-right">{% trans "Close" %}</button>
+    {% trans "Screenshot" %}
+  </h3>
   <img />
   <img />
   <hr />
   <hr />
 </div>
 </div>