feat: scroll to the end of the firmware log when success of faild panel visible (#1018)

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

@@ -27,7 +27,7 @@
                              label="Choose firmware file and flash it"></file-upload>
             </p>
 
-            <div *ngIf="firmwareUpgradeFailed$ | async"
+            <div *ngIf="firmwareUpgradeFailed"
                  class="alert alert-danger"
                  role="alert">
                 <p>Firmware update failed. Disconnect every USB device from your computer (including USB hubs, KVM switches, USB dongles, and everything else), then connect only your UHK and retry.</p>
@@ -35,7 +35,7 @@
                 <p>If you've tried the above and the update still keeps failing, please <a class="link-github" [href]="firmwareGithubIssueUrl" externalUrl>create a GitHub issue</a>, and attach the update log.</p>
             </div>
 
-            <div *ngIf="firmwareUpgradeSuccess$ | async"
+            <div *ngIf="firmwareUpgradeSuccess"
                  class="alert alert-success"
                  role="alert">
                 <p>Firmware update succeeded.</p>

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, ViewChild } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable, Subscription } from 'rxjs';
 import { Constants, HardwareModules, VersionInformation } from 'uhk-common';
@@ -17,6 +17,7 @@ import {
 import { UpdateFirmwareAction, UpdateFirmwareWithAction } from '../../../store/actions/device';
 import { XtermLog } from '../../../models/xterm-log';
 import { UploadFileData } from '../../../models/upload-file-data';
+import { XtermComponent } from '../../xterm/xterm.component';
 
 @Component({
     selector: 'device-firmware',
@@ -30,30 +31,41 @@ export class DeviceFirmwareComponent implements OnDestroy {
     flashFirmwareButtonDisbabled$: Observable<boolean>;
     xtermLog$: Observable<Array<XtermLog>>;
     getAgentVersionInfo$: Observable<VersionInformation>;
-    hardwareModulesSubscription: Subscription;
     hardwareModules: HardwareModules;
     runningOnNotSupportedWindows$: Observable<boolean>;
     firmwareUpgradeAllowed$: Observable<boolean>;
-    firmwareUpgradeFailed$: Observable<boolean>;
-    firmwareUpgradeSuccess$: Observable<boolean>;
+
     firmwareGithubIssueUrl: string;
+    firmwareUpgradeFailed: boolean;
+    firmwareUpgradeSuccess: boolean;
+
+    @ViewChild(XtermComponent, { static: false })
+    xtermRef: XtermComponent;
+
+    private subscription = new Subscription();
 
     constructor(private store: Store<AppState>) {
         this.flashFirmwareButtonDisbabled$ = store.select(flashFirmwareButtonDisbabled);
         this.xtermLog$ = store.select(xtermLog);
         this.getAgentVersionInfo$ = store.select(getAgentVersionInfo);
-        this.hardwareModulesSubscription = store.select(getHardwareModules).subscribe(data => {
+        this.subscription.add(store.select(getHardwareModules).subscribe(data => {
             this.hardwareModules = data;
-        });
+        }));
         this.runningOnNotSupportedWindows$ = store.select(runningOnNotSupportedWindows);
         this.firmwareUpgradeAllowed$ = store.select(firmwareUpgradeAllowed);
-        this.firmwareUpgradeFailed$ = store.select(firmwareUpgradeFailed);
-        this.firmwareUpgradeSuccess$ = store.select(firmwareUpgradeSuccess);
+        this.subscription.add(store.select(firmwareUpgradeFailed).subscribe(data => {
+            this.firmwareUpgradeFailed = data;
+            this.scrollToTheEndOfTheLogs();
+        }));
+        this.subscription.add(store.select(firmwareUpgradeSuccess).subscribe(data => {
+            this.firmwareUpgradeSuccess = data;
+            this.scrollToTheEndOfTheLogs();
+        }));
         this.firmwareGithubIssueUrl = Constants.FIRMWARE_GITHUB_ISSUE_URL;
     }
 
     ngOnDestroy(): void {
-        this.hardwareModulesSubscription.unsubscribe();
+        this.subscription.unsubscribe();
     }
 
     onUpdateFirmware(): void {
@@ -63,4 +75,10 @@ export class DeviceFirmwareComponent implements OnDestroy {
     changeFile(data: UploadFileData): void {
         this.store.dispatch(new UpdateFirmwareWithAction(data.data));
     }
+
+    private scrollToTheEndOfTheLogs(): void {
+        if (this.xtermRef) {
+            this.xtermRef.scrollToTheEnd();
+        }
+    }
 }

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

@@ -13,10 +13,8 @@ export class XtermComponent implements OnChanges {
     @ViewChild('scrollMe', { static: false }) divElement: ElementRef;
 
     ngOnChanges(changes: SimpleChanges): void {
-        if (changes.logs && this.divElement && this.divElement.nativeElement) {
-            setTimeout(() => {
-                this.divElement.nativeElement.scrollTop = this.divElement.nativeElement.scrollHeight;
-            });
+        if (changes.logs) {
+            this.scrollToTheEnd();
         }
     }
 
@@ -24,4 +22,11 @@ export class XtermComponent implements OnChanges {
         return this.logs.reduce((value, line) => value + line.message + '\n', '');
     }
 
+    scrollToTheEnd(): void {
+        setTimeout(() => {
+            if (this.divElement && this.divElement.nativeElement) {
+                this.divElement.nativeElement.scrollTop = this.divElement.nativeElement.scrollHeight;
+            }
+        });
+    }
 }