Show basic VM characteristics

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<VMState | undefined>();
 
+  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 {
           </Caption1>
         }
       />
+      <p className={styles.caption1} style={{ margin: "0px auto" }}>
+        {p.vm.architecture} &bull; RAM : {filesize(p.vm.memory * 1000 * 1000)}{" "}
+        &bull; {p.vm.number_vcpu} vCPU
+      </p>
 
       <p style={{ flex: 1 }}>{p.vm.description}</p>