feat(docs): add docs and restructure

2023-12-28 00:06:32 +08:00
parent afc67bc0b9
commit 498374195d
56 changed files with 3751 additions and 54 deletions
@@ -0,0 +1,80 @@
+import { DeploymentsTable, RunsTable } from "../../../../components/RunsTable";
+import { findFirstTableWithVersion } from "../../../../server/findFirstTableWithVersion";
+import { MachinesWSMain } from "@/components/MachinesWS";
+import { VersionDetails } from "@/components/VersionDetails";
+import {
+  CopyWorkflowVersion,
+  CreateDeploymentButton,
+  MachineSelect,
+  RunWorkflowButton,
+  VersionSelect,
+  ViewWorkflowDetailsButton,
+} from "@/components/VersionSelect";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { getRelativeTime } from "@/lib/getRelativeTime";
+import { getMachines } from "@/server/curdMachine";
+
+export default async function Page({
+  params,
+}: {
+  params: { workflow_id: string };
+}) {
+  const workflow_id = params.workflow_id;
+
+  const workflow = await findFirstTableWithVersion(workflow_id);
+  const machines = await getMachines();
+
+  return (
+    <div className="mt-4 w-full flex flex-col lg:flex-row gap-4 max-h-[calc(100dvh-100px)]">
+      <div className="flex gap-4 flex-col">
+        <Card className="w-full lg:w-fit lg:min-w-[600px] h-fit">
+          <CardHeader>
+            <CardTitle>{workflow?.name}</CardTitle>
+            <CardDescription suppressHydrationWarning={true}>
+              {getRelativeTime(workflow?.updated_at)}
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent>
+            <div className="flex gap-2 flex-wrap">
+              <VersionSelect workflow={workflow} />
+              <MachineSelect machines={machines} />
+              <RunWorkflowButton workflow={workflow} machines={machines} />
+              <CreateDeploymentButton workflow={workflow} machines={machines} />
+              <CopyWorkflowVersion workflow={workflow} />
+              <ViewWorkflowDetailsButton workflow={workflow} />
+            </div>
+
+            <VersionDetails workflow={workflow} />
+            <MachinesWSMain machines={machines} />
+          </CardContent>
+        </Card>
+        <Card className="w-full h-fit">
+          <CardHeader>
+            <CardTitle>Deployments</CardTitle>
+          </CardHeader>
+
+          <CardContent>
+            <DeploymentsTable workflow_id={workflow_id} />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card className="w-full h-fit">
+        <CardHeader>
+          <CardTitle>Run</CardTitle>
+        </CardHeader>
+
+        <CardContent>
+          <RunsTable workflow_id={workflow_id} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,77 @@
+import { WorkflowList } from "@/components/WorkflowList";
+import { db } from "@/db/db";
+import { usersTable, workflowTable, workflowVersionTable } from "@/db/schema";
+import { auth, clerkClient } from "@clerk/nextjs";
+import { desc, eq } from "drizzle-orm";
+
+export default function Home() {
+  return <WorkflowServer />;
+}
+
+async function WorkflowServer() {
+  const { userId } = await auth();
+
+  if (!userId) {
+    return <div>No auth</div>;
+  }
+
+  const user = await db.query.usersTable.findFirst({
+    where: eq(usersTable.id, userId),
+  });
+
+  if (!user) {
+    await setInitialUserData(userId);
+  }
+
+  const workflow = await db.query.workflowTable.findMany({
+    // extras: {
+    //   count: sql<number>`(select count(*) from ${workflowVersionTable})`.as(
+    //     "count",
+    //   ),
+    // },
+    with: {
+      versions: {
+        limit: 1,
+        orderBy: desc(workflowVersionTable.version),
+      },
+    },
+    orderBy: desc(workflowTable.updated_at),
+    where: eq(workflowTable.user_id, userId),
+  });
+
+  return (
+    <WorkflowList
+      data={workflow.map((x) => {
+        return {
+          id: x.id,
+          email: x.name,
+          amount: x.versions[0]?.version ?? 0,
+          date: x.updated_at,
+        };
+      })}
+    />
+  );
+}
+
+async function setInitialUserData(userId: string) {
+  const user = await clerkClient.users.getUser(userId);
+
+  // incase we dont have username such as google login, fallback to first name + last name
+  const usernameFallback =
+    user.username ?? (user.firstName ?? "") + (user.lastName ?? "");
+
+  // For the display name, if it for some reason is empty, fallback to username
+  let nameFallback = (user.firstName ?? "") + (user.lastName ?? "");
+  if (nameFallback === "") {
+    nameFallback = usernameFallback;
+  }
+
+  const result = await db.insert(usersTable).values({
+    id: userId,
+    // this is used for path, make sure this is unique
+    username: usernameFallback,
+
+    // this is for display name, maybe different from username
+    name: nameFallback,
+  });
+}