Merge pull request #1960 from Fredkiss3/refactor/separate-tables

refactor: separate tables

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

@@ -0,0 +1,78 @@
+import type { ClientRow } from "@app/components/MachineClientsTable";
+import MachineClientsTable from "@app/components/MachineClientsTable";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { ListClientsResponse } from "@server/routers/client";
+import { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+
+type ClientsPageProps = {
+    params: Promise<{ orgId: string }>;
+    searchParams: Promise<{ view?: string }>;
+};
+
+export const dynamic = "force-dynamic";
+
+export default async function ClientsPage(props: ClientsPageProps) {
+    const t = await getTranslations();
+
+    const params = await props.params;
+
+    let machineClients: ListClientsResponse["clients"] = [];
+
+    try {
+        const machineRes = await internal.get<
+            AxiosResponse<ListClientsResponse>
+        >(
+            `/org/${params.orgId}/clients?filter=machine`,
+            await authCookieHeader()
+        );
+        machineClients = machineRes.data.data.clients;
+    } catch (e) {}
+
+    function formatSize(mb: number): string {
+        if (mb >= 1024 * 1024) {
+            return `${(mb / (1024 * 1024)).toFixed(2)} TB`;
+        } else if (mb >= 1024) {
+            return `${(mb / 1024).toFixed(2)} GB`;
+        } else {
+            return `${mb.toFixed(2)} MB`;
+        }
+    }
+
+    const mapClientToRow = (
+        client: ListClientsResponse["clients"][0]
+    ): ClientRow => {
+        return {
+            name: client.name,
+            id: client.clientId,
+            subnet: client.subnet.split("/")[0],
+            mbIn: formatSize(client.megabytesIn || 0),
+            mbOut: formatSize(client.megabytesOut || 0),
+            orgId: params.orgId,
+            online: client.online,
+            olmVersion: client.olmVersion || undefined,
+            olmUpdateAvailable: client.olmUpdateAvailable || false,
+            userId: client.userId,
+            username: client.username,
+            userEmail: client.userEmail
+        };
+    };
+
+    const machineClientRows: ClientRow[] = machineClients.map(mapClientToRow);
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("manageMachineClients")}
+                description={t("manageMachineClientsDescription")}
+            />
+
+            <MachineClientsTable
+                machineClients={machineClientRows}
+                orgId={params.orgId}
+            />
+        </>
+    );
+}

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

