mirror of
https://github.com/fosrl/pangolin.git
synced 2025-05-13 05:40:38 +01:00
added advanced section to general page & custom host header field
This commit is contained in:
Matthias Palmetshofer
parent
64a2cc23c6
commit
25c125b96d
6 changed files with 199 additions and 38 deletions
|
|
@ -78,7 +78,8 @@ export const resources = sqliteTable("resources", {
|
|||
.notNull()
|
||||
.default(false),
|
||||
enabled: integer("enabled", { mode: "boolean" }).notNull().default(true),
|
||||
tlsServerName: text("tlsServerName").notNull().default("")
|
||||
tlsServerName: text("tlsServerName").notNull().default(""),
|
||||
setHostHeader: text("setHostHeader").notNull().default("")
|
||||
});
|
||||
|
||||
export const targets = sqliteTable("targets", {
|
||||
|
|
|
|||
|
|
@ -69,7 +69,8 @@ function queryResources(
|
|||
protocol: resources.protocol,
|
||||
proxyPort: resources.proxyPort,
|
||||
enabled: resources.enabled,
|
||||
tlsServerName: resources.tlsServerName
|
||||
tlsServerName: resources.tlsServerName,
|
||||
setHostHeader: resources.setHostHeader
|
||||
})
|
||||
.from(resources)
|
||||
.leftJoin(sites, eq(resources.siteId, sites.siteId))
|
||||
|
|
@ -104,7 +105,8 @@ function queryResources(
|
|||
protocol: resources.protocol,
|
||||
proxyPort: resources.proxyPort,
|
||||
enabled: resources.enabled,
|
||||
tlsServerName: resources.tlsServerName
|
||||
tlsServerName: resources.tlsServerName,
|
||||
setHostHeader: resources.setHostHeader
|
||||
})
|
||||
.from(resources)
|
||||
.leftJoin(sites, eq(resources.siteId, sites.siteId))
|
||||
|
|
|
|||
|
|
@ -42,7 +42,8 @@ const updateHttpResourceBodySchema = z
|
|||
applyRules: z.boolean().optional(),
|
||||
domainId: z.string().optional(),
|
||||
enabled: z.boolean().optional(),
|
||||
tlsServerName: z.string().optional()
|
||||
tlsServerName: z.string().optional(),
|
||||
setHostHeader: z.string().optional()
|
||||
})
|
||||
.strict()
|
||||
.refine((data) => Object.keys(data).length > 0, {
|
||||
|
|
@ -78,6 +79,15 @@ const updateHttpResourceBodySchema = z
|
|||
return true;
|
||||
},
|
||||
{ message: "Invalid TLS Server Name. Use domain name format, or save empty to remove the TLS Server Name." }
|
||||
)
|
||||
.refine(
|
||||
(data) => {
|
||||
if (data.setHostHeader) {
|
||||
return tlsNameSchema.safeParse(data.setHostHeader).success;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
{ message: "Invalid custom Host Header value. Use domain name format, or save empty to unset custom Host Header." }
|
||||
);
|
||||
|
||||
export type UpdateResourceResponse = Resource;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,8 @@ export async function traefikConfigProvider(
|
|||
orgId: orgs.orgId
|
||||
},
|
||||
enabled: resources.enabled,
|
||||
tlsServerName: resources.tlsServerName
|
||||
tlsServerName: resources.tlsServerName,
|
||||
setHostHeader: resources.setHostHeader
|
||||
})
|
||||
.from(resources)
|
||||
.innerJoin(sites, eq(sites.siteId, resources.siteId))
|
||||
|
|
@ -141,6 +142,7 @@ export async function traefikConfigProvider(
|
|||
const serviceName = `${resource.resourceId}-service`;
|
||||
const fullDomain = `${resource.fullDomain}`;
|
||||
const transportName = `${resource.resourceId}-transport`;
|
||||
const hostHeaderMiddlewareName = `${resource.resourceId}-host-header-middleware`;
|
||||
|
||||
if (!resource.enabled) {
|
||||
continue;
|
||||
|
|
@ -295,6 +297,28 @@ export async function traefikConfigProvider(
|
|||
config_output.http.services![serviceName].loadBalancer.serversTransport = transportName;
|
||||
}
|
||||
|
||||
// Add the host header middleware
|
||||
if (resource.setHostHeader) {
|
||||
if (!config_output.http.middlewares) {
|
||||
config_output.http.middlewares = {};
|
||||
}
|
||||
config_output.http.middlewares[hostHeaderMiddlewareName] =
|
||||
{
|
||||
headers: {
|
||||
customRequestHeaders: {
|
||||
Host: resource.setHostHeader
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!config_output.http.routers![routerName].middlewares) {
|
||||
config_output.http.routers![routerName].middlewares = [];
|
||||
}
|
||||
config_output.http.routers![routerName].middlewares = [
|
||||
...config_output.http.routers![routerName].middlewares,
|
||||
hostHeaderMiddlewareName
|
||||
];
|
||||
}
|
||||
|
||||
} else {
|
||||
// Non-HTTP (TCP/UDP) configuration
|
||||
const protocol = resource.protocol.toLowerCase();
|
||||
|
|
|
|||
|
|
@ -11,6 +11,9 @@ export default async function migration() {
|
|||
trx.run(
|
||||
sql`ALTER TABLE 'resources' ADD 'tlsServerName' text DEFAULT '' NOT NULL;`
|
||||
);
|
||||
trx.run(
|
||||
sql`ALTER TABLE 'resources' ADD 'setHostHeader' text DEFAULT '' NOT NULL;`
|
||||
);
|
||||
});
|
||||
|
||||
console.log(`Migrated database schema`);
|
||||
|
|
|
|||
|
|
@ -73,8 +73,7 @@ const GeneralFormSchema = z
|
|||
proxyPort: z.number().optional(),
|
||||
http: z.boolean(),
|
||||
isBaseDomain: z.boolean().optional(),
|
||||
domainId: z.string().optional(),
|
||||
tlsServerName: z.string().optional()
|
||||
domainId: z.string().optional()
|
||||
})
|
||||
.refine(
|
||||
(data) => {
|
||||
|
|
@ -104,7 +103,18 @@ const GeneralFormSchema = z
|
|||
message: "Invalid subdomain",
|
||||
path: ["subdomain"]
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
const TransferFormSchema = z.object({
|
||||
siteId: z.number()
|
||||
});
|
||||
|
||||
const AdvancedFormSchema = z
|
||||
.object({
|
||||
http: z.boolean(),
|
||||
tlsServerName: z.string().optional(),
|
||||
setHostHeader: z.string().optional()
|
||||
})
|
||||
.refine(
|
||||
(data) => {
|
||||
if (data.tlsServerName) {
|
||||
|
|
@ -116,14 +126,23 @@ const GeneralFormSchema = z
|
|||
message: "Invalid TLS Server Name. Use domain name format, or save empty to remove the TLS Server Name.",
|
||||
path: ["tlsServerName"]
|
||||
}
|
||||
)
|
||||
.refine(
|
||||
(data) => {
|
||||
if (data.setHostHeader) {
|
||||
return tlsNameSchema.safeParse(data.setHostHeader).success;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
{
|
||||
message: "Invalid custom Host Header value. Use domain name format, or save empty to unset the custom Host Header",
|
||||
path: ["tlsServerName"]
|
||||
}
|
||||
);
|
||||
|
||||
const TransferFormSchema = z.object({
|
||||
siteId: z.number()
|
||||
});
|
||||
|
||||
type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
|
||||
type TransferFormValues = z.infer<typeof TransferFormSchema>;
|
||||
type AdvancedFormValues = z.infer<typeof AdvancedFormSchema>;
|
||||
|
||||
export default function GeneralForm() {
|
||||
const [formKey, setFormKey] = useState(0);
|
||||
|
|
@ -159,8 +178,17 @@ export default function GeneralForm() {
|
|||
proxyPort: resource.proxyPort ? resource.proxyPort : undefined,
|
||||
http: resource.http,
|
||||
isBaseDomain: resource.isBaseDomain ? true : false,
|
||||
domainId: resource.domainId || undefined,
|
||||
tlsServerName: resource.http ? resource.tlsServerName || "" : undefined
|
||||
domainId: resource.domainId || undefined
|
||||
},
|
||||
mode: "onChange"
|
||||
});
|
||||
|
||||
const advancedForm = useForm<AdvancedFormValues>({
|
||||
resolver: zodResolver(AdvancedFormSchema),
|
||||
defaultValues: {
|
||||
http: resource.http,
|
||||
tlsServerName: resource.http ? resource.tlsServerName || "" : undefined,
|
||||
setHostHeader: resource.http ? resource.setHostHeader || "" : undefined
|
||||
},
|
||||
mode: "onChange"
|
||||
});
|
||||
|
|
@ -224,8 +252,7 @@ export default function GeneralForm() {
|
|||
subdomain: data.http ? data.subdomain : undefined,
|
||||
proxyPort: data.proxyPort,
|
||||
isBaseDomain: data.http ? data.isBaseDomain : undefined,
|
||||
domainId: data.http ? data.domainId : undefined,
|
||||
tlsServerName: data.http ? data.tlsServerName : undefined
|
||||
domainId: data.http ? data.domainId : undefined
|
||||
}
|
||||
)
|
||||
.catch((e) => {
|
||||
|
|
@ -252,8 +279,7 @@ export default function GeneralForm() {
|
|||
subdomain: data.subdomain,
|
||||
proxyPort: data.proxyPort,
|
||||
isBaseDomain: data.isBaseDomain,
|
||||
fullDomain: resource.fullDomain,
|
||||
tlsServerName: data.tlsServerName
|
||||
fullDomain: resource.fullDomain
|
||||
});
|
||||
|
||||
router.refresh();
|
||||
|
|
@ -295,6 +321,46 @@ export default function GeneralForm() {
|
|||
setTransferLoading(false);
|
||||
}
|
||||
|
||||
async function onSubmitAdvanced(data: AdvancedFormValues) {
|
||||
setSaveLoading(true);
|
||||
|
||||
const res = await api
|
||||
.post<AxiosResponse<UpdateResourceResponse>>(
|
||||
`resource/${resource?.resourceId}`,
|
||||
{
|
||||
tlsServerName: data.http ? data.tlsServerName : undefined,
|
||||
setHostHeader: data.http ? data.setHostHeader : undefined
|
||||
}
|
||||
)
|
||||
.catch((e) => {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Failed to update resource",
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
"An error occurred while updating the resource"
|
||||
)
|
||||
});
|
||||
});
|
||||
|
||||
if (res && res.status === 200) {
|
||||
toast({
|
||||
title: "Resource updated",
|
||||
description: "The resource has been updated successfully"
|
||||
});
|
||||
|
||||
const resource = res.data.data;
|
||||
|
||||
updateResource({
|
||||
tlsServerName: data.tlsServerName,
|
||||
setHostHeader: data.setHostHeader
|
||||
});
|
||||
|
||||
router.refresh();
|
||||
}
|
||||
setSaveLoading(false);
|
||||
}
|
||||
|
||||
async function toggleResourceEnabled(val: boolean) {
|
||||
const res = await api
|
||||
.post<AxiosResponse<UpdateResourceResponse>>(
|
||||
|
|
@ -561,26 +627,6 @@ export default function GeneralForm() {
|
|||
)}
|
||||
/>
|
||||
)}
|
||||
{/* New TLS Server Name Field */}
|
||||
</div>
|
||||
<div className="w-fill space-y-2">
|
||||
<FormLabel>
|
||||
TLS Server Name (optional)
|
||||
</FormLabel>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="tlsServerName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -637,6 +683,81 @@ export default function GeneralForm() {
|
|||
</SettingsSectionFooter>
|
||||
</SettingsSection>
|
||||
|
||||
{resource.http && (
|
||||
<>
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>Advanced</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
Adjust advanced settings for the resource, like customize the Host Header or set a TLS Server Name for SNI based routing.
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
<SettingsSectionForm>
|
||||
<Form {...advancedForm}>
|
||||
<form
|
||||
onSubmit={advancedForm.handleSubmit(onSubmitAdvanced)}
|
||||
className="grid grid-cols-1 md:grid-cols-2 gap-4"
|
||||
id="advanced-settings-form"
|
||||
>
|
||||
{/* New TLS Server Name Field */}
|
||||
<div className="w-fill space-y-2">
|
||||
<FormLabel>
|
||||
TLS Server Name (optional)
|
||||
</FormLabel>
|
||||
<FormField
|
||||
control={advancedForm.control}
|
||||
name="tlsServerName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{/* New Custom Host Header Field */}
|
||||
<div className="w-fill space-y-2">
|
||||
<FormLabel>
|
||||
Custom Host Header (optional)
|
||||
</FormLabel>
|
||||
<FormField
|
||||
control={advancedForm.control}
|
||||
name="setHostHeader"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</SettingsSectionForm>
|
||||
</SettingsSectionBody>
|
||||
|
||||
<SettingsSectionFooter>
|
||||
<Button
|
||||
type="submit"
|
||||
loading={saveLoading}
|
||||
disabled={saveLoading}
|
||||
form="advanced-settings-form"
|
||||
>
|
||||
Save Advanced Settings
|
||||
</Button>
|
||||
</SettingsSectionFooter>
|
||||
</SettingsSection>
|
||||
</>
|
||||
)}
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
|
|
|
|||
Loading…
Reference in a new issue