implement history graph

server/templates/instance_admin.html.j2

@@ -0,0 +1,60 @@
+{# SPDX-License-Identifier: AGPL-3.0-only #}
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="dark">
+  <head>
+    <meta charset="utf-8">
+    <link href="/static/bootstrap.min.css" rel="stylesheet">
+    <meta name="robots" content="noindex,nofollow" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="author" content="" />
+    <title>Admin Interface</title>
+  </head>
+  <body>
+    <div class="container">
+    <h1>Admin Interface</h1>
+    <p><a href="/admin">Overview</a> <a href="/admin/logout">Logout</a> <a href="/admin/login">Add more instances</a></p>
+    <div><canvas data-host="{{HOST_ID}}" id="graph" width="600" height="200"></canvas><noscript>History feature works only with javascript enabled.</noscript></div>
+    <div class="container mt-5">
+      <form>
+          <div class="row">
+            <div class="col">
+                <label for="startDate">Start Date:</label>
+                <input type="date" class="form-control" id="startDate" name="startDate">
+            </div>
+            <div class="col">
+                <label for="endDate">End Date:</label>
+                <input type="date" class="form-control" id="endDate" name="endDate">
+            </div>
+          </div>
+          <button type="button" class="btn btn-primary mt-1" id="submitDateRange">Change</button>
+      </form>
+    </div>
+    <h4>Last errors from {{HOST_DOMAIN}}</h4>
+    <div class="table-responsive">
+      <table id="status-tbl" class="table sortable table-hover table-sm">
+      <thead>
+          <tr>
+          <th scope="col">Time <a rel="nofollow" href="https://time.is/UTC">UTC</a></th>
+          <th scope="col">Message</th>
+          <th scope="col">Http Body</th>
+          <th scope="col">Http Status</th>
+          </tr>
+      </thead>
+      <tbody>
+        {% for error in ERRORS -%}
+        <tr id="error_{{error.time}}">
+          <td>{{fmt_date(value=error.time)}}</td>
+          <td>{{error.message}}</td>
+          <td>{{error.http_body}}</td>
+          <td>{{error.http_status}}</td>
+        </tr>
+        {%- endfor %}
+      </tbody>
+      </table>
+    </div>
+    <script src="/static/moment.min_2.29.4.js"></script>
+    <script src="/static/chart.min_4.4.0.js"></script>
+    <script src="/static/chartjs-adapter-moment_1.0.1.js"></script>
+    <script src="/static/instance.js"></script>
+  </body>
+</html>