mirror of
https://github.com/fosrl/pangolin.git
synced 2025-08-30 06:29:23 +02:00
add copy code snippets to raw tcp/udp
This commit is contained in:
Milo Schwartz
parent
f40d91ff9e
commit
844b12d363
3 changed files with 320 additions and 232 deletions
|
|
@ -60,7 +60,6 @@ const configSchema = z.object({
|
|||
.transform(stoi)
|
||||
.pipe(portSchema),
|
||||
internal_hostname: z.string().transform((url) => url.toLowerCase()),
|
||||
secure_cookies: z.boolean(),
|
||||
session_cookie_name: z.string(),
|
||||
resource_access_token_param: z.string(),
|
||||
resource_session_request_param: z.string(),
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@ import {
|
|||
import { subdomainSchema } from "@server/schemas/subdomainSchema";
|
||||
import Link from "next/link";
|
||||
import { SquareArrowOutUpRight } from "lucide-react";
|
||||
import CopyTextBox from "@app/components/CopyTextBox";
|
||||
|
||||
const createResourceFormSchema = z
|
||||
.object({
|
||||
|
|
@ -129,6 +130,10 @@ export default function CreateResourceForm({
|
|||
const [sites, setSites] = useState<ListSitesResponse["sites"]>([]);
|
||||
const [domainSuffix, setDomainSuffix] = useState<string>(org.org.domain);
|
||||
|
||||
const [showSnippets, setShowSnippets] = useState(false);
|
||||
|
||||
const [resourceId, setResourceId] = useState<number | null>(null);
|
||||
|
||||
const form = useForm<CreateResourceFormValues>({
|
||||
resolver: zodResolver(createResourceFormSchema),
|
||||
defaultValues: {
|
||||
|
|
@ -186,10 +191,20 @@ export default function CreateResourceForm({
|
|||
|
||||
if (res && res.status === 201) {
|
||||
const id = res.data.data.resourceId;
|
||||
// navigate to the resource page
|
||||
router.push(`/${orgId}/settings/resources/${id}`);
|
||||
setResourceId(id);
|
||||
|
||||
if (data.http) {
|
||||
goToResource();
|
||||
} else {
|
||||
setShowSnippets(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function goToResource() {
|
||||
// navigate to the resource page
|
||||
router.push(`/${orgId}/settings/resources/${resourceId}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -211,6 +226,7 @@ export default function CreateResourceForm({
|
|||
</CredenzaDescription>
|
||||
</CredenzaHeader>
|
||||
<CredenzaBody>
|
||||
{!showSnippets && (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
|
|
@ -230,8 +246,9 @@ export default function CreateResourceForm({
|
|||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
This is the name that will be
|
||||
displayed for this resource.
|
||||
This is the name that will
|
||||
be displayed for this
|
||||
resource.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
|
|
@ -250,13 +267,15 @@ export default function CreateResourceForm({
|
|||
</FormLabel>
|
||||
<FormDescription>
|
||||
Toggle if this is an
|
||||
HTTP resource or a raw
|
||||
TCP/UDP resource
|
||||
HTTP resource or a
|
||||
raw TCP/UDP resource
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
checked={
|
||||
field.value
|
||||
}
|
||||
onCheckedChange={
|
||||
field.onChange
|
||||
}
|
||||
|
|
@ -273,11 +292,14 @@ export default function CreateResourceForm({
|
|||
name="subdomain"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Subdomain</FormLabel>
|
||||
<FormLabel>
|
||||
Subdomain
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<CustomDomainInput
|
||||
value={
|
||||
field.value ?? ""
|
||||
field.value ??
|
||||
""
|
||||
}
|
||||
domainSuffix={
|
||||
domainSuffix
|
||||
|
|
@ -292,9 +314,10 @@ export default function CreateResourceForm({
|
|||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
This is the fully qualified
|
||||
domain name that will be
|
||||
used to access the resource.
|
||||
This is the fully
|
||||
qualified domain name
|
||||
that will be used to
|
||||
access the resource.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
|
|
@ -310,7 +333,8 @@ export default function CreateResourceForm({
|
|||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
Learn how to configure TCP/UDP resources
|
||||
Learn how to configure TCP/UDP
|
||||
resources
|
||||
</span>
|
||||
<SquareArrowOutUpRight size={14} />
|
||||
</Link>
|
||||
|
|
@ -347,8 +371,8 @@ export default function CreateResourceForm({
|
|||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>
|
||||
The protocol to use for
|
||||
the resource
|
||||
The protocol to use
|
||||
for the resource
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
|
|
@ -385,9 +409,10 @@ export default function CreateResourceForm({
|
|||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
The port number to proxy
|
||||
requests to (required
|
||||
for non-HTTP resources)
|
||||
The port number to
|
||||
proxy requests to
|
||||
(required for
|
||||
non-HTTP resources)
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
|
|
@ -416,7 +441,9 @@ export default function CreateResourceForm({
|
|||
>
|
||||
{field.value
|
||||
? sites.find(
|
||||
(site) =>
|
||||
(
|
||||
site
|
||||
) =>
|
||||
site.siteId ===
|
||||
field.value
|
||||
)?.name
|
||||
|
|
@ -430,11 +457,14 @@ export default function CreateResourceForm({
|
|||
<CommandInput placeholder="Search site..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>
|
||||
No site found.
|
||||
No site
|
||||
found.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sites.map(
|
||||
(site) => (
|
||||
(
|
||||
site
|
||||
) => (
|
||||
<CommandItem
|
||||
value={
|
||||
site.niceId
|
||||
|
|
@ -470,8 +500,8 @@ export default function CreateResourceForm({
|
|||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormDescription>
|
||||
This is the site that will be
|
||||
used in the dashboard.
|
||||
This is the site that will
|
||||
be used in the dashboard.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
|
|
@ -479,16 +509,75 @@ export default function CreateResourceForm({
|
|||
/>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
{showSnippets && (
|
||||
<div>
|
||||
<div className="flex items-start space-x-4 mb-6 last:mb-0">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-muted text-primary-foreground rounded-full flex items-center justify-center font-bold">
|
||||
1
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
Traefik: Add Entrypoints
|
||||
</h3>
|
||||
<CopyTextBox
|
||||
text={`entryPoints:
|
||||
${form.getValues("protocol")}-${form.getValues("proxyPort")}:
|
||||
address: ":${form.getValues("proxyPort")}/${form.getValues("protocol")}"`}
|
||||
wrapText={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4 mb-6 last:mb-0">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-muted text-primary-foreground rounded-full flex items-center justify-center font-bold">
|
||||
2
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h3 className="text-lg font-semibold mb-3">
|
||||
Gerbil: Expose Ports in Docker
|
||||
Compose
|
||||
</h3>
|
||||
<CopyTextBox
|
||||
text={`ports:
|
||||
- ${form.getValues("proxyPort")}:${form.getValues("proxyPort")}${form.getValues("protocol") === "tcp" ? "" : "/" + form.getValues("protocol")}`}
|
||||
wrapText={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
className="text-sm text-primary flex items-center gap-1"
|
||||
href="https://docs.fossorial.io/Getting%20Started/tcp-udp"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
Make sure to follow the full guide
|
||||
</span>
|
||||
<SquareArrowOutUpRight size={14} />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</CredenzaBody>
|
||||
<CredenzaFooter>
|
||||
<Button
|
||||
{!showSnippets && <Button
|
||||
type="submit"
|
||||
form="create-resource-form"
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
>
|
||||
Create Resource
|
||||
</Button>
|
||||
</Button>}
|
||||
|
||||
{showSnippets && <Button
|
||||
loading={loading}
|
||||
onClick={() => goToResource()}
|
||||
>
|
||||
Go to Resource
|
||||
</Button>}
|
||||
|
||||
<CredenzaClose asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</CredenzaClose>
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ export default function ReverseProxyTargets(props: {
|
|||
const addTargetForm = useForm({
|
||||
resolver: zodResolver(addTargetSchema),
|
||||
defaultValues: {
|
||||
ip: "localhost",
|
||||
ip: "",
|
||||
method: resource.http ? "http" : null,
|
||||
port: resource.http ? 80 : resource.proxyPort || 1234
|
||||
// protocol: "TCP",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue