jedarden/spaxel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement security mode dashboard UI

Browse source 
- Update learning progress display to show "X of Y days complete" format
- Add last anomaly location info to security dialog stats
- Add CSS styling for anomaly event type in timeline

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jedarden 2026-04-07 10:21:34 -04:00
parent f5c71b5113
commit cac25e86e8
3 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
dashboard/css/security.css
View file

@ -226,6 +226,10 @@
color: #eee;
}
.stat-item-full {
grid-column: 1 / -1;
}
.security-dialog-actions {
display: flex;
gap: 12px;

5
dashboard/css/timeline.css
View file

@ -354,6 +354,11 @@
--event-color-bg: rgba(74, 158, 255, 0.15);
}
.timeline-event[data-type="anomaly"] {
--event-color: #ff4757;
--event-color-bg: rgba(255, 71, 87, 0.15);
}
.timeline-event[data-type="anomaly_detected"] {
--event-color: #ff4757;
--event-color-bg: rgba(255, 71, 87, 0.15);

15
dashboard/js/security-panel.js
View file

@ -110,11 +110,11 @@
}
function fetchAnomalyCount() {
fetch(API.anomalyHistory + '?since=24h')
fetch(API.anomalyHistory + '?since=24h&limit=1')
.then(res => res.json())
.then(data => {
if (data.history && Array.isArray(data.history)) {
_anomalyCount24h = data.history.length;
_anomalyCount24h = data.total || data.history.length;
if (data.history.length > 0) {
_lastAnomaly = data.history[0];
}
@ -232,8 +232,9 @@
progressEl.style.width = (_learningProgress * 100) + '%';
}
if (daysEl) {
const daysLeft = Math.ceil((1 - _learningProgress) * 7);
daysEl.textContent = daysLeft > 0 ? daysLeft + ' days remaining' : 'Almost ready...';
const daysComplete = Math.floor(_learningProgress * 7);
const daysTotal = 7;
daysEl.textContent = `${daysComplete} of ${daysTotal} days complete`;
}
} else {
banner.classList.remove('visible');
@ -299,6 +300,12 @@
<span class="stat-value">${formatTimeAgo(_lastAnomaly.timestamp)}</span>
</div>
` : ''}
${_lastAnomaly && _lastAnomaly.zone_name ? `
<div class="stat-item stat-item-full">
<span class="stat-label">Location</span>
<span class="stat-value">${_lastAnomaly.zone_name}</span>
</div>
` : ''}
</div>
</div>
<div class="security-dialog-actions">