67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
/* eslint-disable unicorn/filename-case */
|
|
import { ClipboardIcon, UserIcon } from '@heroicons/react/24/outline'
|
|
import { type LoaderFunctionArgs } from '@remix-run/node'
|
|
import { useLoaderData } from '@remix-run/react'
|
|
import { toast } from 'react-hot-toast/headless'
|
|
|
|
import Attribute from '~/components/Attribute'
|
|
import StatusCircle from '~/components/StatusCircle'
|
|
import { type Machine, type User } 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')!)
|
|
|
|
const users = new Map<string, Machine[]>()
|
|
for (const machine of data.nodes) {
|
|
const { user } = machine
|
|
if (!users.has(user.id)) {
|
|
users.set(user.id, [])
|
|
}
|
|
|
|
users.get(user.id)?.push(machine)
|
|
}
|
|
|
|
return [...users.values()].map(machines => {
|
|
const { user } = machines[0]
|
|
|
|
return {
|
|
...user,
|
|
machines
|
|
}
|
|
})
|
|
}
|
|
|
|
export default function Page() {
|
|
const data = useLoaderData<typeof loader>()
|
|
useLiveData({ interval: 3000 })
|
|
|
|
return (
|
|
<div className='grid grid-cols-2 gap-4 auto-rows-min'>
|
|
{data.map(user => (
|
|
<div key={user.id} className='border rounded-lg p-4'>
|
|
<div className='flex items-center gap-4'>
|
|
<UserIcon className='w-6 h-6'/>
|
|
<span className='text-lg font-mono'>
|
|
{user.name}
|
|
</span>
|
|
</div>
|
|
<div className='py-4'>
|
|
{user.machines.map(machine => (
|
|
<div key={machine.id} className='flex items-center w-full gap-4'>
|
|
<StatusCircle isOnline={machine.online} className='w-4 h-4 px-1 w-fit'/>
|
|
<Attribute name={`Node ${machine.id}`} value={machine.givenName}/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|