From b8ad77085c0e5fdc9cf3419964d830b004b0c036 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Sun, 30 Jul 2023 15:51:59 -0400
Subject: [PATCH] add the configs

---
 frontend/src/components/updates/desktop.tsx   |  2 +-
 frontend/src/components/updates/resource.tsx  |  2 +-
 frontend/src/hooks.ts                         |  2 +-
 frontend/src/resources/build/config.tsx       | 23 +++++++++++++++++++
 frontend/src/resources/build/page.tsx         | 15 ++++++++++--
 frontend/src/resources/deployment/config.tsx  | 17 ++++++++++++++
 frontend/src/resources/deployment/updates.tsx |  2 +-
 frontend/src/resources/server/config.tsx      | 19 +++++++++++++++
 frontend/src/resources/server/page.tsx        | 14 +++++++++--
 frontend/src/router.tsx                       | 17 +++++++++++---
 10 files changed, 102 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/resources/build/config.tsx
 create mode 100644 frontend/src/resources/deployment/config.tsx
 create mode 100644 frontend/src/resources/server/config.tsx

diff --git a/frontend/src/components/updates/desktop.tsx b/frontend/src/components/updates/desktop.tsx
index b2439be1f..f1dfe4919 100644
--- a/frontend/src/components/updates/desktop.tsx
+++ b/frontend/src/components/updates/desktop.tsx
@@ -21,7 +21,7 @@ export const DesktopUpdates = () => {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-[500px]">
         <DropdownMenuGroup>
-          {updates?.map((update) => (
+          {updates?.updates.map((update) => (
             <SingleUpdate update={update} />
           ))}
         </DropdownMenuGroup>
diff --git a/frontend/src/components/updates/resource.tsx b/frontend/src/components/updates/resource.tsx
index b95cb7155..b36650e61 100644
--- a/frontend/src/components/updates/resource.tsx
+++ b/frontend/src/components/updates/resource.tsx
@@ -29,7 +29,7 @@ export const ResourceUpdates = ({ id }: { id: string }) => {
         </Link>
       </div>
       <div className="grid md:grid-cols-3 mt-2 gap-4">
-        {updates?.slice(0, 3).map((update) => (
+        {updates?.updates.slice(0, 3).map((update) => (
           <UpdateDetails update={update} key={update._id?.$oid}>
             <Card hoverable>
               <CardHeader>
diff --git a/frontend/src/hooks.ts b/frontend/src/hooks.ts
index 36110beb1..89879f133 100644
--- a/frontend/src/hooks.ts
+++ b/frontend/src/hooks.ts
@@ -17,7 +17,7 @@ import {
 
 export const useRead = <
   T extends Types.ReadRequest["type"],
-  P = Extract<Types.WriteRequest, { type: T }>["params"]
+  P = Extract<Types.ReadRequest, { type: T }>["params"]
 >(
   type: T,
   params: P,
diff --git a/frontend/src/resources/build/config.tsx b/frontend/src/resources/build/config.tsx
new file mode 100644
index 000000000..e60403462
--- /dev/null
+++ b/frontend/src/resources/build/config.tsx
@@ -0,0 +1,23 @@
+import { Config } from "@components/config/Config";
+import { useRead } from "@hooks";
+import { Types } from "@monitor/client";
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+
+export const BuildConfig = () => {
+  const id = useParams().buildId;
+  const build = useRead("GetBuild", { id });
+  const [update, set] = useState<Partial<Types.BuildConfig>>({});
+  if (build.data?.config) {
+    return (
+      <Config
+        config={build.data?.config as any}
+        update={update}
+        set={set}
+      />
+    );
+  } else {
+    // loading
+    return null;
+  }
+};
diff --git a/frontend/src/resources/build/page.tsx b/frontend/src/resources/build/page.tsx
index 1619efeb3..2b7d41a7d 100644
--- a/frontend/src/resources/build/page.tsx
+++ b/frontend/src/resources/build/page.tsx
@@ -1,8 +1,10 @@
 import { useSetRecentlyViewed } from "@hooks";
 import { Resource } from "@layouts/resource";
 import { BuildName, BuildVersion } from "./util";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { RebuildBuild } from "./components/actions";
+import { Button } from "@ui/button";
+import { Settings } from "lucide-react";
 
 export const Build = () => {
   const { buildId } = useParams();
@@ -19,7 +21,16 @@ export const Build = () => {
           <BuildVersion id={buildId} />
         </div>
       }
-      actions={<RebuildBuild buildId={buildId} />}
+      actions={
+        <div className="flex gap-4">
+          <RebuildBuild buildId={buildId} />
+          <Link to={`/builds/${buildId}/config`}>
+            <Button variant="outline">
+              <Settings className="w-4 h-4" />
+            </Button>
+          </Link>
+        </div>
+      }
     />
   );
 };
diff --git a/frontend/src/resources/deployment/config.tsx b/frontend/src/resources/deployment/config.tsx
new file mode 100644
index 000000000..d6100edee
--- /dev/null
+++ b/frontend/src/resources/deployment/config.tsx
@@ -0,0 +1,17 @@
+import { Config } from "@components/config/Config"
+import { useRead } from "@hooks";
+import { Types } from "@monitor/client";
+import { useState } from "react"
+import { useParams } from "react-router-dom";
+
+export const DeploymentConfig = () => {
+	const id = useParams().deploymentId;
+	const deployment = useRead("GetDeployment", { id });
+	const [update, set] = useState<Partial<Types.DeploymentConfig>>({});
+	if (deployment.data?.config) {
+		return <Config config={deployment.data?.config as any} update={update} set={set} />;
+	} else {
+		// loading
+		return null
+	}
+}
\ No newline at end of file
diff --git a/frontend/src/resources/deployment/updates.tsx b/frontend/src/resources/deployment/updates.tsx
index de2166d24..741285c19 100644
--- a/frontend/src/resources/deployment/updates.tsx
+++ b/frontend/src/resources/deployment/updates.tsx
@@ -19,7 +19,7 @@ export const DeploymentUpdates = () => {
           <TableHead>Success</TableHead>
         </TableRow>
       </TableHeader>
-      {updates?.map((update) => (
+      {updates?.updates.map((update) => (
         <TableRow>
           <TableCell>{fmt_update_date(new Date(update.start_ts))}</TableCell>
           <TableCell>
diff --git a/frontend/src/resources/server/config.tsx b/frontend/src/resources/server/config.tsx
new file mode 100644
index 000000000..876b93b80
--- /dev/null
+++ b/frontend/src/resources/server/config.tsx
@@ -0,0 +1,19 @@
+import { Config } from "@components/config/Config";
+import { useRead } from "@hooks";
+import { Types } from "@monitor/client";
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+
+export const ServerConfig = () => {
+  const id = useParams().serverId;
+  const server = useRead("GetServer", { id });
+  const [update, set] = useState<Partial<Types.ServerConfig>>({});
+  if (server.data?.config) {
+    return (
+      <Config config={server.data?.config as any} update={update} set={set} />
+    );
+  } else {
+    // loading
+    return null;
+  }
+};
diff --git a/frontend/src/resources/server/page.tsx b/frontend/src/resources/server/page.tsx
index f3dbe3c62..e72ed76a9 100644
--- a/frontend/src/resources/server/page.tsx
+++ b/frontend/src/resources/server/page.tsx
@@ -1,9 +1,11 @@
 import { useSetRecentlyViewed } from "@hooks";
 import { Resource } from "@layouts/resource";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { ServerName, ServerStats } from "./util";
 import { ServerStatusIcon } from "./util";
 import { CardDescription } from "@ui/card";
+import { Button } from "@ui/button";
+import { Settings } from "lucide-react";
 
 export const Server = () => {
   const { serverId } = useParams();
@@ -24,7 +26,15 @@ export const Server = () => {
           <ServerStats server_id={serverId} />
         </div>
       }
-      actions=""
+      actions={
+        <div className="flex gap-4">
+          <Link to={`/servers/${serverId}/config`}>
+            <Button variant="outline">
+              <Settings className="w-4 h-4" />
+            </Button>
+          </Link>
+        </div>
+      }
     />
   );
 };
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 16f08b3a8..4afb64619 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -9,6 +9,9 @@ import { Deployments, Builds, Servers, Builders } from "@resources/pages";
 import { DeploymentUpdates } from "@resources/deployment/updates";
 import { DeploymentLayout } from "@resources/deployment/layout";
 import { DeploymentPage } from "@resources/deployment/page";
+import { DeploymentConfig } from "@resources/deployment/config";
+import { ServerConfig } from "@resources/server/config";
+import { BuildConfig } from "@resources/build/config";
 
 const router = createBrowserRouter([
   {
@@ -30,7 +33,7 @@ const router = createBrowserRouter([
             children: [
               { path: "", element: <DeploymentPage /> },
               { path: "updates", element: <DeploymentUpdates /> },
-              { path: "config", element: <>deployment config!</> },
+              { path: "config", element: <DeploymentConfig /> },
             ],
           },
         ],
@@ -41,7 +44,11 @@ const router = createBrowserRouter([
         path: "servers",
         children: [
           { path: "", element: <Servers /> },
-          { path: ":serverId", element: <Server /> },
+          {
+            path: ":serverId",
+            element: <Server />,
+            children: [{ path: "config", element: <ServerConfig /> }],
+          },
         ],
       },
 
@@ -50,7 +57,11 @@ const router = createBrowserRouter([
         path: "builds",
         children: [
           { path: "", element: <Builds /> },
-          { path: ":buildId", element: <Build /> },
+          {
+            path: ":buildId",
+            element: <Build />,
+            children: [{ path: "config", element: <BuildConfig /> }],
+          },
         ],
       },