tidy up restart

interface/src/app/settings/DownloadUpload.tsx

@@ -4,7 +4,6 @@ import { toast } from 'react-toastify';
 import CancelIcon from '@mui/icons-material/Cancel';
 import DownloadIcon from '@mui/icons-material/GetApp';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import WarningIcon from '@mui/icons-material/Warning';
 import {
   Box,
@@ -25,7 +24,13 @@ import {
   getSchedule,
   getSettings
 } from 'api/app';
-import { checkUpgrade, getDevVersion, getStableVersion } from 'api/system';
+import {
+  checkUpgrade,
+  getDevVersion,
+  getStableVersion,
+  restart,
+  uploadURL
+} from 'api/system';
 
 import { dialogStyle } from 'CustomTheme';
 import { useRequest } from 'alova/client';
@@ -33,7 +38,6 @@ import type { APIcall } from 'app/main/types';
 import RestartMonitor from 'app/status/RestartMonitor';
 import {
   FormLoader,
-  MessageBox,
   SectionContent,
   SingleUpload,
   useLayoutTitle
@@ -44,7 +48,6 @@ const DownloadUpload = () => {
   const { LL } = useI18nContext();
 
   const [restarting, setRestarting] = useState<boolean>(false);
-  const [restartNeeded, setRestartNeeded] = useState<boolean>(false);
   const [openDialog, setOpenDialog] = useState<boolean>(false);
   const [useDev, setUseDev] = useState<boolean>(false);
   const [upgradeAvailable, setUpgradeAvailable] = useState<boolean>(false);
@@ -89,24 +92,21 @@ const DownloadUpload = () => {
   } = useRequest(SystemApi.readHardwareStatus);
 
   const { send: sendUploadURL } = useRequest(
-    (data: { url: string }) => SystemApi.uploadURL(data),
+    (data: { url: string }) => uploadURL(data),
     {
       immediate: false
     }
   );
 
-  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+  const { send: restartCommand } = useRequest(restart(), {
     immediate: false
   });
 
-  const restart = async () => {
-    await restartCommand()
-      .then(() => {
-        setRestarting(true);
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      });
+  const callRestart = async () => {
+    setRestarting(true);
+    await restartCommand().catch((error: Error) => {
+      toast.error(error.message);
+    });
   };
 
   const { send: sendCheckUpgrade } = useRequest(checkUpgrade, {
@@ -387,10 +387,11 @@ const DownloadUpload = () => {
               </Button>
             )}
           </Typography>
-          {upgradeAvailable ? (
-            <Typography mt={2} color="secondary">
-              <InfoOutlinedIcon color="secondary" sx={{ verticalAlign: 'middle' }} />
-              &nbsp;&nbsp;{LL.UPGRADE_AVAILABLE()}
+          <Typography mt={2} color="secondary">
+            <InfoOutlinedIcon color="secondary" sx={{ verticalAlign: 'middle' }} />
+            &nbsp;&nbsp;
+            {upgradeAvailable ? LL.UPGRADE_AVAILABLE() : LL.LATEST_VERSION()}
+            {upgradeAvailable && (
               <Button
                 sx={{ ml: 2 }}
                 size="small"
@@ -400,10 +401,9 @@ const DownloadUpload = () => {
               >
                 {LL.INSTALL('v' + isDev ? latestDevVersion : latestVersion)}
               </Button>
-            </Typography>
-          ) : (
-            <Typography mt={2}>{LL.LATEST_VERSION()}</Typography>
-          )}
+            )}
+          </Typography>
+
           {renderUploadDialog()}
         </Box>
 
@@ -411,24 +411,11 @@ const DownloadUpload = () => {
           {LL.UPLOAD()}
         </Typography>
 
-        <Box mb={2} color="warning.main">
+        <Box color="warning.main" sx={{ pb: 2 }}>
           <Typography variant="body2">{LL.UPLOAD_TEXT()}</Typography>
         </Box>
 
-        {restartNeeded ? (
-          <MessageBox mt={2} level="warning" message={LL.RESTART_TEXT(0)}>
-            <Button
-              startIcon={<PowerSettingsNewIcon />}
-              variant="contained"
-              color="error"
-              onClick={restart}
-            >
-              {LL.RESTART()}
-            </Button>
-          </MessageBox>
-        ) : (
-          <SingleUpload setRestartNeeded={setRestartNeeded} />
-        )}
+        <SingleUpload callRestart={callRestart} />
       </>
     );
   };

interface/src/app/status/RestartMonitor.tsx

@@ -1,13 +1,13 @@
 import { type FC, useEffect, useRef, useState } from 'react';
 
-import * as SystemApi from 'api/system';
+import { readHardwareStatus } from 'api/system';
 
 import { useRequest } from 'alova/client';
 import { FormLoader } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
 const RESTART_TIMEOUT = 2 * 60 * 1000; // 2 minutes
-const POLL_INTERVAL = 1000; // every 1 second
+const POLL_INTERVAL = 2000; // every 2 seconds
 
 export interface RestartMonitorProps {
   message?: string;
@@ -16,10 +16,12 @@ export interface RestartMonitorProps {
 const RestartMonitor: FC<RestartMonitorProps> = ({ message }) => {
   const [failed, setFailed] = useState<boolean>(false);
   const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
+
   const { LL } = useI18nContext();
+
   const timeoutAt = useRef(new Date().getTime() + RESTART_TIMEOUT);
 
-  const { send } = useRequest(SystemApi.readSystemStatus);
+  const { send } = useRequest(readHardwareStatus, { immediate: false });
 
   const poll = useRef(async () => {
     try {
@@ -35,7 +37,7 @@ const RestartMonitor: FC<RestartMonitorProps> = ({ message }) => {
   });
 
   useEffect(() => {
-    void poll.current();
+    setTimeoutId(setTimeout(poll.current, POLL_INTERVAL));
   }, []);
 
   useEffect(() => () => timeoutId && clearTimeout(timeoutId), [timeoutId]);

interface/src/app/status/Status.tsx

@@ -52,24 +52,12 @@ const SystemStatus = () => {
   const { me } = useContext(AuthenticatedContext);
 
   const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
-  const [processing, setProcessing] = useState<boolean>(false);
   const [restarting, setRestarting] = useState<boolean>();
 
   const { send: restartCommand } = useRequest(SystemApi.restart(), {
     immediate: false
   });
 
-  const { send: partitionCommand } = useRequest(SystemApi.partition(), {
-    immediate: false
-  });
-
-  const { send: factoryPartitionCommand } = useRequest(
-    SystemApi.factoryPartition(),
-    {
-      immediate: false
-    }
-  );
-
   const {
     data: data,
     send: loadData,
@@ -208,7 +196,6 @@ const SystemStatus = () => {
     value ? theme.palette.success.main : theme.palette.info.main;
 
   const restart = async () => {
-    setProcessing(true);
     await restartCommand()
       .then(() => {
         setRestarting(true);
@@ -218,37 +205,6 @@ const SystemStatus = () => {
       })
       .finally(() => {
         setConfirmRestart(false);
-        setProcessing(false);
-      });
-  };
-
-  const partition = async () => {
-    setProcessing(true);
-    await partitionCommand()
-      .then(() => {
-        setRestarting(true);
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      })
-      .finally(() => {
-        setConfirmRestart(false);
-        setProcessing(false);
-      });
-  };
-
-  const factoryPartition = async () => {
-    setProcessing(true);
-    await factoryPartitionCommand()
-      .then(() => {
-        setRestarting(true);
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      })
-      .finally(() => {
-        setConfirmRestart(false);
-        setProcessing(false);
       });
   };
 
@@ -265,38 +221,14 @@ const SystemStatus = () => {
           startIcon={<CancelIcon />}
           variant="outlined"
           onClick={() => setConfirmRestart(false)}
-          disabled={processing}
           color="secondary"
         >
           {LL.CANCEL()}
         </Button>
-        {data.has_loader && (
-          <Button
-            startIcon={<PowerSettingsNewIcon />}
-            variant="outlined"
-            onClick={factoryPartition}
-            disabled={processing}
-            color="warning"
-          >
-            EMS-ESP Boot
-          </Button>
-        )}
-        {data.has_partition && (
-          <Button
-            startIcon={<PowerSettingsNewIcon />}
-            variant="outlined"
-            onClick={partition}
-            disabled={processing}
-            color="warning"
-          >
-            Partition
-          </Button>
-        )}
         <Button
           startIcon={<PowerSettingsNewIcon />}
           variant="outlined"
           onClick={restart}
-          disabled={processing}
           color="error"
         >
           {LL.RESTART()}

interface/src/components/upload/DragNdrop.tsx

@@ -8,7 +8,7 @@ import { Box, Button } from '@mui/material';
 
 import { useI18nContext } from 'i18n/i18n-react';
 
-import './drag-drop.css';
+import './dragNdrop.css';
 
 const DragNdrop = ({ onFileSelected }) => {
   const [file, setFile] = useState<File>();

interface/src/components/upload/SingleUpload.tsx

@@ -32,7 +32,7 @@ function LinearProgressWithLabel(props: LinearProgressProps & { value: number })
   );
 }
 
-const SingleUpload = ({ setRestartNeeded }) => {
+const SingleUpload = ({ callRestart }) => {
   const [md5, setMd5] = useState<string>();
   const [file, setFile] = useState<File>();
   const { LL } = useI18nContext();
@@ -44,19 +44,18 @@ const SingleUpload = ({ setRestartNeeded }) => {
     abort: cancelUpload
   } = useRequest(SystemApi.uploadFile, {
     immediate: false
-  }).onSuccess(({ data }) => {
+  }).onComplete(({ data }) => {
     if (data) {
       setMd5(data.md5 as string);
       toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
       setFile(undefined);
     } else {
-      setRestartNeeded(true);
+      callRestart();
     }
   });
 
   useEffect(async () => {
     if (file) {
-      console.log('going to upload file ', file.name);
       await sendUpload(file).catch((error: Error) => {
         if (error.message === 'The user aborted a request') {
           toast.warning(LL.UPLOAD() + ' ' + LL.ABORTED());
@@ -73,7 +72,7 @@ const SingleUpload = ({ setRestartNeeded }) => {
     <>
       {isUploading ? (
         <>
-          <Box width="100%" p={2}>
+          <Box width="100%" pl={2} pr={2}>
             <LinearProgressWithLabel
               value={
                 progress.total === 0 || progress.loaded === 0
@@ -86,7 +85,7 @@ const SingleUpload = ({ setRestartNeeded }) => {
           </Box>
 
           <Button
-            sx={{ ml: 2 }}
+            sx={{ ml: 2, mt: 2 }}
             startIcon={<CancelIcon />}
             variant="outlined"
             color="error"