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

move gh button + update agent display in table

Browse Source
This commit is contained in:
Henry Dollman
2024-08-20 14:04:09 -04:00
parent d053f16058
commit 87ab4961fd
8 changed files with 105 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
beszel/site/src/components/add-system.tsx
View File

@@ -14,7 +14,7 @@ import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { $publicKey, pb } from '@/lib/stores'
import { Copy, Plus } from 'lucide-react'
import { useState, useRef, MutableRefObject, useEffect } from 'react'
import { useState, useRef, MutableRefObject } from 'react'
import { useStore } from '@nanostores/react'
import { copyToClipboard } from '@/lib/utils'
@@ -38,16 +38,6 @@ export function AddSystemButton() {
# FILESYSTEM: /dev/sda1 # set to the correct filesystem for disk I/O stats`)
}
useEffect(() => {
if (publicKey || !open) {
return
}
// get public key
pb.send('/api/beszel/getkey', {}).then(({ key }) => {
$publicKey.set(key)
})
}, [open])
async function handleSubmit(e: SubmitEvent) {
e.preventDefault()
const formData = new FormData(e.target as HTMLFormElement)

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

@@ -1,30 +1,57 @@
import { Suspense, lazy, useEffect } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
import { $hubVersion } from '@/lib/stores'
import { useStore } from '@nanostores/react'
import { GithubIcon } from 'lucide-react'
import { Separator } from '../ui/separator'
const SystemsTable = lazy(() => import('../systems-table/systems-table'))
export default function () {
const hubVersion = useStore($hubVersion)
useEffect(() => {
document.title = 'Dashboard / Beszel'
}, [])
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>
<CardContent className="max-sm:p-2">
<Suspense>
<SystemsTable />
</Suspense>
</CardContent>
</Card>
<>
<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>
<CardContent className="max-sm:p-2">
<Suspense>
<SystemsTable />
</Suspense>
</CardContent>
</Card>
{hubVersion && (
<div className="flex gap-1.5 justify-end items-center pr-3 sm:pr-7 mt-3.5 text-xs opacity-80">
<a
href="https://github.com/henrygd/beszel"
target="_blank"
className="flex items-center gap-0.5 text-muted-foreground hover:text-foreground duration-75"
>
<GithubIcon className="h-3 w-3" /> GitHub
</a>
<Separator orientation="vertical" className="h-3 bg-muted-foreground" />
<a
href="https://github.com/henrygd/beszel/releases"
target="_blank"
className="text-muted-foreground hover:text-foreground duration-75"
>
Beszel {hubVersion}
</a>
</div>
)}
</>
)
}

45
beszel/site/src/components/systems-table/systems-table.tsx
View File

@@ -55,10 +55,10 @@ import {
PauseCircleIcon,
PlayCircleIcon,
Trash2Icon,
Wifi,
WifiIcon,
} from 'lucide-react'
import { useMemo, useState } from 'react'
import { $systems, pb } from '@/lib/stores'
import { $hubVersion, $systems, pb } from '@/lib/stores'
import { useStore } from '@nanostores/react'
import { AddSystemButton } from '../add-system'
import { cn, copyToClipboard, isReadOnlyUser } from '@/lib/utils'
@@ -83,7 +83,12 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {
)
}
function sortableHeader(column: Column<SystemRecord, unknown>, name: string, Icon: any) {
function sortableHeader(
column: Column<SystemRecord, unknown>,
name: string,
Icon: any,
hideSortIcon = false
) {
return (
<Button
variant="ghost"
@@ -92,13 +97,14 @@ function sortableHeader(column: Column<SystemRecord, unknown>, name: string, Ico
>
<Icon className="mr-2 h-4 w-4" />
{name}
<ArrowUpDown className="ml-2 h-4 w-4" />
{!hideSortIcon && <ArrowUpDown className="ml-2 h-4 w-4" />}
</Button>
)
}
export default function SystemsTable() {
const data = useStore($systems)
const hubVersion = useStore($hubVersion)
const [sorting, setSorting] = useState<SortingState>([])
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
@@ -136,14 +142,6 @@ export default function SystemsTable() {
},
header: ({ column }) => sortableHeader(column, 'System', Server),
},
{
accessorKey: 'info.v',
cell: (info) => {
return(
<div>{info.getValue() as string}</div>)
},
header: ({ column }) => sortableHeader(column, 'Version', Wifi),
},
{
accessorKey: 'info.cpu',
cell: CellFormatter,
@@ -159,6 +157,29 @@ export default function SystemsTable() {
cell: CellFormatter,
header: ({ column }) => sortableHeader(column, 'Disk', HardDrive),
},
{
accessorKey: 'info.v',
size: 50,
cell: (info) => {
const version = info.getValue() as string
if (!version || !hubVersion) {
return null
}
return (
<span className="flex gap-2 items-center md:pr-5 tabular-nums pl-1.5">
<span
className={cn(
'w-2 h-2 left-0 rounded-full',
version === hubVersion ? 'bg-green-500' : 'bg-yellow-500'
)}
style={{ marginBottom: '-1px' }}
></span>
<span>{info.getValue() as string}</span>
</span>
)
},
header: ({ column }) => sortableHeader(column, 'Agent', WifiIcon, true),
},
{
id: 'actions',
size: 120,