This is an automated email from the ASF dual-hosted git repository. dominikriemer pushed a commit to branch load-summary-charts-in-dashboard in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 1a205f09a1cf0e84ad3a6822ca9a75d6a2d4d476 Author: Dominik Riemer <[email protected]> AuthorDate: Sat Jun 13 10:15:11 2026 +0200 Improve layout --- .../chart-selection/chart-selection.component.html | 34 ++++++++++++++++----- .../chart-selection/chart-selection.component.scss | 13 ++++++++ .../chart-selection/chart-selection.component.ts | 35 ++++++++++++++-------- 3 files changed, 63 insertions(+), 19 deletions(-) diff --git a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html index 150d24b364..d77aeb90f0 100644 --- a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html +++ b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html @@ -39,17 +39,37 @@ </span> </div> - @if (hasChartWritePrivileges) { + <div + fxLayout="row" + fxLayoutAlign="end center" + fxLayoutGap="4px" + class="chart-selection-actions" + > <button mat-icon-button - class="chart-selection-create" - data-cy="create-chart-button" - [matTooltip]="'Create chart' | translate" - (click)="navigateToDataViewCreation()" + type="button" + class="chart-selection-refresh" + data-cy="refresh-chart-button" + [disabled]="isRefreshing" + [matTooltip]="'Refresh charts' | translate" + (click)="refreshCharts()" > - <mat-icon>add</mat-icon> + <mat-icon>refresh</mat-icon> </button> - } + + @if (hasChartWritePrivileges) { + <button + mat-icon-button + type="button" + class="chart-selection-create" + data-cy="create-chart-button" + [matTooltip]="'Create chart in new tab' | translate" + (click)="navigateToDataViewCreation()" + > + <mat-icon>add</mat-icon> + </button> + } + </div> </div> <mat-form-field diff --git a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.scss b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.scss index 548782df84..445d919e70 100644 --- a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.scss +++ b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.scss @@ -31,6 +31,11 @@ top: 0; z-index: 2; padding: 2px 0 4px; + background: linear-gradient( + 180deg, + var(--color-bg-0) 0%, + color-mix(in srgb, var(--color-bg-0) 96%, transparent) 100% + ); } .chart-selection-heading { @@ -46,6 +51,14 @@ flex-shrink: 0; } +.chart-selection-actions { + flex-shrink: 0; +} + +.chart-selection-refresh:disabled { + opacity: 0.6; +} + .chart-selection-search { width: 100%; } diff --git a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.ts b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.ts index c253cc2e7d..9059f2b978 100644 --- a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.ts +++ b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.ts @@ -18,10 +18,10 @@ import { Component, EventEmitter, inject, OnInit, Output } from '@angular/core'; import { ChartService, ChartSummaryDto } from '@streampipes/platform-services'; -import { Router } from '@angular/router'; import { AuthService } from '../../../../../services/auth.service'; import { UserPrivilege } from '../../../../../core/auth/user-privilege.enum'; import { ChartRegistry } from '../../../../../chart-shared/registry/chart-registry.service'; +import { ChartRoutingService } from '../../../../../chart-shared/services/chart-routing.service'; import { FlexDirective, FlexFillDirective, @@ -65,9 +65,9 @@ import { MatTooltip } from '@angular/material/tooltip'; }) export class ChartSelectionComponent implements OnInit { private dataViewService = inject(ChartService); - private router = inject(Router); private authService = inject(AuthService); private chartRegistryService = inject(ChartRegistry); + private chartRoutingService = inject(ChartRoutingService); @Output() addChartEmitter: EventEmitter<string> = new EventEmitter(); @@ -75,26 +75,37 @@ export class ChartSelectionComponent implements OnInit { charts: ChartSummaryDto[] = []; filteredCharts: ChartSummaryDto[] = []; searchTerm = ''; + isRefreshing = false; hasChartWritePrivileges: boolean = false; ngOnInit(): void { - this.dataViewService.getChartSummary().subscribe(chartSummary => { - this.charts = chartSummary.resources.sort((a, b) => - a.name.localeCompare(b.name), - ); - this.applySearch(); - }); - this.hasChartWritePrivileges = this.authService.hasRole( UserPrivilege.PRIVILEGE_WRITE_DATA_EXPLORER_VIEW, ); + + this.refreshCharts(); } navigateToDataViewCreation(): void { - this.router.navigate(['chart', 'create'], { - queryParams: { editMode: true }, - state: { omitConfirm: true }, + this.chartRoutingService.navigateToCreateChart(true, undefined, true); + } + + refreshCharts(): void { + this.isRefreshing = true; + this.dataViewService.getChartSummary().subscribe({ + next: chartSummary => { + this.charts = chartSummary.resources.sort((a, b) => + a.name.localeCompare(b.name), + ); + this.applySearch(); + }, + complete: () => { + this.isRefreshing = false; + }, + error: () => { + this.isRefreshing = false; + }, }); }
