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:55 UTC
[incubator-streampipes] 01/02: [STREAMPIPES-537] Move dot menu to data panel
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,