mirror of
https://github.com/fosrl/pangolin.git
synced 2025-08-18 00:09:34 +02:00
add docker deployment snippets to create site form
This commit is contained in:
Milo Schwartz
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 })
|
updateRule(row.original.ruleId, { action: value })
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<SelectTrigger className="min-w-[100px]">
|
<SelectTrigger className="min-w-[150px]">
|
||||||
{row.original.action === "ACCEPT"
|
<SelectValue />
|
||||||
? RuleAction.ACCEPT
|
|
||||||
: RuleAction.DROP}
|
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="ACCEPT">
|
<SelectItem value="ACCEPT">
|
||||||
|
|
@ -376,12 +374,8 @@ export default function ResourceRules(props: {
|
||||||
updateRule(row.original.ruleId, { match: value })
|
updateRule(row.original.ruleId, { match: value })
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<SelectTrigger className="min-w-[100px]">
|
<SelectTrigger className="min-w-[125px]">
|
||||||
{row.original.match === "IP"
|
<SelectValue />
|
||||||
? RuleMatch.IP
|
|
||||||
: row.original.match === "CIDR"
|
|
||||||
? RuleMatch.CIDR
|
|
||||||
: RuleMatch.PATH}
|
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="IP">{RuleMatch.IP}</SelectItem>
|
<SelectItem value="IP">{RuleMatch.IP}</SelectItem>
|
||||||
|
|
@ -436,7 +430,7 @@ export default function ResourceRules(props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingsContainer>
|
<SettingsContainer>
|
||||||
<Alert>
|
<Alert className="hidden md:block">
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">About Rules</AlertTitle>
|
<AlertTitle className="font-semibold">About Rules</AlertTitle>
|
||||||
<AlertDescription className="mt-4">
|
<AlertDescription className="mt-4">
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,16 @@ import { SiteRow } from "./SitesTable";
|
||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
import { Button } from "@app/components/ui/button";
|
import { Button } from "@app/components/ui/button";
|
||||||
import Link from "next/link";
|
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({
|
const createSiteFormSchema = z.object({
|
||||||
name: z
|
name: z
|
||||||
|
|
@ -78,6 +87,8 @@ export default function CreateSiteForm({
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [isChecked, setIsChecked] = useState(false);
|
const [isChecked, setIsChecked] = useState(false);
|
||||||
|
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
const [keypair, setKeypair] = useState<{
|
const [keypair, setKeypair] = useState<{
|
||||||
publicKey: string;
|
publicKey: string;
|
||||||
privateKey: string;
|
privateKey: string;
|
||||||
|
|
@ -182,10 +193,9 @@ export default function CreateSiteForm({
|
||||||
}
|
}
|
||||||
|
|
||||||
const res = await api
|
const res = await api
|
||||||
.put<AxiosResponse<CreateSiteResponse>>(
|
.put<
|
||||||
`/org/${orgId}/site/`,
|
AxiosResponse<CreateSiteResponse>
|
||||||
payload
|
>(`/org/${orgId}/site/`, payload)
|
||||||
)
|
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
variant: "destructive",
|
variant: "destructive",
|
||||||
|
|
@ -235,6 +245,18 @@ PersistentKeepalive = 5`
|
||||||
|
|
||||||
const newtConfig = `newt --id ${siteDefaults?.newtId} --secret ${siteDefaults?.newtSecret} --endpoint ${env.app.dashboardUrl}`;
|
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 (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<Form {...form}>
|
<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" && (
|
{form.watch("method") === "newt" && (
|
||||||
<Link
|
<Link
|
||||||
className="text-sm text-primary flex items-center gap-1"
|
className="text-sm text-primary flex items-center gap-1"
|
||||||
|
|
@ -346,6 +342,81 @@ PersistentKeepalive = 5`
|
||||||
</Link>
|
</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" && (
|
{form.watch("method") === "local" && (
|
||||||
<Link
|
<Link
|
||||||
className="text-sm text-primary flex items-center gap-1"
|
className="text-sm text-primary flex items-center gap-1"
|
||||||
|
|
@ -353,10 +424,7 @@ PersistentKeepalive = 5`
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
>
|
>
|
||||||
<span>
|
<span> Local sites do not tunnel, learn more</span>
|
||||||
{" "}
|
|
||||||
Local sites do not tunnel, learn more
|
|
||||||
</span>
|
|
||||||
<SquareArrowOutUpRight size={14} />
|
<SquareArrowOutUpRight size={14} />
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue