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,14 +78,20 @@ export function AddSystemButton({ className }: { className?: string }) {
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="w-[90%] sm:max-w-[425px] rounded-lg">
+				<Tabs defaultValue="docker">
 					<DialogHeader>
 						<DialogTitle className="mb-2">Add New System</DialogTitle>
-					<DialogDescription>
+						<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>
-				</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">
@@ -143,7 +159,82 @@ export function AddSystemButton({ className }: { className?: string }) {
 								<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 >
 	)
 }