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
The following commit(s) were added to
refs/heads/4430-chart-settings-not-correctly-migrated-after-event-schema-changes
by this push:
new dbdc316da5 Improve adapter migration dialog
dbdc316da5 is described below
commit dbdc316da5b217bdf63f4fed5a79bcd16fbbe759
Author: Sven Oehler <[email protected]>
AuthorDate: Tue May 12 17:35:39 2026 +0200
Improve adapter migration dialog
---
.../start-adapter-configuration.component.ts | 6 +-
.../adapter-started-dialog.component.html | 14 +-
.../adapter-started-dialog.component.ts | 6 +
...adapter-started-update-migration.component.html | 159 +++++++++++++--------
...adapter-started-update-migration.component.scss | 88 +++++++++++-
.../adapter-started-update-migration.component.ts | 13 +-
6 files changed, 222 insertions(+), 64 deletions(-)
diff --git
a/ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/start-adapter-configuration.component.ts
b/ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/start-adapter-configuration.component.ts
index d0219bd64b..24410d2e15 100644
---
a/ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/start-adapter-configuration.component.ts
+++
b/ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/start-adapter-configuration.component.ts
@@ -208,8 +208,10 @@ export class StartAdapterConfigurationComponent implements
OnInit {
},
});
- dialogRef.afterClosed().subscribe(() => {
- this.adapterStartedEmitter.emit();
+ dialogRef.afterClosed().subscribe(result => {
+ if (result !== 'KeepEditing') {
+ this.adapterStartedEmitter.emit();
+ }
});
}
diff --git
a/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.html
b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.html
index dab507fdae..8ab08b408f 100644
---
a/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.html
+++
b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.html
@@ -65,7 +65,19 @@
</div>
</div>
<mat-divider></mat-divider>
- <div class="sp-dialog-actions actions-align-right">
+ <div class="sp-dialog-actions actions-align-right" fxLayoutGap="10px">
+ @if (
+ adapterUpdatePreflight && editMode && !adapterInstalled && !loading
+ ) {
+ <button
+ class="mat-basic"
+ mat-flat-button
+ data-cy="keep-editing-adapter-started-dialog-button"
+ (click)="onKeepEditing()"
+ >
+ {{ 'Keep editing' | translate }}
+ </button>
+ }
<button
id="confirm_adapter_started_button"
class="mat-basic"
diff --git
a/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.ts
b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.ts
index 0be48870d2..79b4fe9992 100644
---
a/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.ts
+++
b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.ts
@@ -56,6 +56,7 @@ import { SpAdapterStartedSuccessComponent } from
'./adapter-started-success/adap
import { SpAdapterStartedPreviewComponent } from
'./adapter-started-preview/adapter-started-preview.component';
import { MatDivider } from '@angular/material/divider';
import { MatButton } from '@angular/material/button';
+import { LayoutGapDirective } from '@ngbracket/ngx-layout';
@Component({
selector: 'sp-dialog-adapter-started-dialog',
@@ -71,6 +72,7 @@ import { MatButton } from '@angular/material/button';
MatDivider,
MatButton,
TranslatePipe,
+ LayoutGapDirective,
],
})
export class AdapterStartedDialog implements OnInit {
@@ -310,6 +312,10 @@ export class AdapterStartedDialog implements OnInit {
this.shepherdService.trigger('confirm_adapter_started_button');
}
+ onKeepEditing() {
+ this.dialogRef.close('KeepEditing');
+ }
+
async addToAsset(pipelineId = ''): Promise<void> {
let linkageData: LinkageData[];
try {
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 8489560294..9815ccdf1a 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
@@ -16,84 +16,129 @@
~
-->
-<div fxLayout="column" fxLayoutAlign="start center">
+<div class="migration-view" fxLayout="column" fxLayoutAlign="start stretch">
@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 class="migration-infos">
+ <div class="migration-summary" fxLayout="column" fxLayoutGap="4px">
+ @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" fxLayout="column" fxLayoutGap="12px">
@for (updateInfo of adapterPipelineUpdateInfos; track updateInfo) {
- <div data-cy="sp-connect-adapter-edit-warning">
+ <div
+ class="pipeline-update-info"
+ 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
+ class="pipeline-status"
+ fxLayoutAlign="start center"
+ >
+ <mat-icon class="status-icon status-icon-ok">
+ check_circle
+ </mat-icon>
+ <div>
+ <div class="pipeline-title">
+ {{ 'Pipeline' | translate }}
+ <b>{{ updateInfo.pipelineName }}</b>
+ </div>
+ <div class="pipeline-description">
+ {{
+ 'This pipeline will be automatically
migrated.'
+ | translate
+ }}
+ </div>
+ </div>
</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
+ class="pipeline-status"
+ fxLayoutAlign="start center"
+ >
+ <mat-icon class="status-icon status-icon-warning">
+ warning
+ </mat-icon>
+ <div>
+ <div class="pipeline-title">
+ {{ 'Pipeline' | translate }}
+ <b>{{ updateInfo.pipelineName }}</b>
+ </div>
+ <div class="pipeline-description">
+ {{
+ 'This pipeline will be stopped and
needs manual review.'
+ | translate
+ }}
+ </div>
+ </div>
</div>
}
@if (updateInfo.chartSchemaUpdateInfos?.length > 0) {
- <div class="mt-xs" fxLayout="column">
- <h4>
+ <div class="affected-charts" fxLayout="column">
+ <div
+ class="affected-charts-title"
+ fxLayoutAlign="start center"
+ >
+ <mat-icon class="affected-charts-icon">
+ query_stats
+ </mat-icon>
{{ 'Affected charts' | translate }}
- </h4>
+ </div>
@for (
chartUpdateInfo of
updateInfo.chartSchemaUpdateInfos;
track chartUpdateInfo
) {
<div
+ class="affected-chart"
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
+ class="affected-chart-title"
+ fxLayoutAlign="start center"
+ >
+ <mat-icon class="chart-warning-icon">
+ warning
+ </mat-icon>
+ <span>
+ {{ 'Chart' | translate }}
+ <b>{{
+ chartUpdateInfo.chartTitle
+ }}</b>
+ {{
+ 'needs manual review after
this update.'
+ | translate
+ }}
+ </span>
</div>
@if (
chartUpdateInfo.affectedFields?.length
>
0
) {
- <ul class="mt-xs">
- @for (
- message of
chartUpdateInfo.affectedFields;
- track message
- ) {
- <li>
- {{ message | translate }}
- </li>
- }
- </ul>
+ <div class="affected-fields">
+ <span
class="affected-fields-label">
+ {{
+ 'Deleted fields'
+ | translate
+ }}:
+ </span>
+ <span>
+ {{
+ getAffectedFieldsText(
+
chartUpdateInfo.affectedFields
+ )
+ }}
+ </span>
+ </div>
}
</div>
}
@@ -103,7 +148,7 @@
}
</div>
}
- <div>
+ <div class="migration-actions">
<button
mat-button
mat-flat-button
diff --git
a/ui/src/app/connect/dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component.scss
b/ui/src/app/connect/dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component.scss
index 832b51d64d..f7af8a7df1 100644
---
a/ui/src/app/connect/dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component.scss
+++
b/ui/src/app/connect/dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component.scss
@@ -16,8 +16,90 @@
*
*/
+.migration-view {
+ width: min(100%, 760px);
+ margin: 0 auto;
+}
+
+.migration-summary {
+ text-align: center;
+ margin-bottom: var(--space-md);
+}
+
+.pipeline-description {
+ color: var(--color-secondary-text);
+ font-size: var(--font-size-sm);
+ line-height: var(--line-height-normal);
+}
+
.migration-infos {
- padding: 10px;
- margin-top: 10px;
- margin-bottom: 10px;
+ margin-bottom: var(--space-lg);
+}
+
+.pipeline-update-info {
+ border: 1px solid var(--color-border-subtle);
+ border-radius: 6px;
+ padding: var(--space-md);
+ margin-bottom: var(--space-xs);
+ background: var(--color-bg-0);
+}
+
+.pipeline-status {
+ gap: var(--space-sm);
+}
+
+.pipeline-title,
+.affected-charts-title {
+ font-size: var(--font-size-md);
+ line-height: var(--line-height-normal);
+}
+
+.affected-charts-title {
+ gap: var(--space-xs);
+ font-weight: var(--font-weight-bold);
+}
+
+.status-icon {
+ flex: 0 0 auto;
+}
+
+.status-icon-ok {
+ color: var(--color-success);
+}
+
+.status-icon-warning,
+.chart-warning-icon {
+ color: var(--color-warning);
+}
+
+.affected-charts {
+ margin-top: var(--space-md);
+ gap: var(--space-sm);
+}
+
+.affected-chart {
+ padding: var(--space-md);
+ border: 1px solid var(--color-border-subtle);
+ border-left: 3px solid var(--color-warning);
+ border-radius: 6px;
+ background: var(--color-bg-0);
+}
+
+.affected-chart-title {
+ gap: var(--space-xs);
+}
+
+.affected-fields {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: var(--space-xs);
+ margin-top: var(--space-xs);
+ padding-left: calc(24px + var(--space-xs));
+ font-size: var(--font-size-sm);
+ line-height: var(--line-height-normal);
+}
+
+.migration-actions {
+ text-align: center;
}
diff --git
a/ui/src/app/connect/dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component.ts
b/ui/src/app/connect/dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component.ts
index 0ac4e42ec0..03a7ff9537 100644
---
a/ui/src/app/connect/dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component.ts
+++
b/ui/src/app/connect/dialog/adapter-started/adapter-started-update-migration/adapter-started-update-migration.component.ts
@@ -23,13 +23,20 @@ import {
LayoutDirective,
} from '@ngbracket/ngx-layout/flex';
import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
import { TranslatePipe } from '@ngx-translate/core';
@Component({
selector: 'sp-adapter-started-update-migration',
templateUrl: './adapter-started-update-migration.component.html',
styleUrls: ['./adapter-started-update-migration.component.scss'],
- imports: [LayoutDirective, LayoutAlignDirective, MatButton, TranslatePipe],
+ imports: [
+ LayoutDirective,
+ LayoutAlignDirective,
+ MatButton,
+ MatIcon,
+ TranslatePipe,
+ ],
})
export class SpAdapterStartedUpdateMigrationComponent {
@Input()
@@ -37,4 +44,8 @@ export class SpAdapterStartedUpdateMigrationComponent {
@Output()
startUpdateEmitter: EventEmitter<void> = new EventEmitter<void>();
+
+ getAffectedFieldsText(affectedFields: string[]): string {
+ return affectedFields.join(', ');
+ }
}
