Merge pull request #4726 from vvlladd28/improvement/device-profile/lwm2m/server-security-ota-update

UI: Refactoring lwm2m device profile: security server config and ota update strategy

application/src/main/java/org/thingsboard/server/controller/Lwm2mController.java

@@ -17,7 +17,6 @@ package org.thingsboard.server.controller;
 
 import com.fasterxml.jackson.databind.ObjectMapper;
 import lombok.extern.slf4j.Slf4j;
-import org.eclipse.leshan.core.SecurityMode;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestBody;
@@ -45,14 +44,11 @@ import java.util.Map;
 public class Lwm2mController extends BaseController {
 
     @PreAuthorize("hasAnyAuthority('TENANT_ADMIN', 'CUSTOMER_USER')")
-    @RequestMapping(value = "/lwm2m/deviceProfile/bootstrap/{securityMode}/{bootstrapServerIs}", method = RequestMethod.GET)
+    @RequestMapping(value = "/lwm2m/deviceProfile/bootstrap/{isBootstrapServer}", method = RequestMethod.GET)
     @ResponseBody
-    public ServerSecurityConfig getLwm2mBootstrapSecurityInfo(@PathVariable("securityMode") String strSecurityMode,
+    public ServerSecurityConfig getLwm2mBootstrapSecurityInfo(@PathVariable("isBootstrapServer") boolean bootstrapServer) throws ThingsboardException {
-                                                              @PathVariable("bootstrapServerIs") boolean bootstrapServer) throws ThingsboardException {
-        checkNotNull(strSecurityMode);
         try {
-            SecurityMode securityMode = SecurityMode.valueOf(strSecurityMode);
+            return lwM2MServerSecurityInfoRepository.getServerSecurityInfo(bootstrapServer);
-            return lwM2MServerSecurityInfoRepository.getServerSecurityInfo(securityMode, bootstrapServer);
         } catch (Exception e) {
             throw handleException(e);
         }

application/src/main/java/org/thingsboard/server/service/lwm2m/LwM2MServerSecurityInfoRepository.java

@@ -18,7 +18,6 @@ package org.thingsboard.server.service.lwm2m;
 
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
-import org.eclipse.leshan.core.SecurityMode;
 import org.eclipse.leshan.core.util.Hex;
 import org.springframework.boot.autoconfigure.condition.ConditionalOnExpression;
 import org.springframework.stereotype.Service;
@@ -50,40 +49,20 @@ public class LwM2MServerSecurityInfoRepository {
     private final LwM2MTransportServerConfig serverConfig;
     private final LwM2MTransportBootstrapConfig bootstrapConfig;
 
-    /**
+    public ServerSecurityConfig getServerSecurityInfo(boolean bootstrapServer) {
-     * @param securityMode
+        ServerSecurityConfig result = getServerSecurityConfig(bootstrapServer ? bootstrapConfig : serverConfig);
-     * @param bootstrapServer
-     * @return ServerSecurityConfig more value is default: Important - port, host, publicKey
-     */
-    public ServerSecurityConfig getServerSecurityInfo(SecurityMode securityMode, boolean bootstrapServer) {
-        ServerSecurityConfig result = getServerSecurityConfig(bootstrapServer ? bootstrapConfig : serverConfig, securityMode);
         result.setBootstrapServerIs(bootstrapServer);
         return result;
     }
 
-    private ServerSecurityConfig getServerSecurityConfig(LwM2MSecureServerConfig serverConfig, SecurityMode securityMode) {
+    private ServerSecurityConfig getServerSecurityConfig(LwM2MSecureServerConfig serverConfig) {
         ServerSecurityConfig bsServ = new ServerSecurityConfig();
         bsServ.setServerId(serverConfig.getId());
-        switch (securityMode) {
+        bsServ.setHost(serverConfig.getHost());
-            case NO_SEC:
+        bsServ.setPort(serverConfig.getPort());
-                bsServ.setHost(serverConfig.getHost());
+        bsServ.setSecurityHost(serverConfig.getSecureHost());
-                bsServ.setPort(serverConfig.getPort());
+        bsServ.setSecurityPort(serverConfig.getSecurePort());
-                bsServ.setServerPublicKey("");
+        bsServ.setServerPublicKey(getPublicKey(serverConfig.getCertificateAlias(), this.serverConfig.getPublicX(), this.serverConfig.getPublicY()));
-                break;
-            case PSK:
-                bsServ.setHost(serverConfig.getSecureHost());
-                bsServ.setPort(serverConfig.getSecurePort());
-                bsServ.setServerPublicKey("");
-                break;
-            case RPK:
-            case X509:
-                bsServ.setHost(serverConfig.getSecureHost());
-                bsServ.setPort(serverConfig.getSecurePort());
-                bsServ.setServerPublicKey(getPublicKey(serverConfig.getCertificateAlias(), this.serverConfig.getPublicX(), this.serverConfig.getPublicY()));
-                break;
-            default:
-                break;
-        }
         return bsServ;
     }
 

common/data/src/main/java/org/thingsboard/server/common/data/lwm2m/ServerSecurityConfig.java

@@ -20,7 +20,9 @@ import lombok.Data;
 @Data
 public class ServerSecurityConfig {
     String host;
+    String securityHost;
     Integer port;
+    Integer securityPort;
     String serverPublicKey;
     boolean bootstrapServerIs = true;
     Integer clientHoldOffTime = 1;

ui-ngx/src/app/core/http/device-profile.service.ts

@@ -18,20 +18,22 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { PageLink } from '@shared/models/page/page-link';
 import { defaultHttpOptionsFromConfig, RequestConfig } from './http-utils';
-import { Observable, throwError } from 'rxjs';
+import { Observable, of, throwError } from 'rxjs';
 import { PageData } from '@shared/models/page/page-data';
 import { DeviceProfile, DeviceProfileInfo, DeviceTransportType } from '@shared/models/device.models';
 import { isDefinedAndNotNull, isEmptyStr } from '@core/utils';
 import { ObjectLwM2M, ServerSecurityConfig } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models';
 import { SortOrder } from '@shared/models/page/sort-order';
 import { OtaPackageService } from '@core/http/ota-package.service';
-import { mergeMap } from 'rxjs/operators';
+import { mergeMap, tap } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DeviceProfileService {
 
+  private lwm2mBootstrapSecurityInfoInMemoryCache = new Map<boolean, ServerSecurityConfig>();
+
   constructor(
     private http: HttpClient,
     private otaPackageService: OtaPackageService
@@ -58,12 +60,18 @@ export class DeviceProfileService {
     return this.http.get<Array<ObjectLwM2M>>(url, defaultHttpOptionsFromConfig(config));
   }
 
-  public getLwm2mBootstrapSecurityInfo(securityMode: string, bootstrapServerIs: boolean,
+  public getLwm2mBootstrapSecurityInfo(isBootstrapServer: boolean, config?: RequestConfig): Observable<ServerSecurityConfig> {
-                                       config?: RequestConfig): Observable<ServerSecurityConfig> {
+    const securityConfig = this.lwm2mBootstrapSecurityInfoInMemoryCache.get(isBootstrapServer);
-    return this.http.get<ServerSecurityConfig>(
+    if (securityConfig) {
-      `/api/lwm2m/deviceProfile/bootstrap/${securityMode}/${bootstrapServerIs}`,
+      return of(securityConfig);
-      defaultHttpOptionsFromConfig(config)
+    } else {
-    );
+      return this.http.get<ServerSecurityConfig>(
+        `/api/lwm2m/deviceProfile/bootstrap/${isBootstrapServer}`,
+        defaultHttpOptionsFromConfig(config)
+      ).pipe(
+        tap(serverConfig => this.lwm2mBootstrapSecurityInfoInMemoryCache.set(isBootstrapServer, serverConfig))
+      );
+    }
   }
 
   public getLwm2mObjectsPage(pageLink: PageLink, config?: RequestConfig): Observable<Array<ObjectLwM2M>> {

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html

@@ -28,60 +28,45 @@
     </mat-form-field>
     <mat-form-field fxFlex>
       <mat-label>{{ 'device-profile.lwm2m.server-host' | translate }}</mat-label>
-      <input matInput type="text" formControlName="host" required
+      <input matInput type="text" formControlName="host" required>
-             matTooltip="{{'device-profile.lwm2m.server-host-tip' | translate}}"
-             matTooltipPosition="above">
       <mat-error *ngIf="serverFormGroup.get('host').hasError('required')">
-        {{ 'device-profile.lwm2m.server-host' | translate }}
+        {{ 'device-profile.lwm2m.server-host-required' | translate }}
-        <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
     <mat-form-field fxFlex>
       <mat-label>{{ 'device-profile.lwm2m.server-port' | translate }}</mat-label>
-      <input matInput type="number" formControlName="port" required
+      <input matInput type="number" formControlName="port" required min="0">
-             matTooltip="{{'device-profile.lwm2m.server-port-tip' | translate}}"
-             matTooltipPosition="above">
       <mat-error *ngIf="serverFormGroup.get('port').hasError('required')">
-        {{ 'device-profile.lwm2m.server-port' | translate }}
+        {{ 'device-profile.lwm2m.server-port-required' | translate }}
-        <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
+  </div>
+  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
     <mat-form-field fxFlex>
       <mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
-      <input matInput type="number" formControlName="serverId" required
+      <input matInput type="number" formControlName="serverId" required min="0">
-             matTooltip="{{'device-profile.lwm2m.short-id-tip' | translate}}"
-             matTooltipPosition="above">
       <mat-error *ngIf="serverFormGroup.get('serverId').hasError('required')">
-        {{ 'device-profile.lwm2m.short-id' | translate }}
+        {{ 'device-profile.lwm2m.short-id-required' | translate }}
-        <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-  </div>
-  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
     <mat-form-field fxFlex>
       <mat-label>{{ 'device-profile.lwm2m.client-hold-off-time' | translate }}</mat-label>
-      <input matInput type="number" formControlName="clientHoldOffTime" required
+      <input matInput type="number" formControlName="clientHoldOffTime" required min="0"
-             matTooltip="{{'device-profile.lwm2m.client-hold-off-time-tip' | translate}}"
+             matTooltip="{{'device-profile.lwm2m.client-hold-off-time-tooltip' | translate}}"
              matTooltipPosition="above">
       <mat-error *ngIf="serverFormGroup.get('clientHoldOffTime').hasError('required')">
-        {{ 'device-profile.lwm2m.client-hold-off-time' | translate }}
+        {{ 'device-profile.lwm2m.client-hold-off-time-required' | translate }}
-        <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
     <mat-form-field fxFlex>
-      <mat-label>{{ 'device-profile.lwm2m.bootstrap-server-account-timeout' | translate }}</mat-label>
+      <mat-label>{{ 'device-profile.lwm2m.account-after-timeout' | translate }}</mat-label>
-      <input matInput type="number" formControlName="bootstrapServerAccountTimeout" required
+      <input matInput type="number" formControlName="bootstrapServerAccountTimeout" required min="0"
-             matTooltip="{{'device-profile.lwm2m.bootstrap-server-account-timeout-tip' | translate}}"
+             matTooltip="{{'device-profile.lwm2m.account-after-timeout-tooltip' | translate}}"
              matTooltipPosition="above">
       <mat-error *ngIf="serverFormGroup.get('bootstrapServerAccountTimeout').hasError('required')">
-        {{ 'device-profile.lwm2m.bootstrap-server-account-timeout' | translate }}
+        {{ 'device-profile.lwm2m.account-after-timeout-required' | translate }}
-        <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-    <mat-checkbox fxFlex formControlName="bootstrapServerIs" color="primary">
-      {{ 'device-profile.lwm2m.bootstrap-server' | translate }}
-    </mat-checkbox>
-    <div fxFlex></div>
   </div>
   <div *ngIf="serverFormGroup.get('securityMode').value === securityConfigLwM2MType.RPK ||
     serverFormGroup.get('securityMode').value === securityConfigLwM2MType.X509">
@@ -89,32 +74,22 @@
       <mat-label>{{ 'device-profile.lwm2m.server-public-key' | translate }}</mat-label>
       <textarea matInput
                 #serverPublicKey
-                maxlength="{{lenMaxServerPublicKey}}"
+                maxlength="{{maxLengthPublicKey}}"
                 cdkTextareaAutosize
                 cdkAutosizeMinRows="1"
                 cols="1" required
-                style="overflow:hidden"
                 formControlName="serverPublicKey"
-                matTooltip="{{'device-profile.lwm2m.server-public-key-tip' | translate}}"
       ></textarea>
-      <mat-hint align="end">{{serverPublicKey.value?.length || 0}}/{{lenMaxServerPublicKey}}</mat-hint>
+      <mat-hint align="end">{{serverPublicKey.value?.length || 0}}/{{maxLengthPublicKey}}</mat-hint>
       <mat-error *ngIf="serverFormGroup.get('serverPublicKey').hasError('required')">
-        {{ 'device-profile.lwm2m.server-public-key' | translate }}
+        {{ 'device-profile.lwm2m.server-public-key-required' | translate }}
-        <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
       </mat-error>
-      <mat-error *ngIf="serverFormGroup.get('serverPublicKey').hasError('pattern') &&
+      <mat-error *ngIf="serverFormGroup.get('serverPublicKey').hasError('pattern')">
-                          (serverFormGroup.get('securityMode').value === securityConfigLwM2MType.RPK ||
+        {{ 'device-profile.lwm2m.server-public-key-pattern' | translate }}
-                          serverFormGroup.get('securityMode').value === securityConfigLwM2MType.X509)">
-        {{ 'device-profile.lwm2m.server-public-key' | translate }}
-        <strong>{{ 'device-profile.lwm2m.pattern_hex_dec' | translate: {
-          count: 0} }}</strong>
       </mat-error>
-      <mat-error *ngIf="(serverFormGroup.get('serverPublicKey').hasError('maxlength') ||
+      <mat-error *ngIf="serverFormGroup.get('serverPublicKey').hasError('maxlength') ||
-                serverFormGroup.get('serverPublicKey').hasError('minlength')) &&
+                serverFormGroup.get('serverPublicKey').hasError('minlength')">
-                          serverFormGroup.get('securityMode').value === securityConfigLwM2MType.RPK">
+        {{ 'device-profile.lwm2m.server-public-key-length' | translate: {count: maxLengthPublicKey } }}
-        {{ 'device-profile.lwm2m.server-public-key' | translate }}
-        <strong>{{ 'device-profile.lwm2m.pattern_hex_dec' | translate: {
-          count: lenMaxServerPublicKey } }}</strong>
       </mat-error>
     </mat-form-field>
   </div>

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.ts

@@ -14,26 +14,24 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Inject, Input } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import {
-  DEFAULT_CLIENT_HOLD_OFF_TIME,
-  DEFAULT_ID_SERVER,
   DEFAULT_PORT_BOOTSTRAP_NO_SEC,
   DEFAULT_PORT_SERVER_NO_SEC,
   KEY_REGEXP_HEX_DEC,
   LEN_MAX_PUBLIC_KEY_RPK,
   LEN_MAX_PUBLIC_KEY_X509,
-  SECURITY_CONFIG_MODE,
+  securityConfigMode,
-  SECURITY_CONFIG_MODE_NAMES,
+  securityConfigModeNames,
   ServerSecurityConfig
 } from './lwm2m-profile-config.models';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { WINDOW } from '@core/services/window.service';
-import { pairwise, startWith } from 'rxjs/operators';
 import { DeviceProfileService } from '@core/http/device-profile.service';
+import { of, Subject } from 'rxjs';
+import { map, mergeMap, takeUntil, tap } from 'rxjs/operators';
+import { Observable } from 'rxjs/internal/Observable';
+import { deepClone } from '@core/utils';
 
-// @dynamic
 @Component({
   selector: 'tb-profile-lwm2m-device-config-server',
   templateUrl: './lwm2m-device-config-server.component.html',
@@ -46,127 +44,78 @@ import { DeviceProfileService } from '@core/http/device-profile.service';
   ]
 })
 
-export class Lwm2mDeviceConfigServerComponent implements ControlValueAccessor {
+export class Lwm2mDeviceConfigServerComponent implements OnInit, ControlValueAccessor, OnDestroy {
 
-  private requiredValue: boolean;
   private disabled = false;
+  private destroy$ = new Subject();
+
+  private securityDefaultConfig: ServerSecurityConfig;
 
-  valuePrev = null;
   serverFormGroup: FormGroup;
-  securityConfigLwM2MType = SECURITY_CONFIG_MODE;
+  securityConfigLwM2MType = securityConfigMode;
-  securityConfigLwM2MTypes = Object.keys(SECURITY_CONFIG_MODE);
+  securityConfigLwM2MTypes = Object.keys(securityConfigMode);
-  credentialTypeLwM2MNamesMap = SECURITY_CONFIG_MODE_NAMES;
+  credentialTypeLwM2MNamesMap = securityConfigModeNames;
-  lenMinServerPublicKey = 0;
+  maxLengthPublicKey = LEN_MAX_PUBLIC_KEY_RPK;
-  lenMaxServerPublicKey = LEN_MAX_PUBLIC_KEY_RPK;
   currentSecurityMode = null;
 
   @Input()
-  bootstrapServerIs: boolean;
+  isBootstrapServer = false;
 
-  get required(): boolean {
+  private propagateChange = (v: any) => { };
-    return this.requiredValue;
-  }
 
-  @Input()
+  constructor(public fb: FormBuilder,
-  set required(value: boolean) {
+              private deviceProfileService: DeviceProfileService) {
-    this.requiredValue = coerceBooleanProperty(value);
   }
 
-  constructor(public fb: FormBuilder,
+  ngOnInit(): void {
-              private deviceProfileService: DeviceProfileService,
+    this.serverFormGroup = this.fb.group({
-              @Inject(WINDOW) private window: Window) {
+      host: ['', Validators.required],
-    this.serverFormGroup = this.initServerGroup();
+      port: [this.isBootstrapServer ? DEFAULT_PORT_BOOTSTRAP_NO_SEC : DEFAULT_PORT_SERVER_NO_SEC, [Validators.required, Validators.min(0)]],
+      securityMode: [securityConfigMode.NO_SEC],
+      serverPublicKey: ['', Validators.required],
+      clientHoldOffTime: ['', [Validators.required, Validators.min(0)]],
+      serverId: ['', [Validators.required, Validators.min(0)]],
+      bootstrapServerAccountTimeout: ['', [Validators.required, Validators.min(0)]],
+    });
     this.serverFormGroup.get('securityMode').valueChanges.pipe(
-      startWith(null),
+      tap(securityMode => this.updateValidate(securityMode)),
-      pairwise()
+      mergeMap(securityMode => this.getLwm2mBootstrapSecurityInfo(securityMode)),
-    ).subscribe(([previousValue, currentValue]) => {
+      takeUntil(this.destroy$)
-      if (previousValue === null || previousValue !== currentValue) {
+    ).subscribe(serverSecurityConfig => {
-        this.getLwm2mBootstrapSecurityInfo(currentValue);
+      this.serverFormGroup.patchValue(serverSecurityConfig, {emitEvent: false});
-        this.updateValidate(currentValue);
-        this.serverFormGroup.updateValueAndValidity();
-      }
-
     });
-    this.serverFormGroup.valueChanges.subscribe(value => {
+    this.serverFormGroup.valueChanges.pipe(
-      if (this.disabled !== undefined && !this.disabled) {
+      takeUntil(this.destroy$)
-        this.propagateChangeState(value);
+    ).subscribe(value => {
-      }
+      this.propagateChangeState(value);
     });
   }
 
-  private updateValueFields = (serverData: ServerSecurityConfig): void => {
+  ngOnDestroy(): void {
-    serverData.bootstrapServerIs = this.bootstrapServerIs;
+    this.destroy$.next();
-    this.serverFormGroup.patchValue(serverData, {emitEvent: false});
+    this.destroy$.complete();
-    this.serverFormGroup.get('bootstrapServerIs').disable();
-    const securityMode = this.serverFormGroup.get('securityMode').value as SECURITY_CONFIG_MODE;
-    this.updateValidate(securityMode);
   }
 
-  private updateValidate = (securityMode: SECURITY_CONFIG_MODE): void => {
+  writeValue(serverData: ServerSecurityConfig): void {
-    switch (securityMode) {
+    if (serverData) {
-      case SECURITY_CONFIG_MODE.NO_SEC:
+      this.serverFormGroup.patchValue(serverData, {emitEvent: false});
-        this.setValidatorsNoSecPsk();
+      this.updateValidate(serverData.securityMode);
-        break;
-      case SECURITY_CONFIG_MODE.PSK:
-        this.setValidatorsNoSecPsk();
-        break;
-      case SECURITY_CONFIG_MODE.RPK:
-        this.lenMinServerPublicKey = LEN_MAX_PUBLIC_KEY_RPK;
-        this.lenMaxServerPublicKey = LEN_MAX_PUBLIC_KEY_RPK;
-        this.setValidatorsRpkX509();
-        break;
-      case SECURITY_CONFIG_MODE.X509:
-        this.lenMinServerPublicKey = 0;
-        this.lenMaxServerPublicKey = LEN_MAX_PUBLIC_KEY_X509;
-        this.setValidatorsRpkX509();
-        break;
     }
-    this.serverFormGroup.updateValueAndValidity();
+    if (!this.securityDefaultConfig){
-  }
+      this.getLwm2mBootstrapSecurityInfo().subscribe(value => {
-
+        if (!serverData) {
-  private setValidatorsNoSecPsk = (): void => {
+          this.serverFormGroup.patchValue(value);
-    this.serverFormGroup.get('serverPublicKey').setValidators([]);
+        }
-  }
+      });
-
-  private setValidatorsRpkX509 = (): void => {
-    this.serverFormGroup.get('serverPublicKey').setValidators([Validators.required,
-      Validators.pattern(KEY_REGEXP_HEX_DEC),
-      Validators.minLength(this.lenMinServerPublicKey),
-      Validators.maxLength(this.lenMaxServerPublicKey)]);
-  }
-
-  writeValue(value: ServerSecurityConfig): void {
-    if (value) {
-      this.updateValueFields(value);
     }
   }
 
-  private propagateChange = (v: any) => {};
-
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
   }
 
-  private propagateChangeState = (value: any): void => {
-    if (value !== undefined) {
-      if (this.valuePrev === null) {
-        this.valuePrev = 'init';
-      } else if (this.valuePrev === 'init') {
-        this.valuePrev = value;
-      } else if (JSON.stringify(value) !== JSON.stringify(this.valuePrev)) {
-        this.valuePrev = value;
-        if (this.serverFormGroup.valid) {
-          this.propagateChange(value);
-        } else {
-          this.propagateChange(null);
-        }
-      }
-    }
-  }
-
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
-    this.valuePrev = null;
     if (isDisabled) {
       this.serverFormGroup.disable({emitEvent: false});
     } else {
@@ -177,33 +126,76 @@ export class Lwm2mDeviceConfigServerComponent implements ControlValueAccessor {
   registerOnTouched(fn: any): void {
   }
 
-  private initServerGroup = (): FormGroup => {
+  private updateValidate(securityMode: securityConfigMode): void {
-    const port = this.bootstrapServerIs ? DEFAULT_PORT_BOOTSTRAP_NO_SEC : DEFAULT_PORT_SERVER_NO_SEC;
+    switch (securityMode) {
-    return this.fb.group({
+      case securityConfigMode.NO_SEC:
-      host: [this.window.location.hostname, this.required ? Validators.required : ''],
+      case securityConfigMode.PSK:
-      port: [port, this.required ? Validators.required : ''],
+        this.clearValidators();
-      bootstrapServerIs: [this.bootstrapServerIs, ''],
+        break;
-      securityMode: [this.fb.control(SECURITY_CONFIG_MODE.NO_SEC)],
+      case securityConfigMode.RPK:
-      serverPublicKey: ['', this.required ? Validators.required : ''],
+        this.maxLengthPublicKey = LEN_MAX_PUBLIC_KEY_RPK;
-      clientHoldOffTime: [DEFAULT_CLIENT_HOLD_OFF_TIME, this.required ? Validators.required : ''],
+        this.setValidators(LEN_MAX_PUBLIC_KEY_RPK);
-      serverId: [DEFAULT_ID_SERVER, this.required ? Validators.required : ''],
+        break;
-      bootstrapServerAccountTimeout: ['', this.required ? Validators.required : ''],
+      case securityConfigMode.X509:
-    });
+        this.maxLengthPublicKey = LEN_MAX_PUBLIC_KEY_X509;
+        this.setValidators(0);
+        break;
+    }
+    this.serverFormGroup.get('serverPublicKey').updateValueAndValidity({emitEvent: false});
+  }
+
+  private clearValidators(): void {
+    this.serverFormGroup.get('serverPublicKey').clearValidators();
+  }
+
+  private setValidators(minLengthKey: number): void {
+    this.serverFormGroup.get('serverPublicKey').setValidators([
+      Validators.required,
+      Validators.pattern(KEY_REGEXP_HEX_DEC),
+      Validators.minLength(minLengthKey),
+      Validators.maxLength(this.maxLengthPublicKey)
+    ]);
   }
 
-  private getLwm2mBootstrapSecurityInfo = (mode: string): void => {
+  private propagateChangeState = (value: ServerSecurityConfig): void => {
-    this.deviceProfileService.getLwm2mBootstrapSecurityInfo(mode, this.serverFormGroup.get('bootstrapServerIs').value).subscribe(
+    if (value !== undefined) {
-      (serverSecurityConfig) => {
+      if (this.serverFormGroup.valid) {
-        this.serverFormGroup.patchValue({
+        this.propagateChange(value);
-            host: serverSecurityConfig.host,
+      } else {
-            port: serverSecurityConfig.port,
+        this.propagateChange(null);
-            serverPublicKey: serverSecurityConfig.serverPublicKey,
-            clientHoldOffTime: serverSecurityConfig.clientHoldOffTime,
-            serverId: serverSecurityConfig.serverId,
-            bootstrapServerAccountTimeout: serverSecurityConfig.bootstrapServerAccountTimeout
-          },
-          {emitEvent: true});
       }
+    }
+  }
+
+  private getLwm2mBootstrapSecurityInfo(securityMode = securityConfigMode.NO_SEC): Observable<ServerSecurityConfig> {
+    if (this.securityDefaultConfig) {
+      return of(this.processingBootstrapSecurityInfo(this.securityDefaultConfig, securityMode));
+    }
+    return this.deviceProfileService.getLwm2mBootstrapSecurityInfo(this.isBootstrapServer).pipe(
+      map(securityInfo => {
+        this.securityDefaultConfig = securityInfo;
+        return this.processingBootstrapSecurityInfo(securityInfo, securityMode);
+      })
     );
   }
+
+  private processingBootstrapSecurityInfo(securityConfig: ServerSecurityConfig, securityMode: securityConfigMode): ServerSecurityConfig {
+    const config = deepClone(securityConfig);
+    switch (securityMode) {
+      case securityConfigMode.PSK:
+        config.port = config.securityPort;
+        config.host = config.securityHost;
+        config.serverPublicKey = '';
+        break;
+      case securityConfigMode.RPK:
+      case securityConfigMode.X509:
+        config.port = config.securityPort;
+        config.host = config.securityHost;
+        break;
+      case securityConfigMode.NO_SEC:
+        config.serverPublicKey = '';
+        break;
+    }
+    return config;
+  }
 }

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

@@ -15,231 +15,172 @@
     limitations under the License.
 
 -->
-<section style="padding-bottom: 16px; margin: 0" mat-dialog-content>
+<section style="padding-bottom: 16px; margin: 0">
   <mat-tab-group dynamicHeight>
     <mat-tab label="{{ 'device-profile.lwm2m.model-tab' | translate }}">
       <ng-template matTabContent>
         <section [formGroup]="lwm2mDeviceProfileFormGroup">
-          <div class="mat-padding" style="padding-top: 0">
+          <tb-profile-lwm2m-object-list
-            <tb-profile-lwm2m-object-list
+            (addList)="addObjectsList($event)"
-              (addList)="addObjectsList($event)"
+            (removeList)="removeObjectsList($event)"
-              (removeList)="removeObjectsList($event)"
+            [required]="required"
-              [required]="required"
+            formControlName="objectIds">
-              formControlName="objectIds">
+          </tb-profile-lwm2m-object-list>
-            </tb-profile-lwm2m-object-list>
+          <tb-profile-lwm2m-observe-attr-telemetry
-          </div>
+            [required]="required"
-          <div class="mat-padding">
+            formControlName="observeAttrTelemetry">
-            <tb-profile-lwm2m-observe-attr-telemetry
+          </tb-profile-lwm2m-observe-attr-telemetry>
-              [required]="required"
-              formControlName="observeAttrTelemetry">
-            </tb-profile-lwm2m-observe-attr-telemetry>
-          </div>
-        </section>
-      </ng-template>
-    </mat-tab>
-    <mat-tab label="{{ 'device-profile.lwm2m.bootstrap-tab' | translate }}">
-      <ng-template matTabContent>
-        <section [formGroup]="lwm2mDeviceProfileFormGroup">
-          <div class="mat-padding">
-            <mat-accordion multi="true" class="mat-body-1">
-              <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                  <mat-panel-title>
-                    <div class="tb-panel-title">{{ 'device-profile.lwm2m.servers' | translate | uppercase }}</div>
-                  </mat-panel-title>
-                </mat-expansion-panel-header>
-                <ng-template matExpansionPanelContent>
-                  <div fxLayout="column">
-                    <div fxLayout="row" fxLayoutGap="8px">
-                      <mat-form-field fxFlex>
-                        <mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
-                        <input matInput type="number" formControlName="shortId" required>
-                        <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('shortId').hasError('required')">
-                          {{ 'device-profile.lwm2m.short-id' | translate }}
-                          <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
-                        </mat-error>
-                      </mat-form-field>
-                      <mat-form-field fxFlex>
-                        <mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
-                        <input matInput type="number" formControlName="lifetime" required>
-                        <mat-error
-                          *ngIf="lwm2mDeviceProfileFormGroup.get('lifetime').hasError('required')">
-                          {{ 'device-profile.lwm2m.lifetime' | translate }}
-                          <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
-                        </mat-error>
-                      </mat-form-field>
-                      <mat-form-field fxFlex>
-                        <mat-label>{{ 'device-profile.lwm2m.default-min-period' | translate }}</mat-label>
-                        <input matInput type="number" formControlName="defaultMinPeriod" required>
-                        <mat-error
-                          *ngIf="lwm2mDeviceProfileFormGroup.get('defaultMinPeriod').hasError('required')">
-                          {{ 'device-profile.lwm2m.default-min-period' | translate }}
-                          <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
-                        </mat-error>
-                      </mat-form-field>
-                    </div>
-                    <div fxLayout="row" fxLayoutGap="8px">
-                      <mat-form-field class="mat-block" fxFlex="100">
-                        <mat-label>{{ 'device-profile.lwm2m.binding' | translate }}</mat-label>
-                        <mat-select formControlName="binding">
-                          <mat-option *ngFor="let bindingMode of  bindingModeTypes"
-                                      [value]="bindingMode">
-                            {{ bindingModeTypeNamesMap.get(bindingModeType[bindingMode]) }}
-                          </mat-option>
-                        </mat-select>
-                      </mat-form-field>
-                    </div>
-                    <div>
-                      <mat-checkbox formControlName="notifIfDisabled" color="primary">
-                        {{ 'device-profile.lwm2m.notif-if-disabled' | translate }}
-                      </mat-checkbox>
-                    </div>
-                  </div>
-                </ng-template>
-              </mat-expansion-panel>
-            </mat-accordion>
-            <mat-accordion multi="true" class="mat-body-1">
-              <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                  <mat-panel-title>
-                    <div
-                      class="tb-panel-title">{{ 'device-profile.lwm2m.bootstrap-server' | translate | uppercase }}</div>
-                  </mat-panel-title>
-                </mat-expansion-panel-header>
-                <ng-template matExpansionPanelContent>
-                  <div class="mat-padding">
-                    <tb-profile-lwm2m-device-config-server
-                      [required]="required"
-                      formControlName="bootstrapServer"
-                      [bootstrapServerIs]=true>
-                    </tb-profile-lwm2m-device-config-server>
-                  </div>
-                </ng-template>
-              </mat-expansion-panel>
-            </mat-accordion>
-            <mat-accordion multi="true" class="mat-body-1">
-              <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                  <mat-panel-title>
-                    <div class="tb-panel-title">{{ 'device-profile.lwm2m.lwm2m-server' | translate | uppercase }}</div>
-                  </mat-panel-title>
-                </mat-expansion-panel-header>
-                <ng-template matExpansionPanelContent>
-                  <div class="mat-padding">
-                    <tb-profile-lwm2m-device-config-server
-                      [required]="required"
-                      formControlName="lwm2mServer"
-                      [bootstrapServerIs]=false>
-                    </tb-profile-lwm2m-device-config-server>
-                  </div>
-                </ng-template>
-              </mat-expansion-panel>
-            </mat-accordion>
-          </div>
         </section>
       </ng-template>
     </mat-tab>
-    <mat-tab label="{{ 'device-profile.lwm2m.others-tab' | translate }}">
+    <mat-tab label="{{ 'device-profile.lwm2m.servers' | translate }}">
       <ng-template matTabContent>
-        <section [formGroup]="lwm2mDeviceProfileFormGroup">
+        <section [formGroup]="lwm2mDeviceProfileFormGroup" style="padding: 4px 2px">
-          <mat-accordion multi="true" class="mat-body-1">
+          <mat-accordion multi="true">
-            <div *ngIf="false">
-              <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                  <mat-panel-title>
-                    <div
-                      class="tb-panel-title">{{ 'device-profile.lwm2m.client-strategy' | translate | uppercase }}</div>
-                  </mat-panel-title>
-                </mat-expansion-panel-header>
-                <ng-template matExpansionPanelContent>
-                  <div fxLayout="column">
-                    <mat-form-field class="mat-block">
-                      <mat-label>{{ 'device-profile.lwm2m.client-strategy-label' | translate }}</mat-label>
-                      <mat-select formControlName="clientStrategy"
-                                  matTooltip="{{ 'device-profile.lwm2m.client-strategy-tip' | translate:
-                                  { count: +lwm2mDeviceProfileFormGroup.get('clientStrategy').value } }}"
-                                  matTooltipPosition="above">
-                        <mat-option value=1>{{ 'device-profile.lwm2m.client-strategy-connect' | translate:
-                          {count: 1} }}</mat-option>
-                        <mat-option value=2>{{ 'device-profile.lwm2m.client-strategy-connect' | translate:
-                          {count: 2} }}</mat-option>
-                      </mat-select>
-                    </mat-form-field>
-                  </div>
-                </ng-template>
-              </mat-expansion-panel>
-            </div>
             <mat-expansion-panel>
               <mat-expansion-panel-header>
-                <mat-panel-title>
+                <mat-panel-title>{{ 'device-profile.lwm2m.servers' | translate }}</mat-panel-title>
-                  <div
-                    class="tb-panel-title">{{ 'device-profile.lwm2m.ota-update-strategy' | translate | uppercase }}</div>
-                </mat-panel-title>
               </mat-expansion-panel-header>
               <ng-template matExpansionPanelContent>
-                <div fxLayout="column">
+                <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
-                  <mat-form-field class="mat-block" fxFlex>
+                  <mat-form-field fxFlex>
-                    <mat-label>{{ 'device-profile.lwm2m.fw-update-strategy-label' | translate }}</mat-label>
+                    <mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
-                    <mat-select formControlName="fwUpdateStrategy" (selectionChange)="changeFwUpdateStrategy($event)">
+                    <input matInput type="number" formControlName="shortId" required>
-                      <mat-option value=1>{{ 'device-profile.lwm2m.fw-update-strategy' | translate:
+                    <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('shortId').hasError('required')">
-                        {count: 1} }}</mat-option>
+                      {{ 'device-profile.lwm2m.short-id' | translate }}
-                      <mat-option value=2>{{ 'device-profile.lwm2m.fw-update-strategy' | translate:
+                      <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
-                        {count: 2} }}</mat-option>
+                    </mat-error>
-                      <mat-option value=3>{{ 'device-profile.lwm2m.fw-update-strategy' | translate:
-                        {count: 3} }}</mat-option>
-                    </mat-select>
                   </mat-form-field>
-                  <mat-form-field class="mat-block" fxFlex>
+                  <mat-form-field fxFlex>
-                    <mat-label>{{ 'device-profile.lwm2m.sw-update-strategy-label' | translate }}</mat-label>
+                    <mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
-                    <mat-select formControlName="swUpdateStrategy" (selectionChange)="changeSwUpdateStrategy($event)">
+                    <input matInput type="number" formControlName="lifetime" required>
-                      <mat-option value=1>{{ 'device-profile.lwm2m.sw-update-strategy' | translate:
+                    <mat-error
-                        {count: 1} }}</mat-option>
+                      *ngIf="lwm2mDeviceProfileFormGroup.get('lifetime').hasError('required')">
-                      <mat-option value=2>{{ 'device-profile.lwm2m.sw-update-strategy' | translate:
+                      {{ 'device-profile.lwm2m.lifetime' | translate }}
-                        {count: 2} }}</mat-option>
+                      <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
-                    </mat-select>
+                    </mat-error>
+                  </mat-form-field>
+                  <mat-form-field fxFlex>
+                    <mat-label>{{ 'device-profile.lwm2m.default-min-period' | translate }}</mat-label>
+                    <input matInput type="number" formControlName="defaultMinPeriod" required>
+                    <mat-error
+                      *ngIf="lwm2mDeviceProfileFormGroup.get('defaultMinPeriod').hasError('required')">
+                      {{ 'device-profile.lwm2m.default-min-period' | translate }}
+                      <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
+                    </mat-error>
                   </mat-form-field>
                 </div>
+                <mat-form-field class="mat-block">
+                  <mat-label>{{ 'device-profile.lwm2m.binding' | translate }}</mat-label>
+                  <mat-select formControlName="binding">
+                    <mat-option *ngFor="let bindingMode of  bindingModeTypes"
+                                [value]="bindingMode">
+                      {{ bindingModeTypeNamesMap.get(bindingModeType[bindingMode]) }}
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+                <mat-checkbox formControlName="notifIfDisabled" color="primary">
+                  {{ 'device-profile.lwm2m.notif-if-disabled' | translate }}
+                </mat-checkbox>
               </ng-template>
             </mat-expansion-panel>
-            <mat-expansion-panel *ngIf="isFwUpdateStrategy || isSwUpdateStrategy">
+            <mat-expansion-panel>
               <mat-expansion-panel-header>
-                <mat-panel-title>
+                <mat-panel-title>{{ 'device-profile.lwm2m.bootstrap-server' | translate }}</mat-panel-title>
-                  <div
-                    class="tb-panel-title">{{ 'device-profile.lwm2m.ota-update-recourse' | translate | uppercase }}</div>
-                </mat-panel-title>
               </mat-expansion-panel-header>
               <ng-template matExpansionPanelContent>
-                <div fxLayout="column">
+                <tb-profile-lwm2m-device-config-server
-                  <div *ngIf="isFwUpdateStrategy">
+                  [required]="required"
-                    <mat-form-field class="mat-block" fxFlex>
+                  formControlName="bootstrapServer"
-                      <mat-label>{{ 'device-profile.lwm2m.fw-update-recourse' | translate }}</mat-label>
+                  [isBootstrapServer]="true">
-                      <input matInput formControlName="fwUpdateRecourse" required>
+                </tb-profile-lwm2m-device-config-server>
-                      <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('fwUpdateRecourse').hasError('required')">
+              </ng-template>
-                        {{ 'device-profile.lwm2m.fw-update-recourse' | translate }}
+            </mat-expansion-panel>
-                        <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
+            <mat-expansion-panel>
-                      </mat-error>
+              <mat-expansion-panel-header>
-                    </mat-form-field>
+                <mat-panel-title>{{ 'device-profile.lwm2m.lwm2m-server' | translate }}</mat-panel-title>
-                  </div>
+              </mat-expansion-panel-header>
-                  <div *ngIf="isSwUpdateStrategy">
+              <ng-template matExpansionPanelContent>
-                    <mat-form-field class="mat-block" fxFlex>
+                <tb-profile-lwm2m-device-config-server
-                      <mat-label>{{ 'device-profile.lwm2m.sw-update-recourse' | translate }}</mat-label>
+                  [required]="required"
-                      <input matInput formControlName="swUpdateRecourse" required>
+                  formControlName="lwm2mServer"
-                      <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('swUpdateRecourse').hasError('required')">
+                  [isBootstrapServer]="false">
-                        {{ 'device-profile.lwm2m.sw-update-recourse' | translate }}
+                </tb-profile-lwm2m-device-config-server>
-                        <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
-                      </mat-error>
-                    </mat-form-field>
-                  </div>
-                </div>
               </ng-template>
             </mat-expansion-panel>
           </mat-accordion>
         </section>
       </ng-template>
     </mat-tab>
+    <mat-tab label="{{ 'device-profile.lwm2m.others-tab' | translate }}">
+      <ng-template matTabContent>
+        <section [formGroup]="lwm2mDeviceProfileFormGroup">
+          <fieldset class="fields-group">
+            <legend class="group-title" translate>device-profile.lwm2m.fw-update</legend>
+            <mat-form-field class="mat-block" fxFlex>
+              <mat-label>{{ 'device-profile.lwm2m.fw-update-strategy' | translate }}</mat-label>
+              <mat-select formControlName="fwUpdateStrategy">
+                <mat-option [value]=1>{{ 'device-profile.lwm2m.fw-update-strategy-package' | translate }}</mat-option>
+                <mat-option [value]=2>{{ 'device-profile.lwm2m.fw-update-strategy-package-uri' | translate }}</mat-option>
+                <mat-option [value]=3>{{ 'device-profile.lwm2m.fw-update-strategy-data' | translate }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field class="mat-block" fxFlex *ngIf="isFwUpdateStrategy">
+              <mat-label>{{ 'device-profile.lwm2m.fw-update-recourse' | translate }}</mat-label>
+              <input matInput formControlName="fwUpdateRecourse" required>
+              <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('fwUpdateRecourse').hasError('required')">
+                {{ 'device-profile.lwm2m.fw-update-recourse-required' | translate }}
+              </mat-error>
+            </mat-form-field>
+          </fieldset>
+          <fieldset class="fields-group">
+            <legend class="group-title" translate>device-profile.lwm2m.sw-update</legend>
+            <mat-form-field class="mat-block" fxFlex>
+              <mat-label>{{ 'device-profile.lwm2m.sw-update-strategy' | translate }}</mat-label>
+              <mat-select formControlName="swUpdateStrategy">
+                <mat-option [value]=1>{{ 'device-profile.lwm2m.sw-update-strategy-package' | translate }}</mat-option>
+                <mat-option [value]=2>{{ 'device-profile.lwm2m.sw-update-strategy-package-uri' | translate }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field class="mat-block" fxFlex *ngIf="isSwUpdateStrategy">
+              <mat-label>{{ 'device-profile.lwm2m.sw-update-recourse' | translate }}</mat-label>
+              <input matInput formControlName="swUpdateRecourse" required>
+              <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('swUpdateRecourse').hasError('required')">
+                {{ 'device-profile.lwm2m.sw-update-recourse-required' | translate }}
+              </mat-error>
+            </mat-form-field>
+          </fieldset>
+<!--          <mat-accordion multi="true">-->
+<!--            <div *ngIf="false">-->
+<!--              <mat-expansion-panel>-->
+<!--                <mat-expansion-panel-header>-->
+<!--                  <mat-panel-title>{{ 'device-profile.lwm2m.client-strategy' | translate }}</mat-panel-title>-->
+<!--                </mat-expansion-panel-header>-->
+<!--                <ng-template matExpansionPanelContent>-->
+<!--                  <div fxLayout="column">-->
+<!--                    <mat-form-field class="mat-block">-->
+<!--                      <mat-label>{{ 'device-profile.lwm2m.client-strategy-label' | translate }}</mat-label>-->
+<!--                      <mat-select formControlName="clientStrategy"-->
+<!--                                  matTooltip="{{ 'device-profile.lwm2m.client-strategy-tip' | translate:-->
+<!--                                  { count: +lwm2mDeviceProfileFormGroup.get('clientStrategy').value } }}"-->
+<!--                                  matTooltipPosition="above">-->
+<!--                        <mat-option value=1>{{ 'device-profile.lwm2m.client-strategy-connect' | translate:-->
+<!--                          {count: 1} }}</mat-option>-->
+<!--                        <mat-option value=2>{{ 'device-profile.lwm2m.client-strategy-connect' | translate:-->
+<!--                          {count: 2} }}</mat-option>-->
+<!--                      </mat-select>-->
+<!--                    </mat-form-field>-->
+<!--                  </div>-->
+<!--                </ng-template>-->
+<!--              </mat-expansion-panel>-->
+<!--            </div>-->
+<!--          </mat-accordion>-->
+        </section>
+      </ng-template>
+    </mat-tab>
     <mat-tab label="{{ 'device-profile.lwm2m.config-json-tab' | translate }}">
       <ng-template matTabContent>
-        <section [formGroup]="lwm2mDeviceConfigFormGroup" class="mat-padding">
+        <section [formGroup]="lwm2mDeviceConfigFormGroup" style="padding: 8px 0">
           <tb-json-object-edit
             [required]="required"
             [sort]="sortFunction"

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

@@ -0,0 +1,27 @@
+/**
+ * Copyright © 2016-2021 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/lwm2m/lwm2m-device-profile-transport-configuration.component.ts

@@ -43,11 +43,11 @@ import { Direction } from '@shared/models/page/sort-order';
 import _ from 'lodash';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { MatSelectChange } from '@angular/material/select';
 
 @Component({
   selector: 'tb-profile-lwm2m-device-transport-configuration',
   templateUrl: './lwm2m-device-profile-transport-configuration.component.html',
+  styleUrls: ['./lwm2m-device-profile-transport-configuration.component.scss'],
   providers: [{
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => Lwm2mDeviceProfileTransportConfigurationComponent),
@@ -100,12 +100,38 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
       clientStrategy: [1, []],
       fwUpdateStrategy: [1, []],
       swUpdateStrategy: [1, []],
-      fwUpdateRecourse: ['', []],
+      fwUpdateRecourse: [{value: '', disabled: true}, []],
-      swUpdateRecourse: ['', []]
+      swUpdateRecourse: [{value: '', disabled: true}, []]
     });
     this.lwm2mDeviceConfigFormGroup = this.fb.group({
       configurationJson: [null, Validators.required]
     });
+    this.lwm2mDeviceProfileFormGroup.get('fwUpdateStrategy').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe((fwStrategy) => {
+      if (fwStrategy === 2) {
+        this.lwm2mDeviceProfileFormGroup.get('fwUpdateRecourse').enable({emitEvent: false});
+        this.lwm2mDeviceProfileFormGroup.get('fwUpdateRecourse').patchValue(DEFAULT_FW_UPDATE_RESOURCE, {emitEvent: false});
+        this.isFwUpdateStrategy = true;
+      } else {
+        this.lwm2mDeviceProfileFormGroup.get('fwUpdateRecourse').disable({emitEvent: false});
+        this.isFwUpdateStrategy = false;
+      }
+      this.otaUpdateFwStrategyValidate(true);
+    });
+    this.lwm2mDeviceProfileFormGroup.get('swUpdateStrategy').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe((swStrategy) => {
+      if (swStrategy === 2) {
+        this.lwm2mDeviceProfileFormGroup.get('swUpdateRecourse').enable({emitEvent: false});
+        this.lwm2mDeviceProfileFormGroup.get('swUpdateRecourse').patchValue(DEFAULT_SW_UPDATE_RESOURCE, {emitEvent: false});
+        this.isSwUpdateStrategy = true;
+      } else {
+        this.isSwUpdateStrategy = false;
+        this.lwm2mDeviceProfileFormGroup.get('swUpdateRecourse').disable({emitEvent: false});
+      }
+      this.otaUpdateSwStrategyValidate(true);
+    });
     this.lwm2mDeviceProfileFormGroup.valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe((value) => {
@@ -176,11 +202,9 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
   }
 
   private updateWriteValue = (value: ModelValue): void => {
-    let fwResource = this.configurationValue.clientLwM2mSettings.fwUpdateStrategy === '2' &&
+    const fwResource = isDefinedAndNotNull(this.configurationValue.clientLwM2mSettings.fwUpdateRecourse) ?
-    isDefinedAndNotNull(this.configurationValue.clientLwM2mSettings.fwUpdateRecourse) ?
       this.configurationValue.clientLwM2mSettings.fwUpdateRecourse : '';
-    let swResource = this.configurationValue.clientLwM2mSettings.swUpdateStrategy === '2' &&
+    const swResource = isDefinedAndNotNull(this.configurationValue.clientLwM2mSettings.fwUpdateRecourse) ?
-    isDefinedAndNotNull(this.configurationValue.clientLwM2mSettings.fwUpdateRecourse) ?
       this.configurationValue.clientLwM2mSettings.swUpdateRecourse : '';
     this.lwm2mDeviceProfileFormGroup.patchValue({
         objectIds: value,
@@ -193,16 +217,16 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
         bootstrapServer: this.configurationValue.bootstrap.bootstrapServer,
         lwm2mServer: this.configurationValue.bootstrap.lwm2mServer,
         clientStrategy: this.configurationValue.clientLwM2mSettings.clientStrategy,
-        fwUpdateStrategy: this.configurationValue.clientLwM2mSettings.fwUpdateStrategy,
+        fwUpdateStrategy: this.configurationValue.clientLwM2mSettings.fwUpdateStrategy || 1,
-        swUpdateStrategy: this.configurationValue.clientLwM2mSettings.swUpdateStrategy,
+        swUpdateStrategy: this.configurationValue.clientLwM2mSettings.swUpdateStrategy || 1,
         fwUpdateRecourse: fwResource,
         swUpdateRecourse: swResource
       },
       {emitEvent: false});
     this.configurationValue.clientLwM2mSettings.fwUpdateRecourse = fwResource;
     this.configurationValue.clientLwM2mSettings.swUpdateRecourse = swResource;
-    this.isFwUpdateStrategy = this.configurationValue.clientLwM2mSettings.fwUpdateStrategy === '2';
+    this.isFwUpdateStrategy = this.configurationValue.clientLwM2mSettings.fwUpdateStrategy === 2;
-    this.isSwUpdateStrategy = this.configurationValue.clientLwM2mSettings.swUpdateStrategy === '2';
+    this.isSwUpdateStrategy = this.configurationValue.clientLwM2mSettings.swUpdateStrategy === 2;
     this.otaUpdateSwStrategyValidate();
     this.otaUpdateFwStrategyValidate();
   }
@@ -239,8 +263,8 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
       this.configurationValue.clientLwM2mSettings.fwUpdateRecourse = config.fwUpdateRecourse;
       this.configurationValue.clientLwM2mSettings.swUpdateRecourse = config.swUpdateRecourse;
       this.upDateJsonAllConfig();
-      this.updateModel();
     }
+    this.updateModel();
   }
 
   private getObserveAttrTelemetryObjects = (objectList: ObjectLwM2M[]): object => {
@@ -513,53 +537,22 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
     });
   }
 
-  changeFwUpdateStrategy($event: MatSelectChange) {
+  private otaUpdateFwStrategyValidate(updated = false): void {
-    if ($event.value === '2') {
-      this.isFwUpdateStrategy = true;
-      if (isEmpty(this.lwm2mDeviceProfileFormGroup.get('fwUpdateRecourse').value)) {
-        this.lwm2mDeviceProfileFormGroup.patchValue({
-            fwUpdateRecourse: DEFAULT_FW_UPDATE_RESOURCE
-          },
-          {emitEvent: false});
-      }
-    } else {
-      this.isFwUpdateStrategy = false;
-    }
-    this.otaUpdateFwStrategyValidate();
-  }
-
-  changeSwUpdateStrategy($event: MatSelectChange) {
-    if ($event.value === '2') {
-      this.isSwUpdateStrategy = true;
-      if (isEmpty(this.lwm2mDeviceProfileFormGroup.get('swUpdateRecourse').value)) {
-        this.lwm2mDeviceProfileFormGroup.patchValue({
-            swUpdateRecourse: DEFAULT_SW_UPDATE_RESOURCE
-          },
-          {emitEvent: false});
-
-      }
-    } else {
-      this.isSwUpdateStrategy = false;
-    }
-    this.otaUpdateSwStrategyValidate();
-  }
-
-  private otaUpdateFwStrategyValidate(): void {
     if (this.isFwUpdateStrategy) {
       this.lwm2mDeviceProfileFormGroup.get('fwUpdateRecourse').setValidators([Validators.required]);
     } else {
       this.lwm2mDeviceProfileFormGroup.get('fwUpdateRecourse').clearValidators();
     }
-    this.lwm2mDeviceProfileFormGroup.get('fwUpdateRecourse').updateValueAndValidity();
+    this.lwm2mDeviceProfileFormGroup.get('fwUpdateRecourse').updateValueAndValidity({emitEvent: updated});
   }
 
-  private otaUpdateSwStrategyValidate(): void {
+  private otaUpdateSwStrategyValidate(updated = false): void {
     if (this.isSwUpdateStrategy) {
       this.lwm2mDeviceProfileFormGroup.get('swUpdateRecourse').setValidators([Validators.required]);
     } else {
       this.lwm2mDeviceProfileFormGroup.get('swUpdateRecourse').clearValidators();
     }
-    this.lwm2mDeviceProfileFormGroup.get('swUpdateRecourse').updateValueAndValidity();
+    this.lwm2mDeviceProfileFormGroup.get('swUpdateRecourse').updateValueAndValidity({emitEvent: updated});
   }
 
 }

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-profile-config.models.ts

@@ -20,7 +20,6 @@ export const INSTANCE = 'instance';
 export const RESOURCES = 'resources';
 export const ATTRIBUTE_LWM2M = 'attributeLwm2m';
 export const CLIENT_LWM2M = 'clientLwM2M';
-export const CLIENT_LWM2M_SETTINGS = 'clientLwM2mSettings';
 export const OBSERVE_ATTR_TELEMETRY = 'observeAttrTelemetry';
 export const OBSERVE = 'observe';
 export const ATTRIBUTE = 'attribute';
@@ -43,9 +42,9 @@ export const KEY_REGEXP_HEX_DEC = /^[-+]?[0-9A-Fa-f]+\.?[0-9A-Fa-f]*?$/;
 export const KEY_REGEXP_NUMBER = /^(\-?|\+?)\d*$/;
 export const INSTANCES_ID_VALUE_MIN = 0;
 export const INSTANCES_ID_VALUE_MAX = 65535;
-export const DEFAULT_OTA_UPDATE_PROTOCOL = "coap://";
+export const DEFAULT_OTA_UPDATE_PROTOCOL = 'coap://';
-export const DEFAULT_FW_UPDATE_RESOURCE = DEFAULT_OTA_UPDATE_PROTOCOL + DEFAULT_LOCAL_HOST_NAME + ":"+ DEFAULT_PORT_SERVER_NO_SEC;
+export const DEFAULT_FW_UPDATE_RESOURCE = DEFAULT_OTA_UPDATE_PROTOCOL + DEFAULT_LOCAL_HOST_NAME + ':' + DEFAULT_PORT_SERVER_NO_SEC;
-export const DEFAULT_SW_UPDATE_RESOURCE = DEFAULT_OTA_UPDATE_PROTOCOL + DEFAULT_LOCAL_HOST_NAME + ":"+ DEFAULT_PORT_SERVER_NO_SEC;
+export const DEFAULT_SW_UPDATE_RESOURCE = DEFAULT_OTA_UPDATE_PROTOCOL + DEFAULT_LOCAL_HOST_NAME + ':' + DEFAULT_PORT_SERVER_NO_SEC;
 
 
 export enum BINDING_MODE {
@@ -113,19 +112,19 @@ export const ATTRIBUTE_LWM2M_MAP = new Map<ATTRIBUTE_LWM2M_ENUM, string>(
 
 export const ATTRIBUTE_KEYS = Object.keys(ATTRIBUTE_LWM2M_ENUM) as string[];
 
-export enum SECURITY_CONFIG_MODE {
+export enum securityConfigMode {
   PSK = 'PSK',
   RPK = 'RPK',
   X509 = 'X509',
   NO_SEC = 'NO_SEC'
 }
 
-export const SECURITY_CONFIG_MODE_NAMES = new Map<SECURITY_CONFIG_MODE, string>(
+export const securityConfigModeNames = new Map<securityConfigMode, string>(
   [
-    [SECURITY_CONFIG_MODE.PSK, 'Pre-Shared Key'],
+    [securityConfigMode.PSK, 'Pre-Shared Key'],
-    [SECURITY_CONFIG_MODE.RPK, 'Raw Public Key'],
+    [securityConfigMode.RPK, 'Raw Public Key'],
-    [SECURITY_CONFIG_MODE.X509, 'X.509 Certificate'],
+    [securityConfigMode.X509, 'X.509 Certificate'],
-    [SECURITY_CONFIG_MODE.NO_SEC, 'No Security']
+    [securityConfigMode.NO_SEC, 'No Security']
   ]
 );
 
@@ -144,9 +143,10 @@ export interface BootstrapServersSecurityConfig {
 
 export interface ServerSecurityConfig {
   host?: string;
+  securityHost?: string;
   port?: number;
-  bootstrapServerIs?: boolean;
+  securityPort?: number;
-  securityMode: string;
+  securityMode: securityConfigMode;
   clientPublicKeyOrId?: string;
   clientSecretKey?: string;
   serverPublicKey?: string;
@@ -169,8 +169,8 @@ export interface Lwm2mProfileConfigModels {
 
 export interface ClientLwM2mSettings {
   clientStrategy: string;
-  fwUpdateStrategy: string;
+  fwUpdateStrategy: number;
-  swUpdateStrategy: string;
+  swUpdateStrategy: number;
   fwUpdateRecourse: string;
   swUpdateRecourse: string;
 }
@@ -193,12 +193,11 @@ export function getDefaultBootstrapServersSecurityConfig(): BootstrapServersSecu
   };
 }
 
-export function getDefaultBootstrapServerSecurityConfig(hostname: any): ServerSecurityConfig {
+export function getDefaultBootstrapServerSecurityConfig(hostname: string): ServerSecurityConfig {
   return {
     host: hostname,
     port: DEFAULT_PORT_BOOTSTRAP_NO_SEC,
-    bootstrapServerIs: true,
+    securityMode: securityConfigMode.NO_SEC,
-    securityMode: SECURITY_CONFIG_MODE.NO_SEC.toString(),
     serverPublicKey: '',
     clientHoldOffTime: DEFAULT_CLIENT_HOLD_OFF_TIME,
     serverId: DEFAULT_ID_BOOTSTRAP,
@@ -208,7 +207,6 @@ export function getDefaultBootstrapServerSecurityConfig(hostname: any): ServerSe
 
 export function getDefaultLwM2MServerSecurityConfig(hostname): ServerSecurityConfig {
   const DefaultLwM2MServerSecurityConfig = getDefaultBootstrapServerSecurityConfig(hostname);
-  DefaultLwM2MServerSecurityConfig.bootstrapServerIs = false;
   DefaultLwM2MServerSecurityConfig.port = DEFAULT_PORT_SERVER_NO_SEC;
   DefaultLwM2MServerSecurityConfig.serverId = DEFAULT_ID_SERVER;
   return DefaultLwM2MServerSecurityConfig;
@@ -242,9 +240,9 @@ export function getDefaultProfileConfig(hostname?: any): Lwm2mProfileConfigModel
 
 function getDefaultProfileClientLwM2mSettingsConfig(): ClientLwM2mSettings {
   return {
-    clientStrategy: "1",
+    clientStrategy: '1',
-    fwUpdateStrategy: "1",
+    fwUpdateStrategy: 1,
-    swUpdateStrategy: "1",
+    swUpdateStrategy: 1,
     fwUpdateRecourse: DEFAULT_FW_UPDATE_RESOURCE,
     swUpdateRecourse: DEFAULT_SW_UPDATE_RESOURCE
   };

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

@@ -1252,7 +1252,7 @@
             "pattern_hex_dec": "{ count, plural, 0 {must be hex decimal format} other {must be # characters} }",
             "servers": "Servers",
             "short-id": "Short ID",
-            "short-id-tip": "Short Server ID",
+            "short-id-required": "Short ID is required.",
             "lifetime": "Lifetime of the registration for this LwM2M client",
             "default-min-period": "Minimum Period between two notifications (sec)",
             "notif-if-disabled": "Notification Storing When Disabled or Offline",
@@ -1261,28 +1261,37 @@
             "bootstrap-server": "Bootstrap Server",
             "lwm2m-server": "LwM2M Server",
             "server-host": "Host",
-            "server-host-tip": "Server Host",
+            "server-host-required": "Host is required.",
             "server-port": "Port",
-            "server-port-tip": "Server Port",
+            "server-port-required": "Port is required.",
             "server-public-key": "Server Public Key",
-            "server-public-key-tip": "Server Public Key only for X509, RPK",
+            "server-public-key-required": "Server Public Key is required.",
+            "server-public-key-pattern": "Server Public Key must be hex decimal format.",
+            "server-public-key-length": "Server Public Key must be {{ count }} characters.",
             "client-hold-off-time": "Hold Off Time",
-            "client-hold-off-time-tip": "Client Hold Off Time for use with a Bootstrap-Server only",
+            "client-hold-off-time-required": "Hold Off Time is required.",
-            "bootstrap-server-account-timeout": "Account after the timeout",
+            "client-hold-off-time-tooltip": "Client Hold Off Time for use with a Bootstrap-Server only",
-            "bootstrap-server-account-timeout-tip": "Bootstrap-Server Account after the timeout value given by this resource.",
+            "account-after-timeout": "Account after the timeout",
-            "others-tab": "Other settings...",
+            "account-after-timeout-required": "Account after the timeout is required.",
+            "account-after-timeout-tooltip": "Bootstrap-Server Account after the timeout value given by this resource.",
+            "others-tab": "Other settings",
             "client-strategy": "Client strategy when connecting",
             "client-strategy-label": "Strategy",
             "client-strategy-connect": "{ count, plural, 1 {1: Only Observe Request to the client after the initial connection} other {2: Read All Resources & Observe Request to the client after registration} }",
             "client-strategy-tip": "{ count, plural, 1 {Strategy 1: After the initial connection of the LWM2M Client, the server sends Observe resources Request to the client, those resources that are marked as observation in the Device profile and which exist on the LWM2M client.} other {Strategy  2: After the registration, request the client to read all the resource values for all objects that the LWM2M client has,\n then execute:  the server sends Observe resources Request to the client, those resources that are marked as observation in the Device profile and which exist on the LWM2M client.} }",
-            "ota-update-strategy": "Ota update strategy",
+            "fw-update": "Firmware update",
-            "fw-update-strategy-label": "Firmware update strategy",
+            "fw-update-strategy": "Firmware update strategy",
-            "fw-update-strategy": "{ count, plural, 1 {Push firmware update as binary file using Object 5 and Resource 0 (Package).} 2 {Auto-generate unique CoAP URL to download the package and push firmware update as Object 5 and Resource 1 (Package URI).} other {Push firmware update as binary file using Object 19 and Resource 0 (Data).} }",
+            "fw-update-strategy-data": "Push firmware update as binary file using Object 19 and Resource 0 (Data)",
-            "sw-update-strategy-label": "Software update strategy",
+            "fw-update-strategy-package": "Push firmware update as binary file using Object 5 and Resource 0 (Package)",
-            "sw-update-strategy": "{ count, plural, 1 {Push binary file using Object 9 and Resource 2 (Package).} other {Auto-generate unique CoAP URL to download the package and push software update using Object 9 and Resource 3 (Package URI).} }",
+            "fw-update-strategy-package-uri": "Auto-generate unique CoAP URL to download the package and push firmware update as Object 5 and Resource 1 (Package URI)",
-            "ota-update-recourse": "Ota update Coap recourse",
+            "sw-update": "Software update",
-            "fw-update-recourse": "Firmware update Coap recourse",
+            "sw-update-strategy": "Software update strategy",
-            "sw-update-recourse": "Software update Coap recourse",
+            "sw-update-strategy-package": "Push binary file using Object 9 and Resource 2 (Package)",
+            "sw-update-strategy-package-uri": "Auto-generate unique CoAP URL to download the package and push software update using Object 9 and Resource 3 (Package URI)",
+            "fw-update-recourse": "Firmware update CoAP recourse",
+            "fw-update-recourse-required": "Firmware update CoAP recourse is required.",
+            "sw-update-recourse": "Software update CoAP recourse",
+            "sw-update-recourse-required": "Software update CoAP recourse is required.",
             "config-json-tab": "Json Config Profile Device"
         }
     },