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:46 UTC
[incubator-streampipes] 02/06: Improve editing of dashboards,
display name and description
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 0f44deea84bd3fdf3a275f969dff46e3aade3e53
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Feb 9 18:00:53 2020 +0100
Improve editing of dashboards, display name and description
---
.../model/dashboard/DashboardModel.java | 9 ++++++
ui/package.json | 2 +-
.../components/grid/dashboard-grid.component.html | 4 +++
.../overview/dashboard-overview.component.html | 28 +++++++++++++++--
.../overview/dashboard-overview.component.ts | 11 ++++++-
.../panel/dashboard-panel.component.html | 6 ++--
.../components/panel/dashboard-panel.component.ts | 36 ++++++++++++++--------
ui/src/app/dashboard-v2/dashboard.component.css | 3 ++
ui/src/app/dashboard-v2/dashboard.component.html | 26 +++++++++++-----
ui/src/app/dashboard-v2/dashboard.component.ts | 11 +++++++
.../edit-dashboard-dialog.component.html | 1 +
ui/src/app/dashboard-v2/models/dashboard.model.ts | 1 +
12 files changed, 111 insertions(+), 27 deletions(-)
diff --git a/streampipes-model/src/main/java/org/apache/streampipes/model/dashboard/DashboardModel.java b/streampipes-model/src/main/java/org/apache/streampipes/model/dashboard/DashboardModel.java
index 7fcba5c..882ddf5 100644
--- a/streampipes-model/src/main/java/org/apache/streampipes/model/dashboard/DashboardModel.java
+++ b/streampipes-model/src/main/java/org/apache/streampipes/model/dashboard/DashboardModel.java
@@ -38,6 +38,7 @@ public class DashboardModel {
private String id;
private String name;
private String description;
+ private boolean displayHeader;
private List<DashboardItem> widgets;
@@ -92,4 +93,12 @@ public class DashboardModel {
public void setWidgets(List<DashboardItem> widgets) {
this.widgets = widgets;
}
+
+ public boolean isDisplayHeader() {
+ return displayHeader;
+ }
+
+ public void setDisplayHeader(boolean displayHeader) {
+ this.displayHeader = displayHeader;
+ }
}
diff --git a/ui/package.json b/ui/package.json
index 324941e..d53dc74 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -29,7 +29,7 @@
"@angular/upgrade": "7.2.9",
"@ngui/datetime-picker": "0.16.2",
"@stomp/ng2-stompjs": "^7.2.0",
- "@swimlane/ngx-charts": "10.1.0",
+ "@swimlane/ngx-charts": "13.0.2",
"@uirouter/angular-hybrid": "7.0.0",
"angular": "1.7.7",
"angular-animate": "1.7.7",
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 7a90a41..dc85ab7 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
@@ -1,3 +1,7 @@
+<div *ngIf="dashboard.displayHeader" class="text-center">
+ <h2>{{dashboard.name}}</h2>
+ <h3>{{dashboard.description}}</h3>
+</div>
<gridster [options]="options" [ngClass]="editMode ? 'edit' : ''">
<ng-container *ngFor="let item of dashboard.widgets">
<gridster-item [item]="item">
diff --git a/ui/src/app/dashboard-v2/components/overview/dashboard-overview.component.html b/ui/src/app/dashboard-v2/components/overview/dashboard-overview.component.html
index b254d0a..35a2f3a 100644
--- a/ui/src/app/dashboard-v2/components/overview/dashboard-overview.component.html
+++ b/ui/src/app/dashboard-v2/components/overview/dashboard-overview.component.html
@@ -33,13 +33,37 @@
<table fxFlex="95" mat-table [dataSource]="dataSource" multiTemplateDataRows>
<ng-container matColumnDef="name">
- <th fxFlex="80" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Dashboard</th>
- <td fxFlex="80" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
+ <th fxFlex="60" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Dashboard</th>
+ <td fxFlex="60" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
{{element.name}}<br/>
{{element.description}}
</td>
</ng-container>
+ <ng-container matColumnDef="open">
+ <th fxFlex="10" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Show</th>
+ <td fxFlex="10" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
+ <div fxLayout="row">
+ <button mat-button mat-icon-button color="primary"
+ (click)="showDashboard(element)">
+ <i class="material-icons">visibility</i>
+ </button>
+ </div>
+ </td>
+ </ng-container>
+
+ <ng-container matColumnDef="openWindow">
+ <th fxFlex="10" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Window</th>
+ <td fxFlex="10" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
+ <div fxLayout="row">
+ <button mat-button mat-icon-button color="primary"
+ (click)="openExternalDashboard(element)">
+ <i class="material-icons">open_in_new</i>
+ </button>
+ </div>
+ </td>
+ </ng-container>
+
<ng-container matColumnDef="edit">
<th fxFlex="10" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Edit</th>
<td fxFlex="10" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
diff --git a/ui/src/app/dashboard-v2/components/overview/dashboard-overview.component.ts b/ui/src/app/dashboard-v2/components/overview/dashboard-overview.component.ts
index f492f9d..031a729 100644
--- a/ui/src/app/dashboard-v2/components/overview/dashboard-overview.component.ts
+++ b/ui/src/app/dashboard-v2/components/overview/dashboard-overview.component.ts
@@ -15,9 +15,10 @@ export class DashboardOverviewComponent implements OnInit {
@Input() dashboards: Array<Dashboard>;
@Output() reloadDashboardsEmitter = new EventEmitter<boolean>();
+ @Output() selectDashboardEmitter = new EventEmitter<Dashboard>();
dataSource = new MatTableDataSource<Dashboard>();
- displayedColumns: string[] = ['name', 'edit', 'delete'];
+ displayedColumns: string[] = ['name', 'open', 'openWindow', 'edit', 'delete'];
constructor(private dashboardService: DashboardService,
public dialog: MatDialog) {
@@ -59,4 +60,12 @@ export class DashboardOverviewComponent implements OnInit {
});
}
+ showDashboard(dashboard: Dashboard) {
+ this.selectDashboardEmitter.emit(dashboard);
+ }
+
+ openExternalDashboard(dashboard: Dashboard) {
+
+ }
+
}
\ 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 3b32940..55448cd 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
@@ -1,7 +1,7 @@
<div fxFlex="100" fxLayout="column" class="m-20">
- <div fxLayout="row wrap" style="margin-bottom:20px;">
- <button mat-button mat-raised-button color="primary" (click)="toggleEditMode()"
- style="margin-right:10px;">{{editMode ? 'Save' : 'Edit'}}
+ <div fxLayout="row wrap" style="margin-bottom:20px;" *ngIf="editMode">
+ <button mat-button mat-raised-button color="primary" (click)="updateDashboardAndCloseEditMode()"
+ style="margin-right:10px;">Save
</button>
<button mat-button mat-raised-button color="primary" (click)="addWidget()" [disabled]="!editMode">Add
visualization</button>
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 e88c674..96d3216 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
@@ -1,4 +1,4 @@
-import {Component, Input, OnChanges, OnInit, SimpleChanges} from "@angular/core";
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from "@angular/core";
import {Dashboard, DashboardConfig, DashboardItem} from "../../models/dashboard.model";
import {Subscription} from "rxjs";
import {GridType} from "angular-gridster2";
@@ -12,17 +12,17 @@ import {DashboardService} from "../../services/dashboard.service";
templateUrl: './dashboard-panel.component.html',
styleUrls: ['./dashboard-panel.component.css']
})
-export class DashboardPanelComponent implements OnInit {
+export class DashboardPanelComponent implements OnInit, OnChanges {
@Input() dashboard: Dashboard;
+ @Input("editMode") editMode: boolean;
+ @Output("editModeChange") editModeChange: EventEmitter<boolean> = new EventEmitter();
public options: DashboardConfig;
public items: DashboardItem[];
protected subscription: Subscription;
- editMode: boolean = false;
-
constructor(private dashboardService: DashboardService,
public dialog: MatDialog) {}
@@ -30,10 +30,12 @@ export class DashboardPanelComponent implements OnInit {
this.options = {
disablePushOnDrag: true,
draggable: { enabled: this.editMode },
- gridType: GridType.ScrollVertical,
+ gridType: GridType.VerticalFixed,
minCols: 8,
maxCols: 8,
minRows: 4,
+ fixedRowHeight: 100,
+ fixedColWidth: 100,
resizable: { enabled: this.editMode }
};
}
@@ -72,14 +74,22 @@ export class DashboardPanelComponent implements OnInit {
})
}
- toggleEditMode() {
- if (this.editMode) {
- this.updateDashboard();
+ updateDashboardAndCloseEditMode() {
+ this.updateDashboard();
+ this.editModeChange.emit(!(this.editMode));
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes["editMode"] && this.options) {
+ // if (this.editMode) {
+ // this.updateDashboard();
+ // }
+ // this.editMode = !(this.editMode);
+ this.options.draggable.enabled = this.editMode;
+ this.options.resizable.enabled = this.editMode;
+ this.options.displayGrid = this.editMode ? 'always' : 'none';
+ this.options.api.optionsChanged();
}
- this.editMode = !(this.editMode);
- this.options.draggable.enabled = this.editMode;
- this.options.resizable.enabled = this.editMode;
- this.options.displayGrid = this.editMode ? 'always' : 'none';
- this.options.api.optionsChanged();
}
+
}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/dashboard.component.css b/ui/src/app/dashboard-v2/dashboard.component.css
index e69de29..1dab0cc 100644
--- a/ui/src/app/dashboard-v2/dashboard.component.css
+++ b/ui/src/app/dashboard-v2/dashboard.component.css
@@ -0,0 +1,3 @@
+.mr-20 {
+ margin-right:20px;
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/dashboard.component.html b/ui/src/app/dashboard-v2/dashboard.component.html
index 9184530..a5f1b88 100644
--- a/ui/src/app/dashboard-v2/dashboard.component.html
+++ b/ui/src/app/dashboard-v2/dashboard.component.html
@@ -1,19 +1,31 @@
<div fxLayout="column" class="page-container">
<div fxLayout="row" style="padding:0px;background-color:#f6f6f6;">
- <div fxLayout="fill" style="line-height:24px;border-bottom:1px solid #ccc">
- <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectDashboard($event)">
- <mat-tab label="Start"></mat-tab>
- <mat-tab *ngFor="let dashboard of dashboards" label="{{dashboard.name}}"></mat-tab>
- </mat-tab-group>
+ <div fxFlex="100" style="line-height:24px;border-bottom:1px solid #ccc">
+ <div fxFlex="100" fxLayout="row">
+ <div fxFlex fxLayoutAlign="start center">
+ <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectDashboard($event)">
+ <mat-tab label="Start"></mat-tab>
+ <mat-tab *ngFor="let dashboard of dashboards" label="{{dashboard.name}}"></mat-tab>
+ </mat-tab-group>
+ </div>
+ <div fxFlex fxLayoutAlign="end center" class="mr-20">
+ <button mat-button mat-icon-button color="primary"
+ *ngIf="selectedIndex > 0" (click)="toggleEditMode()">
+ <i class="material-icons">edit</i>
+ </button>
+ </div>
+ </div>
</div>
</div>
<div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="dashboardsLoaded">
- <dashboard-overview (reloadDashboardsEmitter)="getDashboards($event)" [dashboards]="dashboards"
+ <dashboard-overview (selectDashboardEmitter)="openDashboard($event)"
+ (reloadDashboardsEmitter)="getDashboards($event)"
+ [dashboards]="dashboards"
*ngIf="!dashboardTabSelected">
</dashboard-overview>
- <dashboard-panel fxLayout="column" [dashboard]="selectedDashboard"
+ <dashboard-panel fxLayout="column" [(editMode)]="editMode" [dashboard]="selectedDashboard"
style="height:100%;" *ngIf="dashboardTabSelected">
</dashboard-panel>
diff --git a/ui/src/app/dashboard-v2/dashboard.component.ts b/ui/src/app/dashboard-v2/dashboard.component.ts
index 3d9d6c6..585efbc 100644
--- a/ui/src/app/dashboard-v2/dashboard.component.ts
+++ b/ui/src/app/dashboard-v2/dashboard.component.ts
@@ -15,6 +15,8 @@ export class DashboardComponent implements OnInit {
dashboardsLoaded: boolean = false;
dashboardTabSelected: boolean = false;
+ editMode: boolean = false;
+
dashboards: Array<Dashboard>;
constructor(private dashboardService: DashboardService) {}
@@ -24,8 +26,13 @@ export class DashboardComponent implements OnInit {
}
+ openDashboard(dashboard: Dashboard) {
+ let index = this.dashboards.indexOf(dashboard);
+ this.selectDashboard((index + 1));
+ }
selectDashboard(index: number) {
+ this.selectedIndex = index;
if (index == 0) {
this.dashboardTabSelected = false;
} else {
@@ -42,4 +49,8 @@ export class DashboardComponent implements OnInit {
this.dashboardsLoaded = true;
});
}
+
+ toggleEditMode() {
+ this.editMode = ! (this.editMode);
+ }
}
diff --git a/ui/src/app/dashboard-v2/dialogs/edit-dashboard/edit-dashboard-dialog.component.html b/ui/src/app/dashboard-v2/dialogs/edit-dashboard/edit-dashboard-dialog.component.html
index a1d273e..980b679 100644
--- a/ui/src/app/dashboard-v2/dialogs/edit-dashboard/edit-dashboard-dialog.component.html
+++ b/ui/src/app/dashboard-v2/dialogs/edit-dashboard/edit-dashboard-dialog.component.html
@@ -37,6 +37,7 @@
<mat-label>Description</mat-label>
<input matInput [(ngModel)]="dashboard.description">
</mat-form-field>
+ <mat-checkbox [(ngModel)]="dashboard.displayHeader">Show name and description in dashboard</mat-checkbox>
</div>
</div>
diff --git a/ui/src/app/dashboard-v2/models/dashboard.model.ts b/ui/src/app/dashboard-v2/models/dashboard.model.ts
index 65aaa96..44b31a3 100644
--- a/ui/src/app/dashboard-v2/models/dashboard.model.ts
+++ b/ui/src/app/dashboard-v2/models/dashboard.model.ts
@@ -11,6 +11,7 @@ export interface Dashboard {
id?: string;
name?: string;
description?: string;
+ displayHeader?: boolean;
widgets?: Array<DashboardItem>;
_id?: string;
_rev?: string;