Can download ISO files

virtweb_frontend/src/routes/IsoFilesRoute.tsx

@@ -1,11 +1,15 @@
 import DeleteIcon from "@mui/icons-material/Delete";
 import {
+  Alert,
   Button,
+  CircularProgress,
   IconButton,
   LinearProgress,
   TextField,
+  Tooltip,
   Typography,
 } from "@mui/material";
+import DownloadIcon from "@mui/icons-material/Download";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import { filesize } from "filesize";
 import { MuiFileInput } from "mui-file-input";
@@ -19,6 +23,7 @@ import { AsyncWidget } from "../widgets/AsyncWidget";
 import { VirtWebPaper } from "../widgets/VirtWebPaper";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
+import { downloadBlob } from "../utils/FilesUtils";
 
 export function IsoFilesRoute(): React.ReactElement {
   const [list, setList] = React.useState<IsoFile[] | undefined>();
@@ -185,6 +190,23 @@ function IsoFilesList(p: {
   const loadingMessage = useLoadingMessage();
   const snackbar = useSnackbar();
 
+  const [dlProgress, setDlProgress] = React.useState<undefined | number>();
+
+  const downloadIso = async (entry: IsoFile) => {
+    setDlProgress(0);
+
+    try {
+      const blob = await IsoFilesApi.Download(entry, setDlProgress);
+
+      await downloadBlob(blob, entry.filename);
+    } catch (e) {
+      console.error(e);
+      alert("Failed to download iso file!");
+    }
+
+    setDlProgress(undefined);
+  };
+
   const deleteIso = async (entry: IsoFile) => {
     if (
       !(await confirm(
@@ -227,13 +249,20 @@ function IsoFilesList(p: {
     {
       field: "actions",
       headerName: "",
-      width: 70,
+      width: 120,
       renderCell(params) {
         return (
           <>
-            <IconButton onClick={() => deleteIso(params.row)}>
-              <DeleteIcon />
-            </IconButton>
+            <Tooltip title="Download file">
+              <IconButton onClick={() => downloadIso(params.row)}>
+                <DownloadIcon />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Delete file">
+              <IconButton onClick={() => deleteIso(params.row)}>
+                <DeleteIcon />
+              </IconButton>
+            </Tooltip>
           </>
         );
       },
@@ -241,13 +270,40 @@ function IsoFilesList(p: {
   ];
 
   return (
-    <VirtWebPaper label="Files list">
-      <DataGrid
-        getRowId={(c) => c.filename}
-        rows={p.list}
-        columns={columns}
-        autoHeight={true}
-      />
-    </VirtWebPaper>
+    <>
+      <VirtWebPaper label="Files list">
+        {/* Download notification */}
+        {dlProgress !== undefined && (
+          <Alert severity="info">
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                overflow: "hidden",
+              }}
+            >
+              <Typography variant="body1">
+                Downloading... {dlProgress}%
+              </Typography>
+              <CircularProgress
+                variant="determinate"
+                size={"1.5rem"}
+                style={{ marginLeft: "10px" }}
+                value={dlProgress}
+              />
+            </div>
+          </Alert>
+        )}
+
+        {/* Files list table */}
+        <DataGrid
+          getRowId={(c) => c.filename}
+          rows={p.list}
+          columns={columns}
+          autoHeight={true}
+        />
+      </VirtWebPaper>
+    </>
   );
 }