Fix button visibility issue

[src/xds/xds-agent.git] / webapp / src / app / pages / sdks / sdk-management / sdk-install.component.ts

diff --git a/webapp/src/app/pages/sdks/sdk-management/sdk-install.component.ts b/webapp/src/app/pages/sdks/sdk-management/sdk-install.component.ts
index e2e334a..68d87d1 100644 (file)
--- a/webapp/src/app/pages/sdks/sdk-management/sdk-install.component.ts
+++ b/webapp/src/app/pages/sdks/sdk-management/sdk-install.component.ts
@@ -17,12 +17,13 @@
 */
 
 import { Component, OnInit, Input, ViewChild, AfterViewChecked, ElementRef } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { AlertService } from '../../../@core-xds/services/alert.service';
 import { SdkService, ISdk } from '../../../@core-xds/services/sdk.service';
 
+import 'rxjs/add/operator/bufferTime';
+
 @Component({
   selector: 'xds-sdk-install-modal',
   template: `
@@ -41,8 +42,8 @@ import { SdkService, ISdk } from '../../../@core-xds/services/sdk.service';
         <textarea rows="20" class="textarea-scroll" #scrollOutput [innerHtml]="installOutput"></textarea>
       </div>
       <div class="col-12 text-center">
-        <button type="button" class="btn" tabindex="1"
-        [ngClass]="(btnName=='Cancel')?'btn-default':'btn-primary'"
+        <button type="button" class="btn btn-md" tabindex="1"
+        [ngClass]="(btnName=='Cancel')?'btn-secondary':'btn-primary'"
         (click)="onBtnClick()">{{ btnName }}</button>
       </div>
     </div>
@@ -71,7 +72,6 @@ export class SdkInstallComponent implements OnInit {
 
   constructor(
     private modalRef: NgbActiveModal,
-    private sanitizer: DomSanitizer,
     private alert: AlertService,
     private sdkSvr: SdkService,
   ) { }
@@ -84,32 +84,40 @@ export class SdkInstallComponent implements OnInit {
   ngOnInit() {
     this.instStatus = 'in progress...';
 
-    this.onInstallSub = this.sdkSvr.onInstall().subscribe(ev => {
-      if (ev.exited) {
-        this.btnName = 'OK';
-        this.instStatus = '<font color="green"> Done. </font>';
+    this.onInstallSub = this.sdkSvr.onInstall()
+      .bufferTime(500)  // prevent browser freeze
+      .subscribe(evts => {
+        let out = '';
+        evts.forEach(ev => {
+          if (ev.exited) {
+            this.btnName = 'OK';
+            this.instStatus = '<font color="green"> Done. </font>';
+
+            if (ev.code === 0) {
+              this.alert.info('SDK ' + ev.sdk.name + ' successfully installed.');
 
-        if (ev.code === 0) {
-          this.alert.info('SDK ' + ev.sdk.name + ' successfully installed.');
+            } else {
+              if (ev.sdk.lastError !== '') {
+                this.alert.error(ev.sdk.lastError);
+              } else {
+                this.alert.error('SDK ' + ev.sdk.name + ' installation failed. ' + ev.error);
+              }
+            }
 
-        } else {
-          if (ev.sdk.lastError !== '') {
-            this.alert.error(ev.sdk.lastError);
           } else {
-            this.alert.error('SDK ' + ev.sdk.name + ' installation failed. ' + ev.error);
+            if (ev.stdout !== '') {
+              out += ev.stdout;
+            }
+            if (ev.stderr !== '') {
+              out += ev.stderr;
+            }
           }
+        });
+        if (out !== '') {
+          this.installOutput += out;
+          this._scrollToBottom();
         }
-
-      } else {
-        if (ev.stdout !== '') {
-          this.installOutput += ev.stdout;
-        }
-        if (ev.stderr !== '') {
-          this.installOutput += ev.stderr;
-        }
-        this._scrollToBottom();
-      }
-    });
+      });
   }
 
   onBtnClick(): void {