Nothing matches.
setSel(p.pid === sel ? null : p.pid)} title={p.cmd || p.name}>
{p.pid}
diff --git a/web/src/Shell.tsx b/web/src/Shell.tsx
index 4cf7f0f..afe0263 100644
--- a/web/src/Shell.tsx
+++ b/web/src/Shell.tsx
@@ -39,6 +39,16 @@ const GROUPS: Group[] = [
]
type View = 'terminal' | 'dashboard' | 'services' | 'cron' | 'updates' | 'disks' | 'files' | 'procs' | 'machines' | 'settings'
+const VIEWS: View[] = ['terminal', 'dashboard', 'services', 'cron', 'updates', 'disks', 'files', 'procs', 'machines', 'settings']
+const HUB_ONLY: View[] = ['machines', 'settings']
+
+// URL hash is the source of truth for where you are: #/
/. Back and
+// forward work, reload restores the tab, and links can point at a page on a machine.
+function parseHash(): { machine: string | null; view: View } | null {
+ const m = location.hash.match(/^#\/([a-z0-9-]+)\/([a-z]+)$/)
+ if (!m || !VIEWS.includes(m[2] as View)) return null
+ return { machine: m[1] === 'hub' ? null : m[1], view: m[2] as View }
+}
function fmtUptime(s: number): string {
const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60)
@@ -48,7 +58,7 @@ function fmtUptime(s: number): string {
export default function Shell({ me: hubMe, onLoggedOut }: { me: Me; onLoggedOut: () => void }) {
// Which machine we're looking at. null = the hub itself. Set before anything renders so
// every page's first request already goes to the right place.
- const [machine, setMachineState] = useState(() => { const m = sessionStorage.getItem('hamlab.machine'); setMachine(m); return m })
+ const [machine, setMachineState] = useState(() => { const m = parseHash()?.machine ?? sessionStorage.getItem('hamlab.machine'); setMachine(m); return m })
const [machines, setMachines] = useState([])
const [remoteMe, setRemoteMe] = useState(null)
const [remoteErr, setRemoteErr] = useState('')
@@ -56,7 +66,7 @@ export default function Shell({ me: hubMe, onLoggedOut }: { me: Me; onLoggedOut:
const listRate = useRefreshMs(LIST_FLOOR)
const [terms, setTerms] = useState([])
const [active, setActive] = useState(null)
- const [view, setView] = useState('dashboard')
+ const [view, setView] = useState(() => parseHash()?.view ?? 'dashboard')
const [drawer, setDrawer] = useState(false)
const [online, setOnline] = useState(true)
const [creating, setCreating] = useState(false)
@@ -81,8 +91,19 @@ export default function Shell({ me: hubMe, onLoggedOut }: { me: Me; onLoggedOut:
setMachine(name); sessionStorage.setItem('hamlab.machine', name ?? ''); if (!name) sessionStorage.removeItem('hamlab.machine')
handles.current = {}; setTerms([]); setActive(null); setRemoteMe(null); setRemoteErr(''); setDrawer(false); setOnline(true)
setMachineState(name)
- if (view === 'machines') setView('dashboard')
+ if (name && HUB_ONLY.includes(view)) setView('dashboard') // hub-only pages make no sense on a remote machine
}
+
+ // keep the hash in step, and follow it when the browser navigates
+ useEffect(() => {
+ const want = `#/${machine ?? 'hub'}/${view}`
+ if (location.hash !== want) history.pushState(null, '', want)
+ }, [machine, view])
+ useEffect(() => {
+ const h = () => { const p = parseHash(); if (!p) return; if (p.machine !== machine) switchMachine(p.machine); if (p.view !== view) setView(p.view) }
+ window.addEventListener('popstate', h)
+ return () => window.removeEventListener('popstate', h)
+ }) // no deps: needs the latest switchMachine/view each time
useEffect(() => {
if (!machine) { setRemoteMe(null); return }
let stop = false
@@ -139,9 +160,9 @@ export default function Shell({ me: hubMe, onLoggedOut }: { me: Me; onLoggedOut:
{me.user}@{me.host}
{machine && remoteErr && offline}
- {me.load}
+ load {me.load}
-
+
logout
diff --git a/web/src/api.ts b/web/src/api.ts
index c8ef2e5..50ee8c0 100644
--- a/web/src/api.ts
+++ b/web/src/api.ts
@@ -7,6 +7,11 @@ let base = ''
export function setMachine(name: string | null) { base = name ? `/api/nodes/${name}` : '' }
export const apiPath = (p: string) => (base && p.startsWith('/api/') ? base + p.slice(4) : p)
+// A machine that just failed to answer is left alone for a few seconds instead of
+// being hit again on every tick of every page.
+const downUntil: Record = {}
+function machineOf(p: string): string | null { const m = p.match(/^\/api\/nodes\/([a-z0-9-]+)\//); return m ? m[1] : null }
+
let inflight = 0
function track(delta: number) {
inflight += delta
@@ -14,10 +19,13 @@ function track(delta: number) {
}
async function req(method: string, path: string, body?: unknown, local = false): Promise {
+ const target = local ? path : apiPath(path)
+ const mach = machineOf(target)
+ if (mach && downUntil[mach] > Date.now()) throw new Error(`${mach} unreachable (retrying shortly)`)
track(1)
let r: Response
try {
- r = await fetch(local ? path : apiPath(path), {
+ r = await fetch(target, {
method,
credentials: 'same-origin',
headers: body !== undefined ? { 'Content-Type': 'application/json' } : undefined,
@@ -28,6 +36,7 @@ async function req(method: string, path: string, body?: unknown, local = fals
throw new Error('network error')
}
track(-1)
+ if (r.status === 502 && mach) downUntil[mach] = Date.now() + 5000
if (r.status === 401) {
let msg = 'unauthenticated'
try { msg = (await r.json()).error ?? msg } catch { /* ignore */ }
@@ -167,8 +176,8 @@ export const api = {
me: () => req('GET', '/api/me'),
machines: () => req<{ nodes: MachineStatus[]; host: string; fingerprint?: string }>('GET', '/api/nodes', undefined, true),
addMachine: (name: string, url: string, password: string) => req('POST', '/api/nodes', { name, url, password }, true),
- updateMachine: (name: string) => req('POST', `/api/machines/${encodeURIComponent(name)}/update`, undefined, true),
- updateAllMachines: () => req('POST', '/api/machines-update-all', undefined, true),
+ updateMachine: (name: string, force = false) => req('POST', `/api/machines/${encodeURIComponent(name)}/update${force ? '?force=1' : ''}`, undefined, true),
+ updateAllMachines: (force = false) => req('POST', `/api/machines-update-all${force ? '?force=1' : ''}`, undefined, true),
changePassword: (current: string, password: string) => req('POST', '/api/password', { current, password }, true),
tokens: () => req<{ name: string; created: string }[]>('GET', '/api/tokens', undefined, true),
revokeToken: (name: string) => req('DELETE', `/api/tokens/${encodeURIComponent(name)}`, undefined, true),
diff --git a/web/src/styles.css b/web/src/styles.css
index 26f0c73..2b55988 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -379,3 +379,12 @@ h2.section { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted);
[data-theme="light"] .modal-back { background: rgba(0,0,0,.35); }
.disk-summary { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 6px; }
+
+/* touch: every control at least 36px tall (bug 22) */
+@media (pointer: coarse) {
+ .btn, .chip, .icon-btn, .link, .th, .mod-tools button, .hide-item, .crumb, .files-tools select, .procs-tools select, .dash-bar select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
+ .icon-btn { min-width: 36px; }
+ .leaf-actions .icon-btn { min-width: 34px; }
+ .header .link, .header .icon-btn { min-height: 36px; display: inline-flex; align-items: center; }
+ .mod-tools { margin-top: 0; }
+}