feat: edit system dialog in dashboard

beszel/site/src/components/add-system.tsx

@@ -16,15 +16,46 @@ import { Label } from "@/components/ui/label"
 import { $publicKey, pb } from "@/lib/stores"
 import { cn, copyToClipboard, isReadOnlyUser } from "@/lib/utils"
 import { i18n } from "@lingui/core"
-import { Trans } from "@lingui/macro"
+import { t, Trans } from "@lingui/macro"
 import { useStore } from "@nanostores/react"
 import { ChevronDownIcon, Copy, PlusIcon } from "lucide-react"
-import { MutableRefObject, useRef, useState } from "react"
+import { memo, MutableRefObject, useRef, useState } from "react"
 import { basePath, navigate } from "./router"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu"
+import { SystemRecord } from "@/types"
 
 export function AddSystemButton({ className }: { className?: string }) {
 	const [open, setOpen] = useState(false)
+	let opened = useRef(false)
+	if (open) {
+		opened.current = true
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button
+					variant="outline"
+					className={cn("flex gap-1 max-xs:h-[2.4rem]", className, isReadOnlyUser() && "hidden")}
+				>
+					<PlusIcon className="h-4 w-4 -ms-1" />
+					<Trans>
+						Add <span className="hidden sm:inline">System</span>
+					</Trans>
+				</Button>
+			</DialogTrigger>
+			{opened.current && <SystemDialog setOpen={setOpen} />}
+		</Dialog>
+	)
+}
+
+/**
+ * SystemDialog component for adding or editing a system.
+ * @param {Object} props - The component props.
+ * @param {function} props.setOpen - Function to set the open state of the dialog.
+ * @param {SystemRecord} [props.system] - Optional system record for editing an existing system.
+ */
+export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean) => void; system?: SystemRecord }) => {
 	const port = useRef() as MutableRefObject<HTMLInputElement>
 	const publicKey = useStore($publicKey)
 
@@ -43,6 +74,7 @@ export function AddSystemButton({ className }: { className?: string }) {
       PORT: ${port}
       KEY: "${publicKey}"`)
 	}
+
 	function copyDockerRun(port: string) {
 		copyToClipboard(
 			`docker run -d --name beszel-agent --network host --restart unless-stopped -v /var/run/docker.sock:/var/run/docker.sock:ro -e KEY="${publicKey}" -e PORT=${port} henrygd/beszel-agent:latest`
@@ -65,7 +97,11 @@ export function AddSystemButton({ className }: { className?: string }) {
 		data.users = pb.authStore.record!.id
 		try {
 			setOpen(false)
-			await pb.collection("systems").create(data)
+			if (system) {
+				await pb.collection("systems").update(system.id, { ...data, status: "pending" })
+			} else {
+				await pb.collection("systems").create(data)
+			}
 			navigate(basePath)
 			// console.log(record)
 		} catch (e) {
@@ -74,138 +110,119 @@ export function AddSystemButton({ className }: { className?: string }) {
 	}
 
 	return (
-		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger asChild>
-				<Button
-					variant="outline"
-					className={cn("flex gap-1 max-xs:h-[2.4rem]", className, isReadOnlyUser() && "hidden")}
-				>
-					<PlusIcon className="h-4 w-4 -ms-1" />
-					<Trans>
-						Add <span className="hidden sm:inline">System</span>
-					</Trans>
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="w-[90%] sm:w-auto sm:ns-dialog max-w-full rounded-lg">
-				<Tabs defaultValue="docker">
-					<DialogHeader>
-						<DialogTitle className="mb-2">
-							<Trans>Add New System</Trans>
-						</DialogTitle>
-						<TabsList className="grid w-full grid-cols-2">
-							<TabsTrigger value="docker">Docker</TabsTrigger>
-							<TabsTrigger value="binary">
-								<Trans>Binary</Trans>
-							</TabsTrigger>
-						</TabsList>
-					</DialogHeader>
-					{/* Docker */}
-					<TabsContent value="docker">
-						<DialogDescription className="mb-4 leading-normal w-0 min-w-full">
-							<Trans>
-								The agent must be running on the system to connect. Copy the
-								<code className="bg-muted px-1 rounded-sm leading-3">docker-compose.yml</code> for the agent below.
-							</Trans>
-						</DialogDescription>
-					</TabsContent>
-					{/* Binary */}
-					<TabsContent value="binary">
-						<DialogDescription className="mb-4 leading-normal w-0 min-w-full">
-							<Trans>
-								The agent must be running on the system to connect. Copy the installation command for the agent below.
-							</Trans>
-						</DialogDescription>
-					</TabsContent>
-					<form onSubmit={handleSubmit as any}>
-						<div className="grid xs:grid-cols-[auto_1fr] gap-y-3 gap-x-4 items-center mt-1 mb-4">
-							<Label htmlFor="name" className="xs:text-end">
-								<Trans>Name</Trans>
-							</Label>
-							<Input id="name" name="name" className="" required />
-							<Label htmlFor="host" className="xs:text-end">
-								<Trans>Host / IP</Trans>
-							</Label>
-							<Input id="host" name="host" className="" required />
-							<Label htmlFor="port" className="xs:text-end">
-								<Trans>Port</Trans>
-							</Label>
-							<Input ref={port} name="port" id="port" defaultValue="45876" className="" required />
-							<Label htmlFor="pkey" className="xs:text-end whitespace-pre">
-								<Trans comment="Use 'Key' if your language requires many more characters">Public Key</Trans>
-							</Label>
-							<div className="relative">
-								<Input readOnly id="pkey" value={publicKey} className="" required></Input>
-								<div
-									className={
-										"h-6 w-24 bg-gradient-to-r rtl:bg-gradient-to-l from-transparent to-background to-65% absolute top-2 end-1 pointer-events-none"
-									}
-								></div>
-								<TooltipProvider delayDuration={100}>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<Button
-												type="button"
-												variant={"link"}
-												className="absolute end-0 top-0"
-												onClick={() => copyToClipboard(publicKey)}
-											>
-												<Copy className="h-4 w-4 " />
-											</Button>
-										</TooltipTrigger>
-										<TooltipContent>
-											<p>
-												<Trans>Click to copy</Trans>
-											</p>
-										</TooltipContent>
-									</Tooltip>
-								</TooltipProvider>
-							</div>
+		<DialogContent className="w-[90%] sm:w-auto sm:ns-dialog max-w-full rounded-lg">
+			<Tabs defaultValue="docker">
+				<DialogHeader>
+					<DialogTitle className="mb-2">
+						{system ? `${t`Edit`} ${system?.name}` : <Trans>Add New System</Trans>}
+					</DialogTitle>
+					<TabsList className="grid w-full grid-cols-2">
+						<TabsTrigger value="docker">Docker</TabsTrigger>
+						<TabsTrigger value="binary">
+							<Trans>Binary</Trans>
+						</TabsTrigger>
+					</TabsList>
+				</DialogHeader>
+				{/* Docker (set tab index to prevent auto focusing content in edit system dialog) */}
+				<TabsContent value="docker" tabIndex={-1}>
+					<DialogDescription className="mb-4 leading-normal w-0 min-w-full">
+						<Trans>
+							The agent must be running on the system to connect. Copy the
+							<code className="bg-muted px-1 rounded-sm leading-3">docker-compose.yml</code> for the agent below.
+						</Trans>
+					</DialogDescription>
+				</TabsContent>
+				{/* Binary */}
+				<TabsContent value="binary">
+					<DialogDescription className="mb-4 leading-normal w-0 min-w-full">
+						<Trans>
+							The agent must be running on the system to connect. Copy the installation command for the agent below.
+						</Trans>
+					</DialogDescription>
+				</TabsContent>
+				<form onSubmit={handleSubmit as any}>
+					<div className="grid xs:grid-cols-[auto_1fr] gap-y-3 gap-x-4 items-center mt-1 mb-4">
+						<Label htmlFor="name" className="xs:text-end">
+							<Trans>Name</Trans>
+						</Label>
+						<Input id="name" name="name" defaultValue={system?.name} required />
+						<Label htmlFor="host" className="xs:text-end">
+							<Trans>Host / IP</Trans>
+						</Label>
+						<Input id="host" name="host" defaultValue={system?.host} required />
+						<Label htmlFor="port" className="xs:text-end">
+							<Trans>Port</Trans>
+						</Label>
+						<Input ref={port} name="port" id="port" defaultValue={system?.port || "45876"} required />
+						<Label htmlFor="pkey" className="xs:text-end whitespace-pre">
+							<Trans comment="Use 'Key' if your language requires many more characters">Public Key</Trans>
+						</Label>
+						<div className="relative">
+							<Input readOnly id="pkey" value={publicKey} required></Input>
+							<div
+								className={
+									"h-6 w-24 bg-gradient-to-r rtl:bg-gradient-to-l from-transparent to-background to-65% absolute top-2 end-1 pointer-events-none"
+								}
+							></div>
+							<TooltipProvider delayDuration={100}>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											type="button"
+											variant={"link"}
+											className="absolute end-0 top-0"
+											onClick={() => copyToClipboard(publicKey)}
+										>
+											<Copy className="h-4 w-4 " />
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>
+										<p>
+											<Trans>Click to copy</Trans>
+										</p>
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
 						</div>
+					</div>
+					<DialogFooter className="flex justify-end gap-x-2 gap-y-3 flex-col mt-5">
 						{/* Docker */}
-						<TabsContent value="docker">
-							<DialogFooter className="flex justify-end gap-x-2 gap-y-3 flex-col">
-								<div className="flex gap-0 rounded-lg">
-									<Button
-										type="button"
-										variant="outline"
-										onClick={() => copyDockerCompose(port.current.value)}
-										className="rounded-e-none dark:border-e-0 grow"
-									>
-										<Trans>Copy</Trans> docker compose
-									</Button>
-									<div className="w-px h-full bg-muted"></div>
-									<DropdownMenu>
-										<DropdownMenuTrigger asChild>
-											<Button variant="outline" className={"px-2 rounded-s-none border-s-0"}>
-												<ChevronDownIcon />
-											</Button>
-										</DropdownMenuTrigger>
-										<DropdownMenuContent align="end">
-											<DropdownMenuItem onClick={() => copyDockerRun(port.current.value)}>
-												<Trans>Copy</Trans> docker run
-											</DropdownMenuItem>
-										</DropdownMenuContent>
-									</DropdownMenu>
-								</div>
-								<Button>
-									<Trans>Add system</Trans>
+						<TabsContent value="docker" className="contents">
+							<div className="flex gap-0 rounded-lg">
+								<Button
+									type="button"
+									variant="outline"
+									onClick={() => copyDockerCompose(port.current.value)}
+									className="rounded-e-none dark:border-e-0 grow"
+								>
+									<Trans>Copy</Trans> docker compose
 								</Button>
-							</DialogFooter>
+								<div className="w-px h-full bg-muted"></div>
+								<DropdownMenu>
+									<DropdownMenuTrigger asChild>
+										<Button variant="outline" className={"px-2 rounded-s-none border-s-0"}>
+											<ChevronDownIcon />
+										</Button>
+									</DropdownMenuTrigger>
+									<DropdownMenuContent align="end">
+										<DropdownMenuItem onClick={() => copyDockerRun(port.current.value)}>
+											<Trans>Copy</Trans> docker run
+										</DropdownMenuItem>
+									</DropdownMenuContent>
+								</DropdownMenu>
+							</div>
 						</TabsContent>
 						{/* Binary */}
-						<TabsContent value="binary">
-							<DialogFooter className="flex justify-end gap-x-2 gap-y-3 flex-col">
-								<Button type="button" variant="outline" onClick={() => copyInstallCommand(port.current.value)}>
-									<Trans>Copy Linux command</Trans>
-								</Button>
-								<Button>
-									<Trans>Add system</Trans>
-								</Button>
-							</DialogFooter>
+						<TabsContent value="binary" className="contents">
+							<Button type="button" variant="outline" onClick={() => copyInstallCommand(port.current.value)}>
+								<Trans>Copy Linux command</Trans>
+							</Button>
 						</TabsContent>
-					</form>
-				</Tabs>
-			</DialogContent>
-		</Dialog>
+						{/* Save */}
+						<Button>{system ? <Trans>Save system</Trans> : <Trans>Add system</Trans>}</Button>
+					</DialogFooter>
+				</form>
+			</Tabs>
+		</DialogContent>
 	)
-}
+})

beszel/site/src/components/systems-table/systems-table.tsx

@@ -37,7 +37,6 @@ import {
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
-	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog"
 
 import { SystemRecord } from "@/types"
@@ -59,8 +58,9 @@ import {
 	ArrowUpIcon,
 	Settings2Icon,
 	EyeIcon,
+	PenBoxIcon,
 } from "lucide-react"
-import { useEffect, useMemo, useState } from "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"
@@ -73,6 +73,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui
 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"
 
@@ -559,11 +561,15 @@ function IndicatorDot({ system, className }: { system: SystemRecord; className?:
 	)
 }
 
-function ActionsButton({ system }: { system: SystemRecord }) {
-	// const [opened, setOpened] = useState(false)
+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 (
-		<AlertDialog>
+		<>
 			<DropdownMenu>
 				<DropdownMenuTrigger asChild>
 					<Button variant="ghost" size={"icon"} data-nolink>
@@ -574,6 +580,17 @@ function ActionsButton({ system }: { system: SystemRecord }) {
 					</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={() => {
@@ -599,38 +616,43 @@ function ActionsButton({ system }: { system: SystemRecord }) {
 						<Trans>Copy host</Trans>
 					</DropdownMenuItem>
 					<DropdownMenuSeparator className={cn(isReadOnlyUser() && "hidden")} />
-					<AlertDialogTrigger asChild>
-						<DropdownMenuItem className={cn(isReadOnlyUser() && "hidden")}>
-							<Trash2Icon className="me-2.5 size-4" />
-							<Trans>Delete</Trans>
-						</DropdownMenuItem>
-					</AlertDialogTrigger>
+					<DropdownMenuItem className={cn(isReadOnlyUser() && "hidden")} onSelect={() => setDeleteOpen(true)}>
+						<Trash2Icon className="me-2.5 size-4" />
+						<Trans>Delete</Trans>
+					</DropdownMenuItem>
 				</DropdownMenuContent>
 			</DropdownMenu>
-			<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>
+			{/* 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>
+		</>
 	)
-}
+})

beszel/site/src/lib/utils.ts

@@ -53,7 +53,7 @@ export const updateSystemList = (() => {
 		try {
 			const records = await pb
 				.collection<SystemRecord>("systems")
-				.getFullList({ sort: "+name", fields: "id,name,host,info,status" })
+				.getFullList({ sort: "+name", fields: "id,name,host,port,info,status" })
 
 			if (records.length) {
 				$systems.set(records)
@@ -107,7 +107,7 @@ export const formatDay = (timestamp: string) => {
 }
 
 export const updateFavicon = (newIcon: string) => {
-	;(document.querySelector("link[rel='icon']") as HTMLLinkElement).href = prependBasePath( `/static/${newIcon}` )
+	;(document.querySelector("link[rel='icon']") as HTMLLinkElement).href = prependBasePath(`/static/${newIcon}`)
 }
 
 export const isAdmin = () => pb.authStore.record?.role === "admin"