migrate virtual machine & vm interface to bootstrap 5

netbox/templates/virtualization/virtualmachine.html

@@ -6,95 +6,97 @@
 {% load plugins %}
 
 {% block content %}
-<div class="row">
+<div class="row my-3">
 	<div class="col-md-6">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Virtual Machine</strong>
-            </div>
-            <table class="table table-hover panel-body attr-table">
-                <tr>
-                    <td>Name</td>
-                    <td>{{ object }}</td>
-                </tr>
-                <tr>
-                    <td>Status</td>
-                    <td>
-                        <span class="badge bg-{{ object.get_status_class }}">{{ object.get_status_display }}</span>
-                    </td>
-                </tr>
-                <tr>
-                    <td>Role</td>
-                    <td>
-                        {% if object.role %}
-                            <a href="{{ object.role.get_absolute_url }}">{{ object.role }}</a>
-                        {% else %}
-                            <span class="text-muted">None</span>
-                        {% endif %}
-                    </td>
-                </tr>
-                <tr>
-                    <td>Platform</td>
-                    <td>
-                        {% if object.platform %}
-                            <a href="{{ object.platform.get_absolute_url }}">{{ object.platform }}</a>
-                        {% else %}
-                            <span class="text-muted">None</span>
-                        {% endif %}
-                    </td>
-                </tr>
-                <tr>
-                    <td>Tenant</td>
-                    <td>
-                        {% if object.tenant %}
-                            {% if object.tenant.group %}
-                                <a href="{{ object.tenant.group.get_absolute_url }}">{{ object.tenant.group }}</a> /
+        <div class="card">
+            <h5 class="card-header">
+                Virtual Machine
+            </h5>
+            <div class="card-body">
+                <table class="table table-hover attr-table">
+                    <tr>
+                        <th scope="row">Name</th>
+                        <td>{{ object }}</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Status</th>
+                        <td>
+                            <span class="badge bg-{{ object.get_status_class }}">{{ object.get_status_display }}</span>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Role</th>
+                        <td>
+                            {% if object.role %}
+                                <a href="{{ object.role.get_absolute_url }}">{{ object.role }}</a>
+                            {% else %}
+                                <span class="text-muted">None</span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Platform</th>
+                        <td>
+                            {% if object.platform %}
+                                <a href="{{ object.platform.get_absolute_url }}">{{ object.platform }}</a>
+                            {% else %}
+                                <span class="text-muted">None</span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Tenant</th>
+                        <td>
+                            {% if object.tenant %}
+                                {% if object.tenant.group %}
+                                    <a href="{{ object.tenant.group.get_absolute_url }}">{{ object.tenant.group }}</a> /
+                                {% endif %}
+                                <a href="{{ object.tenant.get_absolute_url }}">{{ object.tenant }}</a>
+                            {% else %}
+                                <span class="text-muted">None</span>
                             {% endif %}
-                            <a href="{{ object.tenant.get_absolute_url }}">{{ object.tenant }}</a>
-                        {% else %}
-                            <span class="text-muted">None</span>
-                        {% endif %}
-                    </td>
-                </tr>
-                <tr>
-                    <td>Primary IPv4</td>
-                    <td>
-                        {% if object.primary_ip4 %}
-                            <a href="{% url 'ipam:ipaddress' pk=object.primary_ip4.pk %}">{{ object.primary_ip4.address.ip }}</a>
-                            {% if object.primary_ip4.nat_inside %}
-                                <span>(NAT for {{ object.primary_ip4.nat_inside.address.ip }})</span>
-                            {% elif object.primary_ip4.nat_outside %}
-                                <span>(NAT: {{ object.primary_ip4.nat_outside.address.ip }})</span>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Primary IPv4</th>
+                        <td>
+                            {% if object.primary_ip4 %}
+                                <a href="{% url 'ipam:ipaddress' pk=object.primary_ip4.pk %}">{{ object.primary_ip4.address.ip }}</a>
+                                {% if object.primary_ip4.nat_inside %}
+                                    <span>(NAT for {{ object.primary_ip4.nat_inside.address.ip }})</span>
+                                {% elif object.primary_ip4.nat_outside %}
+                                    <span>(NAT: {{ object.primary_ip4.nat_outside.address.ip }})</span>
+                                {% endif %}
+                            {% else %}
+                                <span class="text-muted">&mdash;</span>
                             {% endif %}
