From 43eba7a010121f1584153f022a42f66e00f81a62 Mon Sep 17 00:00:00 2001 From: proddy Date: Fri, 24 Oct 2025 15:31:49 +0200 Subject: [PATCH] show dialog with version information --- interface/src/app/status/Version.tsx | 582 ++++++++++++++++----------- interface/src/utils/time.ts | 149 ++++++- 2 files changed, 482 insertions(+), 249 deletions(-) diff --git a/interface/src/app/status/Version.tsx b/interface/src/app/status/Version.tsx index 0178cac27..87dd1c2f4 100644 --- a/interface/src/app/status/Version.tsx +++ b/interface/src/app/status/Version.tsx @@ -1,10 +1,11 @@ -import { useContext, useEffect, useState } from 'react'; +import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { toast } from 'react-toastify'; import CancelIcon from '@mui/icons-material/Cancel'; import CloseIcon from '@mui/icons-material/Close'; import CheckIcon from '@mui/icons-material/Done'; import DownloadIcon from '@mui/icons-material/GetApp'; +import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import WarningIcon from '@mui/icons-material/Warning'; import { Box, @@ -16,7 +17,11 @@ import { DialogTitle, FormControlLabel, Grid, + IconButton, Link, + List, + ListItem, + ListItemText, Typography } from '@mui/material'; @@ -36,168 +41,143 @@ import { } from 'components'; import { AuthenticatedContext } from 'contexts/authentication'; import { useI18nContext } from 'i18n/i18n-react'; +import { prettyDateTime } from 'utils/time'; -const Version = () => { - const { LL, locale } = useI18nContext(); - const { me } = useContext(AuthenticatedContext); +// Constants moved outside component to avoid recreation +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 [restarting, setRestarting] = useState(false); - const [openInstallDialog, setOpenInstallDialog] = useState(false); - const [usingDevVersion, setUsingDevVersion] = useState(false); - const [fetchDevVersion, setFetchDevVersion] = useState(false); - const [devUpgradeAvailable, setDevUpgradeAvailable] = useState(false); - const [stableUpgradeAvailable, setStableUpgradeAvailable] = - useState(false); - const [internetLive, setInternetLive] = useState(false); - const [downloadOnly, setDownloadOnly] = useState(false); +// Types for better type safety +interface VersionData { + emsesp_version: string; + arduino_version: string; + esp_platform: string; + flash_chip_size: number; + psram: boolean; + build_flags?: string; +} - 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'; +interface UpgradeCheckData { + emsesp_version: string; + dev_upgradeable: boolean; + stable_upgradeable: boolean; +} - 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'; +interface VersionInfo { + name: string; + published_at?: string; +} - const { send: sendCheckUpgrade } = useRequest( - (versions: string) => callAction({ action: 'checkUpgrade', param: versions }), - { - immediate: false - } - ).onSuccess((event) => { - const data = event.data as { - emsesp_version: string; - dev_upgradeable: boolean; - stable_upgradeable: boolean; - }; - setDevUpgradeAvailable(data.dev_upgradeable); - setStableUpgradeAvailable(data.stable_upgradeable); - }); +// Memoized components for better performance +const VersionInfoDialog = memo( + ({ + showVersionInfo, + latestVersion, + latestDevVersion, + locale, + LL, + onClose + }: { + showVersionInfo: number; + latestVersion?: VersionInfo; + latestDevVersion?: VersionInfo; + locale: string; + LL: any; + onClose: () => void; + }) => { + if (showVersionInfo === 0) return null; - const { - data: data, - send: loadData, - error - } = useRequest(SystemApi.readSystemStatus).onSuccess((event) => { - // older version of EMS-ESP using ESP32 (not S3) and no PSRAM, can't use OTA because of SSL support in HttpClient - if (event.data.arduino_version.startsWith('Tasmota')) { - setDownloadOnly(true); - } - setUsingDevVersion(event.data.emsesp_version.includes('dev')); - }); + const isStable = showVersionInfo === 1; + const version = isStable ? latestVersion : latestDevVersion; + const relNotesUrl = isStable ? STABLE_RELNOTES_URL : DEV_RELNOTES_URL; - const { send: sendUploadURL } = useRequest( - (url: string) => callAction({ action: 'uploadURL', param: url }), - { - immediate: false - } - ); - - // called immediately to get the latest versions on page load - const { data: latestVersion } = useRequest(getStableVersion); - const { data: latestDevVersion } = useRequest(getDevVersion); - - useEffect(() => { - if (latestVersion && latestDevVersion) { - sendCheckUpgrade(latestDevVersion.name + ',' + latestVersion.name) - .catch((error: Error) => { - toast.error('Failed to check for upgrades: ' + error.message); - }) - .finally(() => { - setInternetLive(true); - }); - } - }, [latestVersion, latestDevVersion]); - - const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }); - const DIVISIONS: Array<{ amount: number; name: string }> = [ - { amount: 60, name: 'seconds' }, - { amount: 60, name: 'minutes' }, - { amount: 24, name: 'hours' }, - { amount: 7, name: 'days' }, - { amount: 4.34524, name: 'weeks' }, - { amount: 12, name: 'months' }, - { amount: Number.POSITIVE_INFINITY, name: 'years' } - ]; - function formatTimeAgo(date: Date) { - let duration = (date.getTime() - new Date().getTime()) / 1000; - for (let i = 0; i < DIVISIONS.length; i++) { - const division = DIVISIONS[i]; - if (division && Math.abs(duration) < division.amount) { - return rtf.format( - Math.round(duration), - division.name as Intl.RelativeTimeFormatUnit - ); - } - if (division) { - duration /= division.amount; - } - } - return rtf.format(0, 'seconds'); + return ( + + Version Information + + + + {LL.TYPE(0)}} + secondary={isStable ? LL.STABLE() : LL.DEVELOPMENT()} + /> + + + {LL.VERSION()}} + secondary={version?.name} + /> + + {version?.published_at && ( + + Release Date} + secondary={prettyDateTime(locale, new Date(version.published_at))} + /> + + )} + + + + + + + + ); } +); - const { send: sendAPI } = useRequest((data: APIcall) => API(data), { - immediate: false - }); +const InstallDialog = memo( + ({ + openInstallDialog, + fetchDevVersion, + latestVersion, + latestDevVersion, + downloadOnly, + platform, + LL, + onClose, + onInstall + }: { + openInstallDialog: boolean; + fetchDevVersion: boolean; + latestVersion?: VersionInfo; + latestDevVersion?: VersionInfo; + downloadOnly: boolean; + platform: string; + LL: any; + onClose: () => void; + onInstall: (url: string) => void; + }) => { + const binURL = useMemo(() => { + if (!latestVersion || !latestDevVersion) return ''; - const doRestart = async () => { - setRestarting(true); - await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch( - (error: Error) => { - toast.error(error.message); - } - ); - }; + const version = fetchDevVersion ? latestDevVersion : latestVersion; + const filename = `EMS-ESP-${version.name.replaceAll('.', '_')}-${platform}.bin`; - const getBinURL = (showingDev: boolean) => { - if (!internetLive) { - return ''; - } - - const filename = - 'EMS-ESP-' + - (showingDev ? latestDevVersion.name : latestVersion.name).replaceAll( - '.', - '_' - ) + - '-' + - getPlatform() + - '.bin'; - return showingDev - ? DEV_URL + filename - : STABLE_URL + 'v' + latestVersion.name + '/' + 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('EMS-ESP Firmware'); - - const renderInstallDialog = () => { - const binURL = getBinURL(fetchDevVersion); + return fetchDevVersion + ? `${DEV_URL}${filename}` + : `${STABLE_URL}v${version.name}/${filename}`; + }, [fetchDevVersion, latestVersion, latestDevVersion, platform]); return ( - closeInstallDialog()} - > + - {LL.UPDATE() + - ' ' + - (fetchDevVersion ? LL.DEVELOPMENT() : LL.STABLE()) + - ' Firmware'} + {`${LL.UPDATE()} ${fetchDevVersion ? LL.DEVELOPMENT() : LL.STABLE()} Firmware`} @@ -211,7 +191,7 @@ const Version = () => { ); - }; + } +); - const showFirmwareDialog = (useDevVersion: boolean) => { +// Helper function moved outside component +const getPlatform = (data: VersionData): string => { + return `${data.esp_platform}-${data.flash_chip_size >= 16384 ? '16MB' : '4MB'}${data.psram ? '+' : ''}`; +}; + +const Version = () => { + const { LL, locale } = useI18nContext(); + const { me } = useContext(AuthenticatedContext); + + // State management + const [restarting, setRestarting] = useState(false); + const [openInstallDialog, setOpenInstallDialog] = useState(false); + const [usingDevVersion, setUsingDevVersion] = useState(false); + const [fetchDevVersion, setFetchDevVersion] = useState(false); + const [devUpgradeAvailable, setDevUpgradeAvailable] = useState(false); + const [stableUpgradeAvailable, setStableUpgradeAvailable] = + useState(false); + const [internetLive, setInternetLive] = useState(false); + const [downloadOnly, setDownloadOnly] = useState(false); + const [showVersionInfo, setShowVersionInfo] = useState(0); + + // API calls with optimized error handling + const { send: sendCheckUpgrade } = useRequest( + (versions: string) => callAction({ action: 'checkUpgrade', param: versions }), + { immediate: false } + ).onSuccess((event) => { + const data = event.data as UpgradeCheckData; + setDevUpgradeAvailable(data.dev_upgradeable); + setStableUpgradeAvailable(data.stable_upgradeable); + }); + + const { + data, + send: loadData, + error + } = useRequest(SystemApi.readSystemStatus).onSuccess((event) => { + const systemData = event.data as VersionData; + if (systemData.arduino_version.startsWith('Tasmota')) { + setDownloadOnly(true); + } + setUsingDevVersion(systemData.emsesp_version.includes('dev')); + }); + + const { send: sendUploadURL } = useRequest( + (url: string) => callAction({ action: 'uploadURL', param: url }), + { immediate: false } + ); + + const { data: latestVersion } = useRequest(getStableVersion); + const { data: latestDevVersion } = useRequest(getDevVersion); + + const { send: sendAPI } = useRequest((data: APIcall) => API(data), { + immediate: false + }); + + // Memoized values + const platform = useMemo(() => (data ? getPlatform(data) : ''), [data]); + const isDev = useMemo( + () => data?.emsesp_version.includes('dev') ?? false, + [data?.emsesp_version] + ); + + const doRestart = useCallback(async () => { + setRestarting(true); + await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch( + (error: Error) => { + toast.error(error.message); + } + ); + }, [sendAPI]); + + const installFirmwareURL = useCallback( + async (url: string) => { + await sendUploadURL(url).catch((error: Error) => { + toast.error(error.message); + }); + setRestarting(true); + }, + [sendUploadURL] + ); + + const showFirmwareDialog = useCallback((useDevVersion: boolean) => { setFetchDevVersion(useDevVersion); setOpenInstallDialog(true); - }; + }, []); - const closeInstallDialog = () => { + const closeInstallDialog = useCallback(() => { setOpenInstallDialog(false); - }; + }, []); - const showButtons = (showingDev: boolean) => { - const choice = showingDev - ? !usingDevVersion - ? LL.SWITCH_RELEASE_TYPE(LL.DEVELOPMENT()) - : devUpgradeAvailable - ? LL.UPDATE_AVAILABLE() - : undefined - : usingDevVersion - ? LL.SWITCH_RELEASE_TYPE(LL.STABLE()) - : stableUpgradeAvailable - ? LL.UPDATE_AVAILABLE() - : undefined; + const handleVersionInfoClose = useCallback(() => { + setShowVersionInfo(0); + }, []); + + // Effect for checking upgrades + useEffect(() => { + if (latestVersion && latestDevVersion) { + const versions = `${latestDevVersion.name},${latestVersion.name}`; + sendCheckUpgrade(versions) + .catch((error: Error) => { + toast.error(`Failed to check for upgrades: ${error.message}`); + }) + .finally(() => { + setInternetLive(true); + }); + } + }, [latestVersion, latestDevVersion, sendCheckUpgrade]); + + useLayoutTitle('EMS-ESP Firmware'); + + // Memoized button rendering logic + const showButtons = useCallback( + (showingDev: boolean) => { + const choice = showingDev + ? !usingDevVersion + ? LL.SWITCH_RELEASE_TYPE(LL.DEVELOPMENT()) + : devUpgradeAvailable + ? LL.UPDATE_AVAILABLE() + : undefined + : usingDevVersion + ? LL.SWITCH_RELEASE_TYPE(LL.STABLE()) + : stableUpgradeAvailable + ? LL.UPDATE_AVAILABLE() + : undefined; + + if (!choice) { + return ( + <> + + + {LL.LATEST_VERSION(usingDevVersion ? LL.DEVELOPMENT() : LL.STABLE())} + + + + ); + } + + if (!me.admin) return null; - if (!choice) { return ( - <> - - - {LL.LATEST_VERSION(usingDevVersion ? LL.DEVELOPMENT() : LL.STABLE())} - - - + ); - } + }, + [ + usingDevVersion, + devUpgradeAvailable, + stableUpgradeAvailable, + me.admin, + LL, + showFirmwareDialog + ] + ); - if (!me.admin) { - return; - } - - return ( - - ); - }; - - const content = () => { + const content = useMemo(() => { if (!data) { return ; } - const isDev = data.emsesp_version.includes('dev'); - return ( <> @@ -344,7 +433,7 @@ const Version = () => { - {getPlatform()} + {platform}   ( {data.psram ? ( @@ -436,15 +525,10 @@ const Version = () => { - - {latestVersion.name} - - {latestVersion.published_at && ( - -  ( - {formatTimeAgo(new Date(latestVersion.published_at))}) - - )} + {latestVersion?.name} + setShowVersionInfo(1)}> + + {showButtons(false)} @@ -454,15 +538,10 @@ const Version = () => { - - {latestDevVersion.name} - - {latestDevVersion.published_at && ( - -  ( - {formatTimeAgo(new Date(latestDevVersion.published_at))}) - - )} + {latestDevVersion?.name} + setShowVersionInfo(2)}> + + {showButtons(true)} @@ -476,7 +555,25 @@ const Version = () => { )} {me.admin && ( <> - {renderInstallDialog()} + + {LL.UPLOAD()} @@ -486,11 +583,30 @@ const Version = () => { ); - }; + }, [ + data, + error, + loadData, + LL, + platform, + isDev, + internetLive, + latestVersion, + latestDevVersion, + showVersionInfo, + locale, + openInstallDialog, + fetchDevVersion, + downloadOnly, + me.admin, + showButtons, + handleVersionInfoClose, + closeInstallDialog, + installFirmwareURL, + doRestart + ]); - return ( - {restarting ? : content()} - ); + return {restarting ? : content}; }; -export default Version; +export default memo(Version); diff --git a/interface/src/utils/time.ts b/interface/src/utils/time.ts index 8189fef84..3ff3b7f0e 100644 --- a/interface/src/utils/time.ts +++ b/interface/src/utils/time.ts @@ -1,18 +1,135 @@ -const LOCALE_FORMAT = new Intl.DateTimeFormat([...window.navigator.languages], { - day: 'numeric', - month: 'short', - year: 'numeric', - hour: 'numeric', - minute: 'numeric', - second: 'numeric', - hour12: false -}); +// Cache for formatters to avoid recreation +const formatterCache = new Map(); +const rtfCache = new Map(); -export const formatDateTime = (dateTime: string) => - LOCALE_FORMAT.format(new Date(dateTime.substring(0, 19))); +// Pre-computed time divisions for relative time formatting +const TIME_DIVISIONS = [ + { amount: 60, name: 'seconds' as const }, + { amount: 60, name: 'minutes' as const }, + { amount: 24, name: 'hours' as const }, + { amount: 7, name: 'days' as const }, + { amount: 4.34524, name: 'weeks' as const }, + { amount: 12, name: 'months' as const }, + { amount: Number.POSITIVE_INFINITY, name: 'years' as const } +] as const; -export const formatLocalDateTime = (date: Date) => - new Date(date.getTime() - date.getTimezoneOffset() * 60000) - .toISOString() - .slice(0, -1) - .substring(0, 19); +/** + * Get or create a cached DateTimeFormat instance + */ +function getDateTimeFormatter( + options: Intl.DateTimeFormatOptions +): Intl.DateTimeFormat { + const key = JSON.stringify(options); + if (!formatterCache.has(key)) { + formatterCache.set( + key, + new Intl.DateTimeFormat([...window.navigator.languages], options) + ); + } + return formatterCache.get(key)!; +} + +/** + * Get or create a cached RelativeTimeFormat instance + */ +function getRelativeTimeFormatter(locale: string): Intl.RelativeTimeFormat { + if (!rtfCache.has(locale)) { + rtfCache.set(locale, new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })); + } + return rtfCache.get(locale)!; +} + +/** + * Format a date as relative time (e.g., "2 hours ago", "in 3 days") + */ +function formatTimeAgo(locale: string, date: Date): string { + const now = Date.now(); + const targetTime = date.getTime(); + let duration = (targetTime - now) / 1000; + + const rtf = getRelativeTimeFormatter(locale); + + // Use for...of for better performance and readability + for (const division of TIME_DIVISIONS) { + if (Math.abs(duration) < division.amount) { + return rtf.format(Math.round(duration), division.name); + } + duration /= division.amount; + } + + return rtf.format(0, 'seconds'); +} + +/** + * Format a date-time string to locale-specific format + */ +export const formatDateTime = (dateTime: string): string => { + if (!dateTime || typeof dateTime !== 'string') { + return 'Invalid date'; + } + + try { + // Extract only the first 19 characters (YYYY-MM-DDTHH:mm:ss) + const cleanDateTime = dateTime.substring(0, 19); + const date = new Date(cleanDateTime); + + if (isNaN(date.getTime())) { + return 'Invalid date'; + } + + const formatter = getDateTimeFormatter({ + day: 'numeric', + month: 'short', + year: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + hour12: false + }); + + return formatter.format(date); + } catch (error) { + console.warn('Error formatting date:', error); + return 'Invalid date'; + } +}; + +/** + * Convert a Date object to local date-time string (ISO format without timezone) + */ +export const formatLocalDateTime = (date: Date): string => { + if (!(date instanceof Date) || isNaN(date.getTime())) { + return 'Invalid date'; + } + + // Calculate local time offset in milliseconds + const offsetMs = date.getTimezoneOffset() * 60000; + const localTime = date.getTime() - offsetMs; + + // Convert to ISO string and remove timezone info + return new Date(localTime).toISOString().slice(0, 19); +}; + +/** + * Format a date with both short date format and relative time + */ +export const prettyDateTime = (locale: string, date: Date): string => { + if (!(date instanceof Date) || isNaN(date.getTime())) { + return 'Invalid date'; + } + + if (!locale || typeof locale !== 'string') { + locale = 'en'; + } + + const shortFormatter = getDateTimeFormatter({ + day: 'numeric', + month: 'short', + year: 'numeric' + }); + + const shortDate = shortFormatter.format(date); + const relativeTime = formatTimeAgo(locale, date); + + return `${shortDate} (${relativeTime})`; +};