jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-18 03:06:16 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

web ui design updates

Browse Source
This commit is contained in:
Henry Dollman
2024-08-21 15:06:33 -04:00
parent 55863f849c
commit 5278805d79
6 changed files with 110 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
beszel/site/src/components/routes/home.tsx
View File

@@ -1,20 +1,25 @@
import { Suspense, lazy, useEffect } from 'react'
import { Suspense, lazy, useEffect, useState } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
import { $alerts, $hubVersion, $systems, pb } from '@/lib/stores'
import { useStore } from '@nanostores/react'
import { GithubIcon } from 'lucide-react'
import { Separator } from '../ui/separator'
import { updateRecordList } from '@/lib/utils'
import { updateRecordList, updateSystemList } from '@/lib/utils'
import { AlertRecord, SystemRecord } from '@/types'
import { Input } from '../ui/input'
const SystemsTable = lazy(() => import('../systems-table/systems-table'))
export default function () {
const hubVersion = useStore($hubVersion)
const [filter, setFilter] = useState<string>()
useEffect(() => {
document.title = 'Dashboard / Beszel'
// make sure we have the latest list of systems
updateSystemList()
// subscribe to real time updates for systems / alerts
pb.collection<SystemRecord>('systems').subscribe('*', (e) => {
updateRecordList(e, $systems)
@@ -31,19 +36,29 @@ export default function () {
return (
<>
<Card>
<CardHeader className="pb-2 md:pb-5 px-4 sm:px-7 max-sm:pt-5">
<CardTitle className="mb-1.5">All Systems</CardTitle>
<CardDescription>
Updated in real time. Press{' '}
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
<span className="text-xs">⌘</span>K
</kbd>{' '}
to open the command palette.
</CardDescription>
<CardHeader className="pb-5 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
<div className="grid md:flex gap-3 w-full items-end">
<div className="px-2 sm:px-1">
<CardTitle className="mb-2.5">All Systems</CardTitle>
<CardDescription>
Updated in real time. Press{' '}
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
<span className="text-xs">⌘</span>K
</kbd>{' '}
to open the command palette.
</CardDescription>
</div>
<Input
// @ts-ignore
placeholder="Filter..."
onChange={(e) => setFilter(e.target.value)}
className="w-full md:w-56 lg:w-80 ml-auto"
/>
</div>
</CardHeader>
<CardContent className="max-sm:p-2">
<Suspense>
<SystemsTable />
<SystemsTable filter={filter} />
</Suspense>
</CardContent>
</Card>