mirror of
https://github.com/fosrl/pangolin.git
synced 2025-08-03 17:44:44 +02:00
add docker deployment snippets to create site form
This commit is contained in:
parent
c244ef387b
commit
f14ecf50e4
2 changed files with 108 additions and 46 deletions
|
@ -352,10 +352,8 @@ export default function ResourceRules(props: {
|
|||
updateRule(row.original.ruleId, { action: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="min-w-[100px]">
|
||||
{row.original.action === "ACCEPT"
|
||||
? RuleAction.ACCEPT
|
||||
: RuleAction.DROP}
|
||||
<SelectTrigger className="min-w-[150px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="ACCEPT">
|
||||
|
@ -376,12 +374,8 @@ export default function ResourceRules(props: {
|
|||
updateRule(row.original.ruleId, { match: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="min-w-[100px]">
|
||||
{row.original.match === "IP"
|
||||
? RuleMatch.IP
|
||||
: row.original.match === "CIDR"
|
||||
? RuleMatch.CIDR
|
||||
: RuleMatch.PATH}
|
||||
<SelectTrigger className="min-w-[125px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="IP">{RuleMatch.IP}</SelectItem>
|
||||
|
@ -436,7 +430,7 @@ export default function ResourceRules(props: {
|
|||
|
||||
return (
|
||||
<SettingsContainer>
|
||||
<Alert>
|
||||
<Alert className="hidden md:block">
|
||||
<InfoIcon className="h-4 w-4" />
|
||||
<AlertTitle className="font-semibold">About Rules</AlertTitle>
|
||||
<AlertDescription className="mt-4">
|
||||
|
|
|
@ -38,7 +38,16 @@ import { SiteRow } from "./SitesTable";
|
|||
import { AxiosResponse } from "axios";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { ArrowUpRight, SquareArrowOutUpRight } from "lucide-react";
|
||||
import {
|
||||
ArrowUpRight,
|
||||
ChevronsUpDown,
|
||||
SquareArrowOutUpRight
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger
|
||||
} from "@app/components/ui/collapsible";
|
||||
|
||||
const createSiteFormSchema = z.object({
|
||||
name: z
|
||||
|
@ -78,6 +87,8 @@ export default function CreateSiteForm({
|
|||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const [keypair, setKeypair] = useState<{
|
||||
publicKey: string;
|
||||
privateKey: string;
|
||||
|
@ -182,10 +193,9 @@ export default function CreateSiteForm({
|
|||
}
|
||||
|
||||
const res = await api
|
||||
.put<AxiosResponse<CreateSiteResponse>>(
|
||||
`/org/${orgId}/site/`,
|
||||
payload
|
||||
)
|
||||
.put<
|
||||
AxiosResponse<CreateSiteResponse>
|
||||
>(`/org/${orgId}/site/`, payload)
|
||||
.catch((e) => {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
|
@ -235,6 +245,18 @@ PersistentKeepalive = 5`
|
|||
|
||||
const newtConfig = `newt --id ${siteDefaults?.newtId} --secret ${siteDefaults?.newtSecret} --endpoint ${env.app.dashboardUrl}`;
|
||||
|
||||
const newtConfigDockerCompose = `services:
|
||||
newt:
|
||||
image: fosrl/newt
|
||||
container_name: newt
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
- PANGOLIN_ENDPOINT=${env.app.dashboardUrl}
|
||||
- NEWT_ID=${siteDefaults?.newtId}
|
||||
- NEWT_SECRET=${siteDefaults?.newtSecret}`;
|
||||
|
||||
const newtConfigDockerRun = `docker run -it fosrl/newt --id ${siteDefaults?.newtId} --secret ${siteDefaults?.newtSecret} --endpoint ${env.app.dashboardUrl}`;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Form {...form}>
|
||||
|
@ -305,32 +327,6 @@ PersistentKeepalive = 5`
|
|||
)}
|
||||
/>
|
||||
|
||||
<div className="w-full">
|
||||
{form.watch("method") === "wireguard" && !isLoading ? (
|
||||
<>
|
||||
<CopyTextBox text={wgConfig} />
|
||||
<span className="text-sm text-muted-foreground">
|
||||
You will only be able to see the
|
||||
configuration once.
|
||||
</span>
|
||||
</>
|
||||
) : form.watch("method") === "wireguard" &&
|
||||
isLoading ? (
|
||||
<p>Loading WireGuard configuration...</p>
|
||||
) : form.watch("method") === "newt" ? (
|
||||
<>
|
||||
<CopyTextBox
|
||||
text={newtConfig}
|
||||
wrapText={false}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
You will only be able to see the
|
||||
configuration once.
|
||||
</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{form.watch("method") === "newt" && (
|
||||
<Link
|
||||
className="text-sm text-primary flex items-center gap-1"
|
||||
|
@ -346,6 +342,81 @@ PersistentKeepalive = 5`
|
|||
</Link>
|
||||
)}
|
||||
|
||||
<div className="w-full">
|
||||
{form.watch("method") === "wireguard" && !isLoading ? (
|
||||
<>
|
||||
<CopyTextBox text={wgConfig} />
|
||||
<span className="text-sm text-muted-foreground mt-2">
|
||||
You will only be able to see the
|
||||
configuration once.
|
||||
</span>
|
||||
</>
|
||||
) : form.watch("method") === "wireguard" &&
|
||||
isLoading ? (
|
||||
<p>Loading WireGuard configuration...</p>
|
||||
) : form.watch("method") === "newt" ? (
|
||||
<>
|
||||
<div className="mb-2">
|
||||
<Collapsible
|
||||
open={isOpen}
|
||||
onOpenChange={setIsOpen}
|
||||
className="space-y-2"
|
||||
>
|
||||
<div className="mx-auto">
|
||||
<CopyTextBox
|
||||
text={newtConfig}
|
||||
wrapText={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between space-x-4">
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button
|
||||
variant="text"
|
||||
size="sm"
|
||||
className="p-0 flex items-center justify-between w-full"
|
||||
>
|
||||
<h4 className="text-sm font-semibold">
|
||||
Expand for Docker Deployment
|
||||
Details
|
||||
</h4>
|
||||
<div>
|
||||
<ChevronsUpDown className="h-4 w-4" />
|
||||
<span className="sr-only">
|
||||
Toggle
|
||||
</span>
|
||||
</div>
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
</div>
|
||||
<CollapsibleContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<b>Docker Compose</b>
|
||||
<CopyTextBox
|
||||
text={
|
||||
newtConfigDockerCompose
|
||||
}
|
||||
wrapText={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<b>Docker Run</b>
|
||||
|
||||
<CopyTextBox
|
||||
text={newtConfigDockerRun}
|
||||
wrapText={false}
|
||||
/>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
You will only be able to see the
|
||||
configuration once.
|
||||
</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{form.watch("method") === "local" && (
|
||||
<Link
|
||||
className="text-sm text-primary flex items-center gap-1"
|
||||
|
@ -353,10 +424,7 @@ PersistentKeepalive = 5`
|
|||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
{" "}
|
||||
Local sites do not tunnel, learn more
|
||||
</span>
|
||||
<span> Local sites do not tunnel, learn more</span>
|
||||
<SquareArrowOutUpRight size={14} />
|
||||
</Link>
|
||||
)}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue