dashboard: add vlan to new network options after removing the interface

circle/dashboard/static/dashboard/dashboard.js

@@ -304,9 +304,6 @@ function deleteObject(data) {
           $('a[data-disk-pk="' + data.pk + '"]').parent("li").fadeOut();
           $('a[data-disk-pk="' + data.pk + '"]').parent("h4").fadeOut();
         } 
-        else if(data.type === "interface") {
-          $('a[data-interface-pk="' + data.pk + '"]').closest("div").fadeOut();
-        }
         else { 
           $('a[data-'+data['type']+'-pk="' + data['pk'] + '"]').closest('tr').fadeOut(function() {
             $(this).remove();  

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

@@ -123,8 +123,7 @@ $(function() {
 
   /* add network button */
   $("#vm-details-network-add").click(function() {
-    $("#vm-details-network-add-for-form").html($("#vm-details-network-add-form").html());
-    $('input[name="new_network_managed"]').tooltip();
+    $("#vm-details-network-add-form").toggle();
     return false;
   });
 
@@ -142,7 +141,7 @@ $(function() {
   /* for interface remove buttons */
   $('.interface-remove').click(function() {
     var interface_pk = $(this).data('interface-pk');
-    addModalConfirmation(deleteObject, 
+    addModalConfirmation(removeInterface, 
       { 'url': '/dashboard/interface/' + interface_pk + '/delete/',
         'data': [],
         'pk': interface_pk,
@@ -151,6 +150,34 @@ $(function() {
     return false;
   });
 
+  /* removing interface post */
+  function removeInterface(data) {
+    $.ajax({
+      type: 'POST',
+      url: data['url'],
+      headers: {"X-CSRFToken": getCookie('csrftoken')}, 
+      success: function(re, textStatus, xhr) { 
+        /* remove the html element */
+        $('a[data-interface-pk="' + data.pk + '"]').closest("div").fadeOut();
+        
+        /* add the removed element to the list */
+        network_select = $('select[name="new_network_vlan"]');
+        name_html = (re.removed_network.managed ? "": "") + " " + re.removed_network.vlan;
+        option_html = '<option value="' + re.removed_network.vlan_pk + '">' + name_html + '</option>';
+        // if it's -1 then it's a dummy placeholder so we can use .html
+        if($("option", network_select)[0].value === "-1") {
+          network_select.html(option_html);
+          network_select.next("div").children("button").prop("disabled", false); 
+        } else {
+          network_select.append(option_html);
+        }
+      },
+      error: function(xhr, textStatus, error) {
+        addMessage('Uh oh :(', 'danger')
+      }
+    });
+  }
+
   /* rename */
   $("#vm-details-h1-name, .vm-details-rename-button").click(function() {
     $("#vm-details-h1-name").hide();
@@ -198,7 +225,6 @@ $(function() {
   /* description update ajax */
   $('.vm-details-description-submit').click(function() {
     var description = $(this).prev("textarea").val();
-    console.log(description);
     $.ajax({
       method: 'POST',
       url: location.href,

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

@@ -6,9 +6,41 @@
   {% trans "Interfaces" %}
 </h2>
 
-<div class="row" id="vm-details-network-add-for-form">
-
+<div class="js-hidden row" id="vm-details-network-add-form">
+  <div class="col-md-12">
+    <div>
+      <hr />
+      <h3>
+        {% trans "Add new network interface!" %}
+      </h3>
+      <form method="POST" action="">
+        {% csrf_token %}
+        <div class="input-group" style="max-width: 330px;">
+          <select name="new_network_vlan" class="form-control font-awesome-font">
+            {% for v in vlans %}
+              <option value="{{ v.pk }}">
+                {% if v.managed %}
+                  &#xf0ac;
+                {% else %}
+                  &#xf0c1;
+                {% endif %}
+                {{ v.name }}
+              </option>
+              {% empty %}
+              <option value="-1">No more networks!</option>
+            {% endfor %}
+          </select>
+          <div class="input-group-btn">
+            <button {% if vlans|length == 0 %}disabled{% endif %}
+              type="submit" class="btn btn-success"><i class="icon-plus-sign"></i></button>
+          </div>
+        </div>
+      </form>
+      <hr />
+    </div> 
+  </div>
 </div>
+
 {% for i in instance.interface_set.all %}
 <div>
   <h3 class="list-group-item-heading dashboard-vm-details-network-h3">
@@ -116,37 +148,3 @@
   {% endif %}
 </div>
 {% endfor %}
-<div class="js-hidden row" id="vm-details-network-add-form">
-  <div class="col-md-12">
-    <div>
-      <hr />
-      <h3>
-        {% trans "Add new network interface!" %}
-      </h3>
-      <form method="POST" action="">
-        {% csrf_token %}
-        <div class="input-group" style="max-width: 330px;">
-          <select name="new_network_vlan" class="form-control font-awesome-font">
-            {% for v in vlans %}
-              <option value="{{ v.pk }}">
-                {% if v.managed %}
-                  &#xf0ac;
-                {% else %}
-                  &#xf0c1;
-                {% endif %}
-                {{ v.name }}
-              </option>
-              {% empty %}
-              <option value="-1">No more networks!</option>
-            {% endfor %}
-          </select>
-          <div class="input-group-btn">
-            <button {% if vlans|length == 0 %}disabled{% endif %}
-              type="submit" class="btn btn-success"><i class="icon-plus-sign"></i></button>
-          </div>
-        </div>
-      </form>
-      <hr />
-    </div> 
-  </div>
-</div>

circle/dashboard/views.py

@@ -2277,7 +2277,13 @@ class InterfaceDeleteView(DeleteView):
 
         if request.is_ajax():
             return HttpResponse(
-                json.dumps({'message': success_message}),
+                json.dumps(
+                    {'message': success_message,
+                     'removed_network': {
+                         'vlan': self.object.vlan.name,
+                         'vlan_pk': self.object.vlan.pk,
+                         'managed': self.object.host is not None,
+                     }}),
                 content_type="application/json",
             )
         else: