migrate cluster templates to bootstrap 5

netbox/templates/virtualization/cluster.html

@@ -72,34 +72,6 @@
         </div>
         {% plugin_left_page object %}
     </div>
-    <div class="col-md-7">
-        <div class="card">
-            <h5 class="card-header">
-                Host Devices
-            </h5>
-            <div class="card-body">
-                {% if perms.virtualization.change_cluster %}
-                <form action="{% url 'virtualization:cluster_remove_devices' pk=object.pk %}" method="post">
-                    {% csrf_token %}
-                    {% include 'responsive_table.html' with table=device_table %}
-                    {% if perms.virtualization.change_cluster %}
-                    <div class="card-footer noprint justify-content-between d-flex">
-                        <button type="submit" name="_remove" class="btn btn-danger primary btn-sm">
-                            <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>
-                            Remove devices
-                        </button>
-                        <a href="{% url 'virtualization:cluster_add_devices' pk=object.pk %}?site={{ object.site.pk }}" class="btn btn-primary btn-sm">
-                            <span class="mdi mdi-plus-thick" aria-hidden="true"></span>
-                            Add devices
-                        </a>
-                    </div>
-                </form>
-                {% endif %}
-                {% endif %}
-            </div>
-        </div>
-        {% plugin_right_page object %}
-	</div>
 </div>
 <div class="row">
   <div class="col-md-12">

netbox/templates/virtualization/cluster/base.html

@@ -20,12 +20,12 @@
 
 {% block extra_controls %}
   {% if perms.virtualization.change_cluster and perms.virtualization.add_virtualmachine %}
-    <a href="{% url 'virtualization:virtualmachine_add' %}?cluster_id={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-primary">
+    <a href="{% url 'virtualization:virtualmachine_add' %}?cluster_id={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-primary m-1">
       <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Virtual Machine
     </a>
   {% endif %}
   {% if perms.virtualization.change_cluster %}
-    <a href="{% url 'virtualization:cluster_add_devices' pk=object.pk %}?site_id={{ object.site.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-primary">
+    <a href="{% url 'virtualization:cluster_add_devices' pk=object.pk %}?site_id={{ object.site.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-primary btn-sm m-1">
       <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Assign Device
     </a>
   {% endif %}

netbox/templates/virtualization/cluster/devices.html

@@ -4,20 +4,22 @@
 {% block content %}
 <div class="row">
   <div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Host Devices</strong>
-      </div>
+    <div class="card">
+      <h5 class="card-header">
+        Host Devices
+      </h5>
       <form action="{% url 'virtualization:cluster_remove_devices' pk=object.pk %}" method="post">
       {% csrf_token %}
-      {% include 'responsive_table.html' with table=devices_table %}
-        {% if perms.virtualization.change_cluster %}
-          <div class="panel-footer noprint">
-            <button type="submit" name="_remove" class="btn btn-danger primary btn-xs">
-              <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Remove devices
-            </button>
-          </div>
-        {% endif %}
+      <div class="card-body">
+        {% include 'responsive_table.html' with table=devices_table %}
+      </div>
+      {% if perms.virtualization.change_cluster %}
+        <div class="card-footer noprint">
+          <button type="submit" name="_remove" class="btn btn-danger btn-sm">
+            <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Remove Devices
+          </button>
+        </div>
+      {% endif %}
       </form>
     </div>
   </div>

netbox/templates/virtualization/cluster/virtual_machines.html

@@ -4,11 +4,13 @@
 {% block content %}
 <div class="row">
   <div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Virtual Machines</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Virtual Machines
+      </h5>
+      <div class="card-body">
+        {% include 'responsive_table.html' with table=virtualmachines_table %}
       </div>
-      {% include 'responsive_table.html' with table=virtualmachines_table %}
     </div>
   </div>
 </div>

netbox/templates/virtualization/clustergroup.html

