Centralize rights management

remote_frontend/src/widgets/SystemInfoWidget.tsx

@@ -1,47 +1,13 @@
-import React from "react";
-import { SysInfoApi, SysInfoConfig, SysInfoStatus } from "../api/SysInfoApi";
-import { AsyncWidget } from "./AsyncWidget";
-import { SectionContainer } from "./SectionContainer";
 import { Field, ProgressBar } from "@fluentui/react-components";
 import { filesize } from "filesize";
-import { format_duration } from "../utils/time_utils";
+import React from "react";
+import { SysInfoApi, SysInfoStatus } from "../api/SysInfoApi";
 import { useToast } from "../hooks/providers/ToastProvider";
+import { format_duration } from "../utils/time_utils";
+import { AsyncWidget } from "./AsyncWidget";
+import { SectionContainer } from "./SectionContainer";
 
 export function SystemInfoWidget(): React.ReactElement {
-  const [config, setConfig] = React.useState<SysInfoConfig | undefined>();
-
-  const load = async () => {
-    setConfig(await SysInfoApi.GetConfig());
-  };
-
-  return (
-    <SectionContainer>
-      <AsyncWidget
-        loadKey={1}
-        load={load}
-        errMsg="Failed to check system configuration!"
-        loadingMessage="Checking server configuration..."
-        build={() =>
-          config?.allowed ? (
-            <SystemInfoWidgetInner />
-          ) : (
-            <SystemInfoWidgetUnavailable />
-          )
-        }
-      />
-    </SectionContainer>
-  );
-}
-
-function SystemInfoWidgetUnavailable(): React.ReactElement {
-  return (
-    <p style={{ textAlign: "center" }}>
-      Unfortunatley, system information is available. (not enough privileges)
-    </p>
-  );
-}
-
-function SystemInfoWidgetInner(): React.ReactElement {
   const toast = useToast();
 
   const [status, setStatus] = React.useState<SysInfoStatus | undefined>();
@@ -63,49 +29,51 @@ function SystemInfoWidgetInner(): React.ReactElement {
   });
 
   return (
-    <AsyncWidget
-      loadKey={1}
-      load={load}
-      loadingMessage="Loading system status..."
-      errMsg="Failed to load system status!"
-      build={() => (
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <Field
-            validationMessage={`${filesize(
-              status!.system.used_memory
-            )} of memory used out of ${filesize(
-              status!.system.available_memory + status!.system.used_memory
-            )}`}
-            validationState="none"
-            style={{ flex: 2 }}
+    <SectionContainer>
+      <AsyncWidget
+        loadKey={1}
+        load={load}
+        loadingMessage="Loading system status..."
+        errMsg="Failed to load system status!"
+        build={() => (
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
           >
-            <ProgressBar
-              value={
-                status!.system.used_memory /
-                (status!.system.available_memory + status!.system.used_memory)
-              }
-            />
-          </Field>
-          <div style={{ width: "20px" }}></div>
-          <div style={{ flex: 1 }}>
-            <p>
-              Load average: {status!.system.load_average.one}{" "}
-              {status!.system.load_average.five}{" "}
-              {status!.system.load_average.fifteen}
-            </p>
-            <UptimeWidget uptime={status!.system.uptime} />
-            Number physical cores: {status!.system.physical_core_count}
+            <Field
+              validationMessage={`${filesize(
+                status!.system.used_memory
+              )} of memory used out of ${filesize(
+                status!.system.available_memory + status!.system.used_memory
+              )}`}
+              validationState="none"
+              style={{ flex: 2 }}
+            >
+              <ProgressBar
+                value={
+                  status!.system.used_memory /
+                  (status!.system.available_memory + status!.system.used_memory)
+                }
+              />
+            </Field>
+            <div style={{ width: "20px" }}></div>
+            <div style={{ flex: 1 }}>
+              <p>
+                Load average: {status!.system.load_average.one}{" "}
+                {status!.system.load_average.five}{" "}
+                {status!.system.load_average.fifteen}
+              </p>
+              <UptimeWidget uptime={status!.system.uptime} />
+              Number physical cores: {status!.system.physical_core_count}
+            </div>
           </div>
-        </div>
-      )}
-    />
+        )}
+      />
+    </SectionContainer>
   );
 }
 

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -21,54 +21,39 @@ import {
 } from "@fluentui/react-icons";
 import { filesize } from "filesize";
 import React from "react";
+import { Rights } from "../api/ServerApi";
 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 { SectionContainer } from "./SectionContainer";
 
 const useStyles = makeStyles({
   body1Stronger: typographyStyles.body1Stronger,
   caption1: typographyStyles.caption1,
 });
 
-export function VirtualMachinesWidget(): React.ReactElement {
-  const [list, setList] = React.useState<VMInfo[] | undefined>();
-  const load = async () => {
-    setList(await VMApi.GetList());
-  };
-
+export function VirtualMachinesWidget(p: {
+  rights: Rights;
+}): React.ReactElement {
   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!} />}
-      />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          flexWrap: "wrap",
+          justifyContent: "center",
+        }}
+      >
+        {p.rights.vms.map((v, n) => (
+          <VMWidget key={n} vm={v} />
+        ))}
+      </div>
     </SectionContainer>
   );
 }
 
-function VirtualMachinesWidgetInner(p: { list: VMInfo[] }): React.ReactElement {
-  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 {
   const toast = useToast();