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 1/2] =?UTF-8?q?=E2=9C=A8=20=E2=80=94=20Add=20autorefresh?=
 =?UTF-8?q?=20feature=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 %}

From c4bbda52a5fc372b66b150f705689253bc25fc54 Mon Sep 17 00:00:00 2001
From: Luc Didry <luc@didry.org>
Date: Tue, 12 Dec 2023 08:22:54 +0100
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=F0=9F=94=A5=20=E2=80=94=20Don?=
 =?UTF-8?q?=E2=80=99t=20use=20js=20for=20auto-refresh?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 argos/server/routes/views.py      |  9 +++-
 argos/server/static/styles.css    |  5 +-
 argos/server/templates/base.html  |  7 ++-
 argos/server/templates/index.html | 78 ++++++++-----------------------
 4 files changed, 36 insertions(+), 63 deletions(-)

diff --git a/argos/server/routes/views.py b/argos/server/routes/views.py
index 287168d..b126b59 100644
--- a/argos/server/routes/views.py
+++ b/argos/server/routes/views.py
@@ -18,7 +18,12 @@ templates = Jinja2Templates(directory="argos/server/templates")
 
 
 @route.get("/")
-async def get_severity_counts(request: Request, db: Session = Depends(get_db)):
+async def get_severity_counts(
+    request: Request,
+    db: Session = Depends(get_db),
+    refresh: bool = False,
+    delay: int = 15
+):
     """Shows the number of results per severity"""
     counts_dict = await queries.get_severity_counts(db)
 
@@ -30,6 +35,8 @@ async def get_severity_counts(request: Request, db: Session = Depends(get_db)):
             "request": request,
             "counts_dict": counts_dict,
             "agents": agents,
+            "refresh": refresh,
+            "delay": delay,
         },
     )
 
diff --git a/argos/server/static/styles.css b/argos/server/static/styles.css
index 29ec6d5..e4e5764 100644
--- a/argos/server/static/styles.css
+++ b/argos/server/static/styles.css
@@ -22,7 +22,6 @@ code {
 .initial-width {
     width: initial !important;
 }
-#auto-refresh-form,
-#refresh-delay-li {
-    display: none;
+#refresh-form {
+    margin-bottom: 0;
 }
diff --git a/argos/server/templates/base.html b/argos/server/templates/base.html
index 25837d4..f4b6829 100644
--- a/argos/server/templates/base.html
+++ b/argos/server/templates/base.html
@@ -5,7 +5,12 @@
         <title>Argos</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-        <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
+        {% if refresh %}
+        <meta http-equiv="refresh"
+              content="{{ delay }}">
+        {% endif %}
+        <link href="{{ url_for('static', path='/styles.css') }}"
+              rel="stylesheet">
     </head>
     <body>
         <main class="container">
diff --git a/argos/server/templates/index.html b/argos/server/templates/index.html
index 3ff4a39..93ee3dc 100644
--- a/argos/server/templates/index.html
+++ b/argos/server/templates/index.html
@@ -10,16 +10,31 @@
                     </a>
                 </li>
             </ul>
-            <ul id="auto-refresh-form">
+            <ul>
                 <li>
-                    <input id="auto-refresh" type="checkbox" checked>
+                    <input id="auto-refresh"
+                           type="checkbox"
+                           form="refresh-form"
+                           {{ 'checked' if refresh }}>
                     <label for="auto-refresh" class="inline-label">Auto-refresh</label>
                 </li>
-                <li id="refresh-delay-li">
+                <li>
                     <label class="inline-label">
-                        Every <input id="refresh-delay" class="initial-width" type="number" min="1" value="15"> seconds
+                        Every <input id="refresh-delay"
+                                     class="initial-width"
+                                     type="number"
+                                     form="refresh-form"
+                                     min="1"
+                                     value="{{ delay }}"> seconds
                     </label>
                 </li>
+                <li>
+                    <form id="refresh-form"
+                          method="get"
+                          action="{{ url_for('get_severity_counts_view') }}">
+                        <input type="Submit">
+                    </form>
+                </li>
             </ul>
         </nav>
 
@@ -34,7 +49,7 @@
                     <span id="sev-ok">{{ counts_dict['ok'] }}</span>
                 </article>
                 <article>
-                    <header title="Warning"> ⚠️</header>
+                    <header title="Warning">⚠️</header>
                     <span id="sev-warning">{{ counts_dict['warning'] }}</span>
                 </article>
                 <article>
@@ -51,57 +66,4 @@
             </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 %}