frontend for download battery log button

This commit is contained in:
Yinyin Liu 2024-07-11 14:23:41 +02:00
parent 0589788808
commit 17fdcbd529
1 changed files with 279 additions and 1 deletions

View File

@ -37,6 +37,10 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
const [openModalFirmwareUpdate, setOpenModalFirmwareUpdate] = useState(false); const [openModalFirmwareUpdate, setOpenModalFirmwareUpdate] = useState(false);
const [openModalResultFirmwareUpdate, setOpenModalResultFirmwareUpdate] = const [openModalResultFirmwareUpdate, setOpenModalResultFirmwareUpdate] =
useState(false); 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( const [selectedVersion, setSelectedVersion] = useState(
props.batteryData.FwVersion.value props.batteryData.FwVersion.value
@ -136,6 +140,100 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
setOpenModalFirmwareUpdate(false); 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 ( return (
<> <>
{openModalResultFirmwareUpdate && ( {openModalResultFirmwareUpdate && (
@ -224,7 +322,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
</Typography> </Typography>
<Typography variant="body1" gutterBottom> <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> </Typography>
<div <div
@ -264,6 +362,174 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
</Modal> </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 container>
<Grid item xs={6} md={6}> <Grid item xs={6} md={6}>
<IconButton <IconButton
@ -308,6 +574,18 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
> >
Update Firmware Update Firmware
</Button> </Button>
<Button
variant="contained"
onClick={handleDownloadBmsLog}
sx={{
marginLeft: '20px',
backgroundColor: '#ffc04d',
color: '#000000',
'&:hover': { bgcolor: '#f7b34d' },
}}
>
Download Battery Log
</Button>
</Grid> </Grid>
</Grid> </Grid>
<Grid container> <Grid container>