diff --git a/remote_frontend/src/api/GroupApi.ts b/remote_frontend/src/api/GroupApi.ts new file mode 100644 index 0000000..ec740d1 --- /dev/null +++ b/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 { + return ( + await APIClient.exec({ method: "GET", uri: `/group/${g.id}/vm/state` }) + ).data; + } +} diff --git a/remote_frontend/src/widgets/GroupsWidget.tsx b/remote_frontend/src/widgets/GroupsWidget.tsx index 053d894..02a1fa6 100644 --- a/remote_frontend/src/widgets/GroupsWidget.tsx +++ b/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(); + + 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 ( Name Description Resources + State Actions @@ -56,6 +86,7 @@ function GroupInfo(p: { group: VMGroup }): React.ReactElement { {filesize(item.memory * 1000 * 1000)} • {item.number_vcpu}{" "} vCPU + {state?.[item.uuid] ?? ""} ))}