show site link in clients table

server/db/schema.ts

@@ -118,9 +118,11 @@ export const newts = sqliteTable("newt", {
 
 export const clients = sqliteTable("clients", {
     clientId: integer("id").primaryKey({ autoIncrement: true }),
-    siteId: integer("siteId").references(() => sites.siteId, {
+    siteId: integer("siteId")
+        .references(() => sites.siteId, {
             onDelete: "cascade"
-    }),
+        })
+        .notNull(),
     orgId: text("orgId")
         .references(() => orgs.orgId, {
             onDelete: "cascade"

server/routers/client/listClients.ts

@@ -42,6 +42,7 @@ function queryClients(orgId: string, accessibleClientIds: number[]) {
             clientId: clients.clientId,
             orgId: clients.orgId,
             siteId: clients.siteId,
+            siteNiceId: sites.niceId,
             name: clients.name,
             pubKey: clients.pubKey,
             subnet: clients.subnet,
@@ -49,10 +50,12 @@ function queryClients(orgId: string, accessibleClientIds: number[]) {
             megabytesOut: clients.megabytesOut,
             orgName: orgs.name,
             type: clients.type,
-            online: clients.online
+            online: clients.online,
+            siteName: sites.name
         })
         .from(clients)
         .leftJoin(orgs, eq(clients.orgId, orgs.orgId))
+        .innerJoin(sites, eq(clients.siteId, sites.siteId))
         .where(
             and(
                 inArray(clients.clientId, accessibleClientIds),

src/app/[orgId]/settings/clients/ClientsTable.tsx

@@ -12,6 +12,7 @@ import { Button } from "@app/components/ui/button";
 import {
     ArrowRight,
     ArrowUpDown,
+    ArrowUpRight,
     Check,
     MoreHorizontal,
     X
@@ -28,6 +29,8 @@ import CreateClientFormModal from "./CreateClientsModal";
 
 export type ClientRow = {
     id: number;
+    siteId: string;
+    siteName: string;
     name: string;
     mbIn: string;
     mbOut: string;
@@ -125,6 +128,33 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
                 );
             }
         },
+        {
+            accessorKey: "siteName",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Site
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+            cell: ({ row }) => {
+                const r = row.original;
+                return (
+                    <Link href={`/${r.orgId}/settings/sites/${r.siteId}`}>
+                        <Button variant="outline">
+                            {r.siteName}
+                            <ArrowUpRight className="ml-2 h-4 w-4" />
+                        </Button>
+                    </Link>
+                );
+            }
+        },
         {
             accessorKey: "online",
             header: ({ column }) => {
@@ -135,7 +165,7 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
                             column.toggleSorting(column.getIsSorted() === "asc")
                         }
                     >
-                        Online
+                        Connectivity
                         <ArrowUpDown className="ml-2 h-4 w-4" />
                     </Button>
                 );
@@ -146,14 +176,14 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
                     return (
                         <span className="text-green-500 flex items-center space-x-2">
                             <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                            <span>Online</span>
+                            <span>Connected</span>
                         </span>
                     );
                 } else {
                     return (
                         <span className="text-neutral-500 flex items-center space-x-2">
                             <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
-                            <span>Offline</span>
+                            <span>Disconnected</span>
                         </span>
                     );
                 }

src/app/[orgId]/settings/clients/CreateClientsForm.tsx

@@ -189,8 +189,12 @@ export default function CreateClientForm({
         if (res && res.status === 201) {
             const data = res.data.data;
 
+            const site = sites.find((site) => site.siteId === data.siteId);
+
             onCreate?.({
                 name: data.name,
+                siteId: site!.niceId,
+                siteName: site!.name,
                 id: data.clientId,
                 mbIn: "0 MB",
                 mbOut: "0 MB",

src/app/[orgId]/settings/clients/page.tsx

@@ -36,6 +36,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
     const clientRows: ClientRow[] = clients.map((client) => {
         return {
             name: client.name,
+            siteName: client.siteName,
+            siteId: client.siteNiceId,
             id: client.clientId,
             mbIn: formatSize(client.megabytesIn || 0),
             mbOut: formatSize(client.megabytesOut || 0),