make image previews fetch from agent, rework view page

and some other stuff idk
spaceness · Apr 28, 2024 · 1bbd9f7 · 1bbd9f7
1 parent a7f380f
commit 1bbd9f7
Show file tree

Hide file tree

Showing 25 changed files with 627 additions and 484 deletions.
diff --git a/.env.example b/.env.example
@@ -4,8 +4,7 @@ DATABASE_URL=
 DOCKER_TYPE=socket
 # docker socket path - normally /var/run/docker.sock
 DOCKER_SOCKET=/var/run/docker.sock
-# docker host and port - for http connection
-DOCKER_HOST=
+# docker port - for http connection
 DOCKER_PORT=
 # port range for docker containers
 DOCKER_PORT_RANGE=5000-6000

diff --git a/config.json b/config.json
@@ -1,5 +1,5 @@
 {
-  "style": {
-    "backgroundImage": "https://raw.githubusercontent.com/IncognitoTGT/incognitotgt/main/stardust-bg.png"
-  }
+	"style": {
+		"backgroundImage": "https://raw.githubusercontent.com/IncognitoTGT/incognitotgt/main/stardust-bg.png"
+	}
 }
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
 	},
 	"dependencies": {
 		"@novnc/novnc": "^1.4.0",
+		"@radix-ui/react-accordion": "^1.1.2",
 		"@radix-ui/react-alert-dialog": "^1.0.5",
 		"@radix-ui/react-aspect-ratio": "^1.0.3",
 		"@radix-ui/react-avatar": "^1.0.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/actions/client-session.ts b/src/actions/client-session.ts
@@ -1,6 +1,8 @@
 "use server";
 import { getAuthSession } from "@/lib/auth";
+import { getSession } from "@/lib/util/get-session";
 import { deleteSession as deleteSessionBase, manageSession as manageSessionBase } from "@/lib/util/session";
+import { sessionRunning } from "@/lib/util/session-running";
 import type Dockerode from "dockerode";
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
@@ -15,6 +17,8 @@ async function manageSession(id: string, action: keyof Dockerode.Container, navi
 	const userSession = await getAuthSession();
 	if (!userSession || !userSession.user) return;
 	await manageSessionBase(id, action, userSession);
+	const container = await getSession(id, userSession);
+	if (container && !navigate) await sessionRunning(container.agentPort);
 	revalidatePath("/");
 	if (navigate) redirect("/");
 }

diff --git a/src/app/(main)/admin/page.tsx b/src/app/(main)/admin/page.tsx
@@ -1,3 +1,3 @@
 export default function AdminPage() {
-	return <div className="flex min-h-screen items-center justify-center">coming soon (hopefully)</div>;
+	return <div className="flex min-h-full items-center justify-center">coming soon (hopefully)</div>;
 }
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
@@ -11,7 +11,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
 			.where(eq(userSchema.email, userSession?.user?.email as string))
 	)[0];
 	return (
-		<main className="h-[93vh]">
+		<main className="h-[90vh]">
 			<Navigation dbUser={dbUser} session={userSession} />
 			{children}
 		</main>

diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
@@ -13,10 +13,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
+import { Card, CardTitle } from "@/components/ui/card";
 import { getAuthSession } from "@/lib/auth";
 import docker from "@/lib/docker";
-import { db, image, user } from "@/lib/drizzle/db";
+import type Dockerode from "dockerode";
+import { type SelectSession, db, image, user } from "@/lib/drizzle/db";
 import { createSession, deleteSession, manageSession } from "@/lib/util/session";
 import { eq } from "drizzle-orm";
 import { Container, Loader2, Pause, Play, Square, TrashIcon } from "lucide-react";
@@ -25,9 +26,43 @@ import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
+import { sessionRunning } from "@/lib/util/session-running";
+import type { Session } from "next-auth";
+import { SkeletionImage } from "@/components/skeleton-image";
 const errorCatcher = (error: string) => {
 	throw new Error(error);
 };
+const ManageSessionButton = ({
+	session,
+	userSession,
+	action,
+	redirectToView,
+	icon,
+}: {
+	session: SelectSession;
+	userSession: Session | null;
+	action: keyof Dockerode.Container;
+	redirectToView?: boolean;
+	icon: React.ReactNode;
+}) => (
+	<form
+		action={async () => {
+			"use server";
+			if (!userSession) return;
+			await manageSession(session.id, action, userSession).catch(errorCatcher);
+			if (redirectToView) {
+				await sessionRunning(session.agentPort);
+				redirect(`/view/${session.id}`);
+			} else {
+				revalidatePath("/");
+			}
+		}}
+	>
+		<StyledSubmit variant="ghost" size="icon" pendingSpinner>
+			{icon}
+		</StyledSubmit>
+	</form>
+);
 export default async function Dashboard() {
 	const userSession = await getAuthSession();
 	const images = await db.select().from(image).catch(errorCatcher);
@@ -89,7 +124,7 @@ export default async function Dashboard() {
 														throw new Error(e);
 													});
 													if (!containerSession) return;
-													redirect(`/view/${containerSession[0].id}?nocheck=true`);
+													redirect(`/view/${containerSession[0].id}`);
 												}}
 											>
 												<DialogHeader>
