From eef5cefb5d8a8c5f60a015c09f0051a76b0d12ca Mon Sep 17 00:00:00 2001
From: jeremystretch <jstretch@ns1.com>
Date: Mon, 3 Oct 2022 16:11:24 -0400
Subject: [PATCH] Fixes #10460: Restore missing connection details for device
 components

---
 docs/release-notes/version-3.3.md             |   1 +
 netbox/templates/dcim/consoleport.html        | 104 ++++++------------
 netbox/templates/dcim/consoleserverport.html  | 104 ++++++------------
 .../templates/dcim/inc/cabletermination.html  |  14 ---
 .../dcim/inc/connection_endpoints.html        |  36 ++++++
 netbox/templates/dcim/interface.html          |  86 +--------------
 netbox/templates/dcim/powerfeed.html          |  88 ++++-----------
 netbox/templates/dcim/poweroutlet.html        |  82 ++++----------
 netbox/templates/dcim/powerport.html          | 102 ++++++-----------
 9 files changed, 178 insertions(+), 439 deletions(-)
 delete mode 100644 netbox/templates/dcim/inc/cabletermination.html
 create mode 100644 netbox/templates/dcim/inc/connection_endpoints.html

diff --git a/docs/release-notes/version-3.3.md b/docs/release-notes/version-3.3.md
index 6d2bb3b5c..4b7b76270 100644
--- a/docs/release-notes/version-3.3.md
+++ b/docs/release-notes/version-3.3.md
@@ -15,6 +15,7 @@
 * [#10435](https://github.com/netbox-community/netbox/issues/10435) - Fix exception when filtering VLANs by virtual machine with no cluster assigned
 * [#10439](https://github.com/netbox-community/netbox/issues/10439) - Fix form widget styling for DeviceType airflow field
 * [#10445](https://github.com/netbox-community/netbox/issues/10445) - Avoid rounding virtual machine memory values
+* [#10460](https://github.com/netbox-community/netbox/issues/10460) - Restore missing connection details for device components
 * [#10461](https://github.com/netbox-community/netbox/issues/10461) - Enable filtering by read-only custom fields in the UI
 * [#10470](https://github.com/netbox-community/netbox/issues/10470) - Omit read-only custom fields from CSV import forms
 * [#10480](https://github.com/netbox-community/netbox/issues/10480) - Cable trace SVG links should not force a new window
diff --git a/netbox/templates/dcim/consoleport.html b/netbox/templates/dcim/consoleport.html
index 39ffbf552..ad4f15c9d 100644
--- a/netbox/templates/dcim/consoleport.html
+++ b/netbox/templates/dcim/consoleport.html
@@ -54,80 +54,40 @@
             {% plugin_left_page object %}
         </div>
         <div class="col col-md-6">
-            <div class="card">
-                <h5 class="card-header">
-                    Connection
-                </h5>
-                <div class="card-body">
-                    {% if object.mark_connected %}
-                        <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as connected
-                    {% elif object.cable %}
-                        <table class="table table-hover attr-table">
-                            <tr>
-                                <th scope="row">Cable</th>
-                                <td>
-                                    {{ object.cable|linkify }}
-                                    <a href="{% url 'dcim:consoleport_trace' pk=object.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
-                                        <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
-                                    </a>
-                                </td>
-                            </tr>
-                            {% if object.connected_endpoint %}
-                                <tr>
-                                    <th scope="row">Device</th>
-                                    <td>{{ object.connected_endpoint.device|linkify }}</td>
-                                </tr>
-                                <tr>
-                                    <th scope="row">Name</th>
-                                    <td>{{ object.connected_endpoint|linkify:"name" }}</td>
-                                </tr>
-                                <tr>
-                                    <th scope="row">Type</th>
-                                    <td>{{ object.connected_endpoint.get_type_display|placeholder }}</td>
-                                </tr>
-                                <tr>
-                                    <th scope="row">Description</th>
-                                    <td>{{ object.connected_endpoint.description|placeholder }}</td>
-                                </tr>
-                                <tr>
-                                    <th scope="row">Path Status</th>
-                                    <td>
-                                        {% if object.path.is_active %}
-                                            <span class="badge bg-success">Reachable</span>
-                                        {% else %}
-                                            <span class="badge bg-danger">Not Reachable</span>
-                                        {% endif %}
-                                    </td>
-                                </tr>
-                            {% endif %}
-                        </table>
-                    {% else %}
-                        <div class="text-muted">
-                            Not Connected
-                            {% if perms.dcim.add_cable %}
-                                <div class="dropdown float-end">
-                                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-                                        <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> Connect
-                                    </button>
-                                    <ul class="dropdown-menu dropdown-menu-end">
-                                        <li>
-                                            <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.consoleport&a_terminations={{ object.pk }}&b_terminations_type=dcim.consoleserverport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-item">Console Server Port</a>
-                                        </li>
-                                        <li>
-                                            <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.consoleport&a_terminations={{ object.pk }}&b_terminations_type=dcim.frontport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-item">Front Port</a>
-                                        </li>
-                                        <li>
-                                            <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.consoleport&a_terminations={{ object.pk }}&b_terminations_type=dcim.rearport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-item">Rear Port</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            {% endif %}
-                        </div>
-                    {% endif %}
+          <div class="card">
+            <h5 class="card-header">Connection</h5>
+            <div class="card-body">
+              {% if object.mark_connected %}
+                <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as connected
+              {% elif object.cable %}
+                {% include 'dcim/inc/connection_endpoints.html' %}
+              {% else %}
+                <div class="text-muted">
+                  Not Connected
+                  {% if perms.dcim.add_cable %}
+                    <div class="dropdown float-end">
+                      <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                        <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> Connect
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end">
+                        <li>
+                          <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.consoleport&a_terminations={{ object.pk }}&b_terminations_type=dcim.consoleserverport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-item">Console Server Port</a>
+                        </li>
+                        <li>
+                          <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.consoleport&a_terminations={{ object.pk }}&b_terminations_type=dcim.frontport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-item">Front Port</a>
+                        </li>
+                        <li>
+                          <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.consoleport&a_terminations={{ object.pk }}&b_terminations_type=dcim.rearport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-item">Rear Port</a>
+                        </li>
+                      </ul>
+                    </div>
+                  {% endif %}
                 </div>
+              {% endif %}
             </div>
-            {% include 'dcim/inc/panels/inventory_items.html' %}
-            {% plugin_right_page object %}
+          </div>
+          {% include 'dcim/inc/panels/inventory_items.html' %}
+          {% plugin_right_page object %}
         </div>
     </div>
     <div class="row">
diff --git a/netbox/templates/dcim/consoleserverport.html b/netbox/templates/dcim/consoleserverport.html
index 642e758a3..a543cd5ff 100644
--- a/netbox/templates/dcim/consoleserverport.html
+++ b/netbox/templates/dcim/consoleserverport.html
@@ -54,82 +54,40 @@
             {% plugin_left_page object %}
         </div>
         <div class="col col-md-6">
-            <div class="card">
-                <h5 class="card-header">
-                    Connection
-                </h5>
-                <div class="card-body">
-                    {% if object.mark_connected %}
-                    <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as connected
-                    {% elif object.cable %}
-                    <table class="table table-hover attr-table">
-                        <tr>
-                            <th scope="row">Cable</th>
-                            <td>
-                                {{ object.cable|linkify }}
-                                <a href="{% url 'dcim:consoleserverport_trace' pk=object.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
-                                    <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
-                                </a>
-                            </td>
-                        </tr>
-                        {% if object.connected_endpoint %}
-                            <tr>
-                                <th scope="row">Device</th>
-                                <td>
-                                    {{ object.connected_endpoint.device|linkify }}
-                                </td>
-                            </tr>
-                            <tr>
-                                <th scope="row">Name</th>
-                                <td>{{ object.connected_endpoint|linkify:"name" }}</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">Type</th>
-                                <td>{{ object.connected_endpoint.get_type_display|placeholder }}</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">Description</th>
-                                <td>{{ object.connected_endpoint.description|placeholder }}</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">Path Status</th>
-                                <td>
-                                    {% if object.path.is_active %}
-                                        <span class="badge bg-success">Reachable</span>
-                                    {% else %}
-                                        <span class="badge bg-danger">Not Reachable</span>
-                                    {% endif %}
-                                </td>
-                            </tr>
-                        {% endif %}
-                    </table>
-                {% else %}
-                    <div class="text-muted">
-                        Not Connected
-                        {% if perms.dcim.add_cable %}
-                            <div class="dropdown float-end">
-                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-                                    <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> Connect
-                                </button>
-                                <ul class="dropdown-menu dropdown-menu-end">
-                                    <li>
-                                        <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.consoleserverport&a_terminations={{ object.pk }}&b_terminations_type=dcim.consoleport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-item">Console Port</a>
-                                    </li>
-                                    <li>
-                                        <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.consoleserverport&a_terminations={{ object.pk }}&b_terminations_type=dcim.frontport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-item">Front Port</a>
-                                    </li>
-                                    <li>
-                                        <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.consoleserverport&a_terminations={{ object.pk }}&b_terminations_type=dcim.rearport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-item">Rear Port</a>
-                                    </li>
-                                </ul>
-                            </div>
-                        {% endif %}
+          <div class="card">
+            <h5 class="card-header">Connection</h5>
+            <div class="card-body">
+              {% if object.mark_connected %}
+                <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as connected
+              {% elif object.cable %}
+                {% include 'dcim/inc/connection_endpoints.html' %}
+              {% else %}
+                <div class="text-muted">
+                  Not Connected
+                  {% if perms.dcim.add_cable %}
+                    <div class="dropdown float-end">
+                      <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                        <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> Connect
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end">
+                        <li>
+                          <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.consoleserverport&a_terminations={{ object.pk }}&b_terminations_type=dcim.consoleport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-item">Console Port</a>
+                        </li>
+                        <li>
+                          <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.consoleserverport&a_terminations={{ object.pk }}&b_terminations_type=dcim.frontport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-item">Front Port</a>
+                        </li>
+                        <li>
+                          <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.consoleserverport&a_terminations={{ object.pk }}&b_terminations_type=dcim.rearport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-item">Rear Port</a>
+                        </li>
+                      </ul>
                     </div>
-                {% endif %}
+                  {% endif %}
                 </div>
+              {% endif %}
             </div>
-            {% include 'dcim/inc/panels/inventory_items.html' %}
-            {% plugin_right_page object %}
+          </div>
+          {% include 'dcim/inc/panels/inventory_items.html' %}
+          {% plugin_right_page object %}
         </div>
     </div>
     <div class="row">
diff --git a/netbox/templates/dcim/inc/cabletermination.html b/netbox/templates/dcim/inc/cabletermination.html
deleted file mode 100644
index c7fa7918a..000000000
--- a/netbox/templates/dcim/inc/cabletermination.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<td>
-    {% if termination.parent_object.provider %}
-        <i class="mdi mdi-lightning-bolt" title="Circuit"></i>
-        <a href="{{ termination.parent_object.get_absolute_url }}">
-            {{ termination.parent_object.provider }}
-            {{ termination.parent_object }}
-        </a>
-    {% else %}
-        {{ termination.parent_object|linkify }}
-    {% endif %}
-</td>
-<td>
-    {{ termination|linkify }}
-</td>
diff --git a/netbox/templates/dcim/inc/connection_endpoints.html b/netbox/templates/dcim/inc/connection_endpoints.html
new file mode 100644
index 000000000..fb994a492
--- /dev/null
+++ b/netbox/templates/dcim/inc/connection_endpoints.html
@@ -0,0 +1,36 @@
+<table class="table table-hover">
+  <tr>
+    <th scope="row">Cable</th>
+    <td>
+      {{ object.cable|linkify }}
+      <a href="{% url 'dcim:interface_trace' pk=object.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
+        <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <th scope="row">Path Status</th>
+    <td>
+      {% if object.path.is_complete and object.path.is_active %}
+        <span class="badge bg-success">Reachable</span>
+      {% else %}
+        <span class="badge bg-danger">Not Reachable</span>
+      {% endif %}
+    </td>
+  </tr>
+  <tr>
+    <th scope="row">Path Endpoints</th>
+    <td>
+      {% for endpoint in object.connected_endpoints %}
+        {% if endpoint.parent_object %}
+          {{ endpoint.parent_object|linkify }}
+          <i class="mdi mdi-chevron-right"></i>
+        {% endif %}
+        {{ endpoint|linkify }}
+        {% if not forloop.last %}<br />{% endif %}
+      {% empty %}
+        {{ ''|placeholder }}
+      {% endfor %}
+    </td>
+  </tr>
+</table>
diff --git a/netbox/templates/dcim/interface.html b/netbox/templates/dcim/interface.html
index 1216f3e88..887433d7b 100644
--- a/netbox/templates/dcim/interface.html
+++ b/netbox/templates/dcim/interface.html
@@ -144,89 +144,7 @@
                 <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as Connected
               </div>
             {% elif object.cable %}
-              <table class="table table-hover">
-                {% if object.connected_endpoint.device %}
-                  <tr>
-                    <td colspan="2">
-                      {% if object.connected_endpoint.enabled %}
-                        <span class="badge bg-success">Enabled</span>
-                      {% else %}
-                        <span class="badge bg-danger">Disabled</span>
-                      {% endif %}
-                    </td>
-                  </tr>
-                {% endif %}
-                <tr>
-                  <th scope="row">Cable</th>
-                  <td>
-                    {{ object.cable|linkify }}
-                    <a href="{% url 'dcim:interface_trace' pk=object.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
-                      <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
-                    </a>
-                  </td>
-                </tr>
-                {% if object.connected_endpoint.device %}
-                  {% with iface=object.connected_endpoint %}
-                    <tr>
-                      <th scope="row">Device</th>
-                      <td>{{ iface.device|linkify }}</td>
-                    </tr>
-                    <tr>
-                      <th scope="row">Name</th>
-                      <td>{{ iface|linkify:"name" }}</td>
-                    </tr>
-                    <tr>
-                      <th scope="row">Type</th>
-                      <td>{{ iface.get_type_display }}</td>
-                    </tr>
-                    <tr>
-                      <th scope="row">LAG</th>
-                      <td>{{ iface.lag|linkify|placeholder }}</td>
-                    </tr>
-                    <tr>
-                      <th scope="row">Description</th>
-                      <td>{{ iface.description|placeholder }}</td>
-                    </tr>
-                    <tr>
-                      <th scope="row">MTU</th>
-                      <td>{{ iface.mtu|placeholder }}</td>
-                    </tr>
-                    <tr>
-                      <th scope="row">MAC Address</th>
-                      <td>{{ iface.mac_address|placeholder }}</td>
-                    </tr>
-                    <tr>
-                      <th scope="row">802.1Q Mode</th>
-                      <td>{{ iface.get_mode_display }}</td>
-                    </tr>
-                  {% endwith %}
-                {% elif object.connected_endpoint.circuit %}
-                  {% with ct=object.connected_endpoint %}
-                    <tr>
-                      <th scope="row">Provider</th>
-                      <td>{{ ct.circuit.provider|linkify }}</td>
-                    </tr>
-                    <tr>
-                      <th scope="row">Circuit</th>
-                      <td>{{ ct.circuit|linkify }}</td>
-                    </tr>
-                    <tr>
-                      <th scope="row">Side</th>
-                      <td>{{ ct.term_side }}</td>
-                    </tr>
-                  {% endwith %}
-                {% endif %}
-                <tr>
-                  <th scope="row">Path Status</th>
-                  <td>
-                    {% if object.path.is_complete and object.path.is_active %}
-                      <span class="badge bg-success">Reachable</span>
-                    {% else %}
-                      <span class="badge bg-danger">Not Reachable</span>
-                    {% endif %}
-                  </td>
-                </tr>
-              </table>
+              {% include 'dcim/inc/connection_endpoints.html' %}
             {% elif object.wireless_link %}
               <table class="table table-hover">
                 <tr>
@@ -238,7 +156,7 @@
                     </a>
                   </td>
                 </tr>
-                {% with peer_interface=object.connected_endpoint %}
+                {% with peer_interface=object.link_peers.0 %}
                   <tr>
                     <th scope="row">Device</th>
                     <td>{{ peer_interface.device|linkify }}</td>
diff --git a/netbox/templates/dcim/powerfeed.html b/netbox/templates/dcim/powerfeed.html
index 584454df8..adb779ce3 100644
--- a/netbox/templates/dcim/powerfeed.html
+++ b/netbox/templates/dcim/powerfeed.html
@@ -100,73 +100,33 @@
         {% plugin_left_page object %}
     </div>
     <div class="col col-md-6">
-        <div class="card">
-            <h5 class="card-header">
-                Connection
-            </h5>
-            <div class="card-body">
-            {% if object.mark_connected %}
-                <div class="text-muted">
-                  <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as connected
-                </div>
-            {% elif object.cable %}
-                <table class="table table-hover attr-table">
-                    <tr>
-                        <th scope="row">Cable</th>
-                        <td>
-                            {{ object.cable|linkify }}
-                            <a href="{% url 'dcim:powerfeed_trace' pk=object.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
-                                <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    {% if object.connected_endpoint %}
-                        <tr>
-                            <th scope="row">Device</th>
-                            <td>{{ object.connected_endpoint.device|linkify }}</td>
-                        </tr>
-                        <tr>
-                            <th scope="row">Name</th>
-                            <td>{{ object.connected_endpoint|linkify:"name" }}</td>
-                        </tr>
-                        <tr>
-                            <th scope="row">Type</th>
-                            <td>{{ object.connected_endpoint.get_type_display|placeholder }}</td>
-                        </tr>
-                        <tr>
-                            <th scope="row">Description</th>
-                            <td>{{ object.connected_endpoint.description|placeholder }}</td>
-                        </tr>
-                        <tr>
-                            <th scope="row">Path Status</th>
-                            <td>
-                                {% if object.path.is_active %}
-                                    <span class="badge bg-success">Reachable</span>
-                                {% else %}
-                                    <span class="badge bg-danger">Not Reachable</span>
-                                {% endif %}
-                            </td>
-                        </tr>
-                    {% endif %}
-                </table>
-            {% else %}
-                <div class="text-muted">
-                    Not connected
-                </div>
-            {% endif %}
+      <div class="card">
+        <h5 class="card-header">Connection</h5>
+        <div class="card-body">
+          {% if object.mark_connected %}
+            <div class="text-muted">
+              <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as connected
             </div>
-            {% if not object.mark_connected and not object.cable %}
-            <div class="card-footer">
-            {% if perms.dcim.add_cable %}
-                <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.powerfeed&a_terminations={{ object.pk }}&b_terminations_type=dcim.powerport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-primary btn-sm float-end">
-                    <i class="mdi mdi-ethernet-cable" aria-hidden="true"></i> Connect
-                </a>
-                    {% endif %}
+          {% elif object.cable %}
+            {% include 'dcim/inc/connection_endpoints.html' %}
+          {% else %}
+            <div class="text-muted">
+              Not connected
             </div>
-            {% endif %}
+          {% endif %}
         </div>
-        {% include 'inc/panels/comments.html' %}
-        {% plugin_right_page object %}
+        {% if not object.mark_connected and not object.cable %}
+        <div class="card-footer">
+          {% if perms.dcim.add_cable %}
+            <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.powerfeed&a_terminations={{ object.pk }}&b_terminations_type=dcim.powerport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-primary btn-sm float-end">
+              <i class="mdi mdi-ethernet-cable" aria-hidden="true"></i> Connect
+            </a>
+          {% endif %}
+        </div>
+        {% endif %}
+      </div>
+      {% include 'inc/panels/comments.html' %}
+      {% plugin_right_page object %}
     </div>
 </div>
 <div class="row">
diff --git a/netbox/templates/dcim/poweroutlet.html b/netbox/templates/dcim/poweroutlet.html
index 26f4a07f8..fb6de8ddb 100644
--- a/netbox/templates/dcim/poweroutlet.html
+++ b/netbox/templates/dcim/poweroutlet.html
@@ -58,69 +58,29 @@
             {% plugin_left_page object %}
         </div>
         <div class="col col-md-6">
-            <div class="card">
-                <h5 class="card-header">
-                    Connection
-                </h5>
-                <div class="card-body">
-                {% if object.mark_connected %}
-                    <div class="text-muted">
-                      <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as Connected
-                    </div>
-                {% elif object.cable %}
-                    <table class="table table-hover attr-table">
-                        <tr>
-                            <th scope="row">Cable</th>
-                            <td>
-                                {{ object.cable|linkify }}
-                                <a href="{% url 'dcim:poweroutlet_trace' pk=object.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
-                                    <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
-                                </a>
-                            </td>
-                        </tr>
-                        {% if object.connected_endpoint %}
-                            <tr>
-                                <th scope="row">Device</th>
-                                <td>{{ object.connected_endpoint.device|linkify }}</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">Name</th>
-                                <td>{{ object.connected_endpoint|linkify:"name" }}</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">Type</th>
-                                <td>{{ object.connected_endpoint.get_type_display|placeholder }}</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">Description</th>
-                                <td>{{ object.connected_endpoint.description|placeholder }}</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">Path Status</th>
-                                <td>
-                                    {% if object.path.is_active %}
-                                        <span class="badge bg-success">Reachable</span>
-                                    {% else %}
-                                        <span class="badge bg-danger">Not Reachable</span>
-                                    {% endif %}
-                                </td>
-                            </tr>
-                        {% endif %}
-                    </table>
-                {% else %}
-                    <div class="text-muted">
-                        Not Connected
-                        {% if perms.dcim.add_cable %}
-                            <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.poweroutlet&a_terminations={{ object.pk }}&b_terminations_type=dcim.powerport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" title="Connect" class="btn btn-primary btn-sm float-end">
-                                <i class="mdi mdi-ethernet-cable" aria-hidden="true"></i> Connect
-                            </a>
-                        {% endif %}
-                    </div>
-                {% endif %}
+          <div class="card">
+            <h5 class="card-header">Connection</h5>
+            <div class="card-body">
+              {% if object.mark_connected %}
+                <div class="text-muted">
+                  <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as Connected
                 </div>
+              {% elif object.cable %}
+                {% include 'dcim/inc/connection_endpoints.html' %}
+              {% else %}
+                <div class="text-muted">
+                  Not Connected
+                  {% if perms.dcim.add_cable %}
+                    <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.poweroutlet&a_terminations={{ object.pk }}&b_terminations_type=dcim.powerport&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" title="Connect" class="btn btn-primary btn-sm float-end">
+                      <i class="mdi mdi-ethernet-cable" aria-hidden="true"></i> Connect
+                    </a>
+                  {% endif %}
+                </div>
+              {% endif %}
             </div>
-            {% include 'dcim/inc/panels/inventory_items.html' %}
-            {% plugin_right_page object %}
+          </div>
+          {% include 'dcim/inc/panels/inventory_items.html' %}
+          {% plugin_right_page object %}
         </div>
     </div>
     <div class="row mb-3">
diff --git a/netbox/templates/dcim/powerport.html b/netbox/templates/dcim/powerport.html
index c5eccbf14..c552c2398 100644
--- a/netbox/templates/dcim/powerport.html
+++ b/netbox/templates/dcim/powerport.html
@@ -58,79 +58,39 @@
             {% plugin_left_page object %}
         </div>
         <div class="col col-md-6">
-            <div class="card">
-                <h5 class="card-header">
-                    Connection
-                </h5>
-                <div class="card-body">
-                {% if object.mark_connected %}
-                    <div class="text-muted">
-                      <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as Connected
-                    </div>
-                {% elif object.cable %}
-                    <table class="table table-hover attr-table">
-                        <tr>
-                            <th scope="row">Cable</th>
-                            <td>
-                                {{ object.cable|linkify }}
-                                <a href="{% url 'dcim:powerport_trace' pk=object.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
-                                    <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
-                                </a>
-                            </td>
-                        </tr>
-                        {% if object.connected_endpoint %}
-                            <tr>
-                                <th scope="row">Device</th>
-                                <td>{{ object.connected_endpoint.device|linkify }}</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">Name</th>
-                                <td>{{ object.connected_endpoint|linkify:"name" }}</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">Type</th>
-                                <td>{{ object.connected_endpoint.get_type_display|placeholder }}</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">Description</th>
-                                <td>{{ object.connected_endpoint.description|placeholder }}</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">Path Status</th>
-                                <td>
-                                    {% if object.path.is_active %}
-                                        <span class="badge bg-success">Reachable</span>
-                                    {% else %}
-                                        <span class="badge bg-danger">Not Reachable</span>
-                                    {% endif %}
-                                </td>
-                            </tr>
-                        {% endif %}
-                    </table>
-                {% else %}
-                    <div class="text-muted">
-                        Not Connected
-                        {% if perms.dcim.add_cable %}
-                            <span class="dropdown float-end">
-                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                    <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> Connect
-                                </button>
-                                <ul class="dropdown-menu dropdown-menu-end">
-                                    <li>
-                                        <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.powerportport&a_terminations={{ object.pk }}&termination_b_type=dcim.poweroutlet&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-link">Power Outlet</a>
-                                    </li>
-                                    <li>
-                                        <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.powerportport&a_terminations={{ object.pk }}&termination_b_type=dcim.powerfeed&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-link">Power Feed</a>
-                                    </li>
-                                </ul>
-                            </span>
-                        {% endif %}
-                    </div>
-                {% endif %}
+          <div class="card">
+            <h5 class="card-header">Connection</h5>
+            <div class="card-body">
+              {% if object.mark_connected %}
+                <div class="text-muted">
+                  <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as Connected
                 </div>
+              {% elif object.cable %}
+                {% include 'dcim/inc/connection_endpoints.html' %}
+              {% else %}
+                <div class="text-muted">
+                  Not Connected
+                  {% if perms.dcim.add_cable %}
+                    <span class="dropdown float-end">
+                      <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> Connect
+                      </button>
+                      <ul class="dropdown-menu dropdown-menu-end">
+                        <li>
+                          <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.powerportport&a_terminations={{ object.pk }}&termination_b_type=dcim.poweroutlet&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-link">Power Outlet</a>
+                        </li>
+                        <li>
+                          <a href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.powerportport&a_terminations={{ object.pk }}&termination_b_type=dcim.powerfeed&termination_b_site={{ object.device.site.pk }}&termination_b_rack={{ object.device.rack.pk }}&return_url={{ object.get_absolute_url }}" class="dropdown-link">Power Feed</a>
+                        </li>
+                      </ul>
+                    </span>
+                  {% endif %}
+                </div>
+              {% endif %}
             </div>
-            {% include 'dcim/inc/panels/inventory_items.html' %}
-            {% plugin_right_page object %}
+          </div>
+          {% include 'dcim/inc/panels/inventory_items.html' %}
+          {% plugin_right_page object %}
         </div>
     </div>
     <div class="row">