move restart to system

interface/src/framework/Settings.tsx

@@ -1,5 +1,4 @@
 import { type FC, useState } from 'react';
-import { toast } from 'react-toastify';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -7,7 +6,6 @@ import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import ImportExportIcon from '@mui/icons-material/ImportExport';
 import LockIcon from '@mui/icons-material/Lock';
 import MemoryIcon from '@mui/icons-material/Memory';
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
@@ -19,6 +17,7 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  Divider,
   List
 } from '@mui/material';
 
@@ -26,118 +25,25 @@ import * as SystemApi from 'api/system';
 
 import { dialogStyle } from 'CustomTheme';
 import { useRequest } from 'alova';
-import { ButtonRow, SectionContent, useLayoutTitle } from 'components';
+import { SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
 import { useI18nContext } from 'i18n/i18n-react';
 
-import RestartMonitor from './system/RestartMonitor';
-
 const Settings: FC = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.SETTINGS(0));
 
-  const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
   const [confirmFactoryReset, setConfirmFactoryReset] = useState<boolean>(false);
-  const [processing, setProcessing] = useState<boolean>(false);
-  const [restarting, setRestarting] = useState<boolean>();
-
-  const { send: restartCommand } = useRequest(SystemApi.restart(), {
-    immediate: false
-  });
 
   const { send: factoryResetCommand } = useRequest(SystemApi.factoryReset(), {
     immediate: false
   });
 
