feat(device): flash device firmware from Agent (#499)

* add dataModelVersion, usbProtocolVersion, slaveProtocolVersion

* read the package.json at appstart

* flash firmware

* update firmware

* fix extra resource path

* fix import modules

* update lock files

* fix imports

* terminal window

* exclude tmp folder from git repo

* ok button

* auto scroll in xterm

* fix maxTry count calculation

* optimize logging

* optimize timeout

* readSync

* Add extra delay

* fix async call

* fix error message in log

* fix ok button disable state

* retry

* list devices

* close device after reenumeration

* retry snooze

* kboot maxtry 10

* retry 100

* remove deprecated toPayload ngrx helper

* flash firmware with custom file

* fix tslint

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

@@ -1,7 +1,40 @@
-<h1>
-    <i class="fa fa-sliders"></i>
-    <span>Firmware</span>
-</h1>
-<p>
-    Coming soon ...
-</p>
+<div class="full-height">
+    <div class="flex-container">
+        <div>
+
+            <h1>
+                <i class="fa fa-sliders"></i>
+                <span>Firmware</span>
+            </h1>
+            <p>
+                Flash firmware {{ (getAgentVersionInfo$ | async).firmwareVersion }} (bundled with Agent)
+                <button class="btn btn-primary"
+                        [disabled]="flashFirmwareButtonDisbabled$ | async"
+                        (click)="onUpdateFirmware()">Flash firmware
+                </button>
+            </p>
+
+            <p>
+                Flash firmware file <input id="firmware-file-select"
+                                           type="file"
+                                           [disabled]="flashFirmwareButtonDisbabled$ | async"
+                                           (change)="changeFile($event)">
+                <button class="btn btn-primary"
+                        [disabled]="flashFirmwareButtonDisbabled$ | async"
+                        (click)="onUpdateFirmwareWithFile()">Flash firmware
+                </button>
+            </p>
+        </div>
+
+        <div class="flex-grow" #scrollMe>
+            <xterm [logs]="xtermLog$ | async"></xterm>
+        </div>
+        <div class="footer">
+            <button type="button"
+                    class="btn btn-primary ok-button"
+                    [disabled]="firmwareOkButtonDisabled$ | async"
+                    (click)="onOkButtonClick()">OK
+            </button>
+        </div>
+    </div>
+</div>

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

@@ -3,3 +3,25 @@
     display: block;
     height: 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/firmware/device-firmware.component.ts

@@ -1,4 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
+import { VersionInformation } from 'uhk-common';
+
+import { AppState, firmwareOkButtonDisabled, flashFirmwareButtonDisbabled, getAgentVersionInfo, xtermLog } from '../../../store';
+import { UpdateFirmwareAction, UpdateFirmwareOkButtonAction, UpdateFirmwareWithAction } from '../../../store/actions/device';
+import { XtermLog } from '../../../models/xterm-log';
 
 @Component({
     selector: 'device-firmware',
@@ -8,5 +16,63 @@ import { Component } from '@angular/core';
         'class': 'container-fluid'
     }
 })
