remote_frontend/src/api/GroupApi.ts

@@ -0,0 +1,18 @@
+import { APIClient } from "./ApiClient";
+import { VMGroup } from "./ServerApi";
+import { VMState } from "./VMApi";
+
+export interface GroupVMState {
+  [key: string]: VMState;
+}
+
+export class GroupApi {
+  /**
+   * Get the state of the VMs of a group
+   */
+  static async State(g: VMGroup): Promise<GroupVMState> {
+    return (
+      await APIClient.exec({ method: "GET", uri: `/group/${g.id}/vm/state` })
+    ).data;
+  }
+}

remote_frontend/src/widgets/GroupsWidget.tsx

@@ -12,6 +12,10 @@ import {
 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 { useToast } from "../hooks/providers/ToastProvider";
 
 export function GroupsWidget(p: { rights: Rights }): React.ReactElement {
   return (
@@ -24,6 +28,31 @@ export function GroupsWidget(p: { rights: Rights }): React.ReactElement {
 }
 
 function GroupInfo(p: { group: VMGroup }): React.ReactElement {
+  const toast = useToast();
+
+  const [state, setState] = React.useState<GroupVMState | undefined>();
+
+  const load = async () => {
+    const newState = await GroupApi.State(p.group);
+    if (state !== newState) setState(newState);
+  };
+
+  React.useEffect(() => {
+    const interval = setInterval(async () => {
+      try {
+        if (p.group.can_get_state) await load();
+      } catch (e) {
+        console.error(e);
+        toast(
+          "Error",
+          `Failed to refresh group ${p.group.id} VMs status!`,
+          "error"
+        );
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  });
+
   return (
     <Card
       style={{
@@ -39,6 +68,7 @@ function GroupInfo(p: { group: VMGroup }): React.ReactElement {
             <TableHeaderCell>Name</TableHeaderCell>
             <TableHeaderCell>Description</TableHeaderCell>
             <TableHeaderCell>Resources</TableHeaderCell>
+            <TableHeaderCell>State</TableHeaderCell>
             <TableHeaderCell>Actions</TableHeaderCell>
           </TableRow>
         </TableHeader>
@@ -56,6 +86,7 @@ function GroupInfo(p: { group: VMGroup }): React.ReactElement {
                 {filesize(item.memory * 1000 * 1000)} &bull; {item.number_vcpu}{" "}
                 vCPU
               </TableCell>
+              <TableCell>{state?.[item.uuid] ?? ""}</TableCell>
             </TableRow>
           ))}
         </TableBody>