Changes for the enrichment rule nodes

ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html

@@ -17,28 +17,21 @@
 -->
 <div class="tb-relation-filters" [formGroup]="relationFiltersFormGroup">
   <div class="container">
-    <div class="header" [fxShow]="relationFiltersFormArray().length">
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <span class="cell" style="width: 200px; min-width: 200px;" translate>relation.type</span>
-        <span class="cell" fxFlex translate>entity.entity-types</span>
-        <span class="cell" style="width: 40px; min-width: 40px;">&nbsp;</span>
-      </div>
-    </div>
     <div class="body" [fxShow]="relationFiltersFormArray().length">
       <div class="row" fxFlex fxLayout="row"
            fxLayoutAlign="start center" formArrayName="relationFilters"
            *ngFor="let relationFilterControl of relationFiltersFormArray().controls; let $index = index">
-        <div class="mat-elevation-z1" fxFlex fxLayout="row" fxLayoutAlign="start center" style="padding: 8px 0;">
-          <tb-relation-type-autocomplete
-            class="cell" style="width: 200px; min-width: 200px;"
-            subscriptSizing="dynamic"
-            [formControl]="relationFilterControl.get('relationType')">
-          </tb-relation-type-autocomplete>
-          <tb-entity-type-list class="cell" fxFlex
-            subscriptSizing="dynamic"
-            [allowedEntityTypes]="allowedEntityTypes"
-            [formControl]="relationFilterControl.get('entityTypes')">
-          </tb-entity-type-list>
+          <div class="input-block"  fxFlex fxLayout="row">
+            <tb-relation-type-autocomplete
+              label="relation.type"
+              class="cell" style="width: 200px; min-width: 200px;"
+              [formControl]="relationFilterControl.get('relationType')">
+            </tb-relation-type-autocomplete>
+            <tb-entity-type-list class="cell" fxFlex
+              [allowedEntityTypes]="allowedEntityTypes"
+              [formControl]="relationFilterControl.get('entityTypes')">
+            </tb-entity-type-list>
+          </div>
           <button mat-icon-button color="primary"
                   type="button"
                   (click)="removeFilter($index)"
@@ -47,7 +40,6 @@
                   matTooltipPosition="above">
             <mat-icon>close</mat-icon>
           </button>
-        </div>
       </div>
     </div>
   </div>
@@ -56,14 +48,13 @@
               class="tb-prompt" translate>relation.any-relation</span>
   </div>
   <div>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="isLoading$ | async"
             (click)="addFilter()"
             type="button"
             matTooltip="{{ 'relation.add-relation-filter' | translate }}"
             matTooltipPosition="above">
-      <mat-icon>add</mat-icon>
-      {{ 'action.add' | translate }}
+      {{ 'relation.add-relation-filter' | translate }}
     </button>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss

@@ -22,26 +22,40 @@
       width: 100%;
     }
 
