Merge pull request #5729 from Terny22/lwm2m-fix-bug-transport-start-without-bootstrap

[3.3.3] UI: Refactoring LwM2M Config with enabled/disabled bootstrap

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

@@ -84,20 +84,22 @@ export class DeviceProfileService {
     return this.getLwm2mBootstrapSecurityInfo(isBootstrapServer, config).pipe(
       map(securityConfig => {
         const serverSecurityConfigInfo = deepClone(securityConfig);
-        switch (securityMode) {
-          case Lwm2mSecurityType.PSK:
-            serverSecurityConfigInfo.port = serverSecurityConfigInfo.securityPort;
-            serverSecurityConfigInfo.host = serverSecurityConfigInfo.securityHost;
-            serverSecurityConfigInfo.serverPublicKey = '';
-            break;
-          case Lwm2mSecurityType.RPK:
-          case Lwm2mSecurityType.X509:
-            serverSecurityConfigInfo.port = serverSecurityConfigInfo.securityPort;
-            serverSecurityConfigInfo.host = serverSecurityConfigInfo.securityHost;
-            break;
-          case Lwm2mSecurityType.NO_SEC:
-            serverSecurityConfigInfo.serverPublicKey = '';
-            break;
+        if (serverSecurityConfigInfo) {
+          switch (securityMode) {
+            case Lwm2mSecurityType.PSK:
+              serverSecurityConfigInfo.port = serverSecurityConfigInfo.securityPort;
+              serverSecurityConfigInfo.host = serverSecurityConfigInfo.securityHost;
+              serverSecurityConfigInfo.serverPublicKey = '';
+              break;
+            case Lwm2mSecurityType.RPK:
+            case Lwm2mSecurityType.X509:
+              serverSecurityConfigInfo.port = serverSecurityConfigInfo.securityPort;
+              serverSecurityConfigInfo.host = serverSecurityConfigInfo.securityHost;
+              break;
+            case Lwm2mSecurityType.NO_SEC:
+              serverSecurityConfigInfo.serverPublicKey = '';
+              break;
+          }
         }
         return serverSecurityConfigInfo;
       })

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

@@ -20,7 +20,8 @@
     <div *ngFor="let serverConfig of serverConfigsFromArray().controls; trackBy: trackByParams; let $index = index;">
       <tb-profile-lwm2m-device-config-server
         [formControl]="serverConfig"
-        (removeServer)="removeServerConfig($event, $index)">
+        (removeServer)="removeServerConfig($event, $index)"
+        (isTransportWasRunWithBootstrapChange)="updateIsTransportWasRunWithBootstrap($event)">
       </tb-profile-lwm2m-device-config-server>
     </div>
   </mat-accordion>
@@ -32,8 +33,8 @@
     <button mat-raised-button color="primary"
             type="button"
             (click)="addServerConfig()">
-      <span>{{ ((isBootstrapAdded() || !isBootstrapServerUpdateEnableValue) ? 'device-profile.lwm2m.add-lwm2m-server-config' :
-        'device-profile.lwm2m.add-server-config') | translate}}</span>
+      <span>{{ (this.isBootstrapServerNotAvailable() ? 'device-profile.lwm2m.add-lwm2m-server-config' :
+        'device-profile.lwm2m.add-server-config') | translate }}</span>
     </button>
   </div>
 </div>

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

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -57,6 +57,12 @@ export class Lwm2mBootstrapConfigServersComponent implements OnInit, ControlValu
   @Input()
   disabled: boolean;
 
+  @Input()
+  isTransportWasRunWithBootstrap: boolean;
+
+  @Output()
+  isTransportWasRunWithBootstrapChange = new EventEmitter<boolean>();
+
   public isBootstrapServerUpdateEnableValue: boolean;
   @Input()
   set isBootstrapServerUpdateEnable(value: boolean) {
@@ -147,7 +153,7 @@ export class Lwm2mBootstrapConfigServersComponent implements OnInit, ControlValu
   }
 
   addServerConfig(): void {
-    const addDialogObs = (this.isBootstrapAdded() || !this.isBootstrapServerUpdateEnableValue) ? of(false) :
+    const addDialogObs = this.isBootstrapServerNotAvailable() ? of(false) :
       this.matDialog.open<Lwm2mBootstrapAddConfigServerDialogComponent>(Lwm2mBootstrapAddConfigServerDialogComponent, {
         disableClose: true,
         panelClass: ['tb-dialog', 'tb-fullscreen-dialog']
@@ -165,10 +171,18 @@ export class Lwm2mBootstrapConfigServersComponent implements OnInit, ControlValu
         serverConfig.securityMode = Lwm2mSecurityType.NO_SEC;
         this.serverConfigsFromArray().push(this.fb.control(serverConfig));
         this.updateModel();
+      } else {
+        this.isTransportWasRunWithBootstrap = false;
+        this.isTransportWasRunWithBootstrapChange.emit(this.isTransportWasRunWithBootstrap);
       }
     });
   }
 
+  updateIsTransportWasRunWithBootstrap(newValue: boolean): void {
+    this.isTransportWasRunWithBootstrap = newValue;
+    this.isTransportWasRunWithBootstrapChange.emit(this.isTransportWasRunWithBootstrap);
+  }
+
   public validate(c: FormControl) {
     return (this.bootstrapConfigServersFormGroup.valid) ? null : {
       serverConfigs: {
@@ -177,7 +191,11 @@ export class Lwm2mBootstrapConfigServersComponent implements OnInit, ControlValu
     };
   }
 
-  public isBootstrapAdded() {
+  public isBootstrapServerNotAvailable(): boolean {
+    return this.isBootstrapAdded() || !this.isBootstrapServerUpdateEnableValue || !this.isTransportWasRunWithBootstrap;
+  }
+
+  private isBootstrapAdded(): boolean {
     const serverConfigsArray =  this.serverConfigsFromArray().getRawValue();
     for (let i = 0; i < serverConfigsArray.length; i++) {
       if (serverConfigsArray[i].bootstrapServerIs) {

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

@@ -71,10 +71,14 @@ export class Lwm2mDeviceConfigServerComponent implements OnInit, ControlValueAcc
   credentialTypeLwM2MNamesMap = Lwm2mSecurityTypeTranslationMap;
   publicKeyOrIdTooltipNamesMap = Lwm2mPublicKeyOrIdTooltipTranslationsMap;
   currentSecurityMode = null;
+  bootstrapDisabled = false;
 
   @Output()
   removeServer = new EventEmitter();
 
+  @Output()
+  isTransportWasRunWithBootstrapChange = new EventEmitter<boolean>();
+
   private propagateChange = (v: any) => { };
 
   constructor(public fb: FormBuilder,
@@ -136,6 +140,11 @@ export class Lwm2mDeviceConfigServerComponent implements OnInit, ControlValueAcc
         if (!serverData) {
           this.serverFormGroup.patchValue(value);
         }
+        if (!value && this.serverFormGroup.get('bootstrapServerIs').value === true) {
+          this.isTransportWasRunWithBootstrapChange.emit(false);
+          this.bootstrapDisabled = true;
+          this.serverFormGroup.get('securityMode').disable({emitEvent: false});
+        }
       });
     }
   }
@@ -150,6 +159,9 @@ export class Lwm2mDeviceConfigServerComponent implements OnInit, ControlValueAcc
       this.serverFormGroup.disable({emitEvent: false});
     } else {
       this.serverFormGroup.enable({emitEvent: false});
+      if (this.bootstrapDisabled) {
+        this.serverFormGroup.get('securityMode').disable({emitEvent: false});
+      }
     }
   }
 

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

@@ -33,12 +33,17 @@
     </mat-tab>
     <mat-tab label="{{ 'device-profile.lwm2m.bootstrap-tab' | translate }}">
       <section [formGroup]="lwm2mDeviceProfileFormGroup">
+        <div *ngIf="!isTransportWasRunWithBootstrap" style="padding:16px 0 0 8px;" fxLayout="row" fxLayoutAlign="start end">
+          <mat-icon color="warn" class="material-icons" style="margin-right:8px;">warning</mat-icon>
+          <span style="font-weight:500">LwM2M transport was run without bootstrap server</span>
+        </div>
         <mat-checkbox formControlName="bootstrapServerUpdateEnable" style="margin-left:8px;margin-top:20px">
           {{ 'device-profile.lwm2m.include-bootstrap-server' | translate }}
         </mat-checkbox>
         <section style="padding: 20px 2px">
           <tb-profile-lwm2m-bootstrap-config-servers formControlName="bootstrap"
-                                                     [isBootstrapServerUpdateEnable]="isBootstrapServerUpdateEnable">
+                                                     [isBootstrapServerUpdateEnable]="isBootstrapServerUpdateEnable"
+                                                     [(isTransportWasRunWithBootstrap)]="isTransportWasRunWithBootstrap">
           </tb-profile-lwm2m-bootstrap-config-servers>
         </section>
       </section>

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

@@ -74,6 +74,7 @@ import { TranslateService } from '@ngx-translate/core';
 export class Lwm2mDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, Validator, OnDestroy {
 
   public disabled = false;
+  public isTransportWasRunWithBootstrap = true;
   public isBootstrapServerUpdateEnable: boolean;
   private requiredValue: boolean;
   private destroy$ = new Subject();
@@ -226,10 +227,16 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
   }
 
   private async defaultProfileConfig(): Promise<void> {
-    const lwm2m: ServerSecurityConfig = await this.deviceProfileService.getLwm2mBootstrapSecurityInfoBySecurityType(false).toPromise();
+    let lwm2m: ServerSecurityConfig;
+    let bootstrap: ServerSecurityConfig;
+    [bootstrap, lwm2m] = await Promise.all([
+      this.deviceProfileService.getLwm2mBootstrapSecurityInfoBySecurityType(true).toPromise(),
+      this.deviceProfileService.getLwm2mBootstrapSecurityInfoBySecurityType(false).toPromise(),
+    ]);
     if (lwm2m) {
       lwm2m.securityMode = Lwm2mSecurityType.NO_SEC;
     }
+    this.isTransportWasRunWithBootstrap = !!bootstrap;
     this.configurationValue.bootstrap = [lwm2m];
     this.lwm2mDeviceProfileFormGroup.patchValue({
       bootstrap: this.configurationValue.bootstrap

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

@@ -1345,7 +1345,7 @@
                 "tqs": "TQS: both TCP and SMS connections active; TCP in queue mode, SMS in standard mode (is not supported since LWM2M 1.1)",
                 "sq": "SQ: SMS connection in queue mode (is not supported since LWM2M 1.1)"
             },
-            "binding-tooltip": "Tis is the list in the\"binding\" resource of the LwM2M server object - /1/x/7.\nIndicates the supported binding modes in the LwM2M Client.\nThis value SHOULD be the same as the value in the “Supported Binding and Modes” resource in the Device Object (/3/0/16).\nWhile multiple transports are supported, only one transport binding can be used during the entire Transport Session.\nAs an example, when UDP and SMS are both supported, the LwM2M Client and the LwM2M Server can choose to communicate either over UDP or SMS during the entire Transport Session.",
+            "binding-tooltip": "This is the list in the\"binding\" resource of the LwM2M server object - /1/x/7.\nIndicates the supported binding modes in the LwM2M Client.\nThis value SHOULD be the same as the value in the “Supported Binding and Modes” resource in the Device Object (/3/0/16).\nWhile multiple transports are supported, only one transport binding can be used during the entire Transport Session.\nAs an example, when UDP and SMS are both supported, the LwM2M Client and the LwM2M Server can choose to communicate either over UDP or SMS during the entire Transport Session.",
             "bootstrap-server": "Bootstrap Server",
             "lwm2m-server": "LwM2M Server",
             "include-bootstrap-server": "Include Bootstrap Server updates",