working on estimated time progress

website/src/EstimatedTimeProgress.jsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from "react";
+import { LinearProgress, Typography } from "@mui/material";
+
+const EstimatedTimeProgress = ({ totalTime }) => {
+  const [elapsedTime, setElapsedTime] = useState(0);
+
+  useEffect(() => {
+    let interval;
+
+    // Start a timer to update elapsed time every second
+    if (elapsedTime < totalTime) {
+      interval = setInterval(() => {
+        setElapsedTime((prevTime) => prevTime + 1);
+      }, 1000);
+    }
+
+    // Clear the timer when the component unmounts
+    return () => clearInterval(interval);
+  }, [elapsedTime, totalTime]);
+
+  const remainingTime = totalTime - elapsedTime;
+  const progressPercentage = (elapsedTime / totalTime) * 100;
+
+  return (
+    <div>
+      <Typography variant="h6">
+        Estimated Time Left: {formatTime(remainingTime)}
+      </Typography>
+      <LinearProgress variant="determinate" value={progressPercentage} />
+    </div>
+  );
+};
+
+// Function to format time in HH:MM:SS format
+const formatTime = (timeInSeconds) => {
+  const hours = Math.floor(timeInSeconds / 3600);
+  const minutes = Math.floor((timeInSeconds % 3600) / 60);
+  const seconds = timeInSeconds % 60;
+
+  return `${hours.toString().padStart(2, "0")}:${minutes
+    .toString()
+    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+};
+
+export default EstimatedTimeProgress;

website/src/K8sTimeSeriesChart.jsx

@@ -9,6 +9,7 @@ import FusionCharts from "fusioncharts";
 import TimeSeries from "fusioncharts/fusioncharts.timeseries";
 import ReactFC from "react-fusioncharts";
 import schema from "./schema";
+import EstimatedTimeProgress from "./EstimatedTimeProgress";
 
 const HOST = import.meta.env.VITE_HOST;
 
@@ -147,6 +148,7 @@ function K8sTimeSeriesChart() {
           />
         </RadioGroup>
       </FormControl>
+      <EstimatedTimeProgress totalTime={36} />
       <ReactFC {...ds.timeseriesDs} />
     </div>
   );