clean up join workflow

pkgs/ui/src/app/layout.tsx

@@ -53,7 +53,7 @@ export default function RootLayout({
         <title>Clan.lol</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="Clan.lol - build your own network" />
-        <link rel="icon" href="public/favicon.ico" sizes="any" />
+        <link rel="icon" href="./favicon.ico" sizes="any" />
       </head>
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={userPrefersDarkmode ? darkTheme : lightTheme}>

pkgs/ui/src/components/createMachineForm/clanModules.tsx

@@ -115,7 +115,7 @@ export default function ClanModules(props: ClanModulesProps) {
   const isSchemaLoading = formHooks.watch("isSchemaLoading");
 
   const handleChange = (
-    event: SelectChangeEvent<CreateMachineForm["modules"]>
+    event: SelectChangeEvent<CreateMachineForm["modules"]>,
   ) => {
     const {
       target: { value },

pkgs/ui/src/components/createMachineForm/customConfig.tsx

@@ -44,7 +44,7 @@ export function CustomConfig(props: FormStepContentProps) {
         }
         return acc;
       }, {}),
-    [schema]
+    [schema],
   );
 
   return (
@@ -110,7 +110,7 @@ function PureCustomConfig(props: PureCustomConfigProps) {
         message: "invalid config",
       });
       toast.error(
-        "Configuration is invalid. Please check the highlighted fields for details."
+        "Configuration is invalid. Please check the highlighted fields for details.",
       );
     } else {
       formHooks.clearErrors("config");

pkgs/ui/src/components/hooks/useVms.tsx

@@ -1,5 +1,5 @@
-import { inspectVm } from "@/api/vm/vm";
 import { HTTPValidationError, VmConfig } from "@/api/model";
+import { inspectVm } from "@/api/vm/vm";
 import { AxiosError } from "axios";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";

pkgs/ui/src/components/join/configureVM.tsx

@@ -1,3 +1,5 @@
+import { useInspectFlakeAttrs } from "@/api/flake/flake";
+import { FormValues } from "@/views/joinPrequel";
 import {
   Button,
   InputAdornment,
@@ -8,14 +10,10 @@ import {
   Switch,
   TextField,
 } from "@mui/material";
-import { Controller, SubmitHandler, UseFormReturn } from "react-hook-form";
-import { FlakeBadge } from "../flakeBadge/flakeBadge";
-import { createVm } from "@/api/vm/vm";
-import { useInspectFlakeAttrs } from "@/api/flake/flake";
-import { VmConfig } from "@/api/model";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { useEffect } from "react";
+import { Controller, UseFormReturn } from "react-hook-form";
 import { toast } from "react-hot-toast";
-import { useAppState } from "../hooks/useAppContext";
+import { FlakeBadge } from "../flakeBadge/flakeBadge";
 
 interface VmPropLabelProps {
   children: React.ReactNode;
@@ -34,44 +32,41 @@ const VmPropContent = (props: VmPropContentProps) => (
 );
 
 interface VmDetailsProps {
-  formHooks: UseFormReturn<VmConfig, any, undefined>;
-  setVmUuid: Dispatch<SetStateAction<string | null>>;
+  formHooks: UseFormReturn<FormValues, any, undefined>;
 }
 
+type ClanError = {
+  detail: {
+    msg: string;
+    loc: [];
+  }[];
+};
+
 export const ConfigureVM = (props: VmDetailsProps) => {
-  const { formHooks, setVmUuid } = props;
-  const { control, handleSubmit, watch, setValue } = formHooks;
-  const [isStarting, setStarting] = useState(false);
-  const { setAppState } = useAppState();
-  const { isLoading, data } = useInspectFlakeAttrs({ url: watch("flake_url") });
+  const { formHooks } = props;
+  const { control, watch, setValue, formState } = formHooks;
+
+  const { isLoading, data, error } = useInspectFlakeAttrs({
+    url: watch("flakeUrl"),
+  });
 
   useEffect(() => {
     if (!isLoading && data?.data) {
       setValue("flake_attr", data.data.flake_attrs[0] || "");
     }
   }, [isLoading, setValue, data]);
+  if (error) {
+    const msg =
+      (error?.response?.data as unknown as ClanError)?.detail?.[0]?.msg ||
+      error.message;
 
-  const onSubmit: SubmitHandler<VmConfig> = async (data) => {
-    setStarting(true);
-    console.log(data);
-    const response = await createVm(data);
-    const { uuid } = response?.data || null;
-
-    setVmUuid(() => uuid);
-    setStarting(false);
-    if (response.statusText === "OK") {
-      toast.success(("Joined @ " + uuid) as string);
-      setAppState((s) => ({ ...s, isJoined: true }));
-    } else {
-      toast.error("Could not join");
-    }
-  };
-
+    toast.error(msg, {
+      id: error.name,
+    });
+    return <div>{msg}</div>;
+  }
   return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="grid grid-cols-4 gap-y-10"
-    >
+    <div className="grid grid-cols-4 gap-y-10">
       <div className="col-span-4">
         <ListSubheader sx={{ bgcolor: "inherit" }}>General</ListSubheader>
       </div>
@@ -79,7 +74,7 @@ export const ConfigureVM = (props: VmDetailsProps) => {
       <VmPropContent>
         <FlakeBadge
           flakeAttr={watch("flake_attr")}
-          flakeUrl={watch("flake_url")}
+          flakeUrl={watch("flakeUrl")}
         />
       </VmPropContent>
       <VmPropLabel>Machine</VmPropLabel>
@@ -88,6 +83,7 @@ export const ConfigureVM = (props: VmDetailsProps) => {
           <Controller
             name="flake_attr"
             control={control}
+            defaultValue={data?.data.flake_attrs?.[0]}
             render={({ field }) => (
               <Select
                 {...field}
@@ -96,9 +92,6 @@ export const ConfigureVM = (props: VmDetailsProps) => {
                 fullWidth
                 disabled={isLoading}
               >
-                {!data?.data.flake_attrs.includes("default") && (
-                  <MenuItem value={"default"}>default</MenuItem>
-                )}
                 {data?.data.flake_attrs.map((attr) => (
                   <MenuItem value={attr} key={attr}>
                     {attr}
@@ -151,16 +144,16 @@ export const ConfigureVM = (props: VmDetailsProps) => {
       </VmPropContent>
 
       <div className="col-span-4 grid items-center">
-        {isStarting && <LinearProgress />}
+        {formState.isSubmitting && <LinearProgress />}
         <Button
           autoFocus
           type="submit"
-          disabled={isStarting}
+          disabled={formState.isSubmitting}
           variant="contained"
         >
           Join Clan
         </Button>
       </div>
-    </form>
+    </div>
   );
 };

pkgs/ui/src/components/join/confirmVM.tsx

@@ -1,12 +1,11 @@
 "use client";
-import React, { useEffect, useState } from "react";
-import { VmConfig } from "@/api/model";
 import { useVms } from "@/components/hooks/useVms";
+import { useEffect } from "react";
 
-import { LoadingOverlay } from "./loadingOverlay";
-import { useForm } from "react-hook-form";
+import { FormValues } from "@/views/joinPrequel";
+import { useFormContext } from "react-hook-form";
 import { ConfigureVM } from "./configureVM";
-import { VmBuildLogs } from "./vmBuildLogs";
+import { LoadingOverlay } from "./loadingOverlay";
 
 interface ConfirmVMProps {
   url: string;
@@ -15,22 +14,16 @@ interface ConfirmVMProps {
 }
 
 export function ConfirmVM(props: ConfirmVMProps) {
-  const { url, defaultFlakeAttr } = props;
-  const formHooks = useForm<VmConfig>({
-    defaultValues: {
-      flake_url: url,
-      flake_attr: defaultFlakeAttr,
-      cores: 4,
-      graphics: true,
-      memory_size: 2048,
-    },
-  });
-  const [vmUuid, setVmUuid] = useState<string | null>(null);
+  const formHooks = useFormContext<FormValues>();
+
+  const { setValue, watch } = formHooks;
+
+  const url = watch("flakeUrl");
+  const attr = watch("flake_attr");
 
-  const { setValue, watch, formState } = formHooks;
   const { config, isLoading } = useVms({
     url,
-    attr: watch("flake_attr") || defaultFlakeAttr,
+    attr,
   });
 
   useEffect(() => {
@@ -43,19 +36,13 @@ export function ConfirmVM(props: ConfirmVMProps) {
 
   return (
     <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2">
-      {!formState.isSubmitted && (
-        <>
-          <div className="mb-2 w-full max-w-2xl">
-            {isLoading && (
-              <LoadingOverlay title={"Loading VM Configuration"} subtitle="" />
-            )}
+      <div className="mb-2 w-full max-w-2xl">
+        {isLoading && (
+          <LoadingOverlay title={"Loading VM Configuration"} subtitle="" />
+        )}
 
-            <ConfigureVM formHooks={formHooks} setVmUuid={setVmUuid} />
-          </div>
-        </>
-      )}
-
-      {formState.isSubmitted && vmUuid && <VmBuildLogs vmUuid={vmUuid} />}
+        <ConfigureVM formHooks={formHooks} />
+      </div>
     </div>
   );
 }

pkgs/ui/src/components/join/layout.tsx

@@ -1,19 +1,14 @@
 "use client";
-import { Typography } from "@mui/material";
 import { ReactNode } from "react";
 
 interface LayoutProps {
   children: ReactNode;
+  header: ReactNode;
 }
 export const Layout = (props: LayoutProps) => {
   return (
     <div className="grid h-[70vh] w-full grid-cols-1 justify-center gap-y-4">
-      <Typography variant="h4" className="w-full text-center">
-        Join{" "}
-        <Typography variant="h4" className="font-bold" component={"span"}>
-          Clan.lol
-        </Typography>
-      </Typography>
+      {props.header}
       {props.children}
     </div>
   );

pkgs/ui/src/components/join/log.tsx

@@ -1,12 +1,21 @@
 "use client";
+
+import { Button } from "@mui/material";
+
 interface LogOptions {
   lines: string[];
   title?: string;
+  handleClose?: () => void;
 }
 export const Log = (props: LogOptions) => {
-  const { lines, title } = props;
+  const { lines, title, handleClose } = props;
   return (
     <div className="max-h-[70vh] min-h-[9rem] w-full overflow-scroll bg-neutral-20 p-4 text-white shadow-inner shadow-black">
+      {handleClose && (
+        <Button onClick={handleClose} sx={{ float: "right" }}>
+          Close
+        </Button>
+      )}
       <div className="mb-1 text-neutral-70">{title}</div>
       <pre className="max-w-[90vw] text-xs">
         {lines.map((item, idx) => (

pkgs/ui/src/components/join/vmBuildLogs.tsx

@@ -1,29 +1,63 @@
 "use client";
-import { useGetVmLogs } from "@/api/vm/vm";
+
+import { getGetVmLogsKey } from "@/api/vm/vm";
+import axios from "axios";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { Log } from "./log";
-import { LoadingOverlay } from "./loadingOverlay";
 
 interface VmBuildLogsProps {
   vmUuid: string;
+  handleClose: () => void;
 }
-export const VmBuildLogs = (props: VmBuildLogsProps) => {
-  const { vmUuid } = props;
 
-  const { data: logs, isLoading } = useGetVmLogs(vmUuid as string, {
-    swr: {
-      enabled: vmUuid !== null,
-    },
-    axios: {
-      responseType: "stream",
-    },
-  });
+const streamLogs = async (
+  uuid: string,
+  setter: Dispatch<SetStateAction<string>>,
+  onFinish: () => void,
+) => {
+  const apiPath = getGetVmLogsKey(uuid);
+  const baseUrl = axios.defaults.baseURL;
+
+  const response = await fetch(`${baseUrl}${apiPath}`);
+  const reader = response?.body?.getReader();
+  if (!reader) {
+    console.log("could not get reader");
+  }
+  while (true) {
+    const stream = await reader?.read();
+    if (!stream || stream.done) {
+      console.log("stream done");
+      onFinish();
+      break;
+    }
+
+    const text = new TextDecoder().decode(stream.value);
+    setter((s) => `${s}${text}`);
+    console.log("Received", stream.value);
+    console.log("String:", text);
+  }
+};
+
+export const VmBuildLogs = (props: VmBuildLogsProps) => {
+  const { vmUuid, handleClose } = props;
+  const [logs, setLogs] = useState<string>("");
+  const [done, setDone] = useState<boolean>(false);
+
+  // Reset the logs if uuid changes
+  useEffect(() => {
+    setLogs("");
+    setDone(false);
+  }, [vmUuid]);
+
+  !done && streamLogs(vmUuid, setLogs, () => setDone(true));
 
   return (
     <div className="w-full">
-      {isLoading && <LoadingOverlay title="Initializing" subtitle="" />}
+      {/* {isLoading && <LoadingOverlay title="Initializing" subtitle="" />} */}
       <Log
-        lines={(logs?.data as string)?.split("\n") || ["..."]}
+        lines={logs?.split("\n") || ["..."]}
         title="Building..."
+        handleClose={handleClose}
       />
     </div>
   );

pkgs/ui/src/views/createForm.tsx

@@ -0,0 +1,56 @@
+import { Input, InputAdornment, LinearProgress } from "@mui/material";
+import { Controller, useFormContext } from "react-hook-form";
+
+interface CreateFormProps {
+  confirmAdornment?: React.ReactNode;
+}
+
+export const CreateForm = (props: CreateFormProps) => {
+  const { confirmAdornment } = props;
+  const {
+    control,
+    formState: { isSubmitting },
+  } = useFormContext();
+  return (
+    <div>
+      <Controller
+        name="flakeUrl"
+        control={control}
+        render={({ field }) => (
+          <Input
+            disableUnderline
+            placeholder="url"
+            color="secondary"
+            aria-required="true"
+            {...field}
+            required
+            fullWidth
+            startAdornment={
+              <InputAdornment position="start">Clan</InputAdornment>
+            }
+          />
+        )}
+      />
+      <Controller
+        name="dest"
+        control={control}
+        render={({ field }) => (
+          <Input
+            sx={{ my: 2 }}
+            placeholder="Location"
+            color="secondary"
+            aria-required="true"
+            {...field}
+            required
+            fullWidth
+            startAdornment={
+              <InputAdornment position="start">Name</InputAdornment>
+            }
+            endAdornment={confirmAdornment}
+          />
+        )}
+      />
+      {isSubmitting && <LinearProgress />}
+    </div>
+  );
+};

pkgs/ui/src/views/joinForm.tsx

@@ -0,0 +1,51 @@
+import { Confirm } from "@/components/join/confirm";
+import { Input, InputAdornment } from "@mui/material";
+import { Controller, useFormContext } from "react-hook-form";
+
+interface JoinFormProps {
+  confirmAdornment?: React.ReactNode;
+  initialParams: {
+    flakeUrl: string;
+    flakeAttr: string;
+  };
+}
+export const JoinForm = (props: JoinFormProps) => {
+  const { initialParams, confirmAdornment } = props;
+  const { control, formState, reset, getValues, watch } = useFormContext();
+
+  return (
+    <div>
+      {watch("flakeUrl") || initialParams.flakeUrl ? (
+        <Confirm
+          handleBack={() => reset()}
+          flakeUrl={
+            formState.isSubmitted
+              ? getValues("flakeUrl")
+              : initialParams.flakeUrl
+          }
+          flakeAttr={initialParams.flakeAttr}
+        />
+      ) : (
+        <Controller
+          name="flakeUrl"
+          control={control}
+          render={({ field }) => (
+            <Input
+              disableUnderline
+              placeholder="url"
+              color="secondary"
+              aria-required="true"
+              {...field}
+              required
+              fullWidth
+              startAdornment={
+                <InputAdornment position="start">Clan</InputAdornment>
+              }
+              endAdornment={confirmAdornment}
+            />
+          )}
+        />
+      )}
+    </div>
+  );
+};

pkgs/ui/src/views/joinPrequel.tsx

@@ -1,23 +1,28 @@
 "use client";
 import {
   IconButton,
-  Input,
   InputAdornment,
-  LinearProgress,
   MenuItem,
   Select,
+  Typography,
 } from "@mui/material";
 import { useSearchParams } from "next/navigation";
 import { Suspense, useState } from "react";
 
 import { createFlake } from "@/api/flake/flake";
+import { VmConfig } from "@/api/model";
+import { createVm } from "@/api/vm/vm";
 import { useAppState } from "@/components/hooks/useAppContext";
-import { Confirm } from "@/components/join/confirm";
 import { Layout } from "@/components/join/layout";
+import { VmBuildLogs } from "@/components/join/vmBuildLogs";
 import { ChevronRight } from "@mui/icons-material";
-import { Controller, useForm } from "react-hook-form";
+import { AxiosError } from "axios";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
+import { CreateForm } from "./createForm";
+import { JoinForm } from "./joinForm";
 
-type FormValues = {
+export type FormValues = VmConfig & {
   workflow: "join" | "create";
   flakeUrl: string;
   dest?: string;
@@ -27,13 +32,25 @@ export default function JoinPrequel() {
   const queryParams = useSearchParams();
   const flakeUrl = queryParams.get("flake") || "";
   const flakeAttr = queryParams.get("attr") || "default";
-  const [, setForkInProgress] = useState(false);
+  const initialParams = { flakeUrl, flakeAttr };
+
   const { setAppState } = useAppState();
 
-  const { control, formState, getValues, reset, watch, handleSubmit } =
-    useForm<FormValues>({
-      defaultValues: { flakeUrl: "", dest: undefined, workflow: "join" },
-    });
+  const methods = useForm<FormValues>({
+    defaultValues: {
+      flakeUrl: "",
+      dest: undefined,
+      workflow: "join",
+      cores: 4,
+      graphics: true,
+      memory_size: 2048,
+    },
+  });
+
+  const { control, watch, handleSubmit } = methods;
+
+  const [vmUuid, setVmUuid] = useState<string | null>(null);
+  const [showLogs, setShowLogs] = useState<boolean>(false);
 
   const workflow = watch("workflow");
 
@@ -54,88 +71,85 @@ export default function JoinPrequel() {
           </Select>
         )}
       />
-      <IconButton type="submit">
+      <IconButton type={"submit"}>
         <ChevronRight />
       </IconButton>
     </InputAdornment>
   );
   return (
-    <Layout>
+    <Layout
+      header={
+        <Typography
+          variant="h4"
+          className="w-full text-center"
+          sx={{ textTransform: "capitalize" }}
+        >
+          {workflow}{" "}
+          <Typography variant="h4" className="font-bold" component={"span"}>
+            Clan.lol
+          </Typography>
+        </Typography>
+      }
+    >
       <Suspense fallback="Loading">
-        {!formState.isSubmitted && !flakeUrl && (
-          <form
-            onSubmit={handleSubmit((values) => {
-              console.log("submitted", { values });
-              if (workflow === "create") {
-                setForkInProgress(true);
-                createFlake({
-                  flake_name: values.dest || "default",
-                  url: values.flakeUrl,
-                }).then(() => {
-                  setForkInProgress(false);
-                  setAppState((s) => ({ ...s, isJoined: true }));
-                });
-              }
-            })}
-            className="w-full max-w-2xl justify-self-center"
-          >
-            <Controller
-              name="flakeUrl"
-              control={control}
-              render={({ field }) => (
-                <Input
-                  disableUnderline
-                  placeholder="url"
-                  color="secondary"
-                  aria-required="true"
-                  {...field}
-                  required
-                  fullWidth
-                  startAdornment={
-                    <InputAdornment position="start">Clan</InputAdornment>
+        {vmUuid && showLogs ? (
+          <VmBuildLogs vmUuid={vmUuid} handleClose={() => setShowLogs(false)} />
+        ) : (
+          <FormProvider {...methods}>
+            <form
+              onSubmit={handleSubmit(async (values) => {
+                if (workflow === "create") {
+                  try {
+                    await createFlake({
+                      flake_name: values.dest || "default",
+                      url: values.flakeUrl,
+                    });
+                    setAppState((s) => ({ ...s, isJoined: true }));
+                  } catch (error) {
+                    toast.error(
+                      `Error: ${(error as AxiosError).message || ""}`,
+                    );
                   }
-                  endAdornment={
-                    workflow == "join" ? WorkflowAdornment : undefined
+                }
+                if (workflow === "join") {
+                  console.log("JOINING");
+                  console.log(values);
+                  try {
+                    const response = await createVm({
+                      cores: values.cores,
+                      flake_attr: values.flake_attr,
+                      flake_url: values.flakeUrl,
+                      graphics: values.graphics,
+                      memory_size: values.memory_size,
+                    });
+                    const { uuid } = response?.data || null;
+                    setShowLogs(true);
+                    setVmUuid(() => uuid);
+                    if (response.statusText === "OK") {
+                      toast.success(("Joined @ " + uuid) as string);
+                    } else {
+                      toast.error("Could not join");
+                    }
+                  } catch (error) {
+                    toast.error(
+                      `Error: ${(error as AxiosError).message || ""}`,
+                    );
                   }
+                }
+              })}
+              className="w-full max-w-2xl justify-self-center"
+            >
+              {workflow == "join" && (
+                <JoinForm
+                  initialParams={initialParams}
+                  confirmAdornment={WorkflowAdornment}
                 />
               )}
-            />
-            {workflow === "create" && (
-              <Controller
-                name="dest"
-                control={control}
-                render={({ field }) => (
-                  <Input
-                    sx={{ my: 2 }}
-                    placeholder="Location"
-                    color="secondary"
-                    aria-required="true"
-                    {...field}
-                    required
-                    fullWidth
-                    startAdornment={
-                      <InputAdornment position="start">Name</InputAdornment>
-                    }
-                    endAdornment={
-                      workflow == "create" ? WorkflowAdornment : undefined
-                    }
-                  />
-                )}
-              />
-            )}
-          </form>
-        )}
-        {formState.isSubmitted && workflow == "create" && (
-          <div>
-            <LinearProgress />
-          </div>
-        )}
-        {(formState.isSubmitted || flakeUrl) && workflow == "join" && (
-          <Confirm
-            handleBack={() => reset()}
-            flakeUrl={formState.isSubmitted ? getValues("flakeUrl") : flakeUrl}
-            flakeAttr={flakeAttr}
-          />
+              {workflow == "create" && (
+                <CreateForm confirmAdornment={WorkflowAdornment} />
+              )}
+            </form>
+          </FormProvider>
         )}
       </Suspense>
     </Layout>