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 2021/12/05 17:52:36 UTC
[incubator-streampipes] 01/03: [hotfix] Reduce component dependencies of dashboard 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
commit f5d206520e60683cef89cba3b2614b9d92a45b0e
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sun Dec 5 18:17:04 2021 +0100
[hotfix] Reduce component dependencies of dashboard widgets
---
.../app-asset-monitoring.module.ts | 4 +-
.../components/view-asset/view-asset.component.ts | 20 +++-
.../components/grid/dashboard-grid.component.html | 6 +-
.../components/grid/dashboard-grid.component.ts | 4 +-
.../widget/dashboard-widget.component.html | 116 ++++++++++++---------
.../widget/dashboard-widget.component.ts | 6 +-
.../widgets/base/base-ngx-charts-widget.ts | 6 +-
.../components/widgets/base/base-widget.ts | 32 +++---
.../widgets/html/html-widget.component.ts | 6 +-
.../components/widgets/map/map-widget.component.ts | 6 +-
.../components/widgets/raw/raw-widget.component.ts | 6 +-
.../widgets/status/status-widget.component.ts | 2 +-
.../trafficlight/traffic-light-widget.component.ts | 6 +-
.../wordcloud/wordcloud-widget.component.ts | 2 +-
ui/src/app/dashboard/dashboard.module.ts | 3 +-
ui/src/app/dashboard/models/gridster-info.model.ts | 8 +-
ui/src/app/dashboard/services/resize.service.ts | 6 +-
17 files changed, 141 insertions(+), 98 deletions(-)
diff --git a/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts b/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
index 8c4f020..f4de74d 100644
--- a/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
+++ b/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
@@ -41,6 +41,7 @@ import {AssetDashboardOverviewComponent} from "./components/dashboard-overview/d
import {InjectableRxStompConfig, RxStompService, rxStompServiceFactory} from "@stomp/ng2-stompjs";
import {streamPipesStompConfig} from "../dashboard/services/websocket.config";
import { AddLinkDialogComponent } from './dialog/add-link/add-link-dialog.component';
+import {DashboardModule} from "../dashboard/dashboard.module";
@NgModule({
imports: [
@@ -51,7 +52,8 @@ import { AddLinkDialogComponent } from './dialog/add-link/add-link-dialog.compon
MatInputModule,
MatFormFieldModule,
FormsModule,
- ColorPickerModule
+ ColorPickerModule,
+ DashboardModule
],
declarations: [
AppAssetMonitoringComponent,
diff --git a/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.ts b/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.ts
index d1c08e6..2d03150 100644
--- a/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.ts
+++ b/ui/src/app/app-asset-monitoring/components/view-asset/view-asset.component.ts
@@ -16,12 +16,19 @@
*
*/
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import Konva from 'konva';
import { WebsocketService } from '../../services/websocket.service';
import { DashboardConfiguration } from '../../model/dashboard-configuration.model';
import { RestService } from '../../services/rest.service';
+import {DashboardService} from "../../../dashboard/services/dashboard.service";
+import {
+ DashboardWidgetModel,
+ Pipeline,
+ VisualizablePipeline
+} from "../../../core-model/gen/streampipes-model";
+import {DashboardItem} from "../../../dashboard/models/dashboard.model";
interface Window {
Image: any;
@@ -34,7 +41,7 @@ declare const window: Window;
templateUrl: './view-asset.component.html',
styleUrls: ['./view-asset.component.css']
})
-export class ViewAssetComponent {
+export class ViewAssetComponent implements OnInit {
@Input() dashboardConfig: DashboardConfiguration;
@Output() dashboardClosed = new EventEmitter<boolean>();
@@ -44,9 +51,16 @@ export class ViewAssetComponent {
mainLayer: any;
backgroundImageLayer: any;
+ dashboardItem: DashboardItem;
+ widgetLoaded = false;
+
constructor(private websocketService: WebsocketService,
- private restService: RestService) {
+ private restService: RestService,
+ private dashboardService: DashboardService) {
+
+ }
+ ngOnInit() {
}
ngAfterViewInit() {
diff --git a/ui/src/app/dashboard/components/grid/dashboard-grid.component.html b/ui/src/app/dashboard/components/grid/dashboard-grid.component.html
index 6de55df..d0d3795 100644
--- a/ui/src/app/dashboard/components/grid/dashboard-grid.component.html
+++ b/ui/src/app/dashboard/components/grid/dashboard-grid.component.html
@@ -25,10 +25,12 @@
<gridster-item [item]="item" #gridsterItemComponent>
<dashboard-widget (updateCallback)="propagateItemUpdate($event)"
(deleteCallback)="propagateItemRemoval($event)"
- [item]="item" [widget]="item"
+ [widget]="item"
[editMode]="editMode"
[headerVisible]="headerVisible"
- [gridsterItemComponent]="gridsterItemComponent"></dashboard-widget>
+ [itemWidth]="gridsterItemComponent.width"
+ [itemHeight]="gridsterItemComponent.height"
+ ></dashboard-widget>
</gridster-item>
</ng-container>
</gridster>
diff --git a/ui/src/app/dashboard/components/grid/dashboard-grid.component.ts b/ui/src/app/dashboard/components/grid/dashboard-grid.component.ts
index 9c0a34a..3f0305c 100644
--- a/ui/src/app/dashboard/components/grid/dashboard-grid.component.ts
+++ b/ui/src/app/dashboard/components/grid/dashboard-grid.component.ts
@@ -74,10 +74,10 @@ export class DashboardGridComponent implements OnInit, OnChanges {
resizable: { enabled: this.editMode },
displayGrid: this.editMode ? 'always' : 'none',
itemResizeCallback: ((item, itemComponent) => {
- this.resizeService.notify({gridsterItem: item, gridsterItemComponent: itemComponent} as GridsterInfo);
+ this.resizeService.notify({id: item.id, width: itemComponent.width, height: itemComponent.height});
}),
itemInitCallback: ((item, itemComponent) => {
- this.resizeService.notify({gridsterItem: item, gridsterItemComponent: itemComponent} as GridsterInfo);
+ this.resizeService.notify({id: item.id, width: itemComponent.width, height: itemComponent.height});
})
};
}
diff --git a/ui/src/app/dashboard/components/widget/dashboard-widget.component.html b/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
index eef3ceb..1c4e872 100644
--- a/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
+++ b/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
@@ -38,102 +38,116 @@
<span>Modify widget</span>
</button>
</div>
- <div *ngIf="widgetLoaded && !widgetNotAvailable && !pipelineRunning" class="h-100 pipeline-not-running" fxFlex="100"
+ <div *ngIf="widgetLoaded && !widgetNotAvailable && !pipelineRunning" class="h-100 pipeline-not-running"
+ fxFlex="100"
fxLayout="column"
fxLayoutAlign="center center">
<i class="material-icons disconnect-icon">link_off</i>
- <h5 class="text-center">Pipeline <i>{{pipeline.name}}</i> is not running, did you start the pipeline?</h5>
+ <h5 class="text-center">Pipeline <i>{{pipeline.name}}</i> is not running, did you start the pipeline?
+ </h5>
<button mat-button mat-raised-button color="accent" (click)="startPipeline()">
<span>Start pipeline</span>
</button>
</div>
<div *ngIf="widgetLoaded && pipelineRunning" class="h-100">
<div *ngIf="configuredWidget.widgetType === 'number'" class="h-100 p-0">
- <number-widget [gridsterItemComponent]="gridsterItemComponent" [gridsterItem]="item"
- [widget]="widget" [editMode]="editMode"
- [widgetConfig]="configuredWidget" [widgetDataConfig]="widgetDataConfig" class="h-100"></number-widget>
+ <number-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
+ [widgetConfig]="configuredWidget" [widgetDataConfig]="widgetDataConfig"
+ class="h-100"></number-widget>
</div>
<div *ngIf="configuredWidget.widgetType === 'line'" class="h-100 p-0">
- <line-widget [gridsterItemComponent]="gridsterItemComponent" [editMode]="editMode"
- [gridsterItem]="item" [widget]="widget" [widgetConfig]="configuredWidget"
+ <line-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
+ [widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></line-widget>
</div>
<div *ngIf="configuredWidget.widgetType === 'area'" class="h-100 p-0">
- <area-widget [gridsterItemComponent]="gridsterItemComponent" [editMode]="editMode"
- [gridsterItem]="item" [widget]="widget" [widgetConfig]="configuredWidget"
+ <area-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
+ [widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></area-widget>
</div>
<div *ngIf="configuredWidget.widgetType === 'table'" class="h-100 p-0">
- <table-widget [gridsterItemComponent]="gridsterItemComponent"
- [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
+ <table-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></table-widget>
</div>
<div *ngIf="configuredWidget.widgetType === 'gauge'" class="h-100 p-0">
- <gauge-widget [gridsterItemComponent]="gridsterItemComponent"
- [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
+ <gauge-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></gauge-widget>
</div>
<div *ngIf="configuredWidget.widgetType === 'image'" class="h-100 p-0">
- <image-widget [gridsterItemComponent]="gridsterItemComponent"
- [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
+ <image-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></image-widget>
</div>
<div *ngIf="configuredWidget.widgetType === 'map'" class="h-100 p-0">
- <map-widget [gridsterItemComponent]="gridsterItemComponent"
- [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
- [widgetConfig]="configuredWidget"
- [widgetDataConfig]="widgetDataConfig" class="h-100"></map-widget>
+ <map-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
+ [widgetConfig]="configuredWidget"
+ [widgetDataConfig]="widgetDataConfig" class="h-100"></map-widget>
</div>
<div *ngIf="configuredWidget.widgetType === 'raw'" class="h-100 p-0">
- <raw-widget [gridsterItemComponent]="gridsterItemComponent"
- [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
+ <raw-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></raw-widget>
</div>
<div *ngIf="configuredWidget.widgetType === 'html'" class="h-100 p-0">
- <html-widget [gridsterItemComponent]="gridsterItemComponent"
- [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
- [widgetConfig]="configuredWidget"
- [widgetDataConfig]="widgetDataConfig" class="h-100"></html-widget>
- </div>
- <div *ngIf="configuredWidget.widgetType === 'trafficlight'" class="h-100 p-0">
- <traffic-light-widget [gridsterItemComponent]="gridsterItemComponent"
- [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
+ <html-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
[widgetConfig]="configuredWidget"
- [widgetDataConfig]="widgetDataConfig" class="h-100"></traffic-light-widget>
+ [widgetDataConfig]="widgetDataConfig" class="h-100"></html-widget>
</div>
- <div *ngIf="configuredWidget.widgetType === 'pallet'" class="h-100 p-0">
- <sp-pallet [gridsterItemComponent]="gridsterItemComponent"
- [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
- [widgetConfig]="configuredWidget"
- [widgetDataConfig]="widgetDataConfig" class="h-100"></sp-pallet>
+ <div *ngIf="configuredWidget.widgetType === 'trafficlight'" class="h-100 p-0">
+ <traffic-light-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
+ [widgetConfig]="configuredWidget"
+ [widgetDataConfig]="widgetDataConfig" class="h-100"></traffic-light-widget>
</div>
<div *ngIf="configuredWidget.widgetType === 'wordcloud'" class="h-100 p-0">
- <wordcloud-widget [gridsterItemComponent]="gridsterItemComponent"
- [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
- [widgetConfig]="configuredWidget"
- [widgetDataConfig]="widgetDataConfig" class="h-100"></wordcloud-widget>
+ <wordcloud-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
+ [widgetConfig]="configuredWidget"
+ [widgetDataConfig]="widgetDataConfig" class="h-100"></wordcloud-widget>
</div>
<div *ngIf="configuredWidget.widgetType === 'status'" class="h-100 p-0">
- <status-widget [gridsterItemComponent]="gridsterItemComponent"
- [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
- [widgetConfig]="configuredWidget"
- [widgetDataConfig]="widgetDataConfig" class="h-100"></status-widget>
+ <status-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
+ [widgetConfig]="configuredWidget"
+ [widgetDataConfig]="widgetDataConfig" class="h-100"></status-widget>
</div>
<div *ngIf="configuredWidget.widgetType === 'bar-race'" class="h-100 p-0">
- <bar-race-widget [gridsterItemComponent]="gridsterItemComponent"
- [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
- [widgetConfig]="configuredWidget"
- [widgetDataConfig]="widgetDataConfig" class="h-100"></bar-race-widget>
+ <bar-race-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
+ [widgetConfig]="configuredWidget"
+ [widgetDataConfig]="widgetDataConfig" class="h-100"></bar-race-widget>
</div>
<div *ngIf="configuredWidget.widgetType === 'stacked-line-chart'" class="h-100 p-0">
- <stacked-line-chart-widget [gridsterItemComponent]="gridsterItemComponent"
- [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
- [widgetConfig]="configuredWidget"
- [widgetDataConfig]="widgetDataConfig" class="h-100"></stacked-line-chart-widget>
+ <stacked-line-chart-widget [itemWidth]="itemWidth"
+ [itemHeight]="itemHeight"
+ [editMode]="editMode"
+ [widgetConfig]="configuredWidget"
+ [widgetDataConfig]="widgetDataConfig"
+ class="h-100"></stacked-line-chart-widget>
</div>
</div>
</div>
diff --git a/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts b/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts
index 7f19700..033b23b 100644
--- a/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts
+++ b/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts
@@ -41,8 +41,10 @@ export class DashboardWidgetComponent implements OnInit {
@Input() widget: DashboardItem;
@Input() editMode: boolean;
@Input() headerVisible: boolean = false;
- @Input() item: GridsterItem;
- @Input() gridsterItemComponent: GridsterItemComponent;
+ @Input() itemWidth: number;
+ @Input() itemHeight: number;
+ //@Input() item: GridsterItem;
+ //@Input() gridsterItemComponent: GridsterItemComponent;
@Output() deleteCallback: EventEmitter<DashboardItem> = new EventEmitter<DashboardItem>();
@Output() updateCallback: EventEmitter<DashboardWidgetModel> = new EventEmitter<DashboardWidgetModel>();
diff --git a/ui/src/app/dashboard/components/widgets/base/base-ngx-charts-widget.ts b/ui/src/app/dashboard/components/widgets/base/base-ngx-charts-widget.ts
index bdc0cae..9f98246 100644
--- a/ui/src/app/dashboard/components/widgets/base/base-ngx-charts-widget.ts
+++ b/ui/src/app/dashboard/components/widgets/base/base-ngx-charts-widget.ts
@@ -37,8 +37,8 @@ export abstract class BaseNgxChartsStreamPipesWidget extends BaseStreamPipesWidg
ngOnInit() {
super.ngOnInit();
this.colorScheme = {domain: [this.selectedSecondaryTextColor, this.selectedPrimaryTextColor]};
- this.view = [this.computeCurrentWidth(this.gridsterItemComponent),
- this.computeCurrentHeight(this.gridsterItemComponent)];
+ this.view = [this.computeCurrentWidth(this.itemWidth),
+ this.computeCurrentHeight(this.itemHeight)];
this.displayChart = true;
}
@@ -48,4 +48,4 @@ export abstract class BaseNgxChartsStreamPipesWidget extends BaseStreamPipesWidg
this.displayChart = true;
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/dashboard/components/widgets/base/base-widget.ts b/ui/src/app/dashboard/components/widgets/base/base-widget.ts
index 44a87d1..23dd4de 100644
--- a/ui/src/app/dashboard/components/widgets/base/base-widget.ts
+++ b/ui/src/app/dashboard/components/widgets/base/base-widget.ts
@@ -25,7 +25,7 @@ import {Subscription} from "rxjs";
import {GridsterItem, GridsterItemComponent} from "angular-gridster2";
import {WidgetConfigBuilder} from "../../../registry/widget-config-builder";
import {ResizeService} from "../../../services/resize.service";
-import {GridsterInfo} from "../../../models/gridster-info.model";
+import {GridsterInfo, WidgetInfo} from "../../../models/gridster-info.model";
import {DashboardService} from "../../../services/dashboard.service";
import {
DashboardWidgetModel,
@@ -35,11 +35,13 @@ import {
@Directive()
export abstract class BaseStreamPipesWidget implements OnChanges {
- @Input() widget: DashboardItem;
+ //@Input() widget: DashboardItem;
@Input() widgetConfig: DashboardWidgetModel;
@Input() widgetDataConfig: VisualizablePipeline;
- @Input() gridsterItem: GridsterItem;
- @Input() gridsterItemComponent: GridsterItemComponent;
+ @Input() itemWidth: number;
+ @Input() itemHeight: number;
+ //@Input() gridsterItem: GridsterItem;
+ //@Input() gridsterItemComponent: GridsterItemComponent;
@Input() editMode: boolean;
static readonly PADDING: number = 20;
@@ -99,16 +101,16 @@ export abstract class BaseStreamPipesWidget implements OnChanges {
this.subscription.unsubscribe();
}
- computeCurrentWidth(gridsterItemComponent: GridsterItemComponent): number {
+ computeCurrentWidth(width: number): number {
return this.adjustPadding ?
- (gridsterItemComponent.width - (BaseStreamPipesWidget.PADDING * 2)) :
- gridsterItemComponent.width;
+ (width - (BaseStreamPipesWidget.PADDING * 2)) :
+ width;
}
- computeCurrentHeight(gridsterItemComponent: GridsterItemComponent): number {
+ computeCurrentHeight(height: number): number {
return this.adjustPadding ?
- (gridsterItemComponent.height - (BaseStreamPipesWidget.PADDING * 2) - this.editModeOffset() - this.titlePanelOffset()) :
- gridsterItemComponent.height - this.editModeOffset() - this.titlePanelOffset();
+ (height - (BaseStreamPipesWidget.PADDING * 2) - this.editModeOffset() - this.titlePanelOffset()) :
+ height - this.editModeOffset() - this.titlePanelOffset();
}
editModeOffset(): number {
@@ -131,12 +133,12 @@ export abstract class BaseStreamPipesWidget implements OnChanges {
}
}
- onResize(info: GridsterInfo) {
- if (info.gridsterItem.id === this.gridsterItem.id) {
+ onResize(info: WidgetInfo) {
+ if (info.id === this.widgetConfig._id) {
setTimeout(() => {
- this.onSizeChanged(this.computeCurrentWidth(info.gridsterItemComponent),
- this.computeCurrentHeight(info.gridsterItemComponent))
+ this.onSizeChanged(this.computeCurrentWidth(info.width),
+ this.computeCurrentHeight(info.height))
}, 100);
}
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/dashboard/components/widgets/html/html-widget.component.ts b/ui/src/app/dashboard/components/widgets/html/html-widget.component.ts
index b8925c4..fe07389 100644
--- a/ui/src/app/dashboard/components/widgets/html/html-widget.component.ts
+++ b/ui/src/app/dashboard/components/widgets/html/html-widget.component.ts
@@ -42,8 +42,8 @@ export class HtmlWidgetComponent extends BaseStreamPipesWidget implements OnInit
ngOnInit(): void {
super.ngOnInit();
- this.width = this.computeCurrentWidth(this.gridsterItemComponent);
- this.height = this.computeCurrentHeight(this.gridsterItemComponent);
+ this.width = this.computeCurrentWidth(this.itemWidth);
+ this.height = this.computeCurrentHeight(this.itemHeight);
}
ngOnDestroy(): void {
@@ -63,4 +63,4 @@ export class HtmlWidgetComponent extends BaseStreamPipesWidget implements OnInit
this.height = height;
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/dashboard/components/widgets/map/map-widget.component.ts b/ui/src/app/dashboard/components/widgets/map/map-widget.component.ts
index 4cc420f..8c2ffe1 100644
--- a/ui/src/app/dashboard/components/widgets/map/map-widget.component.ts
+++ b/ui/src/app/dashboard/components/widgets/map/map-widget.component.ts
@@ -66,8 +66,8 @@ export class MapWidgetComponent extends BaseStreamPipesWidget implements OnInit,
this.markerLayers = [];
this.markerIds = [];
this.showMarkers = true;
- this.mapWidth = this.computeCurrentWidth(this.gridsterItemComponent);
- this.mapHeight = this.computeCurrentHeight(this.gridsterItemComponent);
+ this.mapWidth = this.computeCurrentWidth(this.itemWidth);
+ this.mapHeight = this.computeCurrentHeight(this.itemHeight);
}
ngOnDestroy(): void {
@@ -161,4 +161,4 @@ export class MapWidgetComponent extends BaseStreamPipesWidget implements OnInit,
this.map.invalidateSize();
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/dashboard/components/widgets/raw/raw-widget.component.ts b/ui/src/app/dashboard/components/widgets/raw/raw-widget.component.ts
index 6539238..d420b19 100644
--- a/ui/src/app/dashboard/components/widgets/raw/raw-widget.component.ts
+++ b/ui/src/app/dashboard/components/widgets/raw/raw-widget.component.ts
@@ -39,8 +39,8 @@ export class RawWidgetComponent extends BaseStreamPipesWidget implements OnInit,
ngOnInit(): void {
super.ngOnInit();
- this.width = this.computeCurrentWidth(this.gridsterItemComponent);
- this.height = this.computeCurrentHeight(this.gridsterItemComponent);
+ this.width = this.computeCurrentWidth(this.itemWidth);
+ this.height = this.computeCurrentHeight(this.itemHeight);
this.items = [];
}
@@ -65,4 +65,4 @@ export class RawWidgetComponent extends BaseStreamPipesWidget implements OnInit,
this.height = height;
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/dashboard/components/widgets/status/status-widget.component.ts b/ui/src/app/dashboard/components/widgets/status/status-widget.component.ts
index dc7b9f2..0fdcbc5 100644
--- a/ui/src/app/dashboard/components/widgets/status/status-widget.component.ts
+++ b/ui/src/app/dashboard/components/widgets/status/status-widget.component.ts
@@ -45,7 +45,7 @@ export class StatusWidgetComponent extends BaseStreamPipesWidget implements OnIn
ngOnInit(): void {
super.ngOnInit();
- this.onSizeChanged(this.computeCurrentWidth(this.gridsterItemComponent), this.computeCurrentHeight(this.gridsterItemComponent));
+ this.onSizeChanged(this.computeCurrentWidth(this.itemWidth), this.computeCurrentHeight(this.itemHeight));
}
protected extractConfig(extractor: StaticPropertyExtractor) {
diff --git a/ui/src/app/dashboard/components/widgets/trafficlight/traffic-light-widget.component.ts b/ui/src/app/dashboard/components/widgets/trafficlight/traffic-light-widget.component.ts
index df164a0..49eeeff 100644
--- a/ui/src/app/dashboard/components/widgets/trafficlight/traffic-light-widget.component.ts
+++ b/ui/src/app/dashboard/components/widgets/trafficlight/traffic-light-widget.component.ts
@@ -53,8 +53,8 @@ export class TrafficLightWidgetComponent extends BaseStreamPipesWidget implement
ngOnInit(): void {
super.ngOnInit();
- this.width = this.computeCurrentWidth(this.gridsterItemComponent);
- this.height = this.computeCurrentHeight(this.gridsterItemComponent);
+ this.width = this.computeCurrentWidth(this.itemWidth);
+ this.height = this.computeCurrentHeight(this.itemHeight);
this.updateContainerSize();
this.updateLightSize();
this.items = [];
@@ -122,4 +122,4 @@ export class TrafficLightWidgetComponent extends BaseStreamPipesWidget implement
this.updateLightSize();
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/dashboard/components/widgets/wordcloud/wordcloud-widget.component.ts b/ui/src/app/dashboard/components/widgets/wordcloud/wordcloud-widget.component.ts
index f2a3178..e7b728e 100644
--- a/ui/src/app/dashboard/components/widgets/wordcloud/wordcloud-widget.component.ts
+++ b/ui/src/app/dashboard/components/widgets/wordcloud/wordcloud-widget.component.ts
@@ -99,7 +99,7 @@ export class WordcloudWidgetComponent extends BaseStreamPipesWidget implements O
ngOnInit(): void {
super.ngOnInit();
- this.onSizeChanged(this.gridsterItemComponent.width, this.gridsterItemComponent.height);
+ this.onSizeChanged(this.itemWidth, this.itemHeight);
}
protected extractConfig(extractor: StaticPropertyExtractor) {
diff --git a/ui/src/app/dashboard/dashboard.module.ts b/ui/src/app/dashboard/dashboard.module.ts
index 4e388fa..424b227 100644
--- a/ui/src/app/dashboard/dashboard.module.ts
+++ b/ui/src/app/dashboard/dashboard.module.ts
@@ -126,7 +126,8 @@ import {ReloadPipelineService} from "./services/reload-pipeline.service";
},
],
exports: [
- DashboardComponent
+ DashboardComponent,
+ DashboardWidgetComponent
],
entryComponents: [
DashboardComponent,
diff --git a/ui/src/app/dashboard/models/gridster-info.model.ts b/ui/src/app/dashboard/models/gridster-info.model.ts
index 43c41de..c25992d 100644
--- a/ui/src/app/dashboard/models/gridster-info.model.ts
+++ b/ui/src/app/dashboard/models/gridster-info.model.ts
@@ -21,4 +21,10 @@ import {GridsterItem, GridsterItemComponent} from "angular-gridster2";
export interface GridsterInfo {
gridsterItem: GridsterItem;
gridsterItemComponent: GridsterItemComponent
-}
\ No newline at end of file
+}
+
+export interface WidgetInfo {
+ width: number;
+ height: number;
+ id: string;
+}
diff --git a/ui/src/app/dashboard/services/resize.service.ts b/ui/src/app/dashboard/services/resize.service.ts
index 1604bf0..d37b7a3 100644
--- a/ui/src/app/dashboard/services/resize.service.ts
+++ b/ui/src/app/dashboard/services/resize.service.ts
@@ -18,14 +18,14 @@
import {ReplaySubject, Subject} from "rxjs";
import {Injectable} from "@angular/core";
-import {GridsterInfo} from "../models/gridster-info.model";
+import {GridsterInfo, WidgetInfo} from "../models/gridster-info.model";
@Injectable()
export class ResizeService {
- public resizeSubject: Subject<GridsterInfo> = new Subject<GridsterInfo>();
+ public resizeSubject: Subject<WidgetInfo> = new Subject<WidgetInfo>();
- public notify(info: GridsterInfo): void {
+ public notify(info: WidgetInfo): void {
this.resizeSubject.next(info);
}
}