diff --git a/css/app.css b/css/app.css index afda024..829ce47 100644 --- a/css/app.css +++ b/css/app.css @@ -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; diff --git a/js/ui.js b/js/ui.js index 64930fa..7c3587d 100644 --- a/js/ui.js +++ b/js/ui.js @@ -71,10 +71,10 @@ async function renderDashboard() { all.forEach(i => { states[i.state] = (states[i.state] || 0) + 1; }); document.getElementById('stats-bar').innerHTML = ` -
total
${all.length}
-
deployed
${states['deployed'] || 0}
-
testing
${states['testing'] || 0}
-
degraded
${states['degraded'] || 0}
+
total
${all.length}
+
deployed
${states['deployed'] || 0}
+
testing
${states['testing'] || 0}
+
degraded
${states['degraded'] || 0}
`; 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;