@@ -143,10 +178,10 @@ export default async function Dashboard() {
 													</p>
 												</div>
 											</section>
-											{session.imagePreview ? (
+											{!State.Paused && State.Running ? (
 												<AspectRatio ratio={16 / 9}>
-													<Image
-														src={session.imagePreview}
+													<SkeletionImage
+														src={`/api/session/preview/${session.id}`}
 														fill
 														alt=""
 														className="object-fill rounded-sm md:h-[6.5rem] md:w-[13rem] h-[3.25rem] w-[6.5rem]"
@@ -159,71 +194,39 @@ export default async function Dashboard() {
 											)}
 											<div className="flex w-full flex-row items-center justify-center gap-x-2">
 												{!State.Paused && State.Running ? (
-													<StyledSubmit variant="ghost" size="icon" pendingSpinner>
+													<StyledSubmit variant="ghost" size="icon" pendingSpinner asChild>
 														<Link
 															href={{
 																pathname: `/view/${session.id}`,
-																query: { nocheck: true },
 															}}
 														>
 															<Play />
 														</Link>
 													</StyledSubmit>
 												) : null}
 												{!State.Paused && State.Running ? (
-													<form
-														action={async () => {
-															"use server";
-															if (!userSession) return;
-															await manageSession(session.id, "pause", userSession).catch(errorCatcher);
-															revalidatePath("/");
-														}}
-													>
-														<StyledSubmit variant="ghost" size="icon" pendingSpinner>
-															<Pause />
-														</StyledSubmit>
-													</form>
+													<ManageSessionButton
+														action="pause"
+														icon={<Pause />}
+														session={session}
+														userSession={userSession}
+													/>
 												) : State.Paused ? (
-													<form
-														action={async () => {
-															"use server";
-															if (!userSession) return;
-															await manageSession(session.id, "unpause", userSession).catch(errorCatcher);
-															redirect(`/view/${session.id}?nocheck=true`);
-														}}
-													>
-														<StyledSubmit variant="ghost" size="icon" pendingSpinner>
-															<Play />
-														</StyledSubmit>
-													</form>
-												) : null}
-												{!State.Running ? (
-													<form
-														action={async () => {
-															"use server";
-															if (!userSession) return;
-															await manageSession(session.id, "start", userSession).catch(errorCatcher);
-															redirect(`/view/${session.id}?nocheck=true`);
-														}}
-													>
-														<StyledSubmit variant="ghost" size="icon" pendingSpinner>
-															<Play />
-														</StyledSubmit>
-													</form>
-												) : State.Running ? (
-													<form
-														action={async () => {
-															"use server";
-															if (!userSession) return;
-															await manageSession(session.id, "stop", userSession).catch(errorCatcher);
-															revalidatePath("/");
-														}}
-													>
-														<StyledSubmit variant="ghost" size="icon" pendingSpinner>
-															<Square className="text-destructive" />
-														</StyledSubmit>
-													</form>
+													<ManageSessionButton
+														action="unpause"
+														icon={<Play />}
+														redirectToView
+														session={session}
+														userSession={userSession}
+													/>
 												) : null}
+												<ManageSessionButton
+													action={State.Running ? "stop" : "start"}
+													redirectToView={!State.Running}
+													icon={State.Running ? <Square className="text-destructive" /> : <Play />}
+													session={session}
+													userSession={userSession}
+												/>
 												<form
 													action={async () => {
 														"use server";
@@ -241,10 +244,10 @@ export default async function Dashboard() {
 									);
 								})
 							) : (
-								<div className="flex items-center justify-center flex-col w-full h-full bg-background/75 backdrop-blur-md p-24 rounded-md">
-									<p className="text-lg text-foreground">No sessions found</p>
+								<Card className="flex items-center justify-center flex-col w-full h-full bg-background/75 backdrop-blur-md p-24">
+									<CardTitle className="text-lg text-foreground">No sessions found</CardTitle>
 									<p className="text-xs text-muted-foreground">Start a new session to see it here</p>
-								</div>
+								</Card>
 							)}
 						</Suspense>
 					</TabsContent>