You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2019/12/24 10:52:19 UTC

[incubator-dlab] branch DLAB-1385 created (now ae8d5bd)

This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a change to branch DLAB-1385
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git.


      at ae8d5bd  [DLAB-1385]:Added global progress bar

This branch includes the following new commits:

     new 79aa640  [DLAB-1385]: Added progress bar service and component
     new ae8d5bd  [DLAB-1385]:Added global progress bar

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org


[incubator-dlab] 01/02: [DLAB-1385]: Added progress bar service and component

Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch DLAB-1385
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git

commit 79aa6403ad0889b200dab70978cf5231220678b5
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Mon Dec 23 16:32:42 2019 +0200

    [DLAB-1385]: Added progress bar service and component
---
 .../app/core/services/progress-bar.service.spec.ts | 12 ++++++++
 .../src/app/core/services/progress-bar.service.ts  | 23 +++++++++++++++
 .../src/app/shared/navbar/navbar.component.html    |  1 +
 .../src/app/shared/navbar/navbar.component.ts      | 19 +++++++++++--
 .../webapp/src/app/shared/progress-bar/index.ts    | 33 ++++++++++++++++++++++
 .../progress-bar/progress-bar.component.html       |  2 ++
 .../progress-bar/progress-bar.component.scss       |  0
 .../progress-bar/progress-bar.component.spec.ts    | 25 ++++++++++++++++
 .../shared/progress-bar/progress-bar.component.ts  | 18 ++++++++++++
 .../webapp/src/assets/styles/app-loading.scss      |  5 ++++
 10 files changed, 135 insertions(+), 3 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.spec.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.spec.ts