-                        {% else %}
-                            <span class="text-muted">&mdash;</span>
-                        {% endif %}
-                    </td>
-                </tr>
-                <tr>
-                    <td>Primary IPv6</td>
-                    <td>
-                        {% if object.primary_ip6 %}
-                            <a href="{% url 'ipam:ipaddress' pk=object.primary_ip6.pk %}">{{ object.primary_ip6.address.ip }}</a>
-                            {% if object.primary_ip6.nat_inside %}
-                                <span>(NAT for {{ object.primary_ip6.nat_inside.address.ip }})</span>
-                            {% elif object.primary_ip6.nat_outside %}
-                                <span>(NAT: {{ object.primary_ip6.nat_outside.address.ip }})</span>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Primary IPv6</th>
+                        <td>
+                            {% if object.primary_ip6 %}
+                                <a href="{% url 'ipam:ipaddress' pk=object.primary_ip6.pk %}">{{ object.primary_ip6.address.ip }}</a>
+                                {% if object.primary_ip6.nat_inside %}
+                                    <span>(NAT for {{ object.primary_ip6.nat_inside.address.ip }})</span>
+                                {% elif object.primary_ip6.nat_outside %}
+                                    <span>(NAT: {{ object.primary_ip6.nat_outside.address.ip }})</span>
+                                {% endif %}
+                            {% else %}
+                                <span class="text-muted">&mdash;</span>
                             {% endif %}
