✨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
-        .string()
+    pageSize: z.coerce
+        .number<string>() // for prettier formatting
+        .int()
+        .positive()
         .optional()
-        .default("1000")
-        .transform(Number)
-        .pipe(z.int().positive()),
-    offset: z
-        .string()
+        .catch(20)
+        .default(20),
+    page: z.coerce
+        .number<string>() // for prettier formatting
+        .int()
+        .min(0)
         .optional()
-        .default("0")
-        .transform(Number)
-        .pipe(z.int().nonnegative())
+        .catch(1)
+        .default(1),
+    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
-            .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))
-            .where(eq(siteResources.orgId, orgId))
-            .limit(limit)
-            .offset(offset);
+        const [siteResourcesList, totalCount] = await Promise.all([
+            baseQuery
+                .limit(pageSize)
+                .offset(pageSize * (page - 1))
+                .orderBy(asc(siteResources.siteResourceId)),
+            countQuery
+        ]);
 
-        return response(res, {
-            data: { siteResources: siteResourcesList },
+        return response<ListAllSiteResourcesByOrgResponse>(res, {
+            data: {
+                siteResources: siteResourcesList,
+                pagination: {
+                    total: totalCount,
+                    pageSize,
+                    page
+                }
+            },
             success: true,
             error: false,
             message: "Site resources retrieved successfully",