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/26 14:53:45 UTC
[incubator-dlab] branch develop updated: [DLAB-1385]:Added global
progress bar (#504)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
The following commit(s) were added to refs/heads/develop by this push:
new e6b8838 [DLAB-1385]:Added global progress bar (#504)
e6b8838 is described below
commit e6b8838a9e70724e6eb30016eedd3b21a9a08ffd
Author: Dmytro Gnatyshyn <42...@users.noreply.github.com>
AuthorDate: Thu Dec 26 16:53:36 2019 +0200
[DLAB-1385]:Added global progress bar (#504)
* [DLAB-1385]: Added progress bar service and component
---
.../management-grid/management-grid.component.ts | 12 ++++++++++-
.../project/project-list/project-list.component.ts | 23 ++++++++++++++--------
.../app/administration/roles/roles.component.ts | 13 +++++++++---
.../src/app/core/services/progress-bar.service.ts | 19 ++++++++++++++++++
.../src/app/reporting/reporting.component.ts | 9 ++++++---
.../resources-grid/resources-grid.component.ts | 9 +++++++--
.../src/app/shared/navbar/navbar.component.html | 1 +
.../src/app/shared/navbar/navbar.component.ts | 11 ++++++++---
.../webapp/src/assets/styles/app-loading.scss | 5 +++++
9 files changed, 82 insertions(+), 20 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..f13f0b5 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;
@@ -66,16 +67,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.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.ts
new file mode 100644
index 0000000..c8dcd72
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/progress-bar.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Subject } from "rxjs";
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ProgressBarService {
+ public showProgressBar = new Subject();
+
+ constructor() { }
+
+ public stopProgressBar() {
+ this.showProgressBar.next(false);
+ }
+
+ public startProgressBar() {
+ this.showProgressBar.next(true);
+ }
+}
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 ca89f33..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,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 d22b4a5..37ae148 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';
@@ -39,6 +39,7 @@ import {
state
} from '@angular/animations';
import {skip} from "rxjs/operators";
+import {ProgressBarService} from "../../core/services/progress-bar.service";
@Component({
selector: 'dlab-navbar',
@@ -84,9 +85,10 @@ export class NavbarComponent implements OnInit, OnDestroy {
isLoggedIn: boolean = false;
metadata: any;
isExpanded: boolean = true;
-
+ public showProgressBar: any = false;
healthStatus: GeneralEnvironmentStatus;
subscriptions: Subscription = new Subscription();
+ showProgressBarSubscr = new Subscription();
constructor(
public toastr: ToastrService,
@@ -95,10 +97,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;
@@ -119,6 +123,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
ngOnDestroy(): void {
this.subscriptions.unsubscribe();
+ this.showProgressBarSubscr.unsubscribe();
}
public getRouterOutletState(routerOutlet: RouterOutlet) {
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