add copy linux install command

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

@@ -9,6 +9,12 @@ import {
 	DialogTrigger,
 } from '@/components/ui/dialog'
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
+import {
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "@/components/ui/tabs"
 
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -41,6 +47,10 @@ export function AddSystemButton({ className }: { className?: string }) {
       # FILESYSTEM: /dev/sda1 # override the root partition / device for disk I/O stats`)
 	}
 
+	function copyInstallCommand(port: string) {
+		copyToClipboard(`curl -sL https://raw.githubusercontent.com/henrygd/beszel/main/supplemental/scripts/install-agent.sh -o install-agent.sh && chmod +x install-agent.sh && ./install-agent.sh -p ${port} -k "${publicKey}"`)
+	}
+
 	async function handleSubmit(e: SubmitEvent) {
 		e.preventDefault()
 		const formData = new FormData(e.target as HTMLFormElement)
@@ -68,82 +78,163 @@ export function AddSystemButton({ className }: { className?: string }) {
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="w-[90%] sm:max-w-[425px] rounded-lg">
-				<DialogHeader>
-					<DialogTitle className="mb-2">Add New System</DialogTitle>
-					<DialogDescription>
-						The agent must be running on the system to connect. Copy the{' '}
-						<code className="bg-muted px-1 rounded-sm">docker-compose.yml</code> for the agent
-						below.
-					</DialogDescription>
-				</DialogHeader>
-				<form onSubmit={handleSubmit as any}>
-					<div className="grid gap-3 mt-1 mb-4">
-						<div className="grid grid-cols-4 items-center gap-4">
-							<Label htmlFor="name" className="text-right">
-								Name
-							</Label>
-							<Input id="name" name="name" className="col-span-3" required />
-						</div>
-						<div className="grid grid-cols-4 items-center gap-4">
-							<Label htmlFor="host" className="text-right">
-								Host / IP
-							</Label>
-							<Input id="host" name="host" className="col-span-3" required />
-						</div>
-						<div className="grid grid-cols-4 items-center gap-4">
-							<Label htmlFor="port" className="text-right">
-								Port
-							</Label>
-							<Input
-								ref={port}
-								name="port"
-								id="port"
-								defaultValue="45876"
-								className="col-span-3"
-								required
-							/>
-						</div>
-						<div className="grid grid-cols-4 items-center gap-4 relative">
-							<Label htmlFor="pkey" className="text-right whitespace-pre">
-								Public Key
-							</Label>
-							<Input readOnly id="pkey" value={publicKey} className="col-span-3" required></Input>
-							<div
-								className={
-									'h-6 w-24 bg-gradient-to-r from-transparent to-background to-65% absolute right-1 pointer-events-none'
-								}
-							></div>
-							<TooltipProvider delayDuration={100}>
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											type="button"
-											variant={'link'}
-											className="absolute right-0"
-											onClick={() => copyToClipboard(publicKey)}
-										>
-											<Copy className="h-4 w-4 " />
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>
-										<p>Click to copy</p>
-									</TooltipContent>
-								</Tooltip>
-							</TooltipProvider>
-						</div>
-					</div>
-					<DialogFooter className="flex justify-end gap-2">
-						<Button
-							type="button"
-							variant={'ghost'}
-							onClick={() => copyDockerCompose(port.current.value)}
-						>
-							Copy docker compose
-						</Button>
-						<Button>Add system</Button>
-					</DialogFooter>
-				</form>
+				<Tabs defaultValue="docker">
+					<DialogHeader>
+						<DialogTitle className="mb-2">Add New System</DialogTitle>
+						<TabsList className="grid w-full grid-cols-2">
+							<TabsTrigger value="docker">Docker</TabsTrigger>
+							<TabsTrigger value="binary">Binary</TabsTrigger>
+						</TabsList>
+					</DialogHeader>
+					<TabsContent value="docker">
+						<DialogDescription className={'mb-4'}>
+							The agent must be running on the system to connect. Copy the{' '}
+							<code className="bg-muted px-1 rounded-sm">docker-compose.yml</code> for the agent
+							below.
+						</DialogDescription>
+						<form onSubmit={handleSubmit as any}>
+							<div className="grid gap-3 mt-1 mb-4">
+								<div className="grid grid-cols-4 items-center gap-4">
+									<Label htmlFor="name" className="text-right">
+										Name
+									</Label>
+									<Input id="name" name="name" className="col-span-3" required />
+								</div>
+								<div className="grid grid-cols-4 items-center gap-4">
+									<Label htmlFor="host" className="text-right">
+										Host / IP
+									</Label>
+									<Input id="host" name="host" className="col-span-3" required />
+								</div>
+								<div className="grid grid-cols-4 items-center gap-4">
+									<Label htmlFor="port" className="text-right">
+										Port
+									</Label>
+									<Input
+										ref={port}
+										name="port"
+										id="port"
+										defaultValue="45876"
+										className="col-span-3"
+										required
+									/>
+								</div>
+								<div className="grid grid-cols-4 items-center gap-4 relative">
+									<Label htmlFor="pkey" className="text-right whitespace-pre">
+										Public Key
+									</Label>
+									<Input readOnly id="pkey" value={publicKey} className="col-span-3" required></Input>
+									<div
+										className={
+											'h-6 w-24 bg-gradient-to-r from-transparent to-background to-65% absolute right-1 pointer-events-none'
+										}
+									></div>
+									<TooltipProvider delayDuration={100}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<Button
+													type="button"
+													variant={'link'}
+													className="absolute right-0"
+													onClick={() => copyToClipboard(publicKey)}
+												>
+													<Copy className="h-4 w-4 " />
+												</Button>
+											</TooltipTrigger>
+											<TooltipContent>
+												<p>Click to copy</p>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								</div>
+							</div>
+							<DialogFooter className="flex justify-end gap-2">
+								<Button
+									type="button"
+									variant={'ghost'}
+									onClick={() => copyDockerCompose(port.current.value)}
+								>
+									Copy docker compose
+								</Button>
+								<Button>Add system</Button>
+							</DialogFooter>
+						</form>
+					</TabsContent>
+					<TabsContent value="binary">
+						<DialogDescription className={'mb-4'}>
+							The agent must be running on the system to connect. Copy the{' '}
+							<code className="bg-muted px-1 rounded-sm">install command</code> for the agent below.
+						</DialogDescription>
+						<form onSubmit={handleSubmit as any}>
+							<div className="grid gap-3 mt-1 mb-4">
+								<div className="grid grid-cols-4 items-center gap-4">
+									<Label htmlFor="name" className="text-right">
+										Name
+									</Label>
+									<Input id="name" name="name" className="col-span-3" required />
+								</div>
+								<div className="grid grid-cols-4 items-center gap-4">
+									<Label htmlFor="host" className="text-right">
+										Host / IP
+									</Label>
+									<Input id="host" name="host" className="col-span-3" required />
+								</div>
+								<div className="grid grid-cols-4 items-center gap-4">
+									<Label htmlFor="port" className="text-right">
+										Port
+									</Label>
+									<Input
+										ref={port}
+										name="port"
+										id="port"
+										defaultValue="45876"
+										className="col-span-3"
+										required
+									/>
+								</div>
+								<div className="grid grid-cols-4 items-center gap-4 relative">
+									<Label htmlFor="pkey" className="text-right whitespace-pre">
+										Public Key
+									</Label>
+									<Input readOnly id="pkey" value={publicKey} className="col-span-3" required></Input>
+									<div
+										className={
+											'h-6 w-24 bg-gradient-to-r from-transparent to-background to-65% absolute right-1 pointer-events-none'
+										}
+									></div>
+									<TooltipProvider delayDuration={100}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<Button
+													type="button"
+													variant={'link'}
+													className="absolute right-0"
+													onClick={() => copyToClipboard(publicKey)}
+												>
+													<Copy className="h-4 w-4 " />
+												</Button>
+											</TooltipTrigger>
+											<TooltipContent>
+												<p>Click to copy</p>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								</div>
+							</div>
+							<DialogFooter className="flex justify-end gap-2">
+								<Button
+									type="button"
+									variant={'ghost'}
+									onClick={() => copyInstallCommand(port.current.value)}
+								>
+									Copy linux command
+								</Button>
+								<Button>Add system</Button>
+							</DialogFooter>
+						</form>
+					</TabsContent>
+				</Tabs>
 			</DialogContent>
-		</Dialog>
+		</Dialog >
 	)
 }