CE updated

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

@@ -22,6 +22,7 @@ import { DeviceCredentialsComponent } from '@home/components/device/device-crede
 import { DeviceCredentialsLwm2mComponent } from '@home/components/device/device-credentials-lwm2m.component';
 import { DeviceCredentialsLwm2mServerComponent } from '@home/components/device/device-credentials-lwm2m-server.component';
 import { DeviceCredentialsMqttBasicComponent } from '@home/components/device/device-credentials-mqtt-basic.component';
+import {DeviceGatewayCommandComponent} from "@home/components/device/device-gateway-command.component";
 
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@ import { DeviceCredentialsMqttBasicComponent } from '@home/components/device/dev
     DeviceCredentialsComponent,
     DeviceCredentialsLwm2mComponent,
     DeviceCredentialsLwm2mServerComponent,
-    DeviceCredentialsMqttBasicComponent
+    DeviceCredentialsMqttBasicComponent,
+    DeviceGatewayCommandComponent
   ],
   imports: [
     CommonModule,
@@ -40,7 +42,8 @@ import { DeviceCredentialsMqttBasicComponent } from '@home/components/device/dev
     DeviceCredentialsComponent,
     DeviceCredentialsLwm2mComponent,
     DeviceCredentialsLwm2mServerComponent,
-    DeviceCredentialsMqttBasicComponent
+    DeviceCredentialsMqttBasicComponent,
+    DeviceGatewayCommandComponent
   ]
 })
 export class DeviceCredentialsModule { }

ui-ngx/src/app/modules/home/components/device/device-gateway-command.component.html

@@ -0,0 +1,53 @@
+<!--
+
+    Copyright © 2016-2022 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.
+
+-->
+<div mat-dialog-content tb-toast toastTarget="dockerCommandDialogContent">
+  <mat-button-toggle-group [formControl]="selectedOSControll" aria-label="Favorite Color">
+    <mat-button-toggle [value]="osTypes.windows"><span translate>gateway.windows </span></mat-button-toggle>
+    <mat-button-toggle [value]="osTypes.linux"><span translate>gateway.linux-macos </span></mat-button-toggle>
+  </mat-button-toggle-group>
+  <div class="mat-content" fxLayout="column" *ngIf="selectedOSControll.value !== osTypes.windows">
+    <!--      <span translate>gateway.linux-macos</span>-->
+    <div fxLayout="row" fxLayoutAlign="start center">
+      <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ linuxCode }}</code></pre>
+      <button mat-icon-button
+              color="primary"
+              ngxClipboard
+              cbContent="{{ linuxCode }}"
+              (cbOnSuccess)="onDockerCodeCopied()"
+              matTooltip="{{ 'gateway.copy-command' | translate }}"
+              matTooltipPosition="above">
+        <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+      </button>
+    </div>
+  </div>
+  <div class="mat-content" fxLayout="column" *ngIf="selectedOSControll.value === osTypes.windows">
+    <!--      <span translate>gateway.windows</span>-->
+    <div fxLayout="row" fxLayoutAlign="start center">
+      <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ windowsCode }}</code></pre>
+      <button mat-icon-button
+              color="primary"
+              ngxClipboard
+              cbContent="{{ windowsCode }}"
+              (cbOnSuccess)="onDockerCodeCopied()"
+              matTooltip="{{ 'gateway.copy-command' | translate }}"
+              matTooltipPosition="above">
+        <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+      </button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,110 @@
+///
+/// Copyright © 2016-2022 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.
+///
+
+import {Component, Input, OnInit} from '@angular/core';
+import {
+  FormControl,
+} from '@angular/forms';
+import {Router} from "@angular/router";
+import {Store} from "@ngrx/store";
+import {AppState} from "@core/core.state";
+import {TranslateService} from "@ngx-translate/core";
+import {ActionNotificationShow} from "@core/notification/notification.actions";
+import {DeviceService} from "@core/http/device.service";
+
+enum OsType {
+  linux = 'linux',
+  macos = 'macos',
+  windows = 'win'
+}
+
+@Component({
+  selector: 'tb-gateway-command',
+  templateUrl: './device-gateway-command.component.html',
+  styleUrls: []
+})
+
+export class DeviceGatewayCommandComponent implements OnInit {
+
+  @Input()
+  token: string;
+
+  @Input()
+  deviceId: string;
+
+  linuxCode: string;
+  windowsCode: string;
+  selectedOSControll: FormControl;
+  osTypes = OsType;
+
+  constructor(protected router: Router,
+              protected store: Store<AppState>,
+              private translate: TranslateService,
+              private deviceService: DeviceService) {
+  }
+
+
+  ngOnInit(): void {
+    const HOST = window.location.hostname;
+    if (this.deviceId) {
+      this.deviceService.getDeviceCredentials(this.deviceId).subscribe(credentials=>{
+        this.token = credentials.credentialsId;
+        this.createRunCode(HOST);
+      })
+    }
+    this.selectedOSControll = new FormControl('');
+    // @ts-ignore
+    const platform = window.navigator?.userAgentData?.platform || window.navigator.platform,
+      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
+      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];
+    if (macosPlatforms.indexOf(platform) !== -1) {
+      this.selectedOSControll.setValue(OsType.macos);
+    } else if (windowsPlatforms.indexOf(platform) !== -1) {
+      this.selectedOSControll.setValue(OsType.windows);
+    } else if (/Linux/.test(platform)) {
+      this.selectedOSControll.setValue(OsType.linux);
+    }
+    this.createRunCode(HOST);
+  }
+
+  createRunCode(HOST) {
+    this.linuxCode = "docker run -it -v ~/.tb-gateway/logs:/thingsboard_gateway/logs -v " +
+      "~/.tb-gateway/extensions:/thingsboard_gateway/extensions -v ~/.tb-gateway/config:/thingsboard_gateway/config --name tb-gateway -e host=" +
+      HOST +
+      " -e port=1883 -e accessToken=" +
+      this.token +
+      " --restart always thingsboard/tb-gateway";
+    this.windowsCode = "docker run -it -v %HOMEPATH%/tb-gateway/config:/thingsboard_gateway/config -v " +
+      "%HOMEPATH%/tb-gateway/extensions:/thingsboard_gateway/extensions -v %HOMEPATH%/tb-gateway/logs:/thingsboard_gateway/logs " +
+      "--name tb-gateway -e host=" +
+      HOST +
+      " -e port=1883 -e accessToken=" +
+      this.token +
+      " --restart always thingsboard/tb-gateway";
+  }
+
+  onDockerCodeCopied() {
+    this.store.dispatch(new ActionNotificationShow(
+      {
+        message: this.translate.instant('gateway.command-copied-message'),
+        type: 'success',
+        target: 'dockerCommandDialogContent',
+        duration: 1200,
+        verticalPosition: 'bottom',
+        horizontalPosition: 'left'
+      }));
+  }
+}

