more cleanup and refactor

frontend-v2/src/components/resources/alerter/index.tsx

@@ -19,14 +19,16 @@ const useAlerter = (id?: string) =>
   useRead("ListAlerters", {}).data?.find((d) => d.id === id);
 
 const NewAlerter = () => {
-  const { mutateAsync } = useWrite("CreateDeployment");
+  const { mutateAsync } = useWrite("CreateAlerter");
   const [name, setName] = useState("");
   const [type, setType] = useState<Types.AlerterConfig["type"]>();
 
   return (
     <NewResource
       type="Alerter"
-      onSuccess={() => mutateAsync({ name, config: {} })}
+      onSuccess={async () =>
+        !!type && mutateAsync({ name, config: { type, params: {} } })
+      }
       enabled={!!name && !!type}
     >
       <div className="grid md:grid-cols-2">

frontend-v2/src/components/resources/builder/index.tsx

@@ -1,10 +1,144 @@
-import { useRead } from "@lib/hooks";
+import { ConfigInner } from "@components/config";
+import { InputList, ResourceSelector } from "@components/config/util";
+import { NewResource } from "@components/layouts";
+import { useRead, useWrite } from "@lib/hooks";
+import { Types } from "@monitor/client";
 import { RequiredResourceComponents } from "@types";
+import { Input } from "@ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ui/select";
 import { Cloud, Bot, Factory } from "lucide-react";
+import { useState } from "react";
 
 const useBuilder = (id?: string) =>
   useRead("ListBuilders", {}).data?.find((d) => d.id === id);
 
+const AwsBuilderConfig = ({ id }: { id: string }) => {
+  const config = useRead("GetBuilder", { id }).data?.config;
+  const [update, set] = useState<Partial<Types.AwsBuilderConfig>>({});
+  const { mutate } = useWrite("UpdateBuilder");
+  if (!config) return null;
+
+  return (
+    <ConfigInner
+      config={config.params as Types.AwsBuilderConfig}
+      update={update}
+      set={set}
+      onSave={() => mutate({ id, config: { type: "Aws", params: update } })}
+      components={{
+        general: {
+          general: {
+            region: true,
+            instance_type: true,
+            volume_gb: true,
+            ami_id: true,
+            subnet_id: true,
+            key_pair_name: true,
+            assign_public_ip: true,
+            security_group_ids: (values, set) => (
+              <InputList field="security_group_ids" values={values} set={set} />
+            ),
+            docker_accounts: (accounts, set) => (
+              <InputList
+                field="docker_accounts"
+                values={accounts ?? []}
+                set={set}
+              />
+            ),
+            github_accounts: (accounts, set) => (
+              <InputList
+                field="github_accounts"
+                values={accounts ?? []}
+                set={set}
+              />
+            ),
+          },
+        },
+      }}
+    />
+  );
+};
+
+const ServerBuilderConfig = ({ id }: { id: string }) => {
+  const config = useRead("GetBuilder", { id }).data?.config;
+  const [update, set] = useState<Partial<Types.ServerBuilderConfig>>({});
+  const { mutate } = useWrite("UpdateBuilder");
+  if (!config) return null;
+
+  return (
+    <ConfigInner
+      config={config.params as Types.ServerBuilderConfig}
+      update={update}
+      set={set}
+      onSave={() => mutate({ id, config: { type: "Server", params: update } })}
+      components={{
+        general: {
+          general: {
+            id: (id, set) => (
+              <div className="flex justify-between items-center border-b pb-4">
+                Select Server
+                <ResourceSelector
+                  type="Server"
+                  selected={id}
+                  onSelect={(id) => set({ id })}
+                />
+              </div>
+            ),
+          },
+        },
+      }}
+    />
+  );
+};
+
+const NewBuilder = () => {
+  const { mutateAsync } = useWrite("CreateBuilder");
+  const [name, setName] = useState("");
+  const [type, setType] = useState<Types.BuilderConfig["type"]>();
+
+  return (
+    <NewResource
+      type="Alerter"
+      onSuccess={async () =>
+        !!type && mutateAsync({ name, config: { type, params: {} } })
+      }
+      enabled={!!name && !!type}
+    >
+      <div className="grid md:grid-cols-2">
+        Name
+        <Input
+          placeholder="alerter-name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+      <div className="grid md:grid-cols-2">
+        Alerter Type
+        <Select
+          value={type}
+          onValueChange={(value) => setType(value as typeof type)}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select Type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="Slack">Slack</SelectItem>
+              <SelectItem value="Custom">Custom</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+    </NewResource>
+  );
+};
+
 export const Builder: RequiredResourceComponents = {
   Name: ({ id }) => <>{useBuilder(id)?.name}</>,
   Description: ({ id }) => <>{id}</>,
@@ -21,7 +155,13 @@ export const Builder: RequiredResourceComponents = {
     </>
   ),
   Icon: () => <Factory className="w-4 h-4" />,
-  Page: {},
+  Page: {
+    Config: ({ id }) => {
+      const config = useRead("GetBuilder", { id }).data?.config;
+      if (config?.type === "Aws") return <AwsBuilderConfig id={id} />;
+      if (config?.type === "Server") return <ServerBuilderConfig id={id} />;
+    },
+  },
   Actions: () => null,
-  New: () => null,
+  New: () => <NewBuilder />,
 };

frontend-v2/src/components/resources/index.tsx

@@ -1,10 +1,10 @@
 import { RequiredResourceComponents, UsableResource } from "@types";
-import { Deployment } from "./deployment";
-import { Server } from "./server";
 import { Alerter } from "./alerter";
 import { Build } from "./build";
 import { Builder } from "./builder";
+import { Deployment } from "./deployment";
 import { Repo } from "./repo";
+import { Server } from "./server";
 
 export const ResourceComponents: {
   [key in UsableResource]: RequiredResourceComponents;
@@ -13,6 +13,6 @@ export const ResourceComponents: {
   Build,
   Builder,
   Deployment,
-  Server,
   Repo,
+  Server,
 };

frontend-v2/src/components/resources/server/index.tsx

@@ -12,118 +12,126 @@ import { Input } from "@ui/input";
 export const useServer = (id?: string) =>
   useRead("ListServers", {}).data?.find((d) => d.id === id);
 
+const ServerInfo = ({ id }: { id: string }) => {
+  const server = useServer(id);
+  const stats = useRead(
+    "GetBasicSystemStats",
+    { server_id: id },
+    { enabled: server ? server.info.status !== "Disabled" : false }
+  ).data;
+  const info = useRead(
+    "GetSystemInformation",
+    { server_id: id },
+    { enabled: server ? server.info.status !== "Disabled" : false }
+  ).data;
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <MapPin className="w-4 h-4" />
+        {useServer(id)?.info.region}
+      </div>
+      <div className="flex gap-4 text-muted-foreground">
+        <div className="flex gap-2 items-center">
+          <Cpu className="w-4 h-4" />
+          {info?.core_count ?? "N/A"} Core(s)
+        </div>
+        <div className="flex gap-2 items-center">
+          <MemoryStick className="w-4 h-4" />
+          {stats?.mem_total_gb.toFixed(2) ?? "N/A"} GB
+        </div>
+        <div className="flex gap-2 items-center">
+          <Database className="w-4 h-4" />
+          {stats?.disk_total_gb.toFixed(2) ?? "N/A"} GB
+        </div>
+      </div>
+    </>
+  );
+};
+
+const ServerIconComponent = ({ id }: { id: string }) => {
+  const status = useServer(id)?.info.status;
+  return (
+    <ServerIcon
+      className={cn(
+        "w-4 h-4",
+        status === Types.ServerStatus.Ok && "fill-green-500",
+        status === Types.ServerStatus.NotOk && "fill-red-500",
+        status === Types.ServerStatus.Disabled && "fill-blue-500"
+      )}
+    />
+  );
+};
+
+const ServerConfig = ({ id }: { id: string }) => {
+  const config = useRead("GetServer", { id }).data?.config;
+  const [update, set] = useState<Partial<Types.ServerConfig>>({});
+  const { mutate } = useWrite("UpdateServer");
+  if (!config) return null;
+
+  return (
+    <ConfigInner
+      config={config}
+      update={update}
+      set={set}
+      onSave={() => mutate({ id, config: update })}
+      components={{
+        general: {
+          general: {
+            address: true,
+            region: true,
+            enabled: true,
+            auto_prune: true,
+          },
+        },
+        warnings: {
+          cpu: {
+            cpu_warning: true,
+            cpu_critical: true,
+          },
+          memory: {
+            mem_warning: true,
+            mem_critical: true,
+          },
+          disk: {
+            disk_warning: true,
+            disk_critical: true,
+          },
+        },
+      }}
+    />
+  );
+};
+
+const NewServer = () => {
+  const { mutateAsync } = useWrite("CreateServer");
+  const [name, setName] = useState("");
+  return (
+    <NewResource
+      type="Server"
+      onSuccess={() => mutateAsync({ name, config: {} })}
+      enabled={!!name}
+    >
+      <div className="grid md:grid-cols-2">
+        Server Name
+        <Input
+          placeholder="server-name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+    </NewResource>
+  );
+};
+
 export const Server: RequiredResourceComponents = {
   Name: ({ id }) => <>{useServer(id)?.name}</>,
   Description: ({ id }) => <>{useServer(id)?.info.status}</>,
-  Info: ({ id }) => {
-    const server = useServer(id);
-    const stats = useRead(
-      "GetBasicSystemStats",
-      { server_id: id },
-      { enabled: server ? server.info.status !== "Disabled" : false }
-    ).data;
-    const info = useRead(
-      "GetSystemInformation",
-      { server_id: id },
-      { enabled: server ? server.info.status !== "Disabled" : false }
-    ).data;
-    return (
-      <>
-        <div className="flex items-center gap-2">
-          <MapPin className="w-4 h-4" />
-          {useServer(id)?.info.region}
-        </div>
-        <div className="flex gap-4 text-muted-foreground">
-          <div className="flex gap-2 items-center">
-            <Cpu className="w-4 h-4" />
-            {info?.core_count ?? "N/A"} Core(s)
-          </div>
-          <div className="flex gap-2 items-center">
-            <MemoryStick className="w-4 h-4" />
-            {stats?.mem_total_gb.toFixed(2) ?? "N/A"} GB
-          </div>
-          <div className="flex gap-2 items-center">
-            <Database className="w-4 h-4" />
-            {stats?.disk_total_gb.toFixed(2) ?? "N/A"} GB
-          </div>
-        </div>
-      </>
-    );
-  },
+  Info: ({ id }) => <ServerInfo id={id} />,
   Actions: () => null,
-  Icon: ({ id }) => {
-    const status = useServer(id)?.info.status;
-    return (
-      <ServerIcon
-        className={cn(
-          "w-4 h-4",
-          status === Types.ServerStatus.Ok && "fill-green-500",
-          status === Types.ServerStatus.NotOk && "fill-red-500",
-          status === Types.ServerStatus.Disabled && "fill-blue-500"
-        )}
-      />
-    );
-  },
+  Icon: ({ id }) => <ServerIconComponent id={id} />,
   Page: {
     Stats: ({ id }) => <ServerStats id={id} />,
-    Config: ({ id }: { id: string }) => {
-      const config = useRead("GetServer", { id }).data?.config;
-      const [update, set] = useState<Partial<Types.ServerConfig>>({});
-      const { mutate } = useWrite("UpdateServer");
-      if (!config) return null;
-
-      return (
-        <ConfigInner
-          config={config}
-          update={update}
-          set={set}
-          onSave={() => mutate({ id, config: update })}
-          components={{
-            general: {
-              general: {
-                address: true,
-                region: true,
-                enabled: true,
-                auto_prune: true,
-              },
-            },
-            warnings: {
-              cpu: {
-                cpu_warning: true,
-                cpu_critical: true,
-              },
-              memory: {
-                mem_warning: true,
-                mem_critical: true,
-              },
-              disk: {
-                disk_warning: true,
-                disk_critical: true,
-              },
-            },
-          }}
-        />
-      );
-    },
-  },
-  New: () => {
-    const { mutateAsync } = useWrite("CreateDeployment");
-    const [name, setName] = useState("");
-    return (
-      <NewResource
-        type="Server"
-        onSuccess={() => mutateAsync({ name, config: {} })}
-        enabled={!!name}
-      >
-        <div className="grid md:grid-cols-2">
-          Server Name
-          <Input
-            placeholder="server-name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-        </div>
-      </NewResource>
-    );
+    Config: ({ id }) => <ServerConfig id={id} />,
   },
+  New: () => <NewServer />,
 };