chore: reorganize machines page to prep for routing data

This commit is contained in:
Aarnav Tale 2024-10-13 00:32:21 -04:00
parent 447a31f91e
commit 4214e14ba8
No known key found for this signature in database
3 changed files with 20 additions and 6 deletions

View File

@ -13,8 +13,8 @@ import { pull } from '~/utils/headscale'
import { getSession } from '~/utils/sessions'
import { useLiveData } from '~/utils/useLiveData'
import { menuAction } from './_data.machines._index/action'
import MenuOptions from './_data.machines._index/menu'
import { menuAction } from '../_data.machines._index/action'
import MenuOptions from '../_data.machines._index/menu'
export async function loader({ request, params }: LoaderFunctionArgs) {
const session = await getSession(request.headers.get('Cookie'))

View File

@ -1,17 +1,18 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { InfoIcon } from '@primer/octicons-react'
import { type ActionFunctionArgs, type LoaderFunctionArgs } from '@remix-run/node'
import { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { Button, Tooltip, TooltipTrigger } from 'react-aria-components'
import Code from '~/components/Code'
import { type Machine, type Route, User } from '~/types'
import Link from '~/components/Link'
import { cn } from '~/utils/cn'
import { loadContext } from '~/utils/config/headplane'
import { loadConfig } from '~/utils/config/headscale'
import { pull } from '~/utils/headscale'
import { getSession } from '~/utils/sessions'
import { useLiveData } from '~/utils/useLiveData'
import type { Machine, Route, User } from '~/types'
import { menuAction } from './action'
import MachineRow from './machine'
@ -58,8 +59,20 @@ export default function Page() {
return (
<>
<div className="flex justify-between items-center">
<h1 className="text-2xl font-medium mb-4">Machines</h1>
<div className="flex justify-between items-center mb-8">
<div className="flex flex-col w-2/3">
<h1 className='text-2xl font-medium mb-4'>Machines</h1>
<p className='text-gray-700 dark:text-gray-300'>
Manage the devices connected to your Tailnet.
{' '}
<Link
to="https://tailscale.com/kb/1372/manage-devices"
name="Tailscale Manage Devices Documentation"
>
Learn more
</Link>
</p>
</div>
<NewMachine server={data.server} users={data.users} />
</div>
<table className="table-auto w-full rounded-lg">

View File

@ -110,6 +110,7 @@ export default function Page() {
const { keys, users, server } = useLoaderData<typeof loader>()
const [user, setUser] = useState('All')
const [status, setStatus] = useState('Active')
useLiveData({ interval: 3000 })
const filteredKeys = keys.filter(key => {
if (user !== 'All' && key.user !== user) {