You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2022/07/11 21:50:22 UTC

[incubator-streampipes] branch STREAMPIPES-558 updated: [STREAMPIPES-558] Permanently show error hints in connect module

This is an automated email from the ASF dual-hosted git repository.

riemer pushed a commit to branch STREAMPIPES-558
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git


The following commit(s) were added to refs/heads/STREAMPIPES-558 by this push:
     new 520c2f0e7 [STREAMPIPES-558] Permanently show error hints in connect module
520c2f0e7 is described below

commit 520c2f0e7c9b0e4b2cd9094a47c2442b2e5b2825
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Mon Jul 11 23:50:12 2022 +0200

    [STREAMPIPES-558] Permanently show error hints in connect module
---
 .../existing-adapters.component.html               |   9 +-
 .../format-configuration.component.html            |   2 +-
 .../event-schema/event-schema.component.html       | 100 +++++++++++++--------
 .../event-schema/event-schema.component.scss       |  24 +++++
 .../event-schema/event-schema.component.ts         |   2 +-
 .../schema-editor-header.component.html            |   4 -
 .../schema-editor-header.component.ts              |   2 -
 7 files changed, 94 insertions(+), 49 deletions(-)

diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
index 367efe6f2..1605e2921 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
@@ -137,9 +137,14 @@
                         </table>
                     </div>
                     <div fxFlex="100" fxLayoutAlign="end end">
-                        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="20"></mat-paginator>
+                        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"
+                                       [pageSize]="20"
+                                       color="accent">
+                        </mat-paginator>
                     </div>
-                    <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center"
+                    <div fxFlex="100"
+                         fxLayout="column"
+                         fxLayoutAlign="center center"
                          *ngIf="existingAdapters.length == 0">
                         <h5>(no adapters available)</h5>
                     </div>
diff --git a/ui/src/app/connect/components/new-adapter/format-configuration/format-configuration.component.html b/ui/src/app/connect/components/new-adapter/format-configuration/format-configuration.component.html
index 9d48f1880..7a998c529 100644
--- a/ui/src/app/connect/components/new-adapter/format-configuration/format-configuration.component.html
+++ b/ui/src/app/connect/components/new-adapter/format-configuration/format-configuration.component.html
@@ -24,7 +24,7 @@
         </sp-format-list>
     </sp-basic-inner-panel>
 
-    <sp-basic-inner-panel panelTitle="Configure Format" outerMargin="10px 0px" *ngIf="selectedFormat">
+    <sp-basic-inner-panel panelTitle="Configure Format" outerMargin="10px 0px 20px 0px" *ngIf="selectedFormat">
 
         <div *ngIf="selectedFormat">
             <div *ngIf="selectedFormat.config.length > 0">
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.html b/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.html
index 1880c887b..3d1bf3f99 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.html
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.html
@@ -18,51 +18,73 @@
 
 
 <div fxLayout="row" fxLayoutAlign="center">
-    <div fxFlex="0 1 80%">
-        <sp-basic-inner-panel [showTitle]="false" outerMargin="20px 0px">
-        <div header *ngIf="!isLoading && !isError" fxFlex="100">
-            <sp-schema-editor-header fxFlex="100"
-                    [countSelected]="countSelected"
-                    [schemaErrorHints]="schemaErrorHints"
-                    [displayMessages]="validEventSchema"
-                    (addNestedPropertyEmitter)="addNestedProperty()"
-                    (addStaticValuePropertyEmitter)="addStaticValueProperty()"
-                    (addTimestampPropertyEmitter)="addTimestampProperty()"
-                    (guessSchemaEmitter)="guessSchema()"
-                    (togglePreviewEmitter)="togglePreview()"
-                    (removeSelectedPropertiesEmitter)="removeSelectedProperties()">
-            </sp-schema-editor-header>
+    <div fxFlex="80" fxLayout="column">
+        <div fxLayout="column"
+             fxFlex="100"
+             fxLayoutAlign="start center"
+             [ngClass]="schemaErrorHints.length === 0 ? 'schema-validation schema-validation-ok' : 'schema-validation schema-validation-error'">
+            <div fxFlex="100"
+                 fxLayout="row"
+                 fxLayoutAlign="start center"
+                 class="schema-validation-text-ok"
+                 *ngIf="schemaErrorHints.length === 0">
+                <i class="material-icons">check_circle</i>&nbsp;<b>Schema ok</b>
+            </div>
+            <div fxFlex="100"
+                 fxLayout="column"
+                 fxLayoutAlign="start center"
+                 *ngIf="schemaErrorHints.length > 0">
+                <div fxFlex="100" fxLayout="row" fxLayoutAlign="center start" class="schema-validation-text-error">
+                <i class="material-icons">warning</i>&nbsp;
+                    <b>{{schemaErrorHints[0].title}}</b>
+                </div>
+                <div *ngFor="let errorMessage of schemaErrorHints">
+                    <span>{{errorMessage.content}}</span>
+                </div>
+            </div>
         </div>
