move system info to download page, add a restart warning on upload

interface/src/framework/system/UploadFileForm.tsx

@@ -1,10 +1,13 @@
+import CancelIcon from '@mui/icons-material/Cancel';
 import DownloadIcon from '@mui/icons-material/GetApp';
-import { Typography, Button, Box } from '@mui/material';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import { Typography, Button, Box, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
 import { useRequest } from 'alova';
 import { useState, type FC } from 'react';
 import { toast } from 'react-toastify';
 import RestartMonitor from './RestartMonitor';
 
+import { dialogStyle } from 'CustomTheme';
 import * as SystemApi from 'api/system';
 import { SectionContent, SingleUpload } from 'components';
 
@@ -13,7 +16,8 @@ import * as EMSESP from 'project/api';
 
 const UploadFileForm: FC = () => {
   const { LL } = useI18nContext();
-  const [restarting, setRestarting] = useState<boolean>(false);
+  const [restarting, setRestarting] = useState<boolean>();
+  const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
   const [md5, setMd5] = useState<string>();
 
   const { send: getSettings, onSuccess: onSuccessGetSettings } = useRequest(EMSESP.getSettings(), {
@@ -28,6 +32,13 @@ const UploadFileForm: FC = () => {
   const { send: getSchedule, onSuccess: onSuccessGetSchedule } = useRequest(EMSESP.getSchedule(), {
     immediate: false
   });
+  const { send: getInfo, onSuccess: onSuccessGetInfo } = useRequest((data) => EMSESP.API(data), {
+    immediate: false
+  });
+
+  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+    immediate: false
+  });
 
   const {
     loading: isUploading,
@@ -45,7 +56,7 @@ const UploadFileForm: FC = () => {
       setMd5(data.md5);
       toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
     } else {
-      setRestarting(true);
+      setConfirmRestart(true);
     }
   });
 
@@ -61,6 +72,19 @@ const UploadFileForm: FC = () => {
     });
   };
 
+  const restart = async () => {
+    await restartCommand()
+      .then(() => {
+        setRestarting(true);
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      })
+      .finally(() => {
+        setConfirmRestart(false);
+      });
+  };
+
   const saveFile = (json: any, endpoint: string) => {
     const anchor = document.createElement('a');
     anchor.href = URL.createObjectURL(
@@ -86,6 +110,9 @@ const UploadFileForm: FC = () => {
   onSuccessGetSchedule((event) => {
     saveFile(event.data, 'schedule');
   });
+  onSuccessGetInfo((event) => {
+    saveFile(event.data, 'info');
+  });
 
   const downloadSettings = async () => {
     await getSettings().catch((error) => {
@@ -111,6 +138,32 @@ const UploadFileForm: FC = () => {
     });
   };
 
+  const downloadInfo = async () => {
+    await getInfo({ device: 'system', entity: 'info', id: 0 }).catch((error) => {
+      toast.error(error.message);
+    });
+  };
+
+  const renderRestartDialog = () => (
+    <Dialog sx={dialogStyle} open={confirmRestart} onClose={() => setConfirmRestart(false)}>
+      <DialogTitle>{LL.UPLOAD() + ' ' + LL.SUCCESSFUL()}</DialogTitle>
+      <DialogContent dividers>{LL.RESTART_TEXT()}</DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setConfirmRestart(false)}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button startIcon={<PowerSettingsNewIcon />} variant="outlined" onClick={restart} color="primary">
+          {LL.RESTART()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
   const content = () => (
     <>
       <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
@@ -140,7 +193,7 @@ const UploadFileForm: FC = () => {
           </Button>
           <Box color="warning.main">
             <Typography mt={2} mb={1} variant="body2">
-              {LL.DOWNLOAD_CUSTOMIZATION_TEXT()}{' '}
+              {LL.DOWNLOAD_CUSTOMIZATION_TEXT()}
             </Typography>
           </Box>
           <Button startIcon={<DownloadIcon />} variant="outlined" color="primary" onClick={downloadCustomizations}>
@@ -157,14 +210,23 @@ const UploadFileForm: FC = () => {
           </Button>
           <Box color="warning.main">
             <Typography mt={2} mb={1} variant="body2">
-              {LL.DOWNLOAD_SCHEDULE_TEXT()}{' '}
+              {LL.DOWNLOAD_SCHEDULE_TEXT()}
             </Typography>
           </Box>
           <Button startIcon={<DownloadIcon />} variant="outlined" color="primary" onClick={downloadSchedule}>
             {LL.SCHEDULE(0)}
           </Button>
+          <Box color="warning.main">
+            <Typography mt={2} mb={1} variant="body2">
+              {LL.DOWNLOAD(0)}&nbsp;{LL.SUPPORT_INFORMATION()}
+            </Typography>
+          </Box>
+          <Button startIcon={<DownloadIcon />} variant="outlined" color="primary" onClick={downloadInfo}>
+            {LL.SUPPORT_INFORMATION()}
+          </Button>
         </>
       )}
+      {renderRestartDialog()}
     </>
   );
   return (