You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2021/06/14 20:32:13 UTC
[incubator-streampipes] branch STREAMPIPES-380 updated: Add error
and loading message component
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-380
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-380 by this push:
new 663ba72 Add error and loading message component
663ba72 is described below
commit 663ba729abe2e26ead677ae1aaa2d310c231ff97
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Mon Jun 14 22:30:49 2021 +0200
Add error and loading message component
---
.../format-configuration.component.html | 4 +-
.../new-adapter/new-adapter.component.html | 9 ++--
.../error-message/error-message.component.css | 0
.../error-message/error-message.component.html | 21 ++++++++++
.../error-message/error-message.component.ts | 20 +++++++++
.../event-schema-preview.component.ts | 6 +--
.../event-schema/event-schema.component.html | 49 ++++++----------------
.../event-schema/event-schema.component.ts | 14 +++----
.../loading-message/loading-message.component.css | 0
.../loading-message/loading-message.component.html | 8 ++++
.../loading-message/loading-message.component.ts | 12 ++++++
ui/src/app/connect/connect.module.ts | 6 ++-
12 files changed, 95 insertions(+), 54 deletions(-)
diff --git a/ui/src/app/connect/components/format-configuration/format-configuration.component.html b/ui/src/app/connect/components/format-configuration/format-configuration.component.html
index 809820a..f6502cf 100644
--- a/ui/src/app/connect/components/format-configuration/format-configuration.component.html
+++ b/ui/src/app/connect/components/format-configuration/format-configuration.component.html
@@ -18,11 +18,11 @@
<div *ngIf="selectedFormat">
<div *ngIf="selectedFormat.config.length > 0">
- <sp-configuration-groupkl
+ <sp-configuration-group
[configurationGroup]="formatForm"
[adapterId]="adapterDescription.appId"
[configuration]="selectedFormat.config">
- </sp-configuration-groupkl>
+ </sp-configuration-group>
</div>
<div *ngIf="selectedFormat.config.length === 0" class="sp-blue-border padding" style="padding: 15px;">
diff --git a/ui/src/app/connect/components/new-adapter/new-adapter.component.html b/ui/src/app/connect/components/new-adapter/new-adapter.component.html
index 0062463..eb789de 100644
--- a/ui/src/app/connect/components/new-adapter/new-adapter.component.html
+++ b/ui/src/app/connect/components/new-adapter/new-adapter.component.html
@@ -98,13 +98,12 @@
<mat-step>
<ng-template matStepLabel>Define Event Schema</ng-template>
- <app-event-schema #eschema fxLayout="column" fxFlex="100"
+ <sp-event-schema #eschema fxLayout="column" fxFlex="100"
[(isEditable)]="isEditable"
- [(adapterDescription)]="adapter"
+ [adapterDescription]="adapter"
[(eventSchema)]="eventSchema"
- [(oldEventSchema)]="oldEventSchema"
- (previewEnabled)="showPreview($event)">
- </app-event-schema>
+ [(oldEventSchema)]="oldEventSchema">
+ </sp-event-schema>
<div fxLayoutAlign="end">
<button class="mat-basic" mat-raised-button (click)="removeSelection()">Cancel</button>
diff --git a/ui/src/app/connect/components/schema-editor/error-message/error-message.component.css b/ui/src/app/connect/components/schema-editor/error-message/error-message.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/connect/components/schema-editor/error-message/error-message.component.html b/ui/src/app/connect/components/schema-editor/error-message/error-message.component.html
new file mode 100644
index 0000000..65bc617
--- /dev/null
+++ b/ui/src/app/connect/components/schema-editor/error-message/error-message.component.html
@@ -0,0 +1,21 @@
+<div fxLayout="column" >
+ <div fxLayout="row" fxLayoutAlign="center center">
+ <mat-icon style="margin-top: 10px" class="md-accent">warning</mat-icon>
+ <span style="width: 10px;"></span>
+ <h3>Sorry, there was an error while guessing the schema of your configured data source...</h3>
+ </div>
+ <div fxLayout="row" fxLayoutAlign="center center">
+ <button mat-button class="md-accent">
+ <div *ngIf="!showErrorMessage" (click)="showErrorMessage = true">Show Details</div>
+ <div *ngIf="showErrorMessage" (click)="showErrorMessage = false">Hide Details</div>
+ </button>
+ </div>
+ <div fxLayoutAlign="center center" *ngIf="showErrorMessage">
+ <div class="error-message">
+ <div *ngFor="let error of errorMessages" style="margin-bottom: 5px; margin-top: 5px">
+ <div>{{error.title}}</div>
+ <div>{{error.description}}</div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/ui/src/app/connect/components/schema-editor/error-message/error-message.component.ts b/ui/src/app/connect/components/schema-editor/error-message/error-message.component.ts
new file mode 100644
index 0000000..9ed18ec
--- /dev/null
+++ b/ui/src/app/connect/components/schema-editor/error-message/error-message.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Notification } from '../../../../core-model/gen/streampipes-model';
+
+@Component({
+ selector: 'sp-error-message',
+ templateUrl: './error-message.component.html',
+ styleUrls: ['./error-message.component.css']
+})
+export class ErrorMessageComponent implements OnInit {
+
+ @Input() errorMessages: Notification[];
+
+ showErrorMessage = false;
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/ui/src/app/connect/components/schema-editor/event-schema-preview/event-schema-preview.component.ts b/ui/src/app/connect/components/schema-editor/event-schema-preview/event-schema-preview.component.ts
index bf2c933..72b34da 100644
--- a/ui/src/app/connect/components/schema-editor/event-schema-preview/event-schema-preview.component.ts
+++ b/ui/src/app/connect/components/schema-editor/event-schema-preview/event-schema-preview.component.ts
@@ -16,11 +16,11 @@
*
*/
-import {Component, Input} from "@angular/core";
-import {EventSchema} from "../../../../core-model/gen/streampipes-model";
+import { Component, Input } from '@angular/core';
+import { EventSchema } from '../../../../core-model/gen/streampipes-model';
@Component({
- selector: 'app-event-schema-preview',
+ selector: 'sp-event-schema-preview',
templateUrl: './event-schema-preview.component.html',
styleUrls: ['./event-schema-preview.component.css']
})
diff --git a/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.html b/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.html
index c732dc3..2d919b3 100644
--- a/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.html
+++ b/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.html
@@ -36,11 +36,9 @@
<button color="primary" mat-button (click)=guessSchema()>
<mat-icon matTooltip="Refresh Schema">refresh</mat-icon>
</button>
- <!--
<button color="primary" mat-button (click)=togglePreview()>
<mat-icon matTooltip="Show preview of schema">play_arrow</mat-icon>
</button>
- -->
</div>
<div>
<button style="padding-right:0" color="primary" mat-button [disabled]="countSelected == 0"
@@ -53,49 +51,28 @@
</div>
<div class="sp-blue-border padding">
- <div fxLayout="column" *ngIf="isLoading">
- <div fxLayoutAlign="center">
- <mat-spinner fxLayoutAlign="center" style="margin: 10px 0 5px 0">Loading</mat-spinner>
- </div>
- <div fxLayoutAlign="center">
- <h3>Guessing the event schema...</h3>
- </div>
- </div>
+ <sp-loading-message *ngIf="isLoading"></sp-loading-message>
- <div fxLayout="column" *ngIf="isError">
- <div fxLayout="row" fxLayoutAlign="center center">
- <mat-icon style="margin-top: 10px" class="md-accent">warning</mat-icon>
- <span style="width: 10px;"></span>
- <h3>Sorry, there was an error while guessing the schema of your configured data source...</h3>
- </div>
- <div fxLayout="row" fxLayoutAlign="center center">
- <button mat-button class="md-accent">
- <div *ngIf="!showErrorMessage" (click)="showErrorMessage = true">Show Details</div>
- <div *ngIf="showErrorMessage" (click)="showErrorMessage = false">Hide Details</div>
- </button>
- </div>
- <div fxLayoutAlign="center center" *ngIf="showErrorMessage">
- <div class="error-message">
- <div *ngFor="let error of errorMessages" style="margin-bottom: 5px; margin-top: 5px">
- <div>{{error.title}}</div>
- <div>{{error.description}}</div>
- </div>
- </div>
- </div>
- </div>
+ <sp-error-message
+ [errorMessages]="errorMessages"
+ *ngIf="isError">
+ </sp-error-message>
- <div fxLayout="column" fxLayoutAlign="space-evenly stretched" class="drag-drop-tree">
+ <div *ngIf="!isError && !isLoading" fxLayout="column" fxLayoutAlign="space-evenly stretched" class="drag-drop-tree">
<tree-root #tree [nodes]="nodes" [options]="options" (updateData)="onUpdateData(tree)">
<ng-template #treeNodeTemplate let-node let-index="index">
- <event-property-row [node]="node" [(isEditable)]="isEditable"
- [(eventSchema)]="eventSchema"
- (refreshTreeEmitter)="refreshTree()" [(countSelected)]="countSelected"></event-property-row>
+ <event-property-row
+ [node]="node"
+ [(isEditable)]="isEditable"
+ [(eventSchema)]="eventSchema"
+ (refreshTreeEmitter)="refreshTree()"
+ [(countSelected)]="countSelected"></event-property-row>
</ng-template>
</tree-root>
</div>
</div>
</div>
<div fxFlex="0 1 50%" *ngIf="isPreviewEnabled">
- <app-event-schema-preview [eventSchema]="eventSchema"></app-event-schema-preview>
+ <sp-event-schema-preview [eventSchema]="eventSchema"></sp-event-schema-preview>
</div>
</div>
diff --git a/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.ts b/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.ts
index ee142a0..1760f22 100644
--- a/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.ts
+++ b/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.ts
@@ -25,10 +25,10 @@ import {
SimpleChanges,
ViewChild
} from '@angular/core';
-import {RestService} from '../../../services/rest.service';
-import {ITreeOptions, TreeComponent} from 'angular-tree-component';
-import {UUID} from 'angular2-uuid';
-import {DataTypesService} from '../../../services/data-type.service';
+import { RestService } from '../../../services/rest.service';
+import { ITreeOptions, TreeComponent } from 'angular-tree-component';
+import { UUID } from 'angular2-uuid';
+import { DataTypesService } from '../../../services/data-type.service';
import {
AdapterDescription,
EventProperty,
@@ -37,10 +37,10 @@ import {
EventSchema,
GuessSchema,
Notification
-} from "../../../../core-model/gen/streampipes-model";
+} from '../../../../core-model/gen/streampipes-model';
@Component({
- selector: 'app-event-schema',
+ selector: 'sp-event-schema',
templateUrl: './event-schema.component.html',
styleUrls: ['./event-schema.component.css']
})
@@ -61,7 +61,7 @@ export class EventSchemaComponent implements OnChanges {
@ViewChild(TreeComponent, { static: true }) tree: TreeComponent;
schemaGuess: GuessSchema = new GuessSchema();
- countSelected: number = 0;
+ countSelected = 0;
isLoading = false;
isError = false;
isPreviewEnabled = false;
diff --git a/ui/src/app/connect/components/schema-editor/loading-message/loading-message.component.css b/ui/src/app/connect/components/schema-editor/loading-message/loading-message.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/connect/components/schema-editor/loading-message/loading-message.component.html b/ui/src/app/connect/components/schema-editor/loading-message/loading-message.component.html
new file mode 100644
index 0000000..7e140fe
--- /dev/null
+++ b/ui/src/app/connect/components/schema-editor/loading-message/loading-message.component.html
@@ -0,0 +1,8 @@
+<div fxLayout="column" >
+ <div fxLayoutAlign="center">
+ <mat-spinner fxLayoutAlign="center" style="margin: 10px 0 5px 0">Loading</mat-spinner>
+ </div>
+ <div fxLayoutAlign="center">
+ <h3>Guessing the event schema...</h3>
+ </div>
+</div>
diff --git a/ui/src/app/connect/components/schema-editor/loading-message/loading-message.component.ts b/ui/src/app/connect/components/schema-editor/loading-message/loading-message.component.ts
new file mode 100644
index 0000000..3b6c900
--- /dev/null
+++ b/ui/src/app/connect/components/schema-editor/loading-message/loading-message.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'sp-loading-message',
+ templateUrl: './loading-message.component.html',
+ styleUrls: ['./loading-message.component.css']
+})
+export class LoadingMessageComponent {
+
+ constructor() { }
+
+}
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 79c1ff4..827dc62 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -75,6 +75,8 @@ import { SpecificAdapterConfigurationComponent } from './components/specific-ada
import { ConfigurationGroupComponent } from './components/configuration-group/configuration-group.component';
import { FormatConfigurationComponent } from './components/format-configuration/format-configuration.component';
import { GenericAdapterConfigurationComponent } from './components/generic-adapter-configuration/generic-adapter-configuration.component';
+import { ErrorMessageComponent } from './components/schema-editor/error-message/error-message.component';
+import { LoadingMessageComponent } from './components/schema-editor/loading-message/loading-message.component';
@NgModule({
imports: [
@@ -123,7 +125,9 @@ import { GenericAdapterConfigurationComponent } from './components/generic-adapt
FormatConfigurationComponent,
GenericAdapterConfigurationComponent,
SpecificAdapterConfigurationComponent,
- ConfigurationGroupComponent
+ ConfigurationGroupComponent,
+ ErrorMessageComponent,
+ LoadingMessageComponent
],
providers: [
RestService,