63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import { Button, Toolbar, Tooltip } from "@fluentui/react-components";
|
|
import { PlayRegular } from "@fluentui/react-icons";
|
|
import { VMGroup } from "../api/ServerApi";
|
|
import { VMInfo, VMState } from "../api/VMApi";
|
|
|
|
export function GroupVMAction(p: {
|
|
group: VMGroup;
|
|
state?: VMState;
|
|
vm?: VMInfo;
|
|
}): React.ReactElement {
|
|
return (
|
|
<Toolbar>
|
|
<GroupVMButton
|
|
enabled={p.group.can_start}
|
|
icon={<PlayRegular />}
|
|
tooltip="Start"
|
|
group={p.group}
|
|
vm={p.vm}
|
|
allowedStates={["Shutdown", "Shutoff", "Crashed"]}
|
|
currState={p.state}
|
|
needConfirm={false}
|
|
action={async () => {}}
|
|
/>
|
|
</Toolbar>
|
|
);
|
|
}
|
|
|
|
function GroupVMButton(p: {
|
|
enabled: boolean;
|
|
icon: React.ReactElement;
|
|
action: (group: VMGroup, vm?: VMGroup) => Promise<void>;
|
|
tooltip: string;
|
|
currState?: VMState;
|
|
allowedStates: VMState[];
|
|
group: VMGroup;
|
|
vm?: VMInfo;
|
|
needConfirm: boolean;
|
|
}): React.ReactElement {
|
|
const process = () => {};
|
|
|
|
const allowed =
|
|
!p.vm || (p.currState && p.allowedStates.includes(p.currState));
|
|
|
|
if (!p.enabled) return <></>;
|
|
|
|
return (
|
|
<Tooltip
|
|
content={`${p.tooltip} ${
|
|
p.vm ? `the VM ${p.vm.name}` : `all the VM of the group ${p.group.id}`
|
|
}`}
|
|
relationship="description"
|
|
withArrow
|
|
>
|
|
<Button
|
|
icon={p.icon}
|
|
onClick={process}
|
|
disabled={!allowed}
|
|
appearance="subtle"
|
|
/>
|
|
</Tooltip>
|
|
);
|
|
}
|