feat(ota): add support for scheduled OTA (#2449)

* feat: Add support for scheduled OTA

* fix: Use unschedule endpoint

+ linting

Author: sarthurdev

src/actions/OtaApi.ts

@@ -2,12 +2,20 @@ import api from '../ws-client';
 
 export interface OtaApi {
     checkOTA(deviceName: string): Promise<void>;
+    scheduleOTA(deviceName: string): Promise<void>;
+    unscheduleOTA(deviceName: string): Promise<void>;
     updateOTA(deviceName: string): Promise<void>;
 }
 export default {
     checkOTA: (state, deviceName: string): Promise<void> => {
         return api.send("bridge/request/device/ota_update/check", { id: deviceName });
     },
+    scheduleOTA: (state, deviceName: string): Promise<void> => {
+        return api.send("bridge/request/device/ota_update/schedule", { id: deviceName });
+    },
+    unscheduleOTA: (state, deviceName: string): Promise<void> => {
+        return api.send("bridge/request/device/ota_update/unschedule", { id: deviceName });
+    },
     updateOTA: (state, deviceName: string): Promise<void> => {
         return api.send("bridge/request/device/ota_update/update", { id: deviceName });
     },

src/components/ota-page/index.tsx

@@ -13,6 +13,7 @@ import { ModelLink, OTALink, VendorLink } from '../vendor-links/vendor-links';
 import { useTranslation, WithTranslation, withTranslation } from 'react-i18next';
 import { Column } from 'react-table';
 import { Table } from '../grid/ReactTableCom';
+import cx from 'classnames';
 
 type OtaRowProps = {
     device: Device;
@@ -21,7 +22,7 @@ type OtaRowProps = {
 
 const StateCell: FunctionComponent<OtaRowProps & OtaApi> = (props) => {
     const { t } = useTranslation('ota');
-    const { device, state, checkOTA, updateOTA } = props;
+    const { device, state, checkOTA, scheduleOTA, unscheduleOTA, updateOTA } = props;
     const otaState = (state?.update ?? {}) as OTAState;
     switch (otaState.state) {
         case 'updating':
@@ -40,20 +41,67 @@ const StateCell: FunctionComponent<OtaRowProps & OtaApi> = (props) => {
             );
         case 'available':
             return (
-                <Button<string>
-                    className="btn btn-danger btn-sm"
-                    onClick={updateOTA}
-                    item={device.friendly_name}
-                    prompt
-                >
-                    {t('update')}
-                </Button>
+                <div className="btn-group btn-group-sm" role="group">
+                    <Button<string>
+                        className="btn btn-danger btn-sm me-1"
+                        onClick={updateOTA}
+                        item={device.friendly_name}
+                        prompt
+                    >
+                        {t('update')}
+                    </Button>
+                    <Button<string>
+                        className="btn btn-sm btn-info"
+                        onClick={scheduleOTA}
+                        item={device.friendly_name}
+                        title={t('schedule')}
+                        prompt
+                    >
+                        <i className={cx('fa', 'fa-clock')} />
+                    </Button>
+                </div>
+            );
+        case 'scheduled':
+            return (
+                <div className="btn-group btn-group-sm" role="group">
+                    <Button<string>
+                        className="btn btn-primary btn-sm me-1"
+                        onClick={checkOTA}
+                        item={device.friendly_name}
+                    >
+                        {t('check')}
+                    </Button>
+                    <Button<string>
+                        className={cx('btn', 'btn-sm', 'btn-danger')}
+                        onClick={unscheduleOTA}
+                        item={device.friendly_name}
+                        title={t('scheduled')}
+                        prompt
+                    >
+                        <i className={cx('fa', 'fa-clock')} />
+                    </Button>
+                </div>
             );
         default:
             return (
-                <Button<string> className="btn btn-primary btn-sm" onClick={checkOTA} item={device.friendly_name}>
-                    {t('check')}
-                </Button>
+                <div className="btn-group btn-group-sm" role="group">
+                    <Button<string>
+                        className="btn btn-primary btn-sm me-1"
+                        onClick={checkOTA}
+                        item={device.friendly_name}
+                    >
+                        {t('check')}
+                    </Button>
+                    <Button<string>
+                        className={cx('btn', 'btn-sm', 'btn-info')}
+                        onClick={scheduleOTA}
+                        item={device.friendly_name}
+                        title={t('schedule')}
+                        prompt
+                    >
+                        <i className={cx('fa', 'fa-clock')} />
+                    </Button>
+                </div>
             );
     }
 };
@@ -85,8 +133,8 @@ class OtaPage extends Component<PropsFromStore & OtaApi & WithTranslation<'ota'>
         otaDevices.forEach(({ device }) => checkOTA(device.friendly_name));
     };
     render() {
-        const { checkOTA, updateOTA, t } = this.props;
-        const otaApi = { checkOTA, updateOTA };
+        const { checkOTA, scheduleOTA, unscheduleOTA, updateOTA, t } = this.props;
+        const otaApi = { checkOTA, scheduleOTA, unscheduleOTA, updateOTA };
         const otaDevices = this.getAllOtaDevices();
         const columns: Column<OtaGridData>[] = [
             {

src/i18n/locales/en.json

@@ -2581,6 +2581,8 @@
     "check_all": "Check all",
     "empty_ota_message": "You don't have any devices that support OTA",
     "remaining_time": "Remaining time {{- remaining}}",
+    "schedule": "Schedule update on next device OTA request",
+    "scheduled": "Remove scheduled update on next OTA request",
     "update": "Update device firmware"
   },
   "settings": {

src/types.ts

@@ -6,7 +6,7 @@ export type FriendlyName = string;
 export type IEEEEAddress = string;
 
 export type OTAState = {
-    state: 'available' | 'updating';
+    state: 'available' | 'updating' | 'scheduled';
     progress: number;
     remaining: number;
 };