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.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();
+        }
+    }
 }