dashboard: ajax vm delete buttons

circle/dashboard/static/dashboard/dashboard.js

@@ -39,6 +39,15 @@ $(function () {
     $("a[href=" + window.location.hash +"]").tab('show');
 
   addSliderMiscs();
+
+  /* for VM removes buttons */
+  $('.vm-delete').click(function() {
+    var vm_pk = $(this).data('vm-pk');
+    text = "Are you sure you want to delete this VM?";
+    var dir = window.location.pathname.indexOf('list') == -1;
+    addModalConfirmation(text, vm_pk, deleteVm, dir);
+    return false;
+  });
 });
 
 function addSliderMiscs() {
@@ -63,6 +72,32 @@ function refreshSliders() {
   });
 }
 
+/* deletes the VM with the pk
+ * if dir is true, then redirect to the dashboard landing page
+ * else it adds a success message */
+function deleteVm(pk, dir) {
+  $.ajax({
+    type: 'POST',
+    data: {'redirect': dir},
+    url: '/dashboard/vm/delete/' + pk + '/',
+    headers: {"X-CSRFToken": getCookie('csrftoken')}, 
+    success: function(data, textStatus, xhr) { 
+      if(!dir) {
+        addMessage(data['message'], 'success');
+        $('a[data-vm-pk="' + pk + '"]').closest('tr').fadeOut(function() {
+          $(this).remove();  
+        });
+      } else {
+        window.location.replace('/dashboard');
+      }
+    },
+    error: function(xhr, textStatus, error) {
+      addMessage('Uh oh :(', 'danger')
+    }
+  });
+}
+
+
 function addMessage(text, type) {
   div = '<div style="display: none;" class="alert alert-' + type + '">' + text + '</div>';
   $('.messagelist').html('').append(div);
@@ -70,8 +105,23 @@ function addMessage(text, type) {
 }
 
 
-function addConfirmationModal(text, func) {
-
+function addModalConfirmation(text, data, func, dir) {
+  $.ajax({
+    type: 'GET',
+    url: '/dashboard/vm/delete/' + data + '/',
+    data: {'text': text},
+    success: function(result) {
+      $('body').append(result);
+      $('#confirmation-modal').modal('show');
+      $('#confirmation-modal').on('hidden.bs.modal', function() {
+        $('#confirmation-modal').remove();
+      });
+      $('#confirmation-modal-button').click(function() {
+        func(data, dir);
+        $('#confirmation-modal').modal('hide');
+      });
+    }
+  });
 }
 
 // for AJAX calls

circle/dashboard/templates/dashboard/confirm/ajax-delete.html

+<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog"> 
+  <div class="modal-dialog"> 
+    <div class="modal-content"> 
+      <div class="modal-body">  
+        {{ request.GET.text }}
+        <br />
+        <div class="pull-right">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
+          <button id="confirmation-modal-button" type="button" class="btn btn-danger">Delete</button> 
+        </div>
+        <div class="clearfix"></div>
+      </div>
+    </div><!-- /.modal-content --> 
+  </div><!-- /.modal-dialog --> 
+</div>

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

@@ -15,7 +15,7 @@
           <ul class="dropdown-menu" role="menu">
             <li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
             <li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
-            <li><a href="{% url "dashboard.views.delete-vm" pk=instance.pk %}"><i class="icon-remove"></i> Discard</a></li>
+            <li><a data-vm-pk="{{ instance.pk }}" class="vm-delete" href="{% url "dashboard.views.delete-vm" pk=instance.pk %}"><i class="icon-remove"></i> Discard</a></li>
           </ul>
         </div>
       </div>

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

@@ -4,6 +4,6 @@
   <ul class="dropdown-menu" role="menu">
     <li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
     <li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
-    <li><a class="real-link" href="{% url "dashboard.views.delete-vm" pk=record.pk %}?next={{ request.path }}"><i class="icon-remove"></i> Discard</a></li>
+    <li><a data-vm-pk="{{ record.pk }}" class="real-link vm-delete" href="{% url "dashboard.views.delete-vm" pk=record.pk %}?next={{ request.path }}"><i class="icon-remove"></i> Discard</a></li>
   </ul>
 </div>

circle/dashboard/views.py

@@ -248,7 +248,13 @@ class VmCreate(TemplateView):
 
 class VmDelete(DeleteView):
     model = Instance
-    template_name = "dashboard/confirm/base_delete.html"
+    template_name = "dashboard/confirm/base-delete.html"
+
+    def get_template_names(self):
+        if self.request.is_ajax():
+            return ['dashboard/confirm/ajax-delete.html']
+        else:
+            return ['dashboard/confirm/base-delete.html']
 
     def get_context_data(self, **kwargs):
         # this is redundant now, but if we wanna add more to print
@@ -267,6 +273,8 @@ class VmDelete(DeleteView):
         success_message = _("VM successfully deleted!")
 
         if request.is_ajax():
+            if request.POST.get('redirect').lower() == "true":
+                messages.success(request, success_message)
             return HttpResponse(
                 json.dumps({'message': success_message}),
                 content_type="application/json",