-    .header {
-      padding: 0 5px 5px;
-
-      .cell {
-        padding-right: 5px;
-        padding-left: 5px;
-        font-size: 12px;
-        font-weight: 700;
-        color: rgba(0, 0, 0, .54);
-        white-space: nowrap;
-      }
+    .map-label {
+      font-weight: 400;
+      font-size: 12px;
     }
 
+
+    //.header {
+    //  padding: 0 5px 5px;
+    //
+    //  .cell {
+    //    padding-right: 5px;
+    //    padding-left: 5px;
+    //    font-size: 12px;
+    //    font-weight: 700;
+    //    color: rgba(0, 0, 0, .54);
+    //    white-space: nowrap;
+    //  }
+    //}
+
     .body {
-      padding: 0 5px 20px;
+      //padding: 0 5px 20px;
       max-height: 300px;
       overflow: auto;
 
       .row {
         padding-top: 5px;
+
+        .input-block {
+          border: 1px solid #E0E0E0;
+          border-radius: 6px;
+          padding: 24px 24px 2px 24px;
+          align-items: center;
+          margin: 0px 8px 15px 0px;
+        }
       }
 
       .cell {

ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html

@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="entitySubtypeListFormGroup" class="mat-block tb-chip-list">
+<mat-form-field [formGroup]="entitySubtypeListFormGroup" class="mat-block">
+  <mat-label *ngIf="label">{{ label | translate }}</mat-label>
   <mat-chip-grid #chipList formControlName="entitySubtypeList">
     <mat-chip-row
       *ngFor="let entitySubtype of entitySubtypeList"
@@ -37,6 +38,14 @@
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            (matChipInputTokenEnd)="chipAdd($event)">
   </mat-chip-grid>
+  <button *ngIf="entitySubtypeListFormGroup.get('entitySubtypeList').value?.length > 1"
+          type="button"
+          style="margin-right: 3px"
+          matTooltip="{{'entity.clear-selected-profiles' | translate}}"
+          matSuffix mat-icon-button
+          (click)="clearChipGrid()">
+    <mat-icon color="primary" class="material-icons">close</mat-icon>
+  </button>
   <mat-autocomplete #entitySubtypeAutocomplete="matAutocomplete"
                     class="tb-autocomplete"
                     (optionSelected)="selected($event)"

ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts

@@ -54,6 +54,9 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
   get required(): boolean {
     return this.requiredValue;
   }
+
+  @Input() label: string;
+
   @Input()
   set required(value: boolean) {
     const newVal = coerceBooleanProperty(value);
@@ -223,6 +226,12 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
     this.clear('');
   }
 
+  clearChipGrid() {
+    this.entitySubtypeList = [];
+    this.modelValue = null;
+    this.entitySubtypeListFormGroup.get('entitySubtypeList').patchValue([], {emitEvent: true});
+  }
+
   remove(entitySubtype: string) {
     const index = this.entitySubtypeList.indexOf(entitySubtype);
     if (index >= 0) {
@@ -249,9 +258,7 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
     this.searchText = searchText;
     return this.getEntitySubtypes().pipe(
       map(subTypes => {
-        let result = subTypes.filter( subType => {
-          return searchText ? subType.toUpperCase().startsWith(searchText.toUpperCase()) : true;
-        });
+        let result = subTypes.filter( subType => searchText ? subType.toUpperCase().startsWith(searchText.toUpperCase()) : true);
         if (!result.length) {
           result = [searchText];
         }

ui-ngx/src/app/shared/components/entity/entity-type-list.component.html

@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="entityTypeListFormGroup" class="mat-block tb-chip-list" subscriptSizing="{{ subscriptSizing }}">
+<mat-form-field [formGroup]="entityTypeListFormGroup" class="mat-block" floatLabel="always" subscriptSizing="{{ subscriptSizing }}">
+  <mat-label>{{ 'entity.entity-types' | translate }}</mat-label>
   <mat-chip-grid #chipList formControlName="entityTypeList">
     <mat-chip-row
       *ngFor="let entityType of entityTypeList"

ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="relationTypeFormGroup" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
-  <mat-label *ngIf="required">{{ 'relation.relation-type' | translate }}</mat-label>
+<mat-form-field [formGroup]="relationTypeFormGroup" floatLabel="always" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
+  <mat-label *ngIf="label" required="required">{{ label | translate }}</mat-label>
   <input matInput type="text"
          #relationTypeInput
          formControlName="relationType"
@@ -25,7 +25,9 @@
          [required]="required"
          [matAutocomplete]="relationTypeAutocomplete">
   <button *ngIf="relationTypeFormGroup.get('relationType').value && !disabled"
-          type="button"
+          type="button" color="primary"
+          style="margin-right: 3px;"
+          matTooltip="{{ 'relation.clear-relation-type' | translate}}"
           matSuffix mat-icon-button aria-label="Clear"
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>

ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.ts

@@ -46,6 +46,9 @@ export class RelationTypeAutocompleteComponent implements ControlValueAccessor,
   get required(): boolean {
     return this.requiredValue;
   }
+
+  @Input() label: string;
+
   @Input()
   set required(value: boolean) {
     this.requiredValue = coerceBooleanProperty(value);

ui-ngx/src/assets/help/en_US/rulenode/customer_attributes_node_fn.md

@@ -0,0 +1,24 @@
+#### Name of popup
+
+<div class="divider"></div>
+<br/>
+
+*function Filter(msg, metadata, msgType): boolean
+
+<a href="https://github.com/thingsboard/thingsboard/blob/ea039008b148453dfa166cf92bc40b26e487e660/ui-ngx/src/app/shared/models/rule-node.models.ts#L338" target="_blank">TBEL</a>function defines a boolean expression based on the incoming Message and Metadata.
+
+**Parameters:**
+
+<ul>
+  <li><b>msg:</b> <code>{[key: string]: any}</code> - is a Message payload key/value object.
+  </li>
+  <li><b>metadata:</b> <code>{[key: string]: string}</code> - is a Message metadata key/value map, where both keys and values are strings.
+  </li>
+  <li><b>msgType:</b> <code>string</code> - is a string containing Message type. See MessageType enum for common used values.
+  </li>
+</ul>
+
+Enable 'debug mode' for your rule node to see the messages that arrive in near real-time. See Debugging for more information.
+
+**Parameters:**
+Must return a boolean value. If true - routes Message to subsequent rule nodes that are related via True link, otherwise sends Message to rule nodes related via False link. Uses 'Failure' link in case of any failures to evaluate the expression.

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -1922,6 +1922,7 @@
         "device-name-starts-with": "Devices whose names start with '{{prefix}}'",
         "type-device-profile": "Device profile",
         "type-device-profiles": "Device profiles",
+        "clear-selected-profiles": "Clear selected profiles",
         "list-of-device-profiles": "{ count, plural, =1 {One device profile} other {List of # device profiles} }",
         "device-profile-name-starts-with": "Device profiles whose names start with '{{prefix}}'",
         "type-asset-profile": "Asset profile",
@@ -3107,6 +3108,7 @@
     "relation": {
         "relations": "Relations",
         "direction": "Direction",
+        "clear-relation-type": "Clear relation type",
         "search-direction": {
             "FROM": "From",
             "TO": "To"