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

feat(add-system): add link to binary install docs in copy button

Browse Source
This commit is contained in:
henrygd
2025-02-23 20:39:57 -05:00
parent aef3b3e610
commit e5a66cc156
1 changed files with 70 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,8 +49,8 @@ export function AddSystemButton({ className }: { className?: string }) {
) )
} }
function copyDockerCompose(port = "45876", publicKey: string) { function copyDockerCompose(port = "45876", publicKey: string) {
copyToClipboard(`services: copyToClipboard(`services:
beszel-agent: beszel-agent:
image: "henrygd/beszel-agent" image: "henrygd/beszel-agent"
container_name: "beszel-agent" container_name: "beszel-agent"
@@ -63,22 +63,22 @@ export function AddSystemButton({ className }: { className?: string }) {
environment: environment:
PORT: ${port} PORT: ${port}
KEY: "${publicKey}"`) KEY: "${publicKey}"`)
} }
function copyDockerRun(port = "45876", publicKey: string) { function copyDockerRun(port = "45876", publicKey: string) {
copyToClipboard( 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` `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`
) )
} }
function copyInstallCommand(port = "45876", publicKey: string) { function copyInstallCommand(port = "45876", publicKey: string) {
let cmd = `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}"` let cmd = `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}"`
// add china mirrors flag if zh-CN // add china mirrors flag if zh-CN
if ((i18n.locale + navigator.language).includes("zh-CN")) { if ((i18n.locale + navigator.language).includes("zh-CN")) {
cmd += ` --china-mirrors` cmd += ` --china-mirrors`
}
copyToClipboard(cmd)
} }
copyToClipboard(cmd)
}
/** /**
* SystemDialog component for adding or editing a system. * SystemDialog component for adding or editing a system.
@@ -112,9 +112,12 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
} }
return ( return (
<DialogContent className="w-[90%] sm:w-auto sm:ns-dialog max-w-full rounded-lg" onCloseAutoFocus={() => { <DialogContent
setHostValue(system?.host ?? "") className="w-[90%] sm:w-auto sm:ns-dialog max-w-full rounded-lg"
}}> onCloseAutoFocus={() => {
setHostValue(system?.host ?? "")
}}
>
<Tabs defaultValue="docker"> <Tabs defaultValue="docker">
<DialogHeader> <DialogHeader>
<DialogTitle className="mb-2"> <DialogTitle className="mb-2">
@@ -207,35 +210,21 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
<DialogFooter className="flex justify-end gap-x-2 gap-y-3 flex-col mt-5"> <DialogFooter className="flex justify-end gap-x-2 gap-y-3 flex-col mt-5">
{/* Docker */} {/* Docker */}
<TabsContent value="docker" className="contents"> <TabsContent value="docker" className="contents">
<div className="flex gap-0 rounded-lg"> <CopyButton
<Button text={t`Copy` + " docker compose"}
type="button" onClick={() => copyDockerCompose(isUnixSocket ? hostValue : port.current?.value, publicKey)}
variant="outline" dropdownText={t`Copy` + " docker run"}
onClick={() => copyDockerCompose(isUnixSocket ? hostValue : port.current?.value, publicKey )} dropdownOnClick={() => copyDockerRun(isUnixSocket ? hostValue : port.current?.value, publicKey)}
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(isUnixSocket ? hostValue : port.current?.value, publicKey)}>
<Trans>Copy</Trans> docker run
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</TabsContent> </TabsContent>
{/* Binary */} {/* Binary */}
<TabsContent value="binary" className="contents"> <TabsContent value="binary" className="contents">
<Button type="button" variant="outline" onClick={() => copyInstallCommand(isUnixSocket ? hostValue : port.current?.value, publicKey)}> <CopyButton
<Trans>Copy Linux command</Trans> text={t`Copy Linux command`}
</Button> onClick={() => copyInstallCommand(isUnixSocket ? hostValue : port.current?.value, publicKey)}
dropdownText={t`Manual setup instructions`}
dropdownUrl="https://beszel.dev/guide/agent-installation#binary"
/>
</TabsContent> </TabsContent>
{/* Save */} {/* Save */}
<Button>{system ? <Trans>Save system</Trans> : <Trans>Add system</Trans>}</Button> <Button>{system ? <Trans>Save system</Trans> : <Trans>Add system</Trans>}</Button>
@@ -245,3 +234,40 @@ export const SystemDialog = memo(({ setOpen, system }: { setOpen: (open: boolean
</DialogContent> </DialogContent>
) )
}) })
interface CopyButtonProps {
text: string
onClick: () => void
dropdownText: string
dropdownOnClick?: () => void
dropdownUrl?: string
}
const CopyButton = memo((props: CopyButtonProps) => {
return (
<div className="flex gap-0 rounded-lg">
<Button type="button" variant="outline" onClick={props.onClick} className="rounded-e-none dark:border-e-0 grow">
{props.text}
</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">
{props.dropdownUrl ? (
<DropdownMenuItem asChild>
<a href={props.dropdownUrl} target="_blank" rel="noopener noreferrer">
{props.dropdownText}
</a>
</DropdownMenuItem>
) : (
<DropdownMenuItem onClick={props.dropdownOnClick}>{props.dropdownText}</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
</div>
)
})