@axium/sysadmin 0.0.1

package/dist/server/api.js

@@ -0,0 +1,136 @@
+import * as acl from '@axium/server/acl';
+import { authRequestForItem, checkAuthForUser } from '@axium/server/auth';
+import { database } from '@axium/server/database';
+import { parseBody, withError } from '@axium/server/requests';
+import { addRoute } from '@axium/server/routes';
+import * as z from 'zod';
+import { SystemInit, SystemUserInit } from '../common.js';
+function parseSystem(system, isShared) {
+    return Object.assign({ acl: [] }, system, { isShared });
+}
+addRoute({
+    path: '/api/users/:id/sysadmin/systems',
+    params: { id: z.uuid() },
+    async GET(request, { id: userId }) {
+        const { user } = await checkAuthForUser(request, userId);
+        const systems = await database
+            .selectFrom('systems')
+            .selectAll()
+            .select(acl.from('systems'))
+            .where(eb => eb.or([eb('userId', '=', userId), acl.existsIn('systems', user)(eb)]))
+            .execute()
+            .catch(withError('Could not get systems'));
+        return systems.map(system => parseSystem(system, system.userId !== userId));
+    },
+    async PUT(request, { id: userId }) {
+        const init = await parseBody(request, SystemInit);
+        await checkAuthForUser(request, userId);
+        return parseSystem(await database
+            .insertInto('systems')
+            .values({ ...init, userId })
+            .returningAll()
+            .executeTakeFirstOrThrow()
+            .catch(withError('Could not create system')), false);
+    },
+});
+addRoute({
+    path: '/api/sysadmin/systems/:id',
+    params: { id: z.uuid() },
+    async GET(request, { id }) {
+        const { item, fromACL } = await authRequestForItem(request, 'systems', id, { read: true });
+        return parseSystem(item, fromACL);
+    },
+    async PATCH(request, { id }) {
+        const init = await parseBody(request, SystemInit);
+        const { fromACL } = await authRequestForItem(request, 'systems', id, { edit: true });
+        const system = await database
+            .updateTable('systems')
+            .set(init)
+            .where('id', '=', id)
+            .returningAll()
+            .returning(acl.from('systems'))
+            .executeTakeFirstOrThrow()
+            .catch(withError('Could not update system'));
+        return parseSystem(system, fromACL);
+    },
+    async DELETE(request, { id }) {
+        const { fromACL } = await authRequestForItem(request, 'systems', id, { manage: true });
+        const system = await database
+            .deleteFrom('systems')
+            .where('id', '=', id)
+            .returningAll()
+            .returning(acl.from('systems'))
+            .executeTakeFirstOrThrow()
+            .catch(withError('Could not delete system'));
+        return parseSystem(system, fromACL);
+    },
+});
+addRoute({
+    path: '/api/users/:id/sysadmin/users',
+    params: { id: z.uuid() },
+    async GET(request, { id: userId }) {
+        await checkAuthForUser(request, userId);
+        return await database
+            .selectFrom('system_users')
+            .selectAll()
+            .where('userId', '=', userId)
+            .execute()
+            .catch(withError('Could not get system users'));
+    },
+    async PUT(request, { id: userId }) {
+        const init = await parseBody(request, SystemUserInit);
+        await checkAuthForUser(request, userId);
+        return await database
+            .insertInto('system_users')
+            .values({ ...init, userId })
+            .returningAll()
+            .executeTakeFirstOrThrow()
+            .catch(withError('Could not create system user'));
+    },
+});
+addRoute({
+    path: '/api/sysadmin/users/:id',
+    params: { id: z.uuid() },
+    async GET(request, { id }) {
+        const user = await database
+            .selectFrom('system_users')
+            .selectAll()
+            .where('id', '=', id)
+            .executeTakeFirstOrThrow()
+            .catch(withError('Could not get system user', 404));
+        await checkAuthForUser(request, user.userId);
+        return user;
+    },
+    async PATCH(request, { id }) {
+        const init = await parseBody(request, SystemUserInit);
+        const existing = await database
+            .selectFrom('system_users')
+            .select('userId')
+            .where('id', '=', id)
+            .executeTakeFirstOrThrow()
+            .catch(withError('Could not get system user', 404));
+        await checkAuthForUser(request, existing.userId);
+        return await database
+            .updateTable('system_users')
+            .set(init)
+            .where('id', '=', id)
+            .returningAll()
+            .executeTakeFirstOrThrow()
+            .catch(withError('Could not update system user'));
+    },
+    async DELETE(request, { id }) {
+        const existing = await database
+            .selectFrom('system_users')
+            .select('userId')
+            .where('id', '=', id)
+            .executeTakeFirstOrThrow()
+            .catch(withError('Could not get system user', 404));
+        await checkAuthForUser(request, existing.userId);
+        return await database
+            .deleteFrom('system_users')
+            .where('id', '=', id)
+            .returningAll()
+            .executeTakeFirstOrThrow()
+            .catch(withError('Could not delete system user'));
+    },
+});

package/dist/server/db.d.ts

@@ -0,0 +1,7 @@
+import type { FromFile as FromSchemaFile } from '@axium/server/db/schema';
+import type schema from '../../db.json';
+import './socket.js';
+declare module '@axium/server/database' {
+    interface Schema extends FromSchemaFile<typeof schema> {
+    }
+}

package/dist/server/db.js

@@ -0,0 +1 @@
+import './socket.js';

package/dist/server/hooks.d.ts

@@ -0,0 +1,3 @@
+import './socket.js';
+import './db.js';
+import './api.js';

package/dist/server/hooks.js

@@ -0,0 +1,3 @@
+import './socket.js';
+import './db.js';
+import './api.js';

package/dist/server/socket.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/server/socket.js

@@ -0,0 +1,9 @@
+import { addListener, io } from '@axium/server/socket';
+addListener('sysadmin:ping', async (socket, cb) => {
+    const result = await io.in(`local:${socket.data.user.id}`).timeout(5000).emitWithAck('sysadmin:ping');
+    cb(result);
+});
+addListener('sysadmin:getSystemInfo', async (socket, cb) => {
+    const result = await io.in(`local:${socket.data.user.id}`).timeout(5000).emitWithAck('sysadmin:getSystemInfo');
+    cb(result);
+});

package/dist/web_hook.d.ts

@@ -0,0 +1,8 @@
+import en from '../locales/en.json';
+import './common.js';
+type en = typeof en;
+declare module '@axium/client/locales' {
+    interface Locale extends en {
+    }
+}
+export {};

package/dist/web_hook.js

@@ -0,0 +1,4 @@
+import { extendLocale } from '@axium/client';
+import en from '../locales/en.json' with { type: 'json' };
+import './common.js';
+extendLocale('en', en);

package/lib/SystemCard.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { fetchAPI, text } from '@axium/client';
+	import { contextMenu, type ContextMenuItem } from '@axium/client/attachments';
+	import { Icon, Popover } from '@axium/client/components';
+	import { copy } from '@axium/client/gui';
+	import { toastStatus } from '@axium/client/toast';
+	import { systemTypeIcons, type System } from '@axium/sysadmin';
+	import SystemInitDialog from './SystemInitDialog.svelte';
+
+	let {
+		system = $bindable(),
+		online,
+		edited,
+		deleted,
+	}: {
+		system: System;
+		online: boolean;
+		/** Called with the updated system after an edit */
+		edited?(system: System): unknown;
+		/** Called after the system is deleted */
+		deleted?(system: System): unknown;
+	} = $props();
+
+	let editDialog = $state<HTMLDialogElement>();
+
+	const link = $derived(`/sysadmin/systems/${system.id}`);
+
+	function remove() {
+		toastStatus(
+			fetchAPI('DELETE', 'sysadmin/systems/:id', {}, system.id).then(() => deleted?.(system)),
+			text('sysadmin.SystemCard.toast_deleted')
+		);
+	}
+
+	/** The actions shown in both the hover popover and the right-click context menu. */
+	const menuItems = (): ContextMenuItem[] => [
+		{ i: 'pen', text: text('sysadmin.SystemCard.edit'), action: () => editDialog!.showModal() },
+		{ i: 'link-horizontal', text: text('sysadmin.SystemCard.copy_link'), action: () => copy('text/plain', link) },
+		{
+			i: 'arrow-up-right-from-square',
+			text: text('sysadmin.SystemCard.open_new_tab'),
+			action: () => window.open(`/sysadmin/systems/${system.id}`),
+		},
+		{ i: 'trash', text: text('generic.delete'), danger: true, action: remove },
+	];
+</script>
+
+<div class="SystemCard" {@attach contextMenu(menuItems)}>
+	<span class={['indicator', online ? 'online' : 'offline']} title={online ? text('sysadmin.online') : text('sysadmin.offline')}></span>
+	<a class="link" href="/sysadmin/systems/{system.id}">
+		<Icon i={systemTypeIcons[system.type]} class="icon" --size="2em" />
+		<div class="info">
+			<span class="name">{system.name}</span>
+			<span class="subtle hostname">{system.hostname}</span>
+		</div>
+	</a>
+
+	<Popover showToggle="hover">
+		{#each menuItems() as item}
+			<div class={['menu-item', item.danger && 'danger']} onclick={item.action}>
+				<Icon i={item.i!} />
+				<span>{item.text}</span>
+			</div>
+		{/each}
+	</Popover>
+</div>
+
+<SystemInitDialog
+	bind:dialog={editDialog}
+	{system}
+	edited={updated => {
+		system = updated;
+		edited?.(updated);
+	}}
+/>
+
+<style>
+	.SystemCard {
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: 0.5em;
+		padding: 1em;
+		border-radius: 0.5em;
+		background-color: var(--bg-alt);
+	}
+
+	.link {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+		flex: 1;
+		min-width: 0;
+		cursor: pointer;
+		text-decoration: none;
+		color: inherit;
+	}
+
+	.indicator {
+		position: absolute;
+		top: 0.6em;
+		left: 0.6em;
+		width: 0.6em;
+		height: 0.6em;
+		border-radius: 50%;
+
+		&.online {
+			background-color: var(--green);
+		}
+
+		&.offline {
+			background-color: hsl(0 0 calc(var(--fg-light) - 30));
+		}
+	}
+
+	.info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1em;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.name {
+		font-weight: bold;
+	}
+
+	.hostname {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

package/lib/SystemInitDialog.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { fetchAPI, text } from '@axium/client';
+	import { FormDialog } from '@axium/client/components';
+	import { SystemInit, SystemType, type System } from '@axium/sysadmin';
+
+	let {
+		dialog = $bindable(),
+		userId,
+		system,
+		created,
+		edited,
+	}: {
+		/** The dialog element, for triggering programmatically (e.g. an edit action) */
+		dialog?: HTMLDialogElement;
+		/** The user the system is created for (used in create mode) */
+		userId?: string;
+		/** An existing system to edit. When set, the dialog operates in edit mode. */
+		system?: System;
+		/** Called with the newly created system (create mode) */
+		created?(system: System): unknown;
+		/** Called with the updated system (edit mode) */
+		edited?(system: System): unknown;
+	} = $props();
+
+	const types = SystemType.def.values;
+</script>
+
+<FormDialog
+	id={system ? undefined : 'system-init'}
+	bind:dialog
+	submitText={system ? text('sysadmin.SystemInitDialog.save') : text('sysadmin.SystemInitDialog.submit')}
+	submit={async raw => {
+		const init = SystemInit.parse(raw);
+		if (system) {
+			const updated = await fetchAPI('PATCH', 'sysadmin/systems/:id', init, system.id);
+			await edited?.(updated);
+		} else {
+			const created_ = await fetchAPI('PUT', 'users/:id/sysadmin/systems', init, userId!);
+			await created?.(created_);
+		}
+	}}
+>
+	<div>
+		<label for="name">{text('sysadmin.SystemInitDialog.name')}</label>
+		<input name="name" type="text" required value={system?.name ?? ''} />
+	</div>
+	<div>
+		<label for="hostname">{text('sysadmin.SystemInitDialog.hostname')}</label>
+		<input name="hostname" type="text" required value={system?.hostname ?? ''} />
+	</div>
+	<div>
+		<label for="type">{text('sysadmin.SystemInitDialog.type')}</label>
+		<select name="type" value={system?.type ?? 'server'}>
+			{#each types as type}
+				<option value={type}>{text(`sysadmin.system_type.${type}`)}</option>
+			{/each}
+		</select>
+	</div>
+</FormDialog>

package/lib/UserCard.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { fetchAPI, text } from '@axium/client';
+	import { contextMenu, type ContextMenuItem } from '@axium/client/attachments';
+	import { Icon, Popover } from '@axium/client/components';
+	import { copy } from '@axium/client/gui';
+	import { toastStatus } from '@axium/client/toast';
+	import type { SystemUser } from '@axium/sysadmin';
+	import UserInitDialog from './UserInitDialog.svelte';
+
+	let {
+		user = $bindable(),
+		edited,
+		deleted,
+	}: {
+		user: SystemUser;
+		/** Called with the updated user after an edit */
+		edited?(user: SystemUser): unknown;
+		/** Called after the user is deleted */
+		deleted?(user: SystemUser): unknown;
+	} = $props();
+
+	let editDialog = $state<HTMLDialogElement>();
+
+	const link = $derived(`/sysadmin/users/${user.id}`);
+
+	function remove() {
+		toastStatus(
+			fetchAPI('DELETE', 'sysadmin/users/:id', {}, user.id).then(() => deleted?.(user)),
+			text('sysadmin.UserCard.toast_deleted')
+		);
+	}
+
+	/** The actions shown in both the hover popover and the right-click context menu. */
+	const menuItems = (): ContextMenuItem[] => [
+		{ i: 'pen', text: text('sysadmin.UserCard.edit'), action: () => editDialog!.showModal() },
+		{ i: 'link-horizontal', text: text('sysadmin.UserCard.copy_link'), action: () => copy('text/plain', link) },
+		{ i: 'arrow-up-right-from-square', text: text('sysadmin.UserCard.open_new_tab'), action: () => window.open(link) },
+		{ i: 'trash', text: text('generic.delete'), danger: true, action: remove },
+	];
+</script>
+
+<div class="UserCard" {@attach contextMenu(menuItems)}>
+	<a class="link" href={link}>
+		<Icon i="user" class="icon" --size="2em" />
+		<div class="info">
+			<span class="name">{user.name}</span>
+			<span class="subtle username">{user.username}</span>
+		</div>
+	</a>
+
+	<Popover showToggle="hover">
+		{#each menuItems() as item}
+			<div class={['menu-item', item.danger && 'danger']} onclick={item.action}>
+				<Icon i={item.i!} />
+				<span>{item.text}</span>
+			</div>
+		{/each}
+	</Popover>
+</div>
+
+<UserInitDialog
+	bind:dialog={editDialog}
+	{user}
+	edited={updated => {
+		user = updated;
+		edited?.(updated);
+	}}
+/>
+
+<style>
+	.UserCard {
+		display: flex;
+		align-items: center;
+		gap: 0.5em;
+		padding: 1em;
+		border-radius: 0.5em;
+		background-color: var(--bg-alt);
+	}
+
+	.link {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+		flex: 1;
+		min-width: 0;
+		cursor: pointer;
+		text-decoration: none;
+		color: inherit;
+	}
+
+	.info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1em;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.name {
+		font-weight: bold;
+	}
+
+	.username {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

package/lib/UserInitDialog.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { fetchAPI, text } from '@axium/client';
+	import { FormDialog } from '@axium/client/components';
+	import { SystemUserInit, type SystemUser } from '@axium/sysadmin';
+
+	let {
+		dialog = $bindable(),
+		userId,
+		user,
+		created,
+		edited,
+	}: {
+		/** The dialog element, for triggering programmatically (e.g. an edit action) */
+		dialog?: HTMLDialogElement;
+		/** The user the system user is created for (used in create mode) */
+		userId?: string;
+		/** An existing system user to edit. When set, the dialog operates in edit mode. */
+		user?: SystemUser;
+		/** Called with the newly created system user (create mode) */
+		created?(user: SystemUser): unknown;
+		/** Called with the updated system user (edit mode) */
+		edited?(user: SystemUser): unknown;
+	} = $props();
+</script>
+
+<FormDialog
+	id={user ? undefined : 'system-user-init'}
+	bind:dialog
+	submitText={user ? text('sysadmin.UserInitDialog.save') : text('sysadmin.UserInitDialog.submit')}
+	submit={async raw => {
+		const init = SystemUserInit.parse(raw);
+		if (user) {
+			const updated = await fetchAPI('PATCH', 'sysadmin/users/:id', init, user.id);
+			await edited?.(updated);
+		} else {
+			const created_ = await fetchAPI('PUT', 'users/:id/sysadmin/users', init, userId!);
+			await created?.(created_);
+		}
+	}}
+>
+	<div>
+		<label for="name">{text('sysadmin.UserInitDialog.name')}</label>
+		<input name="name" type="text" required value={user?.name ?? ''} />
+	</div>
+	<div>
+		<label for="username">{text('sysadmin.UserInitDialog.username')}</label>
+		<input name="username" type="text" required value={user?.username ?? ''} />
+	</div>
+</FormDialog>

package/lib/index.ts

@@ -0,0 +1,4 @@
+export { default as SystemCard } from './SystemCard.svelte';
+export { default as SystemInitDialog } from './SystemInitDialog.svelte';
+export { default as UserCard } from './UserCard.svelte';
+export { default as UserInitDialog } from './UserInitDialog.svelte';

package/lib/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"extends": ["../tsconfig.json", "../.svelte-kit/tsconfig.json"],
+	"compilerOptions": {
+		"rootDir": "..",
+		"noEmit": true,
+		"module": "preserve",
+		"moduleResolution": "Bundler"
+	},
+	"include": ["**/*.svelte", "**/*.ts"],
+	"exclude": [],
+	"references": [{ "path": ".." }]
+}

package/locales/en.json

@@ -0,0 +1,79 @@
+{
+	"app_name": {
+		"sysadmin": "System Administration"
+	},
+	"sysadmin": {
+		"page_title": "System Administration",
+		"systems": "Systems",
+		"system_users": "System Users",
+		"view_all": "View all",
+		"no_systems": "No systems yet.",
+		"no_system_users": "No system users yet.",
+		"new_system": "Add System",
+		"new_system_user": "Add User",
+		"online": "Online",
+		"offline": "Offline",
+		"back_to_main": "Back to System Administration",
+		"back_to_systems": "Back to Systems",
+		"back_to_users": "Back to System Users",
+		"SystemInitDialog": {
+			"submit": "Add System",
+			"save": "Save",
+			"name": "Name",
+			"hostname": "Hostname",
+			"type": "Type"
+		},
+		"SystemCard": {
+			"edit": "Edit",
+			"copy_link": "Copy Link",
+			"open_new_tab": "Open in New Tab",
+			"toast_deleted": "System deleted"
+		},
+		"UserInitDialog": {
+			"submit": "Add User",
+			"save": "Save",
+			"name": "Name",
+			"username": "Username"
+		},
+		"UserCard": {
+			"edit": "Edit",
+			"copy_link": "Copy Link",
+			"open_new_tab": "Open in New Tab",
+			"toast_deleted": "User deleted"
+		},
+		"user": {
+			"page_title": "{name} — System Users"
+		},
+		"system_type": {
+			"server": "Server",
+			"pc": "PC",
+			"laptop": "Laptop"
+		},
+		"system": {
+			"page_title": "{name} — Systems",
+			"offline_notice": "This system is offline. Live information is unavailable.",
+			"loading_info": "Loading system information…",
+			"info_error": "Could not load system information.",
+			"refresh": "Refresh",
+			"hardware": "Hardware",
+			"cpu": "CPU",
+			"cpu_cores": "{count} cores",
+			"gpu": "Graphics",
+			"memory": "Memory",
+			"swap": "Swap",
+			"storage": "Storage",
+			"network": "Network",
+			"wireless": "Wireless",
+			"wired": "Wired",
+			"connected": "Connected",
+			"disconnected": "Disconnected",
+			"os": "Operating System",
+			"platform": "Platform",
+			"release": "Release",
+			"kernel": "Kernel",
+			"arch": "Architecture",
+			"uptime": "Uptime",
+			"usage": "{used} / {total}"
+		}
+	}
+}