[Perl] DAQ system for the FAPG.
feat show probe status on index quick cards
Each homepage quick card now displays a status pill (Healthy, Stale, Unreachable, etc.) in the top-right corner, updated from the /api/status endpoint alongside the existing status page logic.
Changed files
roles/dashboard/public/js/dashboard/status.js
@@ -85,10 +85,22 @@
85
85
});
86
86
}
87
87
88
Added:
function loadQuickCardStatuses(statuses) {
89
Added:
const pills = Array.from(document.querySelectorAll("[data-reading-quick-status]"));
90
Added:
if (!pills.length) return;
91
Added:
92
Added:
pills.forEach(pill => {
93
Added:
const probe = pill.dataset.readingQuickStatus;
94
Added:
const state = stateForNodeStatus(statuses[probe] || null);
95
Added:
pill.className = `status-pill is-${state}`;
96
Added:
pill.textContent = statusLabel(state);
97
Added:
});
98
Added:
}
99
Added:
88
100
export function createStatusLoader() {
89
101
return async function loadStatuses() {
90
102
const hasStatusElements = document.querySelector(
91
Removed:
"[data-header-status], [data-status-page-item]"
103
Added:
"[data-header-status], [data-status-page-item], [data-reading-quick-status]"
92
104
);
93
105
if (!hasStatusElements) return;
94
106
@@ -101,5 +113,6 @@
101
113
102
114
loadHeaderStatus(statuses);
103
115
loadStatusPage(statuses);
116
Added:
loadQuickCardStatuses(statuses);
104
117
};
105
118
}
roles/dashboard/templates/dashboard/index.html.ep
@@ -28,9 +28,12 @@
28
28
data-reading-quick-label="<%= $probe->{label} %>"
29
29
data-reading-quick-unit="<%= $probe->{unit} %>">
30
30
<div class="card-body d-flex flex-column gap-2">
31
Removed:
<div class="reading-quick-header">
32
Removed:
<h3 class="fs-6 fw-bold mb-0"><%= $probe->{label} %></h3>
33
Removed:
<p class="text-body-secondary small mb-0" data-reading-quick-value>Waiting for data</p>
31
Added:
<div class="reading-quick-header d-flex justify-content-between align-items-start">
32
Added:
<div>
33
Added:
<h3 class="fs-6 fw-bold mb-0"><%= $probe->{label} %></h3>
34
Added:
<p class="text-body-secondary small mb-0" data-reading-quick-value>Waiting for data</p>
35
Added:
</div>
36
Added:
<span class="status-pill is-unknown" data-reading-quick-status="<%= $probe->{key} %>">Unknown</span>
34
37
</div>
35
38
<div class="reading-range" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
36
39
<span class="reading-range-marker" data-reading-quick-marker></span>