@@ -3,33 +3,35 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'virtualization:clustertype_list' %}">Cluster Groups</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'virtualization:clustertype_list' %}">Cluster Groups</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Cluster Group</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Cluster Group
+      </h5>
+      <div class="card-body">
+        <table class="table table-hover attr-table">
+          <tr>
+            <th scope="row">Name</th>
+            <td>{{ object.name }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Description</th>
+            <td>{{ object.description|placeholder }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Clusters</th>
+            <td>
+              <a href="{% url 'virtualization:cluster_list' %}?group_id={{ object.pk }}">{{ clusters_table.rows|length }}</a>
+            </td>
+          </tr>
+        </table>
       </div>
-      <table class="table table-hover panel-body attr-table">
-        <tr>
-          <td>Name</td>
-          <td>{{ object.name }}</td>
-        </tr>
-        <tr>
-          <td>Description</td>
-          <td>{{ object.description|placeholder }}</td>
-        </tr>
-        <tr>
-          <td>Clusters</td>
-          <td>
-            <a href="{% url 'virtualization:cluster_list' %}?group_id={{ object.pk }}">{{ clusters_table.rows|length }}</a>
-          </td>
-        </tr>
-      </table>
     </div>
     {% plugin_left_page object %}
 	</div>
@@ -40,15 +42,17 @@
 </div>
 <div class="row">
 	<div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Clusters</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Clusters
+      </h5>
+      <div class="card-body">
+        {% include 'inc/table.html' with table=clusters_table %}
       </div>
-      {% include 'inc/table.html' with table=clusters_table %}
       {% if perms.virtualization.add_cluster %}
-        <div class="panel-footer text-right noprint">
-          <a href="{% url 'virtualization:cluster_add' %}?type={{ object.pk }}" class="btn btn-xs btn-primary">
-            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add cluster
+        <div class="card-footer text-end noprint">
+          <a href="{% url 'virtualization:cluster_add' %}?type={{ object.pk }}" class="btn btn-sm btn-primary">
+            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Cluster
           </a>
         </div>
       {% endif %}

netbox/templates/virtualization/clustertype.html

@@ -3,33 +3,35 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'virtualization:clustertype_list' %}">Cluster Types</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'virtualization:clustertype_list' %}">Cluster Types</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-3">
 	<div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Cluster Type</strong>
+    <div class="card">
+      <h5 class="card-header">
+        Cluster Type
+      </h5>
+      <div class="card-body">
+        <table class="table table-hover card-body attr-table">
+          <tr>
+            <th scope="row">Name</th>
+            <td>{{ object.name }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Description</th>
+            <td>{{ object.description|placeholder }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Clusters</th>
+            <td>
+              <a href="{% url 'virtualization:cluster_list' %}?type_id={{ object.pk }}">{{ clusters_table.rows|length }}</a>
+            </td>
+          </tr>
+        </table>
       </div>
-      <table class="table table-hover panel-body attr-table">
-        <tr>
-          <td>Name</td>
-          <td>{{ object.name }}</td>
-        </tr>
-        <tr>
-          <td>Description</td>
-          <td>{{ object.description|placeholder }}</td>
-        </tr>
-        <tr>
-          <td>Clusters</td>
-          <td>
-            <a href="{% url 'virtualization:cluster_list' %}?type_id={{ object.pk }}">{{ clusters_table.rows|length }}</a>
-          </td>
-        </tr>
-      </table>
     </div>
     {% plugin_left_page object %}
 	</div>
@@ -40,15 +42,17 @@
 </div>
 <div class="row">
 	<div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <strong>Clusters</strong>
-      </div>
+    <div class="card">
+      <h5 class="card-header">
+        Clusters
+      </h5>
+      <div class="card-body">
       {% include 'inc/table.html' with table=clusters_table %}
+      </div>
       {% if perms.virtualization.add_cluster %}
-        <div class="panel-footer text-right noprint">
-          <a href="{% url 'virtualization:cluster_add' %}?type={{ object.pk }}" class="btn btn-xs btn-primary">
-            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add cluster
+        <div class="card-footer text-end noprint">
+          <a href="{% url 'virtualization:cluster_add' %}?type={{ object.pk }}" class="btn btn-sm btn-primary">
+            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Cluster
           </a>
         </div>
       {% endif %}

netbox/templates/virtualization/virtualmachine.html

@@ -214,6 +214,5 @@
 {% endblock %}
 
 {% block javascript %}
-  <script src="{% static 'js/secrets.js' %}?v{{ settings.VERSION }}"></script>
   <script src="{% static 'js/tableconfig.js' %}?v{{ settings.VERSION }}"></script>
 {% endblock %}