This is an automated email from the ASF dual-hosted git repository. SvenO3 pushed a commit to branch 4430-chart-settings-not-correctly-migrated-after-event-schema-changes in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 3f8312f16fec788af807179cb6244004ab658539 Author: Sven Oehler <[email protected]> AuthorDate: Tue May 12 14:19:44 2026 +0200 Show chart infos and health status in the ui --- .../chart-container/chart-container.component.html | 28 ++++- .../chart-container/chart-container.component.scss | 10 ++ .../chart-container/chart-container.component.ts | 12 +- .../chart-overview-table.component.html | 10 ++ .../chart-overview-table.component.ts | 6 + .../components/chart-view/chart-view.component.ts | 2 + ...adapter-started-update-migration.component.html | 129 ++++++++++++++------- 7 files changed, 151 insertions(+), 46 deletions(-) diff --git a/ui/src/app/chart-shared/components/chart-container/chart-container.component.html b/ui/src/app/chart-shared/components/chart-container/chart-container.component.html index caae8beb42..d0ac4576b7 100644 --- a/ui/src/app/chart-shared/components/chart-container/chart-container.component.html +++ b/ui/src/app/chart-shared/components/chart-container/chart-container.component.html @@ -205,8 +205,34 @@ </div> } <div fxLayout="column" class="widget-content p-0 ml-0 mr-0 h-100 mw-100"> + @if (showRequiresAttentionMessage) { + <div + fxFlex="100" + fxLayout="column" + fxLayoutAlign="center center" + fxLayoutGap="10px" + > + <div fxLayout="row" fxLayoutAlign="center center"> + <i class="material-icons warning-icon">sync_problem</i> + </div> + <div fxLayout="column" fxLayoutAlign="center center"> + <div class="default-text text-xl"> + {{ + 'Chart requires attention because the dataset schema changed' + | translate + }} + </div> + <div class="default-text text-md"> + {{ + 'Open the chart editor to review and save the chart' + | translate + }} + </div> + </div> + </div> + } <ng-template spWidgetHost class="h-100 p-0"></ng-template> - @if (errorMessage) { + @if (!showRequiresAttentionMessage && errorMessage) { <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center"> <sp-exception-message [message]="errorMessage" diff --git a/ui/src/app/chart-shared/components/chart-container/chart-container.component.scss b/ui/src/app/chart-shared/components/chart-container/chart-container.component.scss index 429546c68f..e24d65bc3c 100644 --- a/ui/src/app/chart-shared/components/chart-container/chart-container.component.scss +++ b/ui/src/app/chart-shared/components/chart-container/chart-container.component.scss @@ -81,3 +81,13 @@ overflow-x: hidden; overflow-y: hidden; } + +.default-text { + padding: 10px; + text-align: center; +} + +.warning-icon { + color: var(--color-warn); + font-size: var(--font-size-3xl); +} diff --git a/ui/src/app/chart-shared/components/chart-container/chart-container.component.ts b/ui/src/app/chart-shared/components/chart-container/chart-container.component.ts index c35ee55b03..1bf1833485 100644 --- a/ui/src/app/chart-shared/components/chart-container/chart-container.component.ts +++ b/ui/src/app/chart-shared/components/chart-container/chart-container.component.ts @@ -73,6 +73,7 @@ import { FlexDirective, LayoutAlignDirective, LayoutDirective, + LayoutGapDirective, } from '@ngbracket/ngx-layout/flex'; import { MatButton, MatIconButton } from '@angular/material/button'; import { MatIcon } from '@angular/material/icon'; @@ -91,6 +92,7 @@ import { TranslatePipe } from '@ngx-translate/core'; FlexDirective, LayoutDirective, LayoutAlignDirective, + LayoutGapDirective, MatIconButton, MatIcon, FormsModule, @@ -305,13 +307,21 @@ export class ChartContainerComponent } chooseWidget(widgetTypeId: string) { - if (widgetTypeId != undefined) { + if (widgetTypeId != undefined && !this.showRequiresAttentionMessage) { const widgetToDisplay = this.chartRegistryService.getChartTemplate(widgetTypeId); this.loadComponent(widgetToDisplay.widgetComponent); } } + get showRequiresAttentionMessage(): boolean { + return ( + !this.dataViewMode && + !!this.dashboardItem && + this.configuredWidget?.healthStatus === 'REQUIRES_ATTENTION' + ); + } + loadComponent(widgetToDisplay) { const container = this.el.nativeElement.querySelector( '.widget-content', diff --git a/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.html b/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.html index 2c5a32e112..dce1edf0bf 100644 --- a/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.html +++ b/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.html @@ -53,6 +53,16 @@ >warning</mat-icon > } + @if (requiresAttention(element)) { + <mat-icon + data-cy="chart-sync-problem-icon" + [matTooltip]=" + chartRequiresAttentionTooltip | translate + " + style="color: var(--color-warn)" + >sync_problem</mat-icon + > + } <div fxLayout="column" fxLayoutAlign="start start"> <span class="text-sm">{{ element.baseAppearanceConfig.widgetTitle diff --git a/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.ts b/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.ts index 0657b792af..07948341b0 100644 --- a/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.ts +++ b/ui/src/app/chart/components/chart-overview/chart-overview-table/chart-overview-table.component.ts @@ -102,6 +102,8 @@ export class ChartOverviewTableComponent implements OnInit { filteredCharts: DataExplorerWidgetModel[] = []; readonly outdatedChartTooltip = 'This chart is outdated and must be migrated.'; + readonly chartRequiresAttentionTooltip = + 'This chart requires attention because the dataset schema changed.'; private dataViewService = inject(ChartService); private dataExplorerDashboardService = inject(ChartSharedService); @@ -225,4 +227,8 @@ export class ChartOverviewTableComponent implements OnInit { isLegacyMultiSourceChart(chart: DataExplorerWidgetModel): boolean { return (chart?.dataConfig?.sourceConfigs?.length ?? 0) > 1; } + + requiresAttention(chart: DataExplorerWidgetModel): boolean { + return chart?.healthStatus === 'REQUIRES_ATTENTION'; + } } diff --git a/ui/src/app/chart/components/chart-view/chart-view.component.ts b/ui/src/app/chart/components/chart-view/chart-view.component.ts index 1a22154833..8805971789 100644 --- a/ui/src/app/chart/components/chart-view/chart-view.component.ts +++ b/ui/src/app/chart/components/chart-view/chart-view.component.ts @@ -396,6 +396,7 @@ export class ChartViewComponent return; } this.dataView.timeSettings = this.timeSettings; + this.dataView.healthStatus = 'OK'; this.dataView.metadata ??= { lastModifiedEpochMs: undefined, createdAtEpochMs: undefined, @@ -473,6 +474,7 @@ export class ChartViewComponent return of(true); } this.dataView.timeSettings = this.timeSettings; + this.dataView.healthStatus = 'OK'; return ( this.dataView.elementId !== undefined ? this.dataViewService.updateChart( diff --git a/ui/src/app/connect/dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component.html b/ui/src/app/connect/dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component.html index d238c41d14..8489560294 100644 --- a/ui/src/app/connect/dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component.html +++ b/ui/src/app/connect/dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component.html @@ -17,51 +17,92 @@ --> <div fxLayout="column" fxLayoutAlign="start center"> - @if (adapterPipelineUpdateInfos.length > 1) { - <h4> - {{ 'This adapter is used by' | translate }} - {{ adapterPipelineUpdateInfos.length }} - {{ 'pipeline' | translate }}. - </h4> - } @else { - {{ 'This adapter is used by' | translate }} - {{ adapterPipelineUpdateInfos.length }} {{ 'pipelines' | translate }}. ‚ - } - <div class="migration-infos"> - @for (updateInfo of adapterPipelineUpdateInfos; track updateInfo) { - <div data-cy="sp-connect-adapter-edit-warning"> - @if (updateInfo.canAutoMigrate) { - <div fxLayoutAlign="start center"> - <i class="material-icons">check</i> {{ - 'Pipeline' | translate - }} <b>{{ updateInfo.pipelineName }}</b - > {{ - 'will be automatically migrated' | translate - }}. - </div> - } - @if (!updateInfo.canAutoMigrate) { - <div fxLayoutAlign="start center"> - <i class="material-icons">warning</i> - {{ 'Pipeline' | translate }} <b>{{ - updateInfo.pipelineName - }}</b - > {{ - 'will be stopped and needs manual review' - | translate - }}. - </div> - } - </div> + @if (adapterPipelineUpdateInfos.length > 0) { + @if (adapterPipelineUpdateInfos.length > 1) { + <h4> + {{ 'This adapter is used by' | translate }} + {{ adapterPipelineUpdateInfos.length }} + {{ 'pipelines' | translate }}. + </h4> + } @else { + <h4> + {{ 'This adapter is used by' | translate }} + {{ adapterPipelineUpdateInfos.length }} + {{ 'pipeline' | translate }}. + </h4> } - </div> - <div class="migration-infos" fxLayoutAlign="start center"> - <i class="material-icons">warning</i> - {{ - 'Please check and possibly modify existing dashboards and data views afterwards.' - | translate - }} - </div> + <div class="migration-infos"> + @for (updateInfo of adapterPipelineUpdateInfos; track updateInfo) { + <div data-cy="sp-connect-adapter-edit-warning"> + @if (updateInfo.canAutoMigrate) { + <div fxLayoutAlign="start center"> + <i class="material-icons">check</i> {{ + 'Pipeline' | translate + }} <b>{{ updateInfo.pipelineName }}</b + > {{ + 'will be automatically migrated' | translate + }}. + </div> + } + @if (!updateInfo.canAutoMigrate) { + <div fxLayoutAlign="start center"> + <i class="material-icons">warning</i> + {{ 'Pipeline' | translate }} <b>{{ + updateInfo.pipelineName + }}</b + > {{ + 'will be stopped and needs manual review' + | translate + }}. + </div> + } + @if (updateInfo.chartSchemaUpdateInfos?.length > 0) { + <div class="mt-xs" fxLayout="column"> + <h4> + {{ 'Affected charts' | translate }} + </h4> + @for ( + chartUpdateInfo of updateInfo.chartSchemaUpdateInfos; + track chartUpdateInfo + ) { + <div + data-cy="sp-connect-adapter-chart-edit-warning" + > + <div fxLayoutAlign="start center"> + <i class="material-icons">warning</i> + {{ + 'Chart' | translate + }} <b>{{ + chartUpdateInfo.chartTitle + }}</b + > {{ + 'needs manual review after this update' + | translate + }}. + </div> + @if ( + chartUpdateInfo.affectedFields?.length > + 0 + ) { + <ul class="mt-xs"> + @for ( + message of chartUpdateInfo.affectedFields; + track message + ) { + <li> + {{ message | translate }} + </li> + } + </ul> + } + </div> + } + </div> + } + </div> + } + </div> + } <div> <button mat-button