ui-ngx/src/app/modules/home/components/gateway/gateway-command-dialog.component.html

@@ -43,42 +43,7 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content tb-toast toastTarget="dockerCommandDialogContent">
+  <tb-gateway-command [token]="data.credentials.credentialsId"></tb-gateway-command>
-    <mat-button-toggle-group [formControl]="selectedOSControll" aria-label="Favorite Color">
-      <mat-button-toggle [value]="osTypes.windows"><span translate>gateway.windows </span></mat-button-toggle>
-      <mat-button-toggle [value]="osTypes.linux"><span translate>gateway.linux-macos </span></mat-button-toggle>
-    </mat-button-toggle-group>
-    <div class="mat-content" fxLayout="column" *ngIf="selectedOSControll.value !== osTypes.windows">
-<!--      <span translate>gateway.linux-macos</span>-->
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ linuxCode }}</code></pre>
-        <button mat-icon-button
-                color="primary"
-                ngxClipboard
-                cbContent="{{ linuxCode }}"
-                (cbOnSuccess)="onDockerCodeCopied()"
-                matTooltip="{{ 'gateway.copy-command' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
-        </button>
-      </div>
-    </div>
-    <div class="mat-content" fxLayout="column" *ngIf="selectedOSControll.value === osTypes.windows">
-<!--      <span translate>gateway.windows</span>-->
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ windowsCode }}</code></pre>
-        <button mat-icon-button
-                color="primary"
-                ngxClipboard
-                cbContent="{{ windowsCode }}"
-                (cbOnSuccess)="onDockerCodeCopied()"
-                matTooltip="{{ 'gateway.copy-command' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
-        </button>
-      </div>
-    </div>
-  </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-button color="primary"
             type="button"

ui-ngx/src/app/modules/home/components/gateway/gateway-command-dialog.component.ts

@@ -29,16 +29,14 @@
 /// OR TO MANUFACTURE, USE, OR SELL ANYTHING THAT IT  MAY DESCRIBE, IN WHOLE OR IN PART.
 ///
 
-import { Component, Inject, OnInit } from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
-import { Store } from '@ngrx/store';
+import {Store} from '@ngrx/store';
-import { AppState } from '@core/core.state';
+import {AppState} from '@core/core.state';
-import { Router } from '@angular/router';
+import {Router} from '@angular/router';
-import { DialogComponent } from '@app/shared/components/dialog.component';
+import {DialogComponent} from '@app/shared/components/dialog.component';
-import { TranslateService } from '@ngx-translate/core';
+import {TranslateService} from '@ngx-translate/core';
 import {Device, DeviceCredentials} from "@shared/models/device.models";
