Merge pull request 'fix: base64-encode Patchmon Basic auth credentials server-side' (#77) from dev into main

Reviewed-on: #77

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;

index.html

@@ -48,6 +48,13 @@
         <select id="filter-stack" onchange="filterInstances()">
           <option value="">all stacks</option>
         </select>
+        <select id="sort-field" onchange="filterInstances()">
+          <option value="name">name</option>
+          <option value="vmid">vmid</option>
+          <option value="updated_at">last updated</option>
+          <option value="created_at">last created</option>
+        </select>
+        <button id="sort-dir" class="btn" data-dir="asc" onclick="toggleSortDir()" title="reverse sort">↑</button>
         <div class="toolbar-right">
           <button class="btn primary" onclick="openNewModal()">+ new instance</button>
         </div>

js/app.js

@@ -53,4 +53,6 @@ if (VERSION) {
   document.getElementById('nav-version').textContent = label;
 }
 
+fetch('/api/jobs').then(r => r.json()).then(_updateJobsNavDot).catch(() => {});
+
 handleRoute();

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 = `
-    <div class="stat-cell"><div class="stat-label">total</div><div class="stat-value accent">${all.length}</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"><div class="stat-label">deployed</div><div class="stat-value">${states['deployed'] || 0}</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"><div class="stat-label">testing</div><div class="stat-value amber">${states['testing'] || 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"><div class="stat-label">degraded</div><div class="stat-value red">${states['degraded'] || 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,11 +95,26 @@ async function populateStackFilter() {
   });
 }
 
+function setStateFilter(state) {
+  document.getElementById('filter-state').value = 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) {
@@ -289,6 +304,10 @@ async function saveInstance() {
     hardware_acceleration: +document.getElementById('f-hardware-accel').checked,
   };
 
+  // Snapshot job state before creation — jobs fire immediately after the 201
+  // so the baseline must be captured before the POST, not after.
+  const jobBaseline = !editingVmid ? await _snapshotJobBaseline() : null;
+
   const result = editingVmid
     ? await updateInstance(editingVmid, data)
     : await createInstance(data);
@@ -298,6 +317,8 @@ async function saveInstance() {
   showToast(`${name} ${editingVmid ? 'updated' : 'created'}`, 'success');
   closeModal();
 
+  if (jobBaseline) await _waitForOnCreateJobs(jobBaseline);
+
   if (currentVmid && document.getElementById('page-detail').classList.contains('active')) {
     await renderDetailPage(vmid);
   } else {
@@ -305,6 +326,30 @@ async function saveInstance() {
   }
 }
 
+async function _snapshotJobBaseline() {
+  const jobs = await fetch('/api/jobs').then(r => r.json());
+  return new Map(jobs.map(j => [j.id, j.last_run_id ?? null]));
+}
+
+async function _waitForOnCreateJobs(baseline) {
+  const jobs = await fetch('/api/jobs').then(r => r.json());
+  const relevant = jobs.filter(j => (j.config ?? {}).run_on_create);
+  if (!relevant.length) return;
+
+  const deadline = Date.now() + 30_000;
+  while (Date.now() < deadline) {
+    await new Promise(r => setTimeout(r, 500));
+    const current = await fetch('/api/jobs').then(r => r.json());
+    const allDone = relevant.every(j => {
+      const cur = current.find(c => c.id === j.id);
+      if (!cur) return true;
+      if (cur.last_run_id === baseline.get(j.id)) return false; // new run not started yet
+      return cur.last_status !== 'running';                      // new run complete
+    });
+    if (allDone) return;
+  }
+}
+
 // ── Confirm Dialog ────────────────────────────────────────────────────────────
 
 function confirmDeleteDialog(inst) {
@@ -494,6 +539,7 @@ function _renderJobConfigFields(key, cfg) {
     </div>`;
   if (key === 'patchmon_sync' || key === 'semaphore_sync') {
     const label = key === 'semaphore_sync' ? 'API Token (Bearer)' : 'API Token (Basic)';
+    const tokenPlaceholder = key === 'patchmon_sync' ? 'token_key:token_secret' : '';
     return `
     <div class="form-group">
       <label class="form-label" for="job-cfg-api-url">API URL</label>
@@ -503,6 +549,7 @@ function _renderJobConfigFields(key, cfg) {
     <div class="form-group">
       <label class="form-label" for="job-cfg-api-token">${label}</label>
       <input class="form-input" id="job-cfg-api-token" type="password"
+        placeholder="${tokenPlaceholder}"
         value="${esc(cfg.api_token ?? '')}">
     </div>`;
   }

js/version.js

@@ -1 +1 @@
-const VERSION = "1.5.0";
+const VERSION = "1.7.1";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "catalyst",
-  "version": "1.5.0",
+  "version": "1.7.1",
   "type": "module",
   "scripts": {
     "start": "node server/server.js",

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);
 }
 
