Use tabs to organize UI

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</>;
 }