From 50dbdafebf5344b686072e8d42bf0631ba2bbbd9 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Tue, 7 May 2024 22:02:50 +0200
Subject: [PATCH] Show basic VM characteristics

---
 remote_frontend/src/widgets/VirtualMachinesWidget.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

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<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>