[log-selection] 5 sec timeout & error handling

Author: loukaspd

src/app/components/log-selection/log-selection.component.html

@@ -11,7 +11,7 @@
     <input type="text" nz-input placeholder="connect to remote computer" [(ngModel)]="remoteComputer" />
 </nz-input-group>
 <ng-template #suffixButton>
-<button (click)="search()" nz-button nzType="primary" nzSearch>Apply</button>
+<button (click)="UiOnSearchClicked()" nz-button nzType="primary" nzSearch>Apply</button>
 </ng-template>
 
 
@@ -24,6 +24,6 @@
 >
     <ng-template #itemRef let-item>
         <li nz-list-item [nzActions]="[opAction]" [nzContent]="item.log + ' ('+ item.entries +')'" nzNoFlex></li>
-        <ng-template #opAction><a (click)="onItemSelected(item)">select</a></ng-template>
+        <ng-template #opAction><a (click)="UiOnItemSelected(item)">select</a></ng-template>
     </ng-template>
 </nz-list>

src/app/components/log-selection/log-selection.component.ts

@@ -1,10 +1,11 @@
 //#region imports
-import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { EventLog } from '../../types/EventLog';
 import { PowershellService } from '../../services/powershell/powershell.service';
-import { NzModalRef } from 'ng-zorro-antd';
+import { NzModalRef, NzModalService } from 'ng-zorro-antd';
 import { Subscription, fromEvent } from 'rxjs';
 import { map, debounceTime } from 'rxjs/operators';
+import { PowershellCommands } from '../../services/powershell/powershell-commands';
 //#endregion imports
 
 @Component({
@@ -14,10 +15,10 @@ import { map, debounceTime } from 'rxjs/operators';
 export class LogSelectionComponent implements OnInit, OnDestroy {
 
     //#region Constructor & Properties
-    constructor(private psService: PowershellService
-        , private modal: NzModalRef
-    ) { }
-    private _searchSubscription: Subscription;
+    constructor(private modalService: NzModalService
+        , private modal: NzModalRef) { }
+
+    private _searchInputSub: Subscription;
 
     public loading: boolean= true;
     private _logers: EventLog[] = [];
@@ -29,27 +30,27 @@ export class LogSelectionComponent implements OnInit, OnDestroy {
 
     //#region Component Methods
     ngOnInit(): void {
-        this.search();
+        this._search();
         this._setupSearch();
     }
 
     ngOnDestroy(): void {
-        if (!!this._searchSubscription) this._searchSubscription.unsubscribe();
+        if (!!this._searchInputSub) this._searchInputSub.unsubscribe();
     }
     //#endregion Component Methods
 
 
     //#region Implementation
     private _setupSearch() :void {
-        if (!!this._searchSubscription) return;
+        if (!!this._searchInputSub) return;
 
         const target = document.getElementById('searchInput');
         if (!target) {
             setTimeout(() => this._setupSearch(), 300);
             return;
         } 
 
-        this._searchSubscription = fromEvent(target, 'keyup')
+        this._searchInputSub = fromEvent(target, 'keyup')
         .pipe(
             map((e: any) => e.target.value)
             ,debounceTime(300)
@@ -60,14 +61,22 @@ export class LogSelectionComponent implements OnInit, OnDestroy {
         });
     }
 
-    private search(): void {
+    private _search(): void {
+        this._logers = [];
         this.loading = true;
-        this.psService.getEventLogs(this.remoteComputer)
+        PowershellCommands.getEventLogs(this.remoteComputer)
         .then((evs: EventLog[]) => {
             this._logers = evs;
             this.loading = false;
             this._applyFiltering();
-        });
+        })
+        .catch((e: Error) => {
+            this.modalService.error({
+                nzTitle: 'Something went wrong'
+                ,nzContent: 'press "apply" button to retry'
+              });
+        })
+        .finally(() => this.loading = false);
     }
 
     private _applyFiltering(): void {
@@ -78,9 +87,13 @@ export class LogSelectionComponent implements OnInit, OnDestroy {
 
 
     //#region UiCallbacks
-    public onItemSelected(item: EventLog): void {
+    public UiOnItemSelected(item: EventLog): void {
         this.modal.close(item);
     }
+
+    public UiOnSearchClicked(): void {
+        this._search();
+    }
     //#endregion UiCallbacks
 
 }

src/app/services/powershell/powershell-commands.ts

@@ -18,7 +18,7 @@ export class PowershellCommands {
         if (computerName) command += ` -ComputerName "${computerName}"`;
         command += ' -List';
 
-        return PsCommandExecutor.executeCommand(command)
+        return PsCommandExecutor.executeCommand(command, 5)
         .then(output => PowershellCommands._parseEventViewersList(output))
         .then(events => {
             events.forEach(e => e.computerName = computerName);

src/app/services/powershell/powershell.service.ts

@@ -12,10 +12,6 @@ import { EventFiltersVm } from '../../types/viewmodels/EventFiltersVm';
 export class PowershellService {
     //#region Public Api
 
-    public getEventLogs(computerName: string): Promise<EventLog[]> {
-        return PowershellCommands.getEventLogs(computerName);
-    }
-
     public getEvents(
         eventLog: EventLog
         , filters:EventFiltersVm): Promise<Event[]> {