Add layout for InterfaceView

netbox/dcim/ui/panels.py

@@ -470,3 +470,106 @@ class PowerUtilizationPanel(panels.ObjectPanel):
         if not obj.powerports.exists() or not obj.poweroutlets.exists():
             return ''
         return super().render(context)
+
+
+class InterfacePanel(panels.ObjectAttributesPanel):
+    device = attrs.RelatedObjectAttr('device', linkify=True)
+    module = attrs.RelatedObjectAttr('module', linkify=True)
+    name = attrs.TextAttr('name')
+    label = attrs.TextAttr('label')
+    type = attrs.ChoiceAttr('type')
+    speed = attrs.TemplatedAttr('speed', template_name='dcim/interface/attrs/speed.html', label=_('Speed'))
+    duplex = attrs.ChoiceAttr('duplex')
+    mtu = attrs.TextAttr('mtu', label=_('MTU'))
+    enabled = attrs.BooleanAttr('enabled')
+    mgmt_only = attrs.BooleanAttr('mgmt_only', label=_('Management only'))
+    description = attrs.TextAttr('description')
+    poe_mode = attrs.ChoiceAttr('poe_mode', label=_('PoE mode'))
+    poe_type = attrs.ChoiceAttr('poe_type', label=_('PoE type'))
+    mode = attrs.ChoiceAttr('mode', label=_('802.1Q mode'))
+    qinq_svlan = attrs.RelatedObjectAttr('qinq_svlan', linkify=True, label=_('Q-in-Q SVLAN'))
+    untagged_vlan = attrs.RelatedObjectAttr('untagged_vlan', linkify=True, label=_('Untagged VLAN'))
+    tx_power = attrs.TextAttr('tx_power', label=_('Transmit power (dBm)'))
+    tunnel = attrs.RelatedObjectAttr('tunnel_termination.tunnel', linkify=True, label=_('Tunnel'))
+    l2vpn = attrs.RelatedObjectAttr('l2vpn_termination.l2vpn', linkify=True, label=_('L2VPN'))
+
+
+class RelatedInterfacesPanel(panels.ObjectAttributesPanel):
+    title = _('Related Interfaces')
+
+    parent = attrs.RelatedObjectAttr('parent', linkify=True)
+    bridge = attrs.RelatedObjectAttr('bridge', linkify=True)
+    lag = attrs.RelatedObjectAttr('lag', linkify=True, label=_('LAG'))
+
+
+class InterfaceAddressingPanel(panels.ObjectAttributesPanel):
+    title = _('Addressing')
+
+    mac_address = attrs.TemplatedAttr(
+        'primary_mac_address',
+        template_name='dcim/interface/attrs/mac_address.html',
+        label=_('MAC address'),
+    )
+    wwn = attrs.TextAttr('wwn', style='font-monospace', label=_('WWN'))
+    vrf = attrs.RelatedObjectAttr('vrf', linkify=True, label=_('VRF'))
+    vlan_translation = attrs.RelatedObjectAttr('vlan_translation_policy', linkify=True, label=_('VLAN translation'))
+
+
+class InterfaceConnectionPanel(panels.ObjectPanel):
+    """
+    A connection panel for interfaces, which handles cable, wireless link, and virtual circuit cases.
+    """
+    template_name = 'dcim/panels/interface_connection.html'
+    title = _('Connection')
+
+    def render(self, context):
+        obj = context.get('object')
+        if obj and obj.is_virtual:
+            return ''
+        ctx = self.get_context(context)
+        return render_to_string(self.template_name, ctx, request=ctx.get('request'))
+
+
+class VirtualCircuitPanel(panels.ObjectPanel):
+    """
+    A panel which displays virtual circuit information for a virtual interface.
+    """
+    template_name = 'dcim/panels/interface_virtual_circuit.html'
+    title = _('Virtual Circuit')
+
+    def render(self, context):
+        obj = context.get('object')
+        if not obj or not obj.is_virtual or not obj.virtual_circuit_termination:
+            return ''
+        ctx = self.get_context(context)
+        return render_to_string(self.template_name, ctx, request=ctx.get('request'))
+
+
+class InterfaceWirelessPanel(panels.ObjectPanel):
+    """
+    A panel which displays wireless RF attributes for an interface, comparing local and peer values.
+    """
+    template_name = 'dcim/panels/interface_wireless.html'
+    title = _('Wireless')
+
+    def render(self, context):
+        obj = context.get('object')
+        if not obj or not obj.is_wireless:
+            return ''
+        ctx = self.get_context(context)
+        return render_to_string(self.template_name, ctx, request=ctx.get('request'))
+
+
+class WirelessLANsPanel(panels.ObjectPanel):
+    """
+    A panel which lists the wireless LANs associated with an interface.
+    """
+    template_name = 'dcim/panels/interface_wireless_lans.html'
+    title = _('Wireless LANs')
+
+    def render(self, context):
+        obj = context.get('object')
+        if not obj or not obj.is_wireless:
+            return ''
+        ctx = self.get_context(context)
+        return render_to_string(self.template_name, ctx, request=ctx.get('request'))

