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 [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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue