feat: device recovery mode (#642)

* add new page and ipc processing

* refactor: remove unused references from uhk.js

* feat: add device recovery route

* refactor: device permission

* feat: write firmware update log to the screen

* fix: xterm height

* feat: add reload button to the recovery page

* refactor: deviceConnectionState.hasPermission in appStartInfo

* refactor: use correct imports

* refactor: move .ok-button css class to the main style.scss

* feat: add bootload active route guard

* style: move RecoveryDeviceAction into new line

* feat: delete reload button

* feat: start device polling after device recovery

packages/uhk-web/src/app/app.routes.ts

@@ -5,17 +5,19 @@ import { deviceRoutes } from './components/device';
 import { addOnRoutes } from './components/add-on';
 import { keymapRoutes } from './components/keymap';
 import { macroRoutes } from './components/macro';
-import { PrivilegeCheckerComponent } from './components/privilege-checker/privilege-checker.component';
-import { MissingDeviceComponent } from './components/missing-device/missing-device.component';
+import { PrivilegeCheckerComponent } from './components/privilege-checker';
+import { MissingDeviceComponent } from './components/missing-device';
 import { UhkDeviceDisconnectedGuard } from './services/uhk-device-disconnected.guard';
 import { UhkDeviceConnectedGuard } from './services/uhk-device-connected.guard';
 import { UhkDeviceUninitializedGuard } from './services/uhk-device-uninitialized.guard';
 import { UhkDeviceInitializedGuard } from './services/uhk-device-initialized.guard';
 import { MainPage } from './pages/main-page/main.page';
-import { agentRoutes } from './components/agent/agent.routes';
+import { agentRoutes } from './components/agent';
 import { LoadingDevicePageComponent } from './pages/loading-page/loading-device.page';
 import { UhkDeviceLoadingGuard } from './services/uhk-device-loading.guard';
 import { UhkDeviceLoadedGuard } from './services/uhk-device-loaded.guard';
+import { RecoveryModeComponent } from './components/device';
+import { UhkDeviceBootloaderNotActiveGuard } from './services/uhk-device-bootloader-not-active.guard';
 
 const appRoutes: Routes = [
     {
@@ -33,6 +35,11 @@ const appRoutes: Routes = [
         component: LoadingDevicePageComponent,
         canActivate: [UhkDeviceLoadedGuard]
     },
+    {
+        path: 'recovery-device',
+        component: RecoveryModeComponent,
+        canActivate: [UhkDeviceBootloaderNotActiveGuard]
+    },
     {
         path: '',
         component: MainPage,

packages/uhk-web/src/app/components/device/device.routes.ts

@@ -5,6 +5,7 @@ import { DeviceFirmwareComponent } from './firmware/device-firmware.component';
 import { MouseSpeedComponent } from './mouse-speed/mouse-speed.component';
 import { LEDBrightnessComponent } from './led-brightness/led-brightness.component';
 import { RestoreConfigurationComponent } from './restore-configuration/restore-configuration.component';
+import { RecoveryModeComponent } from './recovery-mode/recovery-mode.component';
 
 export const deviceRoutes: Routes = [
     {
@@ -34,6 +35,10 @@ export const deviceRoutes: Routes = [
             {
                 path: 'restore-user-configuration',
                 component: RestoreConfigurationComponent
+            },
+            {
+                path: 'recovery-mode',
+                component: RecoveryModeComponent
             }
         ]
     }

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html

@@ -42,7 +42,7 @@
         <div class="flex-grow" #scrollMe>
             <xterm [logs]="xtermLog$ | async"></xterm>
         </div>
-        <div class="footer">
+        <div class="flex-footer">
             <button type="button"
                     class="btn btn-primary ok-button"
                     [disabled]="firmwareOkButtonDisabled$ | async"

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.scss

@@ -5,25 +5,3 @@
     min-height: 100%;
     width: 100%;
 }
-
-.flex-container {
-    height: 100%;
-    max-height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.flex-grow {
-    background-color: black;
-    overflow: auto;
-    flex: 1;
-}
-
-.footer {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-}
-
-.ok-button {
-    min-width: 100px;
-}

packages/uhk-web/src/app/components/device/index.ts

@@ -3,4 +3,5 @@ export * from './firmware/device-firmware.component';
 export * from './mouse-speed/mouse-speed.component';
 export * from './led-brightness/led-brightness.component';
 export * from './restore-configuration/restore-configuration.component';
+export * from './recovery-mode/recovery-mode.component';
 export * from './device.routes';

packages/uhk-web/src/app/components/device/recovery-mode/recovery-mode.component.html

@@ -0,0 +1,26 @@
+<div class="full-height">
+    <div class="flex-container">
+        <div>
+
+            <h1>
+                <i class="fa fa-wrench"></i>
+                <span>Fix device</span>
+            </h1>
+            <p>
+                Your device seems to be broken. No worries, Agent can fix it.
+            </p>
+            <p>
+                <button class="btn btn-primary"
+                        type="button"
+                        [disabled]="flashFirmwareButtonDisbabled$ | async"
+                        (click)="onRecoveryDevice()">Fix device
+                </button>
+            </p>
+        </div>
+        <div class="flex-grow" #scrollMe>
+            <xterm [logs]="xtermLog"></xterm>
+        </div>
+        <div class="flex-footer">
+        </div>
+    </div>
+</div>

packages/uhk-web/src/app/components/device/recovery-mode/recovery-mode.component.scss

@@ -0,0 +1,10 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+    width: 100%;
+
+    p {
+        margin: 1.5rem 0;
+    }
+}

packages/uhk-web/src/app/components/device/recovery-mode/recovery-mode.component.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Subscription } from 'rxjs/Subscription';
+import { Observable } from 'rxjs/Observable';
+
+import { XtermLog } from '../../../models/xterm-log';
+import { AppState, flashFirmwareButtonDisbabled, xtermLog } from '../../../store';
+import { RecoveryDeviceAction } from '../../../store/actions/device';
+
+@Component({
+    selector: 'device-recovery-mode',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './recovery-mode.component.html',
+    styleUrls: ['./recovery-mode.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class RecoveryModeComponent implements OnInit, OnDestroy {
+    xtermLogSubscription: Subscription;
+    flashFirmwareButtonDisbabled$: Observable<boolean>;
+
+    xtermLog: Array<XtermLog>;
+
+    @ViewChild('scrollMe') divElement: ElementRef;
+
+    constructor(private store: Store<AppState>,
+                private cdRef: ChangeDetectorRef) {
+    }
+
+    ngOnInit(): void {
+        this.flashFirmwareButtonDisbabled$ = this.store.select(flashFirmwareButtonDisbabled);
+        this.xtermLogSubscription = this.store.select(xtermLog)
+            .subscribe(data => {
+                this.xtermLog = data;
+
+                this.cdRef.markForCheck();
+
+                if (this.divElement && this.divElement.nativeElement) {
+                    setTimeout(() => {
+                        this.divElement.nativeElement.scrollTop = this.divElement.nativeElement.scrollHeight;
+                    });
+                }
+            });
+    }
+
+    ngOnDestroy(): void {
+        if (this.xtermLogSubscription) {
+            this.xtermLogSubscription.unsubscribe();
+        }
+    }
+
+    onRecoveryDevice(): void {
+        this.store.dispatch(new RecoveryDeviceAction());
+    }
+}

packages/uhk-web/src/app/services/device-renderer.service.ts

@@ -46,6 +46,10 @@ export class DeviceRendererService {
         this.ipcRenderer.send(IpcEvents.device.startConnectionPoller);
     }
 
+    recoveryDevice(): void {
+        this.ipcRenderer.send(IpcEvents.device.recoveryDevice);
+    }
+
     private registerEvents(): void {
         this.ipcRenderer.on(IpcEvents.device.deviceConnectionStateChanged, (event: string, arg: DeviceConnectionState) => {
             this.dispachStoreAction(new ConnectionStateChangedAction(arg));

packages/uhk-web/src/app/services/uhk-device-bootloader-not-active.guard.ts

@@ -0,0 +1,24 @@
+import { CanActivate, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/map';
+
+import { AppState, bootloaderActive } from '../store';
+
+@Injectable()
+export class UhkDeviceBootloaderNotActiveGuard implements CanActivate {
+
+    constructor(private store: Store<AppState>, private router: Router) { }
+
+    canActivate(): Observable<boolean> {
+        return this.store.select(bootloaderActive)
+            .do(active => {
+                if (!active) {
+                    this.router.navigate(['/']);
+                }
+            });
+    }
+}

packages/uhk-web/src/app/shared.module.ts

@@ -17,7 +17,8 @@ import {
     DeviceFirmwareComponent,
     MouseSpeedComponent,
     LEDBrightnessComponent,
-    RestoreConfigurationComponent
+    RestoreConfigurationComponent,
+    RecoveryModeComponent
 } from './components/device';
 import { KeymapAddComponent, KeymapEditComponent, KeymapHeaderComponent } from './components/keymap';
 import { LayersComponent } from './components/layers';
@@ -105,6 +106,7 @@ import { XtermComponent } from './components/xterm/xterm.component';
 import { SliderWrapperComponent } from './components/slider-wrapper/slider-wrapper.component';
 import { EditableTextComponent } from './components/editable-text/editable-text.component';
 import { Autofocus } from './directives/autofocus/autofocus.directive';
+import { UhkDeviceBootloaderNotActiveGuard } from './services/uhk-device-bootloader-not-active.guard';
 
 @NgModule({
     declarations: [
@@ -176,7 +178,8 @@ import { Autofocus } from './directives/autofocus/autofocus.directive';
         SliderWrapperComponent,
         EditableTextComponent,
         Autofocus,
-        RestoreConfigurationComponent
+        RestoreConfigurationComponent,
+        RecoveryModeComponent
     ],
     imports: [
         CommonModule,
@@ -211,7 +214,8 @@ import { Autofocus } from './directives/autofocus/autofocus.directive';
         UhkDeviceInitializedGuard,
         UhkDeviceUninitializedGuard,
         UhkDeviceLoadingGuard,
-        UhkDeviceLoadedGuard
+        UhkDeviceLoadedGuard,
+        UhkDeviceBootloaderNotActiveGuard
     ],
     exports: [
         UhkMessageComponent,

packages/uhk-web/src/app/store/actions/device.ts

@@ -26,7 +26,8 @@ export const ActionTypes = {
     MODULES_INFO_LOADED: type(PREFIX + 'module info loaded'),
     HAS_BACKUP_USER_CONFIGURATION: type(PREFIX + 'Store backup user configuration'),
     RESTORE_CONFIGURATION_FROM_BACKUP: type(PREFIX + 'Restore configuration from backup'),
-    RESTORE_CONFIGURATION_FROM_BACKUP_SUCCESS: type(PREFIX + 'Restore configuration from backup success')
+    RESTORE_CONFIGURATION_FROM_BACKUP_SUCCESS: type(PREFIX + 'Restore configuration from backup success'),
+    RECOVERY_DEVICE: type(PREFIX + 'Recovery device')
 };
 
 export class SetPrivilegeOnLinuxAction implements Action {
@@ -140,6 +141,10 @@ export class RestoreUserConfigurationFromBackupSuccessAction implements Action {
     type = ActionTypes.RESTORE_CONFIGURATION_FROM_BACKUP_SUCCESS;
 }
 
+export class RecoveryDeviceAction implements Action {
+    type = ActionTypes.RECOVERY_DEVICE;
+}
+
 export type Actions
     = SetPrivilegeOnLinuxAction
     | SetPrivilegeOnLinuxReplyAction
@@ -162,4 +167,5 @@ export type Actions
     | RestoreUserConfigurationFromBackupAction
     | HasBackupUserConfigurationAction
     | RestoreUserConfigurationFromBackupSuccessAction
+    | RecoveryDeviceAction
     ;

packages/uhk-web/src/app/store/effects/app.ts

@@ -68,7 +68,8 @@ export class ApplicationEffects {
                 new ApplyCommandLineArgsAction(appInfo.commandLineArgs),
                 new ConnectionStateChangedAction({
                     connected: appInfo.deviceConnected,
-                    hasPermission: appInfo.hasPermission
+                    hasPermission: appInfo.hasPermission,
+                    bootloaderActive: appInfo.bootloaderActive
                 })
             ];
         });

packages/uhk-web/src/app/store/effects/device.ts

@@ -24,6 +24,7 @@ import {
     ActionTypes,
     ConnectionStateChangedAction,
     HideSaveToKeyboardButton,
+    RecoveryDeviceAction,
     ResetUserConfigurationAction,
     RestoreUserConfigurationFromBackupSuccessAction,
     SaveConfigurationAction,
@@ -60,6 +61,9 @@ export class DeviceEffects {
             if (!state.hasPermission) {
                 this.router.navigate(['/privilege']);
             }
+            else if (state.bootloaderActive) {
+                this.router.navigate(['/recovery-device']);
+            }
             else if (state.connected) {
                 this.router.navigate(['/']);
             }
@@ -90,7 +94,8 @@ export class DeviceEffects {
             if (response.success) {
                 return new ConnectionStateChangedAction({
                     connected: true,
-                    hasPermission: true
+                    hasPermission: true,
+                    bootloaderActive: false
                 });
             }
 
@@ -214,6 +219,10 @@ export class DeviceEffects {
         .ofType<ResetUserConfigurationAction>(ActionTypes.RESTORE_CONFIGURATION_FROM_BACKUP)
         .map(() => new SaveConfigurationAction());
 
+    @Effect({dispatch: false}) recoveryDevice$ = this.actions$
+        .ofType<RecoveryDeviceAction>(ActionTypes.RECOVERY_DEVICE)
+        .do(() => this.deviceRendererService.recoveryDevice());
+
     constructor(private actions$: Actions,
                 private router: Router,
                 private deviceRendererService: DeviceRendererService,

packages/uhk-web/src/app/store/index.ts

@@ -79,6 +79,7 @@ export const flashFirmwareButtonDisbabled = createSelector(runningInElectron, de
 export const getHardwareModules = createSelector(deviceState, fromDevice.getHardwareModules);
 export const getBackupUserConfigurationState = createSelector(deviceState, fromDevice.getBackupUserConfigurationState);
 export const getRestoreUserConfiguration = createSelector(deviceState, fromDevice.getHasBackupUserConfiguration);
+export const bootloaderActive = createSelector(deviceState, fromDevice.bootloaderActive);
 
 export const getSideMenuPageState = createSelector(
     showAddonMenu,

packages/uhk-web/src/app/store/reducers/device.ts

@@ -17,6 +17,7 @@ import { RestoreConfigurationState } from '../../models/restore-configuration-st
 export interface State {
     connected: boolean;
     hasPermission: boolean;
+    bootloaderActive: boolean;
     saveToKeyboard: ProgressButtonState;
     updatingFirmware: boolean;
     firmwareUpdateFinished: boolean;
@@ -29,6 +30,7 @@ export interface State {
 export const initialState: State = {
     connected: true,
     hasPermission: true,
+    bootloaderActive: false,
     saveToKeyboard: initProgressButtonState,
     updatingFirmware: false,
     firmwareUpdateFinished: false,
@@ -53,7 +55,8 @@ export function reducer(state = initialState, action: Action) {
             return {
                 ...state,
                 connected: data.connected,
-                hasPermission: data.hasPermission
+                hasPermission: data.hasPermission,
+                bootloaderActive: data.bootloaderActive
             };
         }
 
@@ -193,6 +196,13 @@ export function reducer(state = initialState, action: Action) {
                 hasBackupUserConfiguration: false
             };
 
+        case ActionTypes.RECOVERY_DEVICE: {
+            return {
+                ...state,
+                updatingFirmware: true,
+                log: [{message: '', cssClass: XtermCssClass.standard}]
+            };
+        }
         default:
             return state;
     }
@@ -212,3 +222,4 @@ export const getBackupUserConfigurationState = (state: State): RestoreConfigurat
         hasBackupUserConfiguration: state.hasBackupUserConfiguration
     };
 };
+export const bootloaderActive = (state: State) => state.bootloaderActive;

packages/uhk-web/src/styles.scss

@@ -155,3 +155,25 @@ pre {
         }
     }
 }
+
+.flex-container {
+    height: 100%;
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-grow {
+    background-color: black;
+    overflow: auto;
+    flex: 1;
+}
+
+.flex-footer {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.ok-button {
+    min-width: 100px;
+}