Display the list of ISO files

virtweb_frontend/src/api/IsoFilesApi.ts

@@ -1,5 +1,10 @@
 import { APIClient } from "./ApiClient";
 
+export interface IsoFile {
+  filename: string;
+  size: number;
+}
+
 export class IsoFilesApi {
   /**
    * Upload a new ISO file to the server
@@ -29,4 +34,16 @@ export class IsoFilesApi {
       jsonData: { url: url, filename: filename },
     });
   }
+
+  /**
+   * Get iso files list
+   */
+  static async GetList(): Promise<IsoFile[]> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: "/iso/list",
+      })
+    ).data;
+  }
 }

virtweb_frontend/src/routes/IsoFilesRoute.tsx

@@ -2,22 +2,44 @@ import { Button, LinearProgress, TextField, Typography } from "@mui/material";
 import { filesize } from "filesize";
 import { MuiFileInput } from "mui-file-input";
 import React from "react";
-import { IsoFilesApi } from "../api/IsoFilesApi";
+import { IsoFile, IsoFilesApi } from "../api/IsoFilesApi";
 import { ServerApi } from "../api/ServerApi";
 import { useAlert } from "../hooks/providers/AlertDialogProvider";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
 import { VirtWebPaper } from "../widgets/VirtWebPaper";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { DataGrid, GridColDef, GridRowsProp } from "@mui/x-data-grid";
 
 export function IsoFilesRoute(): React.ReactElement {
+  const [list, setList] = React.useState<IsoFile[] | undefined>();
+
+  const loadKey = React.useRef(1);
+
+  const load = async () => {
+    setList(await IsoFilesApi.GetList());
+  };
+
+  const reload = () => {
+    loadKey.current += 1;
+    setList(undefined);
+  };
+
   return (
-    <VirtWebRouteContainer label="ISO files management">
-      <UploadIsoFileCard onFileUploaded={() => alert("file uploaded!")} />
-      <UploadIsoFileFromUrlCard
-        onFileUploaded={() => alert("file uploaded!")}
-      />
-    </VirtWebRouteContainer>
+    <AsyncWidget
+      loadKey={loadKey.current}
+      errMsg="Failed to load ISO files list!"
+      load={load}
+      ready={list !== undefined}
+      build={() => (
+        <VirtWebRouteContainer label="ISO files management">
+          <UploadIsoFileCard onFileUploaded={reload} />
+          <UploadIsoFileFromUrlCard onFileUploaded={reload} />
+          <IsoFilesList list={list!} onReload={reload} />
+        </VirtWebRouteContainer>
+      )}
+    />
   );
 }
 
@@ -145,3 +167,38 @@ function UploadIsoFileFromUrlCard(p: {
     </VirtWebPaper>
   );
 }
+
+function IsoFilesList(p: {
+  list: IsoFile[];
+  onReload: () => void;
+}): React.ReactElement {
+  if (p.list.length === 0)
+    return (
+      <Typography variant="body1" style={{ textAlign: "center" }}>
+        No ISO file uploaded for now.
+      </Typography>
+    );
+
+  const columns: GridColDef[] = [
+    { field: "filename", headerName: "File name", flex: 3 },
+    {
+      field: "size",
+      headerName: "File size",
+      flex: 1,
+      renderCell(params) {
+        return filesize(params.row.size);
+      },
+    },
+  ];
+
+  return (
+    <VirtWebPaper label="Files list">
+      <DataGrid
+        getRowId={(c) => c.filename}
+        rows={p.list}
+        columns={columns}
+        autoHeight={true}
+      />
+    </VirtWebPaper>
+  );
+}