Add mqtt device topic filters UI

ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html

@@ -16,9 +16,50 @@
 
 -->
 <form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;">
-  <tb-json-object-edit
-    [required]="required"
-    label="{{ 'device-profile.transport-type-mqtt' | translate }}"
-    formControlName="configuration">
-  </tb-json-object-edit>
+  <section formGroupName="configuration">
+    <fieldset class="fields-group">
+      <legend class="group-title" translate>device-profile.mqtt-device-topic-filters</legend>
+      <h6 class="mat-body" translate>device-profile.support-level-wildcards</h6>
+      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
+        <mat-form-field fxFlex>
+          <mat-label translate>device-profile.telemetry-topic-filter</mat-label>
+          <input matInput required
+                 formControlName="deviceTelemetryTopic"
+                 type="text">
+          <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceTelemetryTopic').hasError('required')">
+            {{ 'device-profile.telemetry-topic-filter-required' | translate}}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field fxFlex>
+          <mat-label translate>device-profile.rpc-request-topic-filter</mat-label>
+          <input matInput required
+                 formControlName="deviceRpcRequestTopic"
+                 type="text">
+          <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcRequestTopic').hasError('required')">
+            {{ 'device-profile.rpc-request-topic-filter-required' | translate}}
+          </mat-error>
+        </mat-form-field>
+      </div>
+      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
+        <mat-form-field fxFlex>
+          <mat-label translate>device-profile.attributes-topic-filter</mat-label>
+          <input matInput required
+                 formControlName="deviceAttributesTopic"
+                 type="text">
+          <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceAttributesTopic').hasError('required')">
+            {{ 'device-profile.attributes-topic-filter-required' | translate}}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field fxFlex>
+          <mat-label translate>device-profile.rpc-response-topic-filter</mat-label>
+          <input matInput required
+                 formControlName="deviceRpcResponseTopic"
+                 type="text">
+          <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcResponseTopic').hasError('required')">
+            {{ 'device-profile.rpc-response-topic-filter-required' | translate}}
+          </mat-error>
+        </mat-form-field>
+      </div>
+    </fieldset>
+  </section>
 </form>

ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.scss

@@ -0,0 +1,27 @@
+/**
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host{
+  .fields-group {
+    padding: 8px;
+    margin: 10px 0;
+    border: 1px groove rgba(0, 0, 0, .25);
+    border-radius: 4px;
+
+    legend {
+      color: rgba(0, 0, 0, .7);
+    }
+  }
+}

ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts

@@ -23,11 +23,12 @@ import {
   DeviceProfileTransportConfiguration,
   DeviceTransportType, MqttDeviceProfileTransportConfiguration
 } from '@shared/models/device.models';
+import { isDefinedAndNotNull } from '../../../../../core/utils';
 
 @Component({
   selector: 'tb-mqtt-device-profile-transport-configuration',
   templateUrl: './mqtt-device-profile-transport-configuration.component.html',
-  styleUrls: [],
+  styleUrls: ['./mqtt-device-profile-transport-configuration.component.scss'],
   providers: [{
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MqttDeviceProfileTransportConfigurationComponent),
@@ -65,7 +66,12 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
 
   ngOnInit() {
     this.mqttDeviceProfileTransportConfigurationFormGroup = this.fb.group({
-      configuration: [null, Validators.required]
+      configuration: this.fb.group({
+        deviceAttributesTopic: [null, Validators.required],
+        deviceTelemetryTopic: [null, Validators.required],
+        deviceRpcRequestTopic: [null, Validators.required],
+        deviceRpcResponseTopic: [null, Validators.required]
+      })
     });
     this.mqttDeviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => {
       this.updateModel();
@@ -82,7 +88,9 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
   }
 
   writeValue(value: MqttDeviceProfileTransportConfiguration | null): void {
-    this.mqttDeviceProfileTransportConfigurationFormGroup.patchValue({configuration: value}, {emitEvent: false});
+    if (isDefinedAndNotNull(value)) {
+      this.mqttDeviceProfileTransportConfigurationFormGroup.patchValue({configuration: value}, {emitEvent: false});
+    }
   }
 
   private updateModel() {

ui-ngx/src/app/shared/models/device.models.ts

@@ -106,6 +106,10 @@ export interface DefaultDeviceProfileTransportConfiguration {
 }
 
 export interface MqttDeviceProfileTransportConfiguration {
+  deviceTelemetryTopic?: string;
+  deviceAttributesTopic?: string;
+  deviceRpcRequestTopic?: string;
+  deviceRpcResponseTopic?: string;
   [key: string]: any;
 }
 
@@ -156,7 +160,12 @@ export function createDeviceProfileTransportConfiguration(type: DeviceTransportT
         transportConfiguration = {...defaultTransportConfiguration, type: DeviceTransportType.DEFAULT};
         break;
       case DeviceTransportType.MQTT:
-        const mqttTransportConfiguration: MqttDeviceProfileTransportConfiguration = {};
+        const mqttTransportConfiguration: MqttDeviceProfileTransportConfiguration = {
+          deviceTelemetryTopic: 'v1/devices/me/telemetry',
+          deviceAttributesTopic: 'v1/devices/me/attributes',
+          deviceRpcRequestTopic: 'v1/devices/me/rpc/request/',
+          deviceRpcResponseTopic: 'v1/devices/me/rpc/response/'
+        };
         transportConfiguration = {...mqttTransportConfiguration, type: DeviceTransportType.MQTT};
         break;
       case DeviceTransportType.LWM2M:

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

@@ -789,7 +789,17 @@
         "set-default-device-profile-title": "Are you sure you want to make the device profile '{{deviceProfileName}}' default?",
         "set-default-device-profile-text": "After the confirmation the device profile will be marked as default and will be used for new devices with no profile specified.",
         "no-device-profiles-found": "No device profiles found.",
-        "create-new-device-profile": "Create a new one!"
+        "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",
+        "telemetry-topic-filter": "Telemetry topic filter",
+        "telemetry-topic-filter-required": "Telemetry topic filter is required.",
+        "rpc-request-topic-filter": "RPC request topic filter",
+        "rpc-request-topic-filter-required": "RPC request topic filter is required.",
+        "attributes-topic-filter": "Attributes topic filter",
+        "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."
     },
     "dialog": {
         "close": "Close dialog"