Closes #12128: Refresh the web UI to employ the Tabler CSS framework

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ jobs:
     strategy:
       matrix:
         python-version: ['3.10', '3.11', '3.12']
-        node-version: ['14.x']
+        node-version: ['18.x']
     services:
       redis:
         image: redis

netbox/dcim/tables/template_code.py

@@ -21,37 +21,33 @@
 """
 
 DEVICE_LINK = """
-{{ value|default:'<span class="badge bg-info">Unnamed device</span>' }}
+{{ value|default:'<span class="badge text-bg-info">Unnamed device</span>' }}
 """
 
 DEVICEBAY_STATUS = """
 {% if record.installed_device_id %}
-    <span class="badge bg-{{ record.installed_device.get_status_color }}">
+    <span class="badge text-bg-{{ record.installed_device.get_status_color }}">
         {{ record.installed_device.get_status_display }}
     </span>
 {% else %}
-    <span class="badge bg-secondary">Vacant</span>
+    <span class="badge text-bg-secondary">Vacant</span>
 {% endif %}
 """
 
 INTERFACE_IPADDRESSES = """
-<div class="table-badge-group">
   {% for ip in value.all %}
     {% if ip.status != 'active' %}
-      <a href="{{ ip.get_absolute_url }}" class="table-badge badge bg-{{ ip.get_status_color }}" data-bs-toggle="tooltip" data-bs-placement="left" title="{{ ip.get_status_display }}">{{ ip }}</a>
+      <a href="{{ ip.get_absolute_url }}" class="badge text-bg-{{ ip.get_status_color }}" data-bs-toggle="tooltip" data-bs-placement="left" title="{{ ip.get_status_display }}">{{ ip }}</a>
     {% else %}
-      <a href="{{ ip.get_absolute_url }}" class="table-badge">{{ ip }}</a>
+      <a href="{{ ip.get_absolute_url }}">{{ ip }}</a>
     {% endif %}
   {% endfor %}
-</div>
 """
 
 INTERFACE_FHRPGROUPS = """
-<div class="table-badge-group">
   {% for assignment in value.all %}
     <a href="{{ assignment.group.get_absolute_url }}">{{ assignment.group.get_protocol_display }}: {{ assignment.group.group_id }}</a>
   {% endfor %}
-</div>
 """
 
 INTERFACE_TAGGED_VLANS = """

netbox/dcim/views.py

@@ -3353,6 +3353,7 @@ def get(self, request, pk):
         formset = VCMemberFormSet(queryset=members_queryset)
 
         return render(request, 'dcim/virtualchassis_edit.html', {
+            'object': virtual_chassis,
             'vc_form': vc_form,
             'formset': formset,
             'return_url': self.get_return_url(request, virtual_chassis),

netbox/ipam/tables/ip.py

@@ -18,7 +18,7 @@
     'RoleTable',
 )
 
-AVAILABLE_LABEL = mark_safe('<span class="badge bg-success">Available</span>')
+AVAILABLE_LABEL = mark_safe('<span class="badge text-bg-success">Available</span>')
 
 AGGREGATE_COPY_BUTTON = """
 {% copy_content record.pk prefix="aggregate_" %}

netbox/ipam/tables/vlans.py

@@ -18,7 +18,7 @@
     'VLANVirtualMachinesTable',
 )
 
-AVAILABLE_LABEL = mark_safe('<span class="badge bg-success">Available</span>')
+AVAILABLE_LABEL = mark_safe('<span class="badge text-bg-success">Available</span>')
 
 VLAN_LINK = """
 {% if record.pk %}

netbox/netbox/navigation/__init__.py

@@ -79,8 +79,7 @@ def get_model_buttons(app_label, model_name, actions=('add', 'import')):
                 link=f'{app_label}:{model_name}_add',
                 title='Add',
                 icon_class='mdi mdi-plus-thick',
-                permissions=[f'{app_label}.add_{model_name}'],
-                color=ButtonColorChoices.GREEN
+                permissions=[f'{app_label}.add_{model_name}']
             )
         )
     if 'import' in actions:
