Closes #4996: Add "connect" buttons to individual device component views

docs/release-notes/version-2.9.md

@@ -13,6 +13,7 @@
 * [#4969](https://github.com/netbox-community/netbox/issues/4969) - Replace secret role user/group assignment with object permissions
 * [#4982](https://github.com/netbox-community/netbox/issues/4982) - Extended ObjectVar to allow filtering API query
 * [#4994](https://github.com/netbox-community/netbox/issues/4994) - Add `cable` attribute to PowerFeed API serializer
+* [#4996](https://github.com/netbox-community/netbox/issues/4996) - Add "connect" buttons to individual device component views
 
 ### Bug Fixes
 

netbox/templates/dcim/consoleport.html

@@ -89,6 +89,18 @@
                 {% else %}
                     <div class="panel-body text-muted">
                         Not connected
+                        {% if perms.dcim.add_cable %}
+                            <span class="dropdown pull-right">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> Connect
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-right">
+                                    <li><a href="{% url 'dcim:consoleport_connect' termination_a_id=instance.pk termination_b_type='console-server-port' %}?return_url={{ instance.get_absolute_url }}">Console Server Port</a></li>
+                                    <li><a href="{% url 'dcim:consoleport_connect' termination_a_id=instance.pk termination_b_type='front-port' %}?return_url={{ instance.get_absolute_url }}">Front Port</a></li>
+                                    <li><a href="{% url 'dcim:consoleport_connect' termination_a_id=instance.pk termination_b_type='rear-port' %}?return_url={{ instance.get_absolute_url }}">Rear Port</a></li>
+                                </ul>
+                            </span>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>

netbox/templates/dcim/consoleserverport.html

@@ -89,6 +89,18 @@
                 {% else %}
                     <div class="panel-body text-muted">
                         Not connected
+                        {% if perms.dcim.add_cable %}
+                            <span class="dropdown pull-right">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> Connect
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-right">
+                                    <li><a href="{% url 'dcim:consoleserverport_connect' termination_a_id=instance.pk termination_b_type='console-port' %}?return_url={{ instance.get_absolute_url }}">Console Port</a></li>
+                                    <li><a href="{% url 'dcim:consoleserverport_connect' termination_a_id=instance.pk termination_b_type='front-port' %}?return_url={{ instance.get_absolute_url }}">Front Port</a></li>
+                                    <li><a href="{% url 'dcim:consoleserverport_connect' termination_a_id=instance.pk termination_b_type='rear-port' %}?return_url={{ instance.get_absolute_url }}">Rear Port</a></li>
+                                </ul>
+                            </span>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>

netbox/templates/dcim/frontport.html

@@ -77,6 +77,21 @@
                 {% else %}
                     <div class="panel-body text-muted">
                         Not connected
+                        {% if perms.dcim.add_cable %}
+                            <span class="dropdown pull-right">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> Connect
+                                </button>
+                                    <ul class="dropdown-menu dropdown-menu-right">
+                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=instance.pk termination_b_type='interface' %}?return_url={{ instance.get_absolute_url }}">Interface</a></li>
+                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=instance.pk termination_b_type='console-server-port' %}?return_url={{ instance.get_absolute_url }}">Console Server Port</a></li>
+                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=instance.pk termination_b_type='console-port' %}?return_url={{ instance.get_absolute_url }}">Console Port</a></li>
+                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=instance.pk termination_b_type='front-port' %}?return_url={{ instance.get_absolute_url }}">Front Port</a></li>
+                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=instance.pk termination_b_type='rear-port' %}?return_url={{ instance.get_absolute_url }}">Rear Port</a></li>
+                                        <li><a href="{% url 'dcim:frontport_connect' termination_a_id=instance.pk termination_b_type='circuit-termination' %}?return_url={{ instance.get_absolute_url }}">Circuit Termination</a></li>
+                                    </ul>
+                            </span>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>

