diff --git a/remote_frontend/src/widgets/GroupVMAction.tsx b/remote_frontend/src/widgets/GroupVMAction.tsx
new file mode 100644
index 0000000..7761421
--- /dev/null
+++ b/remote_frontend/src/widgets/GroupVMAction.tsx
@@ -0,0 +1,62 @@
+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 (
+
+ }
+ tooltip="Start"
+ group={p.group}
+ vm={p.vm}
+ allowedStates={["Shutdown", "Shutoff", "Crashed"]}
+ currState={p.state}
+ needConfirm={false}
+ action={async () => {}}
+ />
+
+ );
+}
+
+function GroupVMButton(p: {
+ enabled: boolean;
+ icon: React.ReactElement;
+ action: (group: VMGroup, vm?: VMGroup) => Promise;
+ 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 (
+
+
+
+ );
+}
diff --git a/remote_frontend/src/widgets/GroupsWidget.tsx b/remote_frontend/src/widgets/GroupsWidget.tsx
index 02a1fa6..d857a80 100644
--- a/remote_frontend/src/widgets/GroupsWidget.tsx
+++ b/remote_frontend/src/widgets/GroupsWidget.tsx
@@ -11,11 +11,11 @@ import {
} from "@fluentui/react-components";
import { Desktop24Regular } from "@fluentui/react-icons";
import { filesize } from "filesize";
-import { Rights, VMGroup } from "../api/ServerApi";
-import { VMState } from "../api/VMApi";
import React from "react";
import { GroupApi, GroupVMState } from "../api/GroupApi";
+import { Rights, VMGroup } from "../api/ServerApi";
import { useToast } from "../hooks/providers/ToastProvider";
+import { GroupVMAction } from "./GroupVMAction";
export function GroupsWidget(p: { rights: Rights }): React.ReactElement {
return (
@@ -61,12 +61,14 @@ function GroupInfo(p: { group: VMGroup }): React.ReactElement {
flexDirection: "column",
}}
>
- {p.group.id}
-
+
+ {p.group.id}
+
+
+
- Name
- Description
+ VM
Resources
State
Actions
@@ -76,17 +78,27 @@ function GroupInfo(p: { group: VMGroup }): React.ReactElement {
{p.group.vms.map((item) => (
- }>
+ }
+ appearance="primary"
+ description={item.description}
+ >
{item.name}
- {item.description}
{item.architecture} • RAM :{" "}
{filesize(item.memory * 1000 * 1000)} • {item.number_vcpu}{" "}
vCPU
{state?.[item.uuid] ?? ""}
+
+
+
))}