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/02/12 08:56:45 UTC
[incubator-streampipes] 01/06: STREAMPIPES-58: Persist dashboard
layout changes
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch new_dashboard
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 202c5f4734d61e5af23b77ddf99a633bc87d7128
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Feb 9 16:25:52 2020 +0100
STREAMPIPES-58: Persist dashboard layout changes
---
.../components/grid/dashboard-grid.component.css | 8 ++++++++
.../components/grid/dashboard-grid.component.html | 7 +++++++
.../components/grid/dashboard-grid.component.ts | 18 ++++++++++++++++++
.../components/panel/dashboard-panel.component.css | 8 ++------
.../components/panel/dashboard-panel.component.html | 9 +--------
.../components/panel/dashboard-panel.component.ts | 3 +++
ui/src/app/dashboard-v2/dashboard.module.ts | 2 ++
ui/src/app/dashboard-v2/models/widget-data.model.ts | 6 ------
8 files changed, 41 insertions(+), 20 deletions(-)
diff --git a/ui/src/app/dashboard-v2/components/grid/dashboard-grid.component.css b/ui/src/app/dashboard-v2/components/grid/dashboard-grid.component.css
index e69de29..b326dde 100644
--- a/ui/src/app/dashboard-v2/components/grid/dashboard-grid.component.css
+++ b/ui/src/app/dashboard-v2/components/grid/dashboard-grid.component.css
@@ -0,0 +1,8 @@
+
+gridster ::ng-deep {
+ background: white;
+}
+
+gridster.edit ::ng-deep {
+ background: #d3d3d3;
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/grid/dashboard-grid.component.html b/ui/src/app/dashboard-v2/components/grid/dashboard-grid.component.html
index e69de29..7a90a41 100644
--- a/ui/src/app/dashboard-v2/components/grid/dashboard-grid.component.html
+++ b/ui/src/app/dashboard-v2/components/grid/dashboard-grid.component.html
@@ -0,0 +1,7 @@
+<gridster [options]="options" [ngClass]="editMode ? 'edit' : ''">
+ <ng-container *ngFor="let item of dashboard.widgets">
+ <gridster-item [item]="item">
+ <dashboard-widget [widget]="item" [editMode]="editMode"></dashboard-widget>
+ </gridster-item>
+ </ng-container>
+</gridster>
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/grid/dashboard-grid.component.ts b/ui/src/app/dashboard-v2/components/grid/dashboard-grid.component.ts
index e69de29..278f7dd 100644
--- a/ui/src/app/dashboard-v2/components/grid/dashboard-grid.component.ts
+++ b/ui/src/app/dashboard-v2/components/grid/dashboard-grid.component.ts
@@ -0,0 +1,18 @@
+import {Component, Input, OnInit} from "@angular/core";
+import {Dashboard, DashboardConfig} from "../../models/dashboard.model";
+
+@Component({
+ selector: 'dashboard-grid',
+ templateUrl: './dashboard-grid.component.html',
+ styleUrls: ['./dashboard-grid.component.css']
+})
+export class DashboardGridComponent implements OnInit {
+
+ @Input() editMode: boolean;
+ @Input() dashboard: Dashboard;
+ @Input() options: DashboardConfig;
+
+ ngOnInit(): void {
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/panel/dashboard-panel.component.css b/ui/src/app/dashboard-v2/components/panel/dashboard-panel.component.css
index bbc929d..476acda 100644
--- a/ui/src/app/dashboard-v2/components/panel/dashboard-panel.component.css
+++ b/ui/src/app/dashboard-v2/components/panel/dashboard-panel.component.css
@@ -2,10 +2,6 @@
margin: 20px;
}
-gridster ::ng-deep {
- background: white;
+.h-100 {
+ height:100%;
}
-
-gridster.edit ::ng-deep {
- background: #d3d3d3;
-}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/panel/dashboard-panel.component.html b/ui/src/app/dashboard-v2/components/panel/dashboard-panel.component.html
index fd1362a..3b32940 100644
--- a/ui/src/app/dashboard-v2/components/panel/dashboard-panel.component.html
+++ b/ui/src/app/dashboard-v2/components/panel/dashboard-panel.component.html
@@ -5,14 +5,7 @@
</button>
<button mat-button mat-raised-button color="primary" (click)="addWidget()" [disabled]="!editMode">Add
visualization</button>
-
</div>
- <gridster [options]="options" [ngClass]="editMode ? 'edit' : ''">
- <ng-container *ngFor="let item of dashboard.widgets">
- <gridster-item [item]="item">
- <dashboard-widget [widget]="item" [editMode]="editMode"></dashboard-widget>
- </gridster-item>
- </ng-container>
- </gridster>
+ <dashboard-grid [editMode]="editMode" [dashboard]="dashboard" [options]="options" class="h-100"></dashboard-grid>
</div>
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/panel/dashboard-panel.component.ts b/ui/src/app/dashboard-v2/components/panel/dashboard-panel.component.ts
index 3de4516..e88c674 100644
--- a/ui/src/app/dashboard-v2/components/panel/dashboard-panel.component.ts
+++ b/ui/src/app/dashboard-v2/components/panel/dashboard-panel.component.ts
@@ -73,6 +73,9 @@ export class DashboardPanelComponent implements OnInit {
}
toggleEditMode() {
+ if (this.editMode) {
+ this.updateDashboard();
+ }
this.editMode = !(this.editMode);
this.options.draggable.enabled = this.editMode;
this.options.resizable.enabled = this.editMode;
diff --git a/ui/src/app/dashboard-v2/dashboard.module.ts b/ui/src/app/dashboard-v2/dashboard.module.ts
index e166d23..96ef342 100644
--- a/ui/src/app/dashboard-v2/dashboard.module.ts
+++ b/ui/src/app/dashboard-v2/dashboard.module.ts
@@ -21,6 +21,7 @@ import {streamPipesStompConfig} from "./services/websocket.config";
import {InjectableRxStompConfig, RxStompService, rxStompServiceFactory} from "@stomp/ng2-stompjs";
import {DashboardOverviewComponent} from "./components/overview/dashboard-overview.component";
import {EditDashboardDialogComponent} from "./dialogs/edit-dashboard/edit-dashboard-dialog.component";
+import {DashboardGridComponent} from "./components/grid/dashboard-grid.component";
const dashboardWidgets = [
@@ -45,6 +46,7 @@ const dashboardWidgets = [
],
declarations: [
DashboardComponent,
+ DashboardGridComponent,
DashboardOverviewComponent,
DashboardPanelComponent,
DashboardWidgetComponent,
diff --git a/ui/src/app/dashboard-v2/models/widget-data.model.ts b/ui/src/app/dashboard-v2/models/widget-data.model.ts
deleted file mode 100644
index ca69adc..0000000
--- a/ui/src/app/dashboard-v2/models/widget-data.model.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-
-export interface WidgetData {
- name?: string;
- label?: string;
- icon?: string;
-}
\ No newline at end of file