@@ -173,7 +179,8 @@ export function createInstance(data) {
        @tailscale, @andromeda, @tailscale_ip, @hardware_acceleration)
   `).run(data);
   db.prepare(
-    `INSERT INTO instance_history (vmid, field, old_value, new_value) VALUES (?, 'created', NULL, NULL)`
+    `INSERT INTO instance_history (vmid, field, old_value, new_value, changed_at)
+     VALUES (?, 'created', NULL, NULL, strftime('%Y-%m-%dT%H:%M:%f', 'now'))`
   ).run(data.vmid);
 }
 
@@ -184,12 +191,13 @@ export function updateInstance(vmid, data) {
       name=@name, state=@state, stack=@stack, vmid=@newVmid,
       atlas=@atlas, argus=@argus, semaphore=@semaphore, patchmon=@patchmon,
       tailscale=@tailscale, andromeda=@andromeda, tailscale_ip=@tailscale_ip,
-      hardware_acceleration=@hardware_acceleration, updated_at=datetime('now')
+      hardware_acceleration=@hardware_acceleration, updated_at=strftime('%Y-%m-%dT%H:%M:%f', 'now')
     WHERE vmid=@vmid
   `).run({ ...data, newVmid: data.vmid, vmid });
   const newVmid = data.vmid;
   const insertEvt = db.prepare(
-    `INSERT INTO instance_history (vmid, field, old_value, new_value) VALUES (?, ?, ?, ?)`
+    `INSERT INTO instance_history (vmid, field, old_value, new_value, changed_at)
+     VALUES (?, ?, ?, ?, strftime('%Y-%m-%dT%H:%M:%f', 'now'))`
   );
   for (const field of HISTORY_FIELDS) {
     const oldVal = String(old[field] ?? '');
@@ -227,7 +235,7 @@ export function importInstances(rows, historyRows = []) {
 
 export function getInstanceHistory(vmid) {
   return db.prepare(
-    'SELECT * FROM instance_history WHERE vmid = ? ORDER BY changed_at ASC, id ASC'
+    'SELECT * FROM instance_history WHERE vmid = ? ORDER BY changed_at DESC, id DESC'
   ).all(vmid);
 }
 
@@ -309,12 +317,14 @@ export function updateJob(id, { enabled, schedule, config }) {
 }
 
 export function createJobRun(jobId) {
-  return Number(db.prepare('INSERT INTO job_runs (job_id) VALUES (?)').run(jobId).lastInsertRowid);
+  return Number(db.prepare(
+    `INSERT INTO job_runs (job_id, started_at) VALUES (?, strftime('%Y-%m-%dT%H:%M:%f', 'now'))`
+  ).run(jobId).lastInsertRowid);
 }
 
 export function completeJobRun(runId, status, result) {
   db.prepare(`
-    UPDATE job_runs SET ended_at=datetime('now'), status=@status, result=@result WHERE id=@id
+    UPDATE job_runs SET ended_at=strftime('%Y-%m-%dT%H:%M:%f', 'now'), status=@status, result=@result WHERE id=@id
   `).run({ id: runId, status, result });
 }
 

server/jobs.js

@@ -41,8 +41,14 @@ async function patchmonSyncHandler(cfg) {
   const { api_url, api_token } = cfg;
   if (!api_url || !api_token) throw new Error('Patchmon not configured — set API URL and token');
 
+  // Accept raw "key:secret" (recommended) or a pre-encoded base64 string.
+  // ":" cannot appear in a valid base64 string, so it's a reliable discriminator.
+  const credential = api_token.includes(':')
+    ? Buffer.from(api_token).toString('base64')
+    : api_token;
+
   const res = await fetch(api_url, {
-    headers: { Authorization: `Basic ${api_token}` },
+    headers: { Authorization: `Basic ${credential}` },
   });
   if (!res.ok) throw new Error(`Patchmon API ${res.status}`);
 

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;
+  const { search, state, stack, sort, order } = req.query;
-  res.json(getInstances({ search, state, stack }));
+  res.json(getInstances({ search, state, stack, sort, order }));
 });
 
 // GET /api/instances/:vmid/history
@@ -112,13 +112,17 @@ router.post('/instances', (req, res) => {
 router.put('/instances/:vmid', (req, res) => {
   const vmid = parseInt(req.params.vmid, 10);
   if (!vmid) return res.status(400).json({ error: 'invalid vmid' });
-  if (!getInstance(vmid)) return res.status(404).json({ error: 'instance not found' });
 
-  const errors = validate(req.body);
+  const existing = getInstance(vmid);
+  if (!existing) return res.status(404).json({ error: 'instance not found' });
+
+  const merged = { ...existing, ...(req.body ?? {}) };
+
+  const errors = validate(merged);
   if (errors.length) return res.status(400).json({ errors });
 
   try {
-    const data = normalise(req.body);
+    const data = normalise(merged);
     updateInstance(vmid, data);
     res.json(getInstance(data.vmid));
   } catch (e) {

tests/api.test.js

@@ -74,6 +74,54 @@ describe('GET /api/instances', () => {
     expect(res.body).toHaveLength(1)
     expect(res.body[0].name).toBe('plex')
   })
+
+  it('sorts by vmid ascending', async () => {
+    await request(app).post('/api/instances').send({ ...base, vmid: 200, name: 'b' })
+    await request(app).post('/api/instances').send({ ...base, vmid: 100, name: 'a' })
+    const res = await request(app).get('/api/instances?sort=vmid&order=asc')
+    expect(res.body[0].vmid).toBe(100)
+    expect(res.body[1].vmid).toBe(200)
+  })
+
+  it('sorts by vmid descending', async () => {
+    await request(app).post('/api/instances').send({ ...base, vmid: 100, name: 'a' })
+    await request(app).post('/api/instances').send({ ...base, vmid: 200, name: 'b' })
+    const res = await request(app).get('/api/instances?sort=vmid&order=desc')
+    expect(res.body[0].vmid).toBe(200)
+    expect(res.body[1].vmid).toBe(100)
+  })
+
+  it('sorts by name descending', async () => {
+    await request(app).post('/api/instances').send({ ...base, vmid: 1, name: 'alpha' })
+    await request(app).post('/api/instances').send({ ...base, vmid: 2, name: 'zebra' })
+    const res = await request(app).get('/api/instances?sort=name&order=desc')
+    expect(res.body[0].name).toBe('zebra')
+    expect(res.body[1].name).toBe('alpha')
+  })
+
+  it('sorts by created_at desc — id tiebreaker preserves insertion order', async () => {
+    await request(app).post('/api/instances').send({ ...base, vmid: 1, name: 'first' })
+    await request(app).post('/api/instances').send({ ...base, vmid: 2, name: 'second' })
+    const res = await request(app).get('/api/instances?sort=created_at&order=desc')
+    expect(res.body[0].name).toBe('second')  // id=2 before id=1
+    expect(res.body[1].name).toBe('first')
+  })
+
+  it('sorts by updated_at desc — id tiebreaker preserves insertion order', async () => {
+    await request(app).post('/api/instances').send({ ...base, vmid: 1, name: 'a' })
+    await request(app).post('/api/instances').send({ ...base, vmid: 2, name: 'b' })
+    const res = await request(app).get('/api/instances?sort=updated_at&order=desc')
+    expect(res.body[0].name).toBe('b')  // id=2 before id=1
+    expect(res.body[1].name).toBe('a')
+  })
+
+  it('ignores invalid sort field and falls back to name asc', async () => {
+    await request(app).post('/api/instances').send({ ...base, vmid: 1, name: 'zebra' })
+    await request(app).post('/api/instances').send({ ...base, vmid: 2, name: 'alpha' })
+    const res = await request(app).get('/api/instances?sort=bad_field')
+    expect(res.status).toBe(200)
+    expect(res.body[0].name).toBe('alpha')
+  })
 })
 
 // ── GET /api/instances/stacks ─────────────────────────────────────────────────
@@ -209,6 +257,18 @@ describe('PUT /api/instances/:vmid', () => {
     const res = await request(app).put('/api/instances/100').send({ ...base, vmid: 200 })
     expect(res.status).toBe(409)
   })
+
+  it('accepts a partial body and preserves unspecified fields', async () => {
+    await request(app).post('/api/instances').send({ ...base, atlas: 1, tailscale_ip: '100.64.0.1' })
+    const res = await request(app).put('/api/instances/100').send({ state: 'degraded' })
+    expect(res.status).toBe(200)
+    expect(res.body.state).toBe('degraded')
+    expect(res.body.name).toBe(base.name)
+    expect(res.body.vmid).toBe(100)
+    expect(res.body.stack).toBe(base.stack)
+    expect(res.body.atlas).toBe(1)
+    expect(res.body.tailscale_ip).toBe('100.64.0.1')
+  })
 })
 
 // ── DELETE /api/instances/:vmid ───────────────────────────────────────────────

tests/db.test.js

@@ -58,6 +58,71 @@ describe('getInstances', () => {
     createInstance({ name: 'plex2', state: 'degraded', stack: 'production', vmid: 2, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
     expect(getInstances({ search: 'plex', state: 'deployed' })).toHaveLength(1);
   });
+
+  it('sorts by vmid ascending', () => {
+    createInstance({ name: 'b', state: 'deployed', stack: 'production', vmid: 200, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    createInstance({ name: 'a', state: 'deployed', stack: 'production', vmid: 100, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    const result = getInstances({ sort: 'vmid' });
+    expect(result[0].vmid).toBe(100);
+    expect(result[1].vmid).toBe(200);
+  });
+
+  it('sorts by vmid descending', () => {
+    createInstance({ name: 'a', state: 'deployed', stack: 'production', vmid: 100, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    createInstance({ name: 'b', state: 'deployed', stack: 'production', vmid: 200, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    const result = getInstances({ sort: 'vmid', order: 'desc' });
+    expect(result[0].vmid).toBe(200);
+    expect(result[1].vmid).toBe(100);
+  });
+
+  it('sorts by name descending', () => {
+    createInstance({ name: 'alpha', state: 'deployed', stack: 'production', vmid: 1, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    createInstance({ name: 'zebra', state: 'deployed', stack: 'production', vmid: 2, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    const result = getInstances({ sort: 'name', order: 'desc' });
+    expect(result[0].name).toBe('zebra');
+    expect(result[1].name).toBe('alpha');
+  });
+
+  it('sorts by created_at asc — id is tiebreaker when timestamps are equal (same second)', () => {
+    // datetime('now') has second precision; rapid inserts share the same timestamp.
+    // The implementation uses id ASC as secondary sort so insertion order is preserved.
+    createInstance({ name: 'first',  state: 'deployed', stack: 'production', vmid: 1, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    createInstance({ name: 'second', state: 'deployed', stack: 'production', vmid: 2, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    const result = getInstances({ sort: 'created_at', order: 'asc' });
+    expect(result[0].name).toBe('first');   // id=1 before id=2
+    expect(result[1].name).toBe('second');
+  });
+
+  it('sorts by created_at desc — id is tiebreaker when timestamps are equal (same second)', () => {
+    createInstance({ name: 'first',  state: 'deployed', stack: 'production', vmid: 1, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    createInstance({ name: 'second', state: 'deployed', stack: 'production', vmid: 2, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    const result = getInstances({ sort: 'created_at', order: 'desc' });
+    expect(result[0].name).toBe('second');  // id=2 before id=1
+    expect(result[1].name).toBe('first');
+  });
+
+  it('sorts by updated_at asc — id is tiebreaker when timestamps are equal (same second)', () => {
+    createInstance({ name: 'a', state: 'deployed', stack: 'production', vmid: 1, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    createInstance({ name: 'b', state: 'deployed', stack: 'production', vmid: 2, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    const result = getInstances({ sort: 'updated_at', order: 'asc' });
+    expect(result[0].name).toBe('a');   // id=1 before id=2
+    expect(result[1].name).toBe('b');
+  });
+
+  it('sorts by updated_at desc — id is tiebreaker when timestamps are equal (same second)', () => {
+    createInstance({ name: 'a', state: 'deployed', stack: 'production', vmid: 1, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    createInstance({ name: 'b', state: 'deployed', stack: 'production', vmid: 2, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    const result = getInstances({ sort: 'updated_at', order: 'desc' });
+    expect(result[0].name).toBe('b');   // id=2 before id=1
+    expect(result[1].name).toBe('a');
+  });
+
+  it('falls back to name asc for an invalid sort field', () => {
+    createInstance({ name: 'zebra', state: 'deployed', stack: 'production', vmid: 1, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    createInstance({ name: 'alpha', state: 'deployed', stack: 'production', vmid: 2, atlas: 0, argus: 0, semaphore: 0, patchmon: 0, tailscale: 0, andromeda: 0, tailscale_ip: '', hardware_acceleration: 0 });
+    const result = getInstances({ sort: 'injected; DROP TABLE instances--' });
+    expect(result[0].name).toBe('alpha');
+  });
 });
 
 // ── getInstance ───────────────────────────────────────────────────────────────