-export class DeviceFirmwareComponent {
+export class DeviceFirmwareComponent implements OnDestroy {
+    flashFirmwareButtonDisbabled$: Observable<boolean>;
+    xtermLog$: Observable<Array<XtermLog>>;
+    xtermLogSubscription: Subscription;
+    getAgentVersionInfo$: Observable<VersionInformation>;
+    firmwareOkButtonDisabled$: Observable<boolean>;
+
+    arrayBuffer: Uint8Array;
+    @ViewChild('scrollMe') divElement: ElementRef;
+
+    constructor(private store: Store<AppState>) {
+        this.flashFirmwareButtonDisbabled$ = store.select(flashFirmwareButtonDisbabled);
+        this.xtermLog$ = store.select(xtermLog);
+        this.xtermLogSubscription = this.xtermLog$.subscribe(() => {
+            if (this.divElement && this.divElement.nativeElement) {
+                setTimeout(() => {
+                    this.divElement.nativeElement.scrollTop = this.divElement.nativeElement.scrollHeight;
+                });
+            }
+        });
+        this.getAgentVersionInfo$ = store.select(getAgentVersionInfo);
+        this.firmwareOkButtonDisabled$ = store.select(firmwareOkButtonDisabled);
+    }
+
+    ngOnDestroy(): void {
+        this.xtermLogSubscription.unsubscribe();
+    }
+
+    onUpdateFirmware(): void {
+        this.store.dispatch(new UpdateFirmwareAction());
+    }
+
+    onUpdateFirmwareWithFile(): void {
+        if (!this.arrayBuffer) {
+            return;
+        }
+
+        this.store.dispatch(new UpdateFirmwareWithAction(Array.prototype.slice.call(this.arrayBuffer)));
+    }
+
+    onOkButtonClick(): void {
+        this.store.dispatch(new UpdateFirmwareOkButtonAction());
+    }
+
+    changeFile(event): void {
+        const files = event.srcElement.files;
+
+        if (files.length === 0) {
+            this.arrayBuffer = null;
+
+            return;
+        }
+
+        const fileReader = new FileReader();
+        fileReader.onloadend = function () {
+            this.arrayBuffer = new Uint8Array(fileReader.result);
+        }.bind(this);
+        fileReader.readAsArrayBuffer(files[0]);
+    }
 }

packages/uhk-web/src/app/components/side-menu/side-menu.component.html

@@ -19,17 +19,20 @@
                 <ul [@toggler]="animation['configuration']">
                     <li class="sidebar__level-2--item">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                            <a [routerLink]="['/device/mouse-speed']">Mouse speed</a>
+                            <a [routerLink]="['/device/mouse-speed']"
+                               [class.disabled]="updatingFirmware$ | async">Mouse speed</a>
                         </div>
                     </li>
                     <li class="sidebar__level-2--item">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                            <a [routerLink]="['/device/configuration']">Configuration</a>
+                            <a [routerLink]="['/device/configuration']"
+                               [class.disabled]="updatingFirmware$ | async">Configuration</a>
                         </div>
                     </li>
                     <li class="sidebar__level-2--item">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                            <a [routerLink]="['/device/firmware']">Firmware</a>
+                            <a [routerLink]="['/device/firmware']"
+                               [class.disabled]="updatingFirmware$ | async">Firmware</a>
                         </div>
                     </li>
                 </ul>
@@ -37,17 +40,22 @@
             <li class="sidebar__level-1--item">
                 <div class="sidebar__level-1">
                     <i class="fa fa-keyboard-o"></i> Keymaps
-                    <a [routerLink]="['/keymap/add']" class="btn btn-default pull-right btn-sm">
-                                    <i class="fa fa-plus"></i>
-                                </a>
-                    <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'keymap')"></i>
+                    <a [routerLink]="['/keymap/add']"
+                       class="btn btn-default pull-right btn-sm"
+                       [class.disabled]="updatingFirmware$ | async">
+                        <i class="fa fa-plus"></i>
+                    </a>
+                    <i class="fa fa-chevron-up pull-right"
+                       (click)="toggleHide($event, 'keymap')"></i>
                 </div>
                 <ul [@toggler]="animation['keymap']">
                     <li *ngFor="let keymap of keymaps$ | async" class="sidebar__level-2--item">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                            <a [routerLink]="['/keymap', keymap.abbreviation]">{{keymap.name}}</a>
-                            <i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav" title="This is the default keymap which gets activated when powering the keyboard."
-                                data-toggle="tooltip" data-placement="bottom"></i>
+                            <a [routerLink]="['/keymap', keymap.abbreviation]"
+                               [class.disabled]="updatingFirmware$ | async">{{keymap.name}}</a>
+                            <i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav"
+                               title="This is the default keymap which gets activated when powering the keyboard."
+                               data-toggle="tooltip" data-placement="bottom"></i>
                         </div>
                     </li>
                 </ul>
@@ -55,15 +63,18 @@
             <li class="sidebar__level-1--item">
                 <div class="sidebar__level-1">
                     <i class="fa fa-play"></i> Macros
-                    <a (click)="addMacro()" class="btn btn-default pull-right btn-sm">
-                                    <i class="fa fa-plus"></i>
-                                </a>
+                    <a (click)="addMacro()"
+                       class="btn btn-default pull-right btn-sm"
+                       [class.disabled]="updatingFirmware$ | async">
+                        <i class="fa fa-plus"></i>
+                    </a>
                     <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'macro')"></i>
                 </div>
                 <ul [@toggler]="animation['macro']">
                     <li *ngFor="let macro of macros$ | async" class="sidebar__level-2--item">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                            <a [routerLink]="['/macro', macro.id]">{{macro.name}}</a>
+                            <a [routerLink]="['/macro', macro.id]"
+                               [class.disabled]="updatingFirmware$ | async">{{macro.name}}</a>
                         </div>
                     </li>
                 </ul>
@@ -76,22 +87,26 @@
                 <ul [@toggler]="animation['addon']">
                     <li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                            <a [routerLink]="['/add-on', 'Key cluster']">Key cluster</a>
+                            <a [routerLink]="['/add-on', 'Key cluster']"
+                               [class.disabled]="updatingFirmware$ | async">Key cluster</a>
                         </div>
                     </li>
                     <li class="sidebar__level-2--item" data-name="Trackball" data-abbrev="">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                            <a [routerLink]="['/add-on', 'Trackball']">Trackball</a>
