You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2020/08/21 21:21:20 UTC
[incubator-streampipes] 03/03: [hotfix] Add loading screen to
notification view
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit a292124ffbe97a83ccde1616d6028273df52a5fc
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Fri Aug 21 23:00:21 2020 +0200
[hotfix] Add loading screen to notification view
---
.../app/notifications/notifications.component.html | 12 ++++--
.../app/notifications/notifications.component.ts | 4 ++
ui/src/app/notifications/notifications.module.ts | 50 +++++++++++-----------
3 files changed, 39 insertions(+), 27 deletions(-)
diff --git a/ui/src/app/notifications/notifications.component.html b/ui/src/app/notifications/notifications.component.html
index ea1e100..4090002 100644
--- a/ui/src/app/notifications/notifications.component.html
+++ b/ui/src/app/notifications/notifications.component.html
@@ -31,8 +31,14 @@
</div>
</div>
</div>
-
- <div class="fixed-height page-container-padding-inner" fxLayout="row" fxFlex="100">
+ <div class="container-fluid marketplace-container" *ngIf="notificationsLoading" fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
+ <mat-spinner [mode]="'indeterminate'" [diameter]="20"></mat-spinner>
+ <h4>Loading notifications...</h4>
+ </div>
+ <div class="fixed-height page-container-padding-inner" *ngIf="!notificationsLoading && !pipelinesWithNotificationsPresent" fxFlex="100" fxLayoutAlign="center center" fxLayout="row">
+ <h4>No notifications available. Create a new pipeline using the Notification Sink to create your first notification!</h4>
+ </div>
+ <div class="fixed-height page-container-padding-inner" fxLayout="row" fxFlex="100" *ngIf="!notificationsLoading && pipelinesWithNotificationsPresent">
<div fxFlex="30" class="notifications-overview scrolling-auto">
<mat-list>
<mat-list-item *ngFor="let existingNotification of existingNotifications"
@@ -52,7 +58,7 @@
</mat-list-item>
</mat-list>
</div>
- <div fxFlex="70" class="notifications-details" *ngIf="pipelinesWithNotificationsPresent">
+ <div fxFlex="70" class="notifications-details">
<div class="notification-details-wrapper">
<div class="notification-header" fxLayout="column" fxLayoutAlign="center start">
<div class="notification-header-pipeline-name">{{currentlySelectedNotification.pipelineName}}</div>
diff --git a/ui/src/app/notifications/notifications.component.ts b/ui/src/app/notifications/notifications.component.ts
index 8a5194d..7f52228 100644
--- a/ui/src/app/notifications/notifications.component.ts
+++ b/ui/src/app/notifications/notifications.component.ts
@@ -49,6 +49,8 @@ export class NotificationsComponent implements OnInit, OnDestroy {
currentlySelectedNotificationId: string;
pipelinesWithNotificationsPresent: boolean = false;
+ notificationsLoading: boolean = false;
+
currentOffset: number = 0;
liveOffset: number = 0;
previousScrollHeight: number;
@@ -104,8 +106,10 @@ export class NotificationsComponent implements OnInit, OnDestroy {
}
getPipelinesWithNotifications() {
+ this.notificationsLoading = true;
this.RestApi.getOwnPipelines().subscribe(pipelines => {
this.filterForNotifications(pipelines);
+ this.notificationsLoading = false;
if (this.existingNotifications.length > 0) {
this.pipelinesWithNotificationsPresent = true;
this.selectNotification(this.existingNotifications[0]);
diff --git a/ui/src/app/notifications/notifications.module.ts b/ui/src/app/notifications/notifications.module.ts
index 3c119c8..68d0eda 100644
--- a/ui/src/app/notifications/notifications.module.ts
+++ b/ui/src/app/notifications/notifications.module.ts
@@ -26,35 +26,37 @@ import {NotificationsComponent} from "./notifications.component";
import {NotificationItemComponent} from "./components/notification-item.component";
import {NotificationsService} from "./service/notifications.service";
import {InjectableRxStompConfig, RxStompService, rxStompServiceFactory} from "@stomp/ng2-stompjs";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
@NgModule({
- imports: [
- CommonModule,
- MatTabsModule,
- FlexLayoutModule,
- CommonModule,
- FlexLayoutModule,
- CustomMaterialModule,
- FormsModule
- ],
- declarations: [
- NotificationsComponent,
- NotificationItemComponent
- ],
- providers: [
- NotificationsService
- ],
- exports: [
- NotificationsComponent
- ],
- entryComponents: [
- NotificationsComponent,
- ]
+ imports: [
+ CommonModule,
+ MatProgressSpinnerModule,
+ MatTabsModule,
+ FlexLayoutModule,
+ CommonModule,
+ FlexLayoutModule,
+ CustomMaterialModule,
+ FormsModule
+ ],
+ declarations: [
+ NotificationsComponent,
+ NotificationItemComponent
+ ],
+ providers: [
+ NotificationsService
+ ],
+ exports: [
+ NotificationsComponent
+ ],
+ entryComponents: [
+ NotificationsComponent,
+ ]
})
export class NotificationModule {
- constructor() {
- }
+ constructor() {
+ }
}