netbox/dcim/views.py

@@ -17,10 +17,12 @@ from extras.ui.panels import CustomFieldsPanel, ImageAttachmentsPanel, TagsPanel
 from extras.views import ObjectConfigContextView, ObjectRenderConfigView
 from ipam.models import ASN, VLAN, IPAddress, Prefix, VLANGroup
 from ipam.tables import VLANTranslationRuleTable
+from ipam.ui.panels import FHRPGroupAssignmentsPanel
 from netbox.object_actions import *
 from netbox.ui import actions, layout
 from netbox.ui.panels import (
     CommentsPanel,
+    ContextTablePanel,
     JSONPanel,
     NestedGroupObjectPanel,
     ObjectsTablePanel,
@@ -3265,6 +3267,45 @@ class InterfaceListView(generic.ObjectListView):
 @register_model_view(Interface)
 class InterfaceView(generic.ObjectView):
     queryset = Interface.objects.all()
+    layout = layout.SimpleLayout(
+        left_panels=[
+            panels.InterfacePanel(),
+            panels.RelatedInterfacesPanel(),
+            CustomFieldsPanel(),
+            TagsPanel(),
+        ],
+        right_panels=[
+            ContextTablePanel('vdc_table', title=_('Virtual Device Contexts')),
+            panels.InterfaceAddressingPanel(),
+            panels.VirtualCircuitPanel(),
+            panels.InterfaceConnectionPanel(),
+            panels.InterfaceWirelessPanel(),
+            panels.WirelessLANsPanel(),
+            FHRPGroupAssignmentsPanel(),
+            panels.InventoryItemsPanel(),
+        ],
+        bottom_panels=[
+            ObjectsTablePanel(
+                model='ipam.IPAddress',
+                filters={'interface_id': lambda ctx: ctx['object'].pk},
+                title=_('IP Addresses'),
+            ),
+            ObjectsTablePanel(
+                model='dcim.MACAddress',
+                filters={'interface_id': lambda ctx: ctx['object'].pk},
+                title=_('MAC Addresses'),
+            ),
+            ObjectsTablePanel(
+                model='ipam.VLAN',
+                filters={'interface_id': lambda ctx: ctx['object'].pk},
+                title=_('VLANs'),
+            ),
+            ContextTablePanel('lag_interfaces_table', title=_('LAG Members')),
+            ContextTablePanel('vlan_translation_table', title=_('VLAN Translation')),
+            ContextTablePanel('bridge_interfaces_table', title=_('Bridged Interfaces')),
+            ContextTablePanel('child_interfaces_table', title=_('Child Interfaces')),
+        ],
+    )
 
     def get_extra_context(self, request, instance):
         # Get assigned VDCs
@@ -3279,30 +3320,29 @@ class InterfaceView(generic.ObjectView):
         vdc_table.configure(request)
 
         # Get bridge interfaces
-        bridge_interfaces = Interface.objects.restrict(request.user, 'view').filter(bridge=instance)
         bridge_interfaces_table = tables.InterfaceTable(
-            bridge_interfaces,
+            Interface.objects.restrict(request.user, 'view').filter(bridge=instance),
             exclude=('device', 'parent'),
             orderable=False
         )
         bridge_interfaces_table.configure(request)
 
         # Get child interfaces
-        child_interfaces = Interface.objects.restrict(request.user, 'view').filter(parent=instance)
         child_interfaces_table = tables.InterfaceTable(
-            child_interfaces,
+            Interface.objects.restrict(request.user, 'view').filter(parent=instance),
             exclude=('device', 'parent'),
             orderable=False
         )
         child_interfaces_table.configure(request)
 
-        # Get LAG interfaces
-        lag_interfaces = Interface.objects.restrict(request.user, 'view').filter(lag=instance)
-        lag_interfaces_table = tables.InterfaceLAGMemberTable(
-            lag_interfaces,
-            orderable=False
-        )
-        lag_interfaces_table.configure(request)
+        # Get LAG members (only for LAG interfaces)
+        lag_interfaces_table = None
+        if instance.is_lag:
+            lag_interfaces_table = tables.InterfaceLAGMemberTable(
+                Interface.objects.restrict(request.user, 'view').filter(lag=instance),
+                orderable=False
+            )
+            lag_interfaces_table.configure(request)
 
         # Get VLAN translation rules
         vlan_translation_table = None
@@ -3315,7 +3355,6 @@ class InterfaceView(generic.ObjectView):
 
         return {
             'vdc_table': vdc_table,
-            'bridge_interfaces': bridge_interfaces,
             'bridge_interfaces_table': bridge_interfaces_table,
             'child_interfaces_table': child_interfaces_table,
             'lag_interfaces_table': lag_interfaces_table,

netbox/templates/dcim/interface.html

@@ -1,7 +1,4 @@
 {% extends 'generic/object.html' %}
-{% load helpers %}
-{% load plugins %}
-{% load render_table from django_tables2 %}
 {% load i18n %}
 
 {% block breadcrumbs %}
@@ -19,436 +16,3 @@
   {% endif %}
   {{ block.super }}
 {% endblock %}
-
-{% block content %}
-  <div class="row mb-3">
-    <div class="col col-12 col-md-6">
-      <div class="card">
-        <h2 class="card-header">{% trans "Interface" %}</h2>
-        <table class="table table-hover attr-table">
-          <tr>
-            <th scope="row">{% trans "Device" %}</th>
-            <td>{{ object.device|linkify }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "Module" %}</th>
-            <td>{{ object.module|linkify|placeholder }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "Name" %}</th>
-            <td>{{ object.name }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "Label" %}</th>
-            <td>{{ object.label|placeholder }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "Type" %}</th>
-            <td>{{ object.get_type_display }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "Speed/Duplex" %}</th>
-            <td>
-              {{ object.speed|humanize_speed|placeholder }} /
-              {{ object.get_duplex_display|placeholder }}
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "MTU" %}</th>
-            <td>{{ object.mtu|placeholder }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "Enabled" %}</th>
-            <td>{% checkmark object.enabled %}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "Management Only" %}</th>
-            <td>{% checkmark object.mgmt_only %}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "Description" %}</th>
-            <td>{{ object.description|placeholder }} </td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "PoE Mode" %}</th>
-            <td>{{ object.get_poe_mode_display|placeholder }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "PoE Type" %}</th>
-            <td>{{ object.get_poe_type_display|placeholder }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "802.1Q Mode" %}</th>
-            <td>{{ object.get_mode_display|placeholder }}</td>
-          </tr>
-          {% if object.mode == 'q-in-q' %}
-            <tr>
-              <th scope="row">{% trans "Q-in-Q SVLAN" %}</th>
-              <td>{{ object.qinq_svlan|linkify|placeholder }}</td>
-            </tr>
-          {% elif object.mode %}
-            <tr>
-              <th scope="row">{% trans "Untagged VLAN" %}</th>
-              <td>{{ object.untagged_vlan|linkify|placeholder }}</td>
-            </tr>
-          {% endif %}
-          <tr>
-            <th scope="row">{% trans "Transmit power (dBm)" %}</th>
-            <td>{{ object.tx_power|placeholder }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "Tunnel" %}</th>
-            <td>{{ object.tunnel_termination.tunnel|linkify|placeholder }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "L2VPN" %}</th>
-            <td>{{ object.l2vpn_termination.l2vpn|linkify|placeholder }}</td>
-          </tr>
-        </table>
-      </div>
-      <div class="card">
-        <h2 class="card-header">{% trans "Related Interfaces" %}</h2>
-        <table class="table table-hover attr-table">
-          <tr>
-            <th scope="row">{% trans "Parent" %}</th>
-            <td>{{ object.parent|linkify|placeholder }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "Bridge" %}</th>
-            <td>{{ object.bridge|linkify|placeholder }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "Bridged Interfaces" %}</th>
-            <td>
-              {% if bridge_interfaces %}
-                {% for interface in bridge_interfaces %}
-                  {{ interface|linkify }}
-                  {% if not forloop.last %}<br />{% endif %}
-                {% endfor %}
-              {% else %}
-                {{ ''|placeholder }}
-              {% endif %}
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "LAG" %}</th>
-            <td>{{ object.lag|linkify|placeholder }}</td>
-          </tr>
-        </table>
-      </div>
-      {% include 'inc/panels/custom_fields.html' %}
-      {% include 'inc/panels/tags.html' %}
-      {% plugin_left_page object %}
-    </div>
-    <div class="col col-12 col-md-6">
-      {% include 'inc/panel_table.html' with table=vdc_table heading="Virtual Device Contexts" %}
-      <div class="card">
-        <h2 class="card-header">{% trans "Addressing" %}</h2>
-        <table class="table table-hover attr-table">
-          <tr>
-            <th scope="row">{% trans "MAC Address" %}</th>
-            <td>
-              {% if object.primary_mac_address %}
-                <span class="font-monospace">{{ object.primary_mac_address|linkify }}</span>
-                <span class="badge text-bg-primary">{% trans "Primary" %}</span>
-              {% else %}
-                {{ ''|placeholder }}
-              {% endif %}
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "WWN" %}</th>
-            <td>
-              {% if object.wwn %}
-                <span class="font-monospace">{{ object.wwn }}</span>
-              {% else %}
-                {{ ''|placeholder }}
-              {% endif %}
-            </td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "VRF" %}</th>
-            <td>{{ object.vrf|linkify|placeholder }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{% trans "VLAN Translation" %}</th>
-            <td>{{ object.vlan_translation_policy|linkify|placeholder }}</td>
-          </tr>
-        </table>
-      </div>
-      {% if object.is_virtual and object.virtual_circuit_termination %}
-        <div class="card">
-          <h2 class="card-header">{% trans "Virtual Circuit" %}</h2>
-          <table class="table table-hover attr-table">
-            <tr>
-              <th scope="row">{% trans "Provider" %}</th>
-              <td>{{ object.virtual_circuit_termination.virtual_circuit.provider|linkify }}</td>
-            </tr>
-            <tr>
-              <th scope="row">{% trans "Provider Network" %}</th>
-              <td>{{ object.virtual_circuit_termination.virtual_circuit.provider_network|linkify }}</td>
-            </tr>
-            <tr>
-              <th scope="row">{% trans "Circuit ID" %}</th>
-              <td>{{ object.virtual_circuit_termination.virtual_circuit|linkify }}</td>
-            </tr>
-            <tr>
-              <th scope="row">{% trans "Role" %}</th>
-              <td>{{ object.virtual_circuit_termination.get_role_display }}</td>
-            </tr>
-            <tr>
-              <th scope="row">{% trans "Connections" %}</th>
-              <td>
-                {% for termination in object.virtual_circuit_termination.peer_terminations %}
-                  <a href="{{ termination.interface.parent_object.get_absolute_url }}">{{ termination.interface.parent_object }}</a>
-                  <i class="mdi mdi-chevron-right"></i>
-                  <a href="{{ termination.interface.get_absolute_url }}">{{ termination.interface }}</a>
-                  ({{ termination.get_role_display }})
-                  {% if not forloop.last %}<br />{% endif %}
-                {% endfor %}
-              </td>
-            </tr>
-          </table>
-        </div>
-      {% elif not object.is_virtual %}
-        <div class="card">
-          <h2 class="card-header">{% trans "Connection" %}</h2>
-          {% if object.mark_connected %}
-            <div class="card-body">
-              <span class="text-success"><i class="mdi mdi-check-bold"></i></span>
-              {% trans "Marked as Connected" %}
-            </div>
-          {% elif object.cable %}
-            {% include 'dcim/inc/connection_endpoints.html' with trace_url='dcim:interface_trace' %}
-          {% elif object.wireless_link %}
-            <table class="table table-hover attr-table">
-              <tr>
-                <th scope="row">{% trans "Wireless Link" %}</th>
-                <td>
-                  {{ object.wireless_link|linkify }}
-                  <a href="{% url 'dcim:interface_trace' pk=object.pk %}" class="btn btn-sm btn-primary" title="{% trans "Trace" %}">
-                    <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
-                  </a>
-                </td>
-              </tr>
-              {% with peer_interface=object.link_peers.0 %}
-                <tr>
-                  <th scope="row">{% trans "Device" %}</th>
-                  <td>{{ peer_interface.device|linkify }}</td>
-                </tr>
-                <tr>
-                  <th scope="row">{% trans "Name" %}</th>
-                  <td>{{ peer_interface|linkify }}</td>
-                </tr>
-                <tr>
-                  <th scope="row">{% trans "Type" %}</th>
-                  <td>{{ peer_interface.get_type_display }}</td>
-                </tr>
-              {% endwith %}
-            </table>
-          {% else %}
-            <div class="card-body text-muted">
-              {% trans "Not Connected" %}
-              {% if object.is_wired and perms.dcim.add_cable %}
-                <div class="dropdown float-end">
-                  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> {% trans "Connect" %}
-                  </button>
-                  <ul class="dropdown-menu dropdown-menu-end">
-                    <li>
-                      <a class="dropdown-item" href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.interface&a_terminations={{ object.pk }}&b_terminations_type=dcim.interface&return_url={{ object.get_absolute_url }}">{% trans "Interface" %}</a>
-                    </li>
-                    <li>
-                      <a class="dropdown-item" href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.interface&a_terminations={{ object.pk }}&b_terminations_type=dcim.frontport&return_url={{ object.get_absolute_url }}">{% trans "Front Port" %}</a>
-                    </li>
-                    <li>
-                      <a class="dropdown-item" href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.interface&a_terminations={{ object.pk }}&b_terminations_type=dcim.rearport&return_url={{ object.get_absolute_url }}">{% trans "Rear Port" %}</a>
-                    </li>
-                    <li>
-                      <a class="dropdown-item" href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.interface&a_terminations={{ object.pk }}&b_terminations_type=circuits.circuittermination&return_url={{ object.get_absolute_url }}">{% trans "Circuit Termination" %}</a>
-                    </li>
-                  </ul>
-                </div>
-              {% elif object.is_wireless and perms.wireless.add_wirelesslink %}
-                <div class="dropdown float-end">
-                  <a href="{% url 'wireless:wirelesslink_add' %}?interface_a={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-primary">
-                    <span class="mdi mdi-wifi-plus" aria-hidden="true"></span> {% trans "Connect" %}
-                  </a>
-                </div>
-              {% endif %}
-            </div>
-          {% endif %}
-        </div>
-      {% endif %}
-      {% if object.is_wireless %}
-        <div class="card">
-          <h2 class="card-header">{% trans "Wireless" %}</h2>
-          {% with peer=object.connected_endpoints.0 %}
-            <table class="table table-hover">
-              <thead>
-                <tr>
-                  <th></th>
-                  <th>{% trans "Local" %}</th>
-                  {% if peer %}
-                    <th>{% trans "Peer" %}</th>
-                  {% endif %}
-                </tr>
-              </thead>
-              <tr>
-                <th scope="row">{% trans "Role" %}</th>
-                <td>{{ object.get_rf_role_display|placeholder }}</td>
-                {% if peer %}
-                  <td>{{ peer.get_rf_role_display|placeholder }}</td>
-                {% endif %}
-              </tr>
-              <tr>
-                <th scope="row">{% trans "Channel" %}</th>
-                <td>{{ object.get_rf_channel_display|placeholder }}</td>
-                {% if peer %}
-                  <td{% if peer.rf_channel != object.rf_channel %} class="text-danger"{% endif %}>
-                    {{ peer.get_rf_channel_display|placeholder }}
-                  </td>
-                {% endif %}
-              </tr>
-              <tr>
-                <th scope="row">{% trans "Channel Frequency" %}</th>
-                <td>
-                  {% if object.rf_channel_frequency %}
-                    {{ object.rf_channel_frequency|floatformat:"-2" }} {% trans "MHz" %}
-                  {% else %}
-                    {{ ''|placeholder }}
-                  {% endif %}
-                </td>
-                {% if peer %}
-                  <td{% if peer.rf_channel_frequency != object.rf_channel_frequency %} class="text-danger"{% endif %}>
-                    {% if peer.rf_channel_frequency %}
-                      {{ peer.rf_channel_frequency|floatformat:"-2" }} {% trans "MHz" %}
-                    {% else %}
-                      {{ ''|placeholder }}
-                    {% endif %}
-                  </td>
-                {% endif %}
-              </tr>
-              <tr>
-                <th scope="row">{% trans "Channel Width" %}</th>
-                <td>
-                  {% if object.rf_channel_width %}
-                    {{ object.rf_channel_width|floatformat:"-3" }} {% trans "MHz" %}
-                  {% else %}
-                    {{ ''|placeholder }}
-                  {% endif %}
-                </td>
-                {% if peer %}
-                  <td{% if peer.rf_channel_width != object.rf_channel_width %} class="text-danger"{% endif %}>
-                    {% if peer.rf_channel_width %}
-                      {{ peer.rf_channel_width|floatformat:"-3" }} {% trans "MHz" %}
-                    {% else %}
-                      {{ ''|placeholder }}
-                    {% endif %}
-                  </td>
-                {% endif %}
-              </tr>
-            </table>
-          {% endwith %}
-        </div>
-        <div class="card">
-          <h2 class="card-header">{% trans "Wireless LANs" %}</h2>
-          <table class="table table-hover">
-            <thead>
-              <tr>
-                <th>{% trans "Group" %}</th>
-                <th>{% trans "SSID" %}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {% for wlan in object.wireless_lans.all %}
-                <tr>
-                  <td>{{ wlan.group|linkify|placeholder }}</td>
-                  <td>{{ wlan|linkify:"ssid" }}</td>
-                </tr>
-              {% empty %}
-                <tr>
-                  <td colspan="3" class="text-muted">{% trans "None" %}</td>
-                </tr>
-              {% endfor %}
-            </tbody>
-          </table>
-        </div>
-      {% endif %}
-      {% include 'ipam/inc/panels/fhrp_groups.html' %}
-      {% include 'dcim/inc/panels/inventory_items.html' %}
-      {% plugin_right_page object %}
-    </div>
-  </div>
-  <div class="row mb-3">
-    <div class="col col-md-12">
-      <div class="card">
-        <h2 class="card-header">
-          {% trans "IP Addresses" %}
-          {% if perms.ipam.add_ipaddress %}
-            <div class="card-actions">
-              <a href="{% url 'ipam:ipaddress_add' %}?device={{ object.device.pk }}&interface={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-ghost-primary btn-sm">
-                <span class="mdi mdi-plus-thick" aria-hidden="true"></span> {% trans "Add IP Address" %}
-              </a>
-            </div>
-          {% endif %}
-        </h2>
-        {% htmx_table 'ipam:ipaddress_list' interface_id=object.pk %}
-      </div>
-    </div>
-  </div>
-  <div class="row mb-3">
-    <div class="col col-md-12">
-      <div class="card">
-        <h2 class="card-header">
-          {% trans "MAC Addresses" %}
-          {% if perms.dcim.add_macaddress %}
-            <div class="card-actions">
-              <a href="{% url 'dcim:macaddress_add' %}?device={{ object.device.pk }}&interface={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-ghost-primary btn-sm">
-                <span class="mdi mdi-plus-thick" aria-hidden="true"></span> {% trans "Add MAC Address" %}
-              </a>
-            </div>
-          {% endif %}
-        </h2>
-        {% htmx_table 'dcim:macaddress_list' interface_id=object.pk %}
-      </div>
-    </div>
-  </div>
-  <div class="row mb-3">
-    <div class="col col-md-12">
-      <div class="card">
-        <h2 class="card-header">{% trans "VLANs" %}</h2>
-        {% htmx_table 'ipam:vlan_list' interface_id=object.pk %}
-      </div>
-    </div>
-  </div>
-  {% if object.is_lag %}
-    <div class="row mb-3">
-      <div class="col col-md-12">
-        {% include 'inc/panel_table.html' with table=lag_interfaces_table heading="LAG Members" %}
-      </div>
-    </div>
-  {% endif %}
-  {% if object.vlan_translation_policy %}
-    <div class="row mb-3">
-      <div class="col col-md-12">
-        {% include 'inc/panel_table.html' with table=vlan_translation_table heading="VLAN Translation" %}
-      </div>
-    </div>
-  {% endif %}
-  <div class="row mb-3">
-    <div class="col col-md-12">
-      {% include 'inc/panel_table.html' with table=bridge_interfaces_table heading="Bridged Interfaces" %}
-    </div>
-  </div>
-  <div class="row mb-3">
-    <div class="col col-md-12">
-      {% include 'inc/panel_table.html' with table=child_interfaces_table heading="Child Interfaces" %}
-    </div>
-  </div>
-  <div class="row mb-3">
-    <div class="col col-md-12">
-      {% plugin_full_width_page object %}
-    </div>
-  </div>
-{% endblock %}

netbox/templates/dcim/interface/attrs/mac_address.html

@@ -0,0 +1,3 @@
+{% load helpers i18n %}
+<span class="font-monospace">{{ value|linkify }}</span>
+<span class="badge text-bg-primary">{% trans "Primary" %}</span>

netbox/templates/dcim/interface/attrs/speed.html

@@ -0,0 +1,2 @@
+{% load helpers %}
+{{ value|humanize_speed }}

netbox/templates/dcim/panels/interface_connection.html

@@ -0,0 +1,105 @@
+{% extends "ui/panels/_base.html" %}
+{% load helpers i18n %}
+
+{% block panel_content %}
+  {% if object.mark_connected %}
+    <div class="card-body">
+      <span class="text-success"><i class="mdi mdi-check-bold"></i></span>
+      {% trans "Marked as Connected" %}
+    </div>
+  {% elif object.cable %}
+    <table class="table table-hover attr-table">
+      <tr>
+        <th scope="row">{% trans "Cable" %}</th>
+        <td>
+          {{ object.cable|linkify }}
+          <a href="{% url 'dcim:interface_trace' pk=object.pk %}" class="btn btn-sm btn-primary" title="{% trans "Trace" %}">
+            <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <th scope="row">{% trans "Path status" %}</th>
+        <td>
+          {% if object.path.is_complete and object.path.is_active %}
+            <span class="badge text-bg-success">{% trans "Reachable" %}</span>
+          {% else %}
+            <span class="badge text-bg-danger">{% trans "Not Reachable" %}</span>
+          {% endif %}
+        </td>
+      </tr>
+      <tr>
+        <th scope="row">{% trans "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>
+  {% elif object.wireless_link %}
+    <table class="table table-hover attr-table">
+      <tr>
+        <th scope="row">{% trans "Wireless Link" %}</th>
+        <td>
+          {{ object.wireless_link|linkify }}
+          <a href="{% url 'dcim:interface_trace' pk=object.pk %}" class="btn btn-sm btn-primary" title="{% trans "Trace" %}">
+            <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
+          </a>
+        </td>
+      </tr>
+      {% with peer_interface=object.link_peers.0 %}
+        <tr>
+          <th scope="row">{% trans "Device" %}</th>
+          <td>{{ peer_interface.device|linkify }}</td>
+        </tr>
+        <tr>
+          <th scope="row">{% trans "Name" %}</th>
+          <td>{{ peer_interface|linkify }}</td>
+        </tr>
+        <tr>
+          <th scope="row">{% trans "Type" %}</th>
+          <td>{{ peer_interface.get_type_display }}</td>
+        </tr>
+      {% endwith %}
+    </table>
+  {% else %}
+    <div class="card-body text-muted">
+      {% trans "Not Connected" %}
+      {% if object.is_wired and perms.dcim.add_cable %}
+        <div class="dropdown float-end">
+          <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> {% trans "Connect" %}
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li>
+              <a class="dropdown-item" href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.interface&a_terminations={{ object.pk }}&b_terminations_type=dcim.interface&return_url={{ object.get_absolute_url }}">{% trans "Interface" %}</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.interface&a_terminations={{ object.pk }}&b_terminations_type=dcim.frontport&return_url={{ object.get_absolute_url }}">{% trans "Front Port" %}</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.interface&a_terminations={{ object.pk }}&b_terminations_type=dcim.rearport&return_url={{ object.get_absolute_url }}">{% trans "Rear Port" %}</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="{% url 'dcim:cable_add' %}?a_terminations_type=dcim.interface&a_terminations={{ object.pk }}&b_terminations_type=circuits.circuittermination&return_url={{ object.get_absolute_url }}">{% trans "Circuit Termination" %}</a>
+            </li>
+          </ul>
+        </div>
+      {% elif object.is_wireless and perms.wireless.add_wirelesslink %}
+        <div class="dropdown float-end">
+          <a href="{% url 'wireless:wirelesslink_add' %}?interface_a={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-primary">
+            <span class="mdi mdi-wifi-plus" aria-hidden="true"></span> {% trans "Connect" %}
+          </a>
+        </div>
+      {% endif %}
+    </div>
+  {% endif %}
+{% endblock panel_content %}

netbox/templates/dcim/panels/interface_virtual_circuit.html

@@ -0,0 +1,35 @@
+{% extends "ui/panels/_base.html" %}
+{% load helpers i18n %}
+
+{% block panel_content %}
+  <table class="table table-hover attr-table">
+    <tr>
+      <th scope="row">{% trans "Provider" %}</th>
+      <td>{{ object.virtual_circuit_termination.virtual_circuit.provider|linkify }}</td>
+    </tr>
+    <tr>
+      <th scope="row">{% trans "Provider Network" %}</th>
+      <td>{{ object.virtual_circuit_termination.virtual_circuit.provider_network|linkify }}</td>
+    </tr>
+    <tr>
+      <th scope="row">{% trans "Circuit ID" %}</th>
+      <td>{{ object.virtual_circuit_termination.virtual_circuit|linkify }}</td>
+    </tr>
+    <tr>
+      <th scope="row">{% trans "Role" %}</th>
+      <td>{{ object.virtual_circuit_termination.get_role_display }}</td>
+    </tr>
+    <tr>
+      <th scope="row">{% trans "Connections" %}</th>
+      <td>
+        {% for termination in object.virtual_circuit_termination.peer_terminations %}
+          <a href="{{ termination.interface.parent_object.get_absolute_url }}">{{ termination.interface.parent_object }}</a>
+          <i class="mdi mdi-chevron-right"></i>
+          <a href="{{ termination.interface.get_absolute_url }}">{{ termination.interface }}</a>
+          ({{ termination.get_role_display }})
+          {% if not forloop.last %}<br />{% endif %}
+        {% endfor %}
+      </td>
+    </tr>
+  </table>
+{% endblock panel_content %}

netbox/templates/dcim/panels/interface_wireless.html

@@ -0,0 +1,72 @@
+{% extends "ui/panels/_base.html" %}
+{% load helpers i18n %}
+
+{% block panel_content %}
+  {% with peer=object.connected_endpoints.0 %}
+    <table class="table table-hover attr-table">
+      <thead>
+        <tr class="border-bottom">
+          <th></th>
+          <th>{% trans "Local" %}</th>
+          {% if peer %}
+            <th>{% trans "Peer" %}</th>
+          {% endif %}
+        </tr>
+      </thead>
+      <tr>
+        <th scope="row">{% trans "Role" %}</th>
+        <td>{{ object.get_rf_role_display|placeholder }}</td>
+        {% if peer %}
+          <td>{{ peer.get_rf_role_display|placeholder }}</td>
+        {% endif %}
+      </tr>
+      <tr>
+        <th scope="row">{% trans "Channel" %}</th>
+        <td>{{ object.get_rf_channel_display|placeholder }}</td>
+        {% if peer %}
+          <td{% if peer.rf_channel != object.rf_channel %} class="text-danger"{% endif %}>
+            {{ peer.get_rf_channel_display|placeholder }}
+          </td>
+        {% endif %}
+      </tr>
+      <tr>
+        <th scope="row">{% trans "Channel frequency" %}</th>
+        <td>
+          {% if object.rf_channel_frequency %}
+            {{ object.rf_channel_frequency|floatformat:"-2" }} {% trans "MHz" %}
+          {% else %}
+            {{ ''|placeholder }}
+          {% endif %}
+        </td>
+        {% if peer %}
+          <td{% if peer.rf_channel_frequency != object.rf_channel_frequency %} class="text-danger"{% endif %}>
+            {% if peer.rf_channel_frequency %}
+              {{ peer.rf_channel_frequency|floatformat:"-2" }} {% trans "MHz" %}
+            {% else %}
+              {{ ''|placeholder }}
+            {% endif %}
+          </td>
+        {% endif %}
+      </tr>
+      <tr>
+        <th scope="row">{% trans "Channel width" %}</th>
+        <td>
+          {% if object.rf_channel_width %}
+            {{ object.rf_channel_width|floatformat:"-3" }} {% trans "MHz" %}
+          {% else %}
+            {{ ''|placeholder }}
+          {% endif %}
+        </td>
+        {% if peer %}
+          <td{% if peer.rf_channel_width != object.rf_channel_width %} class="text-danger"{% endif %}>
+            {% if peer.rf_channel_width %}
+              {{ peer.rf_channel_width|floatformat:"-3" }} {% trans "MHz" %}
+            {% else %}
+              {{ ''|placeholder }}
+            {% endif %}
+          </td>
+        {% endif %}
+      </tr>
+    </table>
+  {% endwith %}
+{% endblock panel_content %}

netbox/templates/dcim/panels/interface_wireless_lans.html

@@ -0,0 +1,25 @@
+{% extends "ui/panels/_base.html" %}
+{% load helpers i18n %}
+
+{% block panel_content %}
+  <table class="table table-hover">
+    <thead>
+      <tr>
+        <th>{% trans "Group" %}</th>
+        <th>{% trans "SSID" %}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for wlan in object.wireless_lans.all %}
+        <tr>
+          <td>{{ wlan.group|linkify|placeholder }}</td>
+          <td>{{ wlan|linkify:"ssid" }}</td>
+        </tr>
+      {% empty %}
+        <tr>
+          <td colspan="2" class="text-muted">{% trans "None" %}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+{% endblock panel_content %}