Perform first actions on VM
This commit is contained in:
parent
766ec1780a
commit
9a938041a4
@ -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` });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user