new file mode 100644
index 0000000..021b583
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProgressBarService } from './progress-bar.service';
+
+describe('ProgressBarService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ProgressBarService = TestBed.get(ProgressBarService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.ts
new file mode 100644
index 0000000..d2ec24d
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import {Subject} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProgressBarService {
+  public showProgressBar = new Subject();
+
+  constructor() { }
+
+  public toggleProgressBar(value) {
+    this.showProgressBar.next(value);
+  }
+
+  public stopProgressBar() {
+    this.showProgressBar.next(false);
+  }
+
+  public startProgressBar() {
+    this.showProgressBar.next(true);
+  }
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
index ca89f33..31e9176 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
@@ -18,6 +18,7 @@
   -->
 
 <div class="nav-bar" [hidden]="!isLoggedIn">
+  <mat-progress-bar *ngIf="showProgressBar" mode="indeterminate" ></mat-progress-bar>
   <div class="menu-area" *ngIf="healthStatus">
 
     <button class="hamburger" (click)="collapse()">
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
index 7c61100..ac9cb67 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
@@ -19,7 +19,7 @@
 
 import { Component, ViewEncapsulation, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { Subscription, timer, interval } from 'rxjs';
+import {Subscription, timer, interval, Subject} from 'rxjs';
 import { ToastrService } from 'ngx-toastr';
 import { RouterOutlet } from '@angular/router';
 
@@ -38,6 +38,7 @@ import {
   animateChild,
   state
 } from '@angular/animations';
+import {ProgressBarService} from "../../core/services/progress-bar.service";
 
 @Component({
   selector: 'dlab-navbar',
@@ -83,9 +84,10 @@ export class NavbarComponent implements OnInit, OnDestroy {
   isLoggedIn: boolean = false;
   metadata: any;
   isExpanded: boolean = true;
-
+  public showProgressBar: any;
   healthStatus: GeneralEnvironmentStatus;
   subscriptions: Subscription = new Subscription();
+  showProgressBarSubscr = new Subscription();
 
   constructor(
     public toastr: ToastrService,
@@ -94,10 +96,12 @@ export class NavbarComponent implements OnInit, OnDestroy {
     private healthStatusService: HealthStatusService,
     private schedulerService: SchedulerService,
     private storage: StorageService,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    private progressBarService: ProgressBarService,
   ) { }
 
   ngOnInit() {
+    this.showProgressBarSubscr =  this.progressBarService.showProgressBar.subscribe(isProgressBarVissible => this.showProgressBar = isProgressBarVissible);
     this.applicationSecurityService.loggedInStatus.subscribe(response => {
       this.subscriptions.unsubscribe();
       this.subscriptions.closed = false;
@@ -118,6 +122,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
+    this.showProgressBarSubscr.unsubscribe();
   }
 
   public getRouterOutletState(routerOutlet: RouterOutlet) {
@@ -128,6 +133,14 @@ export class NavbarComponent implements OnInit, OnDestroy {
     return this.storage.getUserName() || '';
   }
 
+  public startProgressBar() {
+    this.progressBarService.startProgressBar()
+  }
+
+  public stopProgressBar() {
+    this.progressBarService.stopProgressBar()
+  }
+
   logout_btnClick(): void {
     this.healthStatusService.resetStatusValue();
     this.applicationSecurityService.logout().subscribe(
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/index.ts b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/index.ts
new file mode 100644
index 0000000..689becc
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/index.ts
@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { MaterialModule } from '../material.module';
+import {ProgressBarComponent} from "./progress-bar.component";
+
+export * from './progress-bar.component';
+
+@NgModule({
+  imports: [
+    MaterialModule,
+  ],
+  declarations: [ProgressBarComponent],
+  exports: [ProgressBarComponent]
+})
+export class ProgressBarModule { }
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.html
new file mode 100644
index 0000000..eb9de9a
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.html
@@ -0,0 +1,2 @@
+<mat-progress-bar mode="indeterminate"></mat-progress-bar>
+
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.spec.ts b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.spec.ts
new file mode 100644
index 0000000..f41343a
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressBarComponent } from './progress-bar.component';
+
+describe('ProgressBarComponent', () => {
+  let component: ProgressBarComponent;
+  let fixture: ComponentFixture<ProgressBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProgressBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProgressBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.ts
new file mode 100644
index 0000000..0e99c67
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {ProgressBarService} from "../../core/services/progress-bar.service";
+
+@Component({
+  selector: 'dlab-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  styleUrls: ['./progress-bar.component.scss']
+})
+export class ProgressBarComponent implements OnInit {
+  constructor(
+    public progressBarService: ProgressBarService,
+  ) { }
+
+  ngOnInit() {
+
+  }
+}
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/app-loading.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/app-loading.scss
index 91b62c3..6fb034b 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/app-loading.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/app-loading.scss
@@ -82,3 +82,8 @@ html {
     background-size: cover;
   }
 }
+
+.nav-bar .mat-progress-bar {
+  position: absolute;
+  height: 2px;
+}


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org


[incubator-dlab] 02/02: [DLAB-1385]:Added global progress bar

Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch DLAB-1385
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git

commit ae8d5bd2b1755bdc510af8c943ad85957c892ff6
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Dec 24 12:51:57 2019 +0200

    [DLAB-1385]:Added global progress bar
---
 .../management-grid/management-grid.component.ts   | 13 ++++++++-
 .../project/project-list/project-list.component.ts | 23 +++++++++------
 .../app/administration/roles/roles.component.ts    | 13 +++++++--
 .../app/core/services/progress-bar.service.spec.ts | 12 --------
 .../src/app/reporting/reporting.component.ts       |  9 ++++--
 .../resources-grid/resources-grid.component.ts     |  9 ++++--
 .../src/app/shared/navbar/navbar.component.html    |  2 +-
 .../src/app/shared/navbar/navbar.component.ts      |  4 +--
 .../webapp/src/app/shared/progress-bar/index.ts    | 33 ----------------------
 .../progress-bar/progress-bar.component.html       |  2 --
 .../progress-bar/progress-bar.component.scss       |  0
 .../progress-bar/progress-bar.component.spec.ts    | 25 ----------------
 .../shared/progress-bar/progress-bar.component.ts  | 18 ------------
 13 files changed, 53 insertions(+), 110 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
index 3535fd7..85ac7cc 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
@@ -27,6 +27,7 @@ import { ConfirmationDialogType } from '../../../shared';
 import { ConfirmationDialogComponent } from '../../../shared/modal-dialog/confirmation-dialog';
 import { EnvironmentsDataService } from '../management-data.service';
 import { EnvironmentModel, ManagementConfigModel } from '../management.model';
+import {ProgressBarService} from "../../../core/services/progress-bar.service";
 
 export interface ManageAction {
   action: string;
@@ -52,6 +53,7 @@ export class ManagementGridComponent implements OnInit {
   filtering: boolean = false;
   collapsedFilterRow: boolean = false;
 
+
   @Input() environmentsHealthStatuses: Array<any>;
   @Input() resources: Array<any>;
   @Input() isAdmin: boolean;
@@ -66,16 +68,25 @@ export class ManagementGridComponent implements OnInit {
     private healthStatusService: HealthStatusService,
     private environmentsDataService: EnvironmentsDataService,
     public toastr: ToastrService,
-    public dialog: MatDialog
+    public dialog: MatDialog,
+    private progressBarService: ProgressBarService,
   ) { }
 
   ngOnInit() {
+  this.getEnvironmentData()
+  }
+
+  getEnvironmentData() {
+    setTimeout(() => {this.progressBarService.startProgressBar()} , 0);
     this.environmentsDataService._data.subscribe(data => {
       if (data) {
         this.allEnvironmentData = EnvironmentModel.loadEnvironments(data);
         this.getDefaultFilterConfiguration(data);
         this.applyFilter(this.filterForm);
       }
+      this.progressBarService.stopProgressBar();
+    }, () => {
+      this.progressBarService.stopProgressBar();
     });
   }
 
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
index ddc5acb..1e2d3a8 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
@@ -25,6 +25,7 @@ import { Subscription } from 'rxjs';
 import { ProjectDataService } from '../project-data.service';
 import { Project, Endpoint } from '../project.component';
 import { CheckUtils } from '../../../core/util';
+import {ProgressBarService} from "../../../core/services/progress-bar.service";
 
 @Component({
   selector: 'project-list',
@@ -45,27 +46,33 @@ export class ProjectListComponent implements OnInit, OnDestroy {
 
   constructor(
     public toastr: ToastrService,
-    private projectDataService: ProjectDataService
+    private projectDataService: ProjectDataService,
+    private progressBarService: ProgressBarService,
   ) { }
 
 
   ngOnInit() {
-    this.subscriptions.add(this.projectDataService._projects.subscribe((value: Project[]) => {
-      this.projectList = value;
-      if (value) this.dataSource = new MatTableDataSource(value)
-    }));
+    this.getProjectList();
   }
 
   ngOnDestroy() {
     this.subscriptions.unsubscribe();
   }
 
+  private getProjectList(){
+    setTimeout(() => {this.progressBarService.startProgressBar()} , 0);
+    this.subscriptions.add(this.projectDataService._projects.subscribe((value: Project[]) => {
+      this.projectList = value;
+      if (value) this.dataSource = new MatTableDataSource(value);
+      this.progressBarService.stopProgressBar();
+    }, () => this.progressBarService.stopProgressBar()));
+  }
+
   public showActiveInstances(): void {
-    console.log(this.projectList);
     const filteredList = this.projectList.map(project => {
       project.endpoints = project.endpoints.filter((endpoint: Endpoint) => endpoint.status !== 'TERMINATED' && endpoint.status !== 'TERMINATING' && endpoint.status !== 'FAILED')
       return project;
-    })
+    });
 
     this.dataSource = new MatTableDataSource(filteredList);
   }
@@ -95,4 +102,4 @@ export class ProjectListComponent implements OnInit, OnDestroy {
   public toEndpointStatus(status) {
     return CheckUtils.endpointStatus[status] || status;
   }
-}
\ No newline at end of file
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts
index 7552ed9..74e5bbc 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts
@@ -25,6 +25,7 @@ import { ToastrService } from 'ngx-toastr';
 import { RolesGroupsService, HealthStatusService } from '../../core/services';
 import { CheckUtils } from '../../core/util';
 import { DICTIONARY } from '../../../dictionary/global.dictionary';
+import {ProgressBarService} from "../../core/services/progress-bar.service";
 
 @Component({
   selector: 'dlab-roles',
@@ -54,7 +55,8 @@ export class RolesComponent implements OnInit {
     public toastr: ToastrService,
     public dialog: MatDialog,
     private rolesService: RolesGroupsService,
-    private healthStatusService: HealthStatusService
+    private healthStatusService: HealthStatusService,
+    private progressBarService: ProgressBarService,
   ) { }
 
   ngOnInit() {
@@ -63,6 +65,7 @@ export class RolesComponent implements OnInit {
   }
 
   openManageRolesDialog() {
+    setTimeout(() => {this.progressBarService.startProgressBar()} , 0);
     this.rolesService.getGroupsData().subscribe(groups => {
       this.rolesService.getRolesData().subscribe(
         (roles: any) => {
@@ -73,8 +76,12 @@ export class RolesComponent implements OnInit {
           this.stepperView = false;
         },
         error => this.toastr.error(error.message, 'Oops!'));
-    },
-      error => this.toastr.error(error.message, 'Oops!'));
+        this.progressBarService.stopProgressBar()
+      },
+      error => {
+      this.toastr.error(error.message, 'Oops!');
+      this.progressBarService.stopProgressBar();
+    });
   }
 
   getGroupsData() {
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.spec.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.spec.ts
deleted file mode 100644
index 021b583..0000000
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.spec.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ProgressBarService } from './progress-bar.service';
-
-describe('ProgressBarService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: ProgressBarService = TestBed.get(ProgressBarService);
-    expect(service).toBeTruthy();
-  });
-});
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts
index 8ecf158..01126b9 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts
@@ -27,6 +27,7 @@ import { ToolbarComponent } from './toolbar/toolbar.component';
 
 import { FileUtils } from '../core/util';
 import { DICTIONARY, ReportingConfigModel } from '../../dictionary/global.dictionary';
+import {ProgressBarService} from "../core/services/progress-bar.service";
 
 @Component({
   selector: 'dlab-reporting',
@@ -71,7 +72,8 @@ export class ReportingComponent implements OnInit, OnDestroy {
   constructor(
     private billingReportService: BillingReportService,
     private healthStatusService: HealthStatusService,
-    public toastr: ToastrService
+    public toastr: ToastrService,
+    private progressBarService: ProgressBarService,
   ) { }
 
   ngOnInit() {
@@ -83,7 +85,7 @@ export class ReportingComponent implements OnInit, OnDestroy {
   }
 
   getGeneralBillingData() {
-
+    setTimeout(() => {this.progressBarService.startProgressBar()} , 0);
     this.billingReportService.getGeneralBillingData(this.reportData)
       .subscribe(data => {
         this.data = data;
@@ -105,7 +107,8 @@ export class ReportingComponent implements OnInit, OnDestroy {
         } else {
           this.getDefaultFilterConfiguration(this.data);
         }
-      });
+        this.progressBarService.stopProgressBar();
+      }, () => this.progressBarService.stopProgressBar());
   }
 
   rebuildBillingReport($event?): void {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
index ed6fc57..8c49782 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
@@ -39,6 +39,7 @@ import { ConfirmationDialogComponent } from '../../shared/modal-dialog/confirmat
 import { SchedulerComponent } from '../scheduler';
 
 import { DICTIONARY } from '../../../dictionary/global.dictionary';
+import {ProgressBarService} from "../../core/services/progress-bar.service";
 
 @Component({
   selector: 'resources-grid',
@@ -85,21 +86,25 @@ export class ResourcesGridComponent implements OnInit {
   constructor(
     public toastr: ToastrService,
     private userResourceService: UserResourceService,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    private progressBarService: ProgressBarService,
   ) { }
 
   ngOnInit(): void {
+
     this.buildGrid();
   }
 
   public buildGrid(): void {
+    setTimeout(() => {this.progressBarService.startProgressBar()} , 0);
     this.userResourceService.getUserProvisionedResources()
       .subscribe((result: any) => {
         this.environments = ExploratoryModel.loadEnvironments(result);
         this.getDefaultFilterConfiguration();
         (this.environments.length) ? this.getUserPreferences() : this.filteredEnvironments = [];
         this.healthStatus && !this.healthStatus.billingEnabled && this.modifyGrid();
-      });
+        this.progressBarService.stopProgressBar();
+      }, () => this.progressBarService.stopProgressBar());
   }
 
   public toggleFilterRow(): void {
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
index 31e9176..919dadb 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
@@ -18,7 +18,7 @@
   -->
 
 <div class="nav-bar" [hidden]="!isLoggedIn">
-  <mat-progress-bar *ngIf="showProgressBar" mode="indeterminate" ></mat-progress-bar>
+  <mat-progress-bar *ngIf="showProgressBar" mode="indeterminate"></mat-progress-bar>
   <div class="menu-area" *ngIf="healthStatus">
 
     <button class="hamburger" (click)="collapse()">
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
index ac9cb67..f4f91a4 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
@@ -84,7 +84,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
   isLoggedIn: boolean = false;
   metadata: any;
   isExpanded: boolean = true;
-  public showProgressBar: any;
+  public showProgressBar: any = false;
   healthStatus: GeneralEnvironmentStatus;
   subscriptions: Subscription = new Subscription();
   showProgressBarSubscr = new Subscription();
@@ -101,7 +101,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.showProgressBarSubscr =  this.progressBarService.showProgressBar.subscribe(isProgressBarVissible => this.showProgressBar = isProgressBarVissible);
+    this.showProgressBarSubscr = this.progressBarService.showProgressBar.subscribe(isProgressBarVissible => this.showProgressBar = isProgressBarVissible);
     this.applicationSecurityService.loggedInStatus.subscribe(response => {
       this.subscriptions.unsubscribe();
       this.subscriptions.closed = false;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/index.ts b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/index.ts
deleted file mode 100644
index 689becc..0000000
--- a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { NgModule } from '@angular/core';
-import { MaterialModule } from '../material.module';
-import {ProgressBarComponent} from "./progress-bar.component";
-
-export * from './progress-bar.component';
-
-@NgModule({
-  imports: [
-    MaterialModule,
-  ],
-  declarations: [ProgressBarComponent],
-  exports: [ProgressBarComponent]
-})
-export class ProgressBarModule { }
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.html
deleted file mode 100644
index eb9de9a..0000000
--- a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<mat-progress-bar mode="indeterminate"></mat-progress-bar>
-
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.spec.ts b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.spec.ts
deleted file mode 100644
index f41343a..0000000
--- a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProgressBarComponent } from './progress-bar.component';
-
-describe('ProgressBarComponent', () => {
-  let component: ProgressBarComponent;
-  let fixture: ComponentFixture<ProgressBarComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ProgressBarComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ProgressBarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.ts
deleted file mode 100644
index 0e99c67..0000000
--- a/services/self-service/src/main/resources/webapp/src/app/shared/progress-bar/progress-bar.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {ProgressBarService} from "../../core/services/progress-bar.service";
-
-@Component({
-  selector: 'dlab-progress-bar',
-  templateUrl: './progress-bar.component.html',
-  styleUrls: ['./progress-bar.component.scss']
-})
-export class ProgressBarComponent implements OnInit {
-  constructor(
-    public progressBarService: ProgressBarService,
-  ) { }
-
-  ngOnInit() {
-
-  }
-}


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org