Display the list of VMs

remote_frontend/src/App.tsx

@@ -4,22 +4,20 @@ import {
   makeStyles,
   typographyStyles,
 } from "@fluentui/react-components";
+import {
+  DesktopFilled,
+  DesktopRegular,
+  InfoFilled,
+  InfoRegular,
+  bundleIcon,
+} from "@fluentui/react-icons";
+import React from "react";
 import { ServerApi } from "./api/ServerApi";
 import { AuthRouteWidget } from "./routes/AuthRouteWidget";
 import { AsyncWidget } from "./widgets/AsyncWidget";
 import { MainMenu } from "./widgets/MainMenu";
 import { SystemInfoWidget } from "./widgets/SystemInfoWidget";
 import { VirtualMachinesWidget } from "./widgets/VirtualMachinesWidget";
-import {
-  DesktopFilled,
-  DesktopRegular,
-  Info12Filled,
-  Info12Regular,
-  InfoFilled,
-  InfoRegular,
-  bundleIcon,
-} from "@fluentui/react-icons";
-import React from "react";
 
 const useStyles = makeStyles({
   title: typographyStyles.title2,

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -1,7 +1,21 @@
+import {
+  Body1,
+  Button,
+  Caption1,
+  Card,
+  CardFooter,
+  CardHeader,
+  CardPreview,
+} from "@fluentui/react-components";
+import {
+  DesktopRegular,
+  Play16Regular,
+  PowerRegular,
+} from "@fluentui/react-icons";
 import React from "react";
 import { VMApi, VMInfo } from "../api/VMApi";
-import { SectionContainer } from "./SectionContainer";
 import { AsyncWidget } from "./AsyncWidget";
+import { SectionContainer } from "./SectionContainer";
 
 export function VirtualMachinesWidget(): React.ReactElement {
   const [list, setList] = React.useState<VMInfo[] | undefined>();
@@ -23,5 +37,54 @@ export function VirtualMachinesWidget(): React.ReactElement {
 }
 
 function VirtualMachinesWidgetInner(p: { list: VMInfo[] }): React.ReactElement {
-  return <>build list of vms</>;
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        justifyContent: "center",
+      }}
+    >
+      {p.list.map((v, n) => (
+        <VMWidget key={n} vm={v} />
+      ))}{" "}
+    </div>
+  );
+}
+
+function VMWidget(p: { vm: VMInfo }): React.ReactElement {
+  return (
+    <Card
+      style={{
+        width: "400px",
+        maxWidth: "49%",
+        height: "220px",
+        margin: "10px",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <CardPreview>TODO preview</CardPreview>
+
+      <CardHeader
+        image={<DesktopRegular fontSize={32} />}
+        header={
+          <Body1>
+            <b>{p.vm.name}</b>
+          </Body1>
+        }
+        description={<Caption1>STATE TODO</Caption1>}
+      />
+
+      <p style={{ flex: 1 }}>{p.vm.description}</p>
+
+      <CardFooter>
+        <Button appearance="primary" icon={<Play16Regular />}>
+          Start VM
+        </Button>
+        <Button icon={<PowerRegular />}>Shutdown</Button>
+      </CardFooter>
+    </Card>
+  );
 }