From 17fdcbd529ad42dce4eba4dfa673ce8c54b42985 Mon Sep 17 00:00:00 2001
From: Yinyin Liu <liu@innov.energy>
Date: Thu, 11 Jul 2024 14:23:41 +0200
Subject: [PATCH] frontend for download battery log button

---
 .../BatteryView/DetailedBatteryView.tsx       | 280 +++++++++++++++++-
 1 file changed, 279 insertions(+), 1 deletion(-)

diff --git a/typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx b/typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx
index 9240d7283..4d688ed8f 100644
--- a/typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx
@@ -37,6 +37,10 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
   const [openModalFirmwareUpdate, setOpenModalFirmwareUpdate] = useState(false);
   const [openModalResultFirmwareUpdate, setOpenModalResultFirmwareUpdate] =
     useState(false);
+  const [openModalDownloadBatteryLog, setOpenModalDownloadBatteryLog] = useState(false);
+  const [openModalStartDownloadBatteryLog, setOpenModalStartDownloadBatteryLog] = useState(false);
+  const [openModalError, setOpenModalError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
 
   const [selectedVersion, setSelectedVersion] = useState(
     props.batteryData.FwVersion.value
@@ -136,6 +140,100 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
     setOpenModalFirmwareUpdate(false);
   };
 
+  const StartDownloadBatteryLogModalHandleOk = () => {
+    // stay in the current page which shows the single battery
+    setOpenModalStartDownloadBatteryLog(false);
+  };
+
+  const handleDownloadBmsLog = () => {
+    setOpenModalDownloadBatteryLog(true);
+  };
+
+  const DownloadBatteryLogModalHandleCancel = () => {
+    setOpenModalDownloadBatteryLog(false);
+  };
+
+
+  const DownloadBatteryLogModalHandleProceed = async () => {
+    setOpenModalDownloadBatteryLog(false);
+    setOpenModalStartDownloadBatteryLog(true);
+
+    try {
+      // Start the job to generate the battery log
+      const startRes = await axiosConfig.post(
+        `/StartDownloadBatteryLog?batteryNode=${props.batteryData.BatteryId.toString()}&installationId=${props.installationId}`
+      );
+
+      if (startRes.status === 200) {
+        const jobId = startRes.data;
+
+        // Polling to check the job status
+        const checkJobStatus = async () => {
+          try {
+            const statusRes = await axiosConfig.get(`/GetJobResult?jobId=${jobId}`);
+
+            if (statusRes.status === 200) {
+              const jobStatus = statusRes.data.status;
+
+              switch (jobStatus) {
+                case "Completed":
+                  return statusRes.data.fileName; // Return FileName upon completion
+                case "Failed":
+                  throw new Error("Job processing failed.");
+                case "Processing":
+                  await new Promise(resolve => setTimeout(resolve, 60000)); // Wait for 60 seconds before next check
+                  return checkJobStatus();
+                default:
+                  throw new Error("Unknown download battery log job status.");
+              }
+            } else {
+              throw new Error("Unexpected error occurred.");
+            }
+          } catch (error) {
+            throw new Error("Failed to fetch job status."); // Catch errors from status check
+          }
+        };
+
+        // Wait for job completion or failure
+        const fileName = await checkJobStatus();
+
+        // Once job is completed, download the file
+        const res = await axiosConfig.get(`/DownloadBatteryLog?jobId=${jobId}`, {
+          responseType: 'blob',
+        });
+
+        const finalFileName = fileName || 'unknown_file_name'; // Default filename if not received
+        console.log('Downloaded file name:', finalFileName);
+
+        const url = window.URL.createObjectURL(new Blob([res.data]));
+        const a = document.createElement('a');
+        a.style.display = 'none';
+        a.href = url;
+        a.download = finalFileName;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+
+        // Delete the file after successful download
+        console.log('Deleted file name:', finalFileName);
+        await axiosConfig.delete(`/DeleteBatteryLog`, { params: { fileName: finalFileName } });
+
+      } else {
+        console.error('Failed to start downloading battery log in the backend.');
+      }
+    } catch (error) {
+      console.error('Error:', error.message);
+      setErrorMessage('Download battery log failed, please try again.');
+      setOpenModalError(true);
+    } finally {
+      setOpenModalStartDownloadBatteryLog(false);
+    }
+  };
+
+  const ErrorModalHandleOk = () => {
+    setOpenModalError(false);
+  };
+
   return (
     <>
       {openModalResultFirmwareUpdate && (
@@ -224,7 +322,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
             </Typography>
 
             <Typography variant="body1" gutterBottom>
-              This action requires the battery service to be stopped.
+              This action requires the battery service to be stopped for around 10-15 minutes.
             </Typography>
 
             <div
@@ -264,6 +362,174 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
         </Modal>
       )}
 
+      {openModalStartDownloadBatteryLog && (
+        <Modal
+          open={openModalStartDownloadBatteryLog}
+          aria-labelledby="error-modal"
+          aria-describedby="error-modal-description"
+        >
+          <Box
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: 420,
+              bgcolor: 'background.paper',
+              borderRadius: 4,
+              boxShadow: 24,
+              p: 4,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center'
+            }}
+          >
+            <Typography
+              variant="body1"
+              gutterBottom
+              sx={{ fontWeight: 'bold' }}
+            >
+              The battery log is getting downloaded. It will be saved in the Downloads folder. Please wait...
+            </Typography>
+
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                marginTop: 10
+              }}
+            >
+              <Button
+                sx={{
+                  marginTop: 2,
+                  textTransform: 'none',
+                  bgcolor: '#ffc04d',
+                  color: '#111111',
+                  '&:hover': { bgcolor: '#f7b34d' }
+                }}
+                onClick={StartDownloadBatteryLogModalHandleOk}
+              >
+                Ok
+              </Button>
+            </div>
+          </Box>
+        </Modal>
+      )}
+
+      {openModalDownloadBatteryLog && (
+        <Modal
+          open={openModalDownloadBatteryLog}
+          onClose={DownloadBatteryLogModalHandleCancel}
+          aria-labelledby="error-modal"
+          aria-describedby="error-modal-description"
+        >
+          <Box
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: 420,
+              bgcolor: 'background.paper',
+              borderRadius: 4,
+              boxShadow: 24,
+              p: 4,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center'
+            }}
+          >
+            <Typography
+              variant="body1"
+              gutterBottom
+              sx={{ fontWeight: 'bold' }}
+            >
+              Do you really want to download battery log?
+            </Typography>
+
+            <Typography variant="body1" gutterBottom>
+              This action requires the battery service to be stopped for around 10-15 minutes.
+            </Typography>
+
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                marginTop: 10
+              }}
+            >
+              <Button
+                sx={{
+                  marginTop: 2,
+                  textTransform: 'none',
+                  bgcolor: '#ffc04d',
+                  color: '#111111',
+                  '&:hover': { bgcolor: '#f7b34d' }
+                }}
+                onClick={DownloadBatteryLogModalHandleProceed}
+              >
+                Proceed
+              </Button>
+              <Button
+                sx={{
+                  marginTop: 2,
+                  marginLeft: 2,
+                  textTransform: 'none',
+                  bgcolor: '#ffc04d',
+                  color: '#111111',
+                  '&:hover': { bgcolor: '#f7b34d' }
+                }}
+                onClick={DownloadBatteryLogModalHandleCancel}
+              >
+                Cancel
+              </Button>
+            </div>
+          </Box>
+        </Modal>
+      )}
+
+      {openModalError && (
+        <Modal
+          open={openModalError}
+          aria-labelledby="error-modal"
+          aria-describedby="error-modal-description"
+        >
+          <Box
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: 420,
+              bgcolor: 'background.paper',
+              borderRadius: 4,
+              boxShadow: 24,
+              p: 4,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center'
+            }}
+          >
+            <Typography
+              variant="body1"
+              gutterBottom
+              sx={{ fontWeight: 'bold' }}
+            >
+              {errorMessage}
+            </Typography>
+
+            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
+              <Button
+                sx={{ marginTop: 2, textTransform: 'none', bgcolor: '#ffc04d', color: '#111111', '&:hover': { bgcolor: '#f7b34d' } }}
+                onClick={ErrorModalHandleOk}
+              >
+                Ok
+              </Button>
+            </div>
+          </Box>
+        </Modal>
+      )}
+
       <Grid container>
         <Grid item xs={6} md={6}>
           <IconButton
@@ -308,6 +574,18 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
           >
             Update Firmware
           </Button>
+          <Button
+            variant="contained"
+            onClick={handleDownloadBmsLog}
+            sx={{
+              marginLeft: '20px',
+              backgroundColor: '#ffc04d',
+              color: '#000000',
+              '&:hover': { bgcolor: '#f7b34d' },
+            }}
+          >
+            Download Battery Log
+          </Button>
         </Grid>
       </Grid>
       <Grid container>