From cd7adafe7d31f442473a9ae60c8408b0bd853e62 Mon Sep 17 00:00:00 2001
From: Luc Didry <luc@didry.org>
Date: Mon, 4 Dec 2023 16:35:09 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E2=80=94=20Add=20autorefresh=20fea?=
 =?UTF-8?q?ture=20on=20dashboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 argos/server/static/styles.css    | 11 ++++
 argos/server/templates/index.html | 99 +++++++++++++++++++++++++++----
 2 files changed, 100 insertions(+), 10 deletions(-)

diff --git a/argos/server/static/styles.css b/argos/server/static/styles.css
index f1d80a8..29ec6d5 100644
--- a/argos/server/static/styles.css
+++ b/argos/server/static/styles.css
@@ -15,3 +15,14 @@ code {
     margin-top: 0;
     margin-bottom: 1rem;
 }
+
+.inline-label {
+    display: inline-block;
+}
+.initial-width {
+    width: initial !important;
+}
+#auto-refresh-form,
+#refresh-delay-li {
+    display: none;
+}
diff --git a/argos/server/templates/index.html b/argos/server/templates/index.html
index e1b41bf..3ff4a39 100644
--- a/argos/server/templates/index.html
+++ b/argos/server/templates/index.html
@@ -1,28 +1,107 @@
 {% extends "base.html" %}
+{% block title %}<h2>Dashboard</h2>{% endblock %}
 {% block content %}
     <div id="domains" class="frame">
-        <p>
-            <a href="/agents">{{ agents | length }} agent{% if agents| length > 1 %}s{% endif %}</a>
-        </p>
+        <nav>
+            <ul>
+                <li>
+                    <a href="{{ url_for('get_agents_view') }}">
+                        {{ agents | length }} agent{{ 's' if agents | length > 1 }}
+                    </a>
+                </li>
+            </ul>
+            <ul id="auto-refresh-form">
+                <li>
+                    <input id="auto-refresh" type="checkbox" checked>
+                    <label for="auto-refresh" class="inline-label">Auto-refresh</label>
+                </li>
+                <li id="refresh-delay-li">
+                    <label class="inline-label">
+                        Every <input id="refresh-delay" class="initial-width" type="number" min="1" value="15"> seconds
+                    </label>
+                </li>
+            </ul>
+        </nav>
 
         <div class="container">
             <div class="grid grid-index">
                 <article>
-                    <header>✅ OK </header>
-                    {{ counts_dict['ok'] }}
+                    <header title="Unknown">❔</header>
+                    <span id="sev-unknown">{{ counts_dict['unknown'] }}</span>
                 </article>
                 <article>
-                    <header>⚠️ Warning</header>
-                    {{ counts_dict['warning'] }}
+                    <header title="OK">✅</header>
+                    <span id="sev-ok">{{ counts_dict['ok'] }}</span>
                 </article>
                 <article>
-                    <header>❌ Critical</header>
-                    {{ counts_dict['critical'] }}
+                    <header title="Warning"> ⚠️</header>
+                    <span id="sev-warning">{{ counts_dict['warning'] }}</span>
+                </article>
+                <article>
+                    <header title="Critical">❌</header>
+                    <span id="sev-critical">{{ counts_dict['critical'] }}</span>
                 </article>
             </div>
             <p class="text-center">
-                <a href="/details" role="button">Details</a>
+                <a href="{{ url_for('get_domains_view') }}"
+                   class="outline"
+                   role="button">
+                    Domains
+                </a>
             </p>
         </div>
     </div>
+    <script>
+        document.getElementById('auto-refresh-form').style.display = 'flex';
+        const ar = document.getElementById('auto-refresh');
+        const li = document.getElementById('refresh-delay-li');
+        const de = document.getElementById('refresh-delay');
+        const sev = {
+            'unknown': document.getElementById('sev-unknown'),
+            'ok': document.getElementById('sev-ok'),
+            'warning': document.getElementById('sev-warning'),
+            'critical': document.getElementById('sev-critical'),
+        }
+        let intervalId = null;
+        function switchRefreshDelayDisplay(show) {
+            if (show) {
+                li.style.display = 'inline-block';
+            } else {
+                li.style.display = 'none';
+            }
+        }
+        async function refreshData() {
+            const response = await fetch("{{ url_for('get_severity_counts') }}");
+            const severities = await response.json();
+            return severities;
+        }
+        function refreshLoop() {
+            return setInterval(() => {
+                refreshData().then((severities) => {
+                    for (const severity in severities) {
+                        sev[severity].innerText = severities[severity];
+                    }
+                })
+
+            }, de.value * 1000)
+        }
+        if (ar.checked) {
+            switchRefreshDelayDisplay(true);
+            intervalId = refreshLoop();
+        }
+
+        ar.addEventListener('change', (e) => {
+            if (e.currentTarget.checked) {
+                switchRefreshDelayDisplay(true)
+                intervalId = refreshLoop();
+            } else {
+                switchRefreshDelayDisplay(false)
+                clearInterval(intervalId);
+            }
+        })
+        de.addEventListener('change', (e) => {
+            clearInterval(intervalId);
+            intervalId = refreshLoop();
+        })
+    </script>
 {% endblock %}