No terminals.
diff --git a/web/src/TermTabs.tsx b/web/src/TermTabs.tsx
index 08c28da..189f411 100644
--- a/web/src/TermTabs.tsx
+++ b/web/src/TermTabs.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
import { Term } from './api'
import { Spinner } from './ui'
@@ -6,29 +6,42 @@ interface Props {
terms: Term[]; active: string | null; creating?: boolean
onSelect: (id: string) => void; onNew: () => void
onRename: (t: Term) => void; onClose: (t: Term) => void
+ onMove: (id: string, before: string | null) => void // put a tab before another, or (null) at the end
+ onFocusTerm: () => void
}
// Tab strip across the top of the terminal page: one tab per session, "+" at the end.
-export default function TermTabs({ terms, active, creating, onSelect, onNew, onRename, onClose }: Props) {
+export default function TermTabs({ terms, active, creating, onSelect, onNew, onRename, onClose, onMove, onFocusTerm }: Props) {
+ const [dragging, setDragging] = useState e.preventDefault()}>
- {terms.map((t) => {
+ // Buttons must not take focus from the terminal; the tabs themselves must stay draggable, which a
+ // prevented mousedown would stop — so a tab click hands focus back afterwards instead.
+
{ if ((e.target as HTMLElement).closest('button')) e.preventDefault() }}>
+ {terms.map((t, i) => {
const sel = t.id === active
return (
- (null)
const [err, setErr] = useState('')
const [filter, setFilter] = useState('')
- const [sensor, setSensor] = useState('')
- const [type, setType] = useState('stat')
- const [title, setTitle] = useState('')
+ const [sensor, setSensor] = useState(initial?.sensor ?? '')
+ const [type, setType] = useState(initial?.type ?? 'stat')
+ const [title, setTitle] = useState(initial?.title ?? '')
const [bad, setBad] = useState('')
// One bad pattern would 400 the stream every widget on the page shares, so ask the API first.
const add = async () => {
@@ -19,7 +19,7 @@ export default function WidgetPicker({ onAdd, onClose }: { onAdd: (w: WidgetSpec
const r = await fetch(apiPath('/api/sensors/query'), { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ w: sensor }) })
if (!r.ok) { setBad((await r.json().catch(() => ({}))).error ?? `the API refused it (${r.status})`); return }
} catch { setBad('could not reach the API'); return }
- onAdd({ id: 'w' + Date.now().toString(36), type: pattern ? 'list' : type === 'list' ? 'stat' : type, sensor, title: title.trim() || undefined })
+ onAdd({ id: initial?.id ?? 'w' + Date.now().toString(36), type: pattern ? 'list' : type === 'list' ? 'stat' : type, sensor, title: title.trim() || undefined })
}
useEffect(() => { fetchCatalog().then(setCat).catch((e) => setErr(e instanceof Error ? e.message : 'failed')) }, [])
const shown = useMemo(() => {
@@ -32,7 +32,7 @@ export default function WidgetPicker({ onAdd, onClose }: { onAdd: (w: WidgetSpec
return (
onSelect(t.id)} onDoubleClick={() => onRename(t)}
+
)
}
diff --git a/web/src/WidgetPicker.tsx b/web/src/WidgetPicker.tsx
index cceccc1..05dee26 100644
--- a/web/src/WidgetPicker.tsx
+++ b/web/src/WidgetPicker.tsx
@@ -5,13 +5,13 @@ import { WIDGET_TYPES, WidgetSpec, WidgetType } from './widgets'
import { Btn, Loading, useEscape } from './ui'
// Pick a sensor from this machine's catalog (or type a pattern) and how to draw it.
-export default function WidgetPicker({ onAdd, onClose }: { onAdd: (w: WidgetSpec) => void; onClose: () => void }) {
+export default function WidgetPicker({ onAdd, onClose, initial }: { onAdd: (w: WidgetSpec) => void; onClose: () => void; initial?: WidgetSpec }) {
const [cat, setCat] = useState { setDragging(t.id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', t.id) }}
+ onDragOver={(e) => { if (dragging) { e.preventDefault(); setOver(t.id) } }} onDragLeave={() => setOver((o) => (o === t.id ? null : o))}
+ onDrop={(e) => { e.preventDefault(); if (dragging && dragging !== t.id) onMove(dragging, t.id); setDragging(null); setOver(null); onFocusTerm() }} onDragEnd={() => { setDragging(null); setOver(null) }}
+ onClick={() => { onSelect(t.id); onFocusTerm() }} onDoubleClick={() => onRename(t)}
onAuxClick={(e) => { if (e.button === 1) { e.preventDefault(); onClose(t) } }}>
{t.name}
+ {sel && terms.length > 1 &&
+
+
+ }
{sel && }
)
})}
-
+
e.stopPropagation()}>
- ('POST', '/api/password', { current, password }, true),
tokens: () => req<{ name: string; created: string; scope?: string; sensors?: string[] }[]>('GET', '/api/tokens', undefined, true),
createReadToken: (name: string, sensors: string[] = []) => req<{ token: string; name: string }>('POST', '/api/tokens/read', { name, sensors }, true),
+ logoutAll: () => req<{ ended: number }>('POST', '/api/logout/all', undefined, true),
revokeToken: (name: string) => req('DELETE', `/api/tokens/${encodeURIComponent(name)}`, undefined, true),
uiPrefs: () => req<{ theme?: string; refreshMs?: number }>('GET', '/api/prefs/ui', undefined, true),
saveUIPrefs: (p: { theme?: string; refreshMs?: number }) => req('PUT', '/api/prefs/ui', p, true),
diff --git a/web/src/hashsel.ts b/web/src/hashsel.ts
new file mode 100644
index 0000000..da1bd07
--- /dev/null
+++ b/web/src/hashsel.ts
@@ -0,0 +1,21 @@
+// The part of the URL after the page — #/grid/services/ — is that page's selection:
+// which unit, which job, which folder. Reload keeps it and a link can carry it.
+import { useCallback, useEffect, useState } from 'react'
+
+const read = () => { try { return decodeURIComponent(location.hash.split('/').slice(3).join('/')) } catch { return '' } }
+
+export function useHashSel(): [string, (v: string) => void] {
+ const [sel, setSel] = useState(read)
+ useEffect(() => {
+ const h = () => setSel(read())
+ window.addEventListener('popstate', h); window.addEventListener('hashchange', h)
+ return () => { window.removeEventListener('popstate', h); window.removeEventListener('hashchange', h) }
+ }, [])
+ const set = useCallback((v: string) => {
+ const base = location.hash.split('/').slice(0, 3).join('/')
+ const want = v ? `${base}/${encodeURIComponent(v)}` : base
+ if (location.hash !== want) history.replaceState(null, '', want)
+ setSel(v)
+ }, [])
+ return [sel, set]
+}
diff --git a/web/src/sensors.ts b/web/src/sensors.ts
index 01981b9..586a24b 100644
--- a/web/src/sensors.ts
+++ b/web/src/sensors.ts
@@ -67,7 +67,14 @@ export function useSensorStream(shape: Shape | null, opts: StreamOp
if (everyMs) params.every = String(everyMs)
const es = new EventSource(url(srcRef.current, '/api/sensors/stream', params))
es.onmessage = (e) => { try { setData(JSON.parse(e.data)); setError('') } catch { /* skip a bad frame */ } }
- es.onerror = () => setError('reconnecting…') // EventSource retries by itself
+ es.onerror = () => {
+ setError('reconnecting…') // EventSource retries by itself, but never says why it failed — so ask once, plainly
+ fetch(url(srcRef.current, '/api/sensors/query', { q: key }), { credentials: 'same-origin' }).then(async (r) => {
+ if (r.ok) return
+ const why = (await r.json().catch(() => ({}))).error
+ setError(r.status === 401 ? 'the token was rejected' : r.status === 429 ? 'too many live streams are open' : r.status === 404 ? 'no such machine' : r.status === 502 ? 'that machine is unreachable' : why || `the API answered ${r.status}`)
+ }).catch(() => setError("can't reach Ham Lab"))
+ }
return () => es.close()
}, [key, srcKey, visible]) // eslint-disable-line react-hooks/exhaustive-deps
return { data, error, resumed }
diff --git a/web/src/styles.css b/web/src/styles.css
index 42a1369..2f82c22 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -430,3 +430,11 @@ h2.section { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted);
.gallery-id { margin-top: auto; padding-top: 8px; font-size: 10.5px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 800px) { .gallery .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
+
+/* in-app dialogs, gallery search */
+.modal.ask { width: min(440px, 100%); } .ask-msg { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
+.gallery-find { flex: 1 1 200px; max-width: 340px; padding: 7px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 14px; }
+.gallery .dash-bar { flex-wrap: wrap; gap: 8px; }
+.ttab.drop { box-shadow: inset 3px 0 0 var(--accent2); }
+.ttab-move { display: none; } .ttab-move .icon-btn:disabled { opacity: .3; }
+@media (pointer: coarse) { .ttab-move { display: inline-flex; } } /* no drag and drop on a touch screen */
diff --git a/web/src/ui.tsx b/web/src/ui.tsx
index 9f4719c..2fd2aa2 100644
--- a/web/src/ui.tsx
+++ b/web/src/ui.tsx
@@ -17,7 +17,7 @@ export function Btn({ onClick, busy, confirm, className = 'btn', disabled, title
return (
Add a widget
+{initial ? 'Edit widget' : 'Add a widget'}
setFilter(e.target.value)} placeholder="filter sensors — cpu, temp, fan, enp3s0…" /> {err &&{err}
}
{!cat && !err && {bad}
}
- Add
+ {initial ? 'Save' : 'Add'}
diff --git a/web/src/api.ts b/web/src/api.ts
index 10d6144..0ca8211 100644
--- a/web/src/api.ts
+++ b/web/src/api.ts
@@ -182,6 +182,7 @@ export const api = {
changePassword: (current: string, password: string) => req