dashboard: mass op buttons with js

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

@@ -46,14 +46,9 @@ $(function() {
       selected = [{'index': $(this).index(), 'vm': $(this).data("vm-pk")}];
     }
 
-    // reset btn disables
-    $('.vm-list-table tbody tr .btn').attr('disabled', false);
     // show/hide group controls
     if(selected.length > 0) {
-      $('.vm-list-group-control a').attr('disabled', false);
-      for(var i = 0; i < selected.length; i++) {
-        $('.vm-list-table tbody tr').eq(selected[i]).find('.btn').attr('disabled', true);
-      }
+      $('#vm-mass-ops .mass-operation').attr('disabled', false);
     } else {
       $('.vm-list-group-control a').attr('disabled', true);
     }
@@ -115,6 +110,40 @@ $(function() {
     return false;
   });
 
+
+  $("body").on("click", "#op-form-send", function() {
+    var url = $(this).closest("form").prop("action");
+    $(this).find("i").prop("class", "fa fa-spinner fa-spin");
+
+    $.ajax({
+      url: url,
+      headers: {"X-CSRFToken": getCookie('csrftoken')},
+      type: 'POST',
+      data: $(this).closest('form').serialize(),
+      success: function(data, textStatus, xhr) {
+        /* hide the modal we just submitted */
+        $('#confirmation-modal').modal("hide");
+
+        updateStatuses(1);
+  
+        /* if there are messages display them */
+        if(data.messages && data.messages.length > 0) {
+          addMessage(data.messages.join("<br />"), data.success ? "success" : "danger");
+        }
+      },
+      error: function(xhr, textStatus, error) {
+        $('#confirmation-modal').modal("hide");
+        
+        if (xhr.status == 500) {
+          addMessage("500 Internal Server Error", "danger");
+        } else {
+          addMessage(xhr.status + " Unknown Error", "danger");
+        }
+      }
+    });
+    return false;
+  });
+
   /* table sort */
   var table = $(".vm-list-table").stupidtable();
 

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

@@ -23,23 +23,18 @@
           </div>
         </form>
       </div>
+      <div class="panel-body vm-list-group-control">
       <div id="vm-mass-ops">
+        <strong>{% trans "Group actions" %}</strong>
+        <button id="vm-list-group-select-all" class="btn btn-info btn-xs">{% trans "Select all" %}</button>
       {% for o in ops %}
         <a href="{{ o.get_url }}" class="btn btn-xs btn-{{ o.effect }} mass-operation" 
-         title="{{ o.name }}">
+         title="{{ o.name|capfirst }}" disabled>
           <i class="fa fa-{{ o.icon }}"></i>
         </a>
       {% endfor %}
       </div>
-      <div class="panel-body vm-list-group-control">
-        <p>
-        <strong>{% trans "Group actions" %}</strong>
-        <button id="vm-list-group-select-all" class="btn btn-info btn-xs">{% trans "Select all" %}</button>
-        <a class="btn btn-default btn-xs" id="vm-list-group-migrate" disabled><i class="fa fa-truck"></i> {% trans "Migrate" %}</a>
-        <a disabled href="#" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i> {% trans "Reboot" %}</a>
-        <a disabled href="#" class="btn btn-default btn-xs"><i class="fa fa-off"></i> {% trans "Shutdown" %}</a>
-        <a id="vm-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> {% trans "Destroy" %}</a>
-        </p>
+
       </div>
       <div class="panel-body">
         <table class="table table-bordered table-striped table-hover vm-list-table"