update extras templates

netbox/project-static/netbox.scss

@@ -165,6 +165,18 @@ span.color-label {
   padding: $badge-padding-y $badge-padding-x;
 }
 
+pre {
+  border-radius: $border-radius;
+  border: 1px solid $gray-200;
+  background-color: $gray-100;
+  padding: $spacer;
+  white-space: pre;
+}
+
+.btn {
+  white-space: nowrap;
+}
+
 .card {
   box-shadow: $box-shadow-sm;
   .card-header {

netbox/templates/extras/inc/job_label.html

@@ -3,11 +3,11 @@
 {% elif result.status == 'errored' %}
     <span class="badge bg-danger">Errored</span>
 {% elif result.status == 'pending' %}
-    <span class="badge bg-light">Pending</span>
+    <span class="badge bg-info">Pending</span>
 {% elif result.status == 'running' %}
     <span class="badge bg-warning">Running</span>
 {% elif result.status == 'completed' %}
     <span class="badge bg-success">Completed</span>
 {% else %}
-    <span class="badge bg-light">N/A</span>
+    <span class="badge bg-secondary">N/A</span>
 {% endif %}

netbox/templates/extras/report_list.html

@@ -1,10 +1,11 @@
-{% extends 'base.html' %}
+{% extends 'layout.html' %}
 {% load helpers %}
 
+{% block title %}Reports{% endblock %}
+
 {% block content %}
-    <h1>{% block title %}Reports{% endblock %}</h1>
     <div class="row">
-        <div class="col-md-9">
+        <div class="col-md-8">
             {% if reports %}
                 {% for module, module_reports in reports %}
                     <h3><a name="module.{{ module }}"></a>{{ module|bettertitle }}</h3>
@@ -14,7 +15,7 @@
                                 <th>Name</th>
                                 <th>Status</th>
                                 <th>Description</th>
-                                <th class="text-right">Last Run</th>
+                                <th class="text-end">Last Run</th>
                                 <th></th>
                             </tr>
                         </thead>
@@ -30,7 +31,7 @@
                                         {% include 'extras/inc/job_label.html' with result=report.result %}
                                     </td>
                                     <td>{{ report.description|placeholder }}</td>
-                                    <td class="text-right">
+                                    <td class="text-end">
                                         {% if report.result %}
                                             <a href="{% url 'extras:report_result' job_result_pk=report.result.pk %}">{{ report.result.created }}</a>
                                         {% else %}
@@ -39,10 +40,10 @@
                                     </td>
                                 <td>
                                     {% if perms.extras.run_report %}
-                                        <div class="pull-right noprint">
+                                        <div class="float-end noprint">
                                             <form action="{% url 'extras:report' module=report.module name=report.class_name %}" method="post">
                                                 {% csrf_token %}
-                                                <button type="submit" name="_run" class="btn btn-primary btn-xs">
+                                                <button type="submit" name="_run" class="btn btn-primary btn-sm">
                                                     {% if report.result %}
                                                         <i class="mdi mdi-replay"></i> Run Again
                                                     {% else %}
@@ -59,11 +60,11 @@
                                         <td colspan="4" class="method">
                                             {{ method }}
                                         </td>
-                                        <td class="text-right text-nowrap report-stats">
-                                            <label class="label label-success">{{ stats.success }}</label>
-                                            <label class="label label-info">{{ stats.info }}</label>
-                                            <label class="label label-warning">{{ stats.warning }}</label>
-                                            <label class="label label-danger">{{ stats.failure }}</label>
+                                        <td class="text-end text-nowrap report-stats">
+                                            <span class="badge bg-success">{{ stats.success }}</span>
+                                            <span class="badge bg-info">{{ stats.info }}</span>
+                                            <span class="badge bg-warning">{{ stats.warning }}</span>
+                                            <span class="badge bg-danger">{{ stats.failure }}</span>
                                         </td>
                                     </tr>
                                 {% endfor %}
@@ -72,30 +73,34 @@
                     </table>
                 {% endfor %}
             {% else %}
-                <div class="alert alert-info">
-                    <p><strong>No reports found.</strong></p>
-                    <p>Reports should be saved to <code>{{ settings.REPORTS_ROOT }}</code>. (This path can be changed by setting <code>REPORTS_ROOT</code> in NetBox's configuration.)</p>
+                <div class="alert alert-info" role="alert">
+                    <h4 class="alert-heading">No Reports Found</h4>
+                    Reports should be saved to <code>{{ settings.REPORTS_ROOT }}</code>.
+                    <hr/>
+                    <small>This path can be changed by setting <code>REPORTS_ROOT</code> in NetBox's configuration.</small>
                 </div>
             {% endif %}
         </div>
-        <div class="col-md-3">
+        <div class="col-md-4">
             {% if reports %}
-                <div class="panel panel-default">
-                    {% for module, module_reports in reports %}
-                        <div class="panel-heading">
-                            <strong>{{ module|bettertitle }}</strong>
-                        </div>
-                        <ul class="list-group">
-                            {% for report in module_reports %}
+                <div class="card">
+                    <div class="card-body">
+                        {% for module, module_reports in reports %}
+                        <h5>{{ module|bettertitle }}</h5>
+                        <div class="small mb-2">
+                            <ul class="list-group list-group-flush">
+                                {% for report in module_reports %}
                                 <a href="#{{ report.module }}.{{ report.class_name }}" class="list-group-item">
                                     <i class="mdi mdi-file-chart-outline"></i> {{ report.name }}
-                                    <div class="pull-right">
+                                    <div class="float-end">
                                         {% include 'extras/inc/job_label.html' with result=report.result %}
                                     </div>
                                 </a>
-                            {% endfor %}
-                        </ul>
+                                {% endfor %}
+                            </ul>
+                        </div>
                     {% endfor %}
+                    </div>
                 </div>
             {% endif %}
         </div>

netbox/templates/extras/script.html

@@ -1,28 +1,29 @@
-{% extends 'base.html' %}
+{% extends 'layout.html' %}
 {% load helpers %}
 {% load form_helpers %}
 {% load log_levels %}
 
 {% block title %}{{ script }}{% endblock %}
 
+{% block breadcrumb_main %}
+<nav class="breadcrumb-container" aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="/">Home</a></li>
+        <li class="breadcrumb-item"><a href="{% url 'extras:script_list' %}">Scripts</a></li>
+        <li class="breadcrumb-item"><a href="{% url 'extras:script_list' %}#module.{{ module }}">{{ module|bettertitle }}</a></li>
+        <li class="breadcrumb-item">{{ script }}</li>
+    </ol>
+</nav>
+{% endblock %}
+
 {% block content %}
-    <div class="row noprint">
-        <div class="col-md-12">
-            <ol class="breadcrumb">
-                <li><a href="{% url 'extras:script_list' %}">Scripts</a></li>
-                <li><a href="{% url 'extras:script_list' %}#module.{{ module }}">{{ module|bettertitle }}</a></li>
-                <li>{{ script }}</li>
-            </ol>
-        </div>
-    </div>
-    <h1 class="title">{{ script }}</h1>
-    <p>{{ script.Meta.description|render_markdown }}</p>
+    <div class="text-muted">{{ script.Meta.description|render_markdown }}</div>
     <ul class="nav nav-tabs" role="tablist">
-        <li role="presentation" class="active">
-            <a href="#run" role="tab" data-toggle="tab" class="active">Run</a>
+        <li class="nav-item" role="presentation">
+            <a href="#run" role="tab" data-bs-toggle="tab" class="nav-link active">Run</a>
         </li>
-        <li role="presentation">
-            <a href="#source" role="tab" data-toggle="tab">Source</a>
+        <li class="nav-item" role="presentation">
+            <a href="#source" role="tab" data-bs-toggle="tab" class="nav-link">Source</a>
         </li>
     </ul>
     <div class="tab-content">
@@ -38,11 +39,11 @@
                     <form action="" method="post" enctype="multipart/form-data" class="form form-horizontal">
                         {% csrf_token %}
                         {% if form.requires_input %}
-                            <div class="panel panel-default">
-                                <div class="panel-heading">
-                                    <strong>Script Data</strong>
-                                </div>
-                                <div class="panel-body">
+                            <div class="card my-3">
+                                <h5 class="card-header">
+                                    Script Data
+                                </h5>
+                                <div class="card-body">
                                     {% render_form form %}
                                 </div>
                             </div>
@@ -53,16 +54,16 @@
                             </div>
                             {% render_form form %}
                         {% endif %}
-                        <div class="pull-right">
-                            <button type="submit" name="_run" class="btn btn-primary"{% if not perms.extras.run_script %} disabled="disabled"{% endif %}><i class="mdi mdi-play"></i> Run Script</button>
-                            <a href="{% url 'extras:script_list' %}" class="btn btn-default">Cancel</a>
+                        <div class="float-end">
+                            <a href="{% url 'extras:script_list' %}" class="btn btn-outline-danger btn-sm">Cancel</a>
+                            <button type="submit" name="_run" class="btn btn-primary btn-sm"{% if not perms.extras.run_script %} disabled="disabled"{% endif %}><i class="mdi mdi-play"></i> Run Script</button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
         <div role="tabpanel" class="tab-pane" id="source">
-            <p><code>{{ script.filename }}</code></p>
+            <code class="h6 my-3 d-block">{{ script.filename }}</code>
             <pre>{{ script.source }}</pre>
         </div>
     </div>

netbox/templates/extras/script_list.html

@@ -1,8 +1,9 @@
-{% extends 'base.html' %}
+{% extends 'layout.html' %}
 {% load helpers %}
 
+{% block title %}Scripts{% endblock %}
+
 {% block content %}
-    <h1>{% block title %}Scripts{% endblock %}</h1>
     <div class="row">
         <div class="col-md-9">
             {% if scripts %}
@@ -14,7 +15,7 @@
                                 <th>Name</th>
                                 <th>Status</th>
                                 <th>Description</th>
-                                <th class="text-right">Last Run</th>
+                                <th class="text-end">Last Run</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -28,11 +29,11 @@
                                     </td>
                                     <td>{{ script.Meta.description|render_markdown }}</td>
                                     {% if script.result %}
-                                        <td class="text-right">
+                                        <td class="text-end">
                                             <a href="{% url 'extras:script_result' job_result_pk=script.result.pk %}">{{ script.result.created }}</a>
                                         </td>
                                     {% else %}
-                                        <td class="text-right text-muted">Never</td>
+                                        <td class="text-end text-muted">Never</td>
                                     {% endif %}
                                 </tr>
                             {% endfor %}
@@ -41,29 +42,33 @@
                 {% endfor %}
             {% else %}
                 <div class="alert alert-info">
-                    <p><strong>No scripts found.</strong></p>
-                    <p>Scripts should be saved to <code>{{ settings.SCRIPTS_ROOT }}</code>. (This path can be changed by setting <code>SCRIPTS_ROOT</code> in NetBox's configuration.)</p>
+                    <h4 class="alert-heading">No Scripts Found</h4>
+                    Scripts should be saved to <code>{{ settings.SCRIPTS_ROOT }}</code>.
+                    <hr/>
+                    This path can be changed by setting <code>SCRIPTS_ROOT</code> in NetBox's configuration.
                 </div>
             {% endif %}
         </div>
         <div class="col-md-3">
             {% if scripts %}
-                <div class="panel panel-default">
-                    {% for module, module_scripts in scripts.items %}
-                        <div class="panel-heading">
-                            <strong>{{ module|bettertitle }}</strong>
+                <div class="card">
+                    <div class="card-body">
+                        {% for module, module_scripts in scripts.items %}
+                        <h5>{{ module|bettertitle }}</h5>
+                        <div class="small mb-2">
+                            <ul class="list-group list-group-flush">
+                                {% for class_name, script in module_scripts.items %}
+                                    <a href="#script.{{ class_name }}" class="list-group-item">
+                                        <i class="mdi mdi-file-chart-outline"></i> {{ script.name }}
+                                        <div class="float-end">
+                                            {% include 'extras/inc/job_label.html' with result=script.result %}
+                                        </div>
+                                    </a>
+                                {% endfor %}
+                            </ul>
                         </div>
-                        <ul class="list-group">
-                            {% for class_name, script in module_scripts.items %}
-                                <a href="#script.{{ class_name }}" class="list-group-item">
-                                    <i class="mdi mdi-file-chart-outline"></i> {{ script.name }}
-                                    <div class="pull-right">
-                                        {% include 'extras/inc/job_label.html' with result=script.result %}
-                                    </div>
-                                </a>
-                            {% endfor %}
-                        </ul>
-                    {% endfor %}
+                        {% endfor %}
+                    </div>
                 </div>
             {% endif %}
         </div>

netbox/utilities/templatetags/nav.yaml

@@ -206,3 +206,24 @@ menus:
           - label: Secret Roles
             url: 'secrets:secretrole_list'
             disabled: true
+  - label: Other
+    groups:
+      - label: Logging
+        items:
+          - label: Change Log
+            url: 'extras:objectchange_list'
+            disabled: true
+          - label: Journal Entries
+            url: 'extras:journalentry_list'
+            disabled: true
+      - label: Miscellaneous
+        items:
+          - label: Config Contexts
+            url: 'extras:configcontext_list'
+            disabled: true
+          - label: Reports
+            url: 'extras:report_list'
+            disabled: true
+          - label: Scripts
+            url: 'extras:script_list'
+            disabled: true