refine join workflow

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

@@ -0,0 +1,138 @@
+import {
+  Button,
+  InputAdornment,
+  LinearProgress,
+  ListSubheader,
+  MenuItem,
+  Select,
+  Switch,
+  TextField,
+} from "@mui/material";
+import { Controller, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { FlakeBadge } from "../flakeBadge/flakeBadge";
+import { createVm, useGetVmLogs } from "@/api/default/default";
+import { VmConfig } from "@/api/model";
+import { Dispatch, SetStateAction, useState } from "react";
+import { toast } from "react-hot-toast";
+
+interface VmPropLabelProps {
+  children: React.ReactNode;
+}
+const VmPropLabel = (props: VmPropLabelProps) => (
+  <div className="col-span-4 flex items-center sm:col-span-1">
+    {props.children}
+  </div>
+);
+
+interface VmPropContentProps {
+  children: React.ReactNode;
+}
+const VmPropContent = (props: VmPropContentProps) => (
+  <div className="col-span-4 font-bold sm:col-span-3">{props.children}</div>
+);
+
+interface VmDetailsProps {
+  vmConfig: VmConfig;
+  formHooks: UseFormReturn<VmConfig, any, undefined>;
+  setVmUuid: Dispatch<SetStateAction<string | null>>;
+}
+
+export const ConfigureVM = (props: VmDetailsProps) => {
+  const { vmConfig, formHooks, setVmUuid } = props;
+  const { control, handleSubmit } = formHooks;
+  const { cores, flake_attr, flake_url, graphics, memory_size } = vmConfig;
+  const [isStarting, setStarting] = useState(false);
+
+  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);
+    } else {
+      toast.error("Could not join");
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="grid grid-cols-4 gap-y-10"
+    >
+      <div className="col-span-4">
+        <ListSubheader>General</ListSubheader>
+      </div>
+      <VmPropLabel>Flake</VmPropLabel>
+      <VmPropContent>
+        <FlakeBadge flakeAttr={flake_attr} flakeUrl={flake_url} />
+      </VmPropContent>
+      <VmPropLabel>Machine</VmPropLabel>
+      <VmPropContent>
+        <Controller
+          name="flake_attr"
+          control={control}
+          render={({ field }) => (
+            <Select {...field} variant="standard" fullWidth>
+              {["default", "vm1"].map((attr) => (
+                <MenuItem value={attr} key={attr}>
+                  {attr}
+                </MenuItem>
+              ))}
+            </Select>
+          )}
+        />
+      </VmPropContent>
+      <div className="col-span-4">
+        <ListSubheader>VM</ListSubheader>
+      </div>
+      <VmPropLabel>CPU Cores</VmPropLabel>
+      <VmPropContent>
+        <Controller
+          name="cores"
+          control={control}
+          render={({ field }) => <TextField type="number" {...field} />}
+        />
+      </VmPropContent>
+      <VmPropLabel>Graphics</VmPropLabel>
+      <VmPropContent>
+        <Controller
+          name="graphics"
+          control={control}
+          render={({ field }) => (
+            <Switch {...field} defaultChecked={vmConfig.graphics} />
+          )}
+        />
+      </VmPropContent>
+      <VmPropLabel>Memory Size</VmPropLabel>
+
+      <VmPropContent>
+        <Controller
+          name="memory_size"
+          control={control}
+          render={({ field }) => (
+            <TextField
+              type="number"
+              {...field}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">MiB</InputAdornment>
+                ),
+              }}
+            />
+          )}
+        />
+      </VmPropContent>
+
+      <div className="col-span-4 grid items-center">
+        {isStarting && <LinearProgress />}
+        <Button type="submit" disabled={isStarting} variant="contained">
+          Join Clan
+        </Button>
+      </div>
+    </form>
+  );
+};

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

