Add the site to the ui and allow picking

server/routers/healthChecks/types.ts

@@ -2,6 +2,9 @@ export type ListHealthChecksResponse = {
     healthChecks: {
         targetHealthCheckId: number;
         name: string;
+        siteId: number | null;
+        siteName: string | null;
+        siteNiceId: string | null;
         hcEnabled: boolean;
         hcHealth: "unknown" | "healthy" | "unhealthy";
         hcMode: string | null;

src/components/HealthCheckCredenza.tsx

@@ -41,6 +41,11 @@ import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useTranslations } from "next-intl";
 import { ContactSalesBanner } from "@app/components/ContactSalesBanner";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { SitesSelector } from "@app/components/site-selector";
+import type { Selectedsite } from "@app/components/site-selector";
+import { CaretSortIcon } from "@radix-ui/react-icons";
+import { cn } from "@app/lib/cn";
 
 export type HealthCheckConfig = {
     hcEnabled: boolean;
@@ -84,6 +89,9 @@ export type HealthCheckRow = {
     resourceId: number | null;
     resourceName: string | null;
     resourceNiceId: string | null;
+    siteId: number | null;
+    siteName: string | null;
+    siteNiceId: string | null;
 };
 
 export type HealthCheckCredenzaProps =
@@ -132,6 +140,7 @@ export function HealthCheckCredenza(props: HealthCheckCredenzaProps) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
     const [loading, setLoading] = useState(false);
+    const [selectedSite, setSelectedSite] = useState<Selectedsite | null>(null);
 
     const healthCheckSchema = z
         .object({
@@ -280,8 +289,14 @@ export function HealthCheckCredenza(props: HealthCheckCredenzaProps) {
                     hcStatus: initialValues.hcStatus ?? null,
                     hcHeaders: parsedHeaders
                 });
+                if (initialValues.siteId && initialValues.siteName) {
+                    setSelectedSite({ siteId: initialValues.siteId, name: initialValues.siteName, type: "" });
+                } else {
+                    setSelectedSite(null);
+                }
             } else {
                 form.reset(DEFAULT_VALUES);
+                setSelectedSite(null);
             }
         }
     }, [open]);
@@ -331,6 +346,7 @@ export function HealthCheckCredenza(props: HealthCheckCredenzaProps) {
         try {
             const payload = {
                 name: (values as any).name,
+                siteId: selectedSite?.siteId,
                 hcEnabled: values.hcEnabled,
                 hcMode: values.hcMode,
                 hcScheme: values.hcScheme,
@@ -439,6 +455,42 @@ export function HealthCheckCredenza(props: HealthCheckCredenzaProps) {
                                 />
                             )}
 
+                            {/* Site picker (submit mode only) */}
+                            {mode === "submit" && (
+                                <div className="mt-4">
+                                    <FormItem>
+                                        <FormLabel>{t("site")}</FormLabel>
+                                        <Popover>
+                                            <PopoverTrigger asChild>
+                                                <Button
+                                                    type="button"
+                                                    variant="outline"
+                                                    role="combobox"
+                                                    className={cn(
+                                                        "w-full justify-between",
+                                                        !selectedSite && "text-muted-foreground"
+                                                    )}
+                                                >
+                                                    <span className="truncate">
+                                                        {selectedSite ? selectedSite.name : t("siteSelect")}
+                                                    </span>
+                                                    <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                                </Button>
+                                            </PopoverTrigger>
+                                            <PopoverContent className="p-0 w-full min-w-64">
+                                                <SitesSelector
+                                                    orgId={orgId!}
+                                                    selectedSite={selectedSite}
+                                                    onSelectSite={(site) => {
+                                                        setSelectedSite(site);
+                                                    }}
+                                                />
+                                            </PopoverContent>
+                                        </Popover>
+                                    </FormItem>
+                                </div>
+                            )}
+
                             <div className="mt-5">
                                 <HorizontalTabs
                                     clientSide

src/components/HealthChecksTable.tsx

@@ -240,6 +240,27 @@ export default function HealthChecksTable({
                 );
             }
         },
+        {
+            id: "site",
+            friendlyName: "Site",
+            header: () => (
+                <span className="p-3">Site</span>
+            ),
+            cell: ({ row }) => {
+                const r = row.original;
+                if (!r.siteId || !r.siteName || !r.siteNiceId) {
+                    return <span className="text-neutral-400">-</span>;
+                }
+                return (
+                    <Link href={`/${orgId}/settings/sites/${r.siteNiceId}/general`}>
+                        <Button variant="outline" size="sm">
+                            {r.siteName}
+                            <ArrowUpRight className="ml-2 h-3 w-3" />
+                        </Button>
+                    </Link>
+                );
+            }
+        },
         {
             id: "health",
             friendlyName: t("standaloneHcColumnHealth"),

src/lib/queries.ts

@@ -335,6 +335,9 @@ export const orgQueries = {
                         healthChecks: {
                             targetHealthCheckId: number;
                             name: string;
+                            siteId: number | null;
+                            siteName: string | null;
+                            siteNiceId: string | null;
                             hcEnabled: boolean;
                             hcHealth: "unknown" | "healthy" | "unhealthy";
                             hcMode: string | null;