inspect flake before configure VM

pkgs/ui/src/app/join/page.tsx

@@ -1,143 +1,24 @@
 "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 { Button, Paper, 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";
-
-interface FlakeBadgeProps {
-  flakeUrl: string;
-  flakeAttr: string;
-}
-const FlakeBadge = (props: FlakeBadgeProps) => (
-  <Chip
-    color="secondary"
-    label={`${props.flakeUrl}#${props.flakeAttr}`}
-    sx={{ p: 2 }}
-  />
-);
-
-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 ErrorLogOptions {
-  lines: string[];
-}
-const ErrorLog = (props: ErrorLogOptions) => {
-  const { lines } = props;
-  return (
-    <div className="w-full bg-slate-800 p-4 text-white shadow-inner shadow-black">
-      <div className="mb-1 text-slate-400">Log</div>
-      {lines.map((item, idx) => (
-        <span key={`${idx}`} className="mb-2 block break-words">
-          {item}
-          <br />
-        </span>
-      ))}
-    </div>
-  );
-};
+import GppMaybeIcon from "@mui/icons-material/GppMaybe";
+import { useInspectFlake } from "@/api/default/default";
+import { ConfirmVM } from "@/components/join/join";
+import { LoadingOverlay } from "@/components/join/loadingOverlay";
+import { FlakeBadge } from "@/components/flakeBadge/flakeBadge";
+import { Log } from "@/components/join/log";
 
 export default function Page() {
   const queryParams = useSearchParams();
   const flakeUrl = queryParams.get("flake") || "";
   const flakeAttribute = queryParams.get("attr") || "default";
+  const [userConfirmed, setUserConfirmed] = useState(false);
 
-  const { config, error, isLoading } = useVms({
-    url: flakeUrl,
-    attr: flakeAttribute,
-  });
   const clanName = "Lassul.us";
+
+  const { data, error, isLoading } = useInspectFlake({ url: flakeUrl });
+
   return (
     <div className="grid h-[70vh] w-full place-items-center gap-y-4">
       <Typography variant="h4" className="w-full text-center">
@@ -148,37 +29,46 @@ export default function Page() {
         {"' "}
         Clan
       </Typography>
-      {error && (
-        <Alert severity="error" className="w-full max-w-xl">
-          <AlertTitle>Error</AlertTitle>
-          An Error occurred - See details below
-        </Alert>
-      )}
-      <div className="w-full max-w-xl">
-        {isLoading && (
-          <div className="w-full">
-            <Typography variant="subtitle2">Loading Flake</Typography>
-            <LinearProgress className="mb-2 w-full" />
-            <div className="grid w-full place-items-center">
-              <FlakeBadge flakeUrl={flakeUrl} flakeAttr={flakeAttribute} />
-            </div>
 
-            <Typography variant="subtitle1"></Typography>
+      {flakeUrl && flakeAttribute ? (
+        userConfirmed ? (
+          <ConfirmVM url={flakeUrl} attr={flakeAttribute} clanName={clanName} />
+        ) : (
+          <div className="mb-2 flex w-full max-w-xl flex-col items-center pb-2">
+            {isLoading && (
+              <LoadingOverlay
+                title={"Loading Flake"}
+                subtitle={
+                  <FlakeBadge flakeUrl={flakeUrl} flakeAttr={flakeAttribute} />
+                }
+              />
+            )}
+            {data && (
+              <>
+                <Typography variant="subtitle1">
+                  To build the VM you must trust the Author of this Flake
+                </Typography>
+                <GppMaybeIcon sx={{ height: "10rem", width: "10rem", mb: 5 }} />
+                <Button
+                  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>
-        )}
-        {(!flakeUrl || !flakeAttribute) && <div>Invalid URL</div>}
-        {config && <VmDetails vmConfig={config} />}
-        {error && (
-          <ErrorLog
-            lines={
-              error?.response?.data?.detail
-                ?.map((err, idx) => err.msg.split("\n"))
-                ?.flat()
-                .filter(Boolean) || []
-            }
-          />
-        )}
-      </div>
+        )
+      ) : (
+        <div>Invalid URL</div>
+      )}
     </div>
   );
 }

pkgs/ui/src/components/flakeBadge/flakeBadge.tsx

@@ -0,0 +1,13 @@
+import { Chip } from "@mui/material";
+
+interface FlakeBadgeProps {
+  flakeUrl: string;
+  flakeAttr: string;
+}
+export const FlakeBadge = (props: FlakeBadgeProps) => (
+  <Chip
+    color="secondary"
+    label={`${props.flakeUrl}#${props.flakeAttr}`}
+    sx={{ p: 2 }}
+  />
+);

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

@@ -0,0 +1,147 @@
+"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/loadingOverlay.tsx

@@ -0,0 +1,17 @@
+import { LinearProgress, Typography } from "@mui/material";
+
+interface LoadingOverlayProps {
+  title: React.ReactNode;
+  subtitle: React.ReactNode;
+}
+export const LoadingOverlay = (props: LoadingOverlayProps) => {
+  const { title, subtitle } = props;
+  return (
+    <div className="w-full">
+      <Typography variant="subtitle2">{title}</Typography>
+      <LinearProgress className="mb-2 w-full" />
+      <div className="grid w-full place-items-center">{subtitle}</div>
+      <Typography variant="subtitle1"></Typography>
+    </div>
+  );
+};

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

@@ -0,0 +1,19 @@
+interface LogOptions {
+  lines: string[];
+  title?: string;
+}
+export const Log = (props: LogOptions) => {
+  const { lines, title } = props;
+  return (
+    <div className="max-h-[70vh] min-h-[9rem] w-full overflow-scroll bg-slate-800 p-4 text-white shadow-inner shadow-black">
+      <div className="mb-1 text-slate-400">{title}</div>
+      <pre className="max-w-[90vw] text-xs">
+        {lines.map((item, idx) => (
+          <code key={`${idx}`} className="mb-2 block break-words">
+            {item}
+          </code>
+        ))}
+      </pre>
+    </div>
+  );
+};