-  const { send: partitionCommand } = useRequest(SystemApi.partition(), {
-    immediate: false
-  });
-
-  const restart = async () => {
-    setProcessing(true);
-    await restartCommand()
-      .then(() => {
-        setRestarting(true);
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      })
-      .finally(() => {
-        setConfirmRestart(false);
-        setProcessing(false);
-      });
-  };
-
   const factoryReset = async () => {
-    setProcessing(true);
-    await factoryResetCommand()
-      .then(() => {
-        setRestarting(true);
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      })
-      .finally(() => {
+    await factoryResetCommand();
     setConfirmFactoryReset(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 renderRestartDialog = () => (
-    <Dialog
-      sx={dialogStyle}
-      open={confirmRestart}
-      onClose={() => setConfirmRestart(false)}
-    >
-      <DialogTitle>{LL.RESTART()}</DialogTitle>
-      <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={() => setConfirmRestart(false)}
-          disabled={processing}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<PowerSettingsNewIcon />}
-          variant="outlined"
-          onClick={restart}
-          disabled={processing}
-          color="primary"
-        >
-          {LL.RESTART()}
-        </Button>
-        <Button
-          startIcon={<PowerSettingsNewIcon />}
-          variant="outlined"
-          onClick={partition}
-          disabled={processing}
-          color="primary"
-        >
-          EMS-ESP Loader
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-
   const renderFactoryResetDialog = () => (
     <Dialog
       sx={dialogStyle}
@@ -151,7 +57,6 @@ const Settings: FC = () => {
           startIcon={<CancelIcon />}
           variant="outlined"
           onClick={() => setConfirmFactoryReset(false)}
-          disabled={processing}
           color="secondary"
         >
           {LL.CANCEL()}
@@ -160,7 +65,6 @@ const Settings: FC = () => {
           startIcon={<SettingsBackupRestoreIcon />}
           variant="outlined"
           onClick={factoryReset}
-          disabled={processing}
           color="error"
         >
           {LL.FACTORY_RESET()}
@@ -219,6 +123,8 @@ const Settings: FC = () => {
           to="security"
         />
 
+        <Divider />
+
         <ListMenuItem
           icon={MemoryIcon}
           bgcolor="#b1395f"
@@ -236,24 +142,9 @@ const Settings: FC = () => {
         />
       </List>
 
-      {renderRestartDialog()}
       {renderFactoryResetDialog()}
 
-      <Box mt={1} display="flex" flexWrap="wrap">
-        <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
-          <ButtonRow>
-            <Button
-              startIcon={<PowerSettingsNewIcon />}
-              variant="outlined"
-              color="primary"
-              onClick={() => setConfirmRestart(true)}
-            >
-              {LL.RESTART()}
-            </Button>
-          </ButtonRow>
-        </Box>
-        <Box flexWrap="nowrap" whiteSpace="nowrap">
-          <ButtonRow>
+      <Box mt={2} display="flex" flexWrap="wrap">
         <Button
           startIcon={<SettingsBackupRestoreIcon />}
           variant="outlined"
@@ -262,15 +153,11 @@ const Settings: FC = () => {
         >
           {LL.FACTORY_RESET()}
         </Button>
-          </ButtonRow>
-        </Box>
       </Box>
     </>
   );
 
-  return (
-    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
-  );
+  return <SectionContent>{content()}</SectionContent>;
 };
 
 export default Settings;

interface/src/framework/system/SystemStatus.tsx

@@ -8,6 +8,7 @@ import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
 import MemoryIcon from '@mui/icons-material/Memory';
 import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import TimerIcon from '@mui/icons-material/Timer';
@@ -39,6 +40,8 @@ import { useI18nContext } from 'i18n/i18n-react';
 import { busConnectionStatus } from 'project/types';
 import { NTPSyncStatus } from 'types';
 
+import RestartMonitor from './RestartMonitor';
+
 const SystemStatus: FC = () => {
   const { LL } = useI18nContext();
 
@@ -46,7 +49,18 @@ const SystemStatus: FC = () => {
 
   const { me } = useContext(AuthenticatedContext);
 
+  const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
   const [confirmScan, setConfirmScan] = 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 {
     data: data,
@@ -180,6 +194,76 @@ const SystemStatus: FC = () => {
     </Dialog>
   );
 
+  const restart = async () => {
+    setProcessing(true);
+    await restartCommand()
+      .then(() => {
+        setRestarting(true);
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      })
+      .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 renderRestartDialog = () => (
+    <Dialog
+      sx={dialogStyle}
+      open={confirmRestart}
+      onClose={() => setConfirmRestart(false)}
+    >
+      <DialogTitle>{LL.RESTART()}</DialogTitle>
+      <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setConfirmRestart(false)}
+          disabled={processing}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<PowerSettingsNewIcon />}
+          variant="outlined"
+          onClick={restart}
+          disabled={processing}
+          color="primary"
+        >
+          {LL.RESTART()}
+        </Button>
+        <Button
+          startIcon={<PowerSettingsNewIcon />}
+          variant="outlined"
+          onClick={partition}
+          disabled={processing}
+          color="primary"
+        >
+          EMS-ESP Loader
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
   const content = () => {
     if (!data) {
       return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
@@ -198,13 +282,28 @@ const SystemStatus: FC = () => {
           </ListItem>
           <Divider variant="inset" component="li" />
 
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={TimerIcon}
-            bgcolor="#c5572c"
-            label={LL.UPTIME()}
-            text={formatDurationSec(data.uptime)}
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#c5572c', color: 'white' }}>
+                <TimerIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.UPTIME()}
+              secondary={formatDurationSec(data.uptime)}
             />
+            {me.admin && (
+              <Button
+                startIcon={<PowerSettingsNewIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={() => setConfirmRestart(true)}
+              >
+                {LL.RESTART()}
+              </Button>
+            )}
+          </ListItem>
+
           <Divider variant="inset" component="li" />
 
           <ListItem>
@@ -288,6 +387,7 @@ const SystemStatus: FC = () => {
         </List>
 
         {renderScanDialog()}
+        {renderRestartDialog()}
 
         <Box mt={2} display="flex" flexWrap="wrap">
           <Button
@@ -303,7 +403,9 @@ const SystemStatus: FC = () => {
     );
   };
 
-  return <SectionContent>{content()}</SectionContent>;
+  return (
+    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
+  );
 };
 
 export default SystemStatus;