Update firmware update logic and screens

src/api/opendtuapi.ts

@@ -745,7 +745,7 @@ class OpenDtuApi {
  let user = null;
 
  if (!this.userString) {
- log.warn('getAuthString', 'userString is null');
+ log.debug('getAuthString', 'userString is null');
  return null;
  }
 
@@ -916,7 +916,7 @@ class OpenDtuApi {
  }
 
  if (!this.isAuthenticated()) {
- log.error('getInverters', 'not authenticated');
+ log.debug('getInverters', 'not authenticated'); // Maybe user is anonymous
  return null;
  }
 
@@ -1372,20 +1372,23 @@ class OpenDtuApi {
  return res?.statusCode === 200;
  }
 
- public awaitForUpdateFinish(): Promise<void> {
+ public awaitForUpdateFinish(updating_to: string): Promise<void> {
  return new Promise((resolve, reject) => {
  // fetch from /api/system/status using HTTP HEAD. if okay, resolve. after 1 minute, reject.
  let fetchInterval: NodeJS.Timeout | null = null;
 
- const rejectTimeout = setTimeout(() => {
- log.warn('waiting took too long');
+ const rejectTimeout = setTimeout(
+ () => {
+ log.warn('waiting took too long');
 
- if (fetchInterval) {
- clearInterval(fetchInterval);
- }
+  if (fetchInterval) {
+  clearInterval(fetchInterval);
+  }
 
- reject();
- }, 60 * 1000);
+ reject();
+ },
+ 5 * 60 * 1000,
+ );
 
  const authString = this.getAuthString();
 
@@ -1412,8 +1415,8 @@ class OpenDtuApi {
  }, 1000 * 3);
 
  fetch(url, requestOptions)
- .then(response => {
- log.debug('awaitForUpdateFinish', response.status);
+ .then(async response => {
+ log.info('awaitForUpdateFinish', response.status);
 
  if (response.status === 200) {
  clearTimeout(abortTimeout);
@@ -1423,6 +1426,28 @@ class OpenDtuApi {
  clearInterval(fetchInterval);
  }
 
+ const systemStatus = await this.getSystemStatus();
+
+ if (systemStatus?.systemStatus?.git_hash) {
+ log.info('awaitForUpdateFinish', 'update finished', {
+ git_hash: systemStatus.systemStatus.git_hash,
+ updating_to: updating_to,
+ are_the_same:
+ systemStatus.systemStatus.git_hash === updating_to,
+ });
+
+ const areTheSame =
+ systemStatus.systemStatus.git_hash === updating_to;
+
+ if (!areTheSame) {
+ log.error(
+ 'awaitForUpdateFinish',
+ 'update failed, version still the same',
+ );
+ reject();
+ }
+ }
+
  resolve();
  } else {
  log.debug(

src/components/firmware/FirmwareListItem.tsx

@@ -65,9 +65,11 @@ const FirmwareListItem: FC<FirmwareListItemProps> = ({
  selectRelease(release);
  }, [selectRelease, release]);
 
+ const isInstalled = release.tag_name === installedFirmware;
+
  const downloadDisabled = useMemo(
- () => release.tag_name === installedFirmware || !authStringConfigured,
- [authStringConfigured, installedFirmware, release.tag_name],
+ () => isInstalled || !authStringConfigured,
+ [authStringConfigured, isInstalled],
  );
 
  const description = useMemo(() => {
@@ -149,19 +151,30 @@ const FirmwareListItem: FC<FirmwareListItemProps> = ({
  title={t('firmwares.view_on_github')}
  onPress={handleOpenGithub}
  left={props => <List.Icon {...props} icon="github" />}
- />
- <List.Item
- title={t('firmwares.install_firmware_on_device')}
- onPress={handleInstallFirmware}
- left={props => <List.Icon {...props} icon="download" />}
  borderless
  style={{
- borderBottomLeftRadius: settingsSurfaceRoundness(theme),
- borderBottomRightRadius: settingsSurfaceRoundness(theme),
- opacity: downloadDisabled ? 0.5 : 1,
+ borderBottomLeftRadius: isInstalled
+ ? settingsSurfaceRoundness(theme)
+ : 0,
+ borderBottomRightRadius: isInstalled
+ ? settingsSurfaceRoundness(theme)
+ : 0,
  }}
- disabled={downloadDisabled}
  />
+ {!isInstalled ? (
+ <List.Item
+ title={t('firmwares.install_firmware_on_device')}
+ onPress={handleInstallFirmware}
+ left={props => <List.Icon {...props} icon="download" />}
+ borderless
+ style={{
+ borderBottomLeftRadius: settingsSurfaceRoundness(theme),
+ borderBottomRightRadius: settingsSurfaceRoundness(theme),
+ opacity: downloadDisabled ? 0.5 : 1,
+ }}
+ disabled={downloadDisabled}
+ />
+ ) : null}
  </SettingsSurface>
  </List.Accordion>
  );

src/components/modals/InstallAssetModal.tsx

@@ -8,6 +8,7 @@ import {
  Button,
  Divider,
  HelperText,
+ Icon,
  Portal,
  ProgressBar,
  Text,
@@ -19,7 +20,7 @@ import BaseModal from '@/components/BaseModal';
 import { rootLogging } from '@/utils/log';
 
 import { useApi } from '@/api/ApiHandler';
-import { spacing } from '@/constants';
+import { colors, spacing } from '@/constants';
 
 import type { ReleaseAsset } from '@octokit/webhooks-types';
 
@@ -70,6 +71,7 @@ const InstallAssetModal: FC<InstallFirmwareModalProps> = ({
  version,
  asset.browser_download_url,
  progress => {
+ log.info('download progress', progress);
  setDownloadProgress(progress);
  },
  );
@@ -125,6 +127,7 @@ const InstallAssetModal: FC<InstallFirmwareModalProps> = ({
  setInstallProgress(0);
 
  const result = await api.handleOTA(version, path, progress => {
+ log.info('install progress', progress);
  setInstallProgress(progress);
  });
 
@@ -139,7 +142,7 @@ const InstallAssetModal: FC<InstallFirmwareModalProps> = ({
  setInstallProgress(1);
 
  try {
- await api.awaitForUpdateFinish();
+ await api.awaitForUpdateFinish(version);
 
  if (successful) {
  setSuccess(true);
@@ -184,9 +187,20 @@ const InstallAssetModal: FC<InstallFirmwareModalProps> = ({
  error,
  ]);
 
- const showWaitForUpdateFinished = useMemo(() => {
- return isInstalling && installProgress >= 1;
- }, [isInstalling, installProgress]);
+ const [showWaitForUpdateFinished, setShowWaitForUpdateFinished] =
+ useState<boolean>(false);
+
+ useEffect(() => {
+ if (showWaitForUpdateFinished && !isInstalling) {
+ setShowWaitForUpdateFinished(false);
+ }
+
+ if (isInstalling && installProgress >= 1) {
+ setTimeout(() => {
+ setShowWaitForUpdateFinished(true);
+ }, 1200);
+ }
+ }, [isInstalling, installProgress, showWaitForUpdateFinished]);
 
  return (
  <>
@@ -199,46 +213,55 @@ const InstallAssetModal: FC<InstallFirmwareModalProps> = ({
  >
  {success ? (
  <Box p={16} style={{ maxHeight: '100%' }}>
- <Box mb={8}>
- <Text variant="bodyLarge">
+ <Box mb={16} style={{ display: 'flex', alignItems: 'center' }}>
+ <Text variant="titleLarge">
  {t('firmwares.successfullyInstalledTheFirmware')}
  </Text>
  </Box>
+ <Box style={{ display: 'flex', alignItems: 'center' }}>
+ <Icon source="check-circle" size={100} color={colors.success} />
+ </Box>
  </Box>
  ) : !showWaitForUpdateFinished ? (
  <Box pt={16} style={{ maxHeight: '100%' }}>
  <Box mb={8} ph={16}>
- <Text variant="bodyLarge">
+ <Text variant="titleLarge">
  {t('firmwares.installAsset', { name: asset?.name })}
  </Text>
  </Box>
  <Box ph={16}>
- <Box
- mb={4}
- style={{
- display: 'flex',
- flexDirection: 'row',
- gap: spacing,
- alignItems: 'center',
- }}
- >
- <Text>{t('firmwares.downloadProgress')}</Text>
- <Box style={{ flex: 1 }}>
- <ProgressBar progress={downloadProgress} />
+ <Box mb={16}>
+ <Text variant="titleSmall">
+ {t('firmwares.downloadProgress')} (
+ {(downloadProgress * 100).toFixed(1)}%)
+ </Text>
+ <Box style={{ marginTop: 4 }}>
+ <ProgressBar
+ progress={downloadProgress}
+ style={{ height: 8, borderRadius: 8 }}
+ color={
+ downloadProgress < 1
+ ? theme.colors.primary
+ : colors.success
+ }
+ />
  </Box>
  </Box>
- <Box
- mb={4}
- style={{
- display: 'flex',
- flexDirection: 'row',
- gap: spacing,
- alignItems: 'center',
- }}
- >
- <Text>{t('firmwares.installProgress')}</Text>
- <Box style={{ flex: 1 }}>
- <ProgressBar progress={installProgress} />
+ <Box mb={16}>
+ <Text variant="titleSmall">
+ {t('firmwares.installProgress')} (
+ {(installProgress * 100).toFixed(1)}%)
+ </Text>
+ <Box style={{ marginTop: 4 }}>
+ <ProgressBar
+ progress={installProgress}
+ style={{ height: 8, borderRadius: 8 }}
+ color={
+ installProgress < 1
+ ? theme.colors.primary
+ : colors.success
+ }
+ />
  </Box>
  </Box>
  </Box>
@@ -286,29 +309,30 @@ const InstallAssetModal: FC<InstallFirmwareModalProps> = ({
  </Text>
  </Box>
  {error ? (
- <Box mb={8}>
- <Text
- variant="bodyMedium"
- style={{ color: theme.colors.error }}
- >
- {error}
- </Text>
- </Box>
+ <>
+ <Box mb={16}>
+ <Text
+ variant="titleMedium"
+ style={{ color: theme.colors.error }}
+ >
+ {error}
+ </Text>
+ </Box>
+ <Box>
+ <Button
+ mode="contained"
+ onPress={() => handleAbort(true)}
+ style={{ width: '100%' }}
+ >
+ {t('goBack')}
+ </Button>
+ </Box>
+ </>
  ) : (
- <Box mb={16}>
+ <Box>
  <ActivityIndicator size="large" />
  </Box>
  )}
- <Box>
- <Button
- mode="contained"
- onPress={() => handleAbort(true)}
- style={{ width: '100%' }}
- disabled={error === null}
- >
- {t('cancel')}
- </Button>
- </Box>
  </Box>
  )}
  </BaseModal>

src/hooks/useEnhancedLog.ts

@@ -25,8 +25,6 @@ const useEnhancedLog = (
 ): EnhancedLog => {
  const rawLogs = useAppSelector(state => state.app.logs);
 
- console.log('platform', Platform);
-
  return useMemo<EnhancedLog>(
  () => ({
  meta: {