-                        {% else %}
-                            <span class="text-muted">&mdash;</span>
-                        {% endif %}
-                    </td>
-                </tr>
-            </table>
+                        </td>
+                    </tr>
+                </table>
+            </div>
         </div>
         {% include 'inc/custom_fields_panel.html' %}
         {% include 'extras/inc/tags_panel.html' with tags=object.tags.all url='virtualization:virtualmachine_list' %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Comments</strong>
-            </div>
-            <div class="panel-body rendered-markdown">
+        <div class="card">
+            <h5 class="card-header">
+                Comments
+            </h5>
+            <div class="card-body rendered-markdown">
                 {% if object.comments %}
                     {{ object.comments|render_markdown }}
                 {% else %}
@@ -105,91 +107,97 @@
         {% plugin_left_page object %}
     </div>
 	<div class="col-md-6">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Cluster</strong>
+        <div class="card">
+            <h5 class="card-header">
+                Cluster
+            </h5>
+            <div class="card-body">
+                <table class="table table-hover attr-table">
+                    <tr>
+                        <th scope="row">Cluster</th>
+                        <td>
+                            {% if object.cluster.group %}
+                                <a href="{{ object.cluster.group.get_absolute_url }}">{{ object.cluster.group }}</a> /
+                            {% endif %}
+                            <a href="{{ object.cluster.get_absolute_url }}">{{ object.cluster }}</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Cluster Type</th>
+                        <td>{{ object.cluster.type }}</td>
+                    </tr>
+                </table>
             </div>
-            <table class="table table-hover panel-body attr-table">
-                <tr>
-                    <td>Cluster</td>
-                    <td>
-                        {% if object.cluster.group %}
-                            <a href="{{ object.cluster.group.get_absolute_url }}">{{ object.cluster.group }}</a> /
-                        {% endif %}
-                        <a href="{{ object.cluster.get_absolute_url }}">{{ object.cluster }}</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>Cluster Type</td>
-                    <td>{{ object.cluster.type }}</td>
-                </tr>
-            </table>
         </div>
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Resources</strong>
+        <div class="card">
+            <h5 class="card-header">
+                Resources
+            </h5>
+            <div class="card-body">
+                <table class="table table-hover attr-table">
+                    <tr>
+                        <th scope="row"><i class="mdi mdi-gauge"></i> Virtual CPUs</th>
+                        <td>{{ object.vcpus|placeholder }}</td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><i class="mdi mdi-chip"></i> Memory</th>
+                        <td>
+                            {% if object.memory %}
+                                {{ object.memory }} MB
+                            {% else %}
+                                <span class="text-muted">&mdash;</span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><i class="mdi mdi-harddisk"></i> Disk Space</th>
+                        <td>
+                            {% if object.disk %}
+                                {{ object.disk }} GB
+                            {% else %}
+                                <span class="text-muted">&mdash;</span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                </table>
             </div>
-            <table class="table table-hover panel-body attr-table">
-                <tr>
-                    <td><i class="mdi mdi-gauge"></i> Virtual CPUs</td>
-                    <td>{{ object.vcpus|placeholder }}</td>
-                </tr>
-                <tr>
-                    <td><i class="mdi mdi-chip"></i> Memory</td>
-                    <td>
-                        {% if object.memory %}
-                            {{ object.memory }} MB
-                        {% else %}
-                            <span class="text-muted">&mdash;</span>
-                        {% endif %}
-                    </td>
-                </tr>
-                <tr>
-                    <td><i class="mdi mdi-harddisk"></i> Disk Space</td>
-                    <td>
-                        {% if object.disk %}
-                            {{ object.disk }} GB
-                        {% else %}
-                            <span class="text-muted">&mdash;</span>
-                        {% endif %}
-                    </td>
-                </tr>
-            </table>
         </div>
         {% if perms.secrets.view_secret %}
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Secrets</strong>
+            <div class="card">
+                <h5 class="card-header">
+                    Secrets
+                </h5>
+                <div class="card-body">
+                    {% include 'secrets/inc/assigned_secrets.html' %}
                 </div>
-                {% include 'secrets/inc/assigned_secrets.html' %}
                 {% if perms.secrets.add_secret %}
-                    <div class="panel-footer text-right noprint">
-                        <a href="{% url 'secrets:secret_add' %}?virtual_machine={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-xs btn-primary">
-                            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add secret
+                    <div class="card-footer text-end noprint">
+                        <a href="{% url 'secrets:secret_add' %}?virtual_machine={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-primary">
+                            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Secret
                         </a>
                     </div>
                 {% endif %}
             </div>
         {% endif %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Services</strong>
-            </div>
+        <div class="card">
+            <h5 class="card-header">
+                Services
+            </h5>
+            <div class="card-body">
             {% if services %}
-                <table class="table table-hover panel-body">
+                <table class="table table-hover">
                     {% for service in services %}
                         {% include 'ipam/inc/service.html' %}
                     {% endfor %}
                 </table>
             {% else %}
-                <div class="panel-body text-muted">
-                    None
-                </div>
+                <span class="text-muted">None</span>
             {% endif %}
+            </div>
             {% if perms.ipam.add_service %}
-                <div class="panel-footer text-right noprint">
-                    <a href="{% url 'virtualization:virtualmachine_service_assign' virtualmachine=object.pk %}" class="btn btn-xs btn-primary">
-                        <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Assign service
+                <div class="card-footer text-end noprint">
+                    <a href="{% url 'virtualization:virtualmachine_service_assign' virtualmachine=object.pk %}" class="btn btn-sm btn-primary">
+                        <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Assign Service
                     </a>
                 </div>
             {% endif %}
@@ -206,7 +214,6 @@
 {% endblock %}
 
 {% block javascript %}
-  <script src="{% static 'js/interface_filtering.js' %}?v{{ settings.VERSION }}"></script>
   <script src="{% static 'js/secrets.js' %}?v{{ settings.VERSION }}"></script>
   <script src="{% static 'js/tableconfig.js' %}?v{{ settings.VERSION }}"></script>
 {% endblock %}

netbox/templates/virtualization/virtualmachine/base.html

@@ -5,45 +5,44 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'virtualization:virtualmachine_list' %}">Virtual Machines</a></li>
-  <li><a href="{% url 'virtualization:virtualmachine_list' %}?cluster_id={{ object.cluster.pk }}">{{ object.cluster }}</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'virtualization:virtualmachine_list' %}">Virtual Machines</a></li>
+  <li class="breadcrumb-item"><a href="{% url 'virtualization:virtualmachine_list' %}?cluster_id={{ object.cluster.pk }}">{{ object.cluster }}</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
-{% block buttons %}
+{% block extra_controls %}
   {% if perms.virtualization.add_vminterface %}
