✨ — Add autorefresh feature on dashboard

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;
+}

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>
+        <nav>
-            <a href="/agents">{{ agents | length }} agent{% if agents| length > 1 %}s{% endif %}</a>
+            <ul>
-        </p>
+                <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>
+                    <header title="Unknown">❔</header>
-                    {{ counts_dict['ok'] }}
+                    <span id="sev-unknown">{{ counts_dict['unknown'] }}</span>
                 </article>
                 <article>
-                    <header>⚠️ Warning</header>
+                    <header title="OK">✅</header>
-                    {{ counts_dict['warning'] }}
+                    <span id="sev-ok">{{ counts_dict['ok'] }}</span>
                 </article>
                 <article>
-                    <header>❌ Critical</header>
+                    <header title="Warning"> ⚠️</header>
-                    {{ counts_dict['critical'] }}
+                    <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 %}