frontend for download battery log button
This commit is contained in:
parent
0589788808
commit
17fdcbd529
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue