better mock data & make machines reassignanle

src/lib/components/data/machine/EditMachine.svelte

@@ -8,12 +8,17 @@
 
 	import * as Form from '$lib/components/form';
 
-	import type { Machine } from '$lib/api';
+	import { User, type Machine } from '$lib/api';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import SelectUser from '../user/SelectUser.svelte';
+	import { writable } from 'svelte/store';
 
 	export let machine: Machine;
+	export let users: User[] | undefined;
 
 	const schema = z.object({
-		name: z.string()
+		name: z.string(),
+		assigned_user: z.string()
 	});
 
 	const form = superForm(defaults(zod(schema)), {
@@ -30,9 +35,11 @@
 
 	const { constraints, form: formData } = form;
 
-	formData.set({ name: machine.givenName || '' });
+	function reset() {
+		formData.set({ name: machine.givenName || '', assigned_user: machine.user?.name || '' });
+	}
 
-	function reset() {}
+	reset();
 </script>
 
 <Dialog.Root>
@@ -45,13 +52,20 @@
 			<Dialog.Title>Edit machine</Dialog.Title>
 		</Dialog.Header>
 
-		<Form.Root {form} {reset} submitText="Save">
+		<Form.Root {form} {reset} submitText="Save" hasRequired>
 			<Form.Field {form} name="name">
 				<Form.Control let:attrs>
 					<Form.Label for={attrs.id}>Given name</Form.Label>
 					<Input {...attrs} {...$constraints.name || {}} bind:value={$formData.name} />
 				</Form.Control>
 			</Form.Field>
+
+			<Form.Field {form} name="assigned_user" class="required">
+				<Form.Control let:attrs>
+					<Form.Label for={attrs.id}>Assigned user</Form.Label>
+					<SelectUser {users} bind:selected={$formData.assigned_user} />
+				</Form.Control>
+			</Form.Field>
 		</Form.Root>
 	</Dialog.Content>
 </Dialog.Root>

src/lib/components/data/machine/MachineActions.svelte

@@ -7,13 +7,15 @@
 	import Telescope from 'lucide-svelte/icons/telescope';
 	import Trash from 'lucide-svelte/icons/trash-2';
 
-	import type { Machine } from '$lib/api';
+	import type { Machine, User } from '$lib/api';
 
 	import DeleteMachine from './DeleteMachine.svelte';
 	import EditMachine from './EditMachine.svelte';
 	import ExpireSession from './ExpireSession.svelte';
+	import { isExpired } from '$lib/utils/time';
 
 	export let machine: Machine;
+	export let users: User[] | undefined;
 
 	const dispatch = createEventDispatcher<{ close: undefined; focus: undefined }>();
 </script>
@@ -37,7 +39,7 @@
 </li>
 
 <li>
-	<EditMachine {machine}>
+	<EditMachine {machine} {users}>
 		<svelte:fragment slot="trigger" let:builder>
 			<button {...builder} use:builder.action>
 				<MonitorCog />
@@ -50,7 +52,11 @@
 <li class="destructive">
 	<ExpireSession {machine} on:submit={() => dispatch('close')}>
 		<svelte:fragment slot="trigger" let:builder>
-			<button {...builder} use:builder.action>
+			<button
+				{...builder}
+				use:builder.action
+				disabled={!machine.expiry || isExpired(machine.expiry)}
+			>
 				<ShieldOff />
 				<span>Expire session</span>
 			</button>

src/lib/components/data/machine/MachineInfo.svelte

@@ -167,7 +167,12 @@
 </Sheet.Header>
 
 <ul class="menu">
-	<MachineActions {machine} on:close={() => dispatch('close')} on:focus={() => dispatch('focus')} />
+	<MachineActions
+		{machine}
+		{users}
+		on:close={() => dispatch('close')}
+		on:focus={() => dispatch('focus')}
+	/>
 </ul>
 
 <!-- <div style="height: 1px;"></div> -->

src/lib/components/data/user/SelectUser.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Selected } from 'bits-ui';
+	import { writable } from 'svelte/store';
+
+	import * as Select from '$lib/components/ui/select';
+
+	import type { User } from '$lib/api';
+
+	export let users: User[] | undefined;
+	export let selected: string | undefined;
+
+	const sel = writable<Selected<string | undefined>>({ value: selected, label: selected });
+
+	sel.subscribe(({ value }) => (selected = value));
+</script>
+
+<Select.Root bind:selected={$sel} required>
+	<Select.Trigger>
+		<Select.Value />
+	</Select.Trigger>
+
+	<Select.Content class="!mt-0">
+		<Select.Group>
+			{#each users || [] as user}
+				<Select.Item value={user.name}>{user.name}</Select.Item>
+			{/each}
+		</Select.Group>
+	</Select.Content>
+</Select.Root>

src/lib/mock/handlers.ts

@@ -9,7 +9,7 @@ const MAX_ARRAY_LENGTH = 5;
 const MIN_ARRAY_LENGTH = 0;
 
 const usersLength = faker.number.int({ min: 3, max: 8 });
-const machinesLength = faker.number.int({ min: 10, max: 25 });
+const machinesLength = faker.number.int({ min: 10, max: 30 });
 
 const simulateApiError: boolean = false;
 
@@ -145,8 +145,10 @@ export const handlers = [
 		path: '/api/v1/node',
 		method: 'get',
 		response: {
-			nodes: randomSizedArray(
-				(id) => ({
+			nodes: randomSizedArray((id) => {
+				const userId = faker.number.int({ min: 0, max: usersLength - 1 });
+
+				return {
 					id: String(id),
 					name: faker.person.lastName(),
 					givenName: faker.person.lastName(),
@@ -162,12 +164,15 @@ export const handlers = [
 					forcedTags: [],
 					validTags: [],
 					user: {
-						id: faker.number.octal({ min: 1, max: usersLength - 1 })
+						id: String(userId),
+						name: usernames[userId]
 					},
-					ipAddresses: [faker.internet.ipv4(), faker.internet.ipv6()]
-				}),
-				machinesLength
-			)
+					ipAddresses: [
+						`100.64.${Math.trunc((id + 1) / 255)}.${(id + 1) % 255}`,
+						'fd7a:115c:a1e0::' + (id + 1).toString(16)
+					]
+				};
+			}, machinesLength)
 		}
 	}),
 	handler({

src/lib/utils/networkGraph.ts

@@ -24,8 +24,6 @@ import {
 	type V1User,
 	type V1Node
 } from '$lib/api';
-import { get } from 'svelte/store';
-import { mode } from 'mode-watcher';
 
 const exitRoutes = ['0.0.0.0/0', '::/0'];
 

src/routes/(app)/+page.svelte

@@ -195,6 +195,7 @@
 		{#key $selectedNode}
 			<MachineActions
 				machine={$selectedNode}
+				users={data.users}
 				on:close={nodeActions.close}
 				on:focus={() => {
 					focusOnNode(graph, $selectedNode);