diff --git a/index.html b/index.html index a0dcc88..28a0160 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,13 @@ + +
diff --git a/js/ui.js b/js/ui.js index 7c3587d..2c41a57 100644 --- a/js/ui.js +++ b/js/ui.js @@ -100,11 +100,21 @@ function setStateFilter(state) { filterInstances(); } +function toggleSortDir() { + const btn = document.getElementById('sort-dir'); + const next = btn.dataset.dir === 'asc' ? 'desc' : 'asc'; + btn.dataset.dir = next; + btn.textContent = next === 'asc' ? '↑' : '↓'; + filterInstances(); +} + async function filterInstances() { const search = document.getElementById('search-input').value; const state = document.getElementById('filter-state').value; const stack = document.getElementById('filter-stack').value; - const instances = await getInstances({ search, state, stack }); + const sort = document.getElementById('sort-field').value; + const order = document.getElementById('sort-dir').dataset.dir || 'asc'; + const instances = await getInstances({ search, state, stack, sort, order }); const grid = document.getElementById('instance-grid'); if (!instances.length) { diff --git a/server/db.js b/server/db.js index fc7720e..a7a29c9 100644 --- a/server/db.js +++ b/server/db.js @@ -133,6 +133,8 @@ function seedJobs() { // ── Queries ─────────────────────────────────────────────────────────────────── +const VALID_SORTS = ['name', 'vmid', 'updated_at', 'created_at']; + export function getInstances(filters = {}) { const parts = ['SELECT * FROM instances WHERE 1=1']; const params = {}; @@ -142,7 +144,11 @@ export function getInstances(filters = {}) { } if (filters.state) { parts.push('AND state = @state'); params.state = filters.state; } if (filters.stack) { parts.push('AND stack = @stack'); params.stack = filters.stack; } - parts.push('ORDER BY name ASC'); + const sortField = VALID_SORTS.includes(filters.sort) ? filters.sort : 'name'; + const sortOrder = filters.order === 'desc' ? 'DESC' : 'ASC'; + // id is a stable tiebreaker for timestamp fields (datetime precision is 1 s) + const tiebreaker = (sortField === 'created_at' || sortField === 'updated_at') ? `, id ${sortOrder}` : ''; + parts.push(`ORDER BY ${sortField} ${sortOrder}${tiebreaker}`); return db.prepare(parts.join(' ')).all(params); } diff --git a/server/routes.js b/server/routes.js index fba5552..6f2a79e 100644 --- a/server/routes.js +++ b/server/routes.js @@ -69,8 +69,8 @@ router.get('/instances/stacks', (_req, res) => { // GET /api/instances router.get('/instances', (req, res) => { - const { search, state, stack } = req.query; - res.json(getInstances({ search, state, stack })); + const { search, state, stack, sort, order } = req.query; + res.json(getInstances({ search, state, stack, sort, order })); }); // GET /api/instances/:vmid/history