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/15 21:54:17 UTC
[incubator-streampipes] 10/11: [STREAMPIPES-193] Fix notification
icon in iconbar
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-193
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 5bfdfdafad2dfc5f128ed9a526de03fcb8f6527a
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat Aug 15 22:40:01 2020 +0200
[STREAMPIPES-193] Fix notification icon in iconbar
---
.../rest/impl/PipelineWithUserResource.java | 2 ++
ui/deployment/appng5.module.mst | 5 ++++
ui/package.json | 2 ++
ui/src/app/app-routing.module.ts | 2 ++
ui/src/app/connect/rest.service.ts | 4 ++-
.../components/iconbar/iconbar.component.html | 31 +++++++++++-----------
.../components/iconbar/iconbar.component.ts | 9 ++++---
ui/src/app/core-v2/core.module.ts | 6 ++---
.../app/notifications/notifications.component.ts | 7 ++---
ui/src/app/notifications/notifications.module.ts | 7 +----
.../notifications/service/notifications.service.ts | 4 ++-
ui/src/app/services/notification-count-service.ts | 4 +--
ui/src/scss/main.scss | 1 +
13 files changed, 49 insertions(+), 35 deletions(-)
diff --git a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/PipelineWithUserResource.java b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/PipelineWithUserResource.java
index 1df1824..44d1e9f 100644
--- a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/PipelineWithUserResource.java
+++ b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/PipelineWithUserResource.java
@@ -159,6 +159,8 @@ public class PipelineWithUserResource extends AbstractRestInterface implements I
pipeline.setRunning(false);
pipeline.setCreatedByUser(username);
pipeline.setCreatedAt(new Date().getTime());
+ pipeline.getSepas().forEach(processor -> processor.setCorrespondingUser(username));
+ pipeline.getActions().forEach(action -> action.setCorrespondingUser(username));
//userService.addOwnPipeline(username, pipeline);
Operations.storePipeline(pipeline);
SuccessMessage message = Notifications.success("Pipeline stored");
diff --git a/ui/deployment/appng5.module.mst b/ui/deployment/appng5.module.mst
index 8fecff7..ebde9ab 100644
--- a/ui/deployment/appng5.module.mst
+++ b/ui/deployment/appng5.module.mst
@@ -96,6 +96,11 @@ import * as $ from 'jquery';
NotificationCountService,
{ provide: Logger, useClass: ConsoleLogService },
{ provide: LOADING_BAR_CONFIG, useValue: { latencyThreshold: 100 }},
+ {
+ provide: RxStompService,
+ useFactory: rxStompServiceFactory,
+ deps: [InjectableRxStompConfig]
+ }
],
bootstrap: [AppComponent]
})
diff --git a/ui/package.json b/ui/package.json
index a2c11f6..8e4362a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -38,6 +38,7 @@
"@ngx-loading-bar/http-client": "5.1.0",
"@stomp/ng2-stompjs": "7.2.0",
"@swimlane/ngx-charts": "13.0.2",
+ "angular-datatables": "9.0.2",
"angular-gridster2": "8.3.0",
"angular-loading-bar": "0.8.0",
"angular-material-icons": "0.4.0",
@@ -52,6 +53,7 @@
"codemirror": "5.55.0",
"core-js": "2.5.3",
"dagre": "0.8.4",
+ "datatables.net-dt": "1.10.21",
"datatables.net": "1.10.20",
"fast-json-patch": "2.1.0",
"file-saver": "1.3.8",
diff --git a/ui/src/app/app-routing.module.ts b/ui/src/app/app-routing.module.ts
index cc9df99..0bc629d 100644
--- a/ui/src/app/app-routing.module.ts
+++ b/ui/src/app/app-routing.module.ts
@@ -38,6 +38,7 @@ import {StartupComponent} from "./login/components/startup/startup.component";
import {AlreadyConfiguredCanActivateGuard} from "./_guards/already-configured.can-activate.guard";
import {LoggedInCanActivateGuard} from "./_guards/logged-in.can-activate.guard";
import {InfoComponent} from "./info/info.component";
+import {NotificationsComponent} from "./notifications/notifications.component";
const routes: Routes = [
{ path: 'login', component: LoginComponent, canActivate: [ConfiguredCanActivateGuard, LoggedInCanActivateGuard]},
@@ -53,6 +54,7 @@ const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'dataexplorer', component: DataExplorerComponent },
{ path: 'editor', component: EditorComponent },
+ { path: 'notifications', component: NotificationsComponent },
{ path: 'pipelines', component: PipelinesComponent },
{ path: 'info', component: InfoComponent },
{ path: 'pipeline-details', component: PipelineDetailsComponent }
diff --git a/ui/src/app/connect/rest.service.ts b/ui/src/app/connect/rest.service.ts
index d156808..a836f91 100644
--- a/ui/src/app/connect/rest.service.ts
+++ b/ui/src/app/connect/rest.service.ts
@@ -101,7 +101,9 @@ export class RestService {
}
getRuntimeInfo(sourceDescription): Observable<any> {
- return this.http.post(this.makeUserDependentBaseUrl() + "/pipeline-element/runtime", sourceDescription);
+ return this.http.post(this.makeUserDependentBaseUrl() + "/pipeline-element/runtime", sourceDescription, {
+ headers: { ignoreLoadingBar: '' }
+ });
}
makeUserDependentBaseUrl() {
diff --git a/ui/src/app/core-v2/components/iconbar/iconbar.component.html b/ui/src/app/core-v2/components/iconbar/iconbar.component.html
index e48e05a..4185019 100644
--- a/ui/src/app/core-v2/components/iconbar/iconbar.component.html
+++ b/ui/src/app/core-v2/components/iconbar/iconbar.component.html
@@ -18,29 +18,30 @@
<div style="padding-top:0px;">
<div [ngClass]="item.link === activePage ? 'sp-navbar-item-selected': 'sp-navbar-item'"
- *ngFor="let item of menu" style="min-width:0px;padding:0px;padding-top:5px;padding-bottom:5px;">
- <button mat-button mat-icon-button class="button-margin-iconbar" (click)="go(item.link)" matTooltip="{{item.title}}" matTooltipPosition="right">
+ *ngFor="let item of menu" style="min-width:0px;padding:0px;padding-top:5px;padding-bottom:5px;">
+ <button mat-button mat-icon-button class="button-margin-iconbar" (click)="go(item.link)"
+ matTooltip="{{item.title}}" matTooltipPosition="right">
<mat-icon [ngClass]="item.link === activePage ? 'sp-navbar-icon-selected' : 'sp-navbar-icon'">
{{item.icon}}
</mat-icon>
</button>
</div>
- <div [ngClass]="'streampipes.notifications' === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'">
-<!-- <notification-icon count='toolbarCtrl.NotificationCountService.unreadNotificationCount'>-->
-<!-- <md-button class="md-icon-button button-margin-iconbar" ng-click="go('streampipes.notifications')">-->
-<!-- <md-icon md-svg-icon="communication:ic_chat_24px" aria-label="Notifications"-->
-<!-- ng-class="{'sp-navbar-icon-selected' : 'streampipes.notifications' === activePage, 'sp-navbar-icon': 'streampipes.notifications' !== activePage}"></md-icon>-->
-<!-- <md-tooltip md-direction="right">-->
-<!-- Notifications-->
-<!-- </md-tooltip>-->
-<!-- </md-button>-->
-<!-- </notification-icon>-->
+ <div [ngClass]="'notifications' === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'"
+ style="padding-top:5px;padding-bottom:5px;">
+ <button mat-button mat-icon-button class="md-icon-button button-margin-iconbar"
+ (click)="go('notifications')"
+ matTooltip="Notifications" matTooltipPosition="right">
+ <mat-icon [matBadge]="NotificationCountService.unreadNotificationCount" [matBadgeHidden]="NotificationCountService.unreadNotificationCount == 0" [ngClass]="'notifications' === activePage ?'sp-navbar-icon-selected' : 'sp-navbar-icon'">chat
+ </mat-icon>
+ </button>
</div>
<mat-divider style="border-top-color:white;"></mat-divider>
<div [ngClass]="item.link === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'"
- *ngFor="let item of admin" style="padding-top:5px;padding-bottom:5px;">
- <button mat-button mat-icon-button class="md-icon-button button-margin-iconbar" (click)="go(item.link)" matTooltip="{{item.title}}">
- <mat-icon [ngClass]="item.link === activePage ?'sp-navbar-icon-selected' : 'sp-navbar-icon'">{{item.icon}}</mat-icon>
+ *ngFor="let item of admin" style="padding-top:5px;padding-bottom:5px;">
+ <button mat-button mat-icon-button class="md-icon-button button-margin-iconbar" (click)="go(item.link)"
+ matTooltip="{{item.title}}">
+ <mat-icon
+ [ngClass]="item.link === activePage ?'sp-navbar-icon-selected' : 'sp-navbar-icon'">{{item.icon}}</mat-icon>
</button>
</div>
</div>
\ No newline at end of file
diff --git a/ui/src/app/core-v2/components/iconbar/iconbar.component.ts b/ui/src/app/core-v2/components/iconbar/iconbar.component.ts
index 890d23f..39328db 100644
--- a/ui/src/app/core-v2/components/iconbar/iconbar.component.ts
+++ b/ui/src/app/core-v2/components/iconbar/iconbar.component.ts
@@ -30,22 +30,25 @@ import {NotificationCountService} from "../../../services/notification-count-ser
})
export class IconbarComponent extends BaseNavigationComponent implements OnInit {
+ unreadNotifications: number = 0;
constructor(Router: Router,
private AuthStatusService: AuthStatusService,
- private NotificationCountService: NotificationCountService) {
+ public NotificationCountService: NotificationCountService) {
super(Router);
}
ngOnInit(): void {
super.onInit();
+ this.connectToBroker();
+ this.NotificationCountService.loadUnreadNotifications();
}
connectToBroker() {
var login = 'admin';
var passcode = 'admin';
- var websocketProtocol = window.location.protocol === "http" ? "ws" : "wss";
- var brokerUrl = websocketProtocol + '://' + window.location.host + ':' + window.location.port + '/streampipes/ws';
+ var websocketProtocol = window.location.protocol === "http:" ? "ws" : "wss";
+ var brokerUrl = websocketProtocol + '://' + window.location.hostname + ':' + window.location.port + '/streampipes/ws';
var inputTopic = '/topic/org.apache.streampipes.notifications.' + this.AuthStatusService.email;
let stompClient = new Client({
diff --git a/ui/src/app/core-v2/core.module.ts b/ui/src/app/core-v2/core.module.ts
index 3d1cbe5..fe9fb0f 100644
--- a/ui/src/app/core-v2/core.module.ts
+++ b/ui/src/app/core-v2/core.module.ts
@@ -35,6 +35,7 @@ import {IconbarComponent} from "./components/iconbar/iconbar.component";
import {MatDividerModule} from '@angular/material/divider';
import {MatListModule} from "@angular/material/list";
import {MatMenuModule} from "@angular/material/menu";
+import {MatBadgeModule} from "@angular/material/badge";
@NgModule({
imports: [
@@ -45,6 +46,7 @@ import {MatMenuModule} from "@angular/material/menu";
MatListModule,
MatIconModule,
MatMenuModule,
+ MatBadgeModule,
MatButtonModule,
MatTooltipModule,
MatProgressSpinnerModule,
@@ -59,9 +61,7 @@ import {MatMenuModule} from "@angular/material/menu";
IconbarComponent,
ToolbarComponent
],
- providers: [
-
- ],
+ providers: [],
entryComponents: [
StreampipesComponent
]
diff --git a/ui/src/app/notifications/notifications.component.ts b/ui/src/app/notifications/notifications.component.ts
index b3e2c49..8a5194d 100644
--- a/ui/src/app/notifications/notifications.component.ts
+++ b/ui/src/app/notifications/notifications.component.ts
@@ -27,6 +27,7 @@ import {RxStompService} from "@stomp/ng2-stompjs";
import {AuthStatusService} from "../services/auth-status.service";
import {NotificationUtils} from "./utils/notifications.utils";
import {NotificationCountService} from "../services/notification-count-service";
+import {FreeTextStaticProperty, Pipeline} from "../core-model/gen/streampipes-model";
@Component({
selector: 'notifications',
@@ -112,14 +113,14 @@ export class NotificationsComponent implements OnInit, OnDestroy {
});
}
- filterForNotifications(pipelines: any) {
+ filterForNotifications(pipelines: Pipeline[]) {
pipelines.forEach(pipeline => {
let notificationActions = pipeline.actions.filter(sink => sink.appId === NotificationsComponent.NOTIFICATIONS_APP_ID);
notificationActions.forEach(notificationAction => {
let notificationName = notificationAction
.staticProperties
- .filter(sp => sp.properties.internalName === NotificationsComponent.NOTIFICATION_TITLE_KEY)
- .map(sp => sp.properties.value)[0];
+ .filter(sp => sp.internalName === NotificationsComponent.NOTIFICATION_TITLE_KEY)
+ .map(sp => (sp as FreeTextStaticProperty).value)[0];
let pipelineName = pipeline.name;
this.existingNotifications.push({notificationTitle: notificationName,
pipelineName: pipelineName, pipelineId: pipeline._id, notificationId: NotificationUtils.makeNotificationId(pipeline._id, notificationName)});
diff --git a/ui/src/app/notifications/notifications.module.ts b/ui/src/app/notifications/notifications.module.ts
index 9a3f74f..3c119c8 100644
--- a/ui/src/app/notifications/notifications.module.ts
+++ b/ui/src/app/notifications/notifications.module.ts
@@ -42,12 +42,7 @@ import {InjectableRxStompConfig, RxStompService, rxStompServiceFactory} from "@s
NotificationItemComponent
],
providers: [
- NotificationsService,
- {
- provide: RxStompService,
- useFactory: rxStompServiceFactory,
- deps: [InjectableRxStompConfig]
- }
+ NotificationsService
],
exports: [
NotificationsComponent
diff --git a/ui/src/app/notifications/service/notifications.service.ts b/ui/src/app/notifications/service/notifications.service.ts
index 7208363..024c447 100644
--- a/ui/src/app/notifications/service/notifications.service.ts
+++ b/ui/src/app/notifications/service/notifications.service.ts
@@ -50,7 +50,9 @@ export class NotificationsService {
}
updateNotification(notificationItem: NotificationItem): Observable<any> {
- return this.http.put(this.notificationUrl + "/" + notificationItem._id, notificationItem);
+ return this.http.put(this.notificationUrl + "/" + notificationItem._id, notificationItem, {
+ headers: { ignoreLoadingBar: '' }
+ });
}
private get baseUrl() {
diff --git a/ui/src/app/services/notification-count-service.ts b/ui/src/app/services/notification-count-service.ts
index c4b2c5b..d5092ad 100644
--- a/ui/src/app/services/notification-count-service.ts
+++ b/ui/src/app/services/notification-count-service.ts
@@ -61,6 +61,4 @@ export class NotificationCountService {
let vizName = notificationTitle.replace(/\\s/g, '-');
return pipelineId + '-' + vizName;
}
-}
-
-NotificationCountService.$inject = ['RestApi'];
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index 15d42ab..ab73bae 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -20,6 +20,7 @@
@import '~angular-tree-component/dist/angular-tree-component.css';
//@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+@import '~datatables.net-dt/css/jquery.dataTables.css';
@import '~bootstrap/dist/css/bootstrap.css';
@import '~slick-carousel/slick/slick-theme.css';
@import '~slick-carousel/slick/slick.css';