migrate deployment configs

frontend/src/resources/deployment/config.tsx

@@ -112,7 +112,7 @@ const BuildVersionSelector = ({
   );
 };
 
-const EnvVars = ({
+export const EnvVars = ({
   vars,
   set,
 }: {
@@ -157,7 +157,7 @@ const EnvVars = ({
   </div>
 );
 
-const PortsConfig = ({
+export const PortsConfig = ({
   ports,
   set,
 }: {
@@ -166,7 +166,7 @@ const PortsConfig = ({
 }) => (
   <div className="flex flex-col gap-4 border-b pb-4">
     {ports?.map((port, i) => (
-      <div className="flex justify-between gap-4" key={i}>
+      <div className="flex items-center justify-between gap-4" key={i}>
         <Input
           value={port.container}
           placeholder="Container"
@@ -202,7 +202,7 @@ const PortsConfig = ({
   </div>
 );
 
-const ImageConfig = ({
+export const ImageConfig = ({
   image,
   set,
 }: {

frontend/src/resources/deployment/index.tsx

@@ -1,14 +1,22 @@
+import { ConfigAgain } from "@components/config/again";
 import { ResourceUpdates } from "@components/updates/resource";
-import { useAddRecentlyViewed, useRead } from "@hooks";
+import { useAddRecentlyViewed, useRead, useWrite } from "@hooks";
 import { ResourceCard } from "@layouts/card";
+import { ConfigLayout } from "@layouts/page";
 import { Resource } from "@layouts/resource";
+import { Types } from "@monitor/client";
 import {
   RedeployContainer,
   StartOrStopContainer,
   RemoveContainer,
 } from "@resources/deployment/components/actions";
 import { DeploymentLogs } from "@resources/deployment/components/deployment-logs";
-import { DeploymentConfig } from "@resources/deployment/config";
+import {
+  EnvVars,
+  ImageConfig,
+  PortsConfig,
+  ServersSelector,
+} from "@resources/deployment/config";
 import {
   DeploymentBuild,
   DeploymentName,
@@ -16,9 +24,151 @@ import {
   DeploymentStatus,
   DeploymentStatusIcon,
 } from "@resources/deployment/util";
-import { CardDescription } from "@ui/card";
+import { Button } from "@ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@ui/card";
+import { useState } from "react";
 import { Link, useParams } from "react-router-dom";
 
+export const DeploymentCard = ({ id }: { id: string }) => {
+  const deployments = useRead("ListDeployments", {}).data;
+  const deployment = deployments?.find((d) => d.id === id);
+  if (!deployment) return null;
+  return (
+    <Link to={`/deployments/${deployment.id}`}>
+      <ResourceCard
+        title={deployment.name}
+        description={deployment.info.status ?? "not deployed"}
+        statusIcon={<DeploymentStatusIcon deploymentId={id} />}
+      >
+        <div className="flex flex-col text-muted-foreground text-sm">
+          <DeploymentServer deploymentId={id} />
+          <DeploymentBuild deploymentId={id} />
+        </div>
+      </ResourceCard>
+    </Link>
+  );
+};
+
+const DeploymentConfigInner = ({
+  id,
+  config,
+}: {
+  id: string;
+  config: Types.DeploymentConfig;
+}) => {
+  const [update, set] = useState<Partial<Types.DeploymentConfig>>({});
+  const [show, setShow] = useState("general");
+  const { mutate } = useWrite("UpdateDeployment");
+
+  return (
+    <ConfigLayout
+      content={update}
+      onConfirm={() => mutate({ id, config: update })}
+      onReset={() => set({})}
+    >
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-4 w-[300px]">
+          {["general", "networking", "environment", "volumes"].map((item) => (
+            <Button
+              variant={show === item ? "secondary" : "outline"}
+              onClick={() => setShow(item)}
+              className="capitalize"
+            >
+              {item}
+            </Button>
+          ))}
+        </div>
+        <Card className="w-full">
+          <CardHeader className="border-b">
+            <CardTitle className="capitalize">{show}</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 mt-4">
+            {/* General Config */}
+            {show === "general" && (
+              <ConfigAgain
+                config={config}
+                update={update}
+                set={(u) => set((p) => ({ ...p, ...u }))}
+                components={{
+                  server_id: (value, set) => (
+                    <div className="flex items-center justify-between border-b pb-4">
+                      Server
+                      <ServersSelector
+                        selected={value}
+                        onSelect={(server_id) => set({ server_id })}
+                      />
+                    </div>
+                  ),
+                  image: (value, set) => (
+                    <ImageConfig image={value} set={set} />
+                  ),
+                  restart: true,
+                }}
+              />
+            )}
+
+            {/* Networking Config */}
+            {show === "networking" && (
+              <ConfigAgain
+                config={config}
+                update={update}
+                set={(u) => set((p) => ({ ...p, ...u }))}
+                components={{
+                  network: true,
+                  ports: (value, set) => (
+                    <PortsConfig ports={value} set={set} />
+                  ),
+                }}
+              />
+            )}
+
+            {/* Environment Config */}
+            {show === "environment" && (
+              <ConfigAgain
+                config={config}
+                update={update}
+                set={(u) => set((p) => ({ ...p, ...u }))}
+                components={{
+                  skip_secret_interp: true,
+                  environment: (value, set) => (
+                    <EnvVars vars={value} set={set} />
+                  ),
+                }}
+              />
+            )}
+
+            {/* Environment Config */}
+            {show === "volumes" && (
+              <ConfigAgain
+                config={config}
+                update={update}
+                set={(u) => set((p) => ({ ...p, ...u }))}
+                components={{
+                  volumes: (value, set) => (
+                    <PortsConfig ports={value} set={set} />
+                  ),
+                }}
+              />
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </ConfigLayout>
+  );
+};
+
+const DeploymentConfig = ({ id }: { id: string }) => {
+  const config = useRead("GetDeployment", { id }).data?.config;
+  if (!config) return null;
+  return <DeploymentConfigInner id={id} config={config} />;
+};
+
 export const DeploymentPage = () => {
   const id = useParams().deploymentId;
   if (!id) return null;
@@ -49,27 +199,7 @@ export const DeploymentPage = () => {
     >
       <ResourceUpdates type="Deployment" id={id} />
       <DeploymentLogs deployment_id={id} />
-      <DeploymentConfig />
+      <DeploymentConfig id={id} />
     </Resource>
   );
 };
-
-export const DeploymentCard = ({ id }: { id: string }) => {
-  const deployments = useRead("ListDeployments", {}).data;
-  const deployment = deployments?.find((d) => d.id === id);
-  if (!deployment) return null;
-  return (
-    <Link to={`/deployments/${deployment.id}`}>
-      <ResourceCard
-        title={deployment.name}
-        description={deployment.status ?? "not deployed"}
-        statusIcon={<DeploymentStatusIcon deploymentId={id} />}
-      >
-        <div className="flex flex-col text-muted-foreground text-sm">
-          <DeploymentServer deploymentId={id} />
-          <DeploymentBuild deploymentId={id} />
-        </div>
-      </ResourceCard>
-    </Link>
-  );
-};

frontend/src/resources/deployment/util.tsx

@@ -22,7 +22,7 @@ export const DeploymentStatus = ({
 }) => {
   const deployments = useRead("ListDeployments", {}).data;
   const deployment = deployments?.find((d) => d.id === deploymentId);
-  return <>{deployments ? deployment?.status ?? "not deployed" : "..."}</>;
+  return <>{deployments ? deployment?.info.status ?? "not deployed" : "..."}</>;
 };
 
 export const DeploymentStatusIcon = ({
@@ -32,7 +32,7 @@ export const DeploymentStatusIcon = ({
 }) => {
   const deployments = useRead("ListDeployments", {}).data;
   const deployment = deployments?.find((d) => d.id === deploymentId);
-  const s = deployment?.state;
+  const s = deployment?.info.state;
 
   const color = () => {
     if (s === DockerContainerState.Running) return "fill-green-500";
@@ -54,8 +54,8 @@ export const DeploymentServer = ({
   return (
     <div className="flex items-center gap-2">
       <Server className="w-4 h-4" />
-      {deployment?.server_id ? (
-        <ServerName serverId={deployment?.server_id} />
+      {deployment?.info.server_id ? (
+        <ServerName serverId={deployment?.info.server_id} />
       ) : (
         "n/a"
       )}
@@ -69,7 +69,11 @@ export const DeploymentBuild = ({ deploymentId }: { deploymentId: string }) => {
   return (
     <div className="flex items-center">
       <HardDrive className="w-4 h-4 mr-2" />
-      {deployment?.build_id ? <BuildName id={deployment?.build_id} /> : "n/a"}
+      {deployment?.info.build_id ? (
+        <BuildName id={deployment?.info.build_id} />
+      ) : (
+        "n/a"
+      )}
     </div>
   );
 };