@@ -1,11 +1,4 @@
-import { internal } from "@app/lib/api";
-import { authCookieHeader } from "@app/lib/api/cookies";
-import { AxiosResponse } from "axios";
-import { ClientRow } from "../../../../components/ClientsTable";
-import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import { ListClientsResponse } from "@server/routers/client";
-import ClientsTable from "../../../../components/ClientsTable";
-import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
 
 type ClientsPageProps = {
     params: Promise<{ orgId: string }>;
@@ -15,76 +8,6 @@ type ClientsPageProps = {
 export const dynamic = "force-dynamic";
 
 export default async function ClientsPage(props: ClientsPageProps) {
-    const t = await getTranslations();
-
     const params = await props.params;
-    const searchParams = await props.searchParams;
-
-    // Default to 'user' view, or use the query param if provided
-    let defaultView: "user" | "machine" = "user";
-    defaultView = searchParams.view === "machine" ? "machine" : "user";
-
-    let userClients: ListClientsResponse["clients"] = [];
-    let machineClients: ListClientsResponse["clients"] = [];
-
-    try {
-        const [userRes, machineRes] = await Promise.all([
-            internal.get<AxiosResponse<ListClientsResponse>>(
-                `/org/${params.orgId}/clients?filter=user`,
-                await authCookieHeader()
-            ),
-            internal.get<AxiosResponse<ListClientsResponse>>(
-                `/org/${params.orgId}/clients?filter=machine`,
-                await authCookieHeader()
-            )
-        ]);
-        userClients = userRes.data.data.clients;
-        machineClients = machineRes.data.data.clients;
-    } catch (e) {}
-
-    function formatSize(mb: number): string {
-        if (mb >= 1024 * 1024) {
-            return `${(mb / (1024 * 1024)).toFixed(2)} TB`;
-        } else if (mb >= 1024) {
-            return `${(mb / 1024).toFixed(2)} GB`;
-        } else {
-            return `${mb.toFixed(2)} MB`;
-        }
-    }
-
-    const mapClientToRow = (client: ListClientsResponse["clients"][0]): ClientRow => {
-        return {
-            name: client.name,
-            id: client.clientId,
-            subnet: client.subnet.split("/")[0],
-            mbIn: formatSize(client.megabytesIn || 0),
-            mbOut: formatSize(client.megabytesOut || 0),
-            orgId: params.orgId,
-            online: client.online,
-            olmVersion: client.olmVersion || undefined,
-            olmUpdateAvailable: client.olmUpdateAvailable || false,
-            userId: client.userId,
-            username: client.username,
-            userEmail: client.userEmail
-        };
-    };
-
-    const userClientRows: ClientRow[] = userClients.map(mapClientToRow);
-    const machineClientRows: ClientRow[] = machineClients.map(mapClientToRow);
-
-    return (
-        <>
-            <SettingsSectionTitle
-                title={t("manageClients")}
-                description={t("manageClientsDescription")}
-            />
-
-            <ClientsTable
-                userClients={userClientRows}
-                machineClients={machineClientRows}
-                orgId={params.orgId}
-                defaultView={defaultView}
-            />
-        </>
-    );
+    redirect(`/${params.orgId}/settings/clients/user`);
 }

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

@@ -0,0 +1,75 @@
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { AxiosResponse } from "axios";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { ListClientsResponse } from "@server/routers/client";
+import { getTranslations } from "next-intl/server";
+import type { ClientRow } from "@app/components/MachineClientsTable";
+import UserDevicesTable from "@app/components/UserDevicesTable";
+
+type ClientsPageProps = {
+    params: Promise<{ orgId: string }>;
+};
+
+export const dynamic = "force-dynamic";
+
+export default async function ClientsPage(props: ClientsPageProps) {
+    const t = await getTranslations();
+
+    const params = await props.params;
+
+    let userClients: ListClientsResponse["clients"] = [];
+
+    try {
+        const userRes = await internal.get<AxiosResponse<ListClientsResponse>>(
+            `/org/${params.orgId}/clients?filter=user`,
+            await authCookieHeader()
+        );
+        userClients = userRes.data.data.clients;
+    } catch (e) {}
+
+    function formatSize(mb: number): string {
+        if (mb >= 1024 * 1024) {
+            return `${(mb / (1024 * 1024)).toFixed(2)} TB`;
+        } else if (mb >= 1024) {
+            return `${(mb / 1024).toFixed(2)} GB`;
+        } else {
+            return `${mb.toFixed(2)} MB`;
+        }
+    }
+
+    const mapClientToRow = (
+        client: ListClientsResponse["clients"][0]
+    ): ClientRow => {
+        return {
+            name: client.name,
+            id: client.clientId,
+            subnet: client.subnet.split("/")[0],
+            mbIn: formatSize(client.megabytesIn || 0),
+            mbOut: formatSize(client.megabytesOut || 0),
+            orgId: params.orgId,
+            online: client.online,
+            olmVersion: client.olmVersion || undefined,
+            olmUpdateAvailable: client.olmUpdateAvailable || false,
+            userId: client.userId,
+            username: client.username,
+            userEmail: client.userEmail
+        };
+    };
+
+    const userClientRows: ClientRow[] = userClients.map(mapClientToRow);
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("manageUserDevices")}
+                description={t("manageUserDevicesDescription")}
+            />
+
+            <UserDevicesTable
+                userClients={userClientRows}
+                orgId={params.orgId}
+            />
+        </>
+    );
+}

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

