urania/nadir-webui
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 11 Wiki Activity

updated update

Browse Source
This commit is contained in:
urania
2026-06-22 19:14:44 +02:00
parent 8a81eb2634
commit 96a92603a0
10 changed files with 489 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
db.sqlite
BIN
View File
Binary file not shown.
messages/en.json
+13
View File
@@ -3,6 +3,19 @@
"account": "Account",
"already_have_account": "Already have an account?",
"appname": "NadiЯ",
"agent_updates":"Agent outdated",
"agent_update_started":"Updating agent... ({from} → {to})",
"agent_update_success":"Agent updated to {version}",
"agent_update_failed":"Agent update did not complete - check `nadir logs` on the host",
"machine_offline_title":"{name} is offline",
"machine_offline_description":"Could not reach the nadir-agent at {address}. The host may be down, the agent stopped, or the address is wrong.",
"machine_offline_code":"Error 502",
"machine_offline_node_you":"You",
"machine_offline_node_proxy":"Web UI",
"machine_offline_node_dest":"Agent",
"machine_offline_status_connected":"CONNECTED",
"machine_offline_status_unreachable":"UNREACHABLE",
"machine_offline_details":"Show error details",
"back_to_login": "Back to login",
"backup_code": "Backup code",
"backup_codes_notice": "Store these somewhere safe. Each code works once if you lose your device.",
src/lib/components/blocks/trunk/trunk.svelte
+2
View File
@@ -190,6 +190,8 @@
width: 100%;
height: 100%;
overflow: hidden;
display:grid;
place-content:center
}
.trunk :global(canvas) {
display: block;
src/lib/components/dashboard/system-panel.svelte
+4 -1
View File
@@ -7,6 +7,7 @@
import type { SystemDetails } from './types';
import { Badge } from '../ui/badge';
import { ghz } from './format';
let {
@@ -36,9 +37,11 @@
{#snippet section(heading: string, body: Snippet)}
<div class="flex flex-col gap-2">
<span class="text-foreground text-[0.7rem] font-medium tracking-wide uppercase">{heading}</span>
<Badge variant="outline" class="rounded-sm">{heading}</Badge>
<div class="px-1">
{@render body()}
</div>
</div>
{/snippet}
{#snippet cpuBody()}
src/lib/components/ui/badge/badge.svelte
+1 -1
View File
@@ -13,7 +13,7 @@
'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
link: 'text-primary underline-offset-4 hover:underline',
outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
outline: 'border-foreground /50 text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80'
}
}
src/lib/machines/schema.ts
+10 -3
View File
@@ -4,8 +4,11 @@ import { m } from '$lib/paraglide/messages';
const nonEmpty = v.pipe(v.string(m.errors_non_empty()), v.nonEmpty(m.errors_non_empty()));
const address = v.pipe(
v.optional(v.string(), 'http://127.0.0.1:9999'),
v.transform((s) => s.trim() || 'http://127.0.0.1:9999'),
v.optional(v.string(), 'https://127.0.0.1:9999'),
v.transform((s) => {
const t = s.trim() || 'https://127.0.0.1:9999';
return /^https?:\/\//i.test(t) ? t : `https://${t}`;
}),
v.url(m.errors_address_invalid())
);
@@ -17,7 +20,11 @@ export const machineSchema = v.object({ address, name: nonEmpty, token: nonEmpty
export const machineEditSchema = v.object({
address: v.pipe(
v.optional(v.string(), ''),
v.transform((s) => s.trim())
v.transform((s) => {
const t = s.trim();
if (!t) return t;
return /^https?:\/\//i.test(t) ? t : `https://${t}`;
})
),
id: nonEmpty,
name: v.pipe(
src/lib/remotes/server.remote.ts
+45 -15
View File
@@ -1,5 +1,5 @@
import { error } from '@sveltejs/kit';
import { getRequestEvent, query } from '$app/server';
import { command, getRequestEvent, query } from '$app/server';
import { v } from '$lib';
import { m } from '$lib/paraglide/messages';
import { db } from '$lib/server/db';
@@ -18,12 +18,25 @@ export const serverInfo = query(async () => {
if (!token) error(500, { message: m.errors_generic() });
const nadir = getClient(machine.address, token);
const { data, error: err } = await nadir.GET('/api/system/info');
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { token: _, ...safe } = machine;
if (data) return { ...data, $db: safe };
throw error(err.status || 500, { message: err.detail || m.errors_generic() });
try {
const [info, health] = await Promise.all([
nadir.GET('/api/system/info'),
nadir.GET('/api/health')
]);
const { data, error: err } = info;
if (data)
return {
...data,
$agent_version: (health.data as { version?: string } | undefined)?.version ?? null,
$db: safe,
$offline: null
};
return { $db: safe, $offline: err.detail || m.errors_generic() };
} catch (e) {
return { $db: safe, $offline: (e as Error)?.message || m.errors_generic() };
}
});
export const auditLog = query(v.optional(v.number(), 20), async (limit) => {
@@ -37,10 +50,12 @@ export const auditLog = query(v.optional(v.number(), 20), async (limit) => {
const token = decryptValue(machine.token);
if (!token) error(500, { message: m.errors_generic() });
const nadir = getClient(machine.address, token);
const { data, error: err } = await nadir.GET('/api/audit', { params: { query: { limit } } });
if (data) return data.entries ?? [];
console.error(err);
throw error(err.status || 500, { message: err.detail || m.errors_generic() });
try {
const { data } = await nadir.GET('/api/audit', { params: { query: { limit } } });
return data?.entries ?? [];
} catch {
return [];
}
});
// ponytail: in-memory cache, 10 min; switch to Redis/KV if we ever run >1 node
@@ -59,6 +74,21 @@ export const latestAgentRelease = query(async () => {
}
});
export const updateAgent = command(async () => {
const {
locals: { user },
params: { machineId }
} = getRequestEvent();
if (!user) error(401, { message: m.errors_unauthenticated() });
const machine = await db.query.machines.findFirst({ where: { id: machineId } });
if (!machine) error(404, { message: m.errors_not_found() });
const token = decryptValue(machine.token);
if (!token) error(500, { message: m.errors_generic() });
const nadir = getClient(machine.address, token);
const { error: err } = await nadir.POST('/api/update');
if (err) throw error(err.status || 500, { message: err.detail || m.errors_generic() });
});
export const systemDetails = query(async () => {
const {
locals: { user },
@@ -70,14 +100,14 @@ export const systemDetails = query(async () => {
const token = decryptValue(machine.token);
if (!token) error(500, { message: m.errors_generic() });
const nadir = getClient(machine.address, token);
const [time, locale, dns, updates] = await Promise.all([
nadir.GET('/api/system/time'),
nadir.GET('/api/system/locale'),
nadir.GET('/api/networking/dns'),
nadir.GET('/api/packages/updates')
]);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { token: _, ...safe } = machine;
const [time, locale, dns, updates] = await Promise.all([
nadir.GET('/api/system/time').catch(() => ({ data: undefined })),
nadir.GET('/api/system/locale').catch(() => ({ data: undefined })),
nadir.GET('/api/networking/dns').catch(() => ({ data: undefined })),
nadir.GET('/api/packages/updates').catch(() => ({ data: undefined }))
]);
return {
$db: safe,
dns: dns.data?.servers ?? null,
src/lib/server/nadir-agent/client.ts
+7 -7
View File
@@ -1,16 +1,16 @@
import { getRequestEvent } from '$app/server';
import createClient from 'openapi-fetch';
import type { paths } from './schema';
// Use the global fetch (NOT event.fetch): SvelteKit's event.fetch forwards the
// browser request's Origin header to outbound calls, which trips the agent's
// CSRF same-origin check on POST/PUT/DELETE. Server-to-server fetch has no
// Origin, so the agent treats it as a non-browser caller and lets writes through.
const getClient = (baseUrl: string, token: string) => {
const { fetch } = getRequestEvent();
return createClient<paths>({
baseUrl: baseUrl,
fetch,
headers: {
authorization: `Bearer ${token}`
}
baseUrl,
fetch: globalThis.fetch,
headers: { authorization: `Bearer ${token}` }
});
};
src/lib/server/nadir-agent/schema.d.ts
Vendored
+72
View File
@@ -948,6 +948,26 @@ export interface paths {
patch?: never;
trace?: never;
};
"/api/update": {
parameters: {
query?: never;
header?: never;
path?: never;
cookie?: never;
};
get?: never;
put?: never;
/**
* Update nadir to the latest release
* @description Equivalent to running `sudo nadir update` on the host: queries server.release_repo for the latest release, downloads the binary matching the host's architecture, atomically replaces the running binary, and restarts the systemd unit. Returns 202 immediately; the service restart drops in-flight connections, so poll /api/health to confirm the new version is up. Requires the wildcard admin role.
*/
post: operations["meta-update"];
delete?: never;
options?: never;
head?: never;
patch?: never;
trace?: never;
};
"/api/users": {
parameters: {
query?: never;
@@ -1380,6 +1400,11 @@ export interface components {
* @example ok
*/
status: string;
/**
* @description Application version
* @example 1.0.0
*/
version: string;
};
HostEntry: {
/**
@@ -5792,6 +5817,53 @@ export interface operations {
};
};
};
"meta-update": {
parameters: {
query?: never;
header?: never;
path?: never;
cookie?: never;
};
requestBody?: never;
responses: {
/** @description Accepted */
202: {
headers: {
[name: string]: unknown;
};
content: {
"application/json": components["schemas"]["StatusOutputBody"];
};
};
/** @description Unauthorized */
401: {
headers: {
[name: string]: unknown;
};
content: {
"application/problem+json": components["schemas"]["ErrorModel"];
};
};
/** @description Forbidden */
403: {
headers: {
[name: string]: unknown;
};
content: {
"application/problem+json": components["schemas"]["ErrorModel"];
};
};
/** @description Internal Server Error */
500: {
headers: {
[name: string]: unknown;
};
content: {
"application/problem+json": components["schemas"]["ErrorModel"];
};
};
};
};
"users-list": {
parameters: {
query?: never;
src/routes/dashboard/[machineId]/+page.svelte
+188 -22
View File
@@ -2,17 +2,23 @@
import {
Activity,
Clock,
ClockAlert,
Cpu,
Ellipsis,
Globe,
MemoryStick,
Pause,
Pencil,
Play,
RefreshCw,
Trash2
Server,
Trash2,
User,
X
} from '@lucide/svelte';
import { goto } from '$app/navigation';
import { resolve } from '$app/paths';
import Trunk from '$lib/components/blocks/trunk/trunk.svelte';
import ActivityPanel from '$lib/components/dashboard/activity-panel.svelte';
import CpuHeatmap from '$lib/components/dashboard/cpu-heatmap.svelte';
import {
@@ -30,8 +36,11 @@
import TemperaturePanel from '$lib/components/dashboard/temperature-panel.svelte';
import * as AlertDialog from '$lib/components/ui/alert-dialog';
import { Button } from '$lib/components/ui/button';
import { ButtonGroup } from '$lib/components/ui/button-group';
import * as Card from '$lib/components/ui/card';
import * as Dialog from '$lib/components/ui/dialog';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
import * as Empty from '$lib/components/ui/empty';
import * as Field from '$lib/components/ui/field';
import { Input } from '$lib/components/ui/input';
import { Progress } from '$lib/components/ui/progress';
@@ -43,7 +52,8 @@
auditLog,
latestAgentRelease,
serverInfo,
systemDetails
systemDetails,
updateAgent
} from '$lib/remotes/server.remote';
import { toast } from 'svelte-sonner';
@@ -87,6 +97,7 @@
let editOpen = $state(false);
let deleteOpen = $state(false);
let updating = $state(false);
const formId = $props.id();
</script>
@@ -96,11 +107,100 @@
{console.log('errore', err)}
{/snippet}
{@const sys = await info}
{@const raw = await info}
{#if raw.$offline !== null}
<div class="flex grow items-center justify-center p-8 relative">
<Trunk>
<Card.Root class="relative m-auto z-20">
<Card.Content>
<Empty.Root class="max-w-2xl">
<Empty.Header>
<p class="text-destructive font-mono text-sm">{m.machine_offline_code()}</p>
<Empty.Title>{m.machine_offline_title({ name: raw.$db.name ?? '' })}</Empty.Title>
<Empty.Description>
{m.machine_offline_description({ address: raw.$db.address })}
</Empty.Description>
</Empty.Header>
<Empty.Content>
<div class="flex w-full items-start justify-center gap-2 py-4 sm:gap-4">
<div class="flex flex-col items-center gap-2">
<div
class="bg-muted text-foreground flex size-14 items-center justify-center rounded-lg"
>
<User class="size-6" />
</div>
<div class="text-xs font-medium">{m.machine_offline_node_you()}</div>
<div class="text-[10px] font-mono tracking-wider text-emerald-500">
{m.machine_offline_status_connected()}
</div>
</div>
<div class="relative mt-6 h-1 flex-1 self-start">
<div class="custom-dash custom-dash-ok h-1 w-full"></div>
</div>
<div class="flex flex-col items-center gap-2">
<div
class="bg-muted text-foreground flex size-14 items-center justify-center rounded-lg"
>
<Server class="size-6" />
</div>
<div class="text-xs font-medium">{m.machine_offline_node_proxy()}</div>
<div class="text-[10px] font-mono tracking-wider text-emerald-500">
{m.machine_offline_status_connected()}
</div>
</div>
<div class="relative mt-6 h-1 flex-1 self-start">
<div class="custom-dash custom-dash-bad h-1 w-full"></div>
<div
class="bg-card text-destructive absolute top-1/2 left-1/2 flex size-5.5 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full"
>
<X class="size-4" />
</div>
</div>
<div class="flex flex-col items-center gap-2">
<div
class="bg-muted text-foreground flex size-14 items-center justify-center rounded-lg"
>
<Globe class="size-6" />
</div>
<div class="text-xs font-medium">{m.machine_offline_node_dest()}</div>
<div class="text-destructive text-[10px] font-mono tracking-wider">
{m.machine_offline_status_unreachable()}
</div>
</div>
</div>
<details class="text-muted-foreground w-full max-w-full text-xs">
<summary class="cursor-pointer select-none"
>{m.machine_offline_details()}</summary
>
<pre
class="bg-muted mt-2 max-w-full overflow-auto rounded-md p-3 whitespace-pre-wrap text-center">{raw.$offline}</pre>
</details>
<div class="flex flex-wrap gap-2 justify-center">
<Button onclick={() => info.refresh()}>
<RefreshCw class="size-4" />
{m.dashboard_refresh()}
</Button>
<Button variant="outline" onclick={() => (editOpen = true)}>
<Pencil class="size-4" />
{m.edit()}
</Button>
<Button variant="outline" onclick={() => (deleteOpen = true)}>
<Trash2 class="size-4" />
{m.delete()}
</Button>
</div>
</Empty.Content>
</Empty.Root>
</Card.Content>
</Card.Root>
</Trunk>
</div>
{:else}
{@const sys = raw}
{@const log = await audit}
{@const d = await details}
{@const latestTag = await latest}
{@const agentVersion = (sys as unknown as { agent_version?: string }).agent_version}
{@const agentVersion = sys.$agent_version}
{@const outdated = !!(agentVersion && latestTag && agentVersion !== latestTag)}
{@const memPct = pct(sys.memory.used_bytes, sys.memory.total_bytes)}
{@const loadPct = Math.round((sys.load.load1 / sys.cpu.logical_cpus) * 100)}
@@ -113,12 +213,15 @@
class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-4 sticky top-15 bg-background p-4 py-2 z-20"
>
<div class="flex flex-col gap-0.5 min-w-0">
<h1 class="text-2xl font-semibold tracking-tight truncate">{sys.$db.name}</h1>
<h1 class="text-2xl font-semibold tracking-tight flex gap-2 items-center truncate">
{sys.$db.name}
</h1>
<p class="text-muted-foreground text-sm truncate">
{sys.os.hostname} | {sys.os.pretty_name} | {sys.$db.address}
</p>
</div>
<div class="flex flex-wrap items-center lg:justify-end gap-2 py-1">
<ButtonGroup>
<Select.Root type="single" bind:value={syncInterval}>
<Select.Trigger class="h-8 w-auto grow lg:w-35">{intervalLabel}</Select.Trigger>
<Select.Content>
@@ -140,18 +243,19 @@
aria-label={polling ? m.dashboard_pause() : m.dashboard_resume()}
>
{#if polling}
<Pause class="size-4" />
<Pause class="size-4!" />
{:else}
<Play class="size-4" />
<Play class="size-4!" />
{/if}
</Button>
</ButtonGroup>
<Button
variant="outline"
class="h-8 px-2 sm:px-3"
onclick={refreshAll}
aria-label={m.dashboard_refresh()}
>
<RefreshCw class="size-4" />
<RefreshCw class="size-4!" />
<span class="hidden sm:inline">{m.dashboard_refresh()}</span>
</Button>
<DropdownMenu.Root>
@@ -164,27 +268,64 @@
class="h-8 w-8 relative"
aria-label={m.machine_actions()}
>
<Ellipsis class="size-4" />
{#if outdated}
<span
class="absolute top-1 right-1 size-2 rounded-full bg-red-500 ring-2 ring-background"
title={`nadir-agent ${agentVersion} → ${latestTag}`}
></span>
{/if}
<Ellipsis class="size-4!" />
</Button>
{/snippet}
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Item onSelect={() => (editOpen = true)}>
<Pencil class="size-4" />
<Pencil class="size-4!" />
{m.edit()}
</DropdownMenu.Item>
<DropdownMenu.Item variant="destructive" onSelect={() => (deleteOpen = true)}>
<Trash2 class="size-4" />
<Trash2 class="size-4!" />
{m.delete()}
</DropdownMenu.Item>
<DropdownMenu.Separator />
</DropdownMenu.Content>
</DropdownMenu.Root>
{#if outdated}
<Button
variant="secondary"
title={`${m.agent_updates()}: ${agentVersion} → ${latestTag}`}
disabled={updating}
onclick={async () => {
updating = true;
const from = agentVersion ?? '?';
const to = latestTag ?? '?';
try {
await updateAgent();
toast.info(m.agent_update_started({ from, to }));
// Agent returns 202 and runs update in background; poll until the
// reported version flips or we give up.
const deadline = Date.now() + 60_000;
let done = false;
while (Date.now() < deadline) {
await new Promise((r) => setTimeout(r, 3000));
await info.refresh().catch(() => {});
const next = await info;
const v = next.$offline === null ? next.$agent_version : null;
if (v && v !== from) {
toast.success(m.agent_update_success({ version: v }));
await refreshAll();
done = true;
break;
}
}
if (!done) toast.error(m.agent_update_failed());
} catch (e) {
toast.error(
(e as { body?: { message?: string } })?.body?.message || m.errors_generic()
);
} finally {
updating = false;
}
}}
>
<ClockAlert class="size-4!" />
</Button>
{/if}
</div>
</div>
@@ -270,6 +411,7 @@
<div class="px-4 py-2 pb-4">
<ActivityPanel items={log} />
</div>
{/if}
<Dialog.Root bind:open={editOpen}>
<Dialog.Content>
@@ -297,7 +439,7 @@
}
})}
>
<input type="hidden" name="id" value={sys.$db.id} />
<input type="hidden" name="id" value={raw.$db.id} />
<Field.Group>
<Field.Field>
<Field.Label for="edit-name-{formId}">{m.machine_name()}</Field.Label>
@@ -305,7 +447,7 @@
id="edit-name-{formId}"
placeholder={m.machine_name_placeholder()}
{...updateMachine.fields.name.as('text')}
value={sys.$db.name}
value={raw.$db.name}
required
/>
{#each updateMachine.fields.name.issues() as issue, i (`${issue}-${i}`)}
@@ -318,7 +460,7 @@
id="edit-address-{formId}"
placeholder={m.machine_address_placeholder()}
{...updateMachine.fields.address.as('text')}
value={sys.$db.address}
value={raw.$db.address}
/>
{#each updateMachine.fields.address.issues() as issue, i (`${issue}-${i}`)}
<Field.Error>{issue.message}</Field.Error>
@@ -348,7 +490,7 @@
<AlertDialog.Header>
<AlertDialog.Title>{m.machine_delete_title()}</AlertDialog.Title>
<AlertDialog.Description>
{m.machine_delete_confirm({ name: sys.$db.name ?? '' })}
{m.machine_delete_confirm({ name: raw.$db.name ?? '' })}
</AlertDialog.Description>
</AlertDialog.Header>
<AlertDialog.Footer>
@@ -368,7 +510,7 @@
}
})}
>
<input type="hidden" name="id" value={sys.$db.id} />
<input type="hidden" name="id" value={raw.$db.id} />
<AlertDialog.Action type="submit" disabled={!!deleteMachine.pending}>
{m.delete()}
</AlertDialog.Action>
@@ -378,3 +520,27 @@
</AlertDialog.Root>
</svelte:boundary>
</div>
<style>
.custom-dash {
background-image: linear-gradient(to right, currentColor 50%, transparent 0%);
background-size: 10px 2px;
background-repeat: repeat-x;
animation: custom-flow 1s linear infinite;
}
.custom-dash-ok {
color: var(--color-emerald-500, #10b981);
}
.custom-dash-bad {
color: var(--destructive, #ef4444);
animation-duration: 2s;
}
@keyframes custom-flow {
from {
background-position: 0 0;
}
to {
background-position: 10px 0;
}
}
</style>