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

add prettier config and format files site files

Browse Source
This commit is contained in:
Henry Dollman
2024-10-30 11:03:09 -04:00
parent 8827996553
commit 3505b215a2
75 changed files with 3096 additions and 3533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,18 +9,11 @@ import {
getCoreRowModel,
useReactTable,
Column,
} from '@tanstack/react-table'
} from "@tanstack/react-table"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button, buttonVariants } from '@/components/ui/button'
import { Button, buttonVariants } from "@/components/ui/button"
import {
DropdownMenu,
@@ -28,7 +21,7 @@ import {
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
} from "@/components/ui/dropdown-menu"
import {
AlertDialog,
@@ -40,9 +33,9 @@ import {
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
} from "@/components/ui/alert-dialog"
import { SystemRecord } from '@/types'
import { SystemRecord } from "@/types"
import {
MoreHorizontalIcon,
ArrowUpDownIcon,
@@ -55,15 +48,15 @@ import {
HardDriveIcon,
ServerIcon,
CpuIcon,
} from 'lucide-react'
import { useEffect, useMemo, useState } from 'react'
import { $hubVersion, $systems, pb } from '@/lib/stores'
import { useStore } from '@nanostores/react'
import { cn, copyToClipboard, decimalString, isReadOnlyUser } from '@/lib/utils'
import AlertsButton from '../alerts/alert-button'
import { navigate } from '../router'
import { EthernetIcon } from '../ui/icons'
import { useTranslation } from 'react-i18next'
} from "lucide-react"
import { useEffect, useMemo, useState } from "react"
import { $hubVersion, $systems, pb } from "@/lib/stores"
import { useStore } from "@nanostores/react"
import { cn, copyToClipboard, decimalString, isReadOnlyUser } from "@/lib/utils"
import AlertsButton from "../alerts/alert-button"
import { navigate } from "../router"
import { EthernetIcon } from "../ui/icons"
import { useTranslation } from "react-i18next"
function CellFormatter(info: CellContext<SystemRecord, unknown>) {
const val = info.getValue() as number
@@ -73,8 +66,8 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {
<span className="grow min-w-10 block bg-muted h-[1em] relative rounded-sm overflow-hidden">
<span
className={cn(
'absolute inset-0 w-full h-full origin-left',
(val < 65 && 'bg-green-500') || (val < 90 && 'bg-yellow-500') || 'bg-red-600'
"absolute inset-0 w-full h-full origin-left",
(val < 65 && "bg-green-500") || (val < 90 && "bg-yellow-500") || "bg-red-600"
)}
style={{ transform: `scalex(${val}%)` }}
></span>
@@ -83,18 +76,9 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {
)
}
function sortableHeader(
column: Column<SystemRecord, unknown>,
name: string,
Icon: any,
hideSortIcon = false
) {
function sortableHeader(column: Column<SystemRecord, unknown>, name: string, Icon: any, hideSortIcon = false) {
return (
<Button
variant="ghost"
className="h-9 px-3"
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
>
<Button variant="ghost" className="h-9 px-3" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
<Icon className="mr-2 h-4 w-4" />
{name}
{!hideSortIcon && <ArrowUpDownIcon className="ml-2 h-4 w-4" />}
@@ -112,7 +96,7 @@ export default function SystemsTable({ filter }: { filter?: string }) {
useEffect(() => {
if (filter !== undefined) {
table.getColumn('name')?.setFilterValue(filter)
table.getColumn("name")?.setFilterValue(filter)
}
}, [filter])
@@ -122,23 +106,23 @@ export default function SystemsTable({ filter }: { filter?: string }) {
// size: 200,
size: 200,
minSize: 0,
accessorKey: 'name',
accessorKey: "name",
cell: (info) => {
const { status } = info.row.original
return (
<span className="flex gap-0.5 items-center text-base md:pr-5">
<span
className={cn('w-2 h-2 left-0 rounded-full', {
'bg-green-500': status === 'up',
'bg-red-500': status === 'down',
'bg-primary/40': status === 'paused',
'bg-yellow-500': status === 'pending',
className={cn("w-2 h-2 left-0 rounded-full", {
"bg-green-500": status === "up",
"bg-red-500": status === "down",
"bg-primary/40": status === "paused",
"bg-yellow-500": status === "pending",
})}
style={{ marginBottom: '-1px' }}
style={{ marginBottom: "-1px" }}
></span>
<Button
data-nolink
variant={'ghost'}
variant={"ghost"}
className="text-primary/90 h-7 px-1.5 gap-1.5"
onClick={() => copyToClipboard(info.getValue() as string)}
>
@@ -148,46 +132,44 @@ export default function SystemsTable({ filter }: { filter?: string }) {
</span>
)
},
header: ({ column }) => sortableHeader(column, t('systems_table.system'), ServerIcon),
header: ({ column }) => sortableHeader(column, t("systems_table.system"), ServerIcon),
},
{
accessorKey: 'info.cpu',
accessorKey: "info.cpu",
invertSorting: true,
cell: CellFormatter,
header: ({ column }) => sortableHeader(column, t('systems_table.cpu'), CpuIcon),
header: ({ column }) => sortableHeader(column, t("systems_table.cpu"), CpuIcon),
},
{
accessorKey: 'info.mp',
accessorKey: "info.mp",
invertSorting: true,
cell: CellFormatter,
header: ({ column }) => sortableHeader(column, t('systems_table.memory'), MemoryStickIcon),
header: ({ column }) => sortableHeader(column, t("systems_table.memory"), MemoryStickIcon),
},
{
accessorKey: 'info.dp',
accessorKey: "info.dp",
invertSorting: true,
cell: CellFormatter,
header: ({ column }) => sortableHeader(column, t('systems_table.disk'), HardDriveIcon),
header: ({ column }) => sortableHeader(column, t("systems_table.disk"), HardDriveIcon),
},
{
accessorFn: (originalRow) => originalRow.info.b || 0,
id: 'n',
id: "n",
invertSorting: true,
size: 115,
header: ({ column }) => sortableHeader(column, t('systems_table.net'), EthernetIcon),
header: ({ column }) => sortableHeader(column, t("systems_table.net"), EthernetIcon),
cell: (info) => {
const val = info.getValue() as number
return (
<span className="tabular-nums whitespace-nowrap pl-1">
{decimalString(val, val >= 100 ? 1 : 2)} MB/s
</span>
<span className="tabular-nums whitespace-nowrap pl-1">{decimalString(val, val >= 100 ? 1 : 2)} MB/s</span>
)
},
},
{
accessorKey: 'info.v',
accessorKey: "info.v",
invertSorting: true,
size: 50,
header: ({ column }) => sortableHeader(column, t('systems_table.agent'), WifiIcon, true),
header: ({ column }) => sortableHeader(column, t("systems_table.agent"), WifiIcon, true),
cell: (info) => {
const version = info.getValue() as string
if (!version || !hubVersion) {
@@ -196,11 +178,8 @@ export default function SystemsTable({ filter }: { filter?: string }) {
return (
<span className="flex gap-2 items-center md:pr-5 tabular-nums pl-1">
<span
className={cn(
'w-2 h-2 left-0 rounded-full',
version === hubVersion ? 'bg-green-500' : 'bg-yellow-500'
)}
style={{ marginBottom: '-1px' }}
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>
@@ -208,70 +187,71 @@ export default function SystemsTable({ filter }: { filter?: string }) {
},
},
{
id: 'actions',
id: "actions",
size: 120,
// minSize: 0,
cell: ({ row }) => {
const { id, name, status, host } = row.original
return (
<div className={'flex justify-end items-center gap-1'}>
<div className={"flex justify-end items-center gap-1"}>
<AlertsButton system={row.original} />
<AlertDialog>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size={'icon'} data-nolink>
<span className="sr-only">{t('systems_table.open_menu')}</span>
<Button variant="ghost" size={"icon"} data-nolink>
<span className="sr-only">{t("systems_table.open_menu")}</span>
<MoreHorizontalIcon className="w-5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
className={cn(isReadOnlyUser() && 'hidden')}
className={cn(isReadOnlyUser() && "hidden")}
onClick={() => {
pb.collection('systems').update(id, {
status: status === 'paused' ? 'pending' : 'paused',
pb.collection("systems").update(id, {
status: status === "paused" ? "pending" : "paused",
})
}}
>
{status === 'paused' ? (
{status === "paused" ? (
<>
<PlayCircleIcon className="mr-2.5 h-4 w-4" />
{t('systems_table.resume')}
{t("systems_table.resume")}
</>
) : (
<>
<PauseCircleIcon className="mr-2.5 h-4 w-4" />
{t('systems_table.pause')}
{t("systems_table.pause")}
</>
)}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => copyToClipboard(host)}>
<CopyIcon className="mr-2.5 h-4 w-4" />
{t('systems_table.copy_host')}
{t("systems_table.copy_host")}
</DropdownMenuItem>
<DropdownMenuSeparator className={cn(isReadOnlyUser() && 'hidden')} />
<DropdownMenuSeparator className={cn(isReadOnlyUser() && "hidden")} />
<AlertDialogTrigger asChild>
<DropdownMenuItem className={cn(isReadOnlyUser() && 'hidden')}>
<DropdownMenuItem className={cn(isReadOnlyUser() && "hidden")}>
<Trash2Icon className="mr-2.5 h-4 w-4" />
{t('systems_table.delete')}
{t("systems_table.delete")}
</DropdownMenuItem>
</AlertDialogTrigger>
</DropdownMenuContent>
</DropdownMenu>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t('systems_table.delete_confirm', { name })}</AlertDialogTitle>
<AlertDialogTitle>{t("systems_table.delete_confirm", { name })}</AlertDialogTitle>
<AlertDialogDescription>
{t('systems_table.delete_confirm_des_1')} <code className="bg-muted rounded-sm px-1">{name}</code> {t('systems_table.delete_confirm_des_2')}
{t("systems_table.delete_confirm_des_1")} <code className="bg-muted rounded-sm px-1">{name}</code>{" "}
{t("systems_table.delete_confirm_des_2")}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
<AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
<AlertDialogAction
className={cn(buttonVariants({ variant: 'destructive' }))}
onClick={() => pb.collection('systems').delete(id)}
className={cn(buttonVariants({ variant: "destructive" }))}
onClick={() => pb.collection("systems").delete(id)}
>
{t('continue')}
{t("continue")}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
@@ -311,9 +291,7 @@ export default function SystemsTable({ filter }: { filter?: string }) {
{headerGroup.headers.map((header) => {
return (
<TableHead className="px-2" key={header.id}>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
</TableHead>
)
})}
@@ -325,13 +303,13 @@ export default function SystemsTable({ filter }: { filter?: string }) {
table.getRowModel().rows.map((row) => (
<TableRow
key={row.original.id}
data-state={row.getIsSelected() && 'selected'}
className={cn('cursor-pointer transition-opacity', {
'opacity-50': row.original.status === 'paused',
data-state={row.getIsSelected() && "selected"}
className={cn("cursor-pointer transition-opacity", {
"opacity-50": row.original.status === "paused",
})}
onClick={(e) => {
const target = e.target as HTMLElement
if (!target.closest('[data-nolink]') && e.currentTarget.contains(target)) {
if (!target.closest("[data-nolink]") && e.currentTarget.contains(target)) {
navigate(`/system/${encodeURIComponent(row.original.name)}`)
}
}}
@@ -340,12 +318,9 @@ export default function SystemsTable({ filter }: { filter?: string }) {
<TableCell
key={cell.id}
style={{
width:
cell.column.getSize() === Number.MAX_SAFE_INTEGER
? 'auto'
: cell.column.getSize(),
width: cell.column.getSize() === Number.MAX_SAFE_INTEGER ? "auto" : cell.column.getSize(),
}}
className={cn('overflow-hidden relative', data.length > 10 ? 'py-2' : 'py-2.5')}
className={cn("overflow-hidden relative", data.length > 10 ? "py-2" : "py-2.5")}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
@@ -355,7 +330,7 @@ export default function SystemsTable({ filter }: { filter?: string }) {
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
{t('systems_table.no_systems_found')}
{t("systems_table.no_systems_found")}
</TableCell>
</TableRow>
)}