This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch
3010-incorrect-error-message-rendering-for-adapter-creation
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to
refs/heads/3010-incorrect-error-message-rendering-for-adapter-creation by this
push:
new 0b0d500346 fix(#3010): Add exception details component to harmonize
error rendering of adapter errors
0b0d500346 is described below
commit 0b0d5003463e3712e9bdc2f1d081fa7e47c9a45d
Author: Philipp Zehnder <[email protected]>
AuthorDate: Thu Jul 11 09:23:13 2024 +0200
fix(#3010): Add exception details component to harmonize error
rendering of adapter errors
---
ui/cypress/support/utils/connect/ConnectUtils.ts | 4 +-
.../exception-details-dialog.component.html | 41 +---------------
.../exception-details-dialog.component.scss | 36 --------------
.../exception-details-dialog.component.ts | 2 -
.../exception-details.component.html | 56 ++++++++++++++++++++++
.../exception-details.component.scss} | 4 --
.../exception-details.component.ts} | 27 ++++-------
.../shared-ui/src/lib/shared-ui.module.ts | 3 ++
.../streampipes/shared-ui/src/public-api.ts | 1 +
.../adapter-started-dialog.component.html | 2 +-
.../adapter-started-dialog.component.ts | 47 ++++++++----------
.../adapter-started-success.component.html | 29 +++--------
.../adapter-started-success.component.ts | 4 +-
13 files changed, 103 insertions(+), 153 deletions(-)
diff --git a/ui/cypress/support/utils/connect/ConnectUtils.ts
b/ui/cypress/support/utils/connect/ConnectUtils.ts
index 056ab9d2a9..034cb0c0ad 100644
--- a/ui/cypress/support/utils/connect/ConnectUtils.ts
+++ b/ui/cypress/support/utils/connect/ConnectUtils.ts
@@ -118,7 +118,7 @@ export class ConnectUtils {
cy.dataCy('connect-create-new-adapter-button').click();
}
- public static selectAdapter(name) {
+ public static selectAdapter(name: string) {
// Select adapter
cy.get('#' + name).click();
}
@@ -180,7 +180,7 @@ export class ConnectUtils {
ConnectBtns.adapterSettingsStartAdapter().click();
if (adapterStartFails) {
- cy.dataCy('sp-connect-adapter-error-message', {
+ cy.dataCy('sp-exception-details', {
timeout: 60000,
}).should('be.visible');
} else {
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.html
index eff21738da..990888d2a3 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.html
@@ -18,45 +18,8 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-20">
- <div fxFlex="100" fxLayout="column" class="mt-10">
- <div
- *ngIf="title"
- fxLayoutAlign="start center"
- fxFlex="100"
- class="title-message color-warn"
- >
- <i class="material-icons color-warn" style="margin-right: 15px"
- >warning</i
- >
- <span class="color-warn">{{ title }}</span>
- </div>
- <div class="error-details-title">Probable cause</div>
- <div
- class="log-message"
- [innerText]="message.cause || 'No more information'"
- ></div>
- <div class="mt-10">
- <button
- [disabled]="message.fullStackTrace === undefined"
- mat-button
- color="accent"
- (click)="showDetails = !showDetails"
- >
- Full details
- </button>
- </div>
- <div
- fxFlex="100"
- fxLayout="column"
- *ngIf="showDetails"
- class="mt-10"
- >
- <div class="error-details-title">Full stack trace</div>
- <div class="log-message">
- <div [innerText]="message.fullStackTrace"></div>
- </div>
- </div>
- </div>
+ <sp-exception-details [title]="title" [message]="message">
+ </sp-exception-details>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.scss
index 99a4c4fc38..401205a9d0 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.scss
@@ -16,42 +16,6 @@
*
*/
-.log-message {
- background-color: black;
- font:
- 9pt Inconsolata,
- monospace;
- text-shadow: 0 0 5px #c8c8c8;
- color: white;
- padding: 10px;
- max-width: 100%;
- min-height: 50px;
- max-height: 300px;
- overflow-y: scroll;
- white-space: pre-wrap;
-}
-
-.error-details-title {
- font-size: 13pt;
- font-weight: var(--color-default-text);
- border-left: 3px solid var(--color-accent);
- padding-left: 10px;
- margin-bottom: 15px;
-}
-
-.mt-10 {
- margin-top: 10px;
-}
-
.p-20 {
padding: 20px;
}
-
-.color-warn {
- color: var(--color-warn);
-}
-
-.title-message {
- font-size: 16pt;
- margin-bottom: 15px;
-}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.ts
index 662c94d720..b987f2f866 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.ts
@@ -35,8 +35,6 @@ export class SpExceptionDetailsDialogComponent implements
OnInit {
@Input()
title: string;
- showDetails = false;
-
constructor(
private dialogRef: DialogRef<SpExceptionDetailsDialogComponent>,
) {}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.html
new file mode 100644
index 0000000000..03721063a2
--- /dev/null
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.html
@@ -0,0 +1,56 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~
+ -->
+<div
+ data-cy="sp-exception-details"
+ fxFlex="100"
+ fxLayout="column"
+ class="mt-10"
+>
+ <div
+ *ngIf="title"
+ fxLayoutAlign="start center"
+ fxFlex="100"
+ class="title-message color-warn"
+ >
+ <i class="material-icons color-warn" style="margin-right: 15px"
+ >warning</i
+ >
+ <span class="color-warn">{{ title }}</span>
+ </div>
+ <div class="error-details-title">Probable cause</div>
+ <div
+ class="log-message"
+ [innerText]="message.cause || 'No more information'"
+ ></div>
+ <div class="mt-10">
+ <button
+ [disabled]="message.fullStackTrace === undefined"
+ mat-button
+ color="accent"
+ (click)="showDetails = !showDetails"
+ >
+ Full details
+ </button>
+ </div>
+ <div fxFlex="100" fxLayout="column" *ngIf="showDetails" class="mt-10">
+ <div class="error-details-title">Full stack trace</div>
+ <div class="log-message">
+ <div [innerText]="message.fullStackTrace"></div>
+ </div>
+ </div>
+</div>
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.scss
similarity index 97%
copy from
ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.scss
copy to
ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.scss
index 99a4c4fc38..e86b3a16f1 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.scss
@@ -43,10 +43,6 @@
margin-top: 10px;
}
-.p-20 {
- padding: 20px;
-}
-
.color-warn {
color: var(--color-warn);
}
diff --git
a/ui/src/app/connect/dialog/adapter-started/adapter-started-success/adapter-started-success.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.ts
similarity index 61%
copy from
ui/src/app/connect/dialog/adapter-started/adapter-started-success/adapter-started-success.component.ts
copy to
ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.ts
index 69b8ad3375..4fd2b8b3b3 100644
---
a/ui/src/app/connect/dialog/adapter-started/adapter-started-success/adapter-started-success.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.ts
@@ -17,30 +17,19 @@
*/
import { Component, Input } from '@angular/core';
-import {
- ErrorMessage,
- Message,
- PipelineOperationStatus,
-} from '@streampipes/platform-services';
+import { SpLogMessage } from '@streampipes/platform-services';
@Component({
- selector: 'sp-adapter-started-success',
- templateUrl: './adapter-started-success.component.html',
- styleUrls: ['./adapter-started-success.component.scss'],
+ selector: 'sp-exception-details',
+ templateUrl: './exception-details.component.html',
+ styleUrl: './exception-details.component.scss',
})
-export class SpAdapterStartedSuccessComponent {
+export class SpExceptionDetailsComponent {
@Input()
- templateErrorMessage: ErrorMessage;
+ message: SpLogMessage;
@Input()
- adapterInstallationSuccessMessage = '';
+ title: string;
- @Input()
- pipelineOperationStatus: PipelineOperationStatus;
-
- @Input()
- saveInDataLake: boolean;
-
- @Input()
- adapterStatus: Message;
+ showDetails = false;
}
diff --git a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
index 7ac7b79fa8..a9131bf1d4 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
@@ -42,6 +42,7 @@ import { SpTableComponent } from
'./components/sp-table/sp-table.component';
import { MatTableModule } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
+import { SpExceptionDetailsComponent } from
'./components/sp-exception-message/exception-details/exception-details.component';
@NgModule({
declarations: [
@@ -53,6 +54,7 @@ import { MatSort } from '@angular/material/sort';
SpBasicViewComponent,
SpBasicNavTabsComponent,
SpExceptionMessageComponent,
+ SpExceptionDetailsComponent,
SpExceptionDetailsDialogComponent,
SpLabelComponent,
SpTableComponent,
@@ -81,6 +83,7 @@ import { MatSort } from '@angular/material/sort';
SpBasicHeaderTitleComponent,
SpBasicViewComponent,
SpBasicNavTabsComponent,
+ SpExceptionDetailsComponent,
SpExceptionMessageComponent,
SpExceptionDetailsDialogComponent,
SpLabelComponent,
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts
b/ui/projects/streampipes/shared-ui/src/public-api.ts
index a3c62eb635..d954892499 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/public-api.ts
@@ -33,6 +33,7 @@ export * from
'./lib/components/basic-nav-tabs/basic-nav-tabs.component';
export * from './lib/components/split-section/split-section.component';
export * from
'./lib/components/sp-exception-message/sp-exception-message.component';
export * from
'./lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component';
+export * from
'./lib/components/sp-exception-message/exception-details/exception-details.component';
export * from './lib/components/sp-label/sp-label.component';
export * from './lib/components/sp-table/sp-table.component';
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 3e623b6140..635127cb4d 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
@@ -42,10 +42,10 @@
[adapterInstallationSuccessMessage]="
adapterInstallationSuccessMessage
"
- [adapterStatus]="adapterStatus"
[pipelineOperationStatus]="pipelineOperationStatus"
[saveInDataLake]="saveInDataLake"
[templateErrorMessage]="templateErrorMessage"
+ [adapterErrorMessage]="adapterErrorMessage"
></sp-adapter-started-success>
<sp-adapter-started-preview
*ngIf="showPreview"
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 9b8ef3ce13..9d385b4516 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
@@ -22,10 +22,10 @@ import {
AdapterDescription,
AdapterService,
ErrorMessage,
- Message,
PipelineOperationStatus,
PipelineTemplateService,
PipelineUpdateInfo,
+ SpLogMessage,
} from '@streampipes/platform-services';
import { DialogRef } from '@streampipes/shared-ui';
import { PipelineInvocationBuilder } from
'../../../core-services/template/PipelineInvocationBuilder';
@@ -37,12 +37,9 @@ import { PipelineInvocationBuilder } from
'../../../core-services/template/Pipel
})
export class AdapterStartedDialog implements OnInit {
adapterInstalled = false;
- public adapterStatus: Message;
pollingActive = false;
public pipelineOperationStatus: PipelineOperationStatus;
- adapterSuccessfullyEdited = false;
-
/**
* AdapterDescription that should be persisted and started
*/
@@ -76,6 +73,7 @@ export class AdapterStartedDialog implements OnInit {
showPreview = false;
adapterInstallationSuccessMessage = '';
adapterElementId = '';
+ adapterErrorMessage: SpLogMessage;
constructor(
public dialogRef: DialogRef<AdapterStartedDialog>,
@@ -113,13 +111,12 @@ export class AdapterStartedDialog implements OnInit {
this.loading = true;
this.adapterService.updateAdapter(this.adapter).subscribe(
res => {
- this.adapterStatus = res;
this.onAdapterReady(
`Adapter ${this.adapter.name} was successfully updated and
is available in the pipeline editor.`,
);
},
error => {
- this.onAdapterFailure(error.error.title);
+ this.onAdapterFailure(error.error);
},
);
}
@@ -129,7 +126,6 @@ export class AdapterStartedDialog implements OnInit {
this.loading = true;
this.adapterService.addAdapter(this.adapter).subscribe(
status => {
- this.adapterStatus = status;
if (status.success) {
const adapterElementId = status.notifications[0].title;
if (this.saveInDataLake) {
@@ -138,15 +134,22 @@ export class AdapterStartedDialog implements OnInit {
this.startAdapter(adapterElementId, true);
}
} else {
- const errorMsg =
- status.notifications.length > 0
- ? status.notifications[0].title
- : 'Unknown Error';
+ const errorMsg: SpLogMessage = {
+ cause:
+ status.notifications.length > 0
+ ? status.notifications[0].title
+ : 'Unknown Error',
+ detail: '',
+ fullStackTrace: '',
+ level: 'ERROR',
+ title: 'Unknown Error',
+ };
+
this.onAdapterFailure(errorMsg);
}
},
error => {
- this.onAdapterFailure(error.error.title);
+ this.onAdapterFailure(error.error);
},
);
}
@@ -164,7 +167,7 @@ export class AdapterStartedDialog implements OnInit {
this.onAdapterReady(successMessage, showPreview);
},
error => {
- this.onAdapterFailure(error.error.title);
+ this.onAdapterFailure(error.error);
},
);
} else {
@@ -172,19 +175,11 @@ export class AdapterStartedDialog implements OnInit {
}
}
- onAdapterFailure(errorMessageText: string) {
+ onAdapterFailure(adapterErrorMessage: SpLogMessage) {
this.adapterInstalled = true;
- this.adapterStatus = {
- success: false,
- elementName: this.adapter.name,
- notifications: [
- {
- title: errorMessageText,
- description: '',
- additionalInformation: '',
- },
- ],
- };
+
+ this.adapterErrorMessage = adapterErrorMessage;
+
this.loading = false;
}
@@ -248,7 +243,7 @@ export class AdapterStartedDialog implements OnInit {
this.startAdapter(adapterElementId, true);
},
error => {
- this.onAdapterFailure(error.error.title);
+ this.onAdapterFailure(error.error);
},
);
},
diff --git
a/ui/src/app/connect/dialog/adapter-started/adapter-started-success/adapter-started-success.component.html
b/ui/src/app/connect/dialog/adapter-started/adapter-started-success/adapter-started-success.component.html
index b600a282ae..39896f689e 100644
---
a/ui/src/app/connect/dialog/adapter-started/adapter-started-success/adapter-started-success.component.html
+++
b/ui/src/app/connect/dialog/adapter-started/adapter-started-success/adapter-started-success.component.html
@@ -18,7 +18,7 @@
<div fxLayout="column" fxLayoutAlign="center center" fxFlex="100"
class="w-100">
<div
- *ngIf="adapterStatus.success"
+ *ngIf="!adapterErrorMessage"
fxFlex="100"
fxLayout="column"
class="w-100"
@@ -65,25 +65,10 @@
</sp-pipeline-started-status>
<mat-divider fxFlex="100"></mat-divider>
</div>
- <div *ngIf="!adapterStatus.success">
- <div
- data-cy="sp-connect-adapter-error-message"
- class="info-message warning-message"
- fxFlex="100"
- fxLayoutAlign="center center"
- fxLayout="column"
- >
- <div fxLayout="row">
- <i class="material-icons">error</i>
- <h4>Something went wrong during the adapter installation.</h4>
- </div>
- <h5>
- {{
- adapterStatus.notifications.length > 0
- ? adapterStatus.notifications[0].title
- : 'Unknown Error'
- }}
- </h5>
- </div>
- </div>
+ <sp-exception-details
+ *ngIf="adapterErrorMessage"
+ [message]="adapterErrorMessage"
+ [title]="'Could not start adapter'"
+ >
+ </sp-exception-details>
</div>
diff --git
a/ui/src/app/connect/dialog/adapter-started/adapter-started-success/adapter-started-success.component.ts
b/ui/src/app/connect/dialog/adapter-started/adapter-started-success/adapter-started-success.component.ts
index 69b8ad3375..8f97659d09 100644
---
a/ui/src/app/connect/dialog/adapter-started/adapter-started-success/adapter-started-success.component.ts
+++
b/ui/src/app/connect/dialog/adapter-started/adapter-started-success/adapter-started-success.component.ts
@@ -19,8 +19,8 @@
import { Component, Input } from '@angular/core';
import {
ErrorMessage,
- Message,
PipelineOperationStatus,
+ SpLogMessage,
} from '@streampipes/platform-services';
@Component({
@@ -42,5 +42,5 @@ export class SpAdapterStartedSuccessComponent {
saveInDataLake: boolean;
@Input()
- adapterStatus: Message;
+ adapterErrorMessage: SpLogMessage;
}
