mirror of
https://github.com/henrygd/beszel.git
synced 2025-12-17 02:36:17 +01:00
659 lines
20 KiB
Go
659 lines
20 KiB
Go
import {
|
|
CellContext,
|
|
ColumnDef,
|
|
ColumnFiltersState,
|
|
getFilteredRowModel,
|
|
SortingState,
|
|
getSortedRowModel,
|
|
flexRender,
|
|
VisibilityState,
|
|
getCoreRowModel,
|
|
useReactTable,
|
|
HeaderContext,
|
|
} from "@tanstack/react-table"
|
|
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
|
|
import { Button, buttonVariants } from "@/components/ui/button"
|
|
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog"
|
|
|
|
import { SystemRecord } from "@/types"
|
|
import {
|
|
MoreHorizontalIcon,
|
|
ArrowUpDownIcon,
|
|
MemoryStickIcon,
|
|
CopyIcon,
|
|
PauseCircleIcon,
|
|
PlayCircleIcon,
|
|
Trash2Icon,
|
|
WifiIcon,
|
|
HardDriveIcon,
|
|
ServerIcon,
|
|
CpuIcon,
|
|
LayoutGridIcon,
|
|
LayoutListIcon,
|
|
ArrowDownIcon,
|
|
ArrowUpIcon,
|
|
Settings2Icon,
|
|
EyeIcon,
|
|
PenBoxIcon,
|
|
} from "lucide-react"
|
|
import { memo, useEffect, useMemo, useRef, useState } from "react"
|
|
import { $hubVersion, $systems, pb } from "@/lib/stores"
|
|
import { useStore } from "@nanostores/react"
|
|
import { cn, copyToClipboard, decimalString, isReadOnlyUser, useLocalStorage } from "@/lib/utils"
|
|
import AlertsButton from "../alerts/alert-button"
|
|
import { $router, Link, navigate } from "../router"
|
|
import { EthernetIcon, GpuIcon, ThermometerIcon } from "../ui/icons"
|
|
import { Trans, t } from "@lingui/macro"
|
|
import { useLingui } from "@lingui/react"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
|
|
import { Input } from "../ui/input"
|
|
import { ClassValue } from "clsx"
|
|
import { getPagePath } from "@nanostores/router"
|
|
import { SystemDialog } from "../add-system"
|
|
import { Dialog } from "../ui/dialog"
|
|
|
|
type ViewMode = "table" | "grid"
|
|
|
|
function CellFormatter(info: CellContext<SystemRecord, unknown>) {
|
|
const val = (info.getValue() as number) || 0
|
|
return (
|
|
<div className="flex gap-2 items-center tabular-nums tracking-tight">
|
|
<span className="min-w-[3.3em]">{decimalString(val, 1)}%</span>
|
|
<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",
|
|
(info.row.original.status !== "up" && "bg-primary/30") ||
|
|
(val < 65 && "bg-green-500") ||
|
|
(val < 90 && "bg-yellow-500") ||
|
|
"bg-red-600"
|
|
)}
|
|
style={{
|
|
transform: `scalex(${val / 100})`,
|
|
}}
|
|
></span>
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function sortableHeader(context: HeaderContext<SystemRecord, unknown>, hideSortIcon = false) {
|
|
const { column } = context
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
className="h-9 px-3 flex"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
>
|
|
{/* @ts-ignore */}
|
|
{column.columnDef?.icon && <column.columnDef.icon className="me-2 size-4" />}
|
|
{column.id}
|
|
{!hideSortIcon && <ArrowUpDownIcon className="ms-2 size-4" />}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
export default function SystemsTable() {
|
|
const data = useStore($systems)
|
|
const hubVersion = useStore($hubVersion)
|
|
const [filter, setFilter] = useState<string>()
|
|
const [sorting, setSorting] = useState<SortingState>([{ id: t`System`, desc: false }])
|
|
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
|
|
const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>("cols", {})
|
|
const [viewMode, setViewMode] = useLocalStorage<ViewMode>("viewMode", window.innerWidth > 1024 ? "table" : "grid")
|
|
const { i18n } = useLingui()
|
|
|
|
useEffect(() => {
|
|
if (filter !== undefined) {
|
|
table.getColumn(t`System`)?.setFilterValue(filter)
|
|
}
|
|
}, [filter])
|
|
|
|
const columns = useMemo(() => {
|
|
return [
|
|
{
|
|
// size: 200,
|
|
size: 200,
|
|
minSize: 0,
|
|
accessorKey: "name",
|
|
id: t`System`,
|
|
enableHiding: false,
|
|
icon: ServerIcon,
|
|
cell: (info) => (
|
|
<span className="flex gap-0.5 items-center text-base md:pe-5">
|
|
<IndicatorDot system={info.row.original} />
|
|
<Button
|
|
data-nolink
|
|
variant={"ghost"}
|
|
className="text-primary/90 h-7 px-1.5 gap-1.5"
|
|
onClick={() => copyToClipboard(info.getValue() as string)}
|
|
>
|
|
{info.getValue() as string}
|
|
<CopyIcon className="h-2.5 w-2.5" />
|
|
</Button>
|
|
</span>
|
|
),
|
|
header: sortableHeader,
|
|
},
|
|
{
|
|
accessorKey: "info.cpu",
|
|
id: t`CPU`,
|
|
invertSorting: true,
|
|
cell: CellFormatter,
|
|
icon: CpuIcon,
|
|
header: sortableHeader,
|
|
},
|
|
{
|
|
accessorKey: "info.mp",
|
|
id: t`Memory`,
|
|
invertSorting: true,
|
|
cell: CellFormatter,
|
|
icon: MemoryStickIcon,
|
|
header: sortableHeader,
|
|
},
|
|
{
|
|
accessorKey: "info.dp",
|
|
id: t`Disk`,
|
|
invertSorting: true,
|
|
cell: CellFormatter,
|
|
icon: HardDriveIcon,
|
|
header: sortableHeader,
|
|
},
|
|
{
|
|
accessorFn: (originalRow) => originalRow.info.g,
|
|
id: "GPU",
|
|
invertSorting: true,
|
|
sortUndefined: -1,
|
|
cell: CellFormatter,
|
|
icon: GpuIcon,
|
|
header: sortableHeader,
|
|
},
|
|
{
|
|
accessorFn: (originalRow) => originalRow.info.dt,
|
|
id: t`Temp`,
|
|
invertSorting: true,
|
|
sortUndefined: -1,
|
|
size: 50,
|
|
icon: ThermometerIcon,
|
|
header: sortableHeader,
|
|
cell(info) {
|
|
const val = info.getValue() as number
|
|
if (!val) {
|
|
return null
|
|
}
|
|
return (
|
|
<span
|
|
className={cn("tabular-nums whitespace-nowrap", {
|
|
"ps-1": viewMode === "table",
|
|
})}
|
|
>
|
|
{decimalString(val)} °C
|
|
</span>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessorFn: (originalRow) => originalRow.info.b || 0,
|
|
id: t`Net`,
|
|
invertSorting: true,
|
|
size: 100,
|
|
icon: EthernetIcon,
|
|
header: sortableHeader,
|
|
cell(info) {
|
|
const val = info.getValue() as number
|
|
return (
|
|
<span
|
|
className={cn("tabular-nums whitespace-nowrap", {
|
|
"ps-1": viewMode === "table",
|
|
})}
|
|
>
|
|
{decimalString(val, val >= 100 ? 1 : 2)} MB/s
|
|
</span>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "info.v",
|
|
id: t`Agent`,
|
|
invertSorting: true,
|
|
size: 50,
|
|
icon: WifiIcon,
|
|
header: sortableHeader,
|
|
cell(info) {
|
|
const version = info.getValue() as string
|
|
if (!version || !hubVersion) {
|
|
return null
|
|
}
|
|
const system = info.row.original
|
|
return (
|
|
<span
|
|
className={cn("flex gap-2 items-center md:pe-5 tabular-nums", {
|
|
"ps-1": viewMode === "table",
|
|
})}
|
|
>
|
|
<IndicatorDot
|
|
system={system}
|
|
className={
|
|
(system.status !== "up" && "bg-primary/30") ||
|
|
(version === hubVersion && "bg-green-500") ||
|
|
"bg-yellow-500"
|
|
}
|
|
/>
|
|
<span>{info.getValue() as string}</span>
|
|
</span>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
id: t({ message: "Actions", comment: "Table column" }),
|
|
size: 120,
|
|
cell: ({ row }) => (
|
|
<div className="flex justify-end items-center gap-1">
|
|
<AlertsButton system={row.original} />
|
|
<ActionsButton system={row.original} />
|
|
</div>
|
|
),
|
|
},
|
|
] as ColumnDef<SystemRecord>[]
|
|
}, [hubVersion, i18n.locale])
|
|
|
|
const table = useReactTable({
|
|
data,
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
onSortingChange: setSorting,
|
|
getSortedRowModel: getSortedRowModel(),
|
|
onColumnFiltersChange: setColumnFilters,
|
|
getFilteredRowModel: getFilteredRowModel(),
|
|
onColumnVisibilityChange: setColumnVisibility,
|
|
state: {
|
|
sorting,
|
|
columnFilters,
|
|
columnVisibility,
|
|
},
|
|
defaultColumn: {
|
|
minSize: 0,
|
|
size: Number.MAX_SAFE_INTEGER,
|
|
maxSize: Number.MAX_SAFE_INTEGER,
|
|
},
|
|
})
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-5 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
|
|
<div className="grid md:flex gap-5 w-full items-end">
|
|
<div className="px-2 sm:px-1">
|
|
<CardTitle className="mb-2.5">
|
|
<Trans>All Systems</Trans>
|
|
</CardTitle>
|
|
<CardDescription>
|
|
<Trans>Updated in real time. Click on a system to view information.</Trans>
|
|
</CardDescription>
|
|
</div>
|
|
<div className="flex gap-2 ms-auto w-full md:w-80">
|
|
<Input placeholder={t`Filter...`} onChange={(e) => setFilter(e.target.value)} className="px-4" />
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline">
|
|
<Settings2Icon className="me-1.5 size-4 opacity-80" />
|
|
<Trans>View</Trans>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="h-72 md:h-auto min-w-48 md:min-w-auto overflow-y-auto">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-s md:divide-y-0">
|
|
<div>
|
|
<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
|
|
<LayoutGridIcon className="size-4" />
|
|
<Trans>Layout</Trans>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuRadioGroup
|
|
className="px-1 pb-1"
|
|
value={viewMode}
|
|
onValueChange={(view) => setViewMode(view as ViewMode)}
|
|
>
|
|
<DropdownMenuRadioItem value="table" onSelect={(e) => e.preventDefault()} className="gap-2">
|
|
<LayoutListIcon className="size-4" />
|
|
<Trans>Table</Trans>
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="grid" onSelect={(e) => e.preventDefault()} className="gap-2">
|
|
<LayoutGridIcon className="size-4" />
|
|
<Trans>Grid</Trans>
|
|
</DropdownMenuRadioItem>
|
|
</DropdownMenuRadioGroup>
|
|
</div>
|
|
|
|
<div>
|
|
<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
|
|
<ArrowUpDownIcon className="size-4" />
|
|
<Trans>Sort By</Trans>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<div className="px-1 pb-1">
|
|
{table.getAllColumns().map((column) => {
|
|
if (column.id === t`Actions` || !column.getCanSort()) return null
|
|
let Icon = <span className="w-6"></span>
|
|
// if current sort column, show sort direction
|
|
if (sorting[0]?.id === column.id) {
|
|
if (sorting[0]?.desc) {
|
|
Icon = <ArrowUpIcon className="me-2 size-4" />
|
|
} else {
|
|
Icon = <ArrowDownIcon className="me-2 size-4" />
|
|
}
|
|
}
|
|
return (
|
|
<DropdownMenuItem
|
|
onSelect={(e) => {
|
|
e.preventDefault()
|
|
setSorting([{ id: column.id, desc: sorting[0]?.id === column.id && !sorting[0]?.desc }])
|
|
}}
|
|
key={column.id}
|
|
>
|
|
{Icon}
|
|
{column.id}
|
|
</DropdownMenuItem>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
|
|
<EyeIcon className="size-4" />
|
|
<Trans>Visible Fields</Trans>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<div className="px-1.5 pb-1">
|
|
{table
|
|
.getAllColumns()
|
|
.filter((column) => column.getCanHide())
|
|
.map((column) => {
|
|
return (
|
|
<DropdownMenuCheckboxItem
|
|
key={column.id}
|
|
onSelect={(e) => e.preventDefault()}
|
|
checked={column.getIsVisible()}
|
|
onCheckedChange={(value) => column.toggleVisibility(!!value)}
|
|
>
|
|
{column.id}
|
|
</DropdownMenuCheckboxItem>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<div className="p-6 pt-0 max-sm:py-3 max-sm:px-2">
|
|
{viewMode === "table" ? (
|
|
// table layout
|
|
<div className="rounded-md border overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<TableRow key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => {
|
|
return (
|
|
<TableHead className="px-2" key={header.id}>
|
|
{header.isPlaceholder
|
|
? null
|
|
: flexRender(header.column.columnDef.header, header.getContext())}
|
|
</TableHead>
|
|
)
|
|
})}
|
|
</TableRow>
|
|
))}
|
|
</TableHeader>
|
|
<TableBody>
|
|
{table.getRowModel().rows?.length ? (
|
|
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",
|
|
})}
|
|
onClick={(e) => {
|
|
const target = e.target as HTMLElement
|
|
if (!target.closest("[data-nolink]") && e.currentTarget.contains(target)) {
|
|
navigate(getPagePath($router, "system", { name: row.original.name }))
|
|
}
|
|
}}
|
|
>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<TableCell
|
|
key={cell.id}
|
|
style={{
|
|
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")}
|
|
>
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={columns.length} className="h-24 text-center">
|
|
<Trans>No systems found.</Trans>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
) : (
|
|
// grid layout
|
|
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
|
{table.getRowModel().rows?.length ? (
|
|
table.getRowModel().rows.map((row) => {
|
|
const system = row.original
|
|
const { status } = system
|
|
return (
|
|
<Card
|
|
key={system.id}
|
|
className={cn(
|
|
"cursor-pointer hover:shadow-md transition-all bg-transparent w-full dark:border-border duration-200 relative",
|
|
{
|
|
"opacity-50": status === "paused",
|
|
}
|
|
)}
|
|
>
|
|
<CardHeader className="py-1 ps-5 pe-3 bg-muted/30 border-b border-border/60">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<CardTitle className="text-base tracking-normal shrink-1 text-primary/90 flex items-center min-h-10 gap-2.5 min-w-0">
|
|
<div className="flex items-center gap-2.5 min-w-0">
|
|
<IndicatorDot system={system} />
|
|
<CardTitle className="text-[.95em]/normal tracking-normal truncate text-primary/90">
|
|
{system.name}
|
|
</CardTitle>
|
|
</div>
|
|
</CardTitle>
|
|
{table.getColumn(t`Actions`)?.getIsVisible() && (
|
|
<div className="flex gap-1 flex-shrink-0 relative z-10">
|
|
<AlertsButton system={system} />
|
|
<ActionsButton system={system} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2.5 text-sm px-5 pt-3.5 pb-4">
|
|
{table.getAllColumns().map((column) => {
|
|
if (!column.getIsVisible() || column.id === t`System` || column.id === t`Actions`) return null
|
|
const cell = row.getAllCells().find((cell) => cell.column.id === column.id)
|
|
if (!cell) return null
|
|
return (
|
|
<div key={column.id} className="flex items-center gap-3">
|
|
{/* @ts-ignore */}
|
|
{column.columnDef?.icon && (
|
|
// @ts-ignore
|
|
<column.columnDef.icon className="size-4 text-muted-foreground" />
|
|
)}
|
|
<div className="flex items-center gap-3 flex-1">
|
|
<span className="text-muted-foreground min-w-16">{column.id}:</span>
|
|
<div className="flex-1">{flexRender(cell.column.columnDef.cell, cell.getContext())}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</CardContent>
|
|
<Link
|
|
href={getPagePath($router, "system", { name: row.original.name })}
|
|
className="inset-0 absolute w-full h-full"
|
|
>
|
|
<span className="sr-only">{row.original.name}</span>
|
|
</Link>
|
|
</Card>
|
|
)
|
|
})
|
|
) : (
|
|
<div className="col-span-full text-center py-8">
|
|
<Trans>No systems found.</Trans>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function IndicatorDot({ system, className }: { system: SystemRecord; className?: ClassValue }) {
|
|
className ||= {
|
|
"bg-green-500": system.status === "up",
|
|
"bg-red-500": system.status === "down",
|
|
"bg-primary/40": system.status === "paused",
|
|
"bg-yellow-500": system.status === "pending",
|
|
}
|
|
return (
|
|
<span
|
|
className={cn("flex-shrink-0 size-2 rounded-full", className)}
|
|
// style={{ marginBottom: "-1px" }}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
|
|
const [deleteOpen, setDeleteOpen] = useState(false)
|
|
const [editOpen, setEditOpen] = useState(false)
|
|
let editOpened = useRef(false)
|
|
|
|
const { id, status, host, name } = system
|
|
|
|
return (
|
|
<>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size={"icon"} data-nolink>
|
|
<span className="sr-only">
|
|
<Trans>Open menu</Trans>
|
|
</span>
|
|
<MoreHorizontalIcon className="w-5" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{!isReadOnlyUser() && (
|
|
<DropdownMenuItem
|
|
onSelect={() => {
|
|
editOpened.current = true
|
|
setEditOpen(true)
|
|
}}
|
|
>
|
|
<PenBoxIcon className="me-2.5 size-4" />
|
|
<Trans>Edit</Trans>
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuItem
|
|
className={cn(isReadOnlyUser() && "hidden")}
|
|
onClick={() => {
|
|
pb.collection("systems").update(id, {
|
|
status: status === "paused" ? "pending" : "paused",
|
|
})
|
|
}}
|
|
>
|
|
{status === "paused" ? (
|
|
<>
|
|
<PlayCircleIcon className="me-2.5 size-4" />
|
|
<Trans>Resume</Trans>
|
|
</>
|
|
) : (
|
|
<>
|
|
<PauseCircleIcon className="me-2.5 size-4" />
|
|
<Trans>Pause</Trans>
|
|
</>
|
|
)}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => copyToClipboard(host)}>
|
|
<CopyIcon className="me-2.5 size-4" />
|
|
<Trans>Copy host</Trans>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator className={cn(isReadOnlyUser() && "hidden")} />
|
|
<DropdownMenuItem className={cn(isReadOnlyUser() && "hidden")} onSelect={() => setDeleteOpen(true)}>
|
|
<Trash2Icon className="me-2.5 size-4" />
|
|
<Trans>Delete</Trans>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
{/* edit dialog */}
|
|
<Dialog open={editOpen} onOpenChange={setEditOpen}>
|
|
{editOpened.current && <SystemDialog system={system} setOpen={setEditOpen} />}
|
|
</Dialog>
|
|
{/* deletion dialog */}
|
|
<AlertDialog open={deleteOpen} onOpenChange={(open) => setDeleteOpen(open)}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>
|
|
<Trans>Are you sure you want to delete {name}?</Trans>
|
|
</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
<Trans>
|
|
This action cannot be undone. This will permanently delete all current records for {name} from the
|
|
database.
|
|
</Trans>
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>
|
|
<Trans>Cancel</Trans>
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
className={cn(buttonVariants({ variant: "destructive" }))}
|
|
onClick={() => pb.collection("systems").delete(id)}
|
|
>
|
|
<Trans>Continue</Trans>
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</>
|
|
)
|
|
})
|