From 45fc8feddc273940a9241ce839e02330a950cb32 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 4 Sep 2020 15:15:09 +0300 Subject: [PATCH] Add mqtt device topic filters UI --- ...ile-transport-configuration.component.html | 51 +++++++++++++++++-- ...ile-transport-configuration.component.scss | 27 ++++++++++ ...ofile-transport-configuration.component.ts | 14 +++-- ui-ngx/src/app/shared/models/device.models.ts | 11 +++- .../assets/locale/locale.constant-en_US.json | 12 ++++- 5 files changed, 105 insertions(+), 10 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.scss diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html index 5dbb46c8bf..863b4960d7 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html @@ -16,9 +16,50 @@ -->
- - +
+
+ device-profile.mqtt-device-topic-filters +
device-profile.support-level-wildcards
+
+ + device-profile.telemetry-topic-filter + + + {{ 'device-profile.telemetry-topic-filter-required' | translate}} + + + + device-profile.rpc-request-topic-filter + + + {{ 'device-profile.rpc-request-topic-filter-required' | translate}} + + +
+
+ + device-profile.attributes-topic-filter + + + {{ 'device-profile.attributes-topic-filter-required' | translate}} + + + + device-profile.rpc-response-topic-filter + + + {{ 'device-profile.rpc-response-topic-filter-required' | translate}} + + +
+
+
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.scss b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.scss new file mode 100644 index 0000000000..4c75cb9472 --- /dev/null +++ b/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); + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts index 1cb70ce6da..1b5061b44c 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts +++ b/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() { diff --git a/ui-ngx/src/app/shared/models/device.models.ts b/ui-ngx/src/app/shared/models/device.models.ts index 90781726d7..34ff3df061 100644 --- a/ui-ngx/src/app/shared/models/device.models.ts +++ b/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: diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 8dbfb985b3..3c5550ee8f 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/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 (+) and multi (#) 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"