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 2022/09/18 08:43:26 UTC
[incubator-streampipes] 01/04: [hotfix] Properly unsubscribe from data explorer subscriptions
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 3181e333241ca3a48278d22f7871e16ff9b26935
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sat Sep 17 22:10:09 2022 +0200
[hotfix] Properly unsubscribe from data explorer subscriptions
---
.../data-explorer-dashboard-overview.component.ts | 15 ++++++++--
.../data-explorer-dashboard-panel.component.ts | 16 +++++++---
.../data-explorer-dashboard-widget.component.ts | 35 ++++++++++++++++++----
3 files changed, 53 insertions(+), 13 deletions(-)
diff --git a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
index 9bf188cd8..1e645d97a 100644
--- a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
+++ b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
@@ -16,7 +16,7 @@
*
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { DataExplorerEditDataViewDialogComponent } from '../../dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component';
import { Dashboard, DataViewDataExplorerService } from '@streampipes/platform-services';
@@ -27,13 +27,14 @@ import { AuthService } from '../../../services/auth.service';
import { UserPrivilege } from '../../../_enums/user-privilege.enum';
import { Router } from '@angular/router';
import { SpDataExplorerRoutes } from '../../data-explorer.routes';
+import { Subscription } from 'rxjs';
@Component({
selector: 'sp-data-explorer-dashboard-overview',
templateUrl: './data-explorer-dashboard-overview.component.html',
styleUrls: ['./data-explorer-dashboard-overview.component.scss']
})
-export class DataExplorerDashboardOverviewComponent implements OnInit {
+export class DataExplorerDashboardOverviewComponent implements OnInit, OnDestroy {
dataSource = new MatTableDataSource<Dashboard>();
@@ -45,6 +46,8 @@ export class DataExplorerDashboardOverviewComponent implements OnInit {
hasDataExplorerWritePrivileges = false;
hasDataExplorerDeletePrivileges = false;
+ authSubscription: Subscription;
+
constructor(private dataViewService: DataViewDataExplorerService,
private dashboardService: DataViewDataExplorerService,
public dialogService: DialogService,
@@ -56,7 +59,7 @@ export class DataExplorerDashboardOverviewComponent implements OnInit {
ngOnInit(): void {
this.breadcrumbService.updateBreadcrumb(this.breadcrumbService.getRootLink(SpDataExplorerRoutes.BASE));
- this.authService.user$.subscribe(user => {
+ this.authSubscription = this.authService.user$.subscribe(user => {
this.hasDataExplorerWritePrivileges = this.authService.hasRole(UserPrivilege.PRIVILEGE_WRITE_DATA_EXPLORER_VIEW);
this.hasDataExplorerDeletePrivileges = this.authService.hasRole(UserPrivilege.PRIVILEGE_DELETE_DATA_EXPLORER_VIEW);
this.isAdmin = user.roles.indexOf(UserRole.ROLE_ADMIN) > -1;
@@ -66,6 +69,12 @@ export class DataExplorerDashboardOverviewComponent implements OnInit {
this.getDashboards();
}
+ ngOnDestroy() {
+ if (this.authSubscription) {
+ this.authSubscription.unsubscribe();
+ }
+ }
+
getDashboards() {
this.dataViewService.getDataViews().subscribe(data => {
this.dashboards = data.sort((a, b) => a.name.localeCompare(b.name));
diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
index 815bc8e37..f03b006e6 100644
--- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
+++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
@@ -16,8 +16,8 @@
*
*/
-import { Component, EventEmitter, OnInit, Output, ViewChild, } from '@angular/core';
-import { Observable, of, zip } from 'rxjs';
+import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, } from '@angular/core';
+import { Observable, of, Subscription, zip } from 'rxjs';
import { DataExplorerDashboardGridComponent } from '../widget-view/grid-view/data-explorer-dashboard-grid.component';
import { MatDrawer } from '@angular/material/sidenav';
import { Tuple2 } from '../../../core-model/base/Tuple2';
@@ -45,7 +45,7 @@ import { SpDataExplorerRoutes } from '../../data-explorer.routes';
templateUrl: './data-explorer-dashboard-panel.component.html',
styleUrls: ['./data-explorer-dashboard-panel.component.css'],
})
-export class DataExplorerDashboardPanelComponent implements OnInit {
+export class DataExplorerDashboardPanelComponent implements OnInit, OnDestroy {
dashboardLoaded = false;
dashboard: Dashboard;
@@ -89,6 +89,8 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
showDesignerPanel = false;
showEditingHelpInfo = false;
+ authSubscription: Subscription;
+
constructor(
private dataViewDataExplorerService: DataViewDataExplorerService,
private dialog: MatDialog,
@@ -112,7 +114,7 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
this.getDashboard(params.id, startTime, endTime);
- this.authService.user$.subscribe(user => {
+ this.authSubscription = this.authService.user$.subscribe(user => {
this.hasDataExplorerWritePrivileges = this.authService.hasRole(
UserPrivilege.PRIVILEGE_WRITE_DATA_EXPLORER_VIEW
);
@@ -125,6 +127,12 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
});
}
+ ngOnDestroy() {
+ if (this.authSubscription) {
+ this.authSubscription.unsubscribe();
+ }
+ }
+
triggerResize() {
window.dispatchEvent(new Event('resize'));
}
diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts
index 186e9d6d2..4b25aa970 100644
--- a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts
@@ -16,7 +16,16 @@
*
*/
-import { Component, ComponentFactoryResolver, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import {
+ Component,
+ ComponentFactoryResolver,
+ EventEmitter,
+ Input,
+ OnDestroy,
+ OnInit,
+ Output,
+ ViewChild
+} from '@angular/core';
import { GridsterItemComponent } from 'angular-gridster2';
import {
DashboardItem, DataExplorerDataConfig,
@@ -27,7 +36,7 @@ import {
TimeSettings
} from '@streampipes/platform-services';
import { DataDownloadDialogComponent } from '../../../core-ui/data-download-dialog/data-download-dialog.component';
-import { interval } from 'rxjs';
+import { interval, Subscription } from 'rxjs';
import { takeWhile } from 'rxjs/operators';
import { DataExplorerWidgetRegistry } from '../../registry/data-explorer-widget-registry';
import { WidgetDirective } from './widget.directive';
@@ -42,7 +51,7 @@ import { DialogService, PanelType } from '@streampipes/shared-ui';
templateUrl: './data-explorer-dashboard-widget.component.html',
styleUrls: ['./data-explorer-dashboard-widget.component.scss']
})
-export class DataExplorerDashboardWidgetComponent implements OnInit {
+export class DataExplorerDashboardWidgetComponent implements OnInit, OnDestroy {
@Input()
dashboardItem: DashboardItem;
@@ -90,6 +99,10 @@ export class DataExplorerDashboardWidgetComponent implements OnInit {
hasDataExplorerWritePrivileges = false;
hasDataExplorerDeletePrivileges = false;
+ authSubscription: Subscription;
+ widgetTypeChangedSubscription: Subscription;
+ intervalSubscription: Subscription;
+
@ViewChild(WidgetDirective, {static: true}) widgetHost!: WidgetDirective;
constructor(private dataViewDataExplorerService: DataViewDataExplorerService,
@@ -100,13 +113,13 @@ export class DataExplorerDashboardWidgetComponent implements OnInit {
}
ngOnInit(): void {
- this.authService.user$.subscribe(user => {
+ this.authSubscription = this.authService.user$.subscribe(user => {
this.hasDataExplorerWritePrivileges = this.authService.hasRole(UserPrivilege.PRIVILEGE_WRITE_DATA_EXPLORER_VIEW);
this.hasDataExplorerDeletePrivileges = this.authService.hasRole(UserPrivilege.PRIVILEGE_DELETE_DATA_EXPLORER_VIEW);
});
this.widgetLoaded = true;
this.title = this.dataLakeMeasure.measureName;
- this.widgetTypeService.widgetTypeChangeSubject.subscribe(typeChange => {
+ this.widgetTypeChangedSubscription = this.widgetTypeService.widgetTypeChangeSubject.subscribe(typeChange => {
if (typeChange.widgetId === this.configuredWidget._id) {
this.chooseWidget(typeChange.newWidgetTypeId);
}
@@ -114,6 +127,15 @@ export class DataExplorerDashboardWidgetComponent implements OnInit {
this.chooseWidget(this.configuredWidget.widgetType);
}
+ ngOnDestroy() {
+ if (this.authSubscription) {
+ this.authSubscription.unsubscribe();
+ }
+ if (this.widgetTypeChangedSubscription) {
+ this.widgetTypeChangedSubscription.unsubscribe();
+ }
+ }
+
chooseWidget(widgetTypeId: string) {
const widgets = DataExplorerWidgetRegistry.getAvailableWidgetTemplates();
const widgetToDisplay = widgets.find(widget => widget.id === widgetTypeId);
@@ -175,7 +197,7 @@ export class DataExplorerDashboardWidgetComponent implements OnInit {
startLoadingTimer() {
this.timerActive = true;
- interval( 10 )
+ this.intervalSubscription = interval( 10 )
.pipe(takeWhile(() => this.timerActive))
.subscribe(value => {
this.loadingTime = (value * 10 / 1000);
@@ -184,6 +206,7 @@ export class DataExplorerDashboardWidgetComponent implements OnInit {
stopLoadingTimer() {
this.timerActive = false;
+ this.intervalSubscription.unsubscribe();
}
handleTimer(start: boolean) {