From 67d1af0baadc938da48bb9d760bbd057c692e84d Mon Sep 17 00:00:00 2001
From: Peter van Arkel <peter@hippogrief.nl>
Date: Thu, 21 May 2026 12:00:06 +0200
Subject: [PATCH] (ui) Make dashboard operational status actionable

Turn the dashboard operational status rows into direct links to filtered run
lists, so failed, warning, running, and queued states can be investigated from
the first screen.

Also move the hosts anchor back to the actual Hosts section.

Refs #23
---
 .../templates/pobsync_backend/base.html       | 18 +++++++++++++-
 .../templates/pobsync_backend/dashboard.html  | 24 +++++++++++--------
 src/pobsync_backend/tests/test_views.py       |  4 ++++
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/pobsync_backend/templates/pobsync_backend/base.html b/src/pobsync_backend/templates/pobsync_backend/base.html
index d2695b3..4e8c6a7 100644
--- a/src/pobsync_backend/templates/pobsync_backend/base.html
+++ b/src/pobsync_backend/templates/pobsync_backend/base.html
@@ -296,7 +296,23 @@
     .status-summary.failed { border-color: #e8b4b4; background: #fff7f7; color: var(--failed); }
     .status-summary.warning,
     .status-summary.running { border-color: #e7cf8a; background: #fffaf0; color: var(--running); }
-    .status-summary.queued { border-color: #b5cdea; background: #eef6ff; color: var(--link); }
+	    .status-summary.queued { border-color: #b5cdea; background: #eef6ff; color: var(--link); }
+	    a.status-summary {
+	      color: inherit;
+	      text-decoration: none;
+	      transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+	    }
+	    a.status-summary:hover {
+	      border-color: var(--border-strong);
+	      box-shadow: var(--shadow-sm);
+	      transform: translateY(-1px);
+	    }
+	    .status-summary .summary-action {
+	      color: var(--muted-strong);
+	      font-size: 12px;
+	      font-weight: 650;
+	      margin-left: auto;
+	    }
 	    .operator-state {
 	      align-items: center;
 	      display: flex;
diff --git a/src/pobsync_backend/templates/pobsync_backend/dashboard.html b/src/pobsync_backend/templates/pobsync_backend/dashboard.html
index f78f584..e748d4d 100644
--- a/src/pobsync_backend/templates/pobsync_backend/dashboard.html
+++ b/src/pobsync_backend/templates/pobsync_backend/dashboard.html
@@ -43,33 +43,37 @@
     <a class="metric metric-link {% if counts.failed_runs %}failed{% endif %}" href="{% url 'runs_list' %}?status=failed&amp;review=needed"><div class="label">Failed</div><div class="value">{{ counts.failed_runs }}</div></a>
   </section>
 
-  <section class="panel" id="hosts">
+  <section class="panel">
     <h2>Operational Status</h2>
     {% if counts.failed_runs or counts.warning_runs or counts.running_runs or counts.queued_runs %}
       <div class="status-overview">
         {% if counts.failed_runs %}
-          <div class="status-summary failed">
+          <a class="status-summary failed" href="{% url 'runs_list' %}?status=failed&amp;review=needed">
             <span class="status failed">failed</span>
             <strong>{{ counts.failed_runs }} failed run{{ counts.failed_runs|pluralize }} need{{ counts.failed_runs|pluralize:"s," }} review.</strong>
-          </div>
+            <span class="summary-action">Review failed runs</span>
+          </a>
         {% endif %}
         {% if counts.warning_runs %}
-          <div class="status-summary warning">
+          <a class="status-summary warning" href="{% url 'runs_list' %}?status=warning&amp;review=needed">
             <span class="status warning">warning</span>
             <strong>{{ counts.warning_runs }} run{{ counts.warning_runs|pluralize }} completed with warnings.</strong>
-          </div>
+            <span class="summary-action">Review warnings</span>
+          </a>
         {% endif %}
         {% if counts.running_runs %}
-          <div class="status-summary running">
+          <a class="status-summary running" href="{% url 'runs_list' %}?status=running">
             <span class="status running">running</span>
             <strong>{{ counts.running_runs }} backup run{{ counts.running_runs|pluralize }} in progress.</strong>
-          </div>
+            <span class="summary-action">View running runs</span>
+          </a>
         {% endif %}
         {% if counts.queued_runs %}
-          <div class="status-summary queued">
+          <a class="status-summary queued" href="{% url 'runs_list' %}?status=queued">
             <span class="status queued">queued</span>
             <strong>{{ counts.queued_runs }} backup run{{ counts.queued_runs|pluralize }} waiting for the worker.</strong>
-          </div>
+            <span class="summary-action">View queued runs</span>
+          </a>
         {% endif %}
       </div>
     {% elif counts.hosts %}
@@ -79,7 +83,7 @@
     {% endif %}
   </section>
 
-  <section class="panel">
+  <section class="panel" id="hosts">
     <h2>Backup Trends</h2>
     {% if stats_summary.runs_sampled %}
       <div class="insight-grid" aria-label="Backup trends">
diff --git a/src/pobsync_backend/tests/test_views.py b/src/pobsync_backend/tests/test_views.py
index 08c7040..cef4230 100644
--- a/src/pobsync_backend/tests/test_views.py
+++ b/src/pobsync_backend/tests/test_views.py
@@ -125,6 +125,10 @@ class ViewTests(TestCase):
         self.assertContains(response, "1 run completed with warnings.")
         self.assertContains(response, "1 backup run in progress.")
         self.assertContains(response, "1 backup run waiting for the worker.")
+        self.assertContains(response, "Review failed runs")
+        self.assertContains(response, "Review warnings")
+        self.assertContains(response, "View running runs")
+        self.assertContains(response, "View queued runs")
         self.assertContains(response, f'href="{reverse("runs_list")}"', html=False)
         self.assertContains(response, f'href="{reverse("runs_list")}?status=queued"', html=False)
         self.assertContains(response, f'href="{reverse("runs_list")}?status=running"', html=False)