You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2022/05/20 06:38:54 UTC
[incubator-streampipes] branch STREAMPIPES-537-NEW created (now 860530216)
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a change to branch STREAMPIPES-537-NEW
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
at 860530216 [STREAMPIPES-537] Change routing for datalake overview and dashboard view
This branch includes the following new commits:
new e4e573b44 [STREAMPIPES-537] Move dot menu to data panel
new 860530216 [STREAMPIPES-537] Change routing for datalake overview and dashboard view
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-streampipes] 02/02: [STREAMPIPES-537] Change routing for datalake overview and dashboard view
Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-537-NEW
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 860530216cb4bd89539d5e71d251055c731580db
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Fri May 20 08:38:31 2022 +0200
[STREAMPIPES-537] Change routing for datalake overview and dashboard view
---
...data-explorer-dashboard-overview.component.html | 3 +-
.../data-explorer-dashboard-overview.component.ts | 38 +++---
.../data-explorer-dashboard-panel.component.css | 13 ++
.../data-explorer-dashboard-panel.component.html | 141 +++++++++++----------
.../data-explorer-dashboard-panel.component.ts | 23 +++-
.../app/data-explorer/data-explorer.component.css | 11 +-
.../app/data-explorer/data-explorer.component.html | 5 +-
.../app/data-explorer/data-explorer.component.ts | 8 +-
ui/src/app/data-explorer/data-explorer.module.ts | 6 +-
9 files changed, 140 insertions(+), 108 deletions(-)
diff --git a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
index 67d255d85..7c1c7846f 100644
--- a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
+++ b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
@@ -30,7 +30,7 @@
</div>
</div>
</div>
- <div *ngIf="!editLabels" fxFlex="100" fxLayout="row wrap" fxLayoutAlign="start stretch" class="m-20">
+ <div fxFlex="100" fxLayout="row wrap" fxLayoutAlign="start stretch" class="m-20">
<div fxFlex="100" class="assemblyOptions sp-blue-bg p-5">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
<h4>My Data Views</h4>
@@ -91,5 +91,4 @@
</div>
</div>
- <sp-configure-labels *ngIf="editLabels"></sp-configure-labels>
</div>
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 d35d4ad59..efac41132 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, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { DataExplorerEditDataViewDialogComponent } from '../../dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component';
import { DataViewDataExplorerService, Dashboard } from '@streampipes/platform-services';
@@ -26,6 +26,7 @@ import { ObjectPermissionDialogComponent } from '../../../core-ui/object-permiss
import { UserRole } from '../../../_enums/user-role.enum';
import { AuthService } from '../../../services/auth.service';
import { UserPrivilege } from '../../../_enums/user-privilege.enum';
+import { Router } from '@angular/router';
@Component({
selector: 'sp-data-explorer-dashboard-overview',
@@ -34,22 +35,21 @@ import { UserPrivilege } from '../../../_enums/user-privilege.enum';
})
export class DataExplorerDashboardOverviewComponent implements OnInit {
- @Input() dataViewDashboards: Dashboard[];
- @Output() reloadDashboardsEmitter = new EventEmitter<void>();
- @Output() selectDashboardEmitter = new EventEmitter<Tuple2<Dashboard, boolean>>();
+ dataViewDashboards: Dashboard[];
dataSource = new MatTableDataSource<Dashboard>();
displayedColumns: string[] = [];
- editLabels: boolean;
isAdmin = false;
hasDataExplorerWritePrivileges = false;
hasDataExplorerDeletePrivileges = false;
- constructor(private dashboardService: DataViewDataExplorerService,
+ constructor(private dataViewService: DataViewDataExplorerService,
+ private dashboardService: DataViewDataExplorerService,
public dialogService: DialogService,
- private authService: AuthService) {
+ private authService: AuthService,
+ private router: Router) {
}
@@ -59,12 +59,19 @@ export class DataExplorerDashboardOverviewComponent implements OnInit {
this.hasDataExplorerDeletePrivileges = this.authService.hasRole(UserPrivilege.PRIVILEGE_DELETE_DATA_EXPLORER_VIEW);
this.isAdmin = user.roles.indexOf(UserRole.ROLE_ADMIN) > -1;
this.displayedColumns = ['name', 'actions'];
-
});
+
+ this.getDashboards();
+ }
+
+ getDashboards() {
+ this.dataViewService.getDataViews().subscribe(data => {
+ this.dataViewDashboards = data.sort((a, b) => a.name.localeCompare(b.name));
this.dataSource.data = this.dataViewDashboards;
- this.editLabels = false;
+ });
}
+
openNewDataViewDialog() {
const dataViewDashboard: Dashboard = {};
dataViewDashboard.widgets = [];
@@ -72,10 +79,6 @@ export class DataExplorerDashboardOverviewComponent implements OnInit {
this.openDataViewModificationDialog(true, dataViewDashboard);
}
- openEditLabelView() {
- this.editLabels = true;
- }
-
openDataViewModificationDialog(createMode: boolean, dashboard: Dashboard) {
const dialogRef = this.dialogService.open(DataExplorerEditDataViewDialogComponent, {
panelType: PanelType.STANDARD_PANEL,
@@ -88,7 +91,7 @@ export class DataExplorerDashboardOverviewComponent implements OnInit {
});
dialogRef.afterClosed().subscribe(result => {
- this.reloadDashboardsEmitter.emit();
+ // this.reloadDashboardsEmitter.emit();
});
}
@@ -106,7 +109,7 @@ export class DataExplorerDashboardOverviewComponent implements OnInit {
dialogRef.afterClosed().subscribe(refresh => {
if (refresh) {
- this.reloadDashboardsEmitter.emit();
+ // this.reloadDashboardsEmitter.emit();
}
});
}
@@ -118,12 +121,13 @@ export class DataExplorerDashboardOverviewComponent implements OnInit {
openDeleteDashboardDialog(dashboard: Dashboard) {
// TODO add confirm dialog
this.dashboardService.deleteDashboard(dashboard).subscribe(result => {
- this.reloadDashboardsEmitter.emit();
+ // this.reloadDashboardsEmitter.emit();
});
}
showDashboard(dashboard: Dashboard, editMode: boolean) {
const dashboardSettings: Tuple2<Dashboard, boolean> = { a: dashboard, b: editMode };
- this.selectDashboardEmitter.emit(dashboardSettings);
+ this.router.navigate(['dataexplorer/', dashboard._id]);
+ // this.selectDashboardEmitter.emit(dashboardSettings);
}
}
diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.css b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.css
index 3236d726f..3cbc82cf6 100644
--- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.css
+++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.css
@@ -16,6 +16,19 @@
*
*/
+.fixed-height {
+ height: 50px;
+}
+
+.data-explorer-options {
+ padding:0px;
+}
+
+.data-explorer-options-item {
+ display: inline;
+ margin-right: 10px;
+}
+
.m-20 {
margin: 20px;
}
diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
index 8051fd4dc..2469a417d 100644
--- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
+++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
@@ -16,77 +16,84 @@
~
-->
-<div class="fixed-height data-explorer-options sp-tab-bg page-container-nav" fxLayout="row">
- <div class="data-explorer-options-item pl-10" fxLayoutAlign="start center" fxLayout="row" *ngIf="editMode">
- <button mat-button mat-raised-button color="accent" matTooltip="Save" class="edit-menu-btn"
- [matTooltipPosition]="'above'" (click)="persistDashboardChanges()" data-cy="save-data-explorer-widget-btn">
- <mat-icon>save</mat-icon> <span>Save</span>
- </button>
- <button mat-button mat-raised-button class="mat-basic mr-10 edit-menu-btn" (click)="discardChanges()">
- <i class="material-icons">clear</i>
- <span> Discard</span>
- </button>
- <button mat-button mat-raised-button color="accent" class="edit-menu-btn" (click)="createWidget()"
- [disabled]="!editMode" data-cy="add-new-widget">
- <i class="material-icons">add</i>
- <span> Add Widget</span>
- </button>
- </div>
- <div class="data-explorer-options-item" fxLayoutAlign="end center" fxFlex fxLayout="row">
- <sp-time-range-selector *ngIf="(editMode || timeRangeVisible)" (dateRangeEmitter)="updateDateRange($event)" [dateRange]="timeSettings">
- </sp-time-range-selector>
+<div fxLayout="column" class="page-container">
+ <div fxLayout="column" fxFlex="100" *ngIf="dashboardLoaded">
+ <div class="fixed-height data-explorer-options sp-tab-bg page-container-nav" fxLayout="row">
+ <div class="data-explorer-options-item pl-10" fxLayoutAlign="start center" fxLayout="row" *ngIf="editMode">
+ <button mat-button mat-raised-button color="accent" matTooltip="Save" class="edit-menu-btn"
+ [matTooltipPosition]="'above'" (click)="persistDashboardChanges()"
+ data-cy="save-data-explorer-widget-btn">
+ <mat-icon>save</mat-icon> <span>Save</span>
+ </button>
+ <button mat-button mat-raised-button class="mat-basic mr-10 edit-menu-btn" (click)="discardChanges()">
+ <i class="material-icons">clear</i>
+ <span> Discard</span>
+ </button>
+ <button mat-button mat-raised-button color="accent" class="edit-menu-btn" (click)="createWidget()"
+ [disabled]="!editMode" data-cy="add-new-widget">
+ <i class="material-icons">add</i>
+ <span> Add Widget</span>
+ </button>
+ </div>
+ <div class="data-explorer-options-item" fxLayoutAlign="end center" fxFlex fxLayout="row">
+ <sp-time-range-selector *ngIf="(editMode || timeRangeVisible)"
+ (dateRangeEmitter)="updateDateRange($event)" [dateRange]="timeSettings">
+ </sp-time-range-selector>
- <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Options" data-cy="options-data-explorer">
- <mat-icon>more_vert</mat-icon>
- </button>
- <mat-menu #menu="matMenu">
- <button mat-menu-item (click)="triggerEditMode()" *ngIf="!editMode && hasDataExplorerWritePrivileges"
- data-cy="options-edit-dashboard">
- <mat-icon>edit</mat-icon>
- <span>Edit dashboard</span>
- </button>
- <!-- TODO reimplement with new logig-->
- <!-- <button mat-menu-item (click)="getDashboards(selectedDataViewDashboard._id)">
+ <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Options" data-cy="options-data-explorer">
+ <mat-icon>more_vert</mat-icon>
+ </button>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item (click)="triggerEditMode()"
+ *ngIf="!editMode && hasDataExplorerWritePrivileges" data-cy="options-edit-dashboard">
+ <mat-icon>edit</mat-icon>
+ <span>Edit dashboard</span>
+ </button>
+ <!-- TODO reimplement with new logig-->
+ <!-- <button mat-menu-item (click)="getDashboards(selectedDataViewDashboard._id)">
<mat-icon>refresh</mat-icon>
<span>Reload dashboard</span>
</button> -->
- <button mat-menu-item (click)="timeRangeVisible = true" *ngIf="!editMode && !timeRangeVisible">
- <mat-icon>alarm_on</mat-icon>
- <span>Show time range selector</span>
- </button>
- <button mat-menu-item (click)="timeRangeVisible = false" *ngIf="!editMode && timeRangeVisible">
- <mat-icon>alarm_off</mat-icon>
- <span>Hide time range selector</span>
- </button>
- <button mat-menu-item *ngIf="hasDataExplorerDeletePrivileges"
- (click)="deleteDashboard(selectedDataViewDashboard)">
- <mat-icon>clear</mat-icon>
- <span>Delete dashboard</span>
- </button>
- </mat-menu>
- </div>
+ <button mat-menu-item (click)="timeRangeVisible = true" *ngIf="!editMode && !timeRangeVisible">
+ <mat-icon>alarm_on</mat-icon>
+ <span>Show time range selector</span>
+ </button>
+ <button mat-menu-item (click)="timeRangeVisible = false" *ngIf="!editMode && timeRangeVisible">
+ <mat-icon>alarm_off</mat-icon>
+ <span>Hide time range selector</span>
+ </button>
+ <button mat-menu-item *ngIf="hasDataExplorerDeletePrivileges"
+ (click)="deleteDashboard(selectedDataViewDashboard)">
+ <mat-icon>clear</mat-icon>
+ <span>Delete dashboard</span>
+ </button>
+ </mat-menu>
+ </div>
-</div>
+ </div>
-<div fxFlex="100" fxLayout="column">
- <mat-drawer-container class="designer-panel-container h-100 dashboard-grid">
- <mat-drawer #designerDrawer [opened]="showDesignerPanel" (opened)="triggerResize()" (closed)="triggerResize()"
- mode="side" position="end" class="designer-panel">
- <div fxLayout="column" fxFlex="100">
- <sp-data-explorer-designer-panel #designerPanel [currentlyConfiguredWidget]="currentlyConfiguredWidget"
- [dataLakeMeasure]="dataLakeMeasure" [newWidgetMode]="newWidgetMode"
- (addWidgetEmitter)="addWidget($event)" (closeDesignerPanelEmitter)="closeDesignerPanel()"
- fxFlex="100">
- </sp-data-explorer-designer-panel>
- </div>
- </mat-drawer>
- <mat-drawer-content class="h-100 dashboard-grid">
- <sp-data-explorer-dashboard-grid #dashboardGrid [editMode]="editMode" [dashboard]="dashboard"
- [timeSettings]="timeSettings" [currentlyConfiguredWidgetId]="currentlyConfiguredWidgetId"
- (configureWidgetCallback)="updateCurrentlyConfiguredWidget($event)"
- (updateCallback)="updateAndQueueItemForDeletion($event)"
- (deleteCallback)="removeAndQueueItemForDeletion($event)" (startEditModeEmitter)="startEditMode($event)"
- class="h-100 dashboard-grid"></sp-data-explorer-dashboard-grid>
- </mat-drawer-content>
- </mat-drawer-container>
+ <div fxFlex="100" fxLayout="column">
+ <mat-drawer-container class="designer-panel-container h-100 dashboard-grid">
+ <mat-drawer #designerDrawer [opened]="showDesignerPanel" (opened)="triggerResize()"
+ (closed)="triggerResize()" mode="side" position="end" class="designer-panel">
+ <div fxLayout="column" fxFlex="100">
+ <sp-data-explorer-designer-panel #designerPanel
+ [currentlyConfiguredWidget]="currentlyConfiguredWidget" [dataLakeMeasure]="dataLakeMeasure"
+ [newWidgetMode]="newWidgetMode" (addWidgetEmitter)="addWidget($event)"
+ (closeDesignerPanelEmitter)="closeDesignerPanel()" fxFlex="100">
+ </sp-data-explorer-designer-panel>
+ </div>
+ </mat-drawer>
+ <mat-drawer-content class="h-100 dashboard-grid">
+ <sp-data-explorer-dashboard-grid #dashboardGrid [editMode]="editMode" [dashboard]="dashboard"
+ [timeSettings]="timeSettings" [currentlyConfiguredWidgetId]="currentlyConfiguredWidgetId"
+ (configureWidgetCallback)="updateCurrentlyConfiguredWidget($event)"
+ (updateCallback)="updateAndQueueItemForDeletion($event)"
+ (deleteCallback)="removeAndQueueItemForDeletion($event)"
+ (startEditModeEmitter)="startEditMode($event)" class="h-100 dashboard-grid">
+ </sp-data-explorer-dashboard-grid>
+ </mat-drawer-content>
+ </mat-drawer-container>
+ </div>
+ </div>
</div>
\ No newline at end of file
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 a89bd3abf..ddee4bab0 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
@@ -35,6 +35,7 @@ import { DataExplorerDesignerPanelComponent } from '../designer-panel/data-explo
import { TimeSelectionService } from '../../services/time-selection.service';
import { AuthService } from '../../../services/auth.service';
import { UserPrivilege } from '../../../_enums/user-privilege.enum';
+import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'sp-data-explorer-dashboard-panel',
@@ -43,12 +44,14 @@ import { UserPrivilege } from '../../../_enums/user-privilege.enum';
})
export class DataExplorerDashboardPanelComponent implements OnInit {
- @Input() dashboard: Dashboard;
+ dashboardLoaded = false;
+ dashboard: Dashboard;
/**
* This is the date range (start, end) to view the data and is set in data-explorer.ts
*/
- @Input() timeSettings: TimeSettings;
+ // TODO maybe remove and use directly from dashboard object
+ timeSettings: TimeSettings;
editMode: boolean = true;
timeRangeVisible: boolean = true;
@@ -78,7 +81,13 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
public dialog: MatDialog,
private timeSelectionService: TimeSelectionService,
private authService: AuthService,
- private dashboardService: DataViewDataExplorerService) {
+ private dashboardService: DataViewDataExplorerService,
+ private route: ActivatedRoute,
+ private dataViewService: DataViewDataExplorerService) {
+
+ this.route.params.subscribe( (params) => {
+ this.getDashboard(params.id);
+ });
}
public ngOnInit() {
@@ -230,4 +239,12 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
// TODO relink to all dashboards
});
}
+
+ getDashboard(dashboardId: string) {
+ this.dataViewService.getDataViews().subscribe(data => {
+ this.dashboard = data.filter(dashboard => dashboard._id === dashboardId)[0];
+ this.timeSettings = this.dashboard.dashboardTimeSettings;
+ this.dashboardLoaded = true;
+ });
+ }
}
diff --git a/ui/src/app/data-explorer/data-explorer.component.css b/ui/src/app/data-explorer/data-explorer.component.css
index 4482be5fc..e1f601b4a 100644
--- a/ui/src/app/data-explorer/data-explorer.component.css
+++ b/ui/src/app/data-explorer/data-explorer.component.css
@@ -72,18 +72,9 @@
border-top: 3px solid #f5b53f;
}
-.fixed-height {
- height: 50px;
-}
-.data-explorer-options {
- padding:0px;
-}
-.data-explorer-options-item {
- display: inline;
- margin-right: 10px;
-}
+
.pl-10 {
padding-left: 10px;
diff --git a/ui/src/app/data-explorer/data-explorer.component.html b/ui/src/app/data-explorer/data-explorer.component.html
index 939589644..19ea4ade6 100644
--- a/ui/src/app/data-explorer/data-explorer.component.html
+++ b/ui/src/app/data-explorer/data-explorer.component.html
@@ -37,10 +37,7 @@
<div fxLayout="column" fxFlex="100" *ngIf="dashboardsLoaded">
- <sp-data-explorer-dashboard-overview (selectDashboardEmitter)="openDashboard($event)"
- (reloadDashboardsEmitter)="getDashboards()"
- [dataViewDashboards]="dataViewDashboards"
- *ngIf="!dashboardTabSelected">
+ <sp-data-explorer-dashboard-overview *ngIf="!dashboardTabSelected">
</sp-data-explorer-dashboard-overview>
<sp-data-explorer-dashboard-panel fxLayout="column"
diff --git a/ui/src/app/data-explorer/data-explorer.component.ts b/ui/src/app/data-explorer/data-explorer.component.ts
index 0d678a4ae..7a30b5a3f 100644
--- a/ui/src/app/data-explorer/data-explorer.component.ts
+++ b/ui/src/app/data-explorer/data-explorer.component.ts
@@ -68,10 +68,10 @@ export class DataExplorerComponent implements OnInit {
}
- openDashboard(dashboard: Tuple2<Dashboard, boolean>) {
- const index = this.dataViewDashboards.indexOf(dashboard.a);
- this.selectDashboard((index + 1), dashboard.b);
- }
+ // openDashboard(dashboard: Tuple2<Dashboard, boolean>) {
+ // const index = this.dataViewDashboards.indexOf(dashboard.a);
+ // this.selectDashboard((index + 1), dashboard.b);
+ // }
selectDashboardInTab(index: number) {
if (index !== this.selectedIndex) {
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 73acb74d0..547996d97 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -165,7 +165,11 @@ export const MY_NATIVE_FORMATS = {
},
{
path: 'all',
- component: DataExplorerComponent
+ component: DataExplorerDashboardOverviewComponent
+ },
+{
+ path: ':id',
+ component: DataExplorerDashboardPanelComponent
}
]
}
[incubator-streampipes] 01/02: [STREAMPIPES-537] Move dot menu to data panel
Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-537-NEW
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit e4e573b44902628f83ff9ed9dbd4c7181f9cde71
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Fri May 20 07:00:20 2022 +0200
[STREAMPIPES-537] Move dot menu to data panel
---
.../data-explorer-dashboard-panel.component.html | 91 +++++++++++-----------
.../data-explorer-dashboard-panel.component.ts | 36 +++++++--
.../app/data-explorer/data-explorer.component.html | 32 --------
.../app/data-explorer/data-explorer.component.ts | 22 +-----
ui/src/app/data-explorer/data-explorer.module.ts | 18 +++++
5 files changed, 98 insertions(+), 101 deletions(-)
diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
index b2c976f08..8051fd4dc 100644
--- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
+++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
@@ -16,74 +16,77 @@
~
-->
-<div class="fixed-height data-explorer-options sp-tab-bg page-container-nav" fxLayout="row" *ngIf="(editMode || timeRangeVisible)">
+<div class="fixed-height data-explorer-options sp-tab-bg page-container-nav" fxLayout="row">
<div class="data-explorer-options-item pl-10" fxLayoutAlign="start center" fxLayout="row" *ngIf="editMode">
- <button mat-button
- mat-raised-button
- color="accent"
- matTooltip="Save"
- class="edit-menu-btn"
- [matTooltipPosition]="'above'"
- (click)="persistDashboardChanges()"
- data-cy="save-data-explorer-widget-btn">
+ <button mat-button mat-raised-button color="accent" matTooltip="Save" class="edit-menu-btn"
+ [matTooltipPosition]="'above'" (click)="persistDashboardChanges()" data-cy="save-data-explorer-widget-btn">
<mat-icon>save</mat-icon> <span>Save</span>
</button>
- <button mat-button
- mat-raised-button
- class="mat-basic mr-10 edit-menu-btn"
- (click)="discardChanges()">
+ <button mat-button mat-raised-button class="mat-basic mr-10 edit-menu-btn" (click)="discardChanges()">
<i class="material-icons">clear</i>
<span> Discard</span>
</button>
- <button mat-button
- mat-raised-button
- color="accent"
- class="edit-menu-btn"
- (click)="createWidget()"
- [disabled]="!editMode"
- data-cy="add-new-widget">
+ <button mat-button mat-raised-button color="accent" class="edit-menu-btn" (click)="createWidget()"
+ [disabled]="!editMode" data-cy="add-new-widget">
<i class="material-icons">add</i>
<span> Add Widget</span>
</button>
</div>
<div class="data-explorer-options-item" fxLayoutAlign="end center" fxFlex fxLayout="row">
- <sp-time-range-selector (dateRangeEmitter)="updateDateRange($event)" [dateRange]="timeSettings">
+ <sp-time-range-selector *ngIf="(editMode || timeRangeVisible)" (dateRangeEmitter)="updateDateRange($event)" [dateRange]="timeSettings">
</sp-time-range-selector>
+
+ <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Options" data-cy="options-data-explorer">
+ <mat-icon>more_vert</mat-icon>
+ </button>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item (click)="triggerEditMode()" *ngIf="!editMode && hasDataExplorerWritePrivileges"
+ data-cy="options-edit-dashboard">
+ <mat-icon>edit</mat-icon>
+ <span>Edit dashboard</span>
+ </button>
+ <!-- TODO reimplement with new logig-->
+ <!-- <button mat-menu-item (click)="getDashboards(selectedDataViewDashboard._id)">
+ <mat-icon>refresh</mat-icon>
+ <span>Reload dashboard</span>
+ </button> -->
+ <button mat-menu-item (click)="timeRangeVisible = true" *ngIf="!editMode && !timeRangeVisible">
+ <mat-icon>alarm_on</mat-icon>
+ <span>Show time range selector</span>
+ </button>
+ <button mat-menu-item (click)="timeRangeVisible = false" *ngIf="!editMode && timeRangeVisible">
+ <mat-icon>alarm_off</mat-icon>
+ <span>Hide time range selector</span>
+ </button>
+ <button mat-menu-item *ngIf="hasDataExplorerDeletePrivileges"
+ (click)="deleteDashboard(selectedDataViewDashboard)">
+ <mat-icon>clear</mat-icon>
+ <span>Delete dashboard</span>
+ </button>
+ </mat-menu>
</div>
+
</div>
<div fxFlex="100" fxLayout="column">
<mat-drawer-container class="designer-panel-container h-100 dashboard-grid">
- <mat-drawer #designerDrawer
- [opened]="showDesignerPanel"
- (opened)="triggerResize()"
- (closed)="triggerResize()"
- mode="side"
- position="end"
- class="designer-panel">
+ <mat-drawer #designerDrawer [opened]="showDesignerPanel" (opened)="triggerResize()" (closed)="triggerResize()"
+ mode="side" position="end" class="designer-panel">
<div fxLayout="column" fxFlex="100">
- <sp-data-explorer-designer-panel #designerPanel
- [currentlyConfiguredWidget]="currentlyConfiguredWidget"
- [dataLakeMeasure]="dataLakeMeasure"
- [newWidgetMode]="newWidgetMode"
- (addWidgetEmitter)="addWidget($event)"
- (closeDesignerPanelEmitter)="closeDesignerPanel()"
- fxFlex="100">
+ <sp-data-explorer-designer-panel #designerPanel [currentlyConfiguredWidget]="currentlyConfiguredWidget"
+ [dataLakeMeasure]="dataLakeMeasure" [newWidgetMode]="newWidgetMode"
+ (addWidgetEmitter)="addWidget($event)" (closeDesignerPanelEmitter)="closeDesignerPanel()"
+ fxFlex="100">
</sp-data-explorer-designer-panel>
</div>
</mat-drawer>
<mat-drawer-content class="h-100 dashboard-grid">
- <sp-data-explorer-dashboard-grid
- #dashboardGrid
- [editMode]="editMode"
- [dashboard]="dashboard"
- [timeSettings]="timeSettings"
- [currentlyConfiguredWidgetId]="currentlyConfiguredWidgetId"
+ <sp-data-explorer-dashboard-grid #dashboardGrid [editMode]="editMode" [dashboard]="dashboard"
+ [timeSettings]="timeSettings" [currentlyConfiguredWidgetId]="currentlyConfiguredWidgetId"
(configureWidgetCallback)="updateCurrentlyConfiguredWidget($event)"
(updateCallback)="updateAndQueueItemForDeletion($event)"
- (deleteCallback)="removeAndQueueItemForDeletion($event)"
- (startEditModeEmitter)="startEditMode($event)"
+ (deleteCallback)="removeAndQueueItemForDeletion($event)" (startEditModeEmitter)="startEditMode($event)"
class="h-100 dashboard-grid"></sp-data-explorer-dashboard-grid>
</mat-drawer-content>
</mat-drawer-container>
-</div>
+</div>
\ No newline at end of file
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 3e214d963..a89bd3abf 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
@@ -33,6 +33,8 @@ import {
} from '@streampipes/platform-services';
import { DataExplorerDesignerPanelComponent } from '../designer-panel/data-explorer-designer-panel.component';
import { TimeSelectionService } from '../../services/time-selection.service';
+import { AuthService } from '../../../services/auth.service';
+import { UserPrivilege } from '../../../_enums/user-privilege.enum';
@Component({
selector: 'sp-data-explorer-dashboard-panel',
@@ -47,17 +49,19 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
* This is the date range (start, end) to view the data and is set in data-explorer.ts
*/
@Input() timeSettings: TimeSettings;
- @Input() editMode: boolean;
- @Input() timeRangeVisible: boolean;
- @Output() editModeChange: EventEmitter<boolean> = new EventEmitter();
+ editMode: boolean = true;
+ timeRangeVisible: boolean = true;
- @Output() resetDashboardChanges: EventEmitter<boolean> = new EventEmitter();
+ @Output() editModeChange: EventEmitter<boolean> = new EventEmitter();
@ViewChild('dashboardGrid') dashboardGrid: DataExplorerDashboardGridComponent;
@ViewChild('designerDrawer') designerDrawer: MatDrawer;
@ViewChild('designerPanel') designerPanel: DataExplorerDesignerPanelComponent;
+ hasDataExplorerWritePrivileges = false;
+ hasDataExplorerDeletePrivileges = false;
+
public items: Dashboard[];
widgetIdsToRemove: string[] = [];
@@ -72,11 +76,16 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
constructor(private dataViewDataExplorerService: DataViewDataExplorerService,
public dialog: MatDialog,
- private refreshDashboardService: RefreshDashboardService,
- private timeSelectionService: TimeSelectionService) {
+ private timeSelectionService: TimeSelectionService,
+ private authService: AuthService,
+ private dashboardService: DataViewDataExplorerService) {
}
public ngOnInit() {
+ 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);
+ });
}
triggerResize() {
@@ -119,6 +128,8 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
}
});
+
+ this.editMode = false;
}
afterDashboardChange() {
@@ -184,7 +195,11 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
}
discardChanges() {
- this.resetDashboardChanges.emit(true);
+ this.editMode = false;
+ }
+
+ triggerEditMode() {
+ this.editMode = true;
}
createWidget() {
@@ -208,4 +223,11 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
this.dataLakeMeasure = undefined;
this.currentlyConfiguredWidgetId = undefined;
}
+
+
+ deleteDashboard(dashboard: Dashboard) {
+ this.dashboardService.deleteDashboard(dashboard).subscribe(result => {
+ // TODO relink to all dashboards
+ });
+ }
}
diff --git a/ui/src/app/data-explorer/data-explorer.component.html b/ui/src/app/data-explorer/data-explorer.component.html
index b4f8b0f11..939589644 100644
--- a/ui/src/app/data-explorer/data-explorer.component.html
+++ b/ui/src/app/data-explorer/data-explorer.component.html
@@ -31,35 +31,6 @@
</mat-tab-group>
</div>
- <div fxFlex fxLayoutAlign="end center" *ngIf="selectedIndex > 0">
- <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Options" data-cy="options-data-explorer">
- <mat-icon>more_vert</mat-icon>
- </button>
- <mat-menu #menu="matMenu">
- <button mat-menu-item (click)="triggerEditMode()"
- *ngIf="!editMode && hasDataExplorerWritePrivileges"
- data-cy="options-edit-dashboard">
- <mat-icon>edit</mat-icon>
- <span>Edit dashboard</span>
- </button>
- <button mat-menu-item (click)="getDashboards(selectedDataViewDashboard._id)">
- <mat-icon>refresh</mat-icon>
- <span>Reload dashboard</span>
- </button>
- <button mat-menu-item (click)="timeRangeVisible = true" *ngIf="!editMode && !timeRangeVisible">
- <mat-icon>alarm_on</mat-icon>
- <span>Show time range selector</span>
- </button>
- <button mat-menu-item (click)="timeRangeVisible = false" *ngIf="!editMode && timeRangeVisible">
- <mat-icon>alarm_off</mat-icon>
- <span>Hide time range selector</span>
- </button>
- <button mat-menu-item *ngIf="hasDataExplorerDeletePrivileges" (click)="deleteDashboard(selectedDataViewDashboard)">
- <mat-icon>clear</mat-icon>
- <span>Delete dashboard</span>
- </button>
- </mat-menu>
- </div>
</div>
</div>
</div>
@@ -74,11 +45,8 @@
</sp-data-explorer-dashboard-overview>
<sp-data-explorer-dashboard-panel fxLayout="column"
#dashboardPanel
- (resetDashboardChanges)="resetDashboardChanges()"
- [(editMode)]="editMode"
[dashboard]="selectedDataViewDashboard"
[timeSettings]="selectedDataViewDashboard.dashboardTimeSettings"
- [timeRangeVisible]="timeRangeVisible"
class="dashboard-panel"
*ngIf="dashboardTabSelected">
</sp-data-explorer-dashboard-panel>
diff --git a/ui/src/app/data-explorer/data-explorer.component.ts b/ui/src/app/data-explorer/data-explorer.component.ts
index 214e3dbd1..0d678a4ae 100644
--- a/ui/src/app/data-explorer/data-explorer.component.ts
+++ b/ui/src/app/data-explorer/data-explorer.component.ts
@@ -37,9 +37,6 @@ export class DataExplorerComponent implements OnInit {
dashboardsLoaded = false;
dashboardTabSelected = false;
- timeRangeVisible = true;
-
- editMode = true;
dataViewDashboards: Dashboard[];
routeParams: any;
@@ -52,8 +49,7 @@ export class DataExplorerComponent implements OnInit {
constructor(private dataViewService: DataViewDataExplorerService,
private refreshDashboardService: RefreshDashboardService,
private route: ActivatedRoute,
- private authService: AuthService,
- private dashboardService: DataViewDataExplorerService) {
+ private authService: AuthService) {
}
@@ -85,7 +81,6 @@ export class DataExplorerComponent implements OnInit {
selectDashboard(index: number, editMode = false) {
this.selectedIndex = index;
- this.editMode = editMode;
if (index === 0) {
this.dashboardTabSelected = false;
} else {
@@ -132,17 +127,8 @@ export class DataExplorerComponent implements OnInit {
});
}
- triggerEditMode() {
- this.editMode = true;
- }
- deleteDashboard(dashboard: Dashboard) {
- this.dashboardService.deleteDashboard(dashboard).subscribe(result => {
- this.getDashboards();
- });
- }
-
- resetDashboardChanges() {
- this.getDashboards(this.selectedDataViewDashboard._id);
- }
+ // resetDashboardChanges() {
+ // this.getDashboards(this.selectedDataViewDashboard._id);
+ // }
}
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 79819b3e0..73acb74d0 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -100,6 +100,7 @@ import { TimeSelectionService } from './services/time-selection.service';
import { NgxEchartsModule } from 'ngx-echarts';
import { TooMuchDataComponent } from './components/widgets/utils/too-much-data/too-much-data.component';
import { SpValueHeatmapComponent } from './components/widgets/distribution-chart/value-heatmap/value-heatmap.component';
+import { RouterModule } from "@angular/router";
export const MY_NATIVE_FORMATS = {
fullPickerInput: {
@@ -153,6 +154,23 @@ export const MY_NATIVE_FORMATS = {
*/
echarts: () => import('echarts'),
}),
+ RouterModule.forChild([
+ {
+ path: 'dataexplorer',
+ children: [
+ {
+ path: '',
+ redirectTo: 'all',
+ pathMatch: 'full'
+ },
+ {
+ path: 'all',
+ component: DataExplorerComponent
+ }
+ ]
+ }
+ ]),
+
],
declarations: [
AggregateConfigurationComponent,