calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-03 11:04:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust the form

Browse Source
This commit is contained in:
Owen
2026-04-16 17:05:25 -07:00
parent 597cae2b78
commit b958537f3e
2 changed files with 171 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
messages/en-US.json
View File

@@ -1862,6 +1862,7 @@
"healthCheckTimeoutMin": "Timeout must be at least 1 second", "healthCheckTimeoutMin": "Timeout must be at least 1 second",
"healthCheckRetryMin": "Retry attempts must be at least 1", "healthCheckRetryMin": "Retry attempts must be at least 1",
"healthCheckMode": "Check Mode", "healthCheckMode": "Check Mode",
"healthCheckStrategy": "Strategy",
"healthCheckModeDescription": "TCP mode verifies connectivity only. HTTP mode validates the HTTP response.", "healthCheckModeDescription": "TCP mode verifies connectivity only. HTTP mode validates the HTTP response.",
"healthyThreshold": "Healthy Threshold", "healthyThreshold": "Healthy Threshold",
"healthyThresholdDescription": "Consecutive successes required before marking as healthy.", "healthyThresholdDescription": "Consecutive successes required before marking as healthy.",
@@ -1869,8 +1870,8 @@
"unhealthyThresholdDescription": "Consecutive failures required before marking as unhealthy.", "unhealthyThresholdDescription": "Consecutive failures required before marking as unhealthy.",
"healthCheckHealthyThresholdMin": "Healthy threshold must be at least 1", "healthCheckHealthyThresholdMin": "Healthy threshold must be at least 1",
"healthCheckUnhealthyThresholdMin": "Unhealthy threshold must be at least 1", "healthCheckUnhealthyThresholdMin": "Unhealthy threshold must be at least 1",
"httpMethod": "HTTP Method", "httpMethod": "Scheme",
"selectHttpMethod": "Select HTTP method", "selectHttpMethod": "Select scheme",
"domainPickerSubdomainLabel": "Subdomain", "domainPickerSubdomainLabel": "Subdomain",
"domainPickerBaseDomainLabel": "Base Domain", "domainPickerBaseDomainLabel": "Base Domain",
"domainPickerSearchDomains": "Search domains...", "domainPickerSearchDomains": "Search domains...",

328
src/components/HealthCheckFormFields.tsx
View File