-    <a href="{% url 'virtualization:vminterface_add' %}?virtual_machine={{ object.pk }}&return_url={% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}" class="btn btn-primary">
+    <a href="{% url 'virtualization:vminterface_add' %}?virtual_machine={{ object.pk }}&return_url={% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}" class="btn btn-sm btn-primary m-1">
       <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Interfaces
     </a>
   {% endif %}
-  {{ block.super }}
 {% endblock %}
 
 {% block tabs %}
   <ul class="nav nav-tabs">
-    <li role="presentation"{% if not active_tab %} class="active"{% endif %}>
-      <a href="{{ object.get_absolute_url }}">Virtual Machine</a>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link{% if not active_tab %} active{% endif %}" href="{{ object.get_absolute_url }}">Virtual Machine</a>
     </li>
     {% with interface_count=object.interfaces.count %}
         {% if interface_count %}
-            <li role="presentation" {% if active_tab == 'interfaces' %} class="active"{% endif %}>
-                <a href="{% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}">Interfaces {% badge interface_count %}</a>
+            <li class="nav-item" role="presentation">
+                <a class="nav-link{% if active_tab == 'interfaces' %} active{% endif %}" href="{% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}">Interfaces {% badge interface_count %}</a>
             </li>
         {% endif %}
     {% endwith %}
     {% if perms.extras.view_configcontext %}
-      <li role="presentation"{% if active_tab == 'config-context' %} class="active"{% endif %}>
-        <a href="{% url 'virtualization:virtualmachine_configcontext' pk=object.pk %}">Config Context</a>
+      <li class="nav-item" role="presentation">
+        <a class="nav-link{% if active_tab == 'config-context' %} active{% endif %}" href="{% url 'virtualization:virtualmachine_configcontext' pk=object.pk %}">Config Context</a>
       </li>
     {% endif %}
     {% if perms.extras.view_journalentry %}
-      <li role="presentation"{% if active_tab == 'journal' %} class="active"{% endif %}>
-        <a href="{% url 'virtualization:virtualmachine_journal' pk=object.pk %}">Journal</a>
+      <li class="nav-item" role="presentation">
+        <a class="nav-link{% if active_tab == 'journal' %} active{% endif %}" href="{% url 'virtualization:virtualmachine_journal' pk=object.pk %}">Journal</a>
       </li>
     {% endif %}
     {% if perms.extras.view_objectchange %}
-      <li role="presentation"{% if active_tab == 'changelog' %} class="active"{% endif %}>
-        <a href="{% url 'virtualization:virtualmachine_changelog' pk=object.pk %}">Change Log</a>
+      <li class="nav-item" role="presentation">
+        <a class="nav-link{% if active_tab == 'changelog' %} active{% endif %}" href="{% url 'virtualization:virtualmachine_changelog' pk=object.pk %}">Change Log</a>
       </li>
     {% endif %}
   </ul>

netbox/templates/virtualization/virtualmachine/interfaces.html

@@ -6,36 +6,38 @@
 {% block content %}
     <form method="post">
         {% csrf_token %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Interfaces</strong>
-                <div class="pull-right noprint">
-                    {% if request.user.is_authenticated %}
-                        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#VirtualMachineVMInterfaceTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
-                    {% endif %}
-                </div>
-                <div class="pull-right col-md-2 noprint">
-                    <input class="form-control interface-filter" type="text" placeholder="Filter" title="Filter text (regular expressions supported)" style="height: 23px" />
+        <div class="card my-3">
+            <div class="card-header">
+                <h5>Interfaces</h5>
+                <div class="float-end col-md-2 noprint">
+                    <div class="input-group input-group-sm">
+                        <input type="text" class="form-control interface-filter" placeholder="Filter" title="Filter text (regular expressions supported)" />
+                        {% if request.user.is_authenticated %}
+                            <button type="button" class="btn btn-outline-dark btn-sm" data-bs-toggle="modal" data-bs-target="#VirtualMachineVMInterfaceTable_config" title="Configure Table"><i class="mdi mdi-cog"></i> Configure</button>
+                        {% endif %}
+                    </div>
                 </div>
             </div>
-            {% render_table interface_table 'inc/table.html' %}
-            <div class="panel-footer noprint">
+            <div class="card-body">
+                {% render_table interface_table 'inc/table.html' %}
+            </div>
+            <div class="card-footer noprint">
                 {% if perms.virtualization.change_vminterface %}
-                    <button type="submit" name="_rename" formaction="{% url 'virtualization:vminterface_bulk_rename' %}?return_url={% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}" class="btn btn-warning btn-xs">
+                    <button type="submit" name="_rename" formaction="{% url 'virtualization:vminterface_bulk_rename' %}?return_url={% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}" class="btn btn-warning btn-sm">
                         <span class="mdi mdi-pencil" aria-hidden="true"></span> Rename
                     </button>
-                    <button type="submit" name="_edit" formaction="{% url 'virtualization:vminterface_bulk_edit' %}?virtualmachine={{ object.pk }}&return_url={% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}" class="btn btn-warning btn-xs">
+                    <button type="submit" name="_edit" formaction="{% url 'virtualization:vminterface_bulk_edit' %}?virtualmachine={{ object.pk }}&return_url={% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}" class="btn btn-warning btn-sm">
                         <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit
                     </button>
                 {% endif %}
                 {% if perms.virtualization.delete_vminterface %}
-                    <button type="submit" name="_delete" formaction="{% url 'virtualization:vminterface_bulk_delete' %}?return_url={% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}" class="btn btn-danger btn-xs">
+                    <button type="submit" name="_delete" formaction="{% url 'virtualization:vminterface_bulk_delete' %}?return_url={% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}" class="btn btn-danger btn-sm">
                         <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete
                     </button>
                 {% endif %}
                 {% if perms.virtualization.add_vminterface %}
-                    <div class="pull-right">
-                        <a href="{% url 'virtualization:vminterface_add' %}?virtual_machine={{ object.pk }}&return_url={% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}" class="btn btn-primary btn-xs">
+                    <div class="float-end">
+                        <a href="{% url 'virtualization:vminterface_add' %}?virtual_machine={{ object.pk }}&return_url={% url 'virtualization:virtualmachine_interfaces' pk=object.pk %}" class="btn btn-primary btn-sm">
                             <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add interfaces
                         </a>
                     </div>
@@ -49,6 +51,5 @@
 
 {% block javascript %}
   <script src="{% static 'js/connection_toggles.js' %}?v{{ settings.VERSION }}"></script>
-  <script src="{% static 'js/interface_filtering.js' %}?v{{ settings.VERSION }}"></script>
   <script src="{% static 'js/tableconfig.js' %}?v{{ settings.VERSION }}"></script>
 {% endblock %}

netbox/virtualization/tables.py

@@ -19,7 +19,7 @@ __all__ = (
 
 VMINTERFACE_BUTTONS = """
 {% if perms.ipam.add_ipaddress %}
-    <a href="{% url 'ipam:ipaddress_add' %}?vminterface={{ record.pk }}&return_url={{ virtualmachine.get_absolute_url }}" class="btn btn-xs btn-success" title="Add IP address">
+    <a href="{% url 'ipam:ipaddress_add' %}?vminterface={{ record.pk }}&return_url={{ virtualmachine.get_absolute_url }}" class="btn btn-sm btn-success" title="Add IP Address">
         <i class="mdi mdi-plus-thick" aria-hidden="true"></i>
     </a>
 {% endif %}