@@ -0,0 +1,93 @@
+import ClientResourcesTable from "@app/components/ClientResourcesTable";
+import type { InternalResourceRow } from "@app/components/ClientResourcesTable";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { getCachedOrg } from "@app/lib/api/getCachedOrg";
+import OrgProvider from "@app/providers/OrgProvider";
+import type { ListResourcesResponse } from "@server/routers/resource";
+import type { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
+import type { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+import { cache } from "react";
+
+export interface ClientResourcesPageProps {
+    params: Promise<{ orgId: string }>;
+    searchParams: Promise<{ view?: string }>;
+}
+
+export default async function ClientResourcesPage(
+    props: ClientResourcesPageProps
+) {
+    const params = await props.params;
+    const t = await getTranslations();
+
+    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"] = [];
+    try {
+        const res = await internal.get<
+            AxiosResponse<ListAllSiteResourcesByOrgResponse>
+        >(`/org/${params.orgId}/site-resources`, await authCookieHeader());
+        siteResources = res.data.data.siteResources;
+    } catch (e) {}
+
+    let org = null;
+    try {
+        const res = await getCachedOrg(params.orgId);
+        org = res.data.data;
+    } catch {
+        redirect(`/${params.orgId}/settings/resources`);
+    }
+
+    if (!org) {
+        redirect(`/${params.orgId}/settings/resources`);
+    }
+
+    const internalResourceRows: InternalResourceRow[] = siteResources.map(
+        (siteResource) => {
+            return {
+                id: siteResource.siteResourceId,
+                name: siteResource.name,
+                orgId: params.orgId,
+                siteName: siteResource.siteName,
+                siteAddress: siteResource.siteAddress || null,
+                mode: siteResource.mode || ("port" as any),
+                // protocol: siteResource.protocol,
+                // proxyPort: siteResource.proxyPort,
+                siteId: siteResource.siteId,
+                destination: siteResource.destination,
+                // destinationPort: siteResource.destinationPort,
+                alias: siteResource.alias || null,
+                siteNiceId: siteResource.siteNiceId
+            };
+        }
+    );
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("clientResourceTitle")}
+                description={t("clientResourceDescription")}
+            />
+
+            <OrgProvider org={org}>
+                <ClientResourcesTable
+                    internalResources={internalResourceRows}
+                    orgId={params.orgId}
+                    defaultSort={{
+                        id: "name",
+                        desc: false
+                    }}
+                />
+            </OrgProvider>
+        </>
+    );
+}

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

