Get group VMs state
This commit is contained in:
parent
59ad5fd722
commit
2a50e41894
18
remote_frontend/src/api/GroupApi.ts
Normal file
18
remote_frontend/src/api/GroupApi.ts
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -12,6 +12,10 @@ import {
|
|||||||
import { Desktop24Regular } from "@fluentui/react-icons";
|
import { Desktop24Regular } from "@fluentui/react-icons";
|
||||||
import { filesize } from "filesize";
|
import { filesize } from "filesize";
|
||||||
import { Rights, VMGroup } from "../api/ServerApi";
|
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 {
|
export function GroupsWidget(p: { rights: Rights }): React.ReactElement {
|
||||||
return (
|
return (
|
||||||
@ -24,6 +28,31 @@ export function GroupsWidget(p: { rights: Rights }): React.ReactElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function GroupInfo(p: { group: VMGroup }): 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 (
|
return (
|
||||||
<Card
|
<Card
|
||||||
style={{
|
style={{
|
||||||
@ -39,6 +68,7 @@ function GroupInfo(p: { group: VMGroup }): React.ReactElement {
|
|||||||
<TableHeaderCell>Name</TableHeaderCell>
|
<TableHeaderCell>Name</TableHeaderCell>
|
||||||
<TableHeaderCell>Description</TableHeaderCell>
|
<TableHeaderCell>Description</TableHeaderCell>
|
||||||
<TableHeaderCell>Resources</TableHeaderCell>
|
<TableHeaderCell>Resources</TableHeaderCell>
|
||||||
|
<TableHeaderCell>State</TableHeaderCell>
|
||||||
<TableHeaderCell>Actions</TableHeaderCell>
|
<TableHeaderCell>Actions</TableHeaderCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
@ -56,6 +86,7 @@ function GroupInfo(p: { group: VMGroup }): React.ReactElement {
|
|||||||
{filesize(item.memory * 1000 * 1000)} • {item.number_vcpu}{" "}
|
{filesize(item.memory * 1000 * 1000)} • {item.number_vcpu}{" "}
|
||||||
vCPU
|
vCPU
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
<TableCell>{state?.[item.uuid] ?? ""}</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
|
Loading…
Reference in New Issue
Block a user