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/11/08 08:04:15 UTC

[incubator-streampipes] branch dev updated: [STREAMPIPES-620] Properly cleanup subscriptions of data explorer widgets

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


The following commit(s) were added to refs/heads/dev by this push:
     new 9ef0480de [STREAMPIPES-620] Properly cleanup subscriptions of data explorer widgets
9ef0480de is described below

commit 9ef0480de4118873e3503b7623ddd3387ddc2760
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Tue Nov 8 09:04:05 2022 +0100

    [STREAMPIPES-620] Properly cleanup subscriptions of data explorer widgets
---
 .../data-explorer-dashboard-panel.component.ts     |  2 +-
 .../data-explorer-dashboard-widget.component.ts    | 36 ++++++++++++----------
 .../base/base-data-explorer-widget.directive.ts    |  3 ++
 .../widgets/base/data-explorer-widget-data.ts      |  2 ++
 4 files changed, 26 insertions(+), 17 deletions(-)

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 06a7a5aaf..37f0a21fd 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,7 +16,7 @@
  *
  */
 
-import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, } from '@angular/core';
+import { Component, OnDestroy, OnInit, 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';
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 276e45138..59f961469 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
@@ -18,7 +18,7 @@
 
 import {
   Component,
-  ComponentFactoryResolver,
+  ComponentFactoryResolver, ComponentRef,
   EventEmitter,
   Input,
   OnDestroy,
@@ -106,6 +106,8 @@ export class DataExplorerDashboardWidgetComponent implements OnInit, OnDestroy {
 
   errorMessage: StreamPipesErrorMessage;
 
+  componentRef: ComponentRef<BaseWidgetData<any>>;
+
   @ViewChild(WidgetDirective, {static: true}) widgetHost!: WidgetDirective;
 
   constructor(private dataViewDataExplorerService: DataViewDataExplorerService,
@@ -131,6 +133,7 @@ export class DataExplorerDashboardWidgetComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
+    this.componentRef.destroy();
     if (this.authSubscription) {
       this.authSubscription.unsubscribe();
     }
@@ -151,21 +154,22 @@ export class DataExplorerDashboardWidgetComponent implements OnInit, OnDestroy {
     const viewContainerRef = this.widgetHost.viewContainerRef;
     viewContainerRef.clear();
 
-    const componentRef = viewContainerRef.createComponent<BaseWidgetData<any>>(componentFactory);
-    componentRef.instance.dataExplorerWidget = this.configuredWidget;
-    componentRef.instance.timeSettings = this.timeSettings;
-    componentRef.instance.gridsterItem = this.dashboardItem;
-    componentRef.instance.gridsterItemComponent = this.gridsterItemComponent;
-    componentRef.instance.editMode = this.editMode;
-    componentRef.instance.dataViewDashboardItem = this.dashboardItem;
-    componentRef.instance.dataExplorerWidget = this.configuredWidget;
-    componentRef.instance.previewMode = this.previewMode;
-    componentRef.instance.gridMode = this.gridMode;
-    const removeSub = componentRef.instance.removeWidgetCallback.subscribe(ev => this.removeWidget());
-    const timerSub = componentRef.instance.timerCallback.subscribe(ev => this.handleTimer(ev));
-    const errorSub = componentRef.instance.errorCallback.subscribe(ev => this.errorMessage = ev);
-
-    componentRef.onDestroy(destroy => {
+    this.componentRef = viewContainerRef.createComponent<BaseWidgetData<any>>(componentFactory);
+    this.componentRef.instance.dataExplorerWidget = this.configuredWidget;
+    this.componentRef.instance.timeSettings = this.timeSettings;
+    this.componentRef.instance.gridsterItem = this.dashboardItem;
+    this.componentRef.instance.gridsterItemComponent = this.gridsterItemComponent;
+    this.componentRef.instance.editMode = this.editMode;
+    this.componentRef.instance.dataViewDashboardItem = this.dashboardItem;
+    this.componentRef.instance.dataExplorerWidget = this.configuredWidget;
+    this.componentRef.instance.previewMode = this.previewMode;
+    this.componentRef.instance.gridMode = this.gridMode;
+    const removeSub = this.componentRef.instance.removeWidgetCallback.subscribe(ev => this.removeWidget());
+    const timerSub = this.componentRef.instance.timerCallback.subscribe(ev => this.handleTimer(ev));
+    const errorSub = this.componentRef.instance.errorCallback.subscribe(ev => this.errorMessage = ev);
+
+    this.componentRef.onDestroy(destroy => {
+      this.componentRef.instance.cleanupSubscriptions();
       removeSub.unsubscribe();
       timerSub.unsubscribe();
       errorSub.unsubscribe();
diff --git a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts
index 151b50362..e9b79ae11 100644
--- a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts
+++ b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts
@@ -148,6 +148,9 @@ export abstract class BaseDataExplorerWidgetDirective<T extends DataExplorerWidg
   }
 
   ngOnDestroy(): void {
+  }
+
+  public cleanupSubscriptions(): void {
     this.widgetConfigurationSub.unsubscribe();
     if (this.resizeSub) {
       this.resizeSub.unsubscribe();
diff --git a/ui/src/app/data-explorer/components/widgets/base/data-explorer-widget-data.ts b/ui/src/app/data-explorer/components/widgets/base/data-explorer-widget-data.ts
index 1a75781ce..6bdf20003 100644
--- a/ui/src/app/data-explorer/components/widgets/base/data-explorer-widget-data.ts
+++ b/ui/src/app/data-explorer/components/widgets/base/data-explorer-widget-data.ts
@@ -39,4 +39,6 @@ export interface BaseWidgetData<T extends DataExplorerWidgetModel> {
   dataExplorerWidget: T;
   previewMode: boolean;
   gridMode: boolean;
+
+  cleanupSubscriptions();
 }