refine join workflow
This commit is contained in:
parent
332f5dc824
commit
82db33d047
@ -18,7 +18,7 @@ async def inspect_flake(
|
||||
actions = []
|
||||
# Extract the flake from the given URL
|
||||
# We do this by running 'nix flake prefetch {url} --json'
|
||||
cmd = nix_command(["flake", "prefetch", url, "--json"])
|
||||
cmd = nix_command(["flake", "prefetch", url, "--json", "--refresh"])
|
||||
proc = await asyncio.create_subprocess_exec(
|
||||
cmd[0],
|
||||
*cmd[1:],
|
||||
|
@ -115,7 +115,7 @@ command output:
|
||||
|
||||
|
||||
@router.get("/api/vms/{uuid}/status")
|
||||
async def vm_status(uuid: UUID) -> VmStatusResponse:
|
||||
async def get_vm_status(uuid: UUID) -> VmStatusResponse:
|
||||
task = get_task(uuid)
|
||||
status: list[int | None] = list(map(lambda x: x.returncode, task.procs))
|
||||
log.debug(msg=f"returncodes: {status}. task.finished: {task.finished}")
|
||||
|
61
pkgs/ui/src/app/dashboard/page.tsx
Normal file
61
pkgs/ui/src/app/dashboard/page.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
import { RecentActivity } from "@/components/dashboard/activity";
|
||||
import { AppOverview } from "@/components/dashboard/appOverview";
|
||||
import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
|
||||
import { Notifications } from "@/components/dashboard/notifications";
|
||||
import { QuickActions } from "@/components/dashboard/quickActions";
|
||||
import { TaskQueue } from "@/components/dashboard/taskQueue";
|
||||
import { tw } from "@/utils/tailwind";
|
||||
|
||||
interface DashboardCardProps {
|
||||
children?: React.ReactNode;
|
||||
rowSpan?: number;
|
||||
sx?: string;
|
||||
}
|
||||
const DashboardCard = (props: DashboardCardProps) => {
|
||||
const { children, rowSpan, sx = "" } = props;
|
||||
return (
|
||||
<div
|
||||
className={tw`col-span-full row-span-${rowSpan || 1} xl:col-span-1 ${sx}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface DashboardPanelProps {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
const DashboardPanel = (props: DashboardPanelProps) => {
|
||||
const { children } = props;
|
||||
return (
|
||||
<div className="col-span-full row-span-1 xl:col-span-2">{children}</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<div className="flex h-screen w-full">
|
||||
<div className="grid w-full auto-rows-max grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
|
||||
<DashboardCard rowSpan={2}>
|
||||
<NetworkOverview />
|
||||
</DashboardCard>
|
||||
<DashboardCard rowSpan={2}>
|
||||
<RecentActivity />
|
||||
</DashboardCard>
|
||||
<DashboardCard>
|
||||
<Notifications />
|
||||
</DashboardCard>
|
||||
<DashboardCard>
|
||||
<QuickActions />
|
||||
</DashboardCard>
|
||||
<DashboardPanel>
|
||||
<AppOverview />
|
||||
</DashboardPanel>
|
||||
<DashboardCard sx={tw`xl:col-span-full 2xl:col-span-1`}>
|
||||
<TaskQueue />
|
||||
</DashboardCard>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,74 +0,0 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import { Button, Paper, Typography } from "@mui/material";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
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 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">
|
||||
Join{" "}
|
||||
<Typography variant="h4" className="font-bold" component={"span"}>
|
||||
{clanName}
|
||||
</Typography>
|
||||
{"' "}
|
||||
Clan
|
||||
</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>
|
||||
)
|
||||
) : (
|
||||
<div>Invalid URL</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,60 +1,79 @@
|
||||
import { RecentActivity } from "@/components/dashboard/activity";
|
||||
import { AppOverview } from "@/components/dashboard/appOverview";
|
||||
import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
|
||||
import { Notifications } from "@/components/dashboard/notifications";
|
||||
import { QuickActions } from "@/components/dashboard/quickActions";
|
||||
import { TaskQueue } from "@/components/dashboard/taskQueue";
|
||||
import { tw } from "@/utils/tailwind";
|
||||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
IconButton,
|
||||
Input,
|
||||
InputAdornment,
|
||||
Paper,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useInspectFlake } from "@/api/default/default";
|
||||
import { ConfirmVM } from "@/components/join/confirmVM";
|
||||
import { LoadingOverlay } from "@/components/join/loadingOverlay";
|
||||
import { FlakeBadge } from "@/components/flakeBadge/flakeBadge";
|
||||
import { Log } from "@/components/join/log";
|
||||
|
||||
interface DashboardCardProps {
|
||||
children?: React.ReactNode;
|
||||
rowSpan?: number;
|
||||
sx?: string;
|
||||
}
|
||||
const DashboardCard = (props: DashboardCardProps) => {
|
||||
const { children, rowSpan, sx = "" } = props;
|
||||
return (
|
||||
<div
|
||||
className={tw`col-span-full row-span-${rowSpan || 1} xl:col-span-1 ${sx}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
import { useForm, SubmitHandler, Controller } from "react-hook-form";
|
||||
import { Confirm } from "@/components/join/confirm";
|
||||
import { Layout } from "@/components/join/layout";
|
||||
import { ChevronRight } from "@mui/icons-material";
|
||||
|
||||
type FormValues = {
|
||||
flakeUrl: string;
|
||||
flakeAttribute: string;
|
||||
};
|
||||
|
||||
interface DashboardPanelProps {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
const DashboardPanel = (props: DashboardPanelProps) => {
|
||||
const { children } = props;
|
||||
return (
|
||||
<div className="col-span-full row-span-1 xl:col-span-2">{children}</div>
|
||||
);
|
||||
};
|
||||
export default function Page() {
|
||||
const queryParams = useSearchParams();
|
||||
const flakeUrl = queryParams.get("flake") || "";
|
||||
const flakeAttribute = queryParams.get("attr") || "default";
|
||||
const { handleSubmit, control, formState, getValues, reset } =
|
||||
useForm<FormValues>({ defaultValues: { flakeUrl: "" } });
|
||||
|
||||
const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);
|
||||
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<div className="flex h-screen w-full">
|
||||
<div className="grid w-full auto-rows-max grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
|
||||
<DashboardCard rowSpan={2}>
|
||||
<NetworkOverview />
|
||||
</DashboardCard>
|
||||
<DashboardCard rowSpan={2}>
|
||||
<RecentActivity />
|
||||
</DashboardCard>
|
||||
<DashboardCard>
|
||||
<Notifications />
|
||||
</DashboardCard>
|
||||
<DashboardCard>
|
||||
<QuickActions />
|
||||
</DashboardCard>
|
||||
<DashboardPanel>
|
||||
<AppOverview />
|
||||
</DashboardPanel>
|
||||
<DashboardCard sx={tw`xl:col-span-full 2xl:col-span-1`}>
|
||||
<TaskQueue />
|
||||
</DashboardCard>
|
||||
</div>
|
||||
</div>
|
||||
<Layout>
|
||||
{!formState.isSubmitted && !flakeUrl && (
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="w-full max-w-2xl justify-self-center"
|
||||
>
|
||||
<Controller
|
||||
name="flakeUrl"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
{...field}
|
||||
// variant="standard"
|
||||
// label="Clan url"
|
||||
required
|
||||
fullWidth
|
||||
startAdornment={
|
||||
<InputAdornment position="start">Clan Url:</InputAdornment>
|
||||
}
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconButton type="submit">
|
||||
<ChevronRight />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}
|
||||
// }}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
)}
|
||||
{(formState.isSubmitted || flakeUrl) && (
|
||||
<Confirm
|
||||
handleBack={() => reset()}
|
||||
flakeUrl={formState.isSubmitted ? getValues("flakeUrl") : flakeUrl}
|
||||
/>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
@ -8,6 +8,11 @@ export const FlakeBadge = (props: FlakeBadgeProps) => (
|
||||
<Chip
|
||||
color="secondary"
|
||||
label={`${props.flakeUrl}#${props.flakeAttr}`}
|
||||
sx={{ p: 2 }}
|
||||
sx={{
|
||||
p: 2,
|
||||
"& .MuiChip-label": {
|
||||
overflow: "unset",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
@ -16,7 +16,7 @@ export const useVms = (options: UseVmsOptions) => {
|
||||
|
||||
useEffect(() => {
|
||||
const getVmInfo = async (url: string, attr: string) => {
|
||||
if (url === "") {
|
||||
if (url === "" || !url) {
|
||||
toast.error("Flake url is missing", { id: "missing.flake.url" });
|
||||
return undefined;
|
||||
}
|
||||
|
138
pkgs/ui/src/components/join/configureVM.tsx
Normal file
138
pkgs/ui/src/components/join/configureVM.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
56
pkgs/ui/src/components/join/confirm.tsx
Normal file
56
pkgs/ui/src/components/join/confirm.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
104
pkgs/ui/src/components/join/confirmVM.tsx
Normal file
104
pkgs/ui/src/components/join/confirmVM.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
20
pkgs/ui/src/components/join/layout.tsx
Normal file
20
pkgs/ui/src/components/join/layout.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
@ -1,3 +1,4 @@
|
||||
"use client";
|
||||
import { LinearProgress, Typography } from "@mui/material";
|
||||
|
||||
interface LoadingOverlayProps {
|
||||
|
@ -1,3 +1,4 @@
|
||||
"use client";
|
||||
interface LogOptions {
|
||||
lines: string[];
|
||||
title?: string;
|
||||
|
34
pkgs/ui/src/components/join/vmBuildLogs.tsx
Normal file
34
pkgs/ui/src/components/join/vmBuildLogs.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
@ -1,5 +1,5 @@
|
||||
/* eslint-disable tailwindcss/no-custom-classname */
|
||||
"use client";
|
||||
/* eslint-disable tailwindcss/no-custom-classname */
|
||||
|
||||
import * as React from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
|
Loading…
Reference in New Issue
Block a user