web/src/lib/JoinHost.svelte

Ref: main v0.0.5   Size: 2.2 KiB   History

<script lang="ts">
	// The enrolment recipe for one join token. The token is the same word on
	// every platform; nothing else about joining is, so the flow asks which
	// machine this is rather than printing one recipe and hoping — the rules
	// themselves live in fleet.svelte.ts, next to the release they describe.
	import { HOST_PLATFORMS, hostBundle, joinCommands, type HostPlatform } from '$lib/fleet.svelte';

	let { blob, version }: { blob: string; version: string } = $props();

	// Linux amd64 leads because most hosts are one, and because the server's own
	// box — the first host of most fleets — is whatever the server runs on.
	let platform = $state<HostPlatform>('linux/amd64');
	const mac = $derived(platform === 'darwin/arm64');
	const bundle = $derived(hostBundle(platform, version));
	const commands = $derived(joinCommands(platform, version, blob));
</script>

<div class="join">
	<label>
		Host platform
		<select bind:value={platform}>
			{#each HOST_PLATFORMS as p (p.id)}
				<option value={p.id}>{p.label}</option>
			{/each}
		</select>
	</label>

	<p>
		Run these on the new host.
		{#if mac}
			<code>{bundle.file}</code> is the macOS host bundle: the agent and its LaunchAgent installer, no
			server. Apple silicon only, and nothing here needs <code>sudo</code>.
		{:else}
			<code>{bundle.file}</code> is the Linux host bundle. It is named for the
			<code>eitri-server</code> it also carries; a box that only runs VMs installs the
			<code>eitri-agent</code> inside it and nothing else.
		{/if}
	</p>

	<div class="enroll">
		{#each commands as c (c)}
			<code>{c}</code>
		{/each}
	</div>
</div>

<style>
	/* Top margin only: this sits under a line of prose in both callers, and the
	   box below it is the last thing in the onboarding card. */
	.join {
		margin-top: 0.5em;
	}
	label {
		display: flex;
		align-items: center;
		gap: 0.75em;
	}
	.join p {
		margin: 0.5em 0;
	}
	/* One command per line, unwrapped: a join blob is one long word and breaking
	   it mid-token would be a command nobody can paste. */
	.enroll {
		border: 1px solid var(--hairline);
		padding: 1em;
		overflow-x: auto;
	}
	.enroll code {
		display: block;
		word-break: break-all;
	}
</style>