✨serverside filter+paginate client resources table

server/db/pg/schema/schema.ts

@@ -219,7 +219,7 @@ export const siteResources = pgTable("siteResources", {
         .references(() => orgs.orgId, { onDelete: "cascade" }),
     niceId: varchar("niceId").notNull(),
     name: varchar("name").notNull(),
-    mode: varchar("mode").notNull(), // "host" | "cidr" | "port"
+    mode: varchar("mode").$type<"host" | "cidr">().notNull(), // "host" | "cidr" | "port"
     protocol: varchar("protocol"), // only for port mode
     proxyPort: integer("proxyPort"), // only for port mode
     destinationPort: integer("destinationPort"), // only for port mode

server/routers/resource/listResources.ts

@@ -69,38 +69,6 @@ const listResourcesSchema = z.object({
         .catch(undefined)
 });
 
-// (resource fields + a single joined target)
-type JoinedRow = {
-    resourceId: number;
-    niceId: string;
-    name: string;
-    ssl: boolean;
-    fullDomain: string | null;
-    passwordId: number | null;
-    sso: boolean;
-    pincodeId: number | null;
-    whitelist: boolean;
-    http: boolean;
-    protocol: string;
-    proxyPort: number | null;
-    enabled: boolean;
-    domainId: string | null;
-    headerAuthId: number | null;
-
-    // total_targets: number;
-    // healthy_targets: number;
-    // unhealthy_targets: number;
-    // unknown_targets: number;
-
-    // targetId: number | null;
-    // targetIp: string | null;
-    // targetPort: number | null;
-    // targetEnabled: boolean | null;
-
-    // hcHealth: string | null;
-    // hcEnabled: boolean | null;
-};
-
 // grouped by resource with targets[])
 export type ResourceWithTargets = {
     resourceId: number;

server/routers/site/listSites.ts

@@ -247,7 +247,7 @@ export async function listSites(
         const baseQuery = querySitesBase().where(conditions);
 
         // we need to add `as` so that drizzle filters the result as a subquery
-        const countQuery = db.$count(baseQuery.as("filtered_sites"));
+        const countQuery = db.$count(querySitesBase().where(conditions));
 
         const siteListQuery = baseQuery
             .limit(pageSize)

server/routers/siteResource/listAllSiteResourcesByOrg.ts

@@ -1,11 +1,11 @@
 import { Request, Response, NextFunction } from "express";
 import { z } from "zod";
-import { db } from "@server/db";
+import { db, resources } from "@server/db";
 import { siteResources, sites, SiteResource } from "@server/db";
 import response from "@server/lib/response";
 import HttpCode from "@server/types/HttpCode";
 import createHttpError from "http-errors";
-import { eq, and } from "drizzle-orm";
+import { eq, and, asc, ilike, or } from "drizzle-orm";
 import { fromError } from "zod-validation-error";
 import logger from "@server/logger";
 import { OpenAPITags, registry } from "@server/openApi";
@@ -15,18 +15,22 @@ const listAllSiteResourcesByOrgParamsSchema = z.strictObject({
 });
 
 const listAllSiteResourcesByOrgQuerySchema = z.object({
-    limit: z
+    pageSize: z.coerce
-        .string()
+        .number<string>() // for prettier formatting
+        .int()
+        .positive()
         .optional()
-        .default("1000")
+        .catch(20)
-        .transform(Number)
+        .default(20),
-        .pipe(z.int().positive()),
+    page: z.coerce
-    offset: z
+        .number<string>() // for prettier formatting
-        .string()
+        .int()
+        .min(0)
         .optional()
-        .default("0")
+        .catch(1)
-        .transform(Number)
+        .default(1),
-        .pipe(z.int().nonnegative())
+    query: z.string().optional(),
+    mode: z.enum(["host", "cidr"]).optional().catch(undefined)
 });
 
 export type ListAllSiteResourcesByOrgResponse = {
@@ -35,8 +39,36 @@ export type ListAllSiteResourcesByOrgResponse = {
         siteNiceId: string;
         siteAddress: string | null;
     })[];
+    pagination: { total: number; pageSize: number; page: number };
 };
 
+function querySiteResourcesBase() {
+    return db
+        .select({
+            siteResourceId: siteResources.siteResourceId,
+            siteId: siteResources.siteId,
+            orgId: siteResources.orgId,
+            niceId: siteResources.niceId,
+            name: siteResources.name,
+            mode: siteResources.mode,
+            protocol: siteResources.protocol,
+            proxyPort: siteResources.proxyPort,
+            destinationPort: siteResources.destinationPort,
+            destination: siteResources.destination,
+            enabled: siteResources.enabled,
+            alias: siteResources.alias,
+            aliasAddress: siteResources.aliasAddress,
+            tcpPortRangeString: siteResources.tcpPortRangeString,
+            udpPortRangeString: siteResources.udpPortRangeString,
+            disableIcmp: siteResources.disableIcmp,
+            siteName: sites.name,
+            siteNiceId: sites.niceId,
+            siteAddress: sites.address
+        })
+        .from(siteResources)
+        .innerJoin(sites, eq(siteResources.siteId, sites.siteId));
+}
+
 registry.registerPath({
     method: "get",
     path: "/org/{orgId}/site-resources",
@@ -80,39 +112,50 @@ export async function listAllSiteResourcesByOrg(
         }
 
         const { orgId } = parsedParams.data;
-        const { limit, offset } = parsedQuery.data;
+        const { page, pageSize, query, mode } = parsedQuery.data;
+
+        let conditions = and(eq(siteResources.orgId, orgId));
+        if (query) {
+            conditions = and(
+                conditions,
+                or(
+                    ilike(siteResources.name, "%" + query + "%"),
+                    ilike(siteResources.destination, "%" + query + "%"),
+                    ilike(siteResources.alias, "%" + query + "%"),
+                    ilike(siteResources.aliasAddress, "%" + query + "%"),
+                    ilike(sites.name, "%" + query + "%")
+                )
+            );
+        }
+
+        if (mode) {
+            conditions = and(conditions, eq(siteResources.mode, mode));
+        }
+
+        const baseQuery = querySiteResourcesBase().where(conditions);
+
+        const countQuery = db.$count(
+            querySiteResourcesBase().where(conditions)
+        );
 
         // Get all site resources for the org with site names
-        const siteResourcesList = await db
+        const [siteResourcesList, totalCount] = await Promise.all([
-            .select({
+            baseQuery
-                siteResourceId: siteResources.siteResourceId,
+                .limit(pageSize)
-                siteId: siteResources.siteId,
+                .offset(pageSize * (page - 1))
-                orgId: siteResources.orgId,
+                .orderBy(asc(siteResources.siteResourceId)),
-                niceId: siteResources.niceId,
+            countQuery
-                name: siteResources.name,
+        ]);
-                mode: siteResources.mode,
-                protocol: siteResources.protocol,
-                proxyPort: siteResources.proxyPort,
-                destinationPort: siteResources.destinationPort,
-                destination: siteResources.destination,
-                enabled: siteResources.enabled,
-                alias: siteResources.alias,
-                aliasAddress: siteResources.aliasAddress,
-                tcpPortRangeString: siteResources.tcpPortRangeString,
-                udpPortRangeString: siteResources.udpPortRangeString,
-                disableIcmp: siteResources.disableIcmp,
-                siteName: sites.name,
-                siteNiceId: sites.niceId,
-                siteAddress: sites.address
-            })
-            .from(siteResources)
-            .innerJoin(sites, eq(siteResources.siteId, sites.siteId))
-            .where(eq(siteResources.orgId, orgId))
-            .limit(limit)
-            .offset(offset);
 
-        return response(res, {
+        return response<ListAllSiteResourcesByOrgResponse>(res, {
-            data: { siteResources: siteResourcesList },
+            data: {
+                siteResources: siteResourcesList,
+                pagination: {
+                    total: totalCount,
+                    pageSize,
+                    page
+                }
+            },
             success: true,
             error: false,
             message: "Site resources retrieved successfully",

src/app/[orgId]/settings/resources/client/page.tsx

@@ -14,7 +14,7 @@ import { redirect } from "next/navigation";
 
 export interface ClientResourcesPageProps {
     params: Promise<{ orgId: string }>;
-    searchParams: Promise<{ view?: string }>;
+    searchParams: Promise<Record<string, string>>;
 }
 
 export default async function ClientResourcesPage(
@@ -22,22 +22,24 @@ export default async function ClientResourcesPage(
 ) {
     const params = await props.params;
     const t = await getTranslations();
-
+    const searchParams = new URLSearchParams(await props.searchParams);
-    let resources: ListResourcesResponse["resources"] = [];
-    try {
-        const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
-            `/org/${params.orgId}/resources`,
-            await authCookieHeader()
-        );
-        resources = res.data.data.resources;
-    } catch (e) {}
 
     let siteResources: ListAllSiteResourcesByOrgResponse["siteResources"] = [];
+    let pagination: ListResourcesResponse["pagination"] = {
+        total: 0,
+        page: 1,
+        pageSize: 20
+    };
     try {
         const res = await internal.get<
             AxiosResponse<ListAllSiteResourcesByOrgResponse>
-        >(`/org/${params.orgId}/site-resources`, await authCookieHeader());
+        >(
-        siteResources = res.data.data.siteResources;
+            `/org/${params.orgId}/site-resources?${searchParams.toString()}`,
+            await authCookieHeader()
+        );
+        const responseData = res.data.data;
+        siteResources = responseData.siteResources;
+        pagination = responseData.pagination;
     } catch (e) {}
 
     let org = null;
@@ -89,9 +91,10 @@ export default async function ClientResourcesPage(
                 <ClientResourcesTable
                     internalResources={internalResourceRows}
                     orgId={params.orgId}
-                    defaultSort={{
+                    rowCount={pagination.total}
-                        id: "name",
+                    pagination={{
-                        desc: false
+                        pageIndex: pagination.page - 1,
+                        pageSize: pagination.pageSize
                     }}
                 />
             </OrgProvider>

src/components/ClientResourcesTable.tsx

@@ -25,6 +25,11 @@ import CreateInternalResourceDialog from "@app/components/CreateInternalResource
 import EditInternalResourceDialog from "@app/components/EditInternalResourceDialog";
 import { orgQueries } from "@app/lib/queries";
 import { useQuery } from "@tanstack/react-query";
+import type { PaginationState } from "@tanstack/react-table";
+import { ControlledDataTable } from "./ui/controlled-data-table";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
+import { useDebouncedCallback } from "use-debounce";
+import { ColumnFilterButton } from "./ColumnFilterButton";
 
 export type InternalResourceRow = {
     id: number;
@@ -51,18 +56,22 @@ export type InternalResourceRow = {
 type ClientResourcesTableProps = {
     internalResources: InternalResourceRow[];
     orgId: string;
-    defaultSort?: {
+    pagination: PaginationState;
-        id: string;
+    rowCount: number;
-        desc: boolean;
-    };
 };
 
 export default function ClientResourcesTable({
     internalResources,
     orgId,
-    defaultSort
+    pagination,
+    rowCount
 }: ClientResourcesTableProps) {
     const router = useRouter();
+    const {
+        navigate: filter,
+        isNavigating: isFiltering,
+        searchParams
+    } = useNavigationContext();
     const t = useTranslations();
 
     const { env } = useEnvContext();
@@ -180,9 +189,24 @@ export default function ClientResourcesTable({
             accessorKey: "mode",
             friendlyName: t("editInternalResourceDialogMode"),
             header: () => (
-                <span className="p-3">
+                <ColumnFilterButton
-                    {t("editInternalResourceDialogMode")}
+                    options={[
-                </span>
+                        {
+                            value: "host",
+                            label: t("editInternalResourceDialogModeHost")
+                        },
+                        {
+                            value: "cidr",
+                            label: t("editInternalResourceDialogModeCidr")
+                        }
+                    ]}
+                    selectedValue={searchParams.get("mode") ?? undefined}
+                    onValueChange={(value) => handleFilterChange("mode", value)}
+                    searchPlaceholder={t("searchPlaceholder")}
+                    emptyMessage={t("emptySearchOptions")}
+                    label={t("editInternalResourceDialogMode")}
+                    className="p-3"
+                />
             ),
             cell: ({ row }) => {
                 const resourceRow = row.original;
@@ -300,6 +324,37 @@ export default function ClientResourcesTable({
         }
     ];
 
+    function handleFilterChange(
+        column: string,
+        value: string | undefined | null
+    ) {
+        searchParams.delete(column);
+        searchParams.delete("page");
+
+        if (value) {
+            searchParams.set(column, value);
+        }
+        filter({
+            searchParams
+        });
+    }
+
+    const handlePaginationChange = (newPage: PaginationState) => {
+        searchParams.set("page", (newPage.pageIndex + 1).toString());
+        searchParams.set("pageSize", newPage.pageSize.toString());
+        filter({
+            searchParams
+        });
+    };
+
+    const handleSearchChange = useDebouncedCallback((query: string) => {
+        searchParams.set("query", query);
+        searchParams.delete("page");
+        filter({
+            searchParams
+        });
+    }, 300);
+
     return (
         <>
             {selectedInternalResource && (
@@ -327,19 +382,20 @@ export default function ClientResourcesTable({
                 />
             )}
 
-            <DataTable
+            <ControlledDataTable
                 columns={internalColumns}
-                data={internalResources}
+                rows={internalResources}
-                persistPageSize="internal-resources"
+                tableId="internal-resources"
                 searchPlaceholder={t("resourcesSearch")}
-                searchColumn="name"
                 onAdd={() => setIsCreateDialogOpen(true)}
                 addButtonText={t("resourceAdd")}
+                onSearch={handleSearchChange}
                 onRefresh={refreshData}
+                onPaginationChange={handlePaginationChange}
+                pagination={pagination}
+                rowCount={rowCount}
                 isRefreshing={isRefreshing}
-                defaultSort={defaultSort}
+                enableColumnVisibility
-                enableColumnVisibility={true}
-                persistColumnVisibility="internal-resources"
                 columnVisibility={{
                     niceId: false,
                     aliasAddress: false

src/components/ProxyResourcesTable.tsx

@@ -2,9 +2,8 @@
 
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import CopyToClipboard from "@app/components/CopyToClipboard";
-import { DataTable } from "@app/components/ui/data-table";
-import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { Button } from "@app/components/ui/button";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -14,13 +13,14 @@ import {
 import { InfoPopup } from "@app/components/ui/info-popup";
 import { Switch } from "@app/components/ui/switch";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { UpdateResourceResponse } from "@server/routers/resource";
+import type { PaginationState } from "@tanstack/react-table";
 import { AxiosResponse } from "axios";
 import {
     ArrowRight,
-    ArrowUpDown,
     CheckCircle2,
     ChevronDown,
     Clock,
@@ -31,14 +31,12 @@ import {
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
-import { ControlledDataTable } from "./ui/controlled-data-table";
-import type { PaginationState } from "@tanstack/react-table";
-import { useNavigationContext } from "@app/hooks/useNavigationContext";
 import { useDebouncedCallback } from "use-debounce";
 import z from "zod";
 import { ColumnFilterButton } from "./ColumnFilterButton";
+import { ControlledDataTable } from "./ui/controlled-data-table";
 
 export type TargetHealth = {
     targetId: number;
@@ -584,10 +582,6 @@ export default function ProxyResourcesTable({
         });
     }, 300);
 
-    console.log({
-        rowCount
-    });
-
     return (
         <>
             {selectedResource && (

src/components/ui/controlled-data-table.tsx

@@ -130,7 +130,8 @@ export function ControlledDataTable<TData, TValue>({
     });
 
     console.log({
-        pagination
+        pagination,
+        rowCount
     });
 
     const table = useReactTable({