Perform first actions on VM

This commit is contained in:
Pierre HUBERT 2024-05-06 18:52:14 +02:00
parent 766ec1780a
commit 9a938041a4
2 changed files with 116 additions and 5 deletions

View File

@ -44,4 +44,25 @@ export class VMApi {
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/state` }) await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/state` })
).data.state; ).data.state;
} }
/**
* Request to start VM
*/
static async StartVM(vm: VMInfo): Promise<void> {
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/start` });
}
/**
* Request to shutdown VM
*/
static async ShutdownVM(vm: VMInfo): Promise<void> {
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/shutdown` });
}
/**
* Request to kill VM
*/
static async KillVM(vm: VMInfo): Promise<void> {
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/kill` });
}
} }

View File

@ -6,11 +6,15 @@ import {
CardFooter, CardFooter,
CardHeader, CardHeader,
CardPreview, CardPreview,
Spinner,
Tooltip,
} from "@fluentui/react-components"; } from "@fluentui/react-components";
import { import {
DesktopRegular, DesktopRegular,
FluentIcon,
Play16Regular, Play16Regular,
PowerRegular, PowerRegular,
StopRegular,
} from "@fluentui/react-icons"; } from "@fluentui/react-icons";
import React from "react"; import React from "react";
import { VMApi, VMInfo, VMState } from "../api/VMApi"; import { VMApi, VMInfo, VMState } from "../api/VMApi";
@ -60,7 +64,8 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
const [state, setState] = React.useState<VMState | undefined>(); const [state, setState] = React.useState<VMState | undefined>();
const load = async () => { const load = async () => {
setState(await VMApi.State(p.vm)); const newState = await VMApi.State(p.vm);
if (state !== newState) setState(newState);
}; };
React.useEffect(() => { React.useEffect(() => {
@ -105,11 +110,96 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
<p style={{ flex: 1 }}>{p.vm.description}</p> <p style={{ flex: 1 }}>{p.vm.description}</p>
<CardFooter> <CardFooter>
<Button appearance="primary" icon={<Play16Regular />}> <VMAction
Start VM {...p}
</Button> primary
<Button icon={<PowerRegular />}>Shutdown</Button> label="Start"
icon={<Play16Regular />}
enabled={p.vm.can_start}
currState={state}
possibleStates={["Shutdown", "Shutoff", "Crashed"]}
onClick={VMApi.StartVM}
/>
<VMAction
{...p}
label="Shutdown"
icon={<PowerRegular />}
enabled={p.vm.can_shutdown}
currState={state}
possibleStates={["Running"]}
onClick={VMApi.ShutdownVM}
/>
<VMAction
{...p}
label="Kill"
icon={<StopRegular />}
enabled={p.vm.can_kill}
currState={state}
possibleStates={[
"Running",
"Paused",
"PowerManagementSuspended",
"Blocked",
]}
onClick={VMApi.KillVM}
/>
</CardFooter> </CardFooter>
</Card> </Card>
); );
} }
function VMAction(p: {
vm: VMInfo;
label: string;
primary?: boolean;
icon: React.ReactElement;
enabled: boolean;
currState?: VMState;
possibleStates: VMState[];
onClick: (vm: VMInfo) => Promise<void>;
}): React.ReactElement {
const toast = useToast();
const [loading, setLoading] = React.useState(false);
const onClick = async () => {
try {
setLoading(true);
await p.onClick(p.vm);
toast(p.label, `Action successfully executed!`, "success");
} catch (e) {
console.error(e);
toast(p.label, `Failed to perform action: ${e}`, "error");
} finally {
setLoading(false);
}
};
if (!p.currState || !p.possibleStates.includes(p.currState)) {
return <></>;
}
if (!p.enabled)
return (
<Tooltip content={"Unavailable"} relationship="label">
<Button
appearance={p.primary ? "primary" : undefined}
icon={p.icon}
disabled
>
{p.label}
</Button>
</Tooltip>
);
return (
<Button
appearance={p.primary ? "primary" : undefined}
icon={loading ? <Spinner size="tiny" /> : p.icon}
onClick={onClick}
>
{p.label}
</Button>
);
}