netbox/templates/dcim/interface.html

@@ -169,6 +169,19 @@
                     {% else %}
                         <div class="panel-body text-muted">
                             Not connected
+                            {% if perms.dcim.add_cable %}
+                                <span class="dropdown pull-right">
+                                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                        <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> Connect
+                                    </button>
+                                    <ul class="dropdown-menu dropdown-menu-right">
+                                        <li><a href="{% url 'dcim:interface_connect' termination_a_id=instance.pk termination_b_type='interface' %}?return_url={{ instance.get_absolute_url }}">Interface</a></li>
+                                        <li><a href="{% url 'dcim:interface_connect' termination_a_id=instance.pk termination_b_type='front-port' %}?return_url={{ instance.get_absolute_url }}">Front Port</a></li>
+                                        <li><a href="{% url 'dcim:interface_connect' termination_a_id=instance.pk termination_b_type='rear-port' %}?return_url={{ instance.get_absolute_url }}">Rear Port</a></li>
+                                        <li><a href="{% url 'dcim:interface_connect' termination_a_id=instance.pk termination_b_type='circuit-termination' %}?return_url={{ instance.get_absolute_url }}">Circuit Termination</a></li>
+                                    </ul>
+                                </span>
+                            {% endif %}
                         </div>
                     {% endif %}
                 </div>

netbox/templates/dcim/poweroutlet.html

@@ -97,6 +97,11 @@
                 {% else %}
                     <div class="panel-body text-muted">
                         Not connected
+                        {% if perms.dcim.add_cable %}
+                            <a href="{% url 'dcim:poweroutlet_connect' termination_a_id=instance.pk termination_b_type='power-port' %}?return_url={{ instance.get_absolute_url }}" title="Connect" class="btn btn-primary btn-sm pull-right">
+                                <i class="glyphicon glyphicon-resize-small" aria-hidden="true"></i> Connect
+                            </a>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>

netbox/templates/dcim/powerport.html

@@ -97,6 +97,17 @@
                 {% else %}
                     <div class="panel-body text-muted">
                         Not connected
+                        {% if perms.dcim.add_cable %}
+                            <span class="dropdown pull-right">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> Connect
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-right">
+                                    <li><a href="{% url 'dcim:powerport_connect' termination_a_id=instance.pk termination_b_type='power-outlet' %}?return_url={{ instance.get_absolute_url }}">Power Outlet</a></li>
+                                    <li><a href="{% url 'dcim:powerport_connect' termination_a_id=instance.pk termination_b_type='power-feed' %}?return_url={{ instance.get_absolute_url }}">Power Feed</a></li>
+                                </ul>
+                            </span>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>

netbox/templates/dcim/rearport.html

@@ -71,6 +71,19 @@
                 {% else %}
                     <div class="panel-body text-muted">
                         Not connected
+                        {% if perms.dcim.add_cable %}
+                            <span class="dropdown pull-right">
+                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span> Connect
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-right">
+                                    <li><a href="{% url 'dcim:rearport_connect' termination_a_id=instance.pk termination_b_type='interface' %}?return_url={{ instance.get_absolute_url }}">Interface</a></li>
+                                    <li><a href="{% url 'dcim:rearport_connect' termination_a_id=instance.pk termination_b_type='front-port' %}?return_url={{ instance.get_absolute_url }}">Front Port</a></li>
+                                    <li><a href="{% url 'dcim:rearport_connect' termination_a_id=instance.pk termination_b_type='rear-port' %}?return_url={{ instance.get_absolute_url }}">Rear Port</a></li>
+                                    <li><a href="{% url 'dcim:rearport_connect' termination_a_id=instance.pk termination_b_type='circuit-termination' %}?return_url={{ instance.get_absolute_url }}">Circuit Termination</a></li>
+                                </ul>
+                            </span>
+                        {% endif %}
                     </div>
                 {% endif %}
             </div>