From bc17e2cd949cfb18f1b584ebb63a5400b07d9ea3 Mon Sep 17 00:00:00 2001 From: proddy Date: Tue, 22 Oct 2024 12:14:41 +0200 Subject: [PATCH] add version page, move off Status to Settings --- interface/src/AuthenticatedRouting.tsx | 2 + interface/src/app/settings/DownloadUpload.tsx | 226 +-------------- interface/src/app/settings/Settings.tsx | 28 +- interface/src/app/settings/Version.tsx | 261 ++++++++++++++++++ interface/src/app/status/Status.tsx | 53 +--- 5 files changed, 302 insertions(+), 268 deletions(-) create mode 100644 interface/src/app/settings/Version.tsx diff --git a/interface/src/AuthenticatedRouting.tsx b/interface/src/AuthenticatedRouting.tsx index adf39beb1..2171d81d8 100644 --- a/interface/src/AuthenticatedRouting.tsx +++ b/interface/src/AuthenticatedRouting.tsx @@ -15,6 +15,7 @@ import DownloadUpload from 'app/settings/DownloadUpload'; import MqttSettings from 'app/settings/MqttSettings'; import NTPSettings from 'app/settings/NTPSettings'; import Settings from 'app/settings/Settings'; +import Version from 'app/settings/Version'; import Network from 'app/settings/network/Network'; import Security from 'app/settings/security/Security'; import APStatus from 'app/status/APStatus'; @@ -51,6 +52,7 @@ const AuthenticatedRouting = () => { {me.admin && ( <> } /> + } /> } /> } /> } /> diff --git a/interface/src/app/settings/DownloadUpload.tsx b/interface/src/app/settings/DownloadUpload.tsx index a28e5a267..15a915f23 100644 --- a/interface/src/app/settings/DownloadUpload.tsx +++ b/interface/src/app/settings/DownloadUpload.tsx @@ -1,27 +1,13 @@ import { useState } from 'react'; 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 WarningIcon from '@mui/icons-material/Warning'; -import { - Box, - Button, - Dialog, - DialogActions, - DialogContent, - DialogTitle, - Link, - Typography -} from '@mui/material'; +import { Box, Button, Typography } from '@mui/material'; import Grid from '@mui/material/Grid2'; import * as SystemApi from 'api/system'; import { API, callAction } from 'api/app'; -import { getDevVersion, getStableVersion } from 'api/system'; -import { dialogStyle } from 'CustomTheme'; import { useRequest } from 'alova/client'; import type { APIcall } from 'app/main/types'; import RestartMonitor from 'app/status/RestartMonitor'; @@ -38,18 +24,6 @@ const DownloadUpload = () => { const { LL } = useI18nContext(); const [restarting, setRestarting] = useState(false); - const [openDialog, setOpenDialog] = useState(false); - const [useDev, setUseDev] = useState(false); - const [upgradeAvailable, setUpgradeAvailable] = useState(false); - - const { send: sendCheckUpgrade } = useRequest( - (version: string) => callAction({ action: 'checkUpgrade', param: version }), - { - immediate: false - } - ).onSuccess((event) => { - setUpgradeAvailable((event.data as { upgradeable: boolean }).upgradeable); - }); const { send: sendExportData } = useRequest( (type: string) => callAction({ action: 'export', param: type }), @@ -71,13 +45,6 @@ const DownloadUpload = () => { const { data, send: loadData, error } = useRequest(SystemApi.readSystemStatus); - const { send: sendUploadURL } = useRequest( - (url: string) => callAction({ action: 'uploadURL', param: url }), - { - immediate: false - } - ); - const doRestart = async () => { setRestarting(true); await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch( @@ -87,134 +54,13 @@ const DownloadUpload = () => { ); }; - // called immediately to get the latest version, on page load - const { data: latestVersion } = useRequest(getStableVersion, { - // uncomment next 2 lines for testing, uses https://github.com/emsesp/EMS-ESP32/releases/download/v3.6.5/EMS-ESP-3_6_5-ESP32-16MB+.bin - // immediate: false, - // initialData: '3.6.5' - }); - - // called immediately to get the latest version, on page load, then check for upgrade - const { data: latestDevVersion } = useRequest(getDevVersion, { - // uncomment next 2 lines for testing, uses https://github.com/emsesp/EMS-ESP32/releases/download/latest/EMS-ESP-3_7_0-dev_31-ESP32-16MB+.bin - // immediate: false, - // initialData: '3.7.0-dev.32' - }).onSuccess((event) => { - void sendCheckUpgrade(event.data); - }); - - const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/'; - const STABLE_RELNOTES_URL = - 'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md'; - - const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/'; - const DEV_RELNOTES_URL = - 'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md'; - - const getBinURL = (useDevVersion: boolean) => { - if (!latestVersion || !latestDevVersion) { - return ''; - } - const filename = - 'EMS-ESP-' + - (useDevVersion ? latestDevVersion : latestVersion).replaceAll('.', '_') + - '-' + - getPlatform() + - '.bin'; - return useDevVersion - ? DEV_URL + filename - : STABLE_URL + 'v' + latestVersion + '/' + filename; - }; - - const getPlatform = () => { - return ( - [data.esp_platform, data.flash_chip_size >= 16384 ? '16MB' : '4MB'].join('-') + - (data.psram ? '+' : '') - ); - }; - - const installFirmwareURL = async (url: string) => { - await sendUploadURL(url).catch((error: Error) => { - toast.error(error.message); - }); - setRestarting(true); - }; - useLayoutTitle(LL.DOWNLOAD_UPLOAD()); - const internet_live = - latestDevVersion !== undefined && latestVersion !== undefined; - - const renderUploadDialog = () => { - if (!internet_live) { - return null; - } - - return ( - setOpenDialog(false)} - > - - {LL.INSTALL('') + - ' ' + - (useDev ? LL.DEVELOPMENT() : LL.STABLE()) + - ' Firmware'} - - - - {LL.INSTALL_VERSION(useDev ? latestDevVersion : latestVersion)} - - - {LL.RELEASE_NOTES()} - -  |  - - {LL.DOWNLOAD(1)} - - - - - - - - ); - }; - - // useDevVersion = true to force using the dev version - const showFirmwareDialog = (useDevVersion: boolean) => { - if (useDevVersion || data.emsesp_version.includes('dev')) { - setUseDev(true); - } - setOpenDialog(true); - }; - const content = () => { if (!data) { return ; } - const isDev = data.emsesp_version.includes('dev'); - return ( <> @@ -232,7 +78,7 @@ const DownloadUpload = () => { color="primary" onClick={() => sendExportData('settings')} > - {LL.DOWNLOAD(1)} {LL.SETTINGS_OF(LL.APPLICATION())} + {LL.SETTINGS_OF(LL.APPLICATION())} @@ -273,68 +119,6 @@ const DownloadUpload = () => { - - - {LL.EMS_ESP_VER()} - - - - - {LL.VERSION() + ':'} {data.emsesp_version} - {data.build_flags && ( - -   ({data.build_flags}) - - )} - - - Platform: {getPlatform()} - - - Release: {isDev ? LL.DEVELOPMENT() : LL.STABLE()} - {!isDev && ( - - )} - - - -    - {upgradeAvailable ? LL.UPGRADE_AVAILABLE() : LL.LATEST_VERSION()} - {upgradeAvailable && - internet_live && - (data.psram ? ( - - ) : ( - <> -    - - {LL.DOWNLOAD(1)} v - {isDev ? latestDevVersion : latestVersion} - - - ))} - - - {renderUploadDialog()} - ); }; diff --git a/interface/src/app/settings/Settings.tsx b/interface/src/app/settings/Settings.tsx index 78afb8214..e40c55ed7 100644 --- a/interface/src/app/settings/Settings.tsx +++ b/interface/src/app/settings/Settings.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import AccessTimeIcon from '@mui/icons-material/AccessTime'; +import BuildIcon from '@mui/icons-material/Build'; import CancelIcon from '@mui/icons-material/Cancel'; import DeviceHubIcon from '@mui/icons-material/DeviceHub'; import ImportExportIcon from '@mui/icons-material/ImportExport'; @@ -20,7 +21,7 @@ import { List } from '@mui/material'; -import { API } from 'api/app'; +import { API, callAction } from 'api/app'; import { dialogStyle } from 'CustomTheme'; import { useRequest } from 'alova/client'; @@ -39,6 +40,11 @@ const Settings = () => { immediate: false }); + // get installed version + const { data } = useRequest(() => callAction({ action: 'checkUpgrade' }), { + initialData: { emsesp_version: '...' } + }); + const doFormat = async () => { await sendAPI({ device: 'system', cmd: 'format', id: 0 }).then(() => { setConfirmFactoryReset(false); @@ -77,10 +83,18 @@ const Settings = () => { const content = () => ( <> + + @@ -88,7 +102,7 @@ const Settings = () => { @@ -96,7 +110,7 @@ const Settings = () => { @@ -104,7 +118,7 @@ const Settings = () => { @@ -112,14 +126,14 @@ const Settings = () => { diff --git a/interface/src/app/settings/Version.tsx b/interface/src/app/settings/Version.tsx new file mode 100644 index 000000000..ba4ee53eb --- /dev/null +++ b/interface/src/app/settings/Version.tsx @@ -0,0 +1,261 @@ +import { useState } from 'react'; +import { toast } from 'react-toastify'; + +import CancelIcon from '@mui/icons-material/Cancel'; +import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; +import WarningIcon from '@mui/icons-material/Warning'; +import { + Box, + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + Link, + Typography +} from '@mui/material'; + +import * as SystemApi from 'api/system'; +import { callAction } from 'api/app'; +import { getDevVersion, getStableVersion } from 'api/system'; + +import { dialogStyle } from 'CustomTheme'; +import { useRequest } from 'alova/client'; +import RestartMonitor from 'app/status/RestartMonitor'; +import { FormLoader, SectionContent, useLayoutTitle } from 'components'; +import { useI18nContext } from 'i18n/i18n-react'; + +const Version = () => { + const { LL } = useI18nContext(); + + const [restarting, setRestarting] = useState(false); + const [openDialog, setOpenDialog] = useState(false); + const [useDev, setUseDev] = useState(false); + const [upgradeAvailable, setUpgradeAvailable] = useState(false); + + const { send: sendCheckUpgrade } = useRequest( + (version: string) => callAction({ action: 'checkUpgrade', param: version }), + { + immediate: false + } + ).onSuccess((event) => { + setUpgradeAvailable((event.data as { upgradeable: boolean }).upgradeable); + }); + + const { data, send: loadData, error } = useRequest(SystemApi.readSystemStatus); + + const { send: sendUploadURL } = useRequest( + (url: string) => callAction({ action: 'uploadURL', param: url }), + { + immediate: false + } + ); + + // called immediately to get the latest version, on page load + const { data: latestVersion } = useRequest(getStableVersion, { + // uncomment next 2 lines for testing, uses https://github.com/emsesp/EMS-ESP32/releases/download/v3.6.5/EMS-ESP-3_6_5-ESP32-16MB+.bin + immediate: false, + initialData: '3.6.5' + }); + + // called immediately to get the latest version, on page load, then check for upgrade + const { data: latestDevVersion } = useRequest(getDevVersion, { + // uncomment next 2 lines for testing, uses https://github.com/emsesp/EMS-ESP32/releases/download/latest/EMS-ESP-3_7_0-dev_31-ESP32-16MB+.bin + immediate: false, + initialData: '3.7.0-dev.32' + }).onSuccess((event) => { + void sendCheckUpgrade(event.data); + }); + + const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/'; + const STABLE_RELNOTES_URL = + 'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md'; + + const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/'; + const DEV_RELNOTES_URL = + 'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md'; + + const getBinURL = (useDevVersion: boolean) => { + if (!latestVersion || !latestDevVersion) { + return ''; + } + const filename = + 'EMS-ESP-' + + (useDevVersion ? latestDevVersion : latestVersion).replaceAll('.', '_') + + '-' + + getPlatform() + + '.bin'; + return useDevVersion + ? DEV_URL + filename + : STABLE_URL + 'v' + latestVersion + '/' + filename; + }; + + const getPlatform = () => { + return ( + [data.esp_platform, data.flash_chip_size >= 16384 ? '16MB' : '4MB'].join('-') + + (data.psram ? '+' : '') + ); + }; + + const installFirmwareURL = async (url: string) => { + await sendUploadURL(url).catch((error: Error) => { + toast.error(error.message); + }); + setRestarting(true); + }; + + useLayoutTitle(LL.EMS_ESP_VER()); + + const internet_live = + latestDevVersion !== undefined && latestVersion !== undefined; + + const renderUploadDialog = () => { + if (!internet_live) { + return null; + } + + return ( + setOpenDialog(false)} + > + + {LL.INSTALL('') + + ' ' + + (useDev ? LL.DEVELOPMENT() : LL.STABLE()) + + ' Firmware'} + + + + {LL.INSTALL_VERSION(useDev ? latestDevVersion : latestVersion)} + + + changelog + +  |  + + {LL.DOWNLOAD(1)} + + + + + + + + ); + }; + + // useDevVersion = true to force using the dev version + const showFirmwareDialog = (useDevVersion: boolean) => { + if (useDevVersion || data.emsesp_version.includes('dev')) { + setUseDev(true); + } + setOpenDialog(true); + }; + + const content = () => { + if (!data) { + return ; + } + + const isDev = data.emsesp_version.includes('dev'); + + return ( + <> + + Firmware Version Check + + + + + {LL.VERSION() + ':'} {data.emsesp_version} + {data.build_flags && ( + +   ({data.build_flags}) + + )} + + + Platform: {getPlatform()} + + + + Release:  + + {isDev ? LL.DEVELOPMENT() : LL.STABLE()} + + {!isDev && ( + + )} + + + + +    + {upgradeAvailable ? LL.UPGRADE_AVAILABLE() : LL.LATEST_VERSION()} + {upgradeAvailable && + internet_live && + (data.psram ? ( + + ) : ( + <> +    + + {LL.DOWNLOAD(1)} v + {isDev ? latestDevVersion : latestVersion} + + + ))} + + + {renderUploadDialog()} + + + ); + }; + + return ( + {restarting ? : content()} + ); +}; + +export default Version; diff --git a/interface/src/app/status/Status.tsx b/interface/src/app/status/Status.tsx index f3a53dbdd..7d0785af9 100644 --- a/interface/src/app/status/Status.tsx +++ b/interface/src/app/status/Status.tsx @@ -1,9 +1,7 @@ import { useContext, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; import { toast } from 'react-toastify'; import AccessTimeIcon from '@mui/icons-material/AccessTime'; -import BuildIcon from '@mui/icons-material/Build'; import CancelIcon from '@mui/icons-material/Cancel'; import DeviceHubIcon from '@mui/icons-material/DeviceHub'; import DirectionsBusIcon from '@mui/icons-material/DirectionsBus'; @@ -13,7 +11,6 @@ import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; import RouterIcon from '@mui/icons-material/Router'; import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna'; import TimerIcon from '@mui/icons-material/Timer'; -import UpgradeIcon from '@mui/icons-material/Upgrade'; import WifiIcon from '@mui/icons-material/Wifi'; import { Avatar, @@ -46,8 +43,6 @@ import RestartMonitor from './RestartMonitor'; const SystemStatus = () => { const { LL } = useI18nContext(); - const navigate = useNavigate(); - useLayoutTitle(LL.STATUS_OF('')); const { me } = useContext(AuthenticatedContext); @@ -248,28 +243,6 @@ const SystemStatus = () => { return ( <> - - - - - - - - {me.admin && ( - - )} - - @@ -292,6 +265,15 @@ const SystemStatus = () => { )} + + { to="/status/activity" /> - - { : RouterIcon } bgcolor={networkStatusHighlight()} - label={LL.STATUS_OF(LL.NETWORK(1))} + label={LL.NETWORK(1)} text={networkStatus()} to="/status/network" /> @@ -327,7 +300,7 @@ const SystemStatus = () => { disabled={!me.admin} icon={DeviceHubIcon} bgcolor={activeHighlight(data.mqtt_status)} - label={LL.STATUS_OF('MQTT')} + label="MQTT" text={data.mqtt_status ? LL.ACTIVE() : LL.INACTIVE(0)} to="/status/mqtt" /> @@ -336,7 +309,7 @@ const SystemStatus = () => { disabled={!me.admin} icon={AccessTimeIcon} bgcolor={ntpStatusHighlight()} - label={LL.STATUS_OF('NTP')} + label="NTP" text={ntpStatus()} to="/status/ntp" /> @@ -345,7 +318,7 @@ const SystemStatus = () => { disabled={!me.admin} icon={SettingsInputAntennaIcon} bgcolor={activeHighlight(data.ap_status)} - label={LL.STATUS_OF(LL.ACCESS_POINT(0))} + label={LL.ACCESS_POINT(0)} text={data.ap_status ? LL.ACTIVE() : LL.INACTIVE(0)} to="/status/ap" />