UI: Init models for transport type switch

ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts

@@ -31,7 +31,8 @@ import {
   credentialTypeNames,
   DeviceCredentialMQTTBasic,
   DeviceCredentials,
-  DeviceCredentialsType
+  DeviceCredentialsType,
+  DeviceTransportType
 } from '@shared/models/device.models';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -58,6 +59,9 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
   @Input()
   disabled: boolean;
 
+  @Input()
+  deviceTransportType = DeviceTransportType.DEFAULT;
+
   private destroy$ = new Subject();
 
   deviceCredentialsFormGroup: FormGroup;

ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html

@@ -31,6 +31,7 @@
   <div mat-dialog-content>
     <fieldset [disabled]="(isLoading$ | async) || isReadOnly">
       <tb-device-credentials
+        [deviceTransportType]="deviceTransportType"
         formControlName="credential">
       </tb-device-credentials>
     </fieldset>

ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.ts

@@ -21,13 +21,16 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { DeviceService } from '@core/http/device.service';
-import { credentialTypeNames, DeviceCredentials, DeviceCredentialsType } from '@shared/models/device.models';
+import { DeviceCredentials, DeviceProfileInfo, DeviceTransportType } from '@shared/models/device.models';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
+import { DeviceProfileService } from '@core/http/device-profile.service';
+import { forkJoin } from 'rxjs';
 
 export interface DeviceCredentialsDialogData {
   isReadOnly: boolean;
   deviceId: string;
+  deviceProfileId: string;
 }
 
 @Component({
@@ -47,18 +50,13 @@ export class DeviceCredentialsDialogComponent extends
 
   submitted = false;
 
-  deviceCredentialsType = DeviceCredentialsType;
-
-  credentialsTypes = Object.keys(DeviceCredentialsType);
-
-  credentialTypeNamesMap = credentialTypeNames;
-
-  hidePassword = true;
+  deviceTransportType: DeviceTransportType;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: DeviceCredentialsDialogData,
               private deviceService: DeviceService,
+              private deviceProfileService: DeviceProfileService,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<DeviceCredentialsDialogComponent, DeviceCredentials>,
               public fb: FormBuilder) {
@@ -84,14 +82,16 @@ export class DeviceCredentialsDialogComponent extends
   }
 
   loadDeviceCredentials() {
-    this.deviceService.getDeviceCredentials(this.data.deviceId).subscribe(
-      (deviceCredentials) => {
-        this.deviceCredentials = deviceCredentials;
-        this.deviceCredentialsFormGroup.patchValue({
-          credential: deviceCredentials
-        }, {emitEvent: false});
-      }
-    );
+    const task = [];
+    task.push(this.deviceService.getDeviceCredentials(this.data.deviceId));
+    task.push(this.deviceProfileService.getDeviceProfileInfo(this.data.deviceProfileId));
+    forkJoin(task).subscribe(([deviceCredentials, deviceProfile]: [DeviceCredentials, DeviceProfileInfo]) => {
+      this.deviceTransportType = deviceProfile.transportType;
+      this.deviceCredentials = deviceCredentials;
+      this.deviceCredentialsFormGroup.patchValue({
+        credential: deviceCredentials
+      }, {emitEvent: false});
+    });
   }
 
   cancel(): void {

ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts

@@ -112,7 +112,8 @@ export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<Dev
         ));
     };
     this.config.onEntityAction = action => this.onDeviceAction(action);
-    this.config.detailsReadonly = () => (this.config.componentsData.deviceScope === 'customer_user' || this.config.componentsData.deviceScope === 'edge_customer_user');
+    this.config.detailsReadonly = () =>
+      (this.config.componentsData.deviceScope === 'customer_user' || this.config.componentsData.deviceScope === 'edge_customer_user');
 
     this.config.headerComponent = DeviceTableHeaderComponent;
 
@@ -528,6 +529,7 @@ export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<Dev
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
       data: {
         deviceId: device.id.id,
+        deviceProfileId: device.deviceProfileId.id,
         isReadOnly: this.config.componentsData.deviceScope === 'customer_user' || this.config.componentsData.deviceScope === 'edge_customer_user'
       }
     }).afterClosed().subscribe(deviceCredentials => {

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

@@ -680,6 +680,20 @@ export const credentialTypeNames = new Map<DeviceCredentialsType, string>(
   ]
 );
 
+export const credentialTypesByTransportType = new Map<DeviceTransportType, DeviceCredentialsType[]>(
+  [
+    [DeviceTransportType.DEFAULT, [
+      DeviceCredentialsType.ACCESS_TOKEN, DeviceCredentialsType.X509_CERTIFICATE, DeviceCredentialsType.MQTT_BASIC
+    ]],
+    [DeviceTransportType.MQTT, [
+      DeviceCredentialsType.ACCESS_TOKEN, DeviceCredentialsType.X509_CERTIFICATE, DeviceCredentialsType.MQTT_BASIC
+    ]],
+    [DeviceTransportType.COAP, [DeviceCredentialsType.ACCESS_TOKEN, DeviceCredentialsType.X509_CERTIFICATE]],
+    [DeviceTransportType.LWM2M, [DeviceCredentialsType.LWM2M_CREDENTIALS]],
+    [DeviceTransportType.SNMP, [DeviceCredentialsType.ACCESS_TOKEN, DeviceCredentialsType.X509_CERTIFICATE]]
+  ]
+);
+
 export interface DeviceCredentials extends BaseData<DeviceCredentialsId> {
   deviceId: DeviceId;
   credentialsType: DeviceCredentialsType;