-import {ActionNotificationShow} from "@core/notification/notification.actions";
-import {FormControl} from "@angular/forms";
 
 export interface GatewayCommandDialogData {
   device: Device,
@@ -57,63 +55,19 @@ enum OsType {
   styleUrls: []
 })
 export class GatewayCommandDialogComponent extends DialogComponent<GatewayCommandDialogComponent> implements OnInit {
-  linuxCode: string;
-  windowsCode: string;
-  selectedOSControll: FormControl;
-  osTypes = OsType;
 
   constructor(protected router: Router,
               protected store: Store<AppState>,
-              private translate: TranslateService,
               @Inject(MAT_DIALOG_DATA) public data: GatewayCommandDialogData,
               public dialogRef: MatDialogRef<GatewayCommandDialogComponent, boolean>,) {
     super(store, router, dialogRef);
-    const ACCESS_TOKEN = data.credentials.credentialsId;
-    const HOST = window.location.hostname;
-    this.selectedOSControll = new FormControl('');
-    // @ts-ignore
-    const platform = window.navigator?.userAgentData?.platform || window.navigator.platform,
-      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
-      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];
-    if (macosPlatforms.indexOf(platform) !== -1) {
-      this.selectedOSControll.setValue(OsType.macos);
-    } else if (windowsPlatforms.indexOf(platform) !== -1) {
-      this.selectedOSControll.setValue(OsType.windows);
-    } else if (/Linux/.test(platform)) {
-      this.selectedOSControll.setValue(OsType.linux);
-    }
-    this.linuxCode = "docker run -it -v ~/.tb-gateway/logs:/thingsboard_gateway/logs -v " +
-      "~/.tb-gateway/extensions:/thingsboard_gateway/extensions -v ~/.tb-gateway/config:/thingsboard_gateway/config --name tb-gateway -e host=" +
-      HOST +
-      " -e port=1883 -e accessToken=" +
-      ACCESS_TOKEN +
-      " --restart always thingsboard/tb-gateway";
-    this.windowsCode = "docker run -it -v %HOMEPATH%/tb-gateway/config:/thingsboard_gateway/config -v " +
-      "%HOMEPATH%/tb-gateway/extensions:/thingsboard_gateway/extensions -v %HOMEPATH%/tb-gateway/logs:/thingsboard_gateway/logs " +
-      "--name tb-gateway -e host=" +
-      HOST +
-      " -e port=1883 -e accessToken=" +
-      ACCESS_TOKEN +
-      " --restart always thingsboard/tb-gateway";
-
   }
 
-  ngOnInit(): void {
+  ngOnInit() {
   }
 
   close(): void {
     this.dialogRef.close();
   }
 
-  onDockerCodeCopied() {
-    this.store.dispatch(new ActionNotificationShow(
-      {
-        message: this.translate.instant('gateway.command-copied-message'),
-        type: 'success',
-        target: 'dockerCommandDialogContent',
-        duration: 1200,
-        verticalPosition: 'bottom',
-        horizontalPosition: 'left'
-      }));
-  }
 }

ui-ngx/src/app/modules/home/components/gateway/gateway-list-table-config.ts

@@ -71,7 +71,7 @@ export class GatewayListTableConfig extends EntityTableConfig<Device, TimePageLi
               pageMode = false) {
     super();
     this.loadDataOnInit = updateOnInit;
-    this.tableTitle = '';
+    this.tableTitle = 'Gateway list';
     this.useTimePageLink = false;
     this.pageMode = false;
     this.displayPagination = false;

ui-ngx/src/app/modules/home/components/shared-home-components.module.ts

@@ -20,6 +20,7 @@ import { SharedModule } from '@app/shared/shared.module';
 import { AlarmDetailsDialogComponent } from '@home/components/alarm/alarm-details-dialog.component';
 import { GatewayCommandDialogComponent } from "@home/components/gateway/gateway-command-dialog.component";
 import { SHARED_HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
+import { DeviceCredentialsModule } from "@home/components/device/device-credentials.module";
 
 @NgModule({
   providers: [
@@ -32,7 +33,8 @@ import { SHARED_HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
     ],
   imports: [
     CommonModule,
-    SharedModule
+    SharedModule,
+    DeviceCredentialsModule
   ],
   exports: [
     AlarmDetailsDialogComponent,

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

@@ -148,5 +148,6 @@
         </mat-form-field>
       </div>
     </fieldset>
+    <tb-gateway-command *ngIf="entity?.id?.id && entityForm.get('additionalInfo.gateway').value && !isEdit" [deviceId]="entity?.id?.id" ></tb-gateway-command>
   </form>
 </div>