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 2020/06/30 20:23:58 UTC

[incubator-streampipes] branch STREAMPIPES-145 updated (fb1c6da -> d33365c)

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

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


    from fb1c6da  Merge branch 'dev' into STREAMPIPES-145
     new ad82ba7  [STREAMPIPES-145] Add slider to FreeTextStaticPropertyRenderer
     new d33365c  [STREAMPIPES-145] Migrate text editor

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../model/client/endpoint/RdfEndpoint.java         |   4 +
 .../apache/streampipes/rest/impl/RdfEndpoint.java  |   1 +
 ui/angular.json                                    |   2 +-
 ui/package.json                                    |   4 +-
 ui/src/app/connect/connect.module.ts               |   8 +-
 .../static-free-input.component.html               |  44 +++++--
 ...ponent.css => static-free-input.component.scss} |   6 +
 .../static-free-input.component.ts                 |  99 +++++++++-------
 .../static-one-of-input.component.html             |   7 --
 .../static-property.component.css                  |  11 ++
 .../static-property.component.html                 | 126 +++++++++++----------
 .../dialog/customize/customize.component.ts        |   1 +
 ui/src/scss/main.scss                              |   2 +-
 ui/src/scss/sp/main.scss                           |   4 +
 14 files changed, 198 insertions(+), 121 deletions(-)
 rename ui/src/app/connect/static-properties/static-free-input/{static-free-input.component.css => static-free-input.component.scss} (80%)


[incubator-streampipes] 02/02: [STREAMPIPES-145] Migrate text editor

Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit d33365c5da82c37f82ea9ccadb1e52e771905660
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Tue Jun 30 22:23:40 2020 +0200

    [STREAMPIPES-145] Migrate text editor
---
 ui/angular.json                                    |   2 +-
 ui/package.json                                    |   4 +-
 ui/src/app/connect/connect.module.ts               |   6 +-
 .../static-free-input.component.html               |  17 +++-
 .../static-free-input.component.ts                 | 100 ++++++++++++---------
 .../static-property.component.html                 |   1 +
 .../dialog/customize/customize.component.ts        |   1 +
 ui/src/scss/main.scss                              |   2 +-
 ui/src/scss/sp/main.scss                           |   4 +
 9 files changed, 89 insertions(+), 48 deletions(-)

diff --git a/ui/angular.json b/ui/angular.json
index 91b94fa..0b1fd67 100644
--- a/ui/angular.json
+++ b/ui/angular.json
@@ -36,7 +36,7 @@
               "node_modules/jquery.panzoom/dist/jquery.panzoom.js",
               "node_modules/jquery-ui-dist/jquery-ui.js",
               "node_modules/jsplumb/dist/js/jsPlumb-2.1.3-min.js",
-              "node_modules/trix/dist/trix.js"
+              "node_modules/quill/dist/quill.js"
             ]
           },
           "configurations": {
diff --git a/ui/package.json b/ui/package.json
index 7aa40a5..9d78215 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -59,7 +59,6 @@
     "angular-slick-carousel": "3.1.7",
     "angular-touch": "1.7.7",
     "angular-tree-component": "8.5.6",
-    "angular-trix": "1.0.2",
     "angular-ui-bootstrap": "0.14.3",
     "angular-ui-sortable": "0.13.4",
     "angular-ui-tree": "2.9.0",
@@ -96,8 +95,10 @@
     "ngmap": "1.18.0",
     "ngx-auto-scroll": "^1.1.0",
     "ngx-color-picker": "9.0.0",
+    "ngx-quill": "12.0.1",
     "plotly.js": "1.52.2",
     "prismjs": "1.16.0",
+    "quill": "1.3.7",
     "roboto-fontface": "0.10.0",
     "rxjs": "6.3.3",
     "rxjs-compat": "6.3.3",
@@ -105,7 +106,6 @@
     "showdown": "1.9.1",
     "slick-carousel": "1.6.0",
     "systemjs": "0.21.6",
-    "trix": "0.10.1",
     "tslib": "1.11.1",
     "zone.js": "0.10.2"
   },
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 59a6140..3003ca0 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -90,6 +90,8 @@ import {ColorPickerModule} from "ngx-color-picker";
 import {PipelineElementRuntimeInfoComponent} from "./new-adapter/component/runtime-info/pipeline-element-runtime-info.component";
 import {xsService} from "../NS/XS.service";
 import {MatSliderModule} from "@angular/material/slider";