@@ -0,0 +1,56 @@
+"use client";
+import { useState } from "react";
+import { LoadingOverlay } from "./loadingOverlay";
+import { FlakeBadge } from "../flakeBadge/flakeBadge";
+import { Typography, Button } from "@mui/material";
+import { FlakeResponse } from "@/api/model";
+import { ConfirmVM } from "./confirmVM";
+import { Log } from "./log";
+import GppMaybeIcon from "@mui/icons-material/GppMaybe";
+import { useInspectFlake } from "@/api/default/default";
+
+interface ConfirmProps {
+  flakeUrl: string;
+  handleBack: () => void;
+}
+export const Confirm = (props: ConfirmProps) => {
+  const { flakeUrl, handleBack } = props;
+  const [userConfirmed, setUserConfirmed] = useState(false);
+
+  const { data, error, isLoading } = useInspectFlake({ url: flakeUrl });
+
+  return userConfirmed ? (
+    <ConfirmVM url={flakeUrl} handleBack={handleBack} />
+  ) : (
+    <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2">
+      {isLoading && (
+        <LoadingOverlay
+          title={"Loading Flake"}
+          subtitle={<FlakeBadge flakeUrl={flakeUrl} flakeAttr="" />}
+        />
+      )}
+      {data && (
+        <>
+          <Typography variant="subtitle1">
+            To join the clan you must trust the Author
+          </Typography>
+          <GppMaybeIcon sx={{ height: "10rem", width: "10rem", mb: 5 }} />
+          <Button
+            autoFocus
+            size="large"
+            color="warning"
+            variant="contained"
+            onClick={() => setUserConfirmed(true)}
+            sx={{ mb: 10 }}
+          >
+            Trust Flake Author
+          </Button>
+          <Log
+            title="What's about to be built"
+            lines={data.data.content.split("\n")}
+          />
+        </>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,104 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { VmConfig } from "@/api/model";
+import { useVms } from "@/components/hooks/useVms";
+
+import { Alert, AlertTitle, Button } from "@mui/material";
+
+import { useSearchParams } from "next/navigation";
+
+import { createVm, inspectVm, useGetVmLogs } from "@/api/default/default";
+
+import { LoadingOverlay } from "./loadingOverlay";
+import { FlakeBadge } from "../flakeBadge/flakeBadge";
+import { Log } from "./log";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { ConfigureVM } from "./configureVM";
+import { VmBuildLogs } from "./vmBuildLogs";
+
+interface ConfirmVMProps {
+  url: string;
+  handleBack: () => void;
+}
+
+export function ConfirmVM(props: ConfirmVMProps) {
+  const { url, handleBack } = props;
+  const formHooks = useForm<VmConfig>({
+    defaultValues: {
+      flake_url: url,
+      flake_attr: "vm1",
+      cores: 1,
+      graphics: true,
+      memory_size: 1024,
+    },
+  });
+  const [vmUuid, setVmUuid] = useState<string | null>(null);
+
+  const { setValue, watch, formState, handleSubmit } = formHooks;
+  const { config, error, isLoading } = useVms({
+    url,
+    // TODO: FIXME
+    attr: watch("flake_attr"),
+  });
+  useEffect(() => {
+    if (config) {
+      setValue("cores", config?.cores);
+      setValue("memory_size", config?.memory_size);
+      setValue("graphics", config?.graphics);
+    }
+  }, [config, setValue]);
+
+  return (
+    <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2">
+      {!formState.isSubmitted && (
+        <>
+          {error && (
+            <Alert severity="error" className="w-full max-w-2xl">
+              <AlertTitle>Error</AlertTitle>
+              An Error occurred - See details below
+            </Alert>
+          )}
+          <div className="mb-2 w-full max-w-2xl">
+            {isLoading && (
+              <LoadingOverlay
+                title={"Loading VM Configuration"}
+                subtitle={<FlakeBadge flakeUrl={url} flakeAttr={url} />}
+              />
+            )}
+            {config && (
+              <ConfigureVM
+                vmConfig={config}
+                formHooks={formHooks}
+                setVmUuid={setVmUuid}
+              />
+            )}
+            {error && (
+              <>
+                <Button
+                  color="error"
+                  fullWidth
+                  variant="contained"
+                  onClick={handleBack}
+                  className="my-2"
+                >
+                  Back
+                </Button>
+                <Log
+                  title="Log"
+                  lines={
+                    error?.response?.data?.detail
+                      ?.map((err, idx) => err.msg.split("\n"))
+                      ?.flat()
+                      .filter(Boolean) || []
+                  }
+                />
+              </>
+            )}
+          </div>
+        </>
+      )}
+
+      {formState.isSubmitted && vmUuid && <VmBuildLogs vmUuid={vmUuid} />}
+    </div>
+  );
+}

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

@@ -1,147 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { VmConfig } from "@/api/model";
-import { useVms } from "@/components/hooks/useVms";
-import prettyBytes from "pretty-bytes";
-
-import {
-  Alert,
-  AlertTitle,
-  Button,
-  Chip,
-  LinearProgress,
-  ListSubheader,
-  Switch,
-  Typography,
-} from "@mui/material";
-import { useSearchParams } from "next/navigation";
-import { toast } from "react-hot-toast";
-import { Error, Numbers } from "@mui/icons-material";
-import { createVm, inspectVm } from "@/api/default/default";
-import { LoadingOverlay } from "./loadingOverlay";
-import { FlakeBadge } from "../flakeBadge/flakeBadge";
-import { Log } from "./log";
-
-interface VmPropLabelProps {
-  children: React.ReactNode;
-}
-const VmPropLabel = (props: VmPropLabelProps) => (
-  <div className="col-span-4 flex items-center sm:col-span-1">
-    {props.children}
-  </div>
-);
-
-interface VmPropContentProps {
-  children: React.ReactNode;
-}
-const VmPropContent = (props: VmPropContentProps) => (
-  <div className="col-span-4 font-bold sm:col-span-3">{props.children}</div>
-);
-
-interface VmDetailsProps {
-  vmConfig: VmConfig;
-}
-
-const VmDetails = (props: VmDetailsProps) => {
-  const { vmConfig } = props;
-  const { cores, flake_attr, flake_url, graphics, memory_size } = vmConfig;
-  const [isStarting, setStarting] = useState(false);
-  const handleStartVm = async () => {
-    setStarting(true);
-    const response = await createVm(vmConfig);
-    setStarting(false);
-    if (response.statusText === "OK") {
-      toast.success(("VM created @ " + response?.data) as string);
-    } else {
-      toast.error("Could not create VM");
-    }
-  };
-  return (
-    <div className="grid grid-cols-4 gap-y-10">
-      <div className="col-span-4">
-        <ListSubheader>General</ListSubheader>
-      </div>
-
-      <VmPropLabel>Flake</VmPropLabel>
-      <VmPropContent>
-        <FlakeBadge flakeAttr={flake_attr} flakeUrl={flake_url} />
-      </VmPropContent>
-
-      <VmPropLabel>Machine</VmPropLabel>
-      <VmPropContent>{flake_attr}</VmPropContent>
-
-      <div className="col-span-4">
-        <ListSubheader>VM</ListSubheader>
-      </div>
-      <VmPropLabel>CPU Cores</VmPropLabel>
-      <VmPropContent>
-        <Numbers fontSize="inherit" />
-        <span className="font-bold text-black">{cores}</span>
-      </VmPropContent>
-
-      <VmPropLabel>Graphics</VmPropLabel>
-      <VmPropContent>
-        <Switch checked={graphics} />
-      </VmPropContent>
-
-      <VmPropLabel>Memory Size</VmPropLabel>
-      <VmPropContent>{prettyBytes(memory_size * 1024 * 1024)}</VmPropContent>
-
-      <div className="col-span-4 grid items-center">
-        {isStarting && <LinearProgress />}
-        <Button
-          disabled={isStarting}
-          variant="contained"
-          onClick={handleStartVm}
-        >
-          Spin up VM
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-interface ConfirmVMProps {
-  url: string;
-  attr: string;
-  clanName: string;
-}
-
-export function ConfirmVM(props: ConfirmVMProps) {
-  const { url, attr, clanName } = props;
-
-  const { config, error, isLoading } = useVms({
-    url,
-    attr,
-  });
-  return (
-    <>
-      {error && (
-        <Alert severity="error" className="w-full max-w-xl">
-          <AlertTitle>Error</AlertTitle>
-          An Error occurred - See details below
-        </Alert>
-      )}
-      <div className="mb-2 w-full max-w-xl">
-        {isLoading && (
-          <LoadingOverlay
-            title={"Loading VM Configuration"}
-            subtitle={<FlakeBadge flakeUrl={url} flakeAttr={url} />}
-          />
-        )}
-        {config && <VmDetails vmConfig={config} />}
-        {error && (
-          <Log
-            title="Log"
-            lines={
-              error?.response?.data?.detail
-                ?.map((err, idx) => err.msg.split("\n"))
-                ?.flat()
-                .filter(Boolean) || []
-            }
-          />
-        )}
-      </div>
-    </>
-  );
-}

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

@@ -0,0 +1,20 @@
+"use client";
+import { Typography } from "@mui/material";
+import { ReactNode } from "react";
+
+interface LayoutProps {
+  children: 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.children}
+    </div>
+  );
+};

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

@@ -1,3 +1,4 @@
+"use client";
 import { LinearProgress, Typography } from "@mui/material";
 
 interface LoadingOverlayProps {

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

@@ -1,3 +1,4 @@
+"use client";
 interface LogOptions {
   lines: string[];
   title?: string;

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

@@ -0,0 +1,34 @@
+"use client";
+import { useGetVmLogs } from "@/api/default/default";
+import { Log } from "./log";
+import { LoadingOverlay } from "./loadingOverlay";
+
+interface VmBuildLogsProps {
+  vmUuid: string;
+}
+export const VmBuildLogs = (props: VmBuildLogsProps) => {
+  const { vmUuid } = props;
+
+  const {
+    data: logs,
+    isLoading,
+    error,
+  } = useGetVmLogs(vmUuid as string, {
+    swr: {
+      enabled: vmUuid !== null,
+    },
+    axios: {
+      responseType: "stream",
+    },
+  });
+
+  return (
+    <div className="w-full">
+      {isLoading && <LoadingOverlay title="Initializing" subtitle="" />}
+      <Log
+        lines={(logs?.data as string)?.split("\n") || ["..."]}
+        title="Building..."
+      />
+    </div>
+  );
+};