ServerTemplate table

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

@@ -17,7 +17,7 @@ import { useState } from "react";
 import { Link } from "react-router-dom";
 import { BuilderConfig } from "./config";
 import { DeleteResource, ResourceLink } from "../common";
-import { BuidlerTable } from "./table";
+import { BuilderTable } from "./table";
 
 const useBuilder = (id?: string) =>
   useRead("ListBuilders", {}).data?.find((d) => d.id === id);
@@ -97,7 +97,7 @@ export const BuilderComponents: RequiredResourceComponents = {
     );
   },
 
-  Table: BuidlerTable,
+  Table: BuilderTable,
 
   Name: ({ id }: { id: string }) => <>{useBuilder(id)?.name}</>,
   name: (id) => useBuilder(id)?.name,

frontend/src/components/resources/builder/table.tsx

@@ -4,7 +4,7 @@ import { ResourceLink } from "../common";
 import { TagsWithBadge } from "@components/tags";
 import { BuilderInstanceType } from ".";
 
-export const BuidlerTable = ({ search }: { search?: string }) => {
+export const BuilderTable = ({ search }: { search?: string }) => {
   const tags = useTagsFilter();
   const builders = useRead("ListBuilders", {}).data;
   const searchSplit = search?.split(" ") || [];
@@ -31,7 +31,7 @@ export const BuidlerTable = ({ search }: { search?: string }) => {
           ),
         },
         {
-          accessorKey: "info.provider",
+          accessorKey: "info.builder_type",
           header: ({ column }) => (
             <SortableHeader column={column} title="Provider" />
           ),

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

@@ -1,8 +1,23 @@
-import { useRead } from "@lib/hooks";
+import { useRead, useWrite } from "@lib/hooks";
 import { RequiredResourceComponents } from "@types";
-import { DeleteResource, NewResource } from "../common";
-import { Bot, Cloud } from "lucide-react";
+import { DeleteResource } from "../common";
+import { Bot, Cloud, ServerCog } from "lucide-react";
 import { ServerTemplateConfig } from "./config";
+import { Link } from "react-router-dom";
+import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card";
+import { useState } from "react";
+import { Types } from "@monitor/client";
+import { NewLayout } from "@components/layouts";
+import { Input } from "@ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ui/select";
+import { ServerTemplateTable } from "./table";
 
 const useServerTemplate = (id?: string) =>
   useRead("ListServerTemplates", {}).data?.find((d) => d.id === id);
@@ -10,17 +25,70 @@ const useServerTemplate = (id?: string) =>
 export const ServerTemplateComponents: RequiredResourceComponents = {
   Dashboard: () => {
     const count = useRead("ListServerTemplates", {}).data?.length;
-    return <>{count}</>;
+    return (
+      <Link to="/server-templates/" className="w-full">
+        <Card className="hover:bg-accent/50 transition-colors cursor-pointer">
+          <CardHeader>
+            <div className="flex justify-between">
+              <div>
+                <CardTitle>Server Templates</CardTitle>
+                <CardDescription>{count} Total</CardDescription>
+              </div>
+              <ServerCog className="w-4 h-4" />
+            </div>
+          </CardHeader>
+        </Card>
+      </Link>
+    );
   },
 
-  New: () => <NewResource type="ServerTemplate" />,
+  New: () => {
+    const { mutateAsync } = useWrite("CreateServerTemplate");
+    const [name, setName] = useState("");
+    const [type, setType] = useState<Types.ServerTemplateConfig["type"]>("Aws");
 
-  Table: () => <div></div>,
+    return (
+      <NewLayout
+        entityType="Server Template"
+        onSuccess={async () =>
+          !!type && mutateAsync({ name, config: { type, params: {} } })
+        }
+        enabled={!!name && !!type}
+      >
+        <div className="grid md:grid-cols-2">
+          Name
+          <Input
+            placeholder="server-template-name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </div>
+        <div className="grid md:grid-cols-2">
+          Cloud Provider
+          <Select
+            value={type}
+            onValueChange={(value) => setType(value as typeof type)}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Select Type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="Aws">Aws</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+      </NewLayout>
+    );
+  },
+
+  Table: ServerTemplateTable,
 
   Name: ({ id }) => <>{useServerTemplate(id)?.name}</>,
   name: (id) => useServerTemplate(id)?.name,
 
-  Icon: () => <></>,
+  Icon: () => <ServerCog className="w-4 h-4" />,
 
   Status: {},
 

frontend/src/components/resources/server-template/table.tsx

@@ -0,0 +1,57 @@
+import { useRead, useTagsFilter } from "@lib/hooks";
+import { DataTable, SortableHeader } from "@ui/data-table";
+import { ResourceLink } from "../common";
+import { TagsWithBadge } from "@components/tags";
+
+export const ServerTemplateTable = ({ search }: { search?: string }) => {
+  const tags = useTagsFilter();
+  const server_templates = useRead("ListServerTemplates", {}).data;
+  const searchSplit = search?.split(" ") || [];
+  return (
+    <DataTable
+      tableKey="server-templates"
+      data={
+        server_templates?.filter(
+          (resource) =>
+            tags.every((tag) => resource.tags.includes(tag)) &&
+            (searchSplit.length > 0
+              ? searchSplit.every((search) => resource.name.includes(search))
+              : true)
+        ) ?? []
+      }
+      columns={[
+        {
+          accessorKey: "name",
+          header: ({ column }) => (
+            <SortableHeader column={column} title="Name" />
+          ),
+          cell: ({ row }) => (
+            <ResourceLink type="ServerTemplate" id={row.original.id} />
+          ),
+        },
+        {
+          accessorKey: "info.provider",
+          header: ({ column }) => (
+            <SortableHeader column={column} title="Provider" />
+          ),
+        },
+        {
+          accessorKey: "info.instance_type",
+          header: ({ column }) => (
+            <SortableHeader column={column} title="Instance Type" />
+          ),
+        },
+        {
+          header: "Tags",
+          cell: ({ row }) => {
+            return (
+              <div className="flex gap-1">
+                <TagsWithBadge tag_ids={row.original.tags} />
+              </div>
+            );
+          },
+        },
+      ]}
+    />
+  );
+};

frontend/src/lib/hooks.ts

@@ -144,12 +144,10 @@ export const useAuth = <
 
 // ============== UTILITY ==============
 
-/**
- * Actually returns UsableResoure | undefined
- */
 export const useResourceParamType = () => {
   const type = useParams().type;
   if (!type) return undefined;
+  if (type === "server-templates") return "ServerTemplate";
   return (type[0].toUpperCase() + type.slice(1, -1)) as UsableResource;
 };