Closes #6881: Wrap interface IP addresses in a badge that displays status and/or role

netbox/dcim/tables/template_code.py

@@ -41,9 +41,19 @@ DEVICEBAY_STATUS = """
 """
 
 INTERFACE_IPADDRESSES = """
-{% for ip in record.ip_addresses.all %}
-    <a href="{{ ip.get_absolute_url }}">{{ ip }}</a><br />
-{% endfor %}
+<div class="table-badge-group">
+    {% for ip in record.ip_addresses.all %}
+        <a
+        class="table-badge{% if ip.status != 'active' %} badge bg-{{ ip.get_status_class }}{% elif ip.role %} badge bg-{{ ip.get_role_class }}{% endif %}"
+        href="{{ ip.get_absolute_url }}"
+        {% if ip.status != 'active'%}data-bs-toggle="tooltip" data-bs-placement="left" title="{{ ip.get_status_display }}"
+        {% elif ip.role %}data-bs-toggle="tooltip" data-bs-placement="left" title="{{ ip.get_role_display }}"
+        {% endif %}
+        >
+        {{ ip }}
+        </a>
+    {% endfor %}
+</div>
 """
 
 INTERFACE_TAGGED_VLANS = """

netbox/project-static/styles/netbox.scss

@@ -797,6 +797,24 @@ table tbody {
   }
 }
 
+// Style objects with statuses/roles within a table. As of implementation, used for IP addresses
+// assigned to interfaces.
+table .table-badge-group {
+  font-family: $font-family-monospace;
+
+  .table-badge {
+    display: block;
+    width: min-content;
+    // Apply badge padding so that IP addresses *not* within a badge appear aligned with IP
+    // addresses that *are* within a badge.
+    padding: $badge-padding-y $badge-padding-x;
+    margin-top: map.get($spacers, 1);
+    margin-bottom: map.get($spacers, 1);
+    font-size: $font-size-xs;
+    font-weight: $font-weight-base;
+  }
+}
+
 pre.change-data {
   padding-right: 0;
   padding-left: 0;