Refactoring validation mqtt topic filter; Add help hint

Vladyslav_Prykhodko
1 parent f3a5cb31
Showing 4 changed files with 79 additions and 20 deletions
ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.scss
ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts
ui-ngx/src/assets/locale/locale.constant-en_US.json
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
View file @ddf8a35
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
View file @ddf8a35
@@ -19,7 +19,6 @@
   <section formGroupName="configuration">
     <fieldset class="fields-group">
       <legend class="group-title" translate>device-profile.mqtt-device-topic-filters</legend>
-      <h6 class="mat-body" innerHTML="{{ 'device-profile.support-level-wildcards' | translate }}"></h6>
       <div fxLayoutGap="8px" fxLayout="column">
         <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
           <mat-form-field fxFlex>
@@ -30,8 +29,11 @@
             <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceTelemetryTopic').hasError('required')">
               {{ 'device-profile.telemetry-topic-filter-required' | translate}}
             </mat-error>
-            <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceTelemetryTopic').hasError('pattern')">
-              {{ 'device-profile.not-valid-pattern-topic-filter' | translate}}
+            <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceTelemetryTopic').hasError('invalidSingleTopicCharacter')">
+              {{ 'device-profile.not-valid-single-character' | translate}}
+            </mat-error>
+            <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceTelemetryTopic').hasError('invalidMultiTopicCharacter')">
+              {{ 'device-profile.not-valid-multi-character' | translate}}
             </mat-error>
           </mat-form-field>
           <mat-form-field fxFlex>
@@ -42,8 +44,11 @@
             <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcRequestTopic').hasError('required')">
               {{ 'device-profile.rpc-request-topic-filter-required' | translate}}
             </mat-error>
-            <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcRequestTopic').hasError('pattern')">
-              {{ 'device-profile.not-valid-pattern-topic-filter' | translate}}
+            <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcRequestTopic').hasError('invalidSingleTopicCharacter')">
+              {{ 'device-profile.not-valid-single-character' | translate}}
+            </mat-error>
+            <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcRequestTopic').hasError('invalidMultiTopicCharacter')">
+              {{ 'device-profile.not-valid-multi-character' | translate}}
             </mat-error>
           </mat-form-field>
         </div>
@@ -56,8 +61,11 @@
             <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceAttributesTopic').hasError('required')">
               {{ 'device-profile.attributes-topic-filter-required' | translate}}
             </mat-error>
-            <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceAttributesTopic').hasError('pattern')">
-              {{ 'device-profile.not-valid-pattern-topic-filter' | translate}}
+            <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceAttributesTopic').hasError('invalidSingleTopicCharacter')">
+              {{ 'device-profile.not-valid-single-character' | translate}}
+            </mat-error>
+            <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceAttributesTopic').hasError('invalidMultiTopicCharacter')">
+              {{ 'device-profile.not-valid-multi-character' | translate}}
             </mat-error>
           </mat-form-field>
           <mat-form-field fxFlex>
@@ -68,11 +76,17 @@
             <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcResponseTopic').hasError('required')">
               {{ 'device-profile.rpc-response-topic-filter-required' | translate}}
             </mat-error>
-            <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcResponseTopic').hasError('pattern')">
-              {{ 'device-profile.not-valid-pattern-topic-filter' | translate}}
+            <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcResponseTopic').hasError('invalidSingleTopicCharacter')">
+              {{ 'device-profile.not-valid-single-character' | translate}}
+            </mat-error>
+            <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcResponseTopic').hasError('invalidMultiTopicCharacter')">
+              {{ 'device-profile.not-valid-multi-character' | translate}}
             </mat-error>
           </mat-form-field>
         </div>
+        <div class="tb-hint" innerHTML="{{ 'device-profile.support-level-wildcards' | translate }}"></div>
+        <div class="tb-hint" innerHTML="{{ 'device-profile.single-level-wildcards-hint' | translate }}"></div>
+        <div class="tb-hint" innerHTML="{{ 'device-profile.multi-level-wildcards-hint' | translate }}"></div>
       </div>
     </fieldset>
   </section>
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.scss
View file @ddf8a35
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.scss
View file @ddf8a35
@@ -23,5 +23,9 @@
     legend {
       color: rgba(0, 0, 0, .7);
     }
+
+    .tb-hint{
+      padding: 0;
+    }
   }
 }
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts
View file @ddf8a35
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts
View file @ddf8a35
@@ -15,15 +15,24 @@
 ///
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import {
+  ControlValueAccessor,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  NG_VALUE_ACCESSOR,
+  ValidatorFn,
+  Validators
+} from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
   DeviceProfileTransportConfiguration,
