From 5a85a854363cc4cf9079327f0118b798da998843 Mon Sep 17 00:00:00 2001
From: Arthur <worldnomad@gmail.com>
Date: Mon, 6 May 2024 11:17:04 -0700
Subject: [PATCH] update templates for NB4

---
 .../healthcheck.html                          | 111 +++++++++++-------
 1 file changed, 70 insertions(+), 41 deletions(-)

diff --git a/netbox_healthcheck_plugin/templates/netbox_healthcheck_plugin/healthcheck.html b/netbox_healthcheck_plugin/templates/netbox_healthcheck_plugin/healthcheck.html
index 332f2b4..5497cfa 100644
--- a/netbox_healthcheck_plugin/templates/netbox_healthcheck_plugin/healthcheck.html
+++ b/netbox_healthcheck_plugin/templates/netbox_healthcheck_plugin/healthcheck.html
@@ -1,22 +1,53 @@
-
 {% extends 'base/layout.html' %}
 
 {% block head %}
 {% endblock head %}
 
-{% block title %}Health Checks{% endblock %}
+{% block header %}
+  <div class="page-header m-0">
+    {{ block.super }}
+
+    {% block page-header %}
+      <div class="container-fluid mt-2 d-print-none">
+        <div class="d-flex justify-content-between">
+
+          {# Title #}
+          <div>
+
+            <h2 class="page-title my-1">Health Checks</h2>
+            {% block subtitle %}{% endblock %}
+          </div>
+
+          {# Controls #}
+          <div class="d-print-none">
+            {% block controls %}
+              <div class="btn-list">
+                {% block control-buttons %}{% endblock %}
+              </div>
+            {% endblock controls %}
+          </div>
+
+        </div>
+      </div>
+    {% endblock %}
+
+    {# Tabs #}
+    <div class="page-tabs mt-3">
+      <div class="container-fluid">
+        <ul class="nav nav-tabs px-3">
+          <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="object-list-tab" data-bs-toggle="tab" data-bs-target="#object-list" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
+              Results {% badge table.page.paginator.count %}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
 
-{% block tabs %}
-  <ul class="nav nav-tabs px-3">
-    <li class="nav-item" role="presentation">
-      <button class="nav-link active" id="object-list-tab" data-bs-toggle="tab" data-bs-target="#object-list" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
-        Results {% badge table.page.paginator.count %}
-      </button>
-    </li>
-  </ul>
-{% endblock tabs %}
+  </div>
+{% endblock header %}
 
-{% block content-wrapper %}
+{% block content %}
   <div class="tab-content">
 
     {# Object list #}
@@ -27,38 +58,36 @@
 
         <h5 class="card-header">NetBox HealthCheck Plugin</h5>
 
-        <div class="card-body">
-          <table class="table table-striped">
-            <thead>
-              <th colspan="2">Service</th>
-              <th>Status</th>
-              <th class="align-right">Time Taken</th>
-            </thead>
-            <tbody>
-              {% for plugin in plugins %}
-                <tr>
-                  <td class="icons">
-                    <span aria-hidden="true">
-                      {% if plugin.status %}
-                        &#9989;
-                      {% else %}
-                        &#10060;
-                      {% endif %}
-                    </span>
-                  </td>
-                  <td>{{ plugin.identifier }}</td>
-                  <td>{{ plugin.pretty_status | linebreaks }}</td>
-                  <td class="align-right">{{ plugin.time_taken|floatformat:4 }} seconds</td>
-                </tr>
-              {% endfor %}
-            </tbody>
-          </table>
-        </div>
+        <table class="table table-striped">
+          <thead>
+            <th colspan="2">Service</th>
+            <th>Status</th>
+            <th class="align-right">Time Taken</th>
+          </thead>
+          <tbody>
+            {% for plugin in plugins %}
+              <tr>
+                <td class="icons">
+                  <span aria-hidden="true">
+                    {% if plugin.status %}
+                      &#9989;
+                    {% else %}
+                      &#10060;
+                    {% endif %}
+                  </span>
+                </td>
+                <td>{{ plugin.identifier }}</td>
+                <td>{{ plugin.pretty_status | linebreaks }}</td>
+                <td class="align-right">{{ plugin.time_taken|floatformat:4 }} seconds</td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+
       </div>
-      {% include 'inc/panels/custom_fields.html' %}
     </div>
 
     </div>
   </div>
 
-{% endblock content-wrapper %}
+{% endblock content %}