Add restart monitoring for manual firmware updates (#271)

* add restart monitoring for firmware updates

Author: rjwats

interface/src/AppRouting.tsx

@@ -12,15 +12,16 @@ import AuthenticatedRouting from './AuthenticatedRouting';
 interface SecurityRedirectProps {
   message: string;
   variant?: VariantType;
+  signOut?: boolean;
 }
 
-const SecurityRedirect: FC<SecurityRedirectProps> = ({ message, variant }) => {
+const RootRedirect: FC<SecurityRedirectProps> = ({ message, variant, signOut }) => {
   const authenticationContext = useContext(AuthenticationContext);
   const { enqueueSnackbar } = useSnackbar();
   useEffect(() => {
-    authenticationContext.signOut(false);
+    signOut && authenticationContext.signOut(false);
     enqueueSnackbar(message, { variant });
-  }, [message, variant, authenticationContext, enqueueSnackbar]);
+  }, [message, variant, signOut, authenticationContext, enqueueSnackbar]);
   return (<Navigate to="/" />);
 };
 
@@ -43,7 +44,14 @@ const AppRouting: FC = () => {
     <Authentication>
       <RemoveTrailingSlashes />
       <Routes>
-        <Route path="/unauthorized" element={<SecurityRedirect message="Please log in to continue" />} />
+        <Route
+          path="/unauthorized"
+          element={<RootRedirect message="Please log in to continue" signOut />}
+        />
+        <Route
+          path="/firmwareUpdated"
+          element={<RootRedirect message="Firmware update successful" variant="success" />}
+        />
         {features.security &&
           <Route
             path="/"

interface/src/api/system.ts

@@ -3,8 +3,8 @@ import { AxiosPromise } from 'axios';
 import { OTASettings, SystemStatus } from '../types';
 import { AXIOS, FileUploadConfig, uploadFile } from './endpoints';
 
-export function readSystemStatus(): AxiosPromise<SystemStatus> {
-  return AXIOS.get('/systemStatus');
+export function readSystemStatus(timeout?: number): AxiosPromise<SystemStatus> {
+  return AXIOS.get('/systemStatus', { timeout });
 }
 
 export function restart(): AxiosPromise<void> {

interface/src/framework/system/FirmwareFileUpload.tsx

@@ -0,0 +1,34 @@
+import { AxiosPromise } from 'axios';
+import { FC } from 'react';
+
+import { FileUploadConfig } from '../../api/endpoints';
+import { MessageBox, SingleUpload, useFileUpload } from '../../components';
+
+interface UploadFirmwareProps {
+  uploadFirmware: ((file: File, config?: FileUploadConfig) => AxiosPromise<void>)
+}
+
+const FirmwareFileUpload: FC<UploadFirmwareProps> = ({ uploadFirmware }) => {
+
+  const [uploadFile, cancelUpload, uploading, uploadProgress] = useFileUpload({ upload: uploadFirmware });
+
+  return (
+    <>
+      <MessageBox
+        message="Upload a new firmware (.bin) file below to replace the existing firmware."
+        level="warning"
+        my={2}
+      />
+      <SingleUpload
+        accept="application/octet-stream"
+        onDrop={uploadFile}
+        onCancel={cancelUpload}
+        uploading={uploading}
+        progress={uploadProgress}
+      />
+    </>
+  );
+
+};
+
+export default FirmwareFileUpload;

interface/src/framework/system/FirmwareRestartMonitor.tsx

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+import { FC, useRef, useState } from 'react';
+
+import * as SystemApi from "../../api/system";
+import { FormLoader } from '../../components';
+
+const RESTART_TIMEOUT = 2 * 60 * 1000;
+const POLL_TIMEOUT = 2000;
+const POLL_INTERVAL = 5000;
+
+const FirmwareRestartMonitor: FC = () => {
+
+  const [failed, setFailed] = useState<boolean>(false);
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
+
+  const timeoutAt = useRef(new Date().getTime() + RESTART_TIMEOUT);
+  const poll = useRef(async () => {
+    try {
+      await SystemApi.readSystemStatus(POLL_TIMEOUT);
+      document.location.href = "/firmwareUpdated";
+    } catch (error: any) {
+      if (new Date().getTime() < timeoutAt.current) {
+        setTimeoutId(setTimeout(poll.current, POLL_INTERVAL));
+      } else {
+        setFailed(true);
+      }
+    }
+  });
+
+  useEffect(
+    () => {
+      poll.current();
+    },
+    []
+  );
+
+  useEffect(() => () => timeoutId && clearTimeout(timeoutId), [timeoutId]);
+
+  return (
+    <FormLoader
+      message="Device restarting, please wait&hellip;"
+      errorMessage={failed ? "Timed out waiting for device to restart." : undefined}
+    />
+  );
+
+};
+
+export default FirmwareRestartMonitor;

interface/src/framework/system/UploadFirmwareForm.tsx

@@ -1,26 +1,30 @@
-import { FC } from 'react';
+import { FC, useRef, useState } from 'react';
 
 import * as SystemApi from "../../api/system";
-import { MessageBox, SectionContent, SingleUpload, useFileUpload } from '../../components';
+import { SectionContent } from '../../components';
+import { FileUploadConfig } from '../../api/endpoints';
+
+import FirmwareFileUpload from './FirmwareFileUpload';
+import FirmwareRestartMonitor from './FirmwareRestartMonitor';
 
 const UploadFirmwareForm: FC = () => {
 
-  const [uploadFile, cancelUpload, uploading, uploadProgress] = useFileUpload({ upload: SystemApi.uploadFirmware });
+  const [restarting, setRestarting] = useState<boolean>();
+
+  const uploadFirmware = useRef(async (file: File, config?: FileUploadConfig) => {
+    const response = await SystemApi.uploadFirmware(file, config);
+    setRestarting(true);
+    return response;
+  });
 
   return (
     <SectionContent title='Upload Firmware' titleGutter>
-      <MessageBox
-        message="Upload a new firmware (.bin) file below to replace the existing firmware."
-        level="warning"
-        my={2}
-      />
-      <SingleUpload
-        accept="application/octet-stream"
-        onDrop={uploadFile}
-        onCancel={cancelUpload}
-        uploading={uploading}
-        progress={uploadProgress}
-      />
+      {
+        restarting ?
+          <FirmwareRestartMonitor />
+          :
+          <FirmwareFileUpload uploadFirmware={uploadFirmware.current} />
+      }
     </SectionContent>
   );