yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request 'feat/configure-modules' (#490) from feat/configure-modules into main

Browse Source
This commit is contained in:
clan-bot
2023-11-11 14:30:16 +00:00
parent 04c754caad 74c8b85e4a
commit 4ed42540ba
19 changed files with 439 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
pkgs/ui/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
pkgs/ui/src/app/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

2
pkgs/ui/src/app/layout.tsx
View File

@@ -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}>

100
pkgs/ui/src/components/createMachineForm/clanModules.tsx
View File

@@ -1,6 +1,13 @@
import { getMachineSchema } from "@/api/machine/machine";
import { useListClanModules } from "@/api/modules/modules";
import { Alert, AlertTitle, FormHelperText, Typography } from "@mui/material";
import {
Alert,
AlertTitle,
Divider,
FormHelperText,
Input,
Typography,
} from "@mui/material";
import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import FormControl from "@mui/material/FormControl";
@@ -8,7 +15,8 @@ import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import OutlinedInput from "@mui/material/OutlinedInput";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { Controller } from "react-hook-form";
import { toast } from "react-hot-toast";
import { CreateMachineForm, FormStepContentProps } from "./interfaces";
@@ -23,26 +31,85 @@ const MenuProps = {
},
};
// interface IupdateSchema {
// clanName: string;
// modules: string[];
// formHooks: FormHooks;
// setSchemaError: Dispatch<SetStateAction<null | string>>;
// }
// const updateSchema = ({
// clanName,
// modules,
// formHooks,
// setSchemaError,
// }: IupdateSchema) => {
// formHooks.setValue("isSchemaLoading", true);
// getMachineSchema(clanName, {
// clanImports: modules,
// })
// .then((response) => {
// if (response.statusText == "OK") {
// formHooks.setValue("schema", response.data.schema);
// setSchemaError(null);
// }
// })
// .catch((error) => {
// formHooks.setValue("schema", {});
// console.error({ error });
// setSchemaError(error.message);
// toast.error(`${error.message}`);
// })
// .finally(() => {
// formHooks.setValue("isSchemaLoading", false);
// });
// };
type ClanModulesProps = FormStepContentProps;
const SchemaSuccessMsg = () => (
<Alert severity="success">
<AlertTitle>Success</AlertTitle>
<Typography variant="subtitle2" sx={{ mt: 2 }}>
Machine configuration schema successfully created.
</Typography>
</Alert>
);
interface SchemaErrorMsgProps {
msg: string | null;
}
const SchemaErrorMsg = (props: SchemaErrorMsgProps) => (
<Alert severity="error">
<AlertTitle>Error</AlertTitle>
<Typography variant="subtitle1" sx={{ mt: 2 }}>
Machine configuration schema could not be created.
</Typography>
<Typography variant="subtitle2" sx={{ mt: 2 }}>
{props.msg}
</Typography>
</Alert>
);
export default function ClanModules(props: ClanModulesProps) {
const { clanName, formHooks } = props;
const { data, isLoading } = useListClanModules(clanName);
const [schemaError] = useState<string | null>(null);
const selectedModules = formHooks.watch("modules");
useEffect(() => {
getMachineSchema(clanName, {
imports: [],
clanImports: [],
}).then((response) => {
if (response.statusText == "OK") {
formHooks.setValue("schema", response.data.schema);
}
});
formHooks.setValue("modules", []);
// Only re-run if global clanName has changed
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [clanName]);
const isSchemaLoading = formHooks.watch("isSchemaLoading");
const handleChange = (
event: SelectChangeEvent<CreateMachineForm["modules"]>,
@@ -53,7 +120,7 @@ export default function ClanModules(props: ClanModulesProps) {
const newValue = typeof value === "string" ? value.split(",") : value;
formHooks.setValue("modules", newValue);
getMachineSchema(clanName, {
imports: newValue,
clanImports: newValue,
})
.then((response) => {
if (response.statusText == "OK") {
@@ -66,8 +133,19 @@ export default function ClanModules(props: ClanModulesProps) {
toast.error(`${error.message}`);
});
};
return (
<div className="my-4 flex w-full flex-col justify-center px-2">
<FormControl sx={{ my: 4 }} disabled={isLoading} required>
<InputLabel>Machine name</InputLabel>
<Controller
name="name"
control={formHooks.control}
render={({ field }) => <Input {...field} />}
/>
<FormHelperText>Choose a unique name for the machine.</FormHelperText>
</FormControl>
<Alert severity="info">
<AlertTitle>Info</AlertTitle>
Optionally select some modules —{" "}
@@ -106,6 +184,14 @@ export default function ClanModules(props: ClanModulesProps) {
(Optional) Select clan modules to be added.
</FormHelperText>
</FormControl>
{!isSchemaLoading && <Divider flexItem sx={{ my: 4 }} />}
{!isSchemaLoading &&
(!schemaError ? (
<SchemaSuccessMsg />
) : (
<SchemaErrorMsg msg={schemaError} />
))}
</div>
);
}

4
pkgs/ui/src/components/createMachineForm/customConfig.tsx
View File

@@ -114,7 +114,7 @@ function PureCustomConfig(props: PureCustomConfigProps) {
);
} else {
formHooks.clearErrors("config");
toast.success("Config seems valid");
toast.success("Configuration is valid");
}
};
@@ -139,7 +139,7 @@ function PureCustomConfig(props: PureCustomConfigProps) {
variant="outlined"
color="secondary"
>
Validate
Validate configuration
</Button>
</div>
),

46
pkgs/ui/src/components/createMachineForm/index.tsx
View File

@@ -1,6 +1,8 @@
import { createMachine, setMachineConfig } from "@/api/machine/machine";
import {
Box,
Button,
CircularProgress,
LinearProgress,
MobileStepper,
Step,
@@ -11,6 +13,7 @@ import {
} from "@mui/material";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "react-hot-toast";
import { useAppState } from "../hooks/useAppContext";
import ClanModules from "./clanModules";
import { CustomConfig } from "./customConfig";
@@ -22,22 +25,19 @@ export function CreateMachineForm() {
} = useAppState();
const formHooks = useForm<CreateMachineForm>({
defaultValues: {
isSchemaLoading: false,
name: "",
config: {},
modules: [],
},
});
const { handleSubmit, reset } = formHooks;
const { handleSubmit, watch } = formHooks;
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const [activeStep, setActiveStep] = useState<number>(0);
const steps: FormStep[] = [
{
id: "template",
label: "Template",
content: <div></div>,
},
{
id: "modules",
label: "Modules",
@@ -56,11 +56,6 @@ export function CreateMachineForm() {
<LinearProgress />
),
},
{
id: "save",
label: "Save",
content: <div></div>,
},
];
const handleNext = () => {
@@ -75,14 +70,23 @@ export function CreateMachineForm() {
}
};
const handleReset = () => {
setActiveStep(0);
reset();
};
const currentStep = steps.at(activeStep);
async function onSubmit(data: any) {
async function onSubmit(data: CreateMachineForm) {
console.log({ data }, "Aggregated Data; creating machine from");
if (clanName) {
if (!data.name) {
toast.error("Machine name should not be empty");
return;
}
await createMachine(clanName, {
name: data.name,
});
await setMachineConfig(clanName, data.name, {
clan: data.config.formData,
clanImports: data.modules,
});
}
}
const BackButton = () => (
@@ -102,17 +106,21 @@ export function CreateMachineForm() {
<Button
disabled={
!formHooks.formState.isValid ||
(activeStep == 1 && !formHooks.watch("schema")?.type)
(activeStep == 0 && !watch("schema")?.type) ||
watch("isSchemaLoading")
}
onClick={handleNext}
color="secondary"
startIcon={
watch("isSchemaLoading") ? <CircularProgress /> : undefined
}
>
{activeStep <= steps.length - 1 && "Next"}
</Button>
)}
{activeStep === steps.length - 1 && (
<Button color="secondary" onClick={handleReset}>
Reset
<Button color="secondary" type="submit">
Save
</Button>
)}
</>

1
pkgs/ui/src/components/createMachineForm/interfaces.ts
View File

@@ -9,6 +9,7 @@ export type CreateMachineForm = {
config: any;
modules: string[];
schema: JSONSchema7;
isSchemaLoading: boolean;
};
export type FormHooks = UseFormReturn<CreateMachineForm>;

0
pkgs/ui/src/components/createMachineForm/saveConfig.tsx
View File

0
pkgs/ui/src/components/createMachineForm/selectModules.tsx
View File

0
pkgs/ui/src/components/createMachineForm/selectTemplate.tsx
View File

2
pkgs/ui/src/components/hooks/useVms.tsx
View File

@@ -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";

75
pkgs/ui/src/components/join/configureVM.tsx
View File

@@ -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>
);
};

47
pkgs/ui/src/components/join/confirmVM.tsx
View File

@@ -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>
);
}

9
pkgs/ui/src/components/join/layout.tsx
View File

@@ -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>
);

11
pkgs/ui/src/components/join/log.tsx
View File

@@ -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) => (

62
pkgs/ui/src/components/join/vmBuildLogs.tsx
View File

@@ -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>
);

56
pkgs/ui/src/views/createForm.tsx Normal file
View File

@@ -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>
);
};

51
pkgs/ui/src/views/joinForm.tsx Normal file
View File

@@ -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>
);
};

178
pkgs/ui/src/views/joinPrequel.tsx
View File

@@ -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>