dashboard: fix js

circle/dashboard/static/dashboard/dashboard.js

@@ -3,62 +3,31 @@ $(function () {
     var template = $(this).data("template");
     $.ajax({
       type: 'GET',
-      url: '/dashboard/vm/create/' + (typeof template === "undefined" ? '' : '?template=' + template),
+      url: $(this).prop('href') + (typeof template === "undefined" ? '' : '?template=' + template),
       success: function(data) {
         $('body').append(data);
         vmCreateLoaded();
         addSliderMiscs();
-        $('#create-modal').modal('show');
-        $('#create-modal').on('hidden.bs.modal', function() {
-          $('#create-modal').remove();
+        var modal = $('#confirmation-modal');
+        modal.modal('show');
+        modal.on('hidden.bs.modal', function() {
+          modal.remove();
         });
       }
     });
     return false;
   });
 
-  $('.node-create').click(function(e) {
+  $('.group-create, .node-create, .tx-tpl-ownership, .group-delete, .node-delete, .disk-remove').click(function(e) {
     $.ajax({
       type: 'GET',
-      url: '/dashboard/node/create/',
+      url: $(this).prop('href'),
       success: function(data) {
         $('body').append(data);
-        nodeCreateLoaded();
-        addSliderMiscs();
-        $('#create-modal').modal('show');
-        $('#create-modal').on('hidden.bs.modal', function() {
-          $('#create-modal').remove();
-        });
-      }
-    });
-    return false;
-  });
-
-  $('.group-create').click(function(e) {
-    $.ajax({
-      type: 'GET',
-      url: '/dashboard/group/create/',
-      success: function(data) {
-        $('body').append(data);
-        addSliderMiscs();
-        $('#create-modal').modal('show');
-        $('#create-modal').on('hidden.bs.modal', function() {
-          $('#create-modal').remove();
-        });
-      }
-    });
-    return false;
-  });
-
-  $('.tx-tpl-ownership').click(function(e) {
-    $.ajax({
-      type: 'GET',
-      url: $('.tx-tpl-ownership').attr('href'),
-      success: function(data) {
-        $('body').append(data);
-        $('#confirmation-modal').modal('show');
-        $('#confirmation-modal').on('hidden.bs.modal', function() {
-          $('#confirmation-modal').remove();
+        var modal = $('#confirmation-modal');
+        modal.modal('show');
+        modal.on('hidden.bs.modal', function() {
+          modal.remove();
         });
       }
     });
@@ -68,12 +37,13 @@ $(function () {
   $('.template-choose').click(function(e) {
     $.ajax({
       type: 'GET',
-      url: '/dashboard/template/choose/',
+      url: $(this).prop('href'),
       success: function(data) {
         $('body').append(data);
-        $('#create-modal').modal('show');
-        $('#create-modal').on('hidden.bs.modal', function() {
-          $('#create-modal').remove();
+        var modal = $('#confirmation-modal');
+        modal.modal('show');
+        modal.on('hidden.bs.modal', function() {
+          modal.remove();
         });
         // check if user selected anything
         $("#template-choose-next-button").click(function() {
@@ -99,6 +69,7 @@ $(function () {
     e.stopImmediatePropagation();
     return false;
   });
+
   $('[href=#index-list-view]').click(function (e) {
     var box = $(this).data('index-box');
     $('#' + box + '-graph-view').hide();
@@ -108,9 +79,10 @@ $(function () {
     e.stopImmediatePropagation();
     return false;
   });
-  $('body [title]:not(.title-favourite)').tooltip();
+
   $('body .title-favourite').tooltip({'placement': 'right'});
   $('body :input[title]').tooltip({trigger: 'focus', placement: 'auto right'});
+  $('body [title]').tooltip();
   $(".knob").knob();
 
   $('[data-toggle="pill"]').click(function() {
@@ -165,74 +137,6 @@ $(function () {
 
   addSliderMiscs();
 
-  /* for VM removes buttons */
-  $('.vm-delete').click(function() {
-    var vm_pk = $(this).data('vm-pk');
-    var dir = window.location.pathname.indexOf('list') == -1;
-    addModalConfirmation(deleteObject,
-      { 'url': '/dashboard/vm/delete/' + vm_pk + '/',
-        'data': [],
-        'pk': vm_pk,
-        'type': "vm",
-        'redirect': dir});
-    return false;
-  });
-
-  /* for disk remove buttons */
-  $('.disk-remove').click(function() {
-    var disk_pk = $(this).data('disk-pk');
-    addModalConfirmation(deleteObject,
-      { 'url': '/dashboard/disk/' + disk_pk + '/remove/',
-        'data': [],
-        'pk': disk_pk,
-        'type': "disk",
-      });
-    return false;
-  });
-
-  /* for Node removes buttons */
-  $('.node-delete').click(function() {
-    var node_pk = $(this).data('node-pk');
-    var dir = window.location.pathname.indexOf('list') == -1;
-    addModalConfirmation(deleteObject,
-      { 'url': '/dashboard/node/delete/' + node_pk + '/',
-        'data': [],
-        'pk': node_pk,
-        'type': "node",
-        'redirect': dir});
-
-    return false;
-  });
-
-  /* for Node flush buttons */
-  $('.node-flush').click(function() {
-    var node_pk = $(this).data('node-pk');
-    var postto = $(this).attr('href');
-    var dir = window.location.pathname.indexOf('list') == -1;
-    addModalConfirmation(function(){},
-      { 'url': postto,
-        'data': [],
-        'pk': node_pk,
-        'type': "node",
-        'redirect': dir});
-
-    return false;
-  });
-
-  /* for Group removes buttons */
-  $('.group-delete').click(function() {
-    var group_pk = $(this).data('group-pk');
-    var dir = window.location.pathname.indexOf('list') == -1;
-    addModalConfirmation(deleteObject,
-      { 'url': '/dashboard/group/delete/' + group_pk + '/',
-        'data': [],
-        'type': "group",
-        'pk': group_pk,
-        'redirect': dir});
-
-    return false;
-  });
-
  /* search for vms */
   var my_vms = [];
   $("#dashboard-vm-search-input").keyup(function(e) {
@@ -556,62 +460,6 @@ function setDefaultSliderValues() {
 }
 
 
-/* deletes the VM with the pk
- * if dir is true, then redirect to the dashboard landing page
- * else it adds a success message */
-function deleteObject(data) {
-  $.ajax({
-    type: 'POST',
-    data: {'redirect': data.redirect},
-    url: data.url,
-    headers: {"X-CSRFToken": getCookie('csrftoken')},
-    success: function(re, textStatus, xhr) {
-      if(!data.redirect) {
-        selected = [];
-        addMessage(re.message, 'success');
-        if(data.type === "disk") {
-          // no need to remove them from DOM
-          $('a[data-disk-pk="' + data.pk + '"]').parent("li").fadeOut();
-          $('a[data-disk-pk="' + data.pk + '"]').parent("h4").fadeOut();
-        }
-        else {
-          $('a[data-'+data.type+'-pk="' + data.pk + '"]').closest('tr').fadeOut(function() {
-            $(this).remove();
-          });
-        }
-      } else {
-        window.location.replace('/dashboard');
-      }
-    },
-    error: function(xhr, textStatus, error) {
-      addMessage('Uh oh :(', 'danger');
-    }
-  });
-}
-
-function massDeleteVm(data) {
-  f = function() {
-    selected = [];
-    // reset group buttons
-    $('.vm-list-group-control a').attr('disabled', true);
-    $(this).remove();
-  };
-  $.ajax({
-      traditional: true,
-      url: data.url,
-      headers: {"X-CSRFToken": getCookie('csrftoken')},
-      type: 'POST',
-      data: {'vms': data.data.v},
-      success: function(re, textStatus, xhr) {
-        for(var i=0; i< data.data.v.length; i++)
-          $('.vm-list-table tbody tr[data-vm-pk="' + data.data.v[i] + '"]').fadeOut(500, f);
-        addMessage(re.message, 'success');
-      },
-      error: function(xhr, textStatus, error) {
-        // TODO this
-      }
-    });
-}
 
 
 function addMessage(text, type) {
@@ -699,6 +547,7 @@ function csrfSafeMethod(method) {
   // these HTTP methods do not require CSRF protection
   return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
 }
+
 $.ajaxSetup({
   beforeSend: function(xhr, settings) {
     if (!csrfSafeMethod(settings.type) && !this.crossDomain) {

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

 $(function() {
   /* rename */
   $("#group-list-rename-button, .group-details-rename-button").click(function() {
-    $("#group-list-column-name", $(this).closest("tr")).hide();
+    $(".group-list-column-name", $(this).closest("tr")).hide();
     $("#group-list-rename", $(this).closest("tr")).css('display', 'inline');
     $("#group-list-rename").find("input").select();
   });
@@ -10,7 +10,7 @@ $(function() {
   $('.group-list-rename-submit').click(function() {
     var row = $(this).closest("tr");
     var name = $('#group-list-rename-name', row).val();
-    var url = '/dashboard/group/' + row.children("td:first-child").text().replace(" ", "") + '/';
+    var url = row.find(".group-list-column-name a").prop("href");
     $.ajax({
       method: 'POST',
       url: url,
@@ -18,7 +18,7 @@ $(function() {
       headers: {"X-CSRFToken": getCookie('csrftoken')},
       success: function(data, textStatus, xhr) {
 
-        $("#group-list-column-name", row).html(
+        $(".group-list-column-name", row).html(
           $("<a/>", {
             'class': "real-link",
             href: "/dashboard/group/" + data.group_pk + "/",

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

@@ -20,15 +20,15 @@ function vmCreateLoaded() {
     var template = $(this).data("template-pk");
 
     $.get("/dashboard/vm/create/?template=" + template, function(data) {
-        var r = $('#create-modal'); r.next('div').remove(); r.remove();
+        var r = $('#confirmation-modal'); r.next('div').remove(); r.remove();
         $('body').append(data);
         vmCreateLoaded();
         addSliderMiscs();
-        $('#create-modal').modal('show');
-        $('#create-modal').on('hidden.bs.modal', function() {
-            $('#create-modal').remove();
+        $('#confirmation-modal').modal('show');
+        $('#confirmation-modal').on('hidden.bs.modal', function() {
+            $('#confirmation-modal').remove();
         });
-        $("#create-modal").on("shown.bs.modal", function() {
+        $("#confirmation-modal").on("shown.bs.modal", function() {
           setDefaultSliderValues();
         });
     });
@@ -48,18 +48,18 @@ function vmCreateLoaded() {
           window.location.replace(data.redirect + '#activity');
         }
         else {
-            var r = $('#create-modal'); r.next('div').remove(); r.remove();
+            var r = $('#confirmation-modal'); r.next('div').remove(); r.remove();
             $('body').append(data);
             vmCreateLoaded();
             addSliderMiscs();
-            $('#create-modal').modal('show');
-            $('#create-modal').on('hidden.bs.modal', function() {
-                $('#create-modal').remove();
+            $('#confirmation-modal').modal('show');
+            $('#confirmation-modal').on('hidden.bs.modal', function() {
+                $('#confirmation-modal').remove();
             });
         }
       },
       error: function(xhr, textStatus, error) {
-        var r = $('#create-modal'); r.next('div').remove(); r.remove();
+        var r = $('#confirmation-modal'); r.next('div').remove(); r.remove();
 
         if (xhr.status == 500) {
           addMessage("500 Internal Server Error", "danger");
@@ -222,7 +222,7 @@ function vmCustomizeLoaded() {
 
     $(this).find("i").prop("class", "fa fa-spinner fa-spin");
 
-    if($("#create-modal")) return true;
+    if($("#confirmation-modal")) return true;
 
     $.ajax({
       url: '/dashboard/vm/create/',
@@ -238,18 +238,18 @@ function vmCustomizeLoaded() {
           window.location.href = data.redirect + '#activity';
         }
         else {
-            var r = $('#create-modal'); r.next('div').remove(); r.remove();
+            var r = $('#confirmation-modal'); r.next('div').remove(); r.remove();
             $('body').append(data);
             vmCreateLoaded();
             addSliderMiscs();
-            $('#create-modal').modal('show');
-            $('#create-modal').on('hidden.bs.modal', function() {
-                $('#create-modal').remove();
+            $('#confirmation-modal').modal('show');
+            $('#confirmation-modal').on('hidden.bs.modal', function() {
+                $('#confirmation-modal').remove();
             });
         }
       },
       error: function(xhr, textStatus, error) {
-        var r = $('#create-modal'); r.next('div').remove(); r.remove();
+        var r = $('#confirmation-modal'); r.next('div').remove(); r.remove();
 
         if (xhr.status == 500) {
           addMessage("500 Internal Server Error", "danger");

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

@@ -43,7 +43,7 @@ $(function() {
     var vm = $(this).data("vm");
     $.ajax({
       type: 'POST',
-      url: "/dashboard/vm/" + vm + "/op/resources_change/",
+      url: $(this).parent("form").prop('action'),
       data: $('#vm-details-resources-form').serialize(),
       success: function(data, textStatus, xhr) {
         if(data.success) {
@@ -89,17 +89,6 @@ $(function() {
     return false;
   });
 
-  /* remove port */
-  $('.vm-details-remove-port').click(function() {
-    addModalConfirmation(removePort,
-      {
-        'url': $(this).prop("href"),
-        'data': [],
-        'rule': $(this).data("rule")
-      });
-    return false;
-  });
-
   /* for js fallback */
   $("#vm-details-pw-show").parent("div").children("input").prop("type", "password");
 

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

@@ -3,19 +3,25 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-body">
-        {% if text %}
-          {{ text|safe }}
+        {% if member %}
+          {% blocktrans with group=object member=member %}
+          Do you really want to remove <strong>{{ member }}</strong> from {{ group }}?
+          {% endblocktrans %}
         {% else %}
-          {%blocktrans with object=object%}
+          {% blocktrans with object=object %}
             Are you sure you want to delete <strong>{{ object }}</strong>?
-          {%endblocktrans%}
+          {% endblocktrans %}
         {% endif %}
         <br />
         <div class="pull-right" style="margin-top: 15px;">
-          <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button>
-          <button id="confirmation-modal-button" type="button" class="btn btn-danger"
-          {% if disable_submit %}disabled{% endif %}
-            >{% trans "Delete" %}</button>
+          <form action="{{ request.path }}" method="POST">
+            {% csrf_token %}
+            <a class="btn btn-default">{% trans "Cancel" %}</a>
+            <input type="hidden" name="next" value="{{ request.GET.next }}"/>
+            <button class="btn btn-danger"
+              {% if disable_submit %}disabled{% endif %}
+              >{% trans "Delete" %}</button>
+          </form>
         </div>
         <div class="clearfix"></div>
       </div>

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

-{% load i18n %}
-<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-body">
-        {% if text %}
-          {{ text }}
-        {% else %}
-          {%blocktrans with object=object%}
-            Are you sure you want to remove <strong>{{ member }}</strong> from <strong>{{ object }}</strong>?
-          {%endblocktrans%}
-        {% endif %}
-        <br />
-        <div class="pull-right" style="margin-top: 15px;">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-          <button id="confirmation-modal-button" type="button" class="btn btn-warning">Remove</button>
-        </div>
-        <div class="clearfix"></div>
-      </div>
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div>

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

@@ -17,12 +17,18 @@
           {% if text %}
             {{ text|safe }}
           {% else %}
-            {%blocktrans with object=object%}
-              Are you sure you want to delete <strong>{{ object }}</strong>?
-            {%endblocktrans%}
+            {% if member %}
+              {% blocktrans with group=object member=member %}
+              Do you really want to remove <strong>{{ member }}</strong> from {{ group }}?
+              {% endblocktrans %}
+            {% else %}
+              {% blocktrans with object=object %}
+                Are you sure you want to delete <strong>{{ object }}</strong>?
+              {% endblocktrans %}
+            {% endif %}
           {% endif %}
         <div class="pull-right">
-          <form action="" method="POST">
+          <form action="{{ request.path }}" method="POST">
             {% csrf_token %}
             <a class="btn btn-default">{% trans "Cancel" %}</a>
             <input type="hidden" name="next" value="{{ request.GET.next }}"/>

circle/dashboard/templates/dashboard/confirm/base-remove.html

-{% extends "base.html" %}
-{% load i18n %}
-
-{% block title-site %}Dashboard | CIRCLE{% endblock %}
-
-{% block content %}
-{% blocktrans with group=object member=member %}
-Do you really want to remove {{member}} from {{group}}?
-{% endblocktrans %}
-
-<form action="" method="POST">{% csrf_token %}
-    <input type="submit" value="{% trans "Remove" %}" />
-</form>
-{% endblock %}

circle/dashboard/templates/dashboard/group-list/column-name.html

@@ -7,6 +7,6 @@
     <button type="submit" class="group-list-rename-submit btn btn-sm">{% trans "Rename" %}</button>
   </form>
 </div>
-<div id="group-list-column-name">
+<div class="group-list-column-name">
   <a class="real-link" href="{% url "dashboard.views.group-detail" pk=record.pk %}">{{ record.name }}</a>
 </div>

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

@@ -79,7 +79,13 @@
                         {{ l.private }}/{{ l.proto }}
                       </td>
                       <td>
-                        <a href="{{ op.remove_port.get_url }}?rule={{ l.ipv4.pk }}" class="btn btn-link btn-xs vm-details-remove-port" data-rule="{{ l.ipv4.pk }}" title="{% trans "Remove" %}"><i class="fa fa-times"><span class="sr-only">{% trans "Remove" %}</span></i></a>
+                        <span class="operation-wrapper">
+                          <a href="{{ op.remove_port.get_url }}?rule={{ l.ipv4.pk }}"
+                             class="btn btn-link btn-xs operation"
+                             title="{% trans "Remove" %}">
+                            <i class="fa fa-times"><span class="sr-only">{% trans "Remove" %}</span></i>
+                          </a>
+                        </span>
                       </td>
                     </tr>
                   {% endif %}

circle/dashboard/views/group.py

@@ -360,7 +360,7 @@ class GroupCreate(GroupCodeMixin, LoginRequiredMixin, TemplateView):
 
     def get_template_names(self):
         if self.request.is_ajax():
-            return ['dashboard/modal-wrapper.html']
+            return ['dashboard/_modal.html']
         else:
             return ['dashboard/nojs-wrapper.html']
 

circle/dashboard/views/node.py

@@ -191,7 +191,7 @@ class NodeCreate(LoginRequiredMixin, SuperuserRequiredMixin, TemplateView):
 
     def get_template_names(self):
         if self.request.is_ajax():
-            return ['dashboard/modal-wrapper.html']
+            return ['dashboard/_modal.html']
         else:
             return ['dashboard/nojs-wrapper.html']
 

circle/dashboard/views/template.py

@@ -56,7 +56,7 @@ class TemplateChoose(LoginRequiredMixin, TemplateView):
 
     def get_template_names(self):
         if self.request.is_ajax():
-            return ['dashboard/modal-wrapper.html']
+            return ['dashboard/_modal.html']
         else:
             return ['dashboard/nojs-wrapper.html']
 

circle/dashboard/views/vm.py

@@ -979,7 +979,7 @@ class VmCreate(LoginRequiredMixin, TemplateView):
 
     def get_template_names(self):
         if self.request.is_ajax():
-            return ['dashboard/modal-wrapper.html']
+            return ['dashboard/_modal.html']
         else:
             return ['dashboard/nojs-wrapper.html']