init refactor

frontend/src/components/util.tsx

@@ -133,7 +133,10 @@ export const ActionWithDialog = ({
             icon={icon}
             intent={intent}
             disabled={name !== input}
-            onClick={onClick}
+            onClick={() => {
+              onClick && onClick();
+              setOpen(false);
+            }}
           />
         </DialogFooter>
       </DialogContent>

frontend/src/layouts/resource.tsx

@@ -1,18 +1,18 @@
 import { ReactNode } from "react";
 import { Page } from "./page";
-import { Outlet } from "react-router-dom";
 
 interface ResourceProps {
   title: ReactNode;
   info: ReactNode;
   actions: ReactNode;
+  children: ReactNode;
 }
 
-export const Resource = ({ title, info, actions }: ResourceProps) => (
+export const Resource = ({ title, info, actions, children }: ResourceProps) => (
   <Page
     title={<h1 className="text-4xl">{title}</h1>}
-    subtitle={<h2 className="text-lg">{info}</h2>}
+    subtitle={<h2 className="text-md">{info}</h2>}
     actions={actions}
-    content={<Outlet />}
+    content={children}
   />
 );

frontend/src/pages/auth/login.tsx

@@ -3,49 +3,59 @@ import { Card, CardContent, CardHeader, CardTitle } from "@ui/card";
 import { Input } from "@ui/input";
 import { Label } from "@ui/label";
 import { useLogin } from "@hooks";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export const Login = () => {
   const { mutate, isLoading } = useLogin();
   const [creds, set] = useState({ username: "", password: "" });
 
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => e.key === "Enter" && mutate(creds);
+    addEventListener("keydown", handler);
+    return () => {
+      removeEventListener("keydown", handler);
+    };
+  });
+
   return (
-    <Card className="w-full max-w-[500px] place-self-center">
-      <CardHeader>
-        <CardTitle>Log In</CardTitle>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <div>
-          <Label htmlFor="username">Username</Label>
-          <Input
-            id="username"
-            value={creds.username}
-            onChange={({ target }) =>
-              set((c) => ({ ...c, username: target.value }))
-            }
-          />
-        </div>
-        <div>
-          <Label htmlFor="password">Password</Label>
-          <Input
-            id="password"
-            type="password"
-            value={creds.password}
-            onChange={({ target }) =>
-              set((c) => ({ ...c, password: target.value }))
-            }
-          />
-        </div>
-        <div className="flex w-full justify-end">
-          <Button
-            variant="outline"
-            onClick={() => mutate(creds)}
-            disabled={isLoading}
-          >
-            Login
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
+    <div className="w-full flex justify-center">
+      <Card className="w-full max-w-[500px] place-self-center">
+        <CardHeader>
+          <CardTitle>Log In</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <div>
+            <Label htmlFor="username">Username</Label>
+            <Input
+              id="username"
+              value={creds.username}
+              onChange={({ target }) =>
+                set((c) => ({ ...c, username: target.value }))
+              }
+            />
+          </div>
+          <div>
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={creds.password}
+              onChange={({ target }) =>
+                set((c) => ({ ...c, password: target.value }))
+              }
+            />
+          </div>
+          <div className="flex w-full justify-end">
+            <Button
+              variant="outline"
+              onClick={() => mutate(creds)}
+              disabled={isLoading}
+            >
+              Login
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   );
 };

frontend/src/resources/dep/index.tsx

@@ -0,0 +1,74 @@
+import { ResourceUpdates } from "@components/updates/resource";
+import { useRead } from "@hooks";
+import { ResourceCard } from "@layouts/card";
+import { Resource } from "@layouts/resource";
+import {
+  RedeployContainer,
+  StartOrStopContainer,
+  RemoveContainer,
+} from "@resources/deployment/components/actions";
+import { DeploymentLogs } from "@resources/deployment/components/deployment-logs";
+import { DeploymentConfig } from "@resources/deployment/config";
+import {
+  DeploymentBuild,
+  DeploymentName,
+  DeploymentServer,
+  DeploymentStatus,
+  DeploymentStatusIcon,
+} from "@resources/deployment/util";
+import { CardDescription } from "@ui/card";
+import { Link, useParams } from "react-router-dom";
+
+export const DeploymentPage = () => {
+  const id = useParams().deploymentId;
+  if (!id) return null;
+
+  return (
+    <Resource
+      title={<DeploymentName deploymentId={id} />}
+      info={
+        <div className="flex flex-col lg:flex-row lg:items-center lg:gap-4 text-muted-foreground">
+          <div className="flex items-center gap-2 ">
+            <DeploymentStatusIcon deploymentId={id} />
+            <DeploymentStatus deploymentId={id} />
+          </div>
+          <CardDescription className="hidden lg:block">|</CardDescription>
+          <DeploymentServer deploymentId={id} />
+          <CardDescription className="hidden lg:block">|</CardDescription>
+          <DeploymentBuild deploymentId={id} />
+        </div>
+      }
+      actions={
+        <div className="flex gap-4">
+          <RedeployContainer deployment_id={id} />
+          <StartOrStopContainer deployment_id={id} />
+          <RemoveContainer deployment_id={id} />
+        </div>
+      }
+    >
+      <ResourceUpdates type="Deployment" id={id} />
+      <DeploymentLogs deployment_id={id} />
+      <DeploymentConfig />
+    </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/card.tsx

@@ -17,21 +17,12 @@ export const DeploymentCard = ({ id }: { id: string }) => {
         title={deployment.name}
         description={deployment.status ?? "not deployed"}
         statusIcon={<DeploymentStatusIcon deploymentId={id} />}
-        // icon={<Rocket className="w-4 h-4" />}
       >
-        <div className="flex flex-col text-muted-foreground">
+        <div className="flex flex-col text-muted-foreground text-sm">
           <DeploymentServer deploymentId={id} />
           <DeploymentBuild deploymentId={id} />
         </div>
       </ResourceCard>
     </Link>
-    // <ResourceCard
-    //   title={deployment.name}
-    //   description={deployment.status ?? "not deployed"}
-    //   statusIcon={<DeploymentStatusIcon deploymentId={id} />}
-    //   icon={<Rocket className="w-4 h-4" />}
-    // >
-    //   <DeploymentInfo deploymentId={id} />
-    // </ResourceCard>
   );
 };

frontend/src/resources/ser/index.tsx

@@ -0,0 +1,34 @@
+import { ResourceUpdates } from "@components/updates/resource";
+import { Resource } from "@layouts/resource";
+import { ServerConfig } from "@resources/server/config";
+import { ServerStatsPage } from "@resources/server/stats";
+import {
+  ServerName,
+  ServerStatusIcon,
+  ServerStats,
+} from "@resources/server/util";
+import { CardDescription } from "@ui/card";
+import { useParams } from "react-router-dom";
+
+export const ServerPage = () => {
+  const id = useParams().serverId;
+  if (!id) return null;
+
+  return (
+    <Resource
+      title={<ServerName serverId={id} />}
+      info={
+        <div className="flex items-center gap-4">
+          <ServerStatusIcon serverId={id} />
+          <CardDescription className="hidden md:block">|</CardDescription>
+          <ServerStats server_id={id} />
+        </div>
+      }
+      actions={null}
+    >
+      <ResourceUpdates type="Server" id={id} />
+      <ServerStatsPage />
+      <ServerConfig />
+    </Resource>
+  );
+};

frontend/src/router.tsx

@@ -6,12 +6,11 @@ import { Dashboard } from "@pages/dashboard";
 import { Server, ServerContent } from "@resources/server/page";
 import { Build } from "@resources/build/page";
 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";
+import { DeploymentPage } from "@resources/dep";
+import { ServerPage } from "@resources/ser";
 
 const router = createBrowserRouter([
   {
@@ -27,15 +26,7 @@ const router = createBrowserRouter([
         path: "deployments",
         children: [
           { path: "", element: <Deployments /> },
-          {
-            path: ":deploymentId",
-            element: <DeploymentLayout />,
-            children: [
-              { path: "", element: <DeploymentPage /> },
-              { path: "updates", element: <DeploymentUpdates /> },
-              { path: "config", element: <DeploymentConfig /> },
-            ],
-          },
+          { path: ":deploymentId", element: <DeploymentPage /> },
         ],
       },
 
@@ -44,14 +35,7 @@ const router = createBrowserRouter([
         path: "servers",
         children: [
           { path: "", element: <Servers /> },
-          {
-            path: ":serverId",
-            element: <Server />,
-            children: [
-              { path: "", element: <ServerContent /> },
-              { path: "config", element: <ServerConfig /> },
-            ],
-          },
+          { path: ":serverId", element: <ServerPage /> },
         ],
       },