Start to implement action buttons for group VMs

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 (
+    <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>
+  );
+}