refine join workflow

2023-09-30 16:00:21 +02:00
parent 332f5dc824
commit 82db33d047
16 changed files with 497 additions and 279 deletions
--- a/pkgs/ui/src/components/join/confirmVM.tsx
+++ b/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>
+  );
+}