Add new intervals and tcp mode to health checks

messages/en-US.json

@@ -1844,6 +1844,14 @@
     "healthCheckIntervalMin": "Check interval must be at least 5 seconds",
     "healthCheckTimeoutMin": "Timeout must be at least 1 second",
     "healthCheckRetryMin": "Retry attempts must be at least 1",
+    "healthCheckMode": "Check Mode",
+    "healthCheckModeDescription": "TCP mode verifies connectivity only. HTTP mode validates the HTTP response.",
+    "healthyThreshold": "Healthy Threshold",
+    "healthyThresholdDescription": "Consecutive successes required before marking as healthy.",
+    "unhealthyThreshold": "Unhealthy Threshold",
+    "unhealthyThresholdDescription": "Consecutive failures required before marking as unhealthy.",
+    "healthCheckHealthyThresholdMin": "Healthy threshold must be at least 1",
+    "healthCheckUnhealthyThresholdMin": "Unhealthy threshold must be at least 1",
     "httpMethod": "HTTP Method",
     "selectHttpMethod": "Select HTTP method",
     "domainPickerSubdomainLabel": "Subdomain",

server/db/pg/schema/schema.ts

@@ -205,7 +205,9 @@ export const targetHealthCheck = pgTable("targetHealthCheck", {
     hcHealth: text("hcHealth")
         .$type<"unknown" | "healthy" | "unhealthy">()
         .default("unknown"), // "unknown", "healthy", "unhealthy"
-    hcTlsServerName: text("hcTlsServerName")
+    hcTlsServerName: text("hcTlsServerName"),
+    hcHealthyThreshold: integer("hcHealthyThreshold").default(1),
+    hcUnhealthyThreshold: integer("hcUnhealthyThreshold").default(1)
 });
 
 export const exitNodes = pgTable("exitNodes", {

server/db/sqlite/schema/schema.ts

@@ -232,7 +232,9 @@ export const targetHealthCheck = sqliteTable("targetHealthCheck", {
     hcHealth: text("hcHealth")
         .$type<"unknown" | "healthy" | "unhealthy">()
         .default("unknown"), // "unknown", "healthy", "unhealthy"
-    hcTlsServerName: text("hcTlsServerName")
+    hcTlsServerName: text("hcTlsServerName"),
+    hcHealthyThreshold: integer("hcHealthyThreshold").default(1),
+    hcUnhealthyThreshold: integer("hcUnhealthyThreshold").default(1)
 });
 
 export const exitNodes = sqliteTable("exitNodes", {

server/lib/blueprints/proxyResources.ts

@@ -158,7 +158,9 @@ export async function updateProxyResources(
                         healthcheckData?.["follow-redirects"],
                     hcMethod: healthcheckData?.method,
                     hcStatus: healthcheckData?.status,
-                    hcHealth: "unknown"
+                    hcHealth: "unknown",
+                    hcHealthyThreshold: healthcheckData?.["healthy-threshold"],
+                    hcUnhealthyThreshold: healthcheckData?.["unhealthy-threshold"]
                 })
                 .returning();
 
@@ -522,7 +524,9 @@ export async function updateProxyResources(
                                 healthcheckData?.followRedirects ||
                                 healthcheckData?.["follow-redirects"],
                             hcMethod: healthcheckData?.method,
-                            hcStatus: healthcheckData?.status
+                            hcStatus: healthcheckData?.status,
+                            hcHealthyThreshold: healthcheckData?.["healthy-threshold"],
+                            hcUnhealthyThreshold: healthcheckData?.["unhealthy-threshold"]
                         })
                         .where(
                             eq(
@@ -1081,6 +1085,8 @@ function checkIfHealthcheckChanged(
         JSON.stringify(incoming.hcHeaders)
     )
         return true;
+    if (existing.hcHealthyThreshold !== incoming.hcHealthyThreshold) return true;
+    if (existing.hcUnhealthyThreshold !== incoming.hcUnhealthyThreshold) return true;
 
     return false;
 }

server/lib/blueprints/types.ts

@@ -12,7 +12,7 @@ export const TargetHealthCheckSchema = z.object({
     hostname: z.string(),
     port: z.int().min(1).max(65535),
     enabled: z.boolean().optional().default(true),
-    path: z.string().optional().default("/"),
+    path: z.string().optional(),
     scheme: z.string().optional(),
     mode: z.string().default("http"),
     interval: z.int().default(30),
@@ -26,8 +26,10 @@ export const TargetHealthCheckSchema = z.object({
         .default(null),
     "follow-redirects": z.boolean().default(true),
     followRedirects: z.boolean().optional(), // deprecated alias
-    method: z.string().default("GET"),
+    method: z.string().optional(),
-    status: z.int().optional()
+    status: z.int().optional(),
+    "healthy-threshold": z.int().min(1).optional().default(1),
+    "unhealthy-threshold": z.int().min(1).optional().default(1)
 });
 
 // Schema for individual target within a resource

server/routers/newt/buildConfiguration.ts

@@ -213,7 +213,9 @@ export async function buildTargetConfigurationForNewtClient(siteId: number) {
             hcHeaders: targetHealthCheck.hcHeaders,
             hcMethod: targetHealthCheck.hcMethod,
             hcTlsServerName: targetHealthCheck.hcTlsServerName,
-            hcStatus: targetHealthCheck.hcStatus
+            hcStatus: targetHealthCheck.hcStatus,
+            hcHealthyThreshold: targetHealthCheck.hcHealthyThreshold,
+            hcUnhealthyThreshold: targetHealthCheck.hcUnhealthyThreshold
         })
         .from(targets)
         .innerJoin(resources, eq(targets.resourceId, resources.resourceId))
@@ -247,17 +249,12 @@ export async function buildTargetConfigurationForNewtClient(siteId: number) {
 
     const healthCheckTargets = allTargets.map((target) => {
         // make sure the stuff is defined
-        if (
+        const isTCP = target.hcMode?.toLowerCase() === "tcp";
-            !target.hcPath ||
+        if (!target.hcHostname || !target.hcPort || !target.hcInterval) {
-            !target.hcHostname ||
+            return null;
-            !target.hcPort ||
+        }
-            !target.hcInterval ||
+        if (!isTCP && (!target.hcPath || !target.hcMethod)) {
-            !target.hcMethod
+            return null;
-        ) {
-            // logger.debug(
-            //     `Skipping adding target health check ${target.targetId} due to missing health check fields`
-            // );
-            return null; // Skip targets with missing health check fields
         }
 
         // parse headers
@@ -287,7 +284,9 @@ export async function buildTargetConfigurationForNewtClient(siteId: number) {
             hcHeaders: hcHeadersSend,
             hcMethod: target.hcMethod,
             hcTlsServerName: target.hcTlsServerName,
-            hcStatus: target.hcStatus
+            hcStatus: target.hcStatus,
+            hcHealthyThreshold: target.hcHealthyThreshold,
+            hcUnhealthyThreshold: target.hcUnhealthyThreshold
         };
     });
 

server/routers/newt/handleNewtPingMessage.ts

@@ -9,6 +9,7 @@ import { eq, lt, isNull, and, or, ne, not } from "drizzle-orm";
 import logger from "@server/logger";
 import { sendNewtSyncMessage } from "./sync";
 import { recordPing } from "./pingAccumulator";
+import { fireSiteOfflineAlert } from "#dynamic/lib/alerts";
 
 // Track if the offline checker interval is running
 let offlineCheckerInterval: NodeJS.Timeout | null = null;
@@ -40,6 +41,8 @@ export const startNewtOfflineChecker = (): void => {
             const staleSites = await db
                 .select({
                     siteId: sites.siteId,
+                    orgId: sites.orgId,
+                    name: sites.name,
                     newtId: newts.newtId,
                     lastPing: sites.lastPing
                 })
@@ -104,6 +107,8 @@ export const startNewtOfflineChecker = (): void => {
                             )
                         );
                 }
+
+                await fireSiteOfflineAlert(staleSite.orgId, staleSite.siteId, staleSite.name);
             }
 
             // this part only effects self hosted. Its not efficient but we dont expect people to have very many wireguard sites

server/routers/newt/targets.ts

@@ -43,17 +43,18 @@ export async function addTargets(
         }
 
         // Ensure all necessary fields are present
-        if (
+        const isTCP = hc.hcMode?.toLowerCase() === "tcp";
-            !hc.hcPath ||
+        if (!hc.hcHostname || !hc.hcPort || !hc.hcInterval) {
-            !hc.hcHostname ||
-            !hc.hcPort ||
-            !hc.hcInterval ||
-            !hc.hcMethod
-        ) {
             logger.debug(
                 `Skipping target ${target.targetId} due to missing health check fields`
             );
-            return null; // Skip targets with missing health check fields
+            return null;
+        }
+        if (!isTCP && (!hc.hcPath || !hc.hcMethod)) {
+            logger.debug(
+                `Skipping target ${target.targetId} due to missing HTTP health check fields`
+            );
+            return null;
         }
 
         const hcHeadersParse = hc.hcHeaders ? JSON.parse(hc.hcHeaders) : null;
@@ -90,7 +91,9 @@ export async function addTargets(
             hcHeaders: hcHeadersSend,
             hcMethod: hc.hcMethod,
             hcStatus: hcStatus,
-            hcTlsServerName: hc.hcTlsServerName
+            hcTlsServerName: hc.hcTlsServerName,
+            hcHealthyThreshold: hc.hcHealthyThreshold,
+            hcUnhealthyThreshold: hc.hcUnhealthyThreshold
         };
     });
 

server/routers/target/createTarget.ts

@@ -42,6 +42,8 @@ const createTargetSchema = z.strictObject({
     hcMethod: z.string().min(1).optional().nullable(),
     hcStatus: z.int().optional().nullable(),
     hcTlsServerName: z.string().optional().nullable(),
+    hcHealthyThreshold: z.int().positive().min(1).optional().nullable(),
+    hcUnhealthyThreshold: z.int().positive().min(1).optional().nullable(),
     path: z.string().optional().nullable(),
     pathMatchType: z.enum(["exact", "prefix", "regex"]).optional().nullable(),
     rewritePath: z.string().optional().nullable(),
@@ -241,7 +243,9 @@ export async function createTarget(
                 hcMethod: targetData.hcMethod ?? null,
                 hcStatus: targetData.hcStatus ?? null,
                 hcHealth: "unknown",
-                hcTlsServerName: targetData.hcTlsServerName ?? null
+                hcTlsServerName: targetData.hcTlsServerName ?? null,
+                hcHealthyThreshold: targetData.hcHealthyThreshold ?? null,
+                hcUnhealthyThreshold: targetData.hcUnhealthyThreshold ?? null
             })
             .returning();
 

server/routers/target/updateTarget.ts

@@ -43,6 +43,8 @@ const updateTargetBodySchema = z
         hcMethod: z.string().min(1).optional().nullable(),
         hcStatus: z.int().optional().nullable(),
         hcTlsServerName: z.string().optional().nullable(),
+        hcHealthyThreshold: z.int().positive().min(1).optional().nullable(),
+        hcUnhealthyThreshold: z.int().positive().min(1).optional().nullable(),
         path: z.string().optional().nullable(),
         pathMatchType: z
             .enum(["exact", "prefix", "regex"])
@@ -240,6 +242,8 @@ export async function updateTarget(
                 hcMethod: parsedBody.data.hcMethod,
                 hcStatus: parsedBody.data.hcStatus,
                 hcTlsServerName: parsedBody.data.hcTlsServerName,
+                hcHealthyThreshold: parsedBody.data.hcHealthyThreshold,
+                hcUnhealthyThreshold: parsedBody.data.hcUnhealthyThreshold,
                 ...(hcHealthValue !== undefined && { hcHealth: hcHealthValue })
             })
             .where(eq(targetHealthCheck.targetId, targetId))

src/components/HealthCheckDialog.tsx

@@ -52,6 +52,8 @@ type HealthCheckConfig = {
     hcMode: string;
     hcUnhealthyInterval: number;
     hcTlsServerName: string;
+    hcHealthyThreshold: number;
+    hcUnhealthyThreshold: number;
 };
 
 type HealthCheckDialogProps = {
@@ -75,12 +77,11 @@ export default function HealthCheckDialog({
 }: HealthCheckDialogProps) {
     const t = useTranslations();
 
-    const healthCheckSchema = z.object({
+    const healthCheckSchema = z
+        .object({
             hcEnabled: z.boolean(),
-        hcPath: z.string().min(1, { message: t("healthCheckPathRequired") }),
+            hcPath: z.string().optional(),
-        hcMethod: z
+            hcMethod: z.string().optional(),
-            .string()
-            .min(1, { message: t("healthCheckMethodRequired") }),
             hcInterval: z
                 .int()
                 .positive()
@@ -111,7 +112,37 @@ export default function HealthCheckDialog({
             hcFollowRedirects: z.boolean(),
             hcMode: z.string(),
             hcUnhealthyInterval: z.int().positive().min(5),
-        hcTlsServerName: z.string()
+            hcTlsServerName: z.string(),
+            hcHealthyThreshold: z
+                .int()
+                .positive()
+                .min(1, {
+                    message: t("healthCheckHealthyThresholdMin")
+                }),
+            hcUnhealthyThreshold: z
+                .int()
+                .positive()
+                .min(1, {
+                    message: t("healthCheckUnhealthyThresholdMin")
+                })
+        })
+        .superRefine((data, ctx) => {
+            if (data.hcMode !== "tcp") {
+                if (!data.hcPath || data.hcPath.length < 1) {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: t("healthCheckPathRequired"),
+                        path: ["hcPath"]
+                    });
+                }
+                if (!data.hcMethod || data.hcMethod.length < 1) {
+                    ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        message: t("healthCheckMethodRequired"),
+                        path: ["hcMethod"]
+                    });
+                }
+            }
         });
 
     const form = useForm<z.infer<typeof healthCheckSchema>>({
@@ -122,12 +153,10 @@ export default function HealthCheckDialog({
     useEffect(() => {
         if (!open) return;
 
-        // Determine default scheme from target method
         const getDefaultScheme = () => {
             if (initialConfig?.hcScheme) {
                 return initialConfig.hcScheme;
             }
-            // Default to target method if it's http or https, otherwise default to http
             if (targetMethod === "https") {
                 return "https";
             }
@@ -148,24 +177,30 @@ export default function HealthCheckDialog({
                 ? initialConfig.hcPort.toString()
                 : "",
             hcFollowRedirects: initialConfig?.hcFollowRedirects,
-            hcMode: initialConfig?.hcMode,
+            hcMode: initialConfig?.hcMode ?? "http",
             hcUnhealthyInterval: initialConfig?.hcUnhealthyInterval,
-            hcTlsServerName: initialConfig?.hcTlsServerName ?? ""
+            hcTlsServerName: initialConfig?.hcTlsServerName ?? "",
+            hcHealthyThreshold: initialConfig?.hcHealthyThreshold ?? 1,
+            hcUnhealthyThreshold: initialConfig?.hcUnhealthyThreshold ?? 1
         });
     }, [open]);
 
     const watchedEnabled = form.watch("hcEnabled");
+    const watchedMode = form.watch("hcMode");
 
     const handleFieldChange = async (fieldName: string, value: any) => {
         try {
             const currentValues = form.getValues();
             const updatedValues = { ...currentValues, [fieldName]: value };
 
-            // Convert hcPort from string to number before passing to parent
             const configToSend: HealthCheckConfig = {
                 ...updatedValues,
+                hcPath: updatedValues.hcPath ?? "",
+                hcMethod: updatedValues.hcMethod ?? "",
                 hcPort: parseInt(updatedValues.hcPort),
-                hcStatus: updatedValues.hcStatus || null
+                hcStatus: updatedValues.hcStatus || null,
+                hcHealthyThreshold: updatedValues.hcHealthyThreshold,
+                hcUnhealthyThreshold: updatedValues.hcUnhealthyThreshold
             };
 
             await onChanges(configToSend);
@@ -226,6 +261,114 @@ export default function HealthCheckDialog({
 
                             {watchedEnabled && (
                                 <div className="space-y-4">
+                                    {/* Mode */}
+                                    <FormField
+                                        control={form.control}
+                                        name="hcMode"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t("healthCheckMode")}
+                                                </FormLabel>
+                                                <Select
+                                                    onValueChange={(value) => {
+                                                        field.onChange(value);
+                                                        handleFieldChange(
+                                                            "hcMode",
+                                                            value
+                                                        );
+                                                    }}
+                                                    value={field.value}
+                                                >
+                                                    <FormControl>
+                                                        <SelectTrigger>
+                                                            <SelectValue />
+                                                        </SelectTrigger>
+                                                    </FormControl>
+                                                    <SelectContent>
+                                                        <SelectItem value="http">
+                                                            HTTP
+                                                        </SelectItem>
+                                                        <SelectItem value="tcp">
+                                                            TCP
+                                                        </SelectItem>
+                                                    </SelectContent>
+                                                </Select>
+                                                <FormDescription>
+                                                    {t(
+                                                        "healthCheckModeDescription"
+                                                    )}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    {/* Connection fields */}
+                                    {watchedMode === "tcp" ? (
+                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                            <FormField
+                                                control={form.control}
+                                                name="hcHostname"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>
+                                                            {t("healthHostname")}
+                                                        </FormLabel>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                onChange={(
+                                                                    e
+                                                                ) => {
+                                                                    field.onChange(
+                                                                        e
+                                                                    );
+                                                                    handleFieldChange(
+                                                                        "hcHostname",
+                                                                        e.target
+                                                                            .value
+                                                                    );
+                                                                }}
+                                                            />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                            <FormField
+                                                control={form.control}
+                                                name="hcPort"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>
+                                                            {t("healthPort")}
+                                                        </FormLabel>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                onChange={(
+                                                                    e
+                                                                ) => {
+                                                                    const value =
+                                                                        e.target
+                                                                            .value;
+                                                                    field.onChange(
+                                                                        value
+                                                                    );
+                                                                    handleFieldChange(
+                                                                        "hcPort",
+                                                                        value
+                                                                    );
+                                                                }}
+                                                            />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </div>
+                                    ) : (
                                         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                                             <FormField
                                                 control={form.control}
@@ -284,7 +427,9 @@ export default function HealthCheckDialog({
                                                         <FormControl>
                                                             <Input
                                                                 {...field}
-                                                            onChange={(e) => {
+                                                                onChange={(
+                                                                    e
+                                                                ) => {
                                                                     field.onChange(
                                                                         e
                                                                     );
@@ -311,7 +456,9 @@ export default function HealthCheckDialog({
                                                         <FormControl>
                                                             <Input
                                                                 {...field}
-                                                            onChange={(e) => {
+                                                                onChange={(
+                                                                    e
+                                                                ) => {
                                                                     const value =
                                                                         e.target
                                                                             .value;
@@ -340,7 +487,9 @@ export default function HealthCheckDialog({
                                                         <FormControl>
                                                             <Input
                                                                 {...field}
-                                                            onChange={(e) => {
+                                                                onChange={(
+                                                                    e
+                                                                ) => {
                                                                     field.onChange(
                                                                         e
                                                                     );
@@ -357,8 +506,10 @@ export default function HealthCheckDialog({
                                                 )}
                                             />
                                         </div>
+                                    )}
 
                                     {/* HTTP Method */}
+                                    {watchedMode !== "tcp" && (
                                         <FormField
                                             control={form.control}
                                             name="hcMethod"
@@ -368,14 +519,20 @@ export default function HealthCheckDialog({
                                                         {t("httpMethod")}
                                                     </FormLabel>
                                                     <Select
-                                                    onValueChange={(value) => {
+                                                        onValueChange={(
-                                                        field.onChange(value);
+                                                            value
+                                                        ) => {
+                                                            field.onChange(
+                                                                value
+                                                            );
                                                             handleFieldChange(
                                                                 "hcMethod",
                                                                 value
                                                             );
                                                         }}
-                                                    defaultValue={field.value}
+                                                        defaultValue={
+                                                            field.value
+                                                        }
                                                     >
                                                         <FormControl>
                                                             <SelectTrigger>
@@ -408,8 +565,9 @@ export default function HealthCheckDialog({
                                                 </FormItem>
                                             )}
                                         />
+                                    )}
 
-                                    {/* Check Interval, Timeout, and Retry Attempts */}
+                                    {/* Check Interval, Unhealthy Interval, and Timeout */}
                                     <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                                         <FormField
                                             control={form.control}
@@ -515,6 +673,88 @@ export default function HealthCheckDialog({
                                         />
                                     </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
+                                                                    );
+                                                                field.onChange(
+                                                                    value
+                                                                );
+                                                                handleFieldChange(
+                                                                    "hcHealthyThreshold",
+                                                                    value
+                                                                );
+                                                            }}
+                                                        />
+                                                    </FormControl>
+                                                    <FormDescription>
+                                                        {t(
+                                                            "healthyThresholdDescription"
+                                                        )}
+                                                    </FormDescription>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+
+                                        <FormField
+                                            control={form.control}
+                                            name="hcUnhealthyThreshold"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("unhealthyThreshold")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            type="number"
+                                                            {...field}
+                                                            onChange={(e) => {
+                                                                const value =
+                                                                    parseInt(
+                                                                        e.target
+                                                                            .value
+                                                                    );
+                                                                field.onChange(
+                                                                    value
+                                                                );
+                                                                handleFieldChange(
+                                                                    "hcUnhealthyThreshold",
+                                                                    value
+                                                                );
+                                                            }}
+                                                        />
+                                                    </FormControl>
+                                                    <FormDescription>
+                                                        {t(
+                                                            "unhealthyThresholdDescription"
+                                                        )}
+                                                    </FormDescription>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </div>
+
+                                    {/* HTTP-only fields */}
+                                    {watchedMode !== "tcp" && (
+                                        <>
                                             {/* Expected Response Codes */}
                                             <FormField
                                                 control={form.control}
@@ -522,19 +762,25 @@ export default function HealthCheckDialog({
                                                 render={({ field }) => (
                                                     <FormItem>
                                                         <FormLabel>
-                                                    {t("expectedResponseCodes")}
+                                                            {t(
+                                                                "expectedResponseCodes"
+                                                            )}
                                                         </FormLabel>
                                                         <FormControl>
                                                             <Input
                                                                 type="number"
                                                                 {...field}
                                                                 value={
-                                                            field.value || ""
+                                                                    field.value ||
+                                                                    ""
                                                                 }
-                                                        onChange={(e) => {
+                                                                onChange={(
+                                                                    e
+                                                                ) => {
                                                                     const value =
                                                                         parseInt(
-                                                                    e.target
+                                                                            e
+                                                                                .target
                                                                                 .value
                                                                         );
                                                                     field.onChange(
@@ -569,11 +815,16 @@ export default function HealthCheckDialog({
                                                         <FormControl>
                                                             <Input
                                                                 {...field}
-                                                        onChange={(e) => {
+                                                                onChange={(
-                                                            field.onChange(e);
+                                                                    e
+                                                                ) => {
+                                                                    field.onChange(
+                                                                        e
+                                                                    );
                                                                     handleFieldChange(
                                                                         "hcTlsServerName",
-                                                                e.target.value
+                                                                        e.target
+                                                                            .value
                                                                     );
                                                                 }}
                                                             />
@@ -599,8 +850,12 @@ export default function HealthCheckDialog({
                                                         </FormLabel>
                                                         <FormControl>
                                                             <HeadersInput
-                                                        value={field.value}
+                                                                value={
-                                                        onChange={(value) => {
+                                                                    field.value
+                                                                }
+                                                                onChange={(
+                                                                    value
+                                                                ) => {
                                                                     field.onChange(
                                                                         value
                                                                     );
@@ -621,6 +876,8 @@ export default function HealthCheckDialog({
                                                     </FormItem>
                                                 )}
                                             />
+                                        </>
+                                    )}
                                 </div>
                             )}
                         </form>