commit bf4e8401ad24c06f51a07032b7acfa29e3d9d8e1
author Matteo Scandolo <teo@opennetworking.org> Mon Jun 24 12:22:49 2019 -0700
committer Matteo Scandolo <teo@opennetworking.org> Mon Jun 24 14:29:04 2019 -0700
tree 5fc268fa71ffb1120c87c6c08824686e61372fc8
parent b310f3c80024217f3098cbf5f5549bda7a98d091

[SEBA-747] Upgraded loader to show real-time progress istead of using a time-out

Change-Id: Iafea32e3b15461dc8b6859f0e4b1813150e362d5

src/app/core/loader/loader.ts

diff --git a/src/app/core/loader/loader.ts b/src/app/core/loader/loader.ts
index 3606ca8..c8def42 100644
--- a/src/app/core/loader/loader.ts
+++ b/src/app/core/loader/loader.ts
@@ -27,6 +27,7 @@
     '$rootScope',
     '$location',
     '$timeout',
+    '$interval',
     '$state',
     'AuthService',
     'XosConfig',
@@ -35,20 +36,24 @@
   ];
 
   public loader: boolean = true;
+  public message: string = 'Loading data...';
   public error: string;
 
+  private getMessageInterval: ng.IPromise<any>;
+
   constructor (
     private $log: ng.ILogService,
     private $rootScope: ng.IScope,
     private $location: ng.ILocationService,
     private $timeout: ng.ITimeoutService,
+    private $interval: ng.IIntervalService,
     private $state: ng.ui.IStateService,
     private XosAuthService: IXosAuthService,
     private XosConfig: any,
     private XosModelDiscoverer: IXosModelDiscovererService,
     private XosOnboarder: IXosOnboarder
   ) {
-
+    this.getMessage();
     this.run();
   }
 
@@ -119,11 +124,34 @@
         break;
     }
   }
+
+  /**
+   * This method query the model-discoverer service to have the status of the loading
+   */
+  public getMessage() {
+    this.getMessageInterval = this.$interval(() => {
+      this.message = this.XosModelDiscoverer.getStatusMessage();
+    }, 1000);
+    this.message = this.XosModelDiscoverer.getStatusMessage();
+  }
+
+  $onDestroy() {
+    this.$interval.cancel(this.getMessageInterval);
+  }
 }
 
 export const xosLoader: angular.IComponentOptions = {
   template: `
-    <div ng-show="vm.loader" class="loader"></div>
+    <div class="loader-container">
+      <div ng-show="vm.loader" class="loader"></div>
+    </div>
+    <div class="row">
+      <div class="col-sm-6 col-sm-offset-3">
+        <div class="alert alert-accent">
+          {{ vm.message }}
+        </div>
+      </div>
+    </div>
     <div class="row" ng-show="vm.error == 'chameleon'">
       <div class="col-sm-6 col-sm-offset-3">
         <div class="alert alert-danger">