This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch 3725-add-dashboard-kiosk-mode in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 5e318bcdcbaf448d6c0b618eae38247e9019f9c7 Author: Dominik Riemer <[email protected]> AuthorDate: Tue Aug 12 17:33:24 2025 +0200 Fix dashboard widget deletion behaviour --- .../components/kiosk/dashboard-kiosk.component.ts | 6 ++++ .../chart-view/abstract-chart-view.directive.ts | 2 +- .../grid-view/dashboard-grid-view.component.html | 2 +- .../dashboard-shared/services/dashboard.service.ts | 4 +++ .../components/panel/dashboard-panel.component.ts | 40 +++++++++++++++------- 5 files changed, 39 insertions(+), 15 deletions(-) diff --git a/ui/src/app/dashboard-kiosk/components/kiosk/dashboard-kiosk.component.ts b/ui/src/app/dashboard-kiosk/components/kiosk/dashboard-kiosk.component.ts index 71b90b579e..317689b88e 100644 --- a/ui/src/app/dashboard-kiosk/components/kiosk/dashboard-kiosk.component.ts +++ b/ui/src/app/dashboard-kiosk/components/kiosk/dashboard-kiosk.component.ts @@ -10,6 +10,7 @@ import { ActivatedRoute } from '@angular/router'; import { of, Subscription, timer } from 'rxjs'; import { switchMap } from 'rxjs/operators'; import { TimeSelectionService } from '@streampipes/shared-ui'; +import { DataExplorerDashboardService } from '../../../dashboard-shared/services/dashboard.service'; @Component({ selector: 'sp-dashboard-kiosk', @@ -21,6 +22,7 @@ export class DashboardKioskComponent implements OnInit, OnDestroy { private route = inject(ActivatedRoute); private dashboardService = inject(DashboardService); private timeSelectionService = inject(TimeSelectionService); + private dataExplorerDashboardService = inject(DataExplorerDashboardService); dashboard: Dashboard; widgets: DataExplorerWidgetModel[] = []; @@ -34,6 +36,10 @@ export class DashboardKioskComponent implements OnInit, OnDestroy { .subscribe(res => { if (res.ok) { const cd = res.body; + cd.dashboard.widgets.forEach(w => { + w.widgetId ??= + this.dataExplorerDashboardService.makeUniqueWidgetId(); + }); const eTag = res.headers.get('ETag'); this.initDashboard(cd, eTag); } diff --git a/ui/src/app/dashboard-shared/components/chart-view/abstract-chart-view.directive.ts b/ui/src/app/dashboard-shared/components/chart-view/abstract-chart-view.directive.ts index bf3adc6ad4..8a22e809f6 100644 --- a/ui/src/app/dashboard-shared/components/chart-view/abstract-chart-view.directive.ts +++ b/ui/src/app/dashboard-shared/components/chart-view/abstract-chart-view.directive.ts @@ -85,7 +85,7 @@ export abstract class AbstractChartViewDirective { loadWidgetConfig(widgetId: string, setCurrentlyConfigured?: boolean) { if (!this.isGridView()) { - this.widgetsVisible = false; + this.widgetsAvailable = false; } this.dataViewDataExplorerService .getChart(widgetId) diff --git a/ui/src/app/dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component.html b/ui/src/app/dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component.html index fb34956764..43f50a8dda 100644 --- a/ui/src/app/dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component.html +++ b/ui/src/app/dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component.html @@ -27,7 +27,7 @@ [ngClass]="editMode ? 'edit' : ''" class="custom-gridster-style" > - @for (item of dashboard.widgets; let i = $index; track $index) { + @for (item of dashboard.widgets; let i = $index; track item.widgetId) { <ng-container> <gridster-item [item]="item" diff --git a/ui/src/app/dashboard-shared/services/dashboard.service.ts b/ui/src/app/dashboard-shared/services/dashboard.service.ts index 4525c6724d..efa9ba8ab1 100644 --- a/ui/src/app/dashboard-shared/services/dashboard.service.ts +++ b/ui/src/app/dashboard-shared/services/dashboard.service.ts @@ -42,4 +42,8 @@ export class DataExplorerDashboardService { }, }); } + + makeUniqueWidgetId(): string { + return Math.random().toString(36).slice(2, 12); + } } 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 6c6ab6c2da..db24f11d62 100644 --- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts +++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts @@ -16,7 +16,14 @@ * */ -import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { + ChangeDetectorRef, + Component, + inject, + OnDestroy, + OnInit, + ViewChild, +} from '@angular/core'; import { Observable, of, Subscription, timer } from 'rxjs'; import { DashboardGridViewComponent } from '../../../dashboard-shared/components/chart-view/grid-view/dashboard-grid-view.component'; import { @@ -50,6 +57,7 @@ import { DataExplorerRoutingService } from '../../../data-explorer-shared/servic import { DataExplorerDetectChangesService } from '../../../data-explorer/services/data-explorer-detect-changes.service'; import { SupportsUnsavedChangeDialog } from '../../../data-explorer-shared/models/dataview-dashboard.model'; import { TranslateService } from '@ngx-translate/core'; +import { DataExplorerDashboardService } from '../../../dashboard-shared/services/dashboard.service'; @Component({ selector: 'sp-dashboard-panel', @@ -85,18 +93,17 @@ export class DashboardPanelComponent authSubscription: Subscription; refreshSubscription: Subscription; - constructor( - private detectChangesService: DataExplorerDetectChangesService, - private dialog: MatDialog, - private timeSelectionService: TimeSelectionService, - private authService: AuthService, - private currentUserService: CurrentUserService, - private dashboardService: DashboardService, - private route: ActivatedRoute, - private routingService: DataExplorerRoutingService, - private breadcrumbService: SpBreadcrumbService, - private translateService: TranslateService, - ) {} + private detectChangesService = inject(DataExplorerDetectChangesService); + private dialog = inject(MatDialog); + private timeSelectionService = inject(TimeSelectionService); + private authService = inject(AuthService); + private currentUserService = inject(CurrentUserService); + private dashboardService = inject(DashboardService); + private route = inject(ActivatedRoute); + private routingService = inject(DataExplorerRoutingService); + private breadcrumbService = inject(SpBreadcrumbService); + private translateService = inject(TranslateService); + private dataExplorerDashboardService = inject(DataExplorerDashboardService); public ngOnInit() { const params = this.route.snapshot.params; @@ -130,6 +137,8 @@ export class DashboardPanelComponent dashboardItem.rows = 4; dashboardItem.x = 0; dashboardItem.y = 0; + dashboardItem.widgetId = + this.dataExplorerDashboardService.makeUniqueWidgetId(); this.dashboard.widgets.push(dashboardItem); setTimeout(() => { if (this.viewMode === 'grid') { @@ -180,6 +189,7 @@ export class DashboardPanelComponent removeChartFromDashboard(widgetIndex: number) { this.dashboard.widgets.splice(widgetIndex, 1); + this.widgets.splice(widgetIndex, 1); } updateDateRange(timeSettings: TimeSettings) { @@ -212,6 +222,10 @@ export class DashboardPanelComponent .subscribe(resp => { if (resp.ok) { const compositeDashboard = resp.body; + compositeDashboard.dashboard.widgets.forEach(w => { + w.widgetId ??= + this.dataExplorerDashboardService.makeUniqueWidgetId(); + }); this.dashboard = compositeDashboard.dashboard; this.widgets = compositeDashboard.widgets; this.originalDashboard = JSON.parse(
