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

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",
       }}
     >
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
         <Title3 style={{ marginLeft: "10px" }}>{p.group.id}</Title3>
-      <Table arial-label="Default table" style={{ minWidth: "510px" }}>
+        <GroupVMAction group={p.group} />
+      </div>
+      <Table sortable>
         <TableHeader>
           <TableRow>
-            <TableHeaderCell>Name</TableHeaderCell>
-            <TableHeaderCell>Description</TableHeaderCell>
+            <TableHeaderCell>VM</TableHeaderCell>
             <TableHeaderCell>Resources</TableHeaderCell>
             <TableHeaderCell>State</TableHeaderCell>
             <TableHeaderCell>Actions</TableHeaderCell>
@@ -76,17 +78,27 @@ function GroupInfo(p: { group: VMGroup }): React.ReactElement {
           {p.group.vms.map((item) => (
             <TableRow key={item.uuid}>
               <TableCell>
-                <TableCellLayout media={<Desktop24Regular />}>
+                <TableCellLayout
+                  media={<Desktop24Regular />}
+                  appearance="primary"
+                  description={item.description}
+                >
                   {item.name}
                 </TableCellLayout>
               </TableCell>
-              <TableCell>{item.description}</TableCell>
               <TableCell>
                 {item.architecture} &bull; RAM :{" "}
                 {filesize(item.memory * 1000 * 1000)} &bull; {item.number_vcpu}{" "}
                 vCPU
               </TableCell>
               <TableCell>{state?.[item.uuid] ?? ""}</TableCell>
+              <TableCell>
+                <GroupVMAction
+                  group={p.group}
+                  state={state?.[item.uuid]}
+                  vm={item}
+                />
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>