-  DeviceTransportType, MqttDeviceProfileTransportConfiguration
+  DeviceTransportType,
+  MqttDeviceProfileTransportConfiguration
 } from '@shared/models/device.models';
-import { isDefinedAndNotNull } from '../../../../../core/utils';
+import { isDefinedAndNotNull } from '@core/utils';
 @Component({
   selector: 'tb-mqtt-device-profile-transport-configuration',
@@ -41,11 +50,10 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
   private requiredValue: boolean;
-  private MQTTTopicPattern = new RegExp('^((?![#+]).)*$|^(.*[^#]\/|^)#$|^(.*\/|^)\+(\/.*|$)$');
-
   get required(): boolean {
     return this.requiredValue;
   }
+
   @Input()
   set required(value: boolean) {
     this.requiredValue = coerceBooleanProperty(value);
@@ -70,10 +78,10 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
   ngOnInit() {
     this.mqttDeviceProfileTransportConfigurationFormGroup = this.fb.group({
       configuration: this.fb.group({
-        deviceAttributesTopic: [null, [Validators.required, Validators.pattern(this.MQTTTopicPattern)]],
-        deviceTelemetryTopic: [null, [Validators.required, Validators.pattern(this.MQTTTopicPattern)]],
-        deviceRpcRequestTopic: [null, [Validators.required, Validators.pattern(this.MQTTTopicPattern)]],
-        deviceRpcResponseTopic: [null, [Validators.required, Validators.pattern(this.MQTTTopicPattern)]]
+        deviceAttributesTopic: [null, [Validators.required, this.validationMQTTTopic()]],
+        deviceTelemetryTopic: [null, [Validators.required, this.validationMQTTTopic()]],
+        deviceRpcRequestTopic: [null, [Validators.required, this.validationMQTTTopic()]],
+        deviceRpcResponseTopic: [null, [Validators.required, this.validationMQTTTopic()]]
       })
     });
     this.mqttDeviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => {
@@ -104,4 +112,34 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
     }
     this.propagateChange(configuration);
   }
+
+  private validationMQTTTopic(): ValidatorFn {
+    return (c: FormControl) => {
+      const newTopic = c.value;
+      const wildcardSymbols = /[#+]/g;
+      let findSymbol = wildcardSymbols.exec(newTopic);
+      while (findSymbol) {
+        const index = findSymbol.index;
+        const currentSymbol = findSymbol[0];
+        const prevSymbol = index > 0 ? newTopic[index - 1] : null;
+        const nextSymbol = index < (newTopic.length - 1) ? newTopic[index + 1] : null;
+        if (currentSymbol === '#' && (index !== (newTopic.length - 1) || (prevSymbol !== null && prevSymbol !== '/'))) {
+          return {
+            invalidMultiTopicCharacter: {
+              valid: false
+            }
+          };
+        }
+        if (currentSymbol === '+' && ((prevSymbol !== null && prevSymbol !== '/') || (nextSymbol !== null && nextSymbol !== '/'))) {
+          return {
+            invalidSingleTopicCharacter: {
+              valid: false
+            }
+          };
+        }
+        findSymbol = wildcardSymbols.exec(newTopic);
+      }
+      return null;
+    };
+  }
 }
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
View file @ddf8a35
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
View file @ddf8a35
@@ -792,7 +792,7 @@
         "no-device-profiles-found": "No device profiles found.",
         "create-new-device-profile": "Create a new one!",
         "mqtt-device-topic-filters": "MQTT device topic filters",
-        "support-level-wildcards": "Support single <code>(+)</code> and multi <code>(#)</code> level wildcards",
+        "support-level-wildcards": "Single <code>[+]</code> and multi-level <code>[#]</code> wildcards supported.",
         "telemetry-topic-filter": "Telemetry topic filter",
         "telemetry-topic-filter-required": "Telemetry topic filter is required.",
         "rpc-request-topic-filter": "RPC request topic filter",
@@ -801,7 +801,10 @@
         "attributes-topic-filter-required": "Attributes topic filter is required.",
         "rpc-response-topic-filter": "RPC response topic filter",
         "rpc-response-topic-filter-required": "RPC response topic filter is required.",
-        "not-valid-pattern-topic-filter": "Not valid pattern topic filter"
+        "not-valid-single-character": "Invalid use of a single-level wildcard character",
+        "not-valid-multi-character": "Invalid use of a multi-level wildcard character",
+        "single-level-wildcards-hint": "<code>[+]</code> is suitable for any topic level. Ex.: <b>v1/devices/+/telemetry</b> or <b>+/devices/+/attributes</b>.",
+        "multi-level-wildcards-hint": "<code>[#]</code> can replace the topic filter itself and must be the last symbol of the topic. Ex.: <b>#</b> or <b>v1/devices/me/#</b>."
     },
     "dialog": {
         "close": "Close dialog"