@@ -1,149 +1,10 @@
-import { internal } from "@app/lib/api";
-import { authCookieHeader } from "@app/lib/api/cookies";
-import ResourcesTable, {
-    ResourceRow,
-    InternalResourceRow
-} from "../../../../components/ResourcesTable";
-import { AxiosResponse } from "axios";
-import { ListResourcesResponse } from "@server/routers/resource";
-import { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
-import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { redirect } from "next/navigation";
-import { cache } from "react";
-import { GetOrgResponse } from "@server/routers/org";
-import OrgProvider from "@app/providers/OrgProvider";
-import { getTranslations } from "next-intl/server";
-import { pullEnv } from "@app/lib/pullEnv";
-import { toUnicode } from "punycode";
 
-type ResourcesPageProps = {
+export interface ResourcesPageProps {
     params: Promise<{ orgId: string }>;
-    searchParams: Promise<{ view?: string }>;
-};
-
-export const dynamic = "force-dynamic";
+}
 
 export default async function ResourcesPage(props: ResourcesPageProps) {
     const params = await props.params;
-    const searchParams = await props.searchParams;
-    const t = await getTranslations();
-
-    const env = pullEnv();
-
-    // Default to 'proxy' view, or use the query param if provided
-    let defaultView: "proxy" | "internal" = "proxy";
-    if (env.flags.enableClients) {
-        defaultView = searchParams.view === "internal" ? "internal" : "proxy";
-    }
-
-    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"] = [];
-    try {
-        const res = await internal.get<
-            AxiosResponse<ListAllSiteResourcesByOrgResponse>
-        >(`/org/${params.orgId}/site-resources`, await authCookieHeader());
-        siteResources = res.data.data.siteResources;
-    } catch (e) {}
-
-    let org = null;
-    try {
-        const getOrg = cache(async () =>
-            internal.get<AxiosResponse<GetOrgResponse>>(
-                `/org/${params.orgId}`,
-                await authCookieHeader()
-            )
-        );
-        const res = await getOrg();
-        org = res.data.data;
-    } catch {
-        redirect(`/${params.orgId}/settings/resources`);
-    }
-
-    if (!org) {
-        redirect(`/${params.orgId}/settings/resources`);
-    }
-
-    const resourceRows: ResourceRow[] = resources.map((resource) => {
-        return {
-            id: resource.resourceId,
-            name: resource.name,
-            orgId: params.orgId,
-            nice: resource.niceId,
-            domain: `${resource.ssl ? "https://" : "http://"}${toUnicode(resource.fullDomain || "")}`,
-            protocol: resource.protocol,
-            proxyPort: resource.proxyPort,
-            http: resource.http,
-            authState: !resource.http
-                ? "none"
-                : resource.sso ||
-                    resource.pincodeId !== null ||
-                    resource.passwordId !== null ||
-                    resource.whitelist ||
-                    resource.headerAuthId
-                  ? "protected"
-                  : "not_protected",
-            enabled: resource.enabled,
-            domainId: resource.domainId || undefined,
-            ssl: resource.ssl,
-            targets: resource.targets?.map((target) => ({
-                targetId: target.targetId,
-                ip: target.ip,
-                port: target.port,
-                enabled: target.enabled,
-                healthStatus: target.healthStatus
-            }))
-        };
-    });
-
-    const internalResourceRows: InternalResourceRow[] = siteResources.map(
-        (siteResource) => {
-            return {
-                id: siteResource.siteResourceId,
-                name: siteResource.name,
-                orgId: params.orgId,
-                siteName: siteResource.siteName,
-                siteAddress: siteResource.siteAddress || null,
-                mode: siteResource.mode || ("port" as any),
-                // protocol: siteResource.protocol,
-                // proxyPort: siteResource.proxyPort,
-                siteId: siteResource.siteId,
-                destination: siteResource.destination,
-                // destinationPort: siteResource.destinationPort,
-                alias: siteResource.alias || null,
-                siteNiceId: siteResource.siteNiceId
-            };
-        }
-    );
-
-    return (
-        <>
-            <SettingsSectionTitle
-                title={t("resourceTitle")}
-                description={t("resourceDescription")}
-            />
-
-            <OrgProvider org={org}>
-                <ResourcesTable
-                    resources={resourceRows}
-                    internalResources={internalResourceRows}
-                    orgId={params.orgId}
-                    defaultView={
-                        env.flags.enableClients ? defaultView : "proxy"
-                    }
-                    defaultSort={{
-                        id: "name",
-                        desc: false
-                    }}
-                />
-            </OrgProvider>
-        </>
-    );
+    redirect(`/${params.orgId}/settings/resources/proxy`);
 }

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

@@ -0,0 +1,112 @@
+import type { ResourceRow } from "@app/components/ProxyResourcesTable";
+import ProxyResourcesTable from "@app/components/ProxyResourcesTable";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import OrgProvider from "@app/providers/OrgProvider";
+import type { GetOrgResponse } from "@server/routers/org";
+import type { ListResourcesResponse } from "@server/routers/resource";
+import type { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
+import type { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+import { toUnicode } from "punycode";
+import { cache } from "react";
+
+export interface ProxyResourcesPageProps {
+    params: Promise<{ orgId: string }>;
+    searchParams: Promise<{ view?: string }>;
+}
+
+export default async function ProxyResourcesPage(
+    props: ProxyResourcesPageProps
+) {
+    const params = await props.params;
+    const t = await getTranslations();
+
+    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"] = [];
+    try {
+        const res = await internal.get<
+            AxiosResponse<ListAllSiteResourcesByOrgResponse>
+        >(`/org/${params.orgId}/site-resources`, await authCookieHeader());
+        siteResources = res.data.data.siteResources;
+    } catch (e) {}
+
+    let org = null;
+    try {
+        const getOrg = cache(async () =>
+            internal.get<AxiosResponse<GetOrgResponse>>(
+                `/org/${params.orgId}`,
+                await authCookieHeader()
+            )
+        );
+        const res = await getOrg();
+        org = res.data.data;
+    } catch {
+        redirect(`/${params.orgId}/settings/resources`);
+    }
+
+    if (!org) {
+        redirect(`/${params.orgId}/settings/resources`);
+    }
+
+    const resourceRows: ResourceRow[] = resources.map((resource) => {
+        return {
+            id: resource.resourceId,
+            name: resource.name,
+            orgId: params.orgId,
+            nice: resource.niceId,
+            domain: `${resource.ssl ? "https://" : "http://"}${toUnicode(resource.fullDomain || "")}`,
+            protocol: resource.protocol,
+            proxyPort: resource.proxyPort,
+            http: resource.http,
+            authState: !resource.http
+                ? "none"
+                : resource.sso ||
+                    resource.pincodeId !== null ||
+                    resource.passwordId !== null ||
+                    resource.whitelist ||
+                    resource.headerAuthId
+                  ? "protected"
+                  : "not_protected",
+            enabled: resource.enabled,
+            domainId: resource.domainId || undefined,
+            ssl: resource.ssl,
+            targets: resource.targets?.map((target) => ({
+                targetId: target.targetId,
+                ip: target.ip,
+                port: target.port,
+                enabled: target.enabled,
+                healthStatus: target.healthStatus
+            }))
+        };
+    });
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("proxyResourceTitle")}
+                description={t("proxyResourceDescription")}
+            />
+
+            <OrgProvider org={org}>
+                <ProxyResourcesTable
+                    resources={resourceRows}
+                    orgId={params.orgId}
+                    defaultSort={{
+                        id: "name",
+                        desc: false
+                    }}
+                />
+            </OrgProvider>
+        </>
+    );
+}