+        <sp-basic-inner-panel [showTitle]="false" outerMargin="0px 0px 20px 0px">
+            <div header *ngIf="!isLoading && !isError" fxFlex="100">
+                <sp-schema-editor-header fxFlex="100"
+                                         [countSelected]="countSelected"
+                                         (addNestedPropertyEmitter)="addNestedProperty()"
+                                         (addStaticValuePropertyEmitter)="addStaticValueProperty()"
+                                         (addTimestampPropertyEmitter)="addTimestampProperty()"
+                                         (guessSchemaEmitter)="guessSchema()"
+                                         (togglePreviewEmitter)="togglePreview()"
+                                         (removeSelectedPropertiesEmitter)="removeSelectedProperties()">
+                </sp-schema-editor-header>
+            </div>
 
-        <div fxFlex="100">
+            <div fxFlex="100">
 
-            <sp-loading-message *ngIf="isLoading"></sp-loading-message>
+                <sp-loading-message *ngIf="isLoading"></sp-loading-message>
 
-            <sp-error-message
-                    [errorMessages]="errorMessages"
-                    *ngIf="isError">
-            </sp-error-message>
+                <sp-error-message
+                        [errorMessages]="errorMessages"
+                        *ngIf="isError">
+                </sp-error-message>
 
-            <div *ngIf="!isError && !isLoading"
-                 fxLayout="column"
-                 fxLayoutAlign="space-evenly stretched"
-                 class="drag-drop-tree"
-                 data-cy="sp-connect-schema-editor">
-                <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>
-                    </ng-template>
-                </tree-root>
+                <div *ngIf="!isError && !isLoading"
+                     fxLayout="column"
+                     fxLayoutAlign="space-evenly stretched"
+                     class="drag-drop-tree"
+                     data-cy="sp-connect-schema-editor">
+                    <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>
+                        </ng-template>
+                    </tree-root>
+                </div>
             </div>
-        </div>
         </sp-basic-inner-panel>
     </div>
     <div fxFlex="0 1 50%" *ngIf="isPreviewEnabled">
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.scss b/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.scss
index ff253bb87..099d29057 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.scss
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.scss
@@ -171,3 +171,27 @@ opacity:0.5;
 .add-schema button:disabled {
   color: rgba(0, 0, 0, 0.26);
 }
+
+.schema-validation {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  border: 2px solid var(--color-bg-3);
+  padding: 8px;
+  min-height: 50px;
+}
+
+.schema-validation-ok {
+  border: 2px solid #629f62;
+}
+
+.schema-validation-error {
+  border: 2px solid #963e3e;
+}
+
+.schema-validation-text-ok {
+  color: #629f62;
+}
+
+.schema-validation-text-error {
+  color: #963e3e;
+}
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.ts b/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.ts
index 9a1c89cee..6ad0b7299 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.ts
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/event-schema/event-schema.component.ts
@@ -226,7 +226,7 @@ export class EventSchemaComponent implements OnChanges {
 
     this.schemaErrorHints = [];
     if (!hasTimestamp) {
-      this.schemaErrorHints.push(new UserErrorMessage('Missing Timestamp', 'The timestamp must be a UNIX timestamp in milliseconds. Edit the timestamp event property or add a timestamp with the button on the top left.'));
+      this.schemaErrorHints.push(new UserErrorMessage('Missing Timestamp', 'The timestamp must be a UNIX timestamp in milliseconds. Edit the timestamp field or add an ingestion timestamp.'));
     }
 
     return hasTimestamp;
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.html b/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.html
index 88affbad6..7bd8abdaa 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.html
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.html
@@ -44,10 +44,6 @@
         </button>
     </div>
     <div fxLayout="row" fxLayoutAlign="end center">
-        <sp-error-hint
-                [errorMessages]="schemaErrorHints"
-                [displayMessages]="!displayMessages">
-        </sp-error-hint>
         <button color="accent"
                 mat-button
                 mat-icon-button
diff --git a/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.ts b/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.ts
index b4011383b..27db921bc 100644
--- a/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.ts
+++ b/ui/src/app/connect/components/new-adapter/schema-editor/schema-editor-header/schema-editor-header.component.ts
@@ -28,8 +28,6 @@ export class SchemaEditorHeaderComponent implements OnInit {
 
 
   @Input() countSelected: number;
-  @Input() schemaErrorHints: UserErrorMessage[];
-  @Input() displayMessages: boolean;
 
   @Output() addNestedPropertyEmitter = new EventEmitter();
   @Output() addStaticValuePropertyEmitter = new EventEmitter();