josh/Catalyst
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 13 Wiki Activity

feat: make stats bar cells clickable to filter by state #62

Merged
josh merged 2 commits from feat/jobs-system into dev 2026-03-28 20:53:15 -04:00
Conversation 0 Commits 2 Files Changed 2 +11 -4
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/app.css
View File

@@ -153,6 +153,8 @@ main { flex: 1; }
}
.stat-cell:last-child { border-right: none; }
.stat-clickable { cursor: pointer; user-select: none; }
.stat-clickable:hover { background: var(--bg2); }
.stat-label {
font-size: 10px;

13
js/ui.js
View File

@@ -71,10 +71,10 @@ async function renderDashboard() {
all.forEach(i => { states[i.state] = (states[i.state] || 0) + 1; });
document.getElementById('stats-bar').innerHTML = `
<div class="stat-cell"><div class="stat-label">total</div><div class="stat-value accent">${all.length}</div></div>
<div class="stat-cell"><div class="stat-label">deployed</div><div class="stat-value">${states['deployed'] || 0}</div></div>
<div class="stat-cell"><div class="stat-label">testing</div><div class="stat-value amber">${states['testing'] || 0}</div></div>
<div class="stat-cell"><div class="stat-label">degraded</div><div class="stat-value red">${states['degraded'] || 0}</div></div>
<div class="stat-cell stat-clickable" onclick="setStateFilter('')"><div class="stat-label">total</div><div class="stat-value accent">${all.length}</div></div>
<div class="stat-cell stat-clickable" onclick="setStateFilter('deployed')"><div class="stat-label">deployed</div><div class="stat-value">${states['deployed'] || 0}</div></div>
<div class="stat-cell stat-clickable" onclick="setStateFilter('testing')"><div class="stat-label">testing</div><div class="stat-value amber">${states['testing'] || 0}</div></div>
<div class="stat-cell stat-clickable" onclick="setStateFilter('degraded')"><div class="stat-label">degraded</div><div class="stat-value red">${states['degraded'] || 0}</div></div>
`;
await populateStackFilter();
@@ -95,6 +95,11 @@ async function populateStackFilter() {
});
}
function setStateFilter(state) {
document.getElementById('filter-state').value = state;
filterInstances();
}
async function filterInstances() {
const search = document.getElementById('search-input').value;
const state = document.getElementById('filter-state').value;