Update crud endpoints and ui

server/private/routers/ssh/signSshKey.ts

@@ -63,10 +63,12 @@ const bodySchema = z
 export type SignSshKeyResponse = {
     certificate: string;
     messageIds: number[];
+    messageId: number;
     sshUsername: string;
     sshHost: string;
     resourceId: number;
     siteIds: number[];
+    siteId: number;
     keyId: string;
     validPrincipals: string[];
     validAfter: string;
@@ -472,16 +474,16 @@ export async function signSshKey(
             })
         });
 
-        // TODO: WE NEED TO MAKE SURE THE MESSAGEIDS ARE BACKWARD COMPATABILE AND THE SITEIDS TOO AND UPDATE THE CLI TO HANDLE THE MESSAGE IDS
-
         return response<SignSshKeyResponse>(res, {
             data: {
                 certificate: cert.certificate,
                 messageIds: messageIds,
+                messageId: messageIds[0], // just pick the first one for backward compatibility
                 sshUsername: usernameToUse,
                 sshHost: sshHost,
                 resourceId: resource.siteResourceId,
                 siteIds: siteIds,
+                siteId: siteIds[0], // just pick the first one for backward compatibility
                 keyId: cert.keyId,
                 validPrincipals: cert.validPrincipals,
                 validAfter: cert.validAfter.toISOString(),

server/routers/siteResource/getSiteResource.ts

@@ -17,38 +17,34 @@ const getSiteResourceParamsSchema = z.strictObject({
         .transform((val) => (val ? Number(val) : undefined))
         .pipe(z.int().positive().optional())
         .optional(),
-    siteId: z.string().transform(Number).pipe(z.int().positive()),
     niceId: z.string().optional(),
     orgId: z.string()
 });
 
 async function query(
     siteResourceId?: number,
-    siteId?: number,
     niceId?: string,
     orgId?: string
 ) {
-    if (siteResourceId && siteId && orgId) {
+    if (siteResourceId && orgId) {
         const [siteResource] = await db
             .select()
             .from(siteResources)
             .where(
                 and(
                     eq(siteResources.siteResourceId, siteResourceId),
-                    eq(siteResources.siteId, siteId),
                     eq(siteResources.orgId, orgId)
                 )
             )
             .limit(1);
         return siteResource;
-    } else if (niceId && siteId && orgId) {
+    } else if (niceId && orgId) {
         const [siteResource] = await db
             .select()
             .from(siteResources)
             .where(
                 and(
                     eq(siteResources.niceId, niceId),
-                    eq(siteResources.siteId, siteId),
                     eq(siteResources.orgId, orgId)
                 )
             )
@@ -84,7 +80,6 @@ registry.registerPath({
     request: {
         params: z.object({
             niceId: z.string(),
-            siteId: z.number(),
             orgId: z.string()
         })
     },
@@ -107,10 +102,10 @@ export async function getSiteResource(
             );
         }
 
-        const { siteResourceId, siteId, niceId, orgId } = parsedParams.data;
+        const { siteResourceId, niceId, orgId } = parsedParams.data;
 
         // Get the site resource
-        const siteResource = await query(siteResourceId, siteId, niceId, orgId);
+        const siteResource = await query(siteResourceId, niceId, orgId);
 
         if (!siteResource) {
             return next(

server/routers/siteResource/listAllSiteResourcesByOrg.ts

@@ -73,6 +73,7 @@ const listAllSiteResourcesByOrgQuerySchema = z.object({
 
 export type ListAllSiteResourcesByOrgResponse = PaginatedResponse<{
     siteResources: (SiteResource & {
+        siteIds: number[];
         siteNames: string[];
         siteNiceIds: string[];
         siteAddresses: (string | null)[];
@@ -103,6 +104,7 @@ function querySiteResourcesBase() {
             defaultNetworkId: siteResources.defaultNetworkId,
             siteNames: sql<string[]>`array_agg(${sites.name})`,
             siteNiceIds: sql<string[]>`array_agg(${sites.niceId})`,
+            siteIds: sql<number[]>`array_agg(${sites.siteId})`,
             siteAddresses: sql<(string | null)[]>`array_agg(${sites.address})`
         })
         .from(siteResources)

server/routers/siteResource/listSiteResources.ts

@@ -1,6 +1,6 @@
 import { Request, Response, NextFunction } from "express";
 import { z } from "zod";
-import { db } from "@server/db";
+import { db, networks, siteNetworks } from "@server/db";
 import { siteResources, sites, SiteResource } from "@server/db";
 import response from "@server/lib/response";
 import HttpCode from "@server/types/HttpCode";
@@ -108,13 +108,21 @@ export async function listSiteResources(
             return next(createHttpError(HttpCode.NOT_FOUND, "Site not found"));
         }
 
-        // Get site resources
+        // Get site resources by joining networks to siteResources via siteNetworks
         const siteResourcesList = await db
             .select()
-            .from(siteResources)
+            .from(siteNetworks)
+            .innerJoin(
+                networks,
+                eq(siteNetworks.networkId, networks.networkId)
+            )
+            .innerJoin(
+                siteResources,
+                eq(siteResources.networkId, networks.networkId)
+            )
             .where(
                 and(
-                    eq(siteResources.siteId, siteId),
+                    eq(siteNetworks.siteId, siteId),
                     eq(siteResources.orgId, orgId)
                 )
             )
@@ -128,6 +136,7 @@ export async function listSiteResources(
             .limit(limit)
             .offset(offset);
 
+
         return response(res, {
             data: { siteResources: siteResourcesList },
             success: true,

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

@@ -60,17 +60,17 @@ export default async function ClientResourcesPage(
                 id: siteResource.siteResourceId,
                 name: siteResource.name,
                 orgId: params.orgId,
-                siteName: siteResource.siteName,
+                siteNames: siteResource.siteNames,
-                siteAddress: siteResource.siteAddress || null,
+                siteAddresses: siteResource.siteAddresses || null,
                 mode: siteResource.mode || ("port" as any),
                 // protocol: siteResource.protocol,
                 // proxyPort: siteResource.proxyPort,
-                siteId: siteResource.siteId,
+                siteIds: siteResource.siteIds,
                 destination: siteResource.destination,
                 // destinationPort: siteResource.destinationPort,
                 alias: siteResource.alias || null,
                 aliasAddress: siteResource.aliasAddress || null,
-                siteNiceId: siteResource.siteNiceId,
+                siteNiceIds: siteResource.siteNiceIds,
                 niceId: siteResource.niceId,
                 tcpPortRangeString: siteResource.tcpPortRangeString || null,
                 udpPortRangeString: siteResource.udpPortRangeString || null,

src/components/ClientResourcesTable.tsx

@@ -21,6 +21,7 @@ import {
     ArrowUp10Icon,
     ArrowUpDown,
     ArrowUpRight,
+    ChevronDown,
     ChevronsUpDownIcon,
     MoreHorizontal
 } from "lucide-react";
@@ -43,14 +44,14 @@ export type InternalResourceRow = {
     id: number;
     name: string;
     orgId: string;
-    siteName: string;
+    siteNames: string[];
-    siteAddress: string | null;
+    siteAddresses: (string | null)[];
+    siteIds: number[];
+    siteNiceIds: string[];
     // mode: "host" | "cidr" | "port";
     mode: "host" | "cidr";
     // protocol: string | null;
     // proxyPort: number | null;
-    siteId: number;
-    siteNiceId: string;
     destination: string;
     // destinationPort: number | null;
     alias: string | null;
@@ -136,6 +137,60 @@ export default function ClientResourcesTable({
         }
     };
 
+    function SiteCell({ resourceRow }: { resourceRow: InternalResourceRow }) {
+        const { siteNames, siteNiceIds, orgId } = resourceRow;
+
+        if (!siteNames || siteNames.length === 0) {
+            return <span>-</span>;
+        }
+
+        if (siteNames.length === 1) {
+            return (
+                <Link
+                    href={`/${orgId}/settings/sites/${siteNiceIds[0]}`}
+                >
+                    <Button variant="outline">
+                        {siteNames[0]}
+                        <ArrowUpRight className="ml-2 h-4 w-4" />
+                    </Button>
+                </Link>
+            );
+        }
+
+        return (
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        className="flex items-center gap-2"
+                    >
+                        <span>
+                            {siteNames.length} {t("sites")}
+                        </span>
+                        <ChevronDown className="h-3 w-3" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                    {siteNames.map((siteName, idx) => (
+                        <DropdownMenuItem
+                            key={siteNiceIds[idx]}
+                            asChild
+                        >
+                            <Link
+                                href={`/${orgId}/settings/sites/${siteNiceIds[idx]}`}
+                                className="flex items-center gap-2 cursor-pointer"
+                            >
+                                {siteName}
+                                <ArrowUpRight className="h-3 w-3" />
+                            </Link>
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        );
+    }
+
     const internalColumns: ExtendedColumnDef<InternalResourceRow>[] = [
         {
             accessorKey: "name",
@@ -185,21 +240,11 @@ export default function ClientResourcesTable({
             }
         },
         {
-            accessorKey: "siteName",
+            accessorKey: "siteNames",
             friendlyName: t("site"),
             header: () => <span className="p-3">{t("site")}</span>,
             cell: ({ row }) => {
-                const resourceRow = row.original;
+                return <SiteCell resourceRow={row.original} />;
-                return (
-                    <Link
-                        href={`/${resourceRow.orgId}/settings/sites/${resourceRow.siteNiceId}`}
-                    >
-                        <Button variant="outline">
-                            {resourceRow.siteName}
-                            <ArrowUpRight className="ml-2 h-4 w-4" />
-                        </Button>
-                    </Link>
-                );
             }
         },
         {
@@ -399,7 +444,7 @@ export default function ClientResourcesTable({
                     onConfirm={async () =>
                         deleteInternalResource(
                             selectedInternalResource!.id,
-                            selectedInternalResource!.siteId
+                            selectedInternalResource!.siteIds[0]
                         )
                     }
                     string={selectedInternalResource.name}
@@ -433,7 +478,11 @@ export default function ClientResourcesTable({
                 <EditInternalResourceDialog
                     open={isEditDialogOpen}
                     setOpen={setIsEditDialogOpen}
-                    resource={editingResource}
+                    resource={{
+                        ...editingResource,
+                        siteName: editingResource.siteNames[0] ?? "",
+                        siteId: editingResource.siteIds[0]
+                    }}
                     orgId={orgId}
                     sites={sites}
                     onSuccess={() => {