Use tabs to organize UI

remote_frontend/src/widgets/SectionContainer.tsx

@@ -1,17 +1,10 @@
-import { makeStyles, typographyStyles } from "@fluentui/react-components";
 import React from "react";
 
-const useStyles = makeStyles({
-  title: typographyStyles.title3,
-});
-
 export function SectionContainer(
-  p: React.PropsWithChildren<{ title: string }>
+  p: React.PropsWithChildren
 ): React.ReactElement {
-  const styles = useStyles();
   return (
-    <div style={{ margin: "100px 0px" }}>
-      <span className={styles.title}>{p.title}</span>
+    <div style={{ margin: "50px 15px" }}>
       <div style={{ height: "20px" }}></div>
       {p.children}
     </div>

remote_frontend/src/widgets/SystemInfoWidget.tsx

@@ -15,7 +15,7 @@ export function SystemInfoWidget(): React.ReactElement {
   };
 
   return (
-    <SectionContainer title="System info">
+    <SectionContainer>
       <AsyncWidget
         loadKey={1}
         load={load}
@@ -84,7 +84,7 @@ function SystemInfoWidgetInner(): React.ReactElement {
               status!.system.available_memory + status!.system.used_memory
             )}`}
             validationState="none"
-            style={{ flex: 1 }}
+            style={{ flex: 2 }}
           >
             <ProgressBar
               value={
@@ -93,6 +93,7 @@ function SystemInfoWidgetInner(): React.ReactElement {
               }
             />
           </Field>
+          <div style={{ width: "20px" }}></div>
           <div style={{ flex: 1 }}>
             <p>
               Load average: {status!.system.load_average.one}{" "}

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -1,5 +1,27 @@
+import React from "react";
+import { VMApi, VMInfo } from "../api/VMApi";
 import { SectionContainer } from "./SectionContainer";
+import { AsyncWidget } from "./AsyncWidget";
 
 export function VirtualMachinesWidget(): React.ReactElement {
-  return <SectionContainer title="Virtual machines">TODO</SectionContainer>;
+  const [list, setList] = React.useState<VMInfo[] | undefined>();
+  const load = async () => {
+    setList(await VMApi.GetList());
+  };
+
+  return (
+    <SectionContainer>
+      <AsyncWidget
+        loadKey={1}
+        load={load}
+        loadingMessage="Loading the list virtual machines..."
+        errMsg="Failed to load the list of virtual machines!"
+        build={() => <VirtualMachinesWidgetInner list={list!} />}
+      />
+    </SectionContainer>
+  );
+}
+
+function VirtualMachinesWidgetInner(p: { list: VMInfo[] }): React.ReactElement {
+  return <>build list of vms</>;
 }