animation added to vm termination

hosting/static/hosting/css/landing-page.css

@@ -853,6 +853,9 @@ a.list-group-item-danger:focus,
 .panel-danger > .panel-heading {
     color: #eb4d5c;
 }
+.alert-danger{
+    background: rgba(235, 204, 209, 0.2);
+}
 .has-error .form-control,
 .has-error .input-group-addon {
     color: #eb4d5c;

hosting/static/hosting/css/virtual-machine.css

@@ -290,6 +290,11 @@
   text-align: center;
 }
 
+.vm-vmid .alert {
+  margin-top: 15px;
+  margin-bottom: -60px;
+}
+
 .vm-item-lg {
   font-size: 22px;
   margin-top: 5px;
@@ -305,6 +310,10 @@
   color: #e47f2f;
 }
 
+.vm-color-failed {
+  color: #eb4d5c;
+}
+
 .vm-detail-item .value{
   font-weight: 400;
 }
@@ -627,4 +636,28 @@
     left: auto;
     right: 8px;
   }
+}
+
+.processing > .btn {
+  position: relative;
+  border-color: #eee;
+}
+.processing > .btn:hover,
+.processing > .btn:focus,
+.processing > .btn:active {
+  border-color: #eee;
+}
+
+.processing > .btn:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  background-image: url('/static/hosting/img/ajax-loader.gif');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: #eee;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  left: 0;
 }

hosting/static/hosting/js/virtual_machine_detail.js

@@ -2,7 +2,43 @@
 $( document ).ready(function() {
 
 	$('#confirm-cancel').on('click', '.btn-ok', function(e) {
-		$('#virtual_machine_cancel_form').trigger('submit');
+    var url = $('#virtual_machine_cancel_form').attr('action');
+    var $container = $('#terminate-VM');
+    var $btn = $container.find('.btn');
+    var text = $container.find('.vm-item-lg').text();
+    var altText = $container.attr('data-alt');
+    $container.find('.alert-danger').addClass('hide');
+    $container.addClass('processing')
+      .find('.vm-item-lg').attr('class', '')
+      .addClass('vm-item-lg vm-color-failed')
+      .text(altText);
+    $btn.prop('disabled', true);
+    $('#confirm-cancel').modal('hide');
+    $.post(url)
+      .done(function(data) {
+        console.log( "success" , data);
+        if (data.status == true) {
+          $container.addClass('terminate-success')
+            .find('.vm-item-lg').text(data.text);
+          $btn.remove();
+          // window.location = data.redirect;
+        }
+        else {
+          $container.addClass('terminate-fail')
+            .find('.vm-item-lg').text(text);
+          $container.find('.btn').prop('disabled', false);
+          $container.find('.alert-danger').text(data.text).removeClass('hide');
+        }
+      })
+      .fail(function(data) {
+        $container.addClass('terminate-fail')
+          .find('.vm-item-lg').text(text);
+        $container.find('.btn').prop('disabled', false);
+        $container.find('.alert-danger').removeClass('hide');
+      })
+      .always(function(data) {
+        $container.removeClass('processing');
+      });
 	});
 
   var hash = window.location.hash;