Fixes #2593: Fix toggling of connected cable's status

CHANGELOG.md

@@ -56,7 +56,8 @@ NetBox now supports modeling physical cables for console, power, and interface c
 * [#2583](https://github.com/digitalocean/netbox/issues/2583) - Cleaned up component filters for device and device type
 * [#2584](https://github.com/digitalocean/netbox/issues/2584) - Prevent a Front port from being connected to its corresponding rear port
 * [#2585](https://github.com/digitalocean/netbox/issues/2585) - Prevent cable connections that include a virtual interface
-* [#2586](https://github.com/digitalocean/netbox/issues/2585) - Added tests for the Cable model's clean() method
+* [#2586](https://github.com/digitalocean/netbox/issues/2586) - Added tests for the Cable model's clean() method
+* [#2593](https://github.com/digitalocean/netbox/issues/2593) - Fix toggling of connected cable's status
 
 ## API Changes
 

netbox/templates/dcim/device.html

@@ -776,8 +776,8 @@
 
 {% block javascript %}
 <script type="text/javascript">
-function toggleConnection(elem, api_url) {
-    var url = netbox_api_path + api_url + elem.attr('data') + "/";
+function toggleConnection(elem) {
+    var url = netbox_api_path + "dcim/cables/" + elem.attr('data') + "/";
     if (elem.hasClass('connected')) {
         $.ajax({
             url: url,
@@ -787,7 +787,7 @@ function toggleConnection(elem, api_url) {
                 xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
             },
             data: {
-                'connection_status': 'False'
+                'status': 'False'
             },
             context: this,
             success: function() {
@@ -806,7 +806,7 @@ function toggleConnection(elem, api_url) {
                 xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
             },
             data: {
-                'connection_status': 'True'
+                'status': 'True'
             },
             context: this,
             success: function() {
@@ -819,14 +819,8 @@ function toggleConnection(elem, api_url) {
     }
     return false;
 }
-$(".consoleport-toggle").click(function() {
-    return toggleConnection($(this), "dcim/console-ports/");
-});
-$(".powerport-toggle").click(function() {
-    return toggleConnection($(this), "dcim/power-ports/");
-});
-$(".interface-toggle").click(function() {
-    return toggleConnection($(this), "dcim/interface-connections/");
+$(".cable-toggle").click(function() {
+    return toggleConnection($(this));
 });
 // Toggle the display of IP addresses under interfaces
 $('button.toggle-ips').click(function() {

netbox/templates/dcim/inc/cable_toggle_buttons.html

@@ -0,0 +1,16 @@
+{% if perms.dcim.change_cable %}
+    {% if cable.status %}
+        <a href="#" class="btn btn-warning btn-xs cable-toggle connected" title="Mark planned" data="{{ cable.pk }}">
+            <i class="glyphicon glyphicon-ban-circle" aria-hidden="true"></i>
+        </a>
+    {% else %}
+        <a href="#" class="btn btn-success btn-xs cable-toggle" title="Mark installed" data="{{ cable.pk }}">
+            <i class="fa fa-plug" aria-hidden="true"></i>
+        </a>
+    {% endif %}
+{% endif %}
+{% if perms.dcim.delete_cable %}
+    <a href="{% url 'dcim:cable_delete' pk=cable.pk %}?return_url={{ device.get_absolute_url }}" title="Remove cable" class="btn btn-danger btn-xs">
+        <i class="glyphicon glyphicon-resize-full" aria-hidden="true"></i>
+    </a>
+{% endif %}

netbox/templates/dcim/inc/consoleport.html

@@ -1,4 +1,4 @@
-<tr class="consoleport{% if cp.connected_endpoint %} {% if cp.connection_status %}success{% else %}info{% endif %}{% endif %}">
+<tr class="consoleport{% if cp.cable.status %} success{% elif cp.cable %} info{% endif %}">
 
     {# Name #}
     <td>
@@ -30,25 +30,14 @@
 
     {# Actions #}
     <td class="text-right">
+        {% if cp.cable %}
+            {% include 'dcim/inc/cable_toggle_buttons.html' with cable=cp.cable %}
+        {% elif perms.dcim.add_cable %}
+            <a href="{% url 'dcim:consoleport_connect' termination_a_id=cp.pk %}?return_url={{ device.get_absolute_url }}" title="Connect" class="btn btn-success btn-xs">
+                <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i>
+            </a>
+        {% endif %}
         {% if perms.dcim.change_consoleport %}
-            {% if cp.cable %}
-                {% if cp.connection_status %}
-                    <a href="#" class="btn btn-warning btn-xs consoleport-toggle connected" title="Mark planned" data="{{ cp.pk }}">
-                        <i class="glyphicon glyphicon-ban-circle" aria-hidden="true"></i>
-                    </a>
-                {% else %}
-                    <a href="#" class="btn btn-success btn-xs consoleport-toggle" title="Mark installed" data="{{ cp.pk }}">
-                        <i class="fa fa-plug" aria-hidden="true"></i>
-                    </a>
-                {% endif %}
-                <a href="{% url 'dcim:cable_delete' pk=cp.cable.pk %}" title="Remove cable" class="btn btn-danger btn-xs">
-                    <i class="glyphicon glyphicon-resize-full" aria-hidden="true"></i>
-                </a>
-            {% else %}
-                <a href="{% url 'dcim:consoleport_connect' termination_a_id=cp.pk %}" title="Connect" class="btn btn-success btn-xs">
-                    <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i>
-                </a>
-            {% endif %}
             <a href="{% url 'dcim:consoleport_edit' pk=cp.pk %}" title="Edit port" class="btn btn-info btn-xs">
                 <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
             </a>

netbox/templates/dcim/inc/consoleserverport.html

@@ -1,4 +1,4 @@
-<tr class="consoleserverport{% if csp.connected_endpoint %} {%if csp.connected_endpoint.connection_status %}success{% else %}info{% endif %}{% endif %}">
+<tr class="consoleserverport{% if csp.cable.status %} success{% elif csp.cable %} info{% endif %}">
 
     {# Checkbox #}
     {% if perms.dcim.change_consoleserverport or perms.dcim.delete_consoleserverport %}
@@ -37,25 +37,14 @@
 
     {# Actions #}
     <td class="text-right">
+        {% if csp.cable %}
+            {% include 'dcim/inc/cable_toggle_buttons.html' with cable=csp.cable %}
+        {% elif perms.dcim.add_cable %}
+            <a href="{% url 'dcim:consoleserverport_connect' termination_a_id=csp.pk %}?return_url={{ device.get_absolute_url }}" title="Connect" class="btn btn-success btn-xs">
+                <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i>
+            </a>
+        {% endif %}
         {% if perms.dcim.change_consoleserverport %}
-            {% if csp.connected_endpoint %}
-                {% if csp.connected_endpoint.connection_status %}
-                    <a href="#" class="btn btn-warning btn-xs consoleport-toggle connected" title="Mark planned" data="{{ csp.connected_endpoint.pk }}">
-                        <i class="glyphicon glyphicon-ban-circle" aria-hidden="true"></i>
-                    </a>
-                {% else %}
-                    <a href="#" class="btn btn-success btn-xs consoleport-toggle" title="Mark installed" data="{{ csp.connected_endpoint.pk }}">
-                        <i class="fa fa-plug" aria-hidden="true"></i>
-                    </a>
-                {% endif %}
-                <a href="{% url 'dcim:cable_delete' pk=csp.cable.pk %}" title="Remove cable" class="btn btn-danger btn-xs">
-                    <i class="glyphicon glyphicon-resize-full" aria-hidden="true"></i>
-                </a>
-            {% else %}
-                <a href="{% url 'dcim:consoleserverport_connect' termination_a_id=csp.pk %}" title="Connect" class="btn btn-success btn-xs">
-                    <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i>
-                </a>
-            {% endif %}
             <a href="{% url 'dcim:consoleserverport_edit' pk=csp.pk %}" title="Edit port" class="btn btn-info btn-xs">
                 <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
             </a>

netbox/templates/dcim/inc/frontport.html

@@ -1,4 +1,4 @@
-<tr class="frontport{% if frontport.cable %} {% if frontport.cable.status %}success{% else %}info{% endif %}{% endif %}">
+<tr class="frontport{% if frontport.cable.status %} success{% elif frontport.cable %} info{% endif %}">
 
     {# Checkbox #}
     {% if perms.dcim.change_frontport or perms.dcim.delete_frontport %}
@@ -30,11 +30,9 @@
 
     {# Actions #}
     <td class="text-right">
-        {% if frontport.cable and perms.dcim.delete_cable %}
-            <a href="{% url 'dcim:cable_delete' pk=frontport.cable.pk %}" title="Remove cable" class="btn btn-danger btn-xs">
-                <i class="glyphicon glyphicon-resize-full" aria-hidden="true"></i>
-            </a>
-        {% elif not frontport.cable and perms.dcim.add_cable %}
+        {% if frontport.cable %}
+            {% include 'dcim/inc/cable_toggle_buttons.html' with cable=frontport.cable %}
+        {% elif perms.dcim.add_cable %}
             <a href="{% url 'dcim:frontport_connect' termination_a_id=frontport.pk %}?return_url={{ device.get_absolute_url }}" class="btn btn-success btn-xs" title="Connect">
                 <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i>
             </a>

netbox/templates/dcim/inc/interface.html

@@ -1,4 +1,4 @@
-<tr class="interface{% if not iface.enabled %} danger{% elif iface.connected_endpoint %} {% if iface.connection_status %}success{% else %}info{% endif %}{% elif iface.circuit_termination %} success{% elif iface.is_virtual %} warning{% endif %}" id="iface_{{ iface.name }}">
+<tr class="interface{% if not iface.enabled %} danger{% elif iface.cable.status %} success{% elif iface.cable %} info{% elif iface.is_virtual %} warning{% endif %}" id="iface_{{ iface.name }}">
 
     {# Checkbox #}
     {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
@@ -104,25 +104,12 @@
             </a>
         {% endif %}
         {% if perms.dcim.change_interface %}
-            {% if not iface.is_virtual %}
-                {% if iface.cable %}
-                    {% if iface.cable.status %}
-                        <a href="#" class="btn btn-warning btn-xs interface-toggle connected" data="{{ iface.cable.pk }}" title="Mark planned">
-                            <i class="glyphicon glyphicon-ban-circle" aria-hidden="true"></i>
-                        </a>
-                    {% else %}
-                        <a href="#" class="btn btn-success btn-xs interface-toggle" data="{{ iface.cable.pk }}" title="Mark installed">
-                            <i class="fa fa-plug" aria-hidden="true"></i>
-                        </a>
-                    {% endif %}
-                    <a href="{% url 'dcim:cable_delete' pk=iface.cable.pk %}?return_url={{ device.get_absolute_url }}" class="btn btn-danger btn-xs" title="Remove cable">
-                        <i class="glyphicon glyphicon-resize-full" aria-hidden="true"></i>
-                    </a>
-                {% else %}
-                    <a href="{% url 'dcim:interface_connect' termination_a_id=iface.pk %}?return_url={{ device.get_absolute_url }}" class="btn btn-success btn-xs" title="Connect">
-                        <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i>
-                    </a>
-                {% endif %}
+            {% if iface.cable %}
+                {% include 'dcim/inc/cable_toggle_buttons.html' with cable=iface.cable %}
+            {% elif not iface.is_virtual and perms.dcim.add_cable %}
+                <a href="{% url 'dcim:interface_connect' termination_a_id=iface.pk %}?return_url={{ device.get_absolute_url }}" class="btn btn-success btn-xs" title="Connect">
+                    <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i>
+                </a>
             {% endif %}
             <a href="{% if iface.device_id %}{% url 'dcim:interface_edit' pk=iface.pk %}{% else %}{% url 'virtualization:interface_edit' pk=iface.pk %}{% endif %}?return_url={{ device.get_absolute_url }}" class="btn btn-info btn-xs" title="Edit interface">
                 <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>

netbox/templates/dcim/inc/poweroutlet.html

@@ -1,4 +1,4 @@
-<tr class="poweroutlet{% if po.connected_endpoint %} {% if po.connected_endpoint.connection_status %}success{% else %}info{% endif %}{% endif %}">
+<tr class="poweroutlet{% if po.cable.status %} success{% elif po.cable %} info{% endif %}">
 
     {# Checkbox #}
     {% if perms.dcim.change_poweroutlet or perms.dcim.delete_poweroutlet %}
@@ -37,25 +37,14 @@
 
     {# Actions #}
     <td class="text-right">
+        {% if po.cable %}
+            {% include 'dcim/inc/cable_toggle_buttons.html' with cable=po.cable %}
+        {% elif perms.dcim.add_cable %}
+            <a href="{% url 'dcim:poweroutlet_connect' termination_a_id=po.pk %}?return_url={{ device.get_absolute_url }}" title="Connect" class="btn btn-success btn-xs">
+                <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i>
+            </a>
+        {% endif %}
         {% if perms.dcim.change_poweroutlet %}
-            {% if po.connected_endpoint %}
-                {% if po.connected_endpoint.connection_status %}
-                    <a href="#" class="btn btn-warning btn-xs powerport-toggle connected" title="Mark planned" data="{{ po.connected_endpoint.pk }}">
-                        <i class="glyphicon glyphicon-ban-circle" aria-hidden="true"></i>
-                    </a>
-                {% else %}
-                    <a href="#" class="btn btn-success btn-xs powerport-toggle" title="Mark installed" data="{{ po.connected_endpoint.pk }}">
-                        <i class="fa fa-plug" aria-hidden="true"></i>
-                    </a>
-                {% endif %}
-                <a href="{% url 'dcim:cable_delete' pk=po.cable.pk %}" title="Remove cable" class="btn btn-danger btn-xs">
-                    <i class="glyphicon glyphicon-resize-full" aria-hidden="true"></i>
-                </a>
-            {% else %}
-                <a href="{% url 'dcim:poweroutlet_connect' termination_a_id=po.pk %}" title="Connect" class="btn btn-success btn-xs">
-                    <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i>
-                </a>
-            {% endif %}
             <a href="{% url 'dcim:poweroutlet_edit' pk=po.pk %}" title="Edit outlet" class="btn btn-info btn-xs">
                 <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
             </a>

netbox/templates/dcim/inc/powerport.html

@@ -1,4 +1,4 @@
-<tr class="powerport{% if pp.connected_endpoint %} {% if pp.connection_status %}success{% else %}info{% endif %}{% endif %}">
+<tr class="powerport{% if pp.cable.status %} success{% elif pp.cable %} info{% endif %}">
 
     {# Name #}
     <td>
@@ -30,25 +30,14 @@
 
     {# Actions #}
     <td class="text-right">
+        {% if pp.cable %}
+            {% include 'dcim/inc/cable_toggle_buttons.html' with cable=pp.cable %}
+        {% elif perms.dcim.add_cable %}
+            <a href="{% url 'dcim:powerport_connect' termination_a_id=pp.pk %}?return_url={{ device.get_absolute_url }}" title="Connect" class="btn btn-success btn-xs">
+                <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i>
+            </a>
+        {% endif %}
         {% if perms.dcim.change_powerport %}
-            {% if pp.cable %}
-                {% if pp.connection_status %}
-                    <a href="#" class="btn btn-warning btn-xs powerport-toggle connected" title="Mark planned" data="{{ pp.pk }}">
-                        <i class="glyphicon glyphicon-ban-circle" aria-hidden="true"></i>
-                    </a>
-                {% else %}
-                    <a href="#" class="btn btn-success btn-xs powerport-toggle" title="Mark installed" data="{{ pp.pk }}">
-                        <i class="fa fa-plug" aria-hidden="true"></i>
-                    </a>
-                {% endif %}
-                <a href="{% url 'dcim:cable_delete' pk=pp.cable.pk %}" title="Remove cable" class="btn btn-danger btn-xs">
-                    <i class="glyphicon glyphicon-resize-full" aria-hidden="true"></i>
-                </a>
-            {% else %}
-                <a href="{% url 'dcim:powerport_connect' termination_a_id=pp.pk %}" title="Connect" class="btn btn-success btn-xs">
-                    <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i>
-                </a>
-            {% endif %}
             <a href="{% url 'dcim:powerport_edit' pk=pp.pk %}" title="Edit port" class="btn btn-info btn-xs">
                 <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
             </a>

netbox/templates/dcim/inc/rearport.html

@@ -1,4 +1,4 @@
-<tr class="rearport{% if rearport.cable %} {% if rearport.cable.status %}success{% else %}info{% endif %}{% endif %}">
+<tr class="rearport{% if rearport.cable.status %} success{% elif rearport.cable %} info{% endif %}">
 
     {# Checkbox #}
     {% if perms.dcim.change_rearport or perms.dcim.delete_rearport %}
@@ -29,11 +29,9 @@
 
     {# Actions #}
     <td class="text-right">
-        {% if rearport.cable and perms.dcim.delete_cable %}
-            <a href="{% url 'dcim:cable_delete' pk=rearport.cable.pk %}" title="Remove cable" class="btn btn-danger btn-xs">
-                <i class="glyphicon glyphicon-resize-full" aria-hidden="true"></i>
-            </a>
-        {% elif not rearport.cable and perms.dcim.add_cable %}
+        {% if rearport.cable %}
+            {% include 'dcim/inc/cable_toggle_buttons.html' with cable=rearport.cable %}
+        {% elif perms.dcim.add_cable %}
             <a href="{% url 'dcim:rearport_connect' termination_a_id=rearport.pk %}?return_url={{ device.get_absolute_url }}" class="btn btn-success btn-xs" title="Connect">
                 <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i>
             </a>