first draft of updates and config pages

frontend/src/components/updates/resource.tsx

@@ -0,0 +1 @@
+export const ResourceUpdates = () => {};

frontend/src/layouts/layout.tsx

@@ -13,7 +13,7 @@ export const Layout = () => {
     <>
       <div className="relative flex min-h-screen flex-col">
         <Header />
-        <div className="container pt-8">
+        <div className="container pt-12">
           <Outlet />
         </div>
       </div>

frontend/src/layouts/resource.tsx

@@ -1,36 +1,18 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ui/tabs";
 import { ReactNode } from "react";
 import { Page } from "./page";
+import { Outlet } from "react-router-dom";
 
 interface ResourceProps {
   title: ReactNode;
   info: ReactNode;
   actions: ReactNode;
-  tabs: { title: string; component: ReactNode }[];
 }
 
-export const Resource = ({ title, info, actions, tabs }: ResourceProps) => (
-  <Tabs defaultValue={tabs[0].title}>
-    <Page
-      title={<h1 className="text-4xl">{title}</h1>}
-      subtitle={<h2 className="text-lg">{info}</h2>}
-      actions={actions}
-      content={
-        <div className="flex flex-col gap-2">
-          <TabsList className=" w-fit">
-            {tabs.map(({ title }) => (
-              <TabsTrigger key={title} value={title}>
-                {title}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-          {tabs.map((t, i) => (
-            <TabsContent key={i} value={t.title}>
-              {t.component}
-            </TabsContent>
-          ))}
-        </div>
-      }
-    />
-  </Tabs>
+export const Resource = ({ title, info, actions }: ResourceProps) => (
+  <Page
+    title={<h1 className="text-4xl">{title}</h1>}
+    subtitle={<h2 className="text-lg">{info}</h2>}
+    actions={actions}
+    content={<Outlet />}
+  />
 );

frontend/src/resources/deployment/components/deployment-logs.tsx

@@ -1,21 +1,23 @@
 import { Button } from "@ui/button";
 import { Card, CardHeader, CardContent } from "@ui/card";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@ui/tabs"; // import { useDeploymentLog } from "@hooks/deployments";
-import { AlertOctagon, ChevronDown } from "lucide-react";
+import { AlertOctagon, ChevronDown, TerminalSquare } from "lucide-react";
 import { useEffect } from "react";
 import { useRead } from "@hooks";
+import { useParams } from "react-router-dom";
 
 const scroll_to_bottom = (id: string) => () =>
   document
     .getElementById(id)
     ?.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
 
-export const DeploymentLogs = ({
-  deployment_id,
-}: {
-  deployment_id: string;
-}) => {
-  const { data, refetch } = useRead("GetLog", { deployment_id, tail: 200 });
+export const DeploymentLogs = () => {
+  const deployment_id = useParams().deploymentId;
+  const { data, refetch } = useRead(
+    "GetLog",
+    { deployment_id, tail: 200 },
+    { enabled: !!deployment_id }
+  );
 
   useEffect(() => {
     const handle = setInterval(() => refetch(), 30000);
@@ -29,38 +31,36 @@ export const DeploymentLogs = ({
 
   return (
     <Tabs defaultValue="stdout">
-      <Card>
-        <CardHeader>
-          <TabsList className="w-fit place-self-end">
-            <TabsTrigger value="stdout" onClick={scroll_to_bottom("stdout")}>
-              Out
-            </TabsTrigger>
-            <TabsTrigger value="stderr" onClick={scroll_to_bottom("stderr")}>
-              Err
-              {data?.stderr && (
-                <AlertOctagon className="w-4 h-4 ml-2 stroke-red-500" />
-              )}
-            </TabsTrigger>
-          </TabsList>
-        </CardHeader>
-        <CardContent>
-          {["stdout", "stderr"].map((t) => (
-            <TabsContent key={t} className="h-full relative" value={t}>
-              <div className="h-[50vh] overflow-y-scroll">
-                <pre id={t}>
-                  {data?.[t as keyof typeof data] || `no ${t} logs`}
-                </pre>
-              </div>
-              <Button
-                className="absolute bottom-4 right-4"
-                onClick={scroll_to_bottom(t)}
-              >
-                <ChevronDown className="h-4 w-4" />
-              </Button>
-            </TabsContent>
-          ))}
-        </CardContent>
-      </Card>
+      <div className="flex justify-between">
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <TerminalSquare className="w-4 h-4" />
+          <h2 className="text-xl">Logs</h2>
+        </div>
+        <TabsList className="w-fit place-self-end">
+          <TabsTrigger value="stdout" onClick={scroll_to_bottom("stdout")}>
+            Out
+          </TabsTrigger>
+          <TabsTrigger value="stderr" onClick={scroll_to_bottom("stderr")}>
+            Err
+            {data?.stderr && (
+              <AlertOctagon className="w-4 h-4 ml-2 stroke-red-500" />
+            )}
+          </TabsTrigger>
+        </TabsList>
+      </div>
+      {["stdout", "stderr"].map((t) => (
+        <TabsContent key={t} className="h-full relative" value={t}>
+          <div className="h-[60vh] overflow-y-scroll">
+            <pre id={t}>{data?.[t as keyof typeof data] || `no ${t} logs`}</pre>
+          </div>
+          <Button
+            className="absolute bottom-4 right-4"
+            onClick={scroll_to_bottom(t)}
+          >
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+        </TabsContent>
+      ))}
     </Tabs>
   );
 };

frontend/src/resources/deployment/layout.tsx

@@ -0,0 +1,69 @@
+import { Link, useParams } from "react-router-dom";
+import { useSetRecentlyViewed } from "@hooks";
+import { Resource } from "@layouts/resource";
+import { CardDescription } from "@ui/card";
+import {
+  DeploymentBuild,
+  DeploymentName,
+  DeploymentServer,
+  DeploymentStatus,
+  DeploymentStatusIcon,
+} from "./util";
+import {
+  RedeployContainer,
+  RemoveContainer,
+  StartOrStopContainer,
+} from "./components/actions";
+import { Button } from "@ui/button";
+import { Bell, Settings } from "lucide-react";
+
+export const DeploymentLayout = () => {
+  const { deploymentId } = useParams();
+  const push = useSetRecentlyViewed();
+
+  if (!deploymentId) return null;
+  push("Deployment", deploymentId);
+
+  return (
+    <Resource
+      title={
+        <Link to={`/deployments/${deploymentId}`}>
+          <DeploymentName deploymentId={deploymentId} />
+        </Link>
+      }
+      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={deploymentId} />
+            <DeploymentStatus deploymentId={deploymentId} />
+          </div>
+          <CardDescription className="hidden lg:block">|</CardDescription>
+          <DeploymentServer deploymentId={deploymentId} />
+          <CardDescription className="hidden lg:block">|</CardDescription>
+          <DeploymentBuild deploymentId={deploymentId} />
+        </div>
+      }
+      actions={
+        <div className="flex flex-col gap-4 md:flex-row md:items-center">
+          <div className="flex gap-4">
+            <RedeployContainer deployment_id={deploymentId} />
+            <StartOrStopContainer deployment_id={deploymentId} />
+            <RemoveContainer deployment_id={deploymentId} />
+          </div>
+          <div className="flex gap-4">
+            <Link to={`/deployments/${deploymentId}/updates`}>
+              <Button variant="outline">
+                <Bell className="w-4 h-4" />
+              </Button>
+            </Link>
+            <Link to={`/deployments/${deploymentId}/config`}>
+              <Button variant="outline">
+                <Settings className="w-4 h-4" />
+              </Button>
+            </Link>
+          </div>
+        </div>
+      }
+    />
+  );
+};

frontend/src/resources/deployment/page.tsx

@@ -1,22 +1,32 @@
 import { useParams } from "react-router-dom";
-import { useSetRecentlyViewed } from "@hooks";
-import { Resource } from "@layouts/resource";
-import { CardDescription } from "@ui/card";
-import {
-  DeploymentBuild,
-  DeploymentName,
-  DeploymentServer,
-  DeploymentStatus,
-  DeploymentStatusIcon,
-} from "./util";
-import {
-  RedeployContainer,
-  RemoveContainer,
-  StartOrStopContainer,
-} from "./components/actions";
+import { useRead, useSetRecentlyViewed } from "@hooks";
 import { DeploymentLogs } from "./components/deployment-logs";
+import { Card, CardHeader, CardTitle } from "@ui/card";
+import { Bell } from "lucide-react";
 
-export const Deployment = () => {
+const DeploymentUpdates = ({ id }: { id: string }) => {
+  const updates = useRead("ListUpdates", { target: { id } }).data;
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex items-center gap-2 text-muted-foreground">
+        <Bell className="w-4 h-4" />
+        <h2 className="text-xl">Updates</h2>
+      </div>
+      <div className="grid md:grid-cols-3">
+        {updates?.slice(0, 3).map((u) => (
+          <Card>
+            <CardTitle>
+              <CardHeader>{u.operation}</CardHeader>
+            </CardTitle>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const DeploymentPage = () => {
   const { deploymentId } = useParams();
   const push = useSetRecentlyViewed();
 
@@ -24,41 +34,9 @@ export const Deployment = () => {
   push("Deployment", deploymentId);
 
   return (
-    <Resource
-      title={<DeploymentName deploymentId={deploymentId} />}
-      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={deploymentId} />
-            <DeploymentStatus deploymentId={deploymentId} />
-          </div>
-          <CardDescription className="hidden lg:block">|</CardDescription>
-          <DeploymentServer deploymentId={deploymentId} />
-          <CardDescription className="hidden lg:block">|</CardDescription>
-          <DeploymentBuild deploymentId={deploymentId} />
-        </div>
-      }
-      actions={
-        <div className="flex gap-4">
-          <RedeployContainer deployment_id={deploymentId} />
-          <StartOrStopContainer deployment_id={deploymentId} />
-          <RemoveContainer deployment_id={deploymentId} />
-        </div>
-      }
-      tabs={[
-        {
-          title: "Logs",
-          component: <DeploymentLogs deployment_id={deploymentId} />,
-        },
-        {
-          title: "Config",
-          component: <>Config</>,
-        },
-        {
-          title: "Updates",
-          component: <>Updates</>,
-        },
-      ]}
-    />
+    <div className="flex flex-col gap-12">
+      <DeploymentUpdates id={deploymentId} />
+      <DeploymentLogs />
+    </div>
   );
 };

frontend/src/resources/deployment/updates.tsx

@@ -0,0 +1,43 @@
+import { useRead } from "@hooks";
+import { Table, TableCell, TableHead, TableHeader, TableRow } from "@ui/table";
+import { fmt_update_date } from "@util/helpers";
+import { Check, X } from "lucide-react";
+import { useParams } from "react-router-dom";
+
+export const DeploymentUpdates = () => {
+  const deploymentId = useParams().deploymentId;
+  const updates = useRead("ListUpdates", { target: { id: deploymentId } }).data;
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Start</TableHead>
+          <TableHead>End</TableHead>
+          <TableHead>Operation</TableHead>
+          <TableHead>Operator</TableHead>
+          <TableHead>Success</TableHead>
+        </TableRow>
+      </TableHeader>
+      {updates?.map((update) => (
+        <TableRow>
+          <TableCell>{fmt_update_date(new Date(update.start_ts))}</TableCell>
+          <TableCell>
+            {update.end_ts
+              ? fmt_update_date(new Date(update.end_ts))
+              : "ongoing..."}
+          </TableCell>
+          <TableCell>{update.operation}</TableCell>
+          <TableCell>{update.operator}</TableCell>
+          <TableCell>
+            {update.success ? (
+              <Check className="w-4 h-4 stroke-green-500" />
+            ) : (
+              <X className="w-4 h-4 stroke-red-500" />
+            )}
+          </TableCell>
+        </TableRow>
+      ))}
+    </Table>
+  );
+};

frontend/src/router.tsx

@@ -3,10 +3,13 @@ import { Layout } from "@layouts/layout";
 import { Login } from "@pages/auth/login";
 import { Signup } from "@pages/auth/signup";
 import { Dashboard } from "@pages/dashboard";
-import { Deployment } from "@resources/deployment/page";
 import { Server } from "@resources/server/page";
 import { Build } from "@resources/build/page";
 import { Deployments, Builds, Servers, Builders } from "@resources/pages";
+import { DeploymentLogs } from "@resources/deployment/components/deployment-logs";
+import { DeploymentUpdates } from "@resources/deployment/updates";
+import { DeploymentLayout } from "@resources/deployment/layout";
+import { DeploymentPage } from "@resources/deployment/page";
 
 const router = createBrowserRouter([
   {
@@ -17,14 +20,24 @@ const router = createBrowserRouter([
       { path: "login", element: <Login /> },
       { path: "signup", element: <Signup /> },
 
+      // Deployments
       {
         path: "deployments",
         children: [
           { path: "", element: <Deployments /> },
-          { path: ":deploymentId", element: <Deployment /> },
+          {
+            path: ":deploymentId",
+            element: <DeploymentLayout />,
+            children: [
+              { path: "", element: <DeploymentPage /> },
+              { path: "updates", element: <DeploymentUpdates /> },
+              { path: "config", element: <>deployment config!</> },
+            ],
+          },
         ],
       },
 
+      // Servers
       {
         path: "servers",
         children: [
@@ -32,6 +45,8 @@ const router = createBrowserRouter([
           { path: ":serverId", element: <Server /> },
         ],
       },
+
+      // Builds
       {
         path: "builds",
         children: [
@@ -39,6 +54,8 @@ const router = createBrowserRouter([
           { path: ":buildId", element: <Build /> },
         ],
       },
+
+      // Builders
       {
         path: "builders",
         children: [

frontend/src/ui/table.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+
+import { cn } from "@util/helpers";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn("[&_tr]:border-b bg-muted", className)}
+    {...props}
+  />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

frontend/src/util/helpers.ts

@@ -298,3 +298,6 @@ export function readableImageNameTag(
     return ["none", "none"];
   }
 }
+
+export const fmt_update_date = (d: Date) =>
+  `${d.getDate()}/${d.getMonth()} @ ${d.getHours()}:${d.getMinutes()}`;