fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 17:59:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add copy linux install command

Browse Source
This commit is contained in:
Arsfy
2024-10-27 14:30:34 +08:00
parent 4094df3a61
commit b7176fc8f3
1 changed files with 167 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
beszel/site/src/components/add-system.tsx
View File

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