@@ -78,11 +78,8 @@ export function HealthCheckFormFields({
name="hcEnabled" name="hcEnabled"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4"> <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
<div className="space-y-0.5"> <div>
<FormLabel>{t("enableHealthChecks")}</FormLabel> <FormLabel>{t("enableHealthChecks")}</FormLabel>
<FormDescription>
{t("enableHealthChecksDescription")}
</FormDescription>
</div> </div>
<FormControl> <FormControl>
<Switch <Switch
@@ -99,13 +96,13 @@ export function HealthCheckFormFields({
{showFields && ( {showFields && (
<div className="space-y-4"> <div className="space-y-4">
{/* Mode */} {/* Strategy */}
<FormField <FormField
control={form.control} control={form.control}
name="hcMode" name="hcMode"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("healthCheckMode")}</FormLabel> <FormLabel>{t("healthCheckStrategy")}</FormLabel>
<Select <Select
onValueChange={(value) => onValueChange={(value) =>
handleChange("hcMode", value, field.onChange) handleChange("hcMode", value, field.onChange)
@@ -122,9 +119,6 @@ export function HealthCheckFormFields({
<SelectItem value="tcp">TCP</SelectItem> <SelectItem value="tcp">TCP</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<FormDescription>
{t("healthCheckModeDescription")}
</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@@ -164,6 +158,9 @@ export function HealthCheckFormFields({
<FormControl> <FormControl>
<Input <Input
{...field} {...field}
type="number"
min={1}
max={65535}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
handleChange("hcPort", value, field.onChange); handleChange("hcPort", value, field.onChange);
@@ -176,7 +173,7 @@ export function HealthCheckFormFields({
/> />
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<FormField <FormField
control={form.control} control={form.control}
name="hcScheme" name="hcScheme"
@@ -236,6 +233,9 @@ export function HealthCheckFormFields({
<FormControl> <FormControl>
<Input <Input
{...field} {...field}
type="number"
min={1}
max={65535}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
handleChange("hcPort", value, field.onChange); handleChange("hcPort", value, field.onChange);
@@ -246,6 +246,43 @@ export function HealthCheckFormFields({
</FormItem> </FormItem>
)} )}
/> />
</div>
)}
{/* HTTP Method + Timeout (shown when not TCP) */}
{watchedMode !== "tcp" && (
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<FormField
control={form.control}
name="hcMethod"
render={({ field }) => (
<FormItem>
<FormLabel>{t("httpMethod")}</FormLabel>
<Select
onValueChange={(value) =>
handleChange("hcMethod", value, field.onChange)
}
value={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue
placeholder={t("selectHttpMethod")}
/>
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="GET">GET</SelectItem>
<SelectItem value="POST">POST</SelectItem>
<SelectItem value="HEAD">HEAD</SelectItem>
<SelectItem value="PUT">PUT</SelectItem>
<SelectItem value="DELETE">DELETE</SelectItem>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="hcPath" name="hcPath"
@@ -268,46 +305,55 @@ export function HealthCheckFormFields({
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="hcTimeout"
render={({ field }) => (
<FormItem>
<FormLabel>{t("timeoutSeconds")}</FormLabel>
<FormControl>
<Input
type="number"
{...field}
onChange={(e) => {
const value = parseInt(e.target.value);
handleChange("hcTimeout", value, field.onChange);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div> </div>
)} )}
{/* HTTP Method */} {/* TCP timeout (shown only for TCP) */}
{watchedMode !== "tcp" && ( {watchedMode === "tcp" && (
<FormField <FormField
control={form.control} control={form.control}
name="hcMethod" name="hcTimeout"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("httpMethod")}</FormLabel> <FormLabel>{t("timeoutSeconds")}</FormLabel>
<Select <FormControl>
onValueChange={(value) => <Input
handleChange("hcMethod", value, field.onChange) type="number"
} {...field}
value={field.value} onChange={(e) => {
> const value = parseInt(e.target.value);
<FormControl> handleChange("hcTimeout", value, field.onChange);
<SelectTrigger> }}
<SelectValue />
placeholder={t("selectHttpMethod")} </FormControl>
/>
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="GET">GET</SelectItem>
<SelectItem value="POST">POST</SelectItem>
<SelectItem value="HEAD">HEAD</SelectItem>
<SelectItem value="PUT">PUT</SelectItem>
<SelectItem value="DELETE">DELETE</SelectItem>
</SelectContent>
</Select>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
)} )}
{/* Check Interval, Unhealthy Interval, and Timeout */} {/* Healthy interval + healthy threshold */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField <FormField
control={form.control} control={form.control}
name="hcInterval" name="hcInterval"
@@ -328,7 +374,34 @@ export function HealthCheckFormFields({
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="hcHealthyThreshold"
render={({ field }) => (
<FormItem>
<FormLabel>{t("healthyThreshold")}</FormLabel>
<FormControl>
<Input
type="number"
{...field}
onChange={(e) => {
const value = parseInt(e.target.value);
handleChange(
"hcHealthyThreshold",
value,
field.onChange
);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{/* Unhealthy interval + unhealthy threshold */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField <FormField
control={form.control} control={form.control}
name="hcUnhealthyInterval" name="hcUnhealthyInterval"
@@ -353,59 +426,6 @@ export function HealthCheckFormFields({
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="hcTimeout"
render={({ field }) => (
<FormItem>
<FormLabel>{t("timeoutSeconds")}</FormLabel>
<FormControl>
<Input
type="number"
{...field}
onChange={(e) => {
const value = parseInt(e.target.value);
handleChange("hcTimeout", value, field.onChange);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{/* Healthy and Unhealthy Thresholds */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="hcHealthyThreshold"
render={({ field }) => (
<FormItem>
<FormLabel>{t("healthyThreshold")}</FormLabel>
<FormControl>
<Input
type="number"
{...field}
onChange={(e) => {
const value = parseInt(e.target.value);
handleChange(
"hcHealthyThreshold",
value,
field.onChange
);
}}
/>
</FormControl>
<FormDescription>
{t("healthyThresholdDescription")}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="hcUnhealthyThreshold" name="hcUnhealthyThreshold"
@@ -426,9 +446,6 @@ export function HealthCheckFormFields({
}} }}
/> />
</FormControl> </FormControl>
<FormDescription>
{t("unhealthyThresholdDescription")}
</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@@ -438,55 +455,74 @@ export function HealthCheckFormFields({
{/* HTTP-only fields */} {/* HTTP-only fields */}
{watchedMode !== "tcp" && ( {watchedMode !== "tcp" && (
<> <>
{/* Expected Response Code */} {/* Expected Response Codes + TLS Server Name + Follow Redirects */}
<FormField <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
control={form.control} <FormField
name="hcStatus" control={form.control}
render={({ field }) => ( name="hcStatus"
<FormItem> render={({ field }) => (
<FormLabel>{t("expectedResponseCodes")}</FormLabel> <FormItem>
<FormControl> <FormLabel>{t("expectedResponseCodes")}</FormLabel>
<Input <FormControl>
type="number" <Input
value={field.value ?? ""} type="number"
onChange={(e) => { value={field.value ?? ""}
const val = e.target.value; onChange={(e) => {
const value = val ? parseInt(val) : null; const val = e.target.value;
handleChange("hcStatus", value, field.onChange); const value = val ? parseInt(val) : null;
}} handleChange("hcStatus", value, field.onChange);
/> }}
</FormControl> />
<FormDescription> </FormControl>
{t("expectedResponseCodesDescription")} <FormMessage />
</FormDescription> </FormItem>
<FormMessage /> )}
</FormItem> />
)} <FormField
/> control={form.control}
name="hcTlsServerName"
render={({ field }) => (
<FormItem>
<FormLabel>{t("tlsServerName")}</FormLabel>
<FormControl>
<Input
{...field}
onChange={(e) =>
handleChange(
"hcTlsServerName",
e.target.value,
(v) => field.onChange(e)
)
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
{/* TLS Server Name */} {/* Follow Redirects inline toggle */}
<FormField <FormField
control={form.control} control={form.control}
name="hcTlsServerName" name="hcFollowRedirects"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
<FormLabel>{t("tlsServerName")}</FormLabel> <FormLabel className="cursor-pointer">
{t("followRedirects")}
</FormLabel>
<FormControl> <FormControl>
<Input <Switch
{...field} checked={field.value}
onChange={(e) => onCheckedChange={(value) =>
handleChange( handleChange(
"hcTlsServerName", "hcFollowRedirects",
e.target.value, value,
(v) => field.onChange(e) field.onChange
) )
} }
/> />
</FormControl> </FormControl>
<FormDescription>
{t("tlsServerNameDescription")}
</FormDescription>
<FormMessage />
</FormItem> </FormItem>
)} )}
/> />
@@ -518,34 +554,6 @@ export function HealthCheckFormFields({
</FormItem> </FormItem>
)} )}
/> />
{/* Follow Redirects */}
<FormField
control={form.control}
name="hcFollowRedirects"
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
<div className="space-y-0.5">
<FormLabel>{t("followRedirects")}</FormLabel>
<FormDescription>
{t("followRedirectsDescription")}
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={(value) =>
handleChange(
"hcFollowRedirects",
value,
field.onChange
)
}
/>
</FormControl>
</FormItem>
)}
/>
</> </>
)} )}
</div> </div>