added chips input for SparkPlug attr metric names

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

@@ -21,6 +21,24 @@
   </mat-checkbox>
   <div *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').value"
        class="tb-hint" innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-hint' | translate }}"></div>
+  <mat-form-field floatLabel="always" class="mat-block" style="padding-top: 8px;"
+                  *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').value">
+    <mat-label translate>device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names</mat-label>
+    <mat-chip-list #attrMetricNamesChipList formControlName="sparkPlugAttributesMetricNames">
+      <mat-chip
+        *ngFor="let name of mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlugAttributesMetricNames').value;"
+        (removed)="removeAttributeMetricName(name)">
+        {{name}}
+        <mat-icon matChipRemove>close</mat-icon>
+      </mat-chip>
+      <input matInput type="text" placeholder="{{'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate}}"
+             [matChipInputFor]="attrMetricNamesChipList"
+             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+             matChipInputAddOnBlur
+             (matChipInputTokenEnd)="addAttributeMetricName($event)">
+    </mat-chip-list>
+    <mat-hint innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint' | translate }}"></mat-hint>
+  </mat-form-field>
 </form>
 <form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').value">
   <fieldset class="fields-group">

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

@@ -41,6 +41,8 @@ import {
 import { isDefinedAndNotNull } from '@core/utils';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
+import { MatChipInputEvent } from '@angular/material/chips';
 
 @Component({
   selector: 'tb-mqtt-device-profile-transport-configuration',
@@ -77,6 +79,8 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
 
   private propagateChange = (v: any) => { };
 
+  separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
+
   constructor(private store: Store<AppState>,
               private fb: FormBuilder) {
   }
@@ -93,6 +97,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
         deviceAttributesTopic: [null, [Validators.required, this.validationMQTTTopic()]],
         deviceTelemetryTopic: [null, [Validators.required, this.validationMQTTTopic()]],
         sparkPlug: [false],
+        sparkPlugAttributesMetricNames: [null],
         sendAckOnValidationException: [false, Validators.required],
         transportPayloadTypeConfiguration: this.fb.group({
           transportPayloadType: [TransportPayloadType.JSON, Validators.required],
@@ -124,6 +129,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
       if (value) {
         this.mqttDeviceProfileTransportConfigurationFormGroup.disable({emitEvent: false});
         this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').enable({emitEvent: false});
+        this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlugAttributesMetricNames').enable({emitEvent: false});
       } else {
         this.mqttDeviceProfileTransportConfigurationFormGroup.enable({emitEvent: false});
       }
@@ -208,6 +214,34 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
     }
   }
 
+  public removeAttributeMetricName(name: string): void {
+    const names: string[] = this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlugAttributesMetricNames').value;
+    const index = names.indexOf(name);
+    if (index >= 0) {
+      names.splice(index, 1);
+      this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlugAttributesMetricNames').setValue(names);
+    }
+  }
+
+  public addAttributeMetricName(event: MatChipInputEvent): void {
+    const input = event.input;
+    let value = event.value;
+    if ((value || '').trim()) {
+      value = value.trim();
+      let keys: string[] = this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlugAttributesMetricNames').value;
+      if (!keys || keys.indexOf(value) === -1) {
+        if (!keys) {
+          keys = [];
+        }
+        keys.push(value);
+        this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlugAttributesMetricNames').setValue(keys, {emitEvent: true});
+      }
+    }
+    if (input) {
+      input.value = '';
+    }
+  }
+
   private validationMQTTTopic(): ValidatorFn {
     return (c: FormControl) => {
       const newTopic = c.value;

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

@@ -1355,6 +1355,8 @@
         "mqtt-device-topic-filters-unique": "MQTT device topic filters need to be unique.",
         "mqtt-device-topic-filters-spark-plug": "MQTT device topic filters SparkPlug.",
         "mqtt-device-topic-filters-spark-plug-hint": "Default - telemetry. Example: namespace/group_id/message_type/edge_node_id/[device_id].",
+        "mqtt-device-topic-filters-spark-plug-attribute-metric-names": "SparkPlug attributes metric names",
+        "mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint": "Names of SparkPlug metrics that will be stored as device attributes. All other metrics will be stored as device telemetry",
         "mqtt-device-payload-type": "MQTT device payload",
         "mqtt-device-payload-type-json": "JSON",
         "mqtt-device-payload-type-proto": "Protobuf",