fix(ota): report installed_version and available_version states in OTA page instead of build id and date (#2470)

* fix: report installed_version and available_version states in OTA page instead of build id and date

* fix: improved code and formatting

* fix: translation of 'N/A' is not required

---------

Co-authored-by: Ricc68 <ricc68@local>

Author: Ricc68

src/components/ota-page/index.tsx

@@ -6,7 +6,7 @@ import { OtaApi } from '../../actions/OtaApi';
 import { GlobalState } from '../../store';
 import Button from '../button';
 import { DeviceImage } from '../device-image/DeviceImage';
-import { genDeviceDetailsLink, isDeviceDisabled, toHHMMSS } from '../../utils';
+import { genDeviceDetailsLink, isDeviceDisabled, toHHMMSS, fileVersion2String } from '../../utils';
 import { Link } from 'react-router-dom';
 import { Device, DeviceState, OTAState } from '../../types';
 import { ModelLink, OTALink, VendorLink } from '../vendor-links/vendor-links';
@@ -132,6 +132,7 @@ class OtaPage extends Component<PropsFromStore & OtaApi & WithTranslation<'ota'>
         const otaDevices = this.getAllOtaDevices();
         otaDevices.forEach(({ device }) => checkOTA(device.friendly_name));
     };
+
     render() {
         const { checkOTA, scheduleOTA, unscheduleOTA, updateOTA, t } = this.props;
         const otaApi = { checkOTA, scheduleOTA, unscheduleOTA, updateOTA };
@@ -182,17 +183,23 @@ class OtaPage extends Component<PropsFromStore & OtaApi & WithTranslation<'ota'>
                 }) => <ModelLink device={device} />,
             },
             {
-                Header: t('zigbee:firmware_build_date') as string,
-                accessor: ({ device }) => device.date_code,
+                Header: t('zigbee:firmware_installed_version') as string,
+                accessor: ({ state }) => {
+                    const installed_version = ((state?.update ?? {}) as OTAState).installed_version;
+
+                    if (typeof installed_version === 'number' && installed_version)
+                        return fileVersion2String(installed_version);
+                    else return t('zigbee:firmware_installed_version_na');
+                },
             },
             {
-                Header: t('zigbee:firmware_version') as string,
-                accessor: ({ device }) => device.software_build_id,
-                Cell: ({
-                    row: {
-                        original: { device },
-                    },
-                }) => <OTALink device={device} />,
+                Header: t('zigbee:firmware_available_version') as string,
+                accessor: ({ state }) => {
+                    const latest_version = ((state?.update ?? {}) as OTAState).latest_version;
+
+                    if (typeof latest_version === 'number' && latest_version) return fileVersion2String(latest_version);
+                    else return 'N/A';
+                },
             },
             {
                 Header: () => (

src/i18n/locales/en.json

@@ -2659,6 +2659,9 @@
     "endpoint": "Endpoint",
     "firmware_build_date": "Firmware build date",
     "firmware_version": "Firmware version",
+    "firmware_installed_version": "Firmware installed version",
+    "firmware_available_version": "Firmware available version",
+    "firmware_installed_version_na": "Not yet reported by device",
     "force_remove": "Force remove",
     "friendly_name": "Friendly name",
     "ieee_address": "IEEE Address",

src/utils.ts

@@ -31,6 +31,16 @@ export const toHHMMSS = (secs: number): string => {
         .join(":");
 };
 
+export const fileVersion2String = (file_version: number): string => {
+    const versionString = file_version.toString(16).padStart(8, "0");
+    const appRelease = `${versionString[0]}.${versionString[1]}`;
+    const appBuild = versionString.slice(2, 4);
+    const stackRelease = `${versionString[4]}.${versionString[5]}`;
+    const stackBuild = versionString.slice(6);
+
+    return `${appRelease}.${appBuild}-${stackRelease}.${stackBuild}`;
+};
+
 export const lastSeen = (state: DeviceState, lastSeenType: LastSeenType): Date | undefined => {
     if (!state.last_seen) {
         return undefined;

ws-messages/onConnect.json

@@ -8734,7 +8734,12 @@
             "color_temp": 454,
             "color_temp_startup": 500,
             "last_seen": "2022-04-15T17:48:28+08:00",
-            "state": "ON"
+            "state": "ON",
+            "update": {
+                "installed_version": 65552,
+                "latest_version": 16777233,
+                "state": "available"
+            }
         },
         "topic": "hue_back_tv"
     },