andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-10 01:39:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

introduce system status in WebUI for easier monitoring of tasks

Browse Source
This commit is contained in:
proddy
2025-01-19 18:18:04 +01:00
parent 6e29de4463
commit 006eae5862
21 changed files with 264 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
interface/src/app/status/RestartMonitor.tsx
View File

@@ -1,85 +0,0 @@
import { useState } from 'react';
import {
Box,
CircularProgress,
Dialog,
DialogContent,
Typography
} from '@mui/material';
import { readSystemStatus } from 'api/system';
import { dialogStyle } from 'CustomTheme';
import { useRequest } from 'alova/client';
import MessageBox from 'components/MessageBox';
import { useI18nContext } from 'i18n/i18n-react';
import { useInterval } from 'utils';
const RestartMonitor = () => {
const [errorMessage, setErrorMessage] = useState<string>();
const { LL } = useI18nContext();
let count = 0;
const { data, send } = useRequest(readSystemStatus, {
force: true,
initialData: { status: 'Getting ready...' },
async middleware(_, next) {
if (count++ >= 1) {
// skip first request (1 second) to allow AsyncWS to send its response
await next();
}
}
})
.onSuccess((event) => {
if (event.data.status === 'ready' || event.data.status === undefined) {
document.location.href = '/';
}
})
.onError((error) => {
setErrorMessage(error.message);
});
useInterval(() => {
void send();
}, 1000); // check every second
return (
<Dialog fullWidth={true} sx={dialogStyle} open={true}>
<DialogContent dividers>
<Box m={0} py={0} display="flex" alignItems="center" flexDirection="column">
<Typography
color="secondary"
variant="h6"
fontWeight={400}
textAlign="center"
>
{data?.status === 'uploading'
? LL.WAIT_FIRMWARE()
: data?.status === 'restarting'
? LL.APPLICATION_RESTARTING()
: data?.status === 'ready'
? LL.RESTARTING_PRE()
: LL.RESTARTING_POST()}
&hellip;
</Typography>
<Typography mt={2} variant="h6" fontWeight={400} textAlign="center">
{LL.PLEASE_WAIT()}
</Typography>
{errorMessage ? (
<MessageBox my={2} level="error" message={errorMessage} />
) : (
<Box py={2}>
<CircularProgress size={32} />
</Box>
)}
</Box>
</DialogContent>
</Dialog>
);
};
export default RestartMonitor;

4
interface/src/app/status/Status.tsx
View File

@@ -40,7 +40,7 @@ import { NTPSyncStatus, NetworkConnectionStatus } from 'types';
import { useInterval } from 'utils';
import { formatDateTime } from 'utils/time';
import RestartMonitor from './RestartMonitor';
import SystemMonitor from './SystemMonitor';
const SystemStatus = () => {
const { LL } = useI18nContext();
@@ -349,7 +349,7 @@ const SystemStatus = () => {
};
return (
<SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
<SectionContent>{restarting ? <SystemMonitor /> : content()}</SectionContent>
);
};

122
interface/src/app/status/SystemMonitor.tsx Normal file
View File

@@ -0,0 +1,122 @@
import { useState } from 'react';
import CancelIcon from '@mui/icons-material/Cancel';
import {
Box,
Button,
CircularProgress,
Dialog,
DialogContent,
Typography
} from '@mui/material';
import { callAction } from 'api/app';
import { readSystemStatus } from 'api/system';
import { dialogStyle } from 'CustomTheme';
import { useRequest } from 'alova/client';
import MessageBox from 'components/MessageBox';
import { useI18nContext } from 'i18n/i18n-react';
import { SystemStatusCodes } from 'types';
import { useInterval } from 'utils';
const SystemMonitor = () => {
const [errorMessage, setErrorMessage] = useState<string>();
const { LL } = useI18nContext();
let count = 0;
const { send: setSystemStatus } = useRequest(
(status: string) => callAction({ action: 'systemStatus', param: status }),
{
immediate: false
}
);
const { data, send } = useRequest(readSystemStatus, {
force: true,
async middleware(_, next) {
if (count++ >= 1) {
// skip first request (1 second) to allow AsyncWS to send its response
await next();
}
}
})
.onSuccess((event) => {
if (
event.data.status === SystemStatusCodes.SYSTEM_STATUS_NORMAL ||
event.data.status === undefined
) {
document.location.href = '/';
} else if (
event.data.status === SystemStatusCodes.SYSTEM_STATUS_ERROR_UPLOAD
) {
setErrorMessage('Please check system logs for possible causes');
}
})
.onError((error) => {
setErrorMessage(error.message);
});
useInterval(() => {
void send();
}, 1000); // check every second
const onCancel = () => {
setErrorMessage(undefined);
setSystemStatus(SystemStatusCodes.SYSTEM_STATUS_NORMAL as unknown as string);
document.location.href = '/';
};
return (
<Dialog fullWidth={true} sx={dialogStyle} open={true}>
<DialogContent dividers>
<Box m={0} py={0} display="flex" alignItems="center" flexDirection="column">
<Typography
color="secondary"
variant="h6"
fontWeight={400}
textAlign="center"
>
{data?.status === SystemStatusCodes.SYSTEM_STATUS_UPLOADING
? LL.WAIT_FIRMWARE()
: data?.status === SystemStatusCodes.SYSTEM_STATUS_RESTARTING
? LL.APPLICATION_RESTARTING()
: data?.status === SystemStatusCodes.SYSTEM_STATUS_NORMAL
? LL.RESTARTING_PRE()
: data?.status === SystemStatusCodes.SYSTEM_STATUS_ERROR_UPLOAD
? 'Upload Failed'
: LL.RESTARTING_POST()}
</Typography>
{errorMessage ? (
<MessageBox my={2} level="error" message={errorMessage}>
<Button
size="small"
sx={{ ml: 2 }}
startIcon={<CancelIcon />}
variant="contained"
color="error"
onClick={onCancel}
>
{LL.RESET(0)}
</Button>
</MessageBox>
) : (
<>
<Typography mt={2} variant="h6" fontWeight={400} textAlign="center">
{LL.PLEASE_WAIT()}&hellip;
</Typography>
<Box py={2}>
<CircularProgress size={32} />
</Box>
</>
)}
</Box>
</DialogContent>
</Dialog>
);
};
export default SystemMonitor;