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 2022/07/12 13:34:35 UTC
[incubator-streampipes] 04/04: [STREAMPIPES-537] Improve routing of dashboard module
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-558
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit b88bed69c40482ba41b016f2a916d7888a1187d3
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Tue Jul 12 15:34:20 2022 +0200
[STREAMPIPES-537] Improve routing of dashboard module
---
.../overview/dashboard-overview.component.html | 101 +++++++-------
.../overview/dashboard-overview.component.ts | 35 +++--
.../panel/dashboard-panel.component.html | 28 ++--
.../components/panel/dashboard-panel.component.ts | 37 ++++-
ui/src/app/dashboard/dashboard.module.ts | 152 +++++++++++----------
5 files changed, 195 insertions(+), 158 deletions(-)
diff --git a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
index d557cd9ad..b6b94a870 100644
--- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
+++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
@@ -16,91 +16,92 @@
~
-->
-<div fxFlex="100" fxLayout="column">
- <div fxFlex="100" fxLayout="column">
- <div fxLayout="row" class="fixed-height options-bar sp-tab-bg">
- <div class="options-bar-item pl-10" fxLayoutAlign="start center" fxLayout="row">
- <button mat-button
- mat-raised-button
- color="accent"
- (click)="openNewDashboardDialog()"
- *ngIf="hasDashboardWritePrivileges"
- data-cy="new-dashboard-btn">
- <i class="material-icons">add</i>
- <span> New dashboard</span>
- </button>
- </div>
- </div>
+<sp-basic-view [showBackLink]="false" [padding]="">
+
+ <div nav fxFlex="100" fxLayoutAlign="start center" fxLayout="row" class="pl-10">
+ <button mat-button mat-raised-button color="accent"
+ data-cy="new-dashboard-btn"
+ (click)="openNewDashboardDialog()"
+ *ngIf="hasDashboardWritePrivileges">
+ <i class="material-icons">add</i>
+ <span>New Dashboard</span>
+ </button>
</div>
- <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 dashboards</h4>
- <span fxFlex></span>
- </div>
- </div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" class="sp-blue-border">
- <table fxFlex="95" mat-table [dataSource]="dataSource" multiTemplateDataRows>
+ <div fxFlex="100" fxLayout="column">
+ <sp-basic-header-title-component title="My Dashboards"></sp-basic-header-title-component>
+ <div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
+ <sp-basic-inner-panel [showTitle]="false" innerPadding="0" outerMargin="0" fxFlex="90" [hideToolbar]="true">
+ <div fxFlex="100" fxLayout="column" class="w-100">
+
+ <table fxFlex="95" mat-table [dataSource]="dataSource" multiTemplateDataRows>
- <ng-container matColumnDef="name">
- <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="name">
+ <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="actions">
- <th fxFlex="40" fxLayoutAlign="center center" mat-header-cell *matHeaderCellDef> Actions</th>
- <td fxFlex="40" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
- <div fxLayout="row" fxFlex="100">
+ <ng-container matColumnDef="actions">
+ <th fxFlex="40" fxLayoutAlign="center center" mat-header-cell *matHeaderCellDef> Actions
+ </th>
+ <td fxFlex="40" fxLayoutAlign="start center" mat-cell *matCellDef="let element">
+ <div fxLayout="row" fxFlex="100">
<span fxFlex fxFlexOrder="1" fxLayout="row" fxLayoutAlign="center center">
<button mat-button mat-icon-button color="accent"
- (click)="showDashboard(element, false)"
+ (click)="showDashboard(element)"
[attr.data-cy]="'show-dashboard-' + element.name">
<i class="material-icons">visibility</i>
</button>
</span>
- <span fxFlex fxFlexOrder="2" fxLayout="row" fxLayoutAlign="center center">
+ <span fxFlex fxFlexOrder="2" fxLayout="row" fxLayoutAlign="center center">
<button mat-button mat-icon-button color="accent"
(click)="openExternalDashboard(element)">
<i class="material-icons">open_in_new</i>
</button>
</span>
- <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center" *ngIf="hasDashboardWritePrivileges">
+ <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center"
+ *ngIf="hasDashboardWritePrivileges">
<button mat-button mat-icon-button color="accent"
(click)="openEditDashboardDialog(element)">
<i class="material-icons">settings</i>
</button>
</span>
- <span fxFlex fxFlexOrder="4" fxLayout="row" fxLayoutAlign="center center" *ngIf="hasDashboardWritePrivileges">
+ <span fxFlex fxFlexOrder="4" fxLayout="row" fxLayoutAlign="center center"
+ *ngIf="hasDashboardWritePrivileges">
<button mat-button mat-icon-button color="accent"
- (click)="showDashboard(element, true)"
+ (click)="editDashboard(element)"
[attr.data-cy]="'edit-dashboard-' + element.name">
<i class="material-icons">edit</i>
</button>
</span>
- <span fxFlex fxFlexOrder="5" fxLayout="row" fxLayoutAlign="center center" *ngIf="isAdmin">
+ <span fxFlex fxFlexOrder="5" fxLayout="row" fxLayoutAlign="center center"
+ *ngIf="isAdmin">
<button mat-button mat-icon-button color="accent"
(click)="showPermissionsDialog(element)">
<i class="material-icons">share</i>
</button>
</span>
- <span fxFlex fxFlexOrder="6" fxLayout="row" fxLayoutAlign="center center" *ngIf="hasDashboardDeletePrivileges">
+ <span fxFlex fxFlexOrder="6" fxLayout="row" fxLayoutAlign="center center"
+ *ngIf="hasDashboardDeletePrivileges">
<button mat-button mat-icon-button color="accent"
(click)="openDeleteDashboardDialog(element)">
<i class="material-icons">delete</i>
</button>
</span>
- </div>
- </td>
- </ng-container>
+ </div>
+ </td>
+ </ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let element; columns: displayedColumns;">
- </tr>
- </table>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let element; columns: displayedColumns;">
+ </tr>
+ </table>
+ </div>
+ </sp-basic-inner-panel>
</div>
</div>
-</div>
+</sp-basic-view>
diff --git a/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts b/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
index b5bb1f380..63be91789 100644
--- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
+++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
@@ -16,15 +16,14 @@
*
*/
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
import { Dashboard, DashboardService } from '@streampipes/platform-services';
import { MatTableDataSource } from '@angular/material/table';
import { MatDialog } from '@angular/material/dialog';
import { EditDashboardDialogComponent } from '../../dialogs/edit-dashboard/edit-dashboard-dialog.component';
-import { Tuple2 } from '../../../core-model/base/Tuple2';
import { Router } from '@angular/router';
import { ObjectPermissionDialogComponent } from '../../../core-ui/object-permission-dialog/object-permission-dialog.component';
-import { PanelType, DialogService } from '@streampipes/shared-ui';
+import { DialogService, PanelType } from '@streampipes/shared-ui';
import { UserRole } from '../../../_enums/user-role.enum';
import { AuthService } from '../../../services/auth.service';
import { UserPrivilege } from '../../../_enums/user-privilege.enum';
@@ -36,9 +35,7 @@ import { UserPrivilege } from '../../../_enums/user-privilege.enum';
})
export class DashboardOverviewComponent implements OnInit {
- @Input() dashboards: Dashboard[];
- @Output() reloadDashboardsEmitter = new EventEmitter<void>();
- @Output() selectDashboardEmitter = new EventEmitter<Tuple2<Dashboard, boolean>>();
+ dashboards: Dashboard[];
dataSource = new MatTableDataSource<Dashboard>();
displayedColumns: string[] = [];
@@ -63,7 +60,14 @@ export class DashboardOverviewComponent implements OnInit {
this.displayedColumns = ['name', 'actions'];
});
- this.dataSource.data = this.dashboards;
+ this.getDashboards();
+ }
+
+ getDashboards() {
+ this.dashboardService.getDashboards().subscribe(data => {
+ this.dashboards = data.sort((a, b) => a.name.localeCompare(b.name));
+ this.dataSource.data = this.dashboards;
+ });
}
openNewDashboardDialog() {
@@ -85,7 +89,7 @@ export class DashboardOverviewComponent implements OnInit {
});
dialogRef.afterClosed().subscribe(result => {
- this.reloadDashboardsEmitter.emit();
+ this.getDashboards();
});
}
@@ -96,15 +100,16 @@ export class DashboardOverviewComponent implements OnInit {
openDeleteDashboardDialog(dashboard: Dashboard) {
// TODO add confirm dialog
this.dashboardService.deleteDashboard(dashboard).subscribe(result => {
- this.reloadDashboardsEmitter.emit();
+ this.getDashboards();
});
}
- showDashboard(dashboard: Dashboard, openInEditMode: boolean) {
- const data: Tuple2<Dashboard, boolean> = {} as Tuple2<Dashboard, boolean>;
- data.a = dashboard;
- data.b = openInEditMode;
- this.selectDashboardEmitter.emit(data);
+ showDashboard(dashboard: Dashboard): void {
+ this.router.navigate(['dashboard', dashboard._id]);
+ }
+
+ editDashboard(dashboard: Dashboard): void {
+ this.router.navigate(['dashboard', dashboard._id], {queryParams: {action: 'edit'}});
}
openExternalDashboard(dashboard: Dashboard) {
@@ -127,7 +132,7 @@ export class DashboardOverviewComponent implements OnInit {
dialogRef.afterClosed().subscribe(refresh => {
if (refresh) {
- this.reloadDashboardsEmitter.emit();
+ this.getDashboards();
}
});
}
diff --git a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
index 9f1fe82d9..a0684c5f2 100644
--- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
+++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
@@ -15,9 +15,11 @@
~ limitations under the License.
~
-->
-<div fxFlex="100" fxLayout="column">
- <div fxLayout="row" class="fixed-height options-bar sp-tab-bg" *ngIf="editMode">
- <div class="options-bar-item pl-10" fxLayoutAlign="start center" fxLayout="row">
+
+<sp-basic-view [showBackLink]="true" [padding]="false" [backLinkTarget]="['dashboard']">
+
+ <div nav fxFlex="100" fxLayoutAlign="start center" fxLayout="row" class="pl-10">
+ <div fxLayout="row" fxFlex="100" *ngIf="editMode" fxLayoutAlign="start center">
<button mat-button
mat-raised-button
color="accent"
@@ -43,9 +45,7 @@
<i class="material-icons">add</i>
<span> Add visualization</span>
</button>
- </div>
- <span fxFlex></span>
- <div class="options-bar-item" fxLayoutAlign="start center" fxLayout="row" >
+ <span fxFlex></span>
<mat-slide-toggle
color="accent"
[(ngModel)]="headerVisible">
@@ -53,11 +53,11 @@
</mat-slide-toggle>
</div>
</div>
-
- <dashboard-grid [editMode]="editMode" [dashboard]="dashboard"
- [headerVisible]="headerVisible"
- (updateCallback)="updateAndQueueItemForDeletion($event)"
- (deleteCallback)="removeAndQueueItemForDeletion($event)"
- class="h-100 dashboard-grid"></dashboard-grid>
-</div>
-
+ <div fxFlex="100" fxLayout="column">
+ <dashboard-grid [editMode]="editMode" [dashboard]="dashboard"
+ [headerVisible]="headerVisible"
+ (updateCallback)="updateAndQueueItemForDeletion($event)"
+ (deleteCallback)="removeAndQueueItemForDeletion($event)"
+ class="h-100 dashboard-grid"></dashboard-grid>
+ </div>
+</sp-basic-view>
diff --git a/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts b/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts
index a063450eb..88243dad7 100644
--- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts
+++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts
@@ -22,6 +22,9 @@ import { forkJoin, Observable, Subscription } from 'rxjs';
import { AddVisualizationDialogComponent } from '../../dialogs/add-widget/add-visualization-dialog.component';
import { RefreshDashboardService } from '../../services/refresh-dashboard.service';
import { PanelType, DialogService } from '@streampipes/shared-ui';
+import { ActivatedRoute } from '@angular/router';
+import { UserPrivilege } from '../../../_enums/user-privilege.enum';
+import { AuthService } from '../../../services/auth.service';
@Component({
selector: 'dashboard-panel',
@@ -30,8 +33,8 @@ import { PanelType, DialogService } from '@streampipes/shared-ui';
})
export class DashboardPanelComponent implements OnInit {
- @Input() dashboard: Dashboard;
- @Input('editMode') editMode: boolean;
+ dashboard: Dashboard;
+ editMode: boolean;
@Output('editModeChange') editModeChange: EventEmitter<boolean> = new EventEmitter();
public items: ClientDashboardItem[];
@@ -45,13 +48,37 @@ export class DashboardPanelComponent implements OnInit {
constructor(private dashboardService: DashboardService,
private dialogService: DialogService,
- private refreshDashboardService: RefreshDashboardService) {
+ private refreshDashboardService: RefreshDashboardService,
+ private route: ActivatedRoute,
+ private authService: AuthService) {
}
public ngOnInit() {
+ const params = this.route.snapshot.params;
+ const queryParams = this.route.snapshot.queryParams;
+
+ this.authService.user$.subscribe(user => {
+ const hasDashboardWritePrivileges = this.authService.hasRole(
+ UserPrivilege.PRIVILEGE_WRITE_DASHBOARD
+ );
+ if (queryParams.action === 'edit' && hasDashboardWritePrivileges) {
+ this.editMode = true;
+ }
+ });
+
+ this.getDashboard(params.id);
+
+ }
+ getDashboard(dashboardId: string): void {
+ this.dashboardService.getDashboard(dashboardId).subscribe(dashboard => {
+ if (dashboard) {
+ this.dashboard = dashboard;
+ }
+ });
}
+
addWidget(): void {
const dialogRef = this.dialogService.open(AddVisualizationDialogComponent, {
panelType: PanelType.SLIDE_IN_PANEL,
@@ -93,8 +120,8 @@ export class DashboardPanelComponent implements OnInit {
}
closeEditModeAndReloadDashboard() {
- this.editModeChange.emit(!(this.editMode));
- this.refreshDashboardService.notify(this.dashboard._id);
+ this.editMode = !this.editMode;
+ this.getDashboard(this.dashboard._id);
}
prepareWidgetUpdates(): Observable<any>[] {
diff --git a/ui/src/app/dashboard/dashboard.module.ts b/ui/src/app/dashboard/dashboard.module.ts
index 624323941..7453b1763 100644
--- a/ui/src/app/dashboard/dashboard.module.ts
+++ b/ui/src/app/dashboard/dashboard.module.ts
@@ -61,81 +61,85 @@ import { PlatformServicesModule } from '@streampipes/platform-services';
import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
import { ServicesModule } from '../services/services.module';
import { RouterModule } from '@angular/router';
+import { SharedUiModule } from '@streampipes/shared-ui';
+
@NgModule({
- imports: [
- NgxEchartsModule.forRoot({
- /**
- * This will import all modules from echarts.
- * If you only need custom modules,
- * please refer to [Custom Build] section.
- */
- echarts: () => import('echarts'),
- }),
- CommonModule,
- CoreUiModule,
- MatTabsModule,
- GridsterModule,
- FlexLayoutModule,
- CustomMaterialModule,
- FormsModule,
- ColorPickerModule,
- MatGridListModule,
- NgxChartsModule,
- CdkTableModule,
- LeafletModule,
- PlatformServicesModule,
- ServicesModule,
- RouterModule.forChild([
- {
- path: 'dashboard',
- children: [
- {
- path: '',
- component: DashboardComponent
- },
- {
- path: ':id',
- component: DashboardComponent
- },
- ]
- }
- ]),
- ],
- declarations: [
- BarRaceWidgetComponent,
- DashboardComponent,
- DashboardGridComponent,
- DashboardOverviewComponent,
- DashboardPanelComponent,
- DashboardWidgetComponent,
- AddVisualizationDialogComponent,
- EditDashboardDialogComponent,
- AreaWidgetComponent,
- LineWidgetComponent,
- NumberWidgetComponent,
- TableWidgetComponent,
- GaugeWidgetComponent,
- ImageWidgetComponent,
- MapWidgetComponent,
- RawWidgetComponent,
- StackedLineChartWidgetComponent,
- HtmlWidgetComponent,
- StatusWidgetComponent,
- TrafficLightWidgetComponent,
- WordcloudWidgetComponent,
- StandaloneDashboardComponent
- ],
- providers: [
- EditModeService,
- ReloadPipelineService,
- ResizeService,
- RefreshDashboardService,
- SemanticTypeUtilsService
- ],
- exports: [
- DashboardComponent,
- DashboardWidgetComponent
- ]
+ imports: [
+ NgxEchartsModule.forRoot({
+ /**
+ * This will import all modules from echarts.
+ * If you only need custom modules,
+ * please refer to [Custom Build] section.
+ */
+ echarts: () => import('echarts'),
+ }),
+ CommonModule,
+ CoreUiModule,
+ MatTabsModule,
+ GridsterModule,
+ FlexLayoutModule,
+ CustomMaterialModule,
+ FormsModule,
+ ColorPickerModule,
+ MatGridListModule,
+ NgxChartsModule,
+ CdkTableModule,
+ LeafletModule,
+ PlatformServicesModule,
+ ServicesModule,
+ SharedUiModule,
+ RouterModule.forChild([
+ {
+ path: 'dashboard',
+ children: [
+ {
+ path: '',
+ component: DashboardOverviewComponent
+ },
+ {
+ path: ':id',
+ component: DashboardPanelComponent
+ }
+ ]
+ }
+ ]),
+ SharedUiModule,
+ ],
+ declarations: [
+ BarRaceWidgetComponent,
+ DashboardComponent,
+ DashboardGridComponent,
+ DashboardOverviewComponent,
+ DashboardPanelComponent,
+ DashboardWidgetComponent,
+ AddVisualizationDialogComponent,
+ EditDashboardDialogComponent,
+ AreaWidgetComponent,
+ LineWidgetComponent,
+ NumberWidgetComponent,
+ TableWidgetComponent,
+ GaugeWidgetComponent,
+ ImageWidgetComponent,
+ MapWidgetComponent,
+ RawWidgetComponent,
+ StackedLineChartWidgetComponent,
+ HtmlWidgetComponent,
+ StatusWidgetComponent,
+ TrafficLightWidgetComponent,
+ WordcloudWidgetComponent,
+ StandaloneDashboardComponent
+ ],
+ providers: [
+ EditModeService,
+ ReloadPipelineService,
+ ResizeService,
+ RefreshDashboardService,
+ SemanticTypeUtilsService
+ ],
+ exports: [
+ DashboardComponent,
+ DashboardWidgetComponent
+ ]
})
export class DashboardModule {