💄 — Quick supervision overview on homepage

README.md

@@ -19,7 +19,7 @@ Internally, a HTTP API is exposed, and a job queue is used to distribute the che
 ## Todo:
 
 - [ ] Do not return empty list on / when no results from agents.
-- [ ] donner un aperçu rapide de l’état de la supervision.
+- [X] donner un aperçu rapide de l’état de la supervision.
 - [ ] Allow passing a dict to check
 - [ ] Rename error in unexpected error
 - [ ] Use background tasks for alerting

argos/server/routes/views.py

@@ -7,6 +7,7 @@ from sqlalchemy import desc
 from sqlalchemy.orm import Session, aliased
 
 from argos.schemas import Config
+from argos.server import queries
 from argos.server.models import Result, Task
 from argos.server.routes.dependencies import get_config, get_db
 
@@ -16,6 +17,25 @@ templates = Jinja2Templates(directory="argos/server/templates")
 
 
 @route.get("/")
+async def get_severity_counts(request: Request, db: Session = Depends(get_db)):
+    """Returns the number of results per severity"""
+    counts = await queries.get_severity_counts(db)
+    counts_dict = dict(counts)
+    for key in ("ok", "warning", "critical"):
+        counts_dict.setdefault(key, 0)
+
+    agents = db.query(Result.agent_id).distinct().all()
+
+    return templates.TemplateResponse(
+        "index.html",
+        {
+            "request": request,
+            "counts_dict": counts_dict,
+            "agents": agents,
+        },
+    )
+
+@route.get("/details")
 async def read_tasks(request: Request, db: Session = Depends(get_db)):
     tasks = db.query(Task).order_by(Task.domain).all()
 
@@ -46,7 +66,7 @@ async def read_tasks(request: Request, db: Session = Depends(get_db)):
     agents = db.query(Result.agent_id).distinct().all()
 
     return templates.TemplateResponse(
-        "index.html",
+        "details.html",
         {
             "request": request,
             "domains": domains,

argos/server/static/styles.css

@@ -3,3 +3,15 @@
 code {
     white-space: pre-wrap;
 }
+
+.grid-index {
+    font-size: 2rem;
+}
+.text-center,
+.grid-index {
+    text-align: center;
+}
+.grid-index article {
+    margin-top: 0;
+    margin-bottom: 1rem;
+}

argos/server/templates/details.html

@@ -0,0 +1,35 @@
+{% extends "base.html" %}
+{% block content %}
+    <div id="domains" class="frame">
+        <p>
+            {{domains | length}} domains,
+            {{ total_task_count }} tasks,
+            <a href="/agents">{{ agents |length }} agent{% if agents|length > 1 %}s{% endif %}</a>
+
+            </p>
+    
+        <table id="domains-list" role="grid">
+        <thead>
+            <tr>
+            <th>Domain</th>
+            <th class="today">Current status</th>
+            <th>Last check</th>
+        </thead>
+
+        <tbody id="domains-body">
+            {% for (domain, status) in domains %}
+            <tr>
+                <td>
+                <a href="/domain/{{domain}}">
+                    {{ domain }} </a>
+                </td>
+                
+                <td class="status highlight">{% if status == "ok" %}✅ OK {% elif statuts == "warning"%}⚠ Warning{% elif status == "critical"%}❌ Critical{% elif status == "to-process" %}⏱︎ Waiting for the jobs{% endif %}</td>
+                <td>{{ last_checks.get(domain) }}</td>
+            </tr>
+            {% endfor %}
+            
+        </tbody>
+        </table>    
+    </div>
+{% endblock %}

argos/server/templates/index.html

@@ -2,34 +2,27 @@
 {% block content %}
     <div id="domains" class="frame">
         <p>
-            {{domains | length}} domains,
-            {{ total_task_count }} tasks,
-            <a href="/agents">{{ agents |length }} agent{% if agents|length > 1 %}s{% endif %}</a>
-
+            <a href="/agents">{{ agents | length }} agent{% if agents| length > 1 %}s{% endif %}</a>
         </p>
 
-        <table id="domains-list" role="grid">
-        <thead>
-            <tr>
-            <th>Domain</th>
-            <th class="today">Current status</th>
-            <th>Last check</th>
-        </thead>
-
-        <tbody id="domains-body">
-            {% for (domain, status) in domains %}
-            <tr>
-                <td>
-                <a href="/domain/{{domain}}">
-                    {{ domain }} </a>
-                </td>
-                
-                <td class="status highlight">{% if status == "ok" %}✅ OK {% elif statuts == "warning"%}⚠ Warning{% elif status == "critical"%}❌ Critical{% elif status == "to-process" %}⏱︎ Waiting for the jobs{% endif %}</td>
-                <td>{{ last_checks.get(domain) }}</td>
-            </tr>
-            {% endfor %}
-            
-        </tbody>
-        </table>    
+        <div class="container">
+            <div class="grid grid-index">
+                <article>
+                    <header>✅ OK </header>
+                    {{ counts_dict['ok'] }}
+                </article>
+                <article>
+                    <header> ⚠️ Warning</header>
+                    {{ counts_dict['warning'] }}
+                </article>
+                <article>
+                    <header>❌ Critical</header>
+                    {{ counts_dict['critical'] }}
+                </article>
+            </div>
+            <p class="text-center">
+                <a href="/details" role="button">Details</a>
+            </p>
+        </div>
     </div>
 {% endblock %}