feat: add machine info page

2026-09-03 02:38:14 +00:00 · 2024-03-26 09:28:52 -04:00
parent b8498a9db3
commit 3b1f0ae6f8
5 changed files with 162 additions and 16 deletions
@@ -0,0 +1,85 @@
+/* eslint-disable unicorn/filename-case */
+import { ClipboardIcon } from '@heroicons/react/24/outline'
+import { type LoaderFunctionArgs } from '@remix-run/node'
+import { Link, useLoaderData } from '@remix-run/react'
+import clsx from 'clsx'
+import { toast } from 'react-hot-toast/headless'
+
+import StatusCircle from '~/components/StatusCircle'
+import { type Machine } from '~/types'
+import { pull } from '~/utils/headscale'
+import { getSession } from '~/utils/sessions'
+import { useLiveData } from '~/utils/useLiveData'
+
+export async function loader({ request }: LoaderFunctionArgs) {
+	const session = await getSession(request.headers.get('Cookie'))
+
+	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+	const data = await pull<{ nodes: Machine[] }>('v1/node', session.get('hsApiKey')!)
+	return data.nodes
+}
+
+export default function Page() {
+	const data = useLoaderData<typeof loader>()
+	useLiveData({ interval: 3000 })
+
+	return (
+		<table className='table-auto w-full rounded-lg'>
+			<thead>
+				<tr className='text-left'>
+					<th className='pl-4'>Name</th>
+					<th>IP Addresses</th>
+					<th>Last Seen</th>
+				</tr>
+			</thead>
+			<tbody className='divide-y divide-zinc-200 dark:divide-zinc-700'>
+				{data.map(machine => (
+					<tr key={machine.id} className='hover:bg-zinc-100 dark:hover:bg-zinc-800'>
+						<td className='pt-2 pb-4 pl-4'>
+							<Link to={`/machines/${machine.id}`}>
+								<h1>{machine.givenName}</h1>
+								<span
+									className='text-sm font-mono text-gray-500 dark:text-gray-400'
+								>{machine.name}
+								</span
+								>
+							</Link>
+						</td>
+						<td className='pt-2 pb-4 font-mono text-gray-600 dark:text-gray-300'>
+							{machine.ipAddresses.map((ip, index) => (
+								<button
+									key={ip}
+									type='button'
+									className='flex items-center gap-x-1 w-full'
+									onClick={async () => {
+										await navigator.clipboard.writeText(ip)
+										toast('Copied IP address to clipboard')
+									}}
+								>
+									<span className={clsx(index === 0 ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 dark:text-gray-500')}>
+										{ip}
+									</span>
+									<ClipboardIcon className='text-gray-400 dark:text-gray-500 w-4 h-4'/>
+								</button>
+							))}
+						</td>
+						<td>
+							<span
+								className='flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400'
+							>
+								<StatusCircle isOnline={machine.online} className='w-4 h-4'/>
+								<p>
+									{machine.online
+										? 'Connected'
+										: new Date(
+											machine.lastSeen
+										).toLocaleString()}
+								</p>
+							</span>
+						</td>
+					</tr>
+				))}
+			</tbody>
+		</table>
+	)
+}