+                            <a [routerLink]="['/add-on', 'Trackball']"
+                               [class.disabled]="updatingFirmware$ | async">Trackball</a>
                         </div>
                     </li>
                     <li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev="">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                            <a [routerLink]="['/add-on', 'Touchpad']">Touchpad</a>
+                            <a [routerLink]="['/add-on', 'Touchpad']"
+                               [class.disabled]="updatingFirmware$ | async">Touchpad</a>
                         </div>
                     </li>
                     <li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev="">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                            <a [routerLink]="['/add-on', 'Trackpoint']">Trackpoint</a>
+                            <a [routerLink]="['/add-on', 'Trackpoint']"
+                               [class.disabled]="updatingFirmware$ | async">Trackpoint</a>
                         </div>
                     </li>
                 </ul>

packages/uhk-web/src/app/components/side-menu/side-menu.component.ts

@@ -1,15 +1,16 @@
-import { AfterContentInit, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import { AfterContentInit, Component, ElementRef, OnDestroy, Renderer2, ViewChild } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Keymap, Macro } from 'uhk-common';
 
 import { Store } from '@ngrx/store';
 
 import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/let';
 
-import { AppState, getDeviceName, showAddonMenu, runningInElectron } from '../../store';
+import { AppState, getDeviceName, runningInElectron, showAddonMenu, updatingFirmware } from '../../store';
 import { MacroActions } from '../../store/actions';
 import { getKeymaps, getMacros } from '../../store/reducers/user-configuration';
 import * as util from '../../util';
@@ -31,15 +32,19 @@ import { RenameUserConfigurationAction } from '../../store/actions/user-config';
     templateUrl: './side-menu.component.html',
     styleUrls: ['./side-menu.component.scss']
 })
-export class SideMenuComponent implements AfterContentInit {
+export class SideMenuComponent implements AfterContentInit, OnDestroy {
     showAddonMenu$: Observable<boolean>;
     runInElectron$: Observable<boolean>;
+    updatingFirmware$: Observable<boolean>;
 
     deviceName$: Observable<string>;
+    deviceNameSubscription: Subscription;
     keymaps$: Observable<Keymap[]>;
     macros$: Observable<Macro[]>;
     animation: { [key: string]: 'active' | 'inactive' };
     deviceNameValue: string;
+    updatingFirmware = false;
+    updatingFirmwareSubscription: Subscription;
     @ViewChild('deviceName') deviceName: ElementRef;
 
     constructor(private store: Store<AppState>, private renderer: Renderer2) {
@@ -66,17 +71,30 @@ export class SideMenuComponent implements AfterContentInit {
         this.showAddonMenu$ = this.store.select(showAddonMenu);
         this.runInElectron$ = this.store.select(runningInElectron);
         this.deviceName$ = store.select(getDeviceName);
-        this.deviceName$.subscribe(name => {
+        this.deviceNameSubscription = this.deviceName$.subscribe(name => {
             this.deviceNameValue = name;
             this.setDeviceName();
         });
+        this.updatingFirmware$ = store.select(updatingFirmware);
+        this.updatingFirmwareSubscription = this.updatingFirmware$.subscribe(updating => {
+            this.updatingFirmware = updating;
+        });
     }
 
     ngAfterContentInit(): void {
         this.setDeviceName();
     }
 
+    ngOnDestroy(): void {
+        this.deviceNameSubscription.unsubscribe();
+        this.updatingFirmwareSubscription.unsubscribe();
+    }
+
     toggleHide(event: Event, type: string) {
+        if (this.updatingFirmware) {
+            return;
+        }
+
         const header: DOMTokenList = (<Element>event.target).classList;
         let show = false;
 

packages/uhk-web/src/app/components/xterm/xterm.component.html

@@ -0,0 +1,5 @@
+<div class="wrapper">
+    <ul class="list-unstyled">
+        <li *ngFor="let log of logs" [ngClass]="log.cssClass"><span>{{ log.message }}</span></li>
+    </ul>
+</div>

packages/uhk-web/src/app/components/xterm/xterm.component.scss

@@ -0,0 +1,24 @@
+:host {
+    background-color: yellow;
+}
+
+.wrapper {
+    background-color: black;
+}
+
+.xterm-standard {
+    color: white;
+}
+
+.xterm-error {
+    color: red;
+}
+
+ul {
+    li {
+        padding-left: 5px;
+        span:before {
+            content: '$ ';
+        }
+    }
+}

packages/uhk-web/src/app/components/xterm/xterm.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { XtermLog } from '../../models/xterm-log';
+
+@Component({
+    selector: 'xterm',
+    templateUrl: './xterm.component.html',
+    styleUrls: ['./xterm.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class XtermComponent {
+    @Input() logs: Array<XtermLog> = [];
+}