Add progress tracking to BackupStatus and enhance Dashboard display

Sources/Octockup.Server/Controllers/BackupController.cs

@@ -14,9 +14,12 @@ public async Task<IEnumerable<BackupStatus>> Status()
             // mock data
             return new List<BackupStatus>
             {
-                new BackupStatus(51, "Job1", DateTime.UtcNow, TimeSpan.FromMinutes(10), BackupStatusType.Completed),
-                new BackupStatus(52, "Job2", DateTime.UtcNow.AddDays(-1), TimeSpan.FromMinutes(5), BackupStatusType.Running),
-                new BackupStatus(53, "Job3", DateTime.Now, TimeSpan.FromMinutes(15), BackupStatusType.Failed),
+                new BackupStatus(51, "Job1", DateTime.UtcNow, TimeSpan.FromMinutes(10), 
+                BackupStatusType.Completed, Random.Shared.NextDouble()),
+                new BackupStatus(52, "Job2", DateTime.UtcNow.AddDays(-1), TimeSpan.FromMinutes(5), 
+                BackupStatusType.Running, Random.Shared.NextDouble()),
+                new BackupStatus(53, "Job3", DateTime.Now, TimeSpan.FromMinutes(15), 
+                BackupStatusType.Failed, Random.Shared.NextDouble()),
             };
         }
     }

Sources/Octockup.Server/Models/BackupStatus.cs

@@ -2,5 +2,5 @@
 
 namespace Octockup.Server.Models
 {
-    public record BackupStatus(int Id, string JobName, DateTime LastRun, TimeSpan Duration, BackupStatusType Status);
+    public record BackupStatus(int Id, string JobName, DateTime LastRun, TimeSpan Duration, BackupStatusType Status, double Progress);
 }

Sources/octockup.client/src/api/api.ts

@@ -62,5 +62,8 @@ export const getBackupStatus = async (): Promise<BackupStatus[]> => {
   const response = await AxiosClient.getInstance().get<BackupStatus[]>(
     "/backup/status"
   );
+  response.data.forEach((backup) => {
+    backup.lastRunDate = new Date(backup.lastRun);
+  });
   return response.data;
 };

Sources/octockup.client/src/api/types.ts

@@ -27,6 +27,8 @@ export interface BackupStatus {
   jobName: string;
   lastRun: string;
   duration: string;
+  progress: number;
+  lastRunDate: Date;
   status: BackupStatusType;
 }
 

Sources/octockup.client/src/components/Dashboard.tsx

@@ -1,10 +1,19 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Box, Typography } from "@mui/material";
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
 import { BackupStatus, User } from "../api/types";
 import useAuthUser from "react-auth-kit/hooks/useAuthUser";
 import { getBackupStatus } from "../api/api";
 import { toast } from "react-toastify";
+import { ProgressBar } from ".";
 
 const Dashboard: React.FC = () => {
   const { t } = useTranslation();
@@ -36,15 +45,35 @@ const Dashboard: React.FC = () => {
         </Typography>
       </Box>
       <Box mt={2} flexGrow={1}>
-        {status.map((backup, index) => (
-          <Box key={index} display="flex" justifyContent="space-between">
-            <Typography>{backup.id}</Typography>
-            <Typography>{backup.jobName}</Typography>
-            <Typography>{backup.lastRun}</Typography>
-            <Typography>{backup.duration}</Typography>
-            <Typography>{backup.status}</Typography>
-          </Box>
-        ))}
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>{t("backup.id")}</TableCell>
+              <TableCell>{t("backup.jobName")}</TableCell>
+              <TableCell>{t("backup.lastRun")}</TableCell>
+              <TableCell>{t("backup.duration")}</TableCell>
+              <TableCell>{t("backup.progress")}</TableCell>
+              <TableCell>{t("backup.status")}</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {status.map((backup, index) => (
+              <TableRow key={index}>
+                <TableCell>{backup.id}</TableCell>
+                <TableCell>{backup.jobName}</TableCell>
+                <TableCell>{backup.lastRunDate.toLocaleString()}</TableCell>
+                <TableCell>{backup.duration}</TableCell>
+                <TableCell>
+                  <ProgressBar
+                    value={backup.progress}
+                    error={backup.id === 52}
+                  />
+                </TableCell>
+                <TableCell>{backup.status}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
       </Box>
     </Box>
   );

Sources/octockup.client/src/components/ProgressBar/ProgressBar.module.css

@@ -0,0 +1,15 @@
+.progressBar {
+  width: 100%;
+  height: 20px;
+  background-color: #b59393;
+  border-radius: 20px;
+  margin: 10px 0;
+}
+
+.progressBarContainer {
+  width: 100%;
+  height: 20px;
+  background-color: #787878;
+  border-radius: 20px;
+  margin: 10px 0;
+}

Sources/octockup.client/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,30 @@
+import styles from "./ProgressBar.module.css";
+
+interface ProgressBarProps {
+  value: number;
+  error?: boolean;
+}
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+  value: progress,
+  error,
+}) => {
+  const percentage = progress * 100;
+  return (
+    <div className={styles.progressBarContainer}>
+      <div
+        className={styles.progressBar}
+        role="progressbar"
+        style={{
+          width: `${percentage}%`,
+          backgroundColor: error ? "#ff5959" : "#2fad2f",
+        }}
+        aria-valuenow={percentage}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      ></div>
+    </div>
+  );
+};
+
+export default ProgressBar;

Sources/octockup.client/src/components/index.ts

@@ -5,3 +5,4 @@ export { default as NavBar } from "./NavBar/NavBar";
 export { default as LoginForm } from "./LoginForm/LoginForm";
 export { default as ProtectedRoute } from "./ProtectedRoute";
 export { default as LanguageSwitcher } from "./LanguageSwitcher";
+export { default as ProgressBar } from "./ProgressBar/ProgressBar";