Display VMs in group

remote_frontend/src/widgets/GroupsWidget.tsx

@@ -1,5 +1,65 @@
-import { Rights } from "../api/ServerApi";
+import {
+  Card,
+  Table,
+  TableBody,
+  TableCell,
+  TableCellLayout,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  Title3,
+} from "@fluentui/react-components";
+import { Desktop24Regular } from "@fluentui/react-icons";
+import { filesize } from "filesize";
+import { Rights, VMGroup } from "../api/ServerApi";
 
 export function GroupsWidget(p: { rights: Rights }): React.ReactElement {
-  return <p>TODO</p>;
+  return (
+    <>
+      {p.rights.groups.map((g) => (
+        <GroupInfo group={g} />
+      ))}
+    </>
+  );
+}
+
+function GroupInfo(p: { group: VMGroup }): React.ReactElement {
+  return (
+    <Card
+      style={{
+        margin: "50px 10px",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Title3 style={{ marginLeft: "10px" }}>{p.group.id}</Title3>
+      <Table arial-label="Default table" style={{ minWidth: "510px" }}>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell>Name</TableHeaderCell>
+            <TableHeaderCell>Description</TableHeaderCell>
+            <TableHeaderCell>Resources</TableHeaderCell>
+            <TableHeaderCell>Actions</TableHeaderCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {p.group.vms.map((item) => (
+            <TableRow key={item.uuid}>
+              <TableCell>
+                <TableCellLayout media={<Desktop24Regular />}>
+                  {item.name}
+                </TableCellLayout>
+              </TableCell>
+              <TableCell>{item.description}</TableCell>
+              <TableCell>
+                {item.architecture} &bull; RAM :{" "}
+                {filesize(item.memory * 1000 * 1000)} &bull; {item.number_vcpu}{" "}
+                vCPU
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Card>
+  );
 }