diff --git a/remote_frontend/src/widgets/VirtualMachinesWidget.tsx b/remote_frontend/src/widgets/VirtualMachinesWidget.tsx index 982d1f9..6ea4743 100644 --- a/remote_frontend/src/widgets/VirtualMachinesWidget.tsx +++ b/remote_frontend/src/widgets/VirtualMachinesWidget.tsx @@ -19,16 +19,18 @@ import { PowerRegular, StopRegular, } from "@fluentui/react-icons"; +import { filesize } from "filesize"; import React from "react"; import { VMApi, VMInfo, VMState } from "../api/VMApi"; +import { useConfirm } from "../hooks/providers/ConfirmDialogProvider"; import { useToast } from "../hooks/providers/ToastProvider"; import { AsyncWidget } from "./AsyncWidget"; import { SectionContainer } from "./SectionContainer"; import { VMLiveScreenshot } from "./VMLiveScreenshot"; -import { useConfirm } from "../hooks/providers/ConfirmDialogProvider"; const useStyles = makeStyles({ body1Stronger: typographyStyles.body1Stronger, + caption1: typographyStyles.caption1, }); export function VirtualMachinesWidget(): React.ReactElement { @@ -72,6 +74,8 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement { const [state, setState] = React.useState(); + const styles = useStyles(); + const load = async () => { const newState = await VMApi.State(p.vm); if (state !== newState) setState(newState); @@ -117,6 +121,10 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement { } /> +

+ {p.vm.architecture} • RAM : {filesize(p.vm.memory * 1000 * 1000)}{" "} + • {p.vm.number_vcpu} vCPU +

{p.vm.description}