feat(web): paginated runs table, add loading page

2023-12-31 01:07:39 +08:00
parent 744a222e26
commit d63ab1924b
18 changed files with 465 additions and 105 deletions
@@ -0,0 +1,9 @@
+"use client";
+
+import { LoadingPageWrapper } from "@/components/LoadingWrapper";
+import { usePathname } from "next/navigation";
+
+export default function Loading() {
+  const pathName = usePathname();
+  return <LoadingPageWrapper className="h-full" tag={pathName.toLowerCase()} />;
+}
@@ -0,0 +1,9 @@
+"use client";
+
+import { LoadingPageWrapper } from "@/components/LoadingWrapper";
+import { usePathname } from "next/navigation";
+
+export default function Loading() {
+  const pathName = usePathname();
+  return <LoadingPageWrapper className="h-full" tag={pathName.toLowerCase()} />;
+}
@@ -0,0 +1,25 @@
+import { LoadingWrapper } from "@/components/LoadingWrapper";
+import { DeploymentsTable } from "@/components/RunsTable";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default async function Page({
+  params,
+}: {
+  params: { workflow_id: string };
+}) {
+  const workflow_id = params.workflow_id;
+
+  return (
+    <Card className="w-full h-fit">
+      <CardHeader>
+        <CardTitle>Deployments</CardTitle>
+      </CardHeader>
+
+      <CardContent>
+        <LoadingWrapper tag="deployments">
+          <DeploymentsTable workflow_id={workflow_id} />
+        </LoadingWrapper>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,27 @@
+import { LoadingWrapper } from "@/components/LoadingWrapper";
+import { RunsTable } from "@/components/RunsTable";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default async function Page({
+  params,
+  searchParams,
+}: {
+  params: { workflow_id: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  const workflow_id = params.workflow_id;
+
+  return (
+    <Card className="w-full h-fit min-w-0">
+      <CardHeader>
+        <CardTitle>Run</CardTitle>
+      </CardHeader>
+
+      <CardContent>
+        <LoadingWrapper tag="runs">
+          <RunsTable workflow_id={workflow_id} searchParams={searchParams} />
+        </LoadingWrapper>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,11 @@
+import { LoadingPageWrapper } from "@/components/LoadingWrapper";
+import { Card } from "@/components/ui/card";
+
+export default function Loading() {
+  // You can add any UI inside Loading, including a Skeleton.
+  return (
+    <Card className="w-full h-fit">
+      <LoadingPageWrapper tag="workflow details" />
+    </Card>
+  );
+}
@@ -0,0 +1,56 @@
+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";
+import { findFirstTableWithVersion } from "@/server/findFirstTableWithVersion";
+
+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 (
+    <Card className="w-full 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>
+  );
+}
@@ -0,0 +1,22 @@
+export default async function Layout({
+  children,
+  deployment,
+  runs,
+  workflow,
+}: {
+  children: React.ReactNode;
+  deployment: React.ReactNode;
+  runs: React.ReactNode;
+  workflow: React.ReactNode;
+}) {
+  return (
+    <div className="mt-4 w-full grid grid-rows-[1fr,1fr] lg:grid-cols-[minmax(auto,500px),1fr] gap-4 max-h-[calc(100dvh-100px)]">
+      <div className="w-full flex gap-4 flex-col min-w-0">
+        {workflow}
+        {deployment}
+      </div>
+
+      {runs}
+    </div>
+  );
+}
@@ -0,0 +1,6 @@
+import { LoadingPageWrapper } from "@/components/LoadingWrapper";
+
+export default function Loading() {
+  // You can add any UI inside Loading, including a Skeleton.
+  return <LoadingPageWrapper tag="workflow" />;
+}
@@ -1,80 +0,0 @@
-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,9 @@
+"use client";
+
+import { LoadingPageWrapper } from "@/components/LoadingWrapper";
+import { usePathname } from "next/navigation";
+
+export default function Loading() {
+  const pathName = usePathname();
+  return <LoadingPageWrapper className="h-full" tag={pathName.toLowerCase()} />;
+}