add site column and filter to public resources

2026-05-04 11:34:19 +00:00 · 2026-04-24 16:24:26 -07:00
parent 33f1662c91
commit 960ada4d66
5 changed files with 339 additions and 131 deletions
--- a/src/components/ClientResourcesTable.tsx
+++ b/src/components/ClientResourcesTable.tsx
@@ -48,13 +48,12 @@ import { useNavigationContext } from "@app/hooks/useNavigationContext";
 import { useDebouncedCallback } from "use-debounce";
 import { ColumnFilterButton } from "./ColumnFilterButton";
 import { cn } from "@app/lib/cn";
+import {
+    ResourceSitesStatusCell,
+    type ResourceSiteRow
+} from "@app/components/ResourceSitesStatusCell";

-export type InternalResourceSiteRow = {
-    siteId: number;
-    siteName: string;
-    siteNiceId: string;
-    online: boolean;
-};
+export type InternalResourceSiteRow = ResourceSiteRow;

 export type InternalResourceRow = {
    id: number;
@@ -119,109 +118,6 @@ function isSafeUrlForLink(href: string): boolean {
    }
 }

-type AggregateSitesStatus = "allOnline" | "partial" | "allOffline";
-
-function aggregateSitesStatus(
-    resourceSites: InternalResourceSiteRow[]
-): AggregateSitesStatus {
-    if (resourceSites.length === 0) {
-        return "allOffline";
-    }
-    const onlineCount = resourceSites.filter((rs) => rs.online).length;
-    if (onlineCount === resourceSites.length) return "allOnline";
-    if (onlineCount > 0) return "partial";
-    return "allOffline";
-}
-
-function aggregateStatusDotClass(status: AggregateSitesStatus): string {
-    switch (status) {
-        case "allOnline":
-            return "bg-green-500";
-        case "partial":
-            return "bg-yellow-500";
-        case "allOffline":
-        default:
-            return "bg-neutral-500";
-    }
-}
-
-function ClientResourceSitesStatusCell({
-    orgId,
-    resourceSites
-}: {
-    orgId: string;
-    resourceSites: InternalResourceSiteRow[];
-}) {
-    const t = useTranslations();
-
-    if (resourceSites.length === 0) {
-        return <span>-</span>;
-    }
-
-    const aggregate = aggregateSitesStatus(resourceSites);
-    const countLabel = t("multiSitesSelectorSitesCount", {
-        count: resourceSites.length
-    });
-
-    return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button
-                    variant="ghost"
-                    size="sm"
-                    className="flex h-8 items-center gap-2 px-0 font-normal"
-                >
-                    <div
-                        className={cn(
-                            "h-2 w-2 shrink-0 rounded-full",
-                            aggregateStatusDotClass(aggregate)
-                        )}
-                    />
-                    <span className="text-sm tabular-nums">{countLabel}</span>
-                    <ChevronDown className="h-3 w-3 shrink-0" />
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="min-w-56">
-                {resourceSites.map((site) => {
-                    const isOnline = site.online;
-                    return (
-                        <DropdownMenuItem key={site.siteId} asChild>
-                            <Link
-                                href={`/${orgId}/settings/sites/${site.siteNiceId}`}
-                                className="flex cursor-pointer items-center justify-between gap-4"
-                            >
-                                <div className="flex min-w-0 items-center gap-2">
-                                    <div
-                                        className={cn(
-                                            "h-2 w-2 shrink-0 rounded-full",
-                                            isOnline
-                                                ? "bg-green-500"
-                                                : "bg-neutral-500"
-                                        )}
-                                    />
-                                    <span className="truncate">
-                                        {site.siteName}
-                                    </span>
-                                </div>
-                                <span
-                                    className={cn(
-                                        "shrink-0 capitalize",
-                                        isOnline
-                                            ? "text-green-600"
-                                            : "text-muted-foreground"
-                                    )}
-                                >
-                                    {isOnline ? t("online") : t("offline")}
-                                </span>
-                            </Link>
-                        </DropdownMenuItem>
-                    );
-                })}
-            </DropdownMenuContent>
-        </DropdownMenu>
-    );
-}
-
 type ClientResourcesTableProps = {
    internalResources: InternalResourceRow[];
    orgId: string;
@@ -321,9 +217,7 @@ export default function ClientResourcesTable({

        if (siteNames.length === 1) {
            return (
-                <Link
-                    href={`/${orgId}/settings/sites/${siteNiceIds[0]}`}
-                >
+                <Link href={`/${orgId}/settings/sites/${siteNiceIds[0]}`}>
                    <Button variant="outline">
                        {siteNames[0]}
                        <ArrowUpRight className="ml-2 h-4 w-4" />
@@ -348,10 +242,7 @@ export default function ClientResourcesTable({
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start">
                    {siteNames.map((siteName, idx) => (
-                        <DropdownMenuItem
-                            key={siteNiceIds[idx]}
-                            asChild
-                        >
+                        <DropdownMenuItem key={siteNiceIds[idx]} asChild>
                            <Link
                                href={`/${orgId}/settings/sites/${siteNiceIds[idx]}`}
                                className="flex items-center gap-2 cursor-pointer"
@@ -470,7 +361,7 @@ export default function ClientResourcesTable({
            cell: ({ row }) => {
                const resourceRow = row.original;
                return (
-                    <ClientResourceSitesStatusCell
+                    <ResourceSitesStatusCell
                        orgId={resourceRow.orgId}
                        resourceSites={resourceRow.sites}
                    />
--- a/src/components/ProxyResourcesTable.tsx
+++ b/src/components/ProxyResourcesTable.tsx
@@ -2,6 +2,11 @@

 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import CopyToClipboard from "@app/components/CopyToClipboard";
+import {
+    ResourceSitesStatusCell,
+    type ResourceSiteRow
+} from "@app/components/ResourceSitesStatusCell";
+import { Badge } from "@app/components/ui/badge";
 import { Button } from "@app/components/ui/button";
 import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
@@ -11,9 +16,16 @@ import {
    DropdownMenuTrigger
 } from "@app/components/ui/dropdown-menu";
 import { InfoPopup } from "@app/components/ui/info-popup";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
 import { Switch } from "@app/components/ui/switch";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useNavigationContext } from "@app/hooks/useNavigationContext";
+import { Selectedsite, SitesSelector } from "@app/components/site-selector";
+import { cn } from "@app/lib/cn";
 import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
@@ -29,6 +41,7 @@ import {
    ChevronDown,
    ChevronsUpDownIcon,
    Clock,
+    Funnel,
    MoreHorizontal,
    ShieldCheck,
    ShieldOff,
@@ -39,6 +52,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import {
    useEffect,
+    useMemo,
    useOptimistic,
    useRef,
    useState,
@@ -83,6 +97,7 @@ export type ResourceRow = {
    targetHost?: string;
    targetPort?: number;
    targets?: TargetHealth[];
+    sites: ResourceSiteRow[];
 };

 function getOverallHealthStatus(
@@ -144,13 +159,15 @@ type ProxyResourcesTableProps = {
    orgId: string;
    pagination: PaginationState;
    rowCount: number;
+    initialFilterSite?: Selectedsite | null;
 };

 export default function ProxyResourcesTable({
    resources,
    orgId,
    pagination,
-    rowCount
+    rowCount,
+    initialFilterSite = null
 }: ProxyResourcesTableProps) {
    const router = useRouter();
    const {
@@ -170,13 +187,30 @@ export default function ProxyResourcesTable({

    const [isRefreshing, startTransition] = useTransition();
    const [isNavigatingToAddPage, startNavigation] = useTransition();
+    const [siteFilterOpen, setSiteFilterOpen] = useState(false);
+
+    const siteIdQ = searchParams.get("siteId");
+    const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
+    const selectedSite: Selectedsite | null = useMemo(() => {
+        if (!siteIdQ || !Number.isInteger(siteIdNum) || siteIdNum <= 0) {
+            return null;
+        }
+        if (initialFilterSite && initialFilterSite.siteId === siteIdNum) {
+            return initialFilterSite;
+        }
+        return {
+            siteId: siteIdNum,
+            name: t("standaloneHcFilterSiteIdFallback", { id: siteIdNum }),
+            type: "newt"
+        };
+    }, [initialFilterSite, siteIdQ, siteIdNum, t]);

    useEffect(() => {
        const interval = setInterval(() => {
            router.refresh();
        }, 10_000);
        return () => clearInterval(interval);
-    }, []);
+    }, [router]);

    const refreshData = () => {
        startTransition(() => {
@@ -375,6 +409,67 @@ export default function ProxyResourcesTable({
                return <span>{row.original.nice || "-"}</span>;
            }
        },
+        {
+            id: "sites",
+            accessorFn: (row) =>
+                row.sites.map((s) => s.siteName).join(", "),
+            friendlyName: t("sites"),
+            header: () => (
+                <Popover open={siteFilterOpen} onOpenChange={setSiteFilterOpen}>
+                    <PopoverTrigger asChild>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            role="combobox"
+                            className={cn(
+                                "justify-between text-sm h-8 px-2 w-full p-3",
+                                !selectedSite && "text-muted-foreground"
+                            )}
+                        >
+                            <div className="flex items-center gap-2 min-w-0">
+                                {t("sites")}
+                                <Funnel className="size-4 flex-none" />
+                                {selectedSite && (
+                                    <Badge
+                                        className="truncate max-w-[10rem]"
+                                        variant="secondary"
+                                    >
+                                        {selectedSite.name}
+                                    </Badge>
+                                )}
+                            </div>
+                        </Button>
+                    </PopoverTrigger>
+                    <PopoverContent
+                        className="w-[min(20rem,var(--radix-popover-trigger-width))] p-0"
+                        align="start"
+                    >
+                        <div className="border-b p-1">
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                size="sm"
+                                className="h-8 w-full justify-start font-normal"
+                                onClick={clearSiteFilter}
+                            >
+                                {t("standaloneHcFilterAnySite")}
+                            </Button>
+                        </div>
+                        <SitesSelector
+                            orgId={orgId}
+                            selectedSite={selectedSite}
+                            onSelectSite={onPickSite}
+                        />
+                    </PopoverContent>
+                </Popover>
+            ),
+            cell: ({ row }) => (
+                <ResourceSitesStatusCell
+                    orgId={row.original.orgId}
+                    resourceSites={row.original.sites}
+                />
+            )
+        },
        {
            accessorKey: "protocol",
            friendlyName: t("protocol"),
@@ -620,6 +715,16 @@ export default function ProxyResourcesTable({
        });
    }

+    const clearSiteFilter = () => {
+        handleFilterChange("siteId", undefined);
+        setSiteFilterOpen(false);
+    };
+
+    const onPickSite = (site: Selectedsite) => {
+        handleFilterChange("siteId", String(site.siteId));
+        setSiteFilterOpen(false);
+    };
+
    function toggleSort(column: string) {
        const newSearch = getNextSortOrder(column, searchParams);

--- a/src/components/ResourceSitesStatusCell.tsx
+++ b/src/components/ResourceSitesStatusCell.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "@app/components/ui/dropdown-menu";
+import { cn } from "@app/lib/cn";
+import { ChevronDown } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+
+export type ResourceSiteRow = {
+    siteId: number;
+    siteName: string;
+    siteNiceId: string;
+    online: boolean;
+};
+
+type AggregateSitesStatus = "allOnline" | "partial" | "allOffline";
+
+function aggregateSitesStatus(
+    resourceSites: ResourceSiteRow[]
+): AggregateSitesStatus {
+    if (resourceSites.length === 0) {
+        return "allOffline";
+    }
+    const onlineCount = resourceSites.filter((rs) => rs.online).length;
+    if (onlineCount === resourceSites.length) return "allOnline";
+    if (onlineCount > 0) return "partial";
+    return "allOffline";
+}
+
+function aggregateStatusDotClass(status: AggregateSitesStatus): string {
+    switch (status) {
+        case "allOnline":
+            return "bg-green-500";
+        case "partial":
+            return "bg-yellow-500";
+        case "allOffline":
+        default:
+            return "bg-neutral-500";
+    }
+}
+
+export function ResourceSitesStatusCell({
+    orgId,
+    resourceSites
+}: {
+    orgId: string;
+    resourceSites: ResourceSiteRow[];
+}) {
+    const t = useTranslations();
+
+    if (resourceSites.length === 0) {
+        return <span>-</span>;
+    }
+
+    const aggregate = aggregateSitesStatus(resourceSites);
+    const countLabel = t("multiSitesSelectorSitesCount", {
+        count: resourceSites.length
+    });
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="flex h-8 items-center gap-2 px-0 font-normal"
+                >
+                    <div
+                        className={cn(
+                            "h-2 w-2 shrink-0 rounded-full",
+                            aggregateStatusDotClass(aggregate)
+                        )}
+                    />
+                    <span className="text-sm tabular-nums">{countLabel}</span>
+                    <ChevronDown className="h-3 w-3 shrink-0" />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="min-w-56">
+                {resourceSites.map((site) => {
+                    const isOnline = site.online;
+                    return (
+                        <DropdownMenuItem key={site.siteId} asChild>
+                            <Link
+                                href={`/${orgId}/settings/sites/${site.siteNiceId}`}
+                                className="flex cursor-pointer items-center justify-between gap-4"
+                            >
+                                <div className="flex min-w-0 items-center gap-2">
+                                    <div
+                                        className={cn(
+                                            "h-2 w-2 shrink-0 rounded-full",
+                                            isOnline
+                                                ? "bg-green-500"
+                                                : "bg-neutral-500"
+                                        )}
+                                    />
+                                    <span className="truncate">
+                                        {site.siteName}
+                                    </span>
+                                </div>
+                                <span
+                                    className={cn(
+                                        "shrink-0 capitalize",
+                                        isOnline
+                                            ? "text-green-600"
+                                            : "text-muted-foreground"
+                                    )}
+                                >
+                                    {isOnline ? t("online") : t("offline")}
+                                </span>
+                            </Link>
+                        </DropdownMenuItem>
+                    );
+                })}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}