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

2025-12-06 07:49:52 +03:00 · 2023-10-18 23:15:42 +02:00
parent 18be921c1b
commit eb274a94c3
13 changed files with 77 additions and 56 deletions
--- a/interface/src/framework/system/UploadFileForm.tsx
+++ b/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 (
--- a/interface/src/i18n/de/index.ts
+++ b/interface/src/i18n/de/index.ts
@@ -171,7 +171,6 @@ const de: Translation = {
  HELP_INFORMATION_3: 'Um neue Funktionen anzufragen oder Fehler zu melden, eröffnen Sie ein Issue auf Github',
  HELP_INFORMATION_4: 'Bitte laden Sie die System-Details und hängen Sie sie an das Support-Issue an. ',
  HELP_INFORMATION_5: 'EMS-ESP ist ein freies Open-Source Projekt. Bitte unterstützen Sie die zukünftige Entwicklung mit einem "Star" auf Github!',
-  SUPPORT_INFO: 'Support Info',
  UPLOAD: 'Hochladen',
  DOWNLOAD: '{{H|h|h}}erunterladen',
  ABORTED: 'abgebrochen',
--- a/interface/src/i18n/en/index.ts
+++ b/interface/src/i18n/en/index.ts
@@ -171,7 +171,6 @@ const en: Translation = {
  HELP_INFORMATION_3: 'To request a feature or report a bug',
  HELP_INFORMATION_4: 'remember to download and attach your system information for a faster response when reporting an issue',
  HELP_INFORMATION_5: 'EMS-ESP is a free and open-source project. Please support its future development by giving it a star on Github!',
-  SUPPORT_INFO: 'Support Info',
  UPLOAD: 'Upload',
  DOWNLOAD: '{{D|d|d}}ownload',
  ABORTED: 'aborted',
--- a/interface/src/i18n/fr/index.ts
+++ b/interface/src/i18n/fr/index.ts
@@ -171,7 +171,6 @@ const fr: Translation = {
  HELP_INFORMATION_3: 'Pour demander une fonctionnalité ou signaler un problème',
  HELP_INFORMATION_4: 'n\'oubliez pas de télécharger et de joindre les informations relatives à votre système pour obtenir une réponse plus rapide lorsque vous signalez un problème',
  HELP_INFORMATION_5: 'EMS-ESP est un projet libre et open-source. Merci de soutenir son développement futur en lui donnant une étoile sur Github !',
-  SUPPORT_INFO: 'Information de support',
  UPLOAD: 'Upload',
  DOWNLOAD: '{{D|d|d}}ownload',
  ABORTED: 'annulé',
--- a/interface/src/i18n/it/index.ts
+++ b/interface/src/i18n/it/index.ts
@@ -173,7 +173,6 @@ const it: Translation = {
  HELP_INFORMATION_3: 'Per richiedere una funzionalità o segnalare un errore',
  HELP_INFORMATION_4: 'ricordati di scaricare e allegare le informazioni del tuo sistema per una risposta più rapida quando segnali un problema',
  HELP_INFORMATION_5: 'EMS-ESP è un progetto gratuito e open-source. Supporta il suo sviluppo futuro assegnandogli una stella su Github!',
-  SUPPORT_INFO: 'Info Supporto',
  UPLOAD: 'Carica',
  DOWNLOAD: 'Scarica',
  ABORTED: 'Annullato',
--- a/interface/src/i18n/nl/index.ts
+++ b/interface/src/i18n/nl/index.ts
@@ -171,7 +171,6 @@ const nl: Translation = {
  HELP_INFORMATION_3: 'Om een nieuwe feature te vragen of een bug te rapporteren',
  HELP_INFORMATION_4: 'zorg dat je ook je systeem details zijn toevoeged voor een sneller antwoord',
  HELP_INFORMATION_5: 'EMS-ESP is een gratis en open source project. Steun ons met een Star op Github!',
-  SUPPORT_INFO: 'Support Info',
  UPLOAD: 'Upload',
  DOWNLOAD: '{{D|d|d}}ownload',
  ABORTED: 'afgebroken',
--- a/interface/src/i18n/no/index.ts
+++ b/interface/src/i18n/no/index.ts
@@ -171,7 +171,6 @@ const no: Translation = {
  HELP_INFORMATION_3: 'For å be om en ny funksjon eller melde feil',
  HELP_INFORMATION_4: 'husk å laste ned og legg ved din systeminformasjon for en raskere respons når du rapporterer et problem',
  HELP_INFORMATION_5: 'EMS-ESP er gratis og åpen kildekode. Bidra til utviklingen ved å gi oss en stjerne på GitHub!',
-  SUPPORT_INFO: 'Supportinfo',
  UPLOAD: 'Opplasning',
  DOWNLOAD: '{{N|n|n}}edlasting',
  ABORTED: 'avbrutt',
--- a/interface/src/i18n/pl/index.ts
+++ b/interface/src/i18n/pl/index.ts
@@ -171,7 +171,6 @@ const pl: BaseTranslation = {
  HELP_INFORMATION_3: 'Aby zaproponować nową funkcjonalność lub zgłosić problem',
  HELP_INFORMATION_4: 'Zgłaszając problem, nie zapomnij dołączyć informacji o swoim systemie!',
  HELP_INFORMATION_5: 'EMS-ESP jest darmowym projektem typu open-source. Aby go wesprzeć, rozważ przyznanie nam gwiazdki na Github!',
-  SUPPORT_INFO: 'Pobierz informacje',
  UPLOAD: 'Wysyłanie',
  DOWNLOAD: '{{P|p||P}}obier{{anie|z||z}}',
  ABORTED: 'zostało przerwane!',
--- a/interface/src/i18n/sv/index.ts
+++ b/interface/src/i18n/sv/index.ts
@@ -171,7 +171,6 @@ const sv: Translation = {
  HELP_INFORMATION_3: 'Önska en ny funktion eller rapportera en bugg',
  HELP_INFORMATION_4: 'Bifoga din systeminformation för snabbare hantering när du rapporterar ett problem',
  HELP_INFORMATION_5: 'EMS-ESP är gratis och är öppen källkod. Bidra till utvecklingen genom att ge oss en stjärna på GitHub!',
-  SUPPORT_INFO: 'Supportinfo',
  UPLOAD: 'Uppladdning',
  DOWNLOAD: '{{N|n|n}}edladdning',
  ABORTED: 'Avbruten',
--- a/interface/src/i18n/tr/index.ts
+++ b/interface/src/i18n/tr/index.ts
@@ -171,7 +171,6 @@ const tr: Translation = {
  HELP_INFORMATION_3: 'Yeni bir özellik talep etmek yada hata bildirmek için',
  HELP_INFORMATION_4: 'Bir sorun bildirirken daha hızlı bir dönüş için sistem bilginizi indirip eklemeyi unutmayın',
  HELP_INFORMATION_5: 'EMS-ESP ücretsiz ve açık kaynaklı bir projedir. Lütfen geliştirmeyi desteklemek için Githubda projeye yıldız verin!',
-  SUPPORT_INFO: 'Destek Bilgisi',
  UPLOAD: 'Yükleme',
  DOWNLOAD: '{{İ|i|i}}İndirme',
  ABORTED: 'iptal edildi',
--- a/interface/src/project/DashboardDevices.tsx
+++ b/interface/src/project/DashboardDevices.tsx
@@ -53,9 +53,9 @@ import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';

 const DashboardDevices: FC = () => {
-  const [size, setSize] = useState([0, 0]);
  const { me } = useContext(AuthenticatedContext);
  const { LL } = useI18nContext();
+  const [size, setSize] = useState([0, 0]);
  const [selectedDeviceValue, setSelectedDeviceValue] = useState<DeviceValue>();
  const [onlyFav, setOnlyFav] = useState(false);
  const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState(false);
@@ -485,6 +485,7 @@ const DashboardDevices: FC = () => {
          bottom: 0,
          top: 128,
          zIndex: 'modal',
+          maxHeight: () => size[1] - 189,
          border: '1px solid #177ac9'
        }}
      >
--- a/interface/src/project/HelpInformation.tsx
+++ b/interface/src/project/HelpInformation.tsx
@@ -1,12 +1,8 @@
 import CommentIcon from '@mui/icons-material/CommentTwoTone';
 import EastIcon from '@mui/icons-material/East';
-import DownloadIcon from '@mui/icons-material/GetApp';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import MenuBookIcon from '@mui/icons-material/MenuBookTwoTone';
-import { Typography, Button, Box, List, ListItem, ListItemText, Link, ListItemAvatar } from '@mui/material';
-import { useRequest } from 'alova';
-import { toast } from 'react-toastify';
-import * as EMSESP from './api';
+import { Typography, Box, List, ListItem, ListItemText, Link, ListItemAvatar } from '@mui/material';
 import type { FC } from 'react';

 import { SectionContent } from 'components';
@@ -16,30 +12,7 @@ import { useI18nContext } from 'i18n/i18n-react';
 const HelpInformation: FC = () => {
  const { LL } = useI18nContext();

-  const { send: API, onSuccess: onSuccessAPI } = useRequest((data) => EMSESP.API(data), {
-    immediate: false
-  });
-
-  onSuccessAPI((event) => {
-    const a = document.createElement('a');
-    const filename = 'emsesp_info.txt';
-    a.href = URL.createObjectURL(
-      new Blob([JSON.stringify(event.data, null, 2)], {
-        type: 'text/plain'
-      })
-    );
-    a.setAttribute('download', filename);
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    toast.info(LL.DOWNLOAD_SUCCESSFUL());
-  });
-
-  const callAPI = async () => {
-    await API({ device: 'system', entity: 'info', id: 0 }).catch((error) => {
-      toast.error(error.message);
-    });
-  };
+  const uploadURL = window.location.origin + '/system/upload';

  return (
    <SectionContent title={LL.SUPPORT_INFORMATION()} titleGutter>
@@ -83,17 +56,11 @@ const HelpInformation: FC = () => {
              {LL.CLICK_HERE()}
            </Link>
            <br />
-            <i>({LL.HELP_INFORMATION_4()}</i>&nbsp;&nbsp;
-            <Button
-              startIcon={<DownloadIcon />}
-              size="small"
-              variant="outlined"
-              color="primary"
-              onClick={() => callAPI()}
-            >
-              {LL.SUPPORT_INFO()}
-            </Button>
-            &nbsp;)
+            <i>({LL.HELP_INFORMATION_4()}</i>&nbsp;
+            <Link href={uploadURL} color="primary">
+              {LL.UPLOAD()}
+            </Link>
+            )
          </ListItemText>
        </ListItem>
      </List>
--- a/mock-api/server.js
+++ b/mock-api/server.js
@@ -2162,7 +2162,7 @@ rest_server.post(UPLOAD_FILE_ENDPOINT, progress_middleware, upload.single('file'
    console.log(req.file);
    console.log('ext: ' + ext);

-    if (ext === 'bin') {
+    if (ext === 'bin' || ext === 'json') {
      return res.sendStatus(200);
    } else if (ext === 'md5') {
      return res.json({ md5: 'ef4304fc4d9025a58dcf25d71c882d2c' });