improve orchestrator, docker settings, and ui layouts

2024-05-12 22:06:11 -07:00
parent 18aca540cc
commit 59fb0521af
15 changed files with 264 additions and 128 deletions
--- a/frontend/components/editor/editor.tsx
+++ b/frontend/components/editor/editor.tsx
@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import monaco from "monaco-editor";
 import Editor, { BeforeMount, OnMount } from "@monaco-editor/react";
-import { io } from "socket.io-client";
+import { Socket, io } from "socket.io-client";
 import { toast } from "sonner";
 import { useClerk } from "@clerk/nextjs";

@ -40,12 +40,12 @@ export default function CodeEditor({
  sandboxData: Sandbox;
 }) {
  const socket = io(
-    `http://localhost:4000?userId=${userData.id}&sandboxId=${sandboxData.id}`
+    `ws://${sandboxData.id}.ws.ishaand.com?userId=${userData.id}&sandboxId=${sandboxData.id}`
+    // `http://localhost:4000?userId=${userData.id}&sandboxId=${sandboxData.id}`
  );

-  const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(
-    sandboxData.type !== "react"
-  );
+  const [isAwaitingConnection, setIsAwaitingConnection] = useState(true);
+  const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true);
  const [disableAccess, setDisableAccess] = useState({
    isDisabled: false,
    message: "",
@ -364,7 +364,9 @@ export default function CodeEditor({

  // Socket event listener effect
  useEffect(() => {
-    const onConnect = () => {};
+    const onConnect = () => {
+      setIsAwaitingConnection(false);
+    };

    const onDisconnect = () => {
      setTerminals([]);
@ -538,6 +540,14 @@ export default function CodeEditor({
    }, 3000);
  };

+  if (isAwaitingConnection)
+    return (
+      <Loading
+        text="Connecting to server..."
+        description="This could take a few minutes if the backend needs to scale resources for your cloud code editing environment. Please check back soon."
+      />
+    );
+
  // On disabled access for shared users, show un-interactable loading placeholder + info modal
  if (disableAccess.isDisabled)
    return (
@ -727,6 +737,7 @@ export default function CodeEditor({
                  previewPanelRef.current?.expand();
                  setIsPreviewCollapsed(false);
                }}
+                sandboxId={sandboxData.id}
              />
            </ResizablePanel>
            <ResizableHandle />
--- a/frontend/components/editor/generate.tsx
+++ b/frontend/components/editor/generate.tsx
@ -1,13 +1,13 @@
-"use client"
+"use client";

-import { useEffect, useRef, useState } from "react"
-import { Button } from "../ui/button"
-import { Check, Loader2, RotateCw, Sparkles, X } from "lucide-react"
-import { Socket } from "socket.io-client"
-import { Editor } from "@monaco-editor/react"
-import { User } from "@/lib/types"
-import { toast } from "sonner"
-import { usePathname, useRouter } from "next/navigation"
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../ui/button";
+import { Check, Loader2, RotateCw, Sparkles, X } from "lucide-react";
+import { Socket } from "socket.io-client";
+import { Editor } from "@monaco-editor/react";
+import { User } from "@/lib/types";
+import { toast } from "sonner";
+import { usePathname, useRouter } from "next/navigation";
 // import monaco from "monaco-editor"

 export default function GenerateInput({
@ -19,52 +19,52 @@ export default function GenerateInput({
  onExpand,
  onAccept,
 }: {
-  user: User
-  socket: Socket
-  width: number
+  user: User;
+  socket: Socket;
+  width: number;
  data: {
-    fileName: string
-    code: string
-    line: number
-  }
+    fileName: string;
+    code: string;
+    line: number;
+  };
  editor: {
-    language: string
-  }
-  onExpand: () => void
-  onAccept: (code: string) => void
+    language: string;
+  };
+  onExpand: () => void;
+  onAccept: (code: string) => void;
 }) {
-  const pathname = usePathname()
-  const router = useRouter()
-  const inputRef = useRef<HTMLInputElement>(null)
+  const pathname = usePathname();
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);

-  const [code, setCode] = useState("")
-  const [expanded, setExpanded] = useState(false)
+  const [code, setCode] = useState("");
+  const [expanded, setExpanded] = useState(false);
  const [loading, setLoading] = useState({
    generate: false,
    regenerate: false,
-  })
-  const [input, setInput] = useState("")
-  const [currentPrompt, setCurrentPrompt] = useState("")
+  });
+  const [input, setInput] = useState("");
+  const [currentPrompt, setCurrentPrompt] = useState("");

  useEffect(() => {
    setTimeout(() => {
-      inputRef.current?.focus()
-    }, 0)
-  }, [])
+      inputRef.current?.focus();
+    }, 0);
+  }, []);

  const handleGenerate = async ({
    regenerate = false,
  }: {
-    regenerate?: boolean
+    regenerate?: boolean;
  }) => {
    if (user.generations >= 30) {
      toast.error(
        "You reached the maximum # of generations. Contact @ishaandey_ on X/Twitter to reset :)"
-      )
+      );
    }

-    setLoading({ generate: !regenerate, regenerate })
-    setCurrentPrompt(input)
+    setLoading({ generate: !regenerate, regenerate });
+    setCurrentPrompt(input);
    socket.emit(
      "generateCode",
      data.fileName,
@ -73,30 +73,30 @@ export default function GenerateInput({
      regenerate ? currentPrompt : input,
      (res: {
        result: {
-          response: string
-        }
-        success: boolean
-        errors: any[]
-        messages: any[]
+          response: string;
+        };
+        success: boolean;
+        errors: any[];
+        messages: any[];
      }) => {
        if (!res.success) {
-          console.error(res.errors)
-          return
+          console.error(res.errors);
+          return;
        }

-        setCode(res.result.response)
-        router.refresh()
+        setCode(res.result.response);
+        router.refresh();
      }
-    )
-  }
+    );
+  };

  useEffect(() => {
    if (code) {
-      setExpanded(true)
-      onExpand()
-      setLoading({ generate: false, regenerate: false })
+      setExpanded(true);
+      onExpand();
+      setLoading({ generate: false, regenerate: false });
    }
-  }, [code])
+  }, [code]);

  return (
    <div className="w-full pr-4 space-y-2">
@ -187,5 +187,5 @@ export default function GenerateInput({
        </>
      ) : null}
    </div>
-  )
+  );
 }
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@ -4,7 +4,7 @@ import dynamic from "next/dynamic";
 import Loading from "@/components/editor/loading";
 import { Sandbox, User } from "@/lib/types";
 import { useEffect, useState } from "react";