+import { QuillModule } from 'ngx-quill'
+import {MatChipsModule} from "@angular/material/chips";
 
 
 @NgModule({
@@ -103,12 +105,14 @@ import {MatSliderModule} from "@angular/material/slider";
         CustomMaterialModule,
         DragulaModule,
         MatProgressSpinnerModule,
+        MatChipsModule,
         MatInputModule,
         MatFormFieldModule,
         MatSliderModule,
         PlatformServicesModule,
         TreeModule.forRoot(),
-        ColorPickerModule
+        ColorPickerModule,
+        QuillModule.forRoot()
     ],
     exports: [
         StaticPropertyComponent,
diff --git a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html
index cfe02f7..9392dd1 100644
--- a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html
+++ b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html
@@ -16,8 +16,8 @@
   ~
   -->
 
-<div [formGroup]="parentForm" id="formWrapper" fxFlex="100" fxLayout="column">
-    <div fxFlex fxLayout="row" *ngIf="!staticProperty.valueSpecification">
+<div [formGroup]="parentForm" fxFlex="100" fxLayout="column">
+    <div fxFlex fxLayout="row" *ngIf="!staticProperty.valueSpecification && !staticProperty.multiLine">
         <mat-form-field fxFlex>
             <input formControlName="{{staticProperty.internalName}}" fxFlex
                    matInput
@@ -39,4 +39,17 @@
             </mat-slider>
         </div>
     </div>
+    <div *ngIf="!staticProperty.valueSpecification && !staticProperty.mapsTo" fxFlex="100" fxLayout="column">
+        <div fxFlex="100" fxLayout="column" *ngIf="staticProperty.placeholdersSupported">
+            <h5>Possible placeholders: </h5>
+            <div fxFlex="100" fxLayout="row" style="background:white;">
+                <mat-chip-list style="margin-bottom:10px;">
+                    <mat-chip (click)="applyPlaceholder(property.runtimeName)" color="primary" *ngFor="let property of eventSchemas[0].eventProperties">#{{property.runtimeName}}#</mat-chip>
+                </mat-chip-list>
+            </div>
+        </div>
+        <div fxFlex="100" *ngIf="staticProperty.multiLine">
+            <quill-editor #textEditor formControlName="{{staticProperty.internalName}}" [modules]="quillModules"></quill-editor>
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
index 46cf440..f861ccf 100644
--- a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
@@ -16,69 +16,87 @@
  *
  */
 
-import {Component, OnInit} from '@angular/core';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {ValidatorFn, Validators} from '@angular/forms';
 import {StaticPropertyUtilService} from '../static-property-util.service';
 import {ConfigurationInfo} from "../../model/message/ConfigurationInfo";
 import {FreeTextStaticProperty} from "../../../core-model/gen/streampipes-model";
 import {xsService} from "../../../NS/XS.service";
 import {
-    ValidateNumber,
-    ValidateString,
-    ValidateUrl
+  ValidateNumber,
+  ValidateString,
+  ValidateUrl
 } from "../input.validator";
 import {AbstractValidatedStaticPropertyRenderer} from "../base/abstract-validated-static-property";
+import {QuillEditorComponent} from "ngx-quill";
 
 
 @Component({
-    selector: 'app-static-free-input',
-    templateUrl: './static-free-input.component.html',
-    styleUrls: ['./static-free-input.component.scss']
+  selector: 'app-static-free-input',
+  templateUrl: './static-free-input.component.html',
+  styleUrls: ['./static-free-input.component.scss']
 })
 export class StaticFreeInputComponent
     extends AbstractValidatedStaticPropertyRenderer<FreeTextStaticProperty> implements OnInit {
 
 
-    constructor(public staticPropertyUtil: StaticPropertyUtilService,
-                private xsService: xsService){
-        super();
-    }
+  quillModules: any = {
+    toolbar: [['bold', 'italic', 'underline', 'strike'],
+      [{'header': 1}, {'header': 2}],
+      [{'size': ['small', false, 'large', 'huge']}],
+      [{'header': [1, 2, 3, 4, 5, 6, false]}],
+      [{ 'color': [] }, { 'background': [] }],
+    ]
+  };
 
+  @ViewChild('textEditor', {static: false})
+  quillEditorComponent: QuillEditorComponent;
 
-    ngOnInit() {
-        this.addValidator(this.staticProperty.value, this.collectValidators());
-        this.enableValidators();
-    }
+  constructor(public staticPropertyUtil: StaticPropertyUtilService,
+              private xsService: xsService) {
+    super();
+  }
 
-    collectValidators() {
-        let validators: ValidatorFn[] = [];
-        validators.push(Validators.required);
-        if (this.xsService.isNumber(this.staticProperty.requiredDatatype) ||
-            this.xsService.isNumber(this.staticProperty.requiredDomainProperty)) {
-            validators.push(ValidateNumber);
-            this.errorMessage = "The value should be a number";
-        } else if (this.staticProperty.requiredDomainProperty === this.xsService.SO_URL) {
-            validators.push(ValidateUrl);
-            this.errorMessage = "Please enter a valid URL";
-        } else if (this.staticProperty.requiredDatatype === this.xsService.XS_STRING1) {
-            validators.push(ValidateString);
-            this.errorMessage = "Please enter a valid String";
-        }
-
-        return validators;
-    }
 
-    emitUpdate() {
-        let valid = (this.staticProperty.value != undefined && this.staticProperty.value !== "");
-        this.updateEmitter.emit(new ConfigurationInfo(this.staticProperty.internalName, valid));
+  ngOnInit() {
+    this.addValidator(this.staticProperty.value, this.collectValidators());
+    this.enableValidators();
+  }
+
+  collectValidators() {
+    let validators: ValidatorFn[] = [];
+    validators.push(Validators.required);
+    if (this.xsService.isNumber(this.staticProperty.requiredDatatype) ||
+        this.xsService.isNumber(this.staticProperty.requiredDomainProperty)) {
+      validators.push(ValidateNumber);
+      this.errorMessage = "The value should be a number";
+    } else if (this.staticProperty.requiredDomainProperty === this.xsService.SO_URL) {
+      validators.push(ValidateUrl);
+      this.errorMessage = "Please enter a valid URL";
+    } else if (this.staticProperty.requiredDatatype === this.xsService.XS_STRING1) {
+      validators.push(ValidateString);
+      this.errorMessage = "Please enter a valid String";
     }
 
-    onStatusChange(status: any) {
+    return validators;
+  }
 
-    }
+  emitUpdate() {
+    let valid = (this.staticProperty.value != undefined && this.staticProperty.value !== "");
+    this.updateEmitter.emit(new ConfigurationInfo(this.staticProperty.internalName, valid));
+  }
 
-    onValueChange(value: any) {
-        this.staticProperty.value = value;
-        this.parentForm.updateValueAndValidity();
-    }
+  onStatusChange(status: any) {
+
+  }
+
+  onValueChange(value: any) {
+    this.staticProperty.value = value;
+    this.parentForm.updateValueAndValidity();
+  }
+
+  applyPlaceholder(runtimeName) {
+    let currentIndex = this.quillEditorComponent.quillEditor.selection.savedRange.index;
+    this.quillEditorComponent.quillEditor.insertText(currentIndex, "#" + runtimeName + "#", "user");
+  }
 }
\ No newline at end of file
diff --git a/ui/src/app/connect/static-properties/static-property.component.html b/ui/src/app/connect/static-properties/static-property.component.html
index 94de7b2..a1b8339 100644
--- a/ui/src/app/connect/static-properties/static-property.component.html
+++ b/ui/src/app/connect/static-properties/static-property.component.html
@@ -32,6 +32,7 @@
             <app-static-free-input *ngIf="isFreeTextStaticProperty(staticProperty)"
                                    [staticProperty]="staticProperty"
                                    [parentForm]="parentForm"
+                                   [eventSchemas]="eventSchemas"
                                    (updateEmitter)="emitUpdate($event)">
             </app-static-free-input>
 
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.ts b/ui/src/app/editor-v2/dialog/customize/customize.component.ts
index cb4276d..a587523 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.ts
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.ts
@@ -100,6 +100,7 @@ export class CustomizeComponent implements OnInit, AfterViewInit {
     this.pipelineElement.payload = this.cachedPipelineElement;
     this.pipelineElement.settings.completed = true;
     this.pipelineElement.payload.configured = true;
+    console.log(this.pipelineElement);
     this.dialogRef.close(this.pipelineElement);
   }
 
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index 78f3c63..3f495b8 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -22,7 +22,6 @@
 @import '~angular-material/angular-material.scss';
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 @import '~bootstrap/dist/css/bootstrap.css';
-@import '~trix/dist/trix.css';
 @import '~slick-carousel/slick/slick-theme.css';
 @import '~slick-carousel/slick/slick.css';
 @import '~datatables.net-dt/css/jquery.dataTables.css';
@@ -38,6 +37,7 @@
 @import "~ng-pick-datetime/assets/style/picker.min.css";
 @import '~leaflet/dist/leaflet.css';
 @import '~material-design-icons/iconfont/material-icons.css';
+@import '~quill/dist/quill.snow.css';
 
 @import '~roboto-fontface/css/roboto/roboto-fontface.css';
 
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index 4e73178..9b3b20a 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -51,6 +51,10 @@ code[class*="language-"], pre[class*="language-"] {
   white-space:pre-wrap;
 }
 
+.ql-container {
+  height: auto;
+}
+
 .CodeMirror-hints {
   z-index: 1000;
 }


[incubator-streampipes] 01/02: [STREAMPIPES-145] Add slider to FreeTextStaticPropertyRenderer

Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit ad82ba7e5057e5cd187bdb7d8c25f63c40b1a102
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Mon Jun 29 23:01:14 2020 +0200

    [STREAMPIPES-145] Add slider to FreeTextStaticPropertyRenderer
---
 .../model/client/endpoint/RdfEndpoint.java         |   4 +
 .../apache/streampipes/rest/impl/RdfEndpoint.java  |   1 +
 ui/src/app/connect/connect.module.ts               |   2 +
 .../static-free-input.component.html               |  29 +++--
 ...ponent.css => static-free-input.component.scss} |   6 +
 .../static-free-input.component.ts                 |   3 +-
 .../static-one-of-input.component.html             |   7 --
 .../static-property.component.css                  |  11 ++
 .../static-property.component.html                 | 125 +++++++++++----------
 9 files changed, 112 insertions(+), 76 deletions(-)

diff --git a/streampipes-model-client/src/main/java/org/apache/streampipes/model/client/endpoint/RdfEndpoint.java b/streampipes-model-client/src/main/java/org/apache/streampipes/model/client/endpoint/RdfEndpoint.java
index 3a26357..74c07e1 100644
--- a/streampipes-model-client/src/main/java/org/apache/streampipes/model/client/endpoint/RdfEndpoint.java
+++ b/streampipes-model-client/src/main/java/org/apache/streampipes/model/client/endpoint/RdfEndpoint.java
@@ -27,6 +27,10 @@ public class RdfEndpoint {
 
     private String endpointUrl;
 
+    public RdfEndpoint() {
+
+    }
+
     public RdfEndpoint(String endpointUrl) {
         this.endpointUrl = endpointUrl;
     }
diff --git a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/RdfEndpoint.java b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/RdfEndpoint.java
index a129036..c007477 100644
--- a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/RdfEndpoint.java
+++ b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/RdfEndpoint.java
@@ -58,6 +58,7 @@ public class RdfEndpoint extends AbstractRestInterface implements IRdfEndpoint {
   @DELETE
   @Path("/{rdfEndpointId}")
   @Produces(MediaType.APPLICATION_JSON)
+  @Consumes(MediaType.APPLICATION_JSON)
   @GsonWithIds
   @Override
   public Response removeRdfEndpoint(@PathParam("rdfEndpointId") String rdfEndpointId) {
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 6e9b9f5..59a6140 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -89,6 +89,7 @@ import {StaticColorPickerComponent} from "./static-properties/static-color-picke
 import {ColorPickerModule} from "ngx-color-picker";
 import {PipelineElementRuntimeInfoComponent} from "./new-adapter/component/runtime-info/pipeline-element-runtime-info.component";
 import {xsService} from "../NS/XS.service";
+import {MatSliderModule} from "@angular/material/slider";
 
 
 @NgModule({
@@ -104,6 +105,7 @@ import {xsService} from "../NS/XS.service";
         MatProgressSpinnerModule,
         MatInputModule,
         MatFormFieldModule,
+        MatSliderModule,
         PlatformServicesModule,
         TreeModule.forRoot(),
         ColorPickerModule
diff --git a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html
index 743d970..cfe02f7 100644
--- a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html
+++ b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html
@@ -17,15 +17,26 @@
   -->
 
 <div [formGroup]="parentForm" id="formWrapper" fxFlex="100" fxLayout="column">
-    <div fxFlex fxLayout="row">
-            <mat-form-field fxFlex>
-                <input formControlName="{{staticProperty.internalName}}" fxFlex id="{{ 'input-' + staticProperty.label.toLowerCase() }}" matInput [placeholder]="staticProperty.label"
-                    required (blur)="emitUpdate()">
-                <mat-hint>{{staticProperty.description}}</mat-hint>
+    <div fxFlex fxLayout="row" *ngIf="!staticProperty.valueSpecification">
+        <mat-form-field fxFlex>
+            <input formControlName="{{staticProperty.internalName}}" fxFlex
+                   matInput
+                   [placeholder]="staticProperty.label"
+                   required (blur)="emitUpdate()">
+            <mat-hint>{{staticProperty.description}}</mat-hint>
 
-                <mat-error *ngIf="!fieldValid">
-                    {{errorMessage}}
-                </mat-error>
-            </mat-form-field>
+            <mat-error *ngIf="!fieldValid">
+                {{errorMessage}}
+            </mat-error>
+        </mat-form-field>
+    </div>
+    <div *ngIf="staticProperty.valueSpecification">
+        <div fxLayout="column" fxFlex="100">
+            <mat-slider thumbLabel formControlName="{{staticProperty.internalName}}"
+                    [max]="staticProperty.valueSpecification.maxValue"
+                    [min]="staticProperty.valueSpecification.minValue"
+                    [step]="staticProperty.valueSpecification.step">
+            </mat-slider>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.css b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.scss
similarity index 80%
rename from ui/src/app/connect/static-properties/static-free-input/static-free-input.component.css
rename to ui/src/app/connect/static-properties/static-free-input/static-free-input.component.scss
index 565a1d7..f5740bb 100644
--- a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.css
+++ b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.scss
@@ -16,6 +16,8 @@
  *
  */
 
+@import '../../../../scss/sp/colors';
+
 #formWrapper {
     height: 60px;
 }
@@ -29,3 +31,7 @@ form {
     float: left;
 }
 
+::ng-deep.mat-accent ::ng-deep.mat-slider-track-fill, .mat-accent ::ng-deep.mat-slider-thumb, .mat-accent ::ng-deep.mat-slider-thumb-label {
+    background-color: $sp-color-accent;
+}
+
diff --git a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
index bdb63f8..46cf440 100644
--- a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
@@ -33,7 +33,7 @@ import {AbstractValidatedStaticPropertyRenderer} from "../base/abstract-validate
 @Component({
     selector: 'app-static-free-input',
     templateUrl: './static-free-input.component.html',
-    styleUrls: ['./static-free-input.component.css']
+    styleUrls: ['./static-free-input.component.scss']
 })
 export class StaticFreeInputComponent
     extends AbstractValidatedStaticPropertyRenderer<FreeTextStaticProperty> implements OnInit {
@@ -79,5 +79,6 @@ export class StaticFreeInputComponent
 
     onValueChange(value: any) {
         this.staticProperty.value = value;
+        this.parentForm.updateValueAndValidity();
     }
 }
\ No newline at end of file
diff --git a/ui/src/app/connect/static-properties/static-one-of-input/static-one-of-input.component.html b/ui/src/app/connect/static-properties/static-one-of-input/static-one-of-input.component.html
index baafe4a..336cefb 100644
--- a/ui/src/app/connect/static-properties/static-one-of-input/static-one-of-input.component.html
+++ b/ui/src/app/connect/static-properties/static-one-of-input/static-one-of-input.component.html
@@ -20,11 +20,6 @@
 <div id="formWrapper" fxFlex="100" fxLayout="column">
 
     <div *ngIf="!staticProperty.horizontalRendering" fxLayout="column">
-        <div>
-            <p>{{staticProperty.label}}: <br>
-                <mat-hint class="description">{{staticProperty.description}}</mat-hint>
-            </p>
-        </div>
         <div fxFlex fxLayout="row">
             <div fxLayout="column" style="margin-left: 10px">
                 <mat-radio-button *ngFor="let option of staticProperty.options" style="margin-top: -10px"
@@ -39,7 +34,6 @@
 
     <div *ngIf="staticProperty.horizontalRendering">
         <mat-form-field style="width: 100%">
-            <mat-label>{{staticProperty.label}}</mat-label>
             <mat-select [(value)]="selectedOption">
                 <mat-option *ngFor="let option of staticProperty.options" [value]="option.elementId"
                             (click)="select(option.elementId)">
@@ -48,7 +42,6 @@
                     </label>
                 </mat-option>
             </mat-select>
-            <mat-hint>{{staticProperty.description}}</mat-hint>
         </mat-form-field>
     </div>
 
diff --git a/ui/src/app/connect/static-properties/static-property.component.css b/ui/src/app/connect/static-properties/static-property.component.css
index fda138d..14ada49 100644
--- a/ui/src/app/connect/static-properties/static-property.component.css
+++ b/ui/src/app/connect/static-properties/static-property.component.css
@@ -24,4 +24,15 @@
   width: 100%;
   height: 100%;
   margin-right: 10px; */
+}
+
+.static-property-panel {
+  border-left:5px solid gray;
+  padding-left: 10px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+.description {
+  font-size: 10px;
 }
\ No newline at end of file
diff --git a/ui/src/app/connect/static-properties/static-property.component.html b/ui/src/app/connect/static-properties/static-property.component.html
index 76e3524..94de7b2 100644
--- a/ui/src/app/connect/static-properties/static-property.component.html
+++ b/ui/src/app/connect/static-properties/static-property.component.html
@@ -17,76 +17,83 @@
   -->
 
 <div fxFlex="100" fxLayout="column">
-    <div fxFlex="100">{{staticProperty.label}}</div>
+    <div fxFlex="100" fxLayout="row" class="static-property-panel">
+        <div fxFlex="40" fxLayout="column">
+            <b>{{staticProperty.label}}</b>
+            <mat-hint class="description">{{staticProperty.description}}</mat-hint>
+        </div>
+        <div fxFlex="60">
+            <app-static-secret-input *ngIf="isSecretStaticProperty(staticProperty)"
+                                     [staticProperty]="staticProperty"
+                                     [parentForm]="parentForm"
+                                     (updateEmitter)="emitUpdate($event)">
+            </app-static-secret-input>
 
-    <app-static-secret-input *ngIf="isSecretStaticProperty(staticProperty)"
-                             [staticProperty]="staticProperty"
-                             [parentForm]="parentForm"
-                             (updateEmitter)="emitUpdate($event)">
-    </app-static-secret-input>
+            <app-static-free-input *ngIf="isFreeTextStaticProperty(staticProperty)"
+                                   [staticProperty]="staticProperty"
+                                   [parentForm]="parentForm"
+                                   (updateEmitter)="emitUpdate($event)">
+            </app-static-free-input>
 
-    <app-static-free-input *ngIf="isFreeTextStaticProperty(staticProperty)"
-                           [staticProperty]="staticProperty"
-                           [parentForm]="parentForm"
-                           (updateEmitter)="emitUpdate($event)">
-    </app-static-free-input>
+            <app-static-file-input *ngIf="isFileStaticProperty(staticProperty)"
+                                   (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty"
+                                   [adapterId]="adapterId">
+            </app-static-file-input>
 
-    <app-static-file-input *ngIf="isFileStaticProperty(staticProperty)"
-                           (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty"
-                           [adapterId]="adapterId">
-    </app-static-file-input>
+            <app-static-color-picker *ngIf="isColorPickerStaticProperty(staticProperty)"
+                                     [staticProperty]="staticProperty"
+                                     [parentForm]="parentForm"
+                                     (updateEmitter)="emitUpdate($event)">
+            </app-static-color-picker>
 
-    <app-static-color-picker *ngIf="isColorPickerStaticProperty(staticProperty)"
-                             [staticProperty]="staticProperty"
-                             [parentForm]="parentForm"
-                             (updateEmitter)="emitUpdate($event)">
-    </app-static-color-picker>
+            <app-static-runtime-resolvable-any-input *ngIf="isRuntimeResolvableAnyStaticProperty(staticProperty)"
+                                                     (inputEmitter)="valueChange($event)"
+                                                     [staticProperty]="staticProperty"></app-static-runtime-resolvable-any-input>
 
-    <app-static-runtime-resolvable-any-input *ngIf="isRuntimeResolvableAnyStaticProperty(staticProperty)"
-                                             (inputEmitter)="valueChange($event)"
-                                             [staticProperty]="staticProperty"></app-static-runtime-resolvable-any-input>
+            <app-static-runtime-resolvable-oneof-input *ngIf="isRuntimeResolvableOneOfStaticProperty(staticProperty)"
+                                                       (inputEmitter)="valueChange($event)"
+                                                       [completedStaticProperty]="completedStaticProperty"
+                                                       [staticProperty]="staticProperty"
+                                                       [staticProperties]="staticProperties"
+                                                       [adapterId]="adapterId"></app-static-runtime-resolvable-oneof-input>
 
-    <app-static-runtime-resolvable-oneof-input *ngIf="isRuntimeResolvableOneOfStaticProperty(staticProperty)"
-                                               (inputEmitter)="valueChange($event)"
-                                               [completedStaticProperty]="completedStaticProperty"
-                                               [staticProperty]="staticProperty" [staticProperties]="staticProperties"
-                                               [adapterId]="adapterId"></app-static-runtime-resolvable-oneof-input>
+            <app-static-any-input
+                    *ngIf="isAnyStaticProperty(staticProperty) && !isRuntimeResolvableAnyStaticProperty(staticProperty)"
+                    (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty"></app-static-any-input>
 
-    <app-static-any-input
-            *ngIf="isAnyStaticProperty(staticProperty) && !isRuntimeResolvableAnyStaticProperty(staticProperty)"
-            (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty"></app-static-any-input>
+            <app-static-one-of-input
+                    *ngIf="isOneOfStaticProperty(staticProperty) && !isRuntimeResolvableOneOfStaticProperty(staticProperty)"
+                    (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
+            </app-static-one-of-input>
 
-    <app-static-one-of-input
-            *ngIf="isOneOfStaticProperty(staticProperty) && !isRuntimeResolvableOneOfStaticProperty(staticProperty)"
-            (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
-    </app-static-one-of-input>
+            <app-static-mapping-unary *ngIf="isMappingPropertyUnary(staticProperty)"
+                                      [eventSchemas]="eventSchemas" (inputEmitter)="valueChange($event)"
+                                      [staticProperty]="staticProperty" [parentForm]="parentForm">
+            </app-static-mapping-unary>
 
-    <app-static-mapping-unary *ngIf="isMappingPropertyUnary(staticProperty)"
-                              [eventSchemas]="eventSchemas" (inputEmitter)="valueChange($event)"
-                              [staticProperty]="staticProperty" [parentForm]="parentForm">
-    </app-static-mapping-unary>
+            <app-static-mapping-nary *ngIf="isMappingNaryProperty(staticProperty)" [eventSchemas]="eventSchemas"
+                                     (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
+            </app-static-mapping-nary>
 
-    <app-static-mapping-nary *ngIf="isMappingNaryProperty(staticProperty)" [eventSchemas]="eventSchemas"
-                             (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
-    </app-static-mapping-nary>
+            <app-static-alternatives *ngIf="isAlternativesStaticProperty(staticProperty)"
+                                     [adapterId]="adapterId" [eventSchemas]="eventSchemas"
+                                     [staticProperty]="staticProperty" class="test fullWidth"
+                                     (inputEmitter)="valueChange($event)">
+            </app-static-alternatives>
 
-    <app-static-alternatives *ngIf="isAlternativesStaticProperty(staticProperty)"
-                             [adapterId]="adapterId" [eventSchemas]="eventSchemas"
-                             [staticProperty]="staticProperty" class="test fullWidth"
-                             (inputEmitter)="valueChange($event)">
-    </app-static-alternatives>
+            <app-static-group *ngIf="isGroupStaticProperty(staticProperty)"
+                              [adapterId]="adapterId" [eventSchemas]="eventSchemas"
+                              [staticProperty]="staticProperty" class="test fullWidth"
+                              (inputEmitter)="valueChange($event)">
+            </app-static-group>
 
-    <app-static-group *ngIf="isGroupStaticProperty(staticProperty)"
-                      [adapterId]="adapterId" [eventSchemas]="eventSchemas"
-                      [staticProperty]="staticProperty" class="test fullWidth"
-                      (inputEmitter)="valueChange($event)">
-    </app-static-group>
-
-    <app-static-collection *ngIf="isCollectionStaticProperty(staticProperty)"
-                           [adapterId]="adapterId" [eventSchemas]="eventSchemas"
-                           [staticProperty]="staticProperty" class="test fullWidth"
-                           (inputEmitter)="valueChange($event)" (updateEmitter)="emitUpdate($event)">
-    </app-static-collection>
+            <app-static-collection *ngIf="isCollectionStaticProperty(staticProperty)"
+                                   [adapterId]="adapterId" [eventSchemas]="eventSchemas"
+                                   [staticProperty]="staticProperty" class="test fullWidth"
+                                   (inputEmitter)="valueChange($event)" (updateEmitter)="emitUpdate($event)">
+            </app-static-collection>
+        </div>
+    </div>
+    <mat-divider></mat-divider>
 </div>
-<mat-divider></mat-divider>