From a71604e79fd51cfce5e3e0c4943c72325e6b2ee3 Mon Sep 17 00:00:00 2001
From: Matt <mtt.lov@gmail.com>
Date: Thu, 19 Aug 2021 12:35:30 -0700
Subject: [PATCH] Closes #6881: Wrap interface IP addresses in a badge that
 displays status and/or role

---
 netbox/dcim/tables/template_code.py         |  16 +++++++++++++---
 netbox/project-static/dist/netbox-dark.css  | Bin 807684 -> 808043 bytes
 netbox/project-static/dist/netbox-light.css | Bin 502373 -> 502664 bytes
 netbox/project-static/dist/netbox-print.css | Bin 1658189 -> 1658782 bytes
 netbox/project-static/styles/netbox.scss    |  18 ++++++++++++++++++
 5 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/netbox/dcim/tables/template_code.py b/netbox/dcim/tables/template_code.py
index fa22dd5c0..65a30ac61 100644
--- a/netbox/dcim/tables/template_code.py
+++ b/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 = """
diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css
index 749b9bd4892c7c2eee79af8876fd620fdbbd3e58..0d06bf3e7f4786ab47c60d5950f28a09a46b3ae7 100644
GIT binary patch
delta 184
zcmZo!X83xAVM7aJ3sVbo3rh=Y3tJ0&3r7oQ3s(#G79I`v=?RKFY(jb^iAg!Bx=D#C
z>8ZNuMfs%#)9r<My1|kPn35<$)zd$+vy15FX6ET8=jWBA=9O3%B&MWf=A~Qd8Jni&
zD(IO3N$cFiqI95=lKcWIJ)`Ld3pj<RZz$tno4%u(Q;yMO`o~+Gs?+~@@bGLmap$?f
F4FEW1KHLBR

delta 44
zcmaF8!mwqTVM7aJ3sVbo3rh=Y3tJ0&3r7oQ3s(#G79I`v=?^@3__xpV;5o|;0AkM%
A7ytkO

diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css
index 947e9932db98a3201505b3bf0b815b09a1790577..a5ffc8a336249adc1069af52eaaa4c210843e141 100644
GIT binary patch
delta 189
zcmaEQMXuwzTtf?E3sVbo3rh=Y3)>d<zYC`aOkigd(kn?!%1PBtN=!*l)lDzTFD;lZ
zQqP{L3KmwtltmGmyfIDGFgG(#H#tAABsH(Zx*#znB{MJGO3&CdHCI8;3`kn%CKjaw
zm6YTcSm_y=7NzD+4>VyFRkTh6>d`IEtV*@gGY1Jn1j<u0(=$q}ObiUR|5?bM$pHXX
CyF(uU

delta 29
lcmeCUF8B0`Ttf?E3sVbo3rh=Y3)>d<zYDi3EN0K(006c(3rqk2

diff --git a/netbox/project-static/dist/netbox-print.css b/netbox/project-static/dist/netbox-print.css
index 793edcd2cf6aac9d351340e50766e6a883d48fd4..9ed8db851a59c4f00dfdfc3a925fab6af0618a7a 100644
GIT binary patch
delta 324
zcmX>*D|O!d)P@$u7N!>F7M2#)7Pc1l7LFFq7OocV7M>Q~7QPn#7J(MQ7NHj57LgXw
z7O@ub7KtsA-KNtw<Vdjb=#?ZU<)rE+C8ngOP8Vq8R-POn$TodL78WV3=>;z(*o2UE
z=%yFtmljMve_o;nY@8IPqykiEdVmX$65MbC3N^u2!L))M2eAr8sCs(fGd>aK+|0b`
z@|PrJg>n;%(lhgPOY#e>^o&f4Qgf}RKYS-7GCgXhupFbw^o6^`#HOD!m*k&*##B-k
N<dp4uO(iFY0|1%KZ%+UK

delta 79
zcmbO?KlSXa)P@$u7N!>F7M2#)7Pc1l7LFFq7OocV7M>Q~7QPn#7J(MQ7NHj57LgXw
j7O@ub7KtsA-KNv!tt9!U%UVdvP7V-c+s<bpIYAr%5rh}{

diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index a2a108e7e..95d45b02b 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/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;