@@ -89,8 +88,7 @@ def get_model_buttons(app_label, model_name, actions=('add', 'import')):
                 link=f'{app_label}:{model_name}_import',
                 title='Import',
                 icon_class='mdi mdi-upload',
-                permissions=[f'{app_label}.add_{model_name}'],
-                color=ButtonColorChoices.CYAN
+                permissions=[f'{app_label}.add_{model_name}']
             )
         )
 

netbox/netbox/navigation/menu.py

@@ -386,15 +386,13 @@
                             link=f'users:netboxuser_add',
                             title='Add',
                             icon_class='mdi mdi-plus-thick',
-                            permissions=[f'auth.add_user'],
-                            color=ButtonColorChoices.GREEN
+                            permissions=[f'auth.add_user']
                         ),
                         MenuItemButton(
                             link=f'users:netboxuser_import',
                             title='Import',
                             icon_class='mdi mdi-upload',
-                            permissions=[f'auth.add_user'],
-                            color=ButtonColorChoices.CYAN
+                            permissions=[f'auth.add_user']
                         )
                     )
                 ),
@@ -409,15 +407,13 @@
                             link=f'users:netboxgroup_add',
                             title='Add',
                             icon_class='mdi mdi-plus-thick',
-                            permissions=[f'auth.add_group'],
-                            color=ButtonColorChoices.GREEN
+                            permissions=[f'auth.add_group']
                         ),
                         MenuItemButton(
                             link=f'users:netboxgroup_import',
                             title='Import',
                             icon_class='mdi mdi-upload',
-                            permissions=[f'auth.add_group'],
-                            color=ButtonColorChoices.CYAN
+                            permissions=[f'auth.add_group']
                         )
                     )
                 ),

netbox/netbox/tables/columns.py

@@ -161,8 +161,11 @@ def __init__(self, *args, **kwargs):
         visible = kwargs.pop('visible', False)
         if 'attrs' not in kwargs:
             kwargs['attrs'] = {
+                'th': {
+                    'class': 'w-1',
+                },
                 'td': {
-                    'class': 'min-width',
+                    'class': 'w-1',
                 },
                 'input': {
                     'class': 'form-check-input'
@@ -322,7 +325,7 @@ def render(self, record, bound_column, value):
         except AttributeError:
             bg_color = self.DEFAULT_BG_COLOR
 
-        return mark_safe(f'<span class="badge bg-{bg_color}">{value}</span>')
+        return mark_safe(f'<span class="badge text-bg-{bg_color}">{value}</span>')
 
     def value(self, value):
         return value

netbox/netbox/tables/template_code.py

@@ -1,6 +1,6 @@
 SEARCH_RESULT_ATTRS = """
 {% for name, value in record.display_attrs.items %}
-  <span class="badge bg-secondary"
+  <span class="badge text-bg-secondary"
       {% if value|length > 40 %} data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ value }}"{% endif %}
     >
     {{ name|bettertitle }}:

netbox/project-static/bundle.js

@@ -73,12 +73,10 @@ async function bundleScripts() {
 async function bundleStyles() {
   try {
     const entryPoints = {
-      'netbox-external': 'styles/_external.scss',
-      'netbox-light': 'styles/_light.scss',
-      'netbox-dark': 'styles/_dark.scss',
-      'netbox-print': 'styles/_print.scss',
-      rack_elevation: 'styles/_rack_elevation.scss',
-      cable_trace: 'styles/_cable_trace.scss',
+      'netbox-external': 'styles/external.scss',
+      'netbox': 'styles/netbox.scss',
+      rack_elevation: 'styles/svg/rack_elevation.scss',
+      cable_trace: 'styles/svg/cable_trace.scss',
       graphiql: 'netbox-graphiql/graphiql.scss',
     };
     const pluginOptions = { outputStyle: 'compressed' };
@@ -102,8 +100,7 @@ async function bundleStyles() {
     });
     if (result.errors.length === 0) {
       for (const [targetName, sourceName] of Object.entries(entryPoints)) {
-        const source = sourceName.split('/')[1];
-        console.log(`✅ Bundled source file '${source}' to '${targetName}.css'`);
+        console.log(`✅ Bundled source file '${sourceName}' to '${targetName}.css'`);
       }
     }
   } catch (err) {