-import { startServer } from "@/lib/utils";
+import { startServer, stopServer } from "@/lib/utils";
 import { toast } from "sonner";

 const CodeEditor = dynamic(() => import("@/components/editor/editor"), {
@ -20,21 +20,25 @@ export default function Editor({
  sandboxData: Sandbox;
 }) {
  const [isServerRunning, setIsServerRunning] = useState(false);
+  const [didFail, setDidFail] = useState(false);

-  // useEffect(() => {
-  //   startServer(sandboxData.id, userData.id, (success: boolean) => {
-  //     if (!success) {
-  //       toast.error("Failed to start server.");
-  //       return;
-  //     }
-  //     setIsServerRunning(true);
-  //   });
-  // }, []);
+  useEffect(() => {
+    startServer(sandboxData.id, userData.id, (success: boolean) => {
+      if (!success) {
+        toast.error("Failed to start server.");
+        setDidFail(true);
+      } else {
+        setIsServerRunning(true);
+      }
+    });
+
+    return () => {
+      stopServer(sandboxData.id, userData.id);
+    };
+  }, []);

  if (!isServerRunning)
-    return (
-      <Loading text="Creating code editing environment, this could take a while." />
-    );
+    return <Loading didFail={didFail} text="Creating your sandbox resources" />;

  return <CodeEditor userData={userData} sandboxData={sandboxData} />;
 }
--- a/frontend/components/editor/loading/index.tsx
+++ b/frontend/components/editor/loading/index.tsx
@ -1,23 +1,58 @@
 import Image from "next/image";
 import Logo from "@/assets/logo.svg";
-import { Skeleton } from "../ui/skeleton";
-import { Loader, Loader2 } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Loader2, X } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useEffect, useState } from "react";

 export default function Loading({
+  didFail = false,
  withNav = false,
  text = "",
+  description = "",
 }: {
+  didFail?: boolean;
  withNav?: boolean;
  text?: string;
+  description?: string;
 }) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (text) {
+      setOpen(true);
+    }
+  }, [text]);
+
  return (
    <div className="overflow-hidden overscroll-none w-screen flex flex-col justify-center items-center z-0 h-screen bg-background relative">
-      {text ? (
-        <div className="text-lg font-medium flex items-center z-50 shadow-xl shadow-red-500">
-          <Loader2 className="h-5 w-5 animate-spin mr-2" />
-          {text}
-        </div>
-      ) : null}
+      <Dialog open={open}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {didFail ? (
+                <>
+                  <X className="h-4 w-4 mr-2 text-destructive" /> Failed to
+                  create resources.
+                </>
+              ) : (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" /> {text}
+                </>
+              )}
+            </DialogTitle>
+            {description ? (
+              <DialogDescription>{description}</DialogDescription>
+            ) : null}
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>

      {withNav ? (
        <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
--- a/frontend/components/editor/preview/index.tsx
+++ b/frontend/components/editor/preview/index.tsx
@ -12,9 +12,11 @@ import {
 export default function PreviewWindow({
  collapsed,
  open,
+  sandboxId,
 }: {
  collapsed: boolean;
  open: () => void;
+  sandboxId: string;
 }) {
  return (
    <>
@ -55,7 +57,13 @@ export default function PreviewWindow({
        </div>
      </div>
      {collapsed ? null : (
-        <div className="w-full grow rounded-md bg-foreground"></div>
+        <div className="w-full grow rounded-md overflow-hidden bg-foreground">
+          <iframe
+            width={"100%"}
+            height={"100%"}
+            src={`http://${sandboxId}.s.ishaand.com`}
+          />
+        </div>
      )}
    </>
  );
--- a/frontend/components/ui/dialog.tsx
+++ b/frontend/components/ui/dialog.tsx
@ -1,18 +1,18 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;

-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;

-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;

-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;

 const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
@ -26,8 +26,8 @@ const DialogOverlay = React.forwardRef<
    )}
    {...props}
  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

 const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
@ -50,8 +50,29 @@ const DialogContent = React.forwardRef<
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogContentNoClose = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContentNoClose.displayName =
+  DialogPrimitive.Content.displayName + "NoClose";

 const DialogHeader = ({
  className,
@ -64,8 +85,8 @@ const DialogHeader = ({
    )}
    {...props}
  />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";

 const DialogFooter = ({
  className,
@ -78,8 +99,8 @@ const DialogFooter = ({
    )}
    {...props}
  />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";

 const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
@ -88,13 +109,13 @@ const DialogTitle = React.forwardRef<
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "text-lg font-semibold leading-none tracking-tight flex items-center",
      className
    )}
    {...props}
  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;

 const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
@ -105,8 +126,8 @@ const DialogDescription = React.forwardRef<
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;

 export {
  Dialog,
@ -115,8 +136,9 @@ export {
  DialogTrigger,
  DialogClose,
  DialogContent,
+  DialogContentNoClose,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
-}
+};