requested changes and internationalization fix

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

@@ -27,12 +27,12 @@
       HTTP
     </mat-button-toggle>
   </mat-button-toggle-group>
-  <span  class="help-title">In order to publish telemetry data to (<a [href]="helpLink" target="_blank">ThingsBoard device</a>) with credentials of the current device you can use the following commands.</span>
+  <span  class="help-title" innerHTML="{{ translate.get('device.telemetry-commands-help-link', {helpLink}) | async }}"></span>
   <div class="mat-content" fxLayout="column">
     <div class="mat-content" fxLayout="column" *ngIf="protocolCtrl.value === 'mqtt'">
       <span>MQTT </span>
-      <span>1. Setup: <span [innerHTML]="mqttSetup"></span></span>
+      <span>{{'device.telemetry-command-setup-step'| translate}} <span [innerHTML]="mqttSetup"></span></span>
-      <span class="protocol-send-command">2. Send command:</span>
+      <span class="protocol-send-command">{{'device.telemetry-command-send-step'| translate}} </span>
       <div fxLayout="row wrap" fxLayoutAlign="start center">
         <pre class="tb-highlight" fxFlex><code class="pre-wrap">{{ mqttCode }}</code></pre>
         <button mat-icon-button
@@ -48,8 +48,8 @@
     </div>
     <div class="mat-content" fxLayout="column" *ngIf="protocolCtrl.value === 'coap'">
       <span>COAP </span>
-      <span>1. Setup: <span [innerHTML]="coapSetup"></span></span>
+      <span>{{'device.telemetry-command-setup-step'| translate}} <span [innerHTML]="coapSetup"></span></span>
-      <span class="protocol-send-command">2. Send command:  (based on CoAP cli)</span>
+      <span class="protocol-send-command">{{'device.telemetry-command-send-step-coap'| translate}}</span>
       <div fxLayout="row wrap" fxLayoutAlign="start center">
         <pre class="tb-highlight" fxFlex><code class="pre-wrap">{{ coapCode }}</code></pre>
         <button mat-icon-button
@@ -67,9 +67,9 @@
     </div>
     <div class="mat-content" fxLayout="column" *ngIf="protocolCtrl.value === 'http'">
       <span>HTTP </span>
-      <span>1. Setup: <span [innerHTML]="httpSetup"></span></span>
+      <span>{{'device.telemetry-command-setup-step'| translate}} <span [innerHTML]="httpSetup"></span></span>
-      <span class="protocol-send-command">2. Send command:</span>
+      <span class="protocol-send-command">{{'device.telemetry-command-send-step'| translate}}</span>
-      <div fxLayout="row wrpa"fxLayoutAlign="start center">
+      <div fxLayout="row wrpa" fxLayoutAlign="start center">
         <pre class="tb-highlight" fxFlex><code class="pre-wrap">{{ httpCode }}</code></pre>
         <button mat-icon-button
                 color="primary"

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

@@ -52,7 +52,7 @@ export class DeviceExampleCommandComponent implements OnInit {
 
   constructor(protected router: Router,
               protected store: Store<AppState>,
-              private translate: TranslateService) {
+              public translate: TranslateService) {
   }
 
 

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html

@@ -187,7 +187,7 @@
     <mat-expansion-panel>
       <mat-expansion-panel-header>
         <mat-panel-title>
-          <div class="tb-panel-title">{{ 'gateway.connectors' | translate | uppercase }}</div>
+          <div class="tb-panel-title">{{ 'gateway.connectors-config' | translate | uppercase }}</div>
         </mat-panel-title>
       </mat-expansion-panel-header>
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html

@@ -17,10 +17,10 @@
 -->
 <section class="tb-widget-settings" [formGroup]="GatewayLogSettingForm" fxLayout="column">
   <mat-slide-toggle class="mat-slide" formControlName="isConnectorLog">
-    Is Connector
+    {{"widgets.gateway.is-connector" | translate}}
   </mat-slide-toggle>
   <mat-form-field fxFlex class="mat-block" *ngIf="GatewayLogSettingForm.get('isConnectorLog').value">
-    <mat-label translate>State parameter connector name</mat-label>
+    <mat-label>{{"widgets.gateway.state-param-name" | translate}}</mat-label>
     <input matInput formControlName="connectorLogState">
   </mat-form-field>
 </section>

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-service-rpc-settings.component.html

@@ -17,6 +17,6 @@
 -->
 <section class="tb-widget-settings" [formGroup]="GatewayLogSettingForm" fxLayout="column">
   <mat-slide-toggle class="mat-slide" formControlName="isConnector">
-    Is Connector
+    {{"widgets.gateway.is-connector" | translate}}
   </mat-slide-toggle>
 </section>

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

@@ -16,7 +16,7 @@
 
 -->
 <div mat-dialog-content tb-toast fxLayout="column" toastTarget="dockerCommandDialogContent">
-  <span style="padding-bottom: 15px;">In order to run ThingsBoard IoT gateway in docker with credentials for this device you can use the following commands.</span>
+  <span style="padding-bottom: 15px;">{{ 'gateway.docker-label' | translate }}</span>
   <div fxFlex fxLayout="row" style="justify-content: space-between; flex-grow: 0">
     <mat-button-toggle-group [formControl]="selectedOSCControl" aria-label="Favorite Color" style="width: max-content; flex-grow: 0">
       <mat-button-toggle [value]="osTypes.windows"><span translate>gateway.windows </span></mat-button-toggle>

ui-ngx/src/app/shared/components/device/gateway-configuration.component.html

@@ -49,7 +49,7 @@
               <mat-form-field fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
                 <mat-label translate>gateway.thingsboard-host</mat-label>
                 <input matInput formControlName="host"/>
-                <mat-icon class="mat-form-field-infix pe suffix-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.host' | translate }}">info_outlined
                 </mat-icon>
@@ -72,7 +72,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('pattern')">
                   {{'gateway.thingsboard-port-pattern' | translate }}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.port' | translate }}">info_outlined
                 </mat-icon>
@@ -98,7 +98,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.accessToken').hasError('required')">
                   {{'security.access-token-required' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.token' | translate }}">info_outlined
                 </mat-icon>
@@ -110,7 +110,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.clientId').hasError('required')">
                   {{'security.clientId-required' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.client-id' | translate }}">info_outlined
                 </mat-icon>
@@ -122,7 +122,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.username').hasError('required')">
                   {{'security.username-required' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.username' | translate }}">info_outlined
                 </mat-icon>
@@ -131,7 +131,7 @@
                               fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
                 <mat-label translate>security.password</mat-label>
                 <input matInput formControlName="password"/>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.password' | translate }}">info_outlined
                 </mat-icon>
@@ -182,7 +182,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('logs.dateFormat').hasError('required')">
                   {{'gateway.logs.date-format-required' | translate }}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.date-form' | translate }}">info_outlined
                 </mat-icon>
@@ -193,7 +193,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('logs.logFormat').hasError('required')">
                   {{'gateway.logs.log-format-required' | translate }}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.log-format' | translate }}">info_outlined
                 </mat-icon>
@@ -206,7 +206,7 @@
             </mat-expansion-panel-header>
             <mat-slide-toggle color="primary" formControlName="enabled">
               {{ 'gateway.logs.remote-logs'  | translate }}
-              <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+              <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                         matSuffix style="cursor:pointer;"
                         matTooltip="{{'gateway.hints.remote-log' | translate }}">info
               </mat-icon>
@@ -277,7 +277,7 @@
                   *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.backupCount').hasError('min')">
                   {{'gateway.logs.backup-count-min' | translate }}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.backup-count' | translate }}">info_outlined
                 </mat-icon>
@@ -319,7 +319,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('storage.read_records_count').hasError('pattern')">
                   {{'gateway.storage-read-record-count-pattern' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.read-record-count' | translate }}">info_outlined
                 </mat-icon>
@@ -337,7 +337,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_count').hasError('pattern')">
                   {{'gateway.storage-max-records-pattern' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.max-records-count' | translate }}">info_outlined
                 </mat-icon>
@@ -349,7 +349,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('storage.data_folder_path').hasError('required')">
                   {{'gateway.storage-data-folder-path-required' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.data-folder' | translate }}">info_outlined
                 </mat-icon>
@@ -367,7 +367,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('storage.max_file_count').hasError('pattern')">
                   {{'gateway.storage-max-files-pattern' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.max-file-count' | translate }}">info_outlined
                 </mat-icon>
@@ -385,7 +385,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('storage.max_read_records_count').hasError('pattern')">
                   {{'gateway.storage-max-read-record-count-pattern' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.max-read-count' | translate }}">info_outlined
                 </mat-icon>
@@ -403,7 +403,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_per_file').hasError('pattern')">
                   {{'gateway.storage-max-records-pattern' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.max-records' | translate }}">info_outlined
                 </mat-icon>
@@ -415,7 +415,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('storage.data_file_path').hasError('required')">
                   {{'gateway.storage-path-required' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.data-folder' | translate }}">info_outlined
                 </mat-icon>
@@ -433,7 +433,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_check_in_hours').hasError('pattern')">
                   {{'gateway.messages-ttl-check-in-hours-pattern' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.ttl-check-hour' | translate }}">info_outlined
                 </mat-icon>
@@ -451,7 +451,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_in_days').hasError('pattern')">
                   {{'gateway.messages-ttl-in-days-pattern' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.ttl-messages-day' | translate }}">info_outlined
                 </mat-icon>
@@ -602,7 +602,7 @@
                       *ngIf="commandControl.get('attributeOnGateway').hasError('required')">
                       {{'gateway.statistics.attribute-name-required' | translate }}
                     </mat-error>
-                    <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                    <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                               matSuffix style="cursor:pointer;"
                               matTooltip="{{'gateway.hints.attribute' | translate }}">info_outlined
                     </mat-icon>
@@ -622,7 +622,7 @@
                       *ngIf="commandControl.get('timeout').hasError('pattern')">
                       {{'gateway.statistics.timeout-pattern' | translate }}
                     </mat-error>
-                    <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                    <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                               matSuffix style="cursor:pointer;"
                               matTooltip="{{'gateway.hints.timeout' | translate }}">info_outlined
                     </mat-icon>
@@ -634,7 +634,7 @@
                       *ngIf="commandControl.get('command').hasError('required')">
                       {{'gateway.statistics.command-required' | translate }}
                     </mat-error>
-                    <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                    <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                               matSuffix style="cursor:pointer;"
                               matTooltip="{{'gateway.hints.command' | translate }}">info_outlined
                     </mat-icon>
@@ -685,7 +685,7 @@
                   *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds').hasError('min')">
                   {{'gateway.inactivity-timeout-seconds-min' | translate }}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.inactivity-timeout' | translate }}">info_outlined
                 </mat-icon>
@@ -703,7 +703,7 @@
                   *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds').hasError('min')">
                   {{'gateway.inactivity-check-period-seconds-min' | translate }}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.inactivity-period' | translate }}">info_outlined
                 </mat-icon>
@@ -724,7 +724,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.minPackSendDelayMS').hasError('min')">
                   {{ 'gateway.min-pack-send-delay-min' | translate }}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix  style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.minimal-pack-delay' | translate }}">info_outlined
                 </mat-icon>
@@ -741,7 +741,7 @@
                 <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('max')">
                   {{ 'gateway.mqtt-qos-range' | translate}}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pe suffix-icon" aria-hidden="false" aria-label="help-icon"
+                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
                           matSuffix  style="cursor:pointer;"
                           matTooltip="{{'gateway.hints.qos' | translate }}">info_outlined
                 </mat-icon>

ui-ngx/src/app/shared/components/device/gateway-configuration.component.scss

@@ -159,7 +159,7 @@
     border-radius: 5px;
   }
 
-  ::ng-deep.pe {
+  ::ng-deep.pointer-event {
     pointer-events: all;
   }
 

ui-ngx/src/app/shared/components/device/gateway-connectors.component.html

@@ -19,7 +19,7 @@
   <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="15px" fxFlex class="connector-container">
     <mat-card fxLayout="column" fxFlex.lt-md style="overflow: auto;">
       <mat-toolbar class="mat-mdc-table-toolbar">
-        <h2>Connectors</h2>
+        <h2>{{ 'gateway.connectors' | translate }}</h2>
         <span fxFlex></span>
         <button mat-icon-button
                 [disabled]="isLoading$ | async"
@@ -34,7 +34,7 @@
              matSortDisableClear>
         <ng-container matColumnDef="enabled" sticky>
           <mat-header-cell *matHeaderCellDef style="width: 30px;">
-            Enabled
+            {{ 'gateway.connectors-table-enabled' | translate }}
           </mat-header-cell>
           <mat-cell *matCellDef="let attribute">
             <mat-slide-toggle [checked]="activeConnectors.includes(attribute.key)"
@@ -42,13 +42,16 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="key">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> Name</mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%">
+            {{ 'gateway.connectors-table-name' | translate }}</mat-header-cell>
           <mat-cell *matCellDef="let attribute">
             {{ attribute.key }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="type">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> Type</mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
+            {{ 'gateway.connectors-table-type' | translate }}
+          </mat-header-cell>
           <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
             {{ returnType(attribute) }}
           </mat-cell>
@@ -56,7 +59,7 @@
         <ng-container matColumnDef="actions" stickyEnd>
           <mat-header-cell *matHeaderCellDef
                            [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
-            Actions
+            {{ 'gateway.connectors-table-actions' | translate }}
           </mat-header-cell>
           <mat-cell *matCellDef="let attribute"
                     [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
@@ -119,22 +122,22 @@
     <div [formGroup]="connectorForm" fxLayout="column">
       <mat-card fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="15px" fxLayoutGap.lt-md="5px">
         <mat-form-field class="mat-block tb-value-type">
-          <mat-label>Name</mat-label>
+          <mat-label>{{ 'gateway.connectors-table-name' | translate }}</mat-label>
           <input matInput formControlName="name"/>
         </mat-form-field>
         <mat-form-field class="mat-block tb-value-type">
-          <mat-label>Type</mat-label>
+          <mat-label>{{ 'gateway.connectors-table-type' | translate }}</mat-label>
           <mat-select formControlName="type">
             <mat-option style="text-transform: uppercase"
                         *ngFor="let type of gatewayConnectorDefaultTypes | keyvalue" [value]="type.key">{{type.value}}</mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field class="mat-block tb-value-type" *ngIf="connectorForm.get('type').value === 'grpc'">
-          <mat-label>Key</mat-label>
+          <mat-label>{{ 'gateway.connectors-table-key' | translate }}</mat-label>
           <input matInput formControlName="key"/>
         </mat-form-field>
         <mat-form-field class="mat-block tb-value-type" *ngIf="connectorForm.get('type').value === 'custom'">
-          <mat-label>Class</mat-label>
+          <mat-label>{{ 'gateway.connectors-table-class' | translate }}</mat-label>
           <input matInput formControlName="class"/>
         </mat-form-field>
         <mat-form-field class="mat-block tb-value-type">

ui-ngx/src/app/shared/components/device/gateway-service-rpc.component.html

@@ -35,14 +35,14 @@
     <mat-icon class="material-icons-outlined" aria-hidden="false" aria-label="help-icon"
               matSuffix style="cursor:pointer;"
               (click)="openEditJSONDialog($event)"
-              matTooltip="Edit params">edit
+              matTooltip="{{'gateway.rpc-command-edit-params' | translate}}">edit
     </mat-icon>
   </mat-form-field>
   <button mat-raised-button color="primary" (click)="sendCommand()"
-  [disabled]="commandForm.invalid">Send</button>
+  [disabled]="commandForm.invalid">{{'gateway.rpc-command-send' | translate}}</button>
 </mat-card>
 <mat-card class="result-block" [formGroup]="commandForm" >
-  <span>Result</span>
+  <span>{{'gateway.rpc-command-result' | translate}}</span>
   <mat-divider></mat-divider>
   <tb-json-content [contentType]="contentTypes.JSON" readonly="true" formControlName="result"></tb-json-content>
 </mat-card>

ui-ngx/src/app/shared/components/device/gateway-statistics.component.html

@@ -46,13 +46,13 @@
            matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
            matSortDisableClear>
       <ng-container matColumnDef="0">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'audit-log.timestamp' | translate}}</mat-header-cell>
         <mat-cell *matCellDef="let row; let rowIndex = index">
           {{row[0]| date:'yyyy-MM-dd HH:mm:ss' }}
         </mat-cell>
       </ng-container>
       <ng-container matColumnDef="1">
-        <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 70%">Message</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 70%">{{"event.message" | translate}}</mat-header-cell>
         <mat-cell *matCellDef="let row">
           {{ row[1] }}
         </mat-cell>

ui-ngx/src/app/shared/components/device/gateway-statistics.component.ts

@@ -39,7 +39,6 @@ import { PageLink } from '@shared/models/page/page-link';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
-import { isNumber } from '@core/utils';
 
 
 @Component({
@@ -131,7 +130,7 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
         this.attributeService.getEntityAttributes(gateway.id, AttributeScope.SHARED_SCOPE, ["general_configuration"]).subscribe((resp: AttributeData[]) => {
           if (resp && resp.length) {
             this.commands = resp[0].value.statistics.commands;
-            if (!this.statisticForm.get('statisticKey').value) {
+            if (!this.statisticForm.get('statisticKey').value && this.commands && this.commands.length) {
               this.statisticForm.get('statisticKey').setValue(this.commands[0].attributeOnGateway);
               this.createChartsSubscription(gateway, this.commands[0].attributeOnGateway);
             }

ui-ngx/src/app/shared/components/dialog/gateway-remote-configuration-dialog.html

@@ -31,9 +31,9 @@
       <span innerHTML="{{'gateway.configuration-delete-dialog-body' | translate}} <b>{{gatewayName}}</b>" > </span>
       <mat-form-field  class="mat-block tb-value-type" style="flex-grow: 0">
         <mat-label translate>gateway.configuration-delete-dialog-input</mat-label>
-        <input matInput [formControl]="gatewayForm" required/>
+        <input matInput [formControl]="gatewayControl" required/>
         <mat-error
-          *ngIf="gatewayForm.hasError('required')">
+          *ngIf="gatewayControl.hasError('required')">
           {{'gateway.configuration-delete-dialog-input-required' | translate }}
         </mat-error>
       </mat-form-field>
@@ -49,7 +49,7 @@
     <button mat-button color="warn"
             type="button"
             cdkFocusInitial
-            [disabled]="gatewayForm.value !== gatewayName"
+            [disabled]="gatewayControl.value !== gatewayName"
             (click)="turnOff()">
       {{ 'gateway.configuration-delete-dialog-confirm' | translate }}
     </button>

ui-ngx/src/app/shared/components/dialog/gateway-remote-configuration-dialog.ts

@@ -36,7 +36,7 @@ export class GatewayRemoteConfigurationDialogComponent extends DialogComponent<G
 
   gatewayName: string;
 
-  gatewayForm: FormControl;
+  gatewayControl: FormControl;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
@@ -45,7 +45,7 @@ export class GatewayRemoteConfigurationDialogComponent extends DialogComponent<G
               private fb: FormBuilder) {
     super(store, router, dialogRef);
     this.gatewayName = this.data.gatewayName;
-    this.gatewayForm = this.fb.control(null);
+    this.gatewayControl = this.fb.control(null);
   }
 
   ngOnInit(): void {

ui-ngx/src/app/shared/components/file-input.component.html

@@ -17,8 +17,8 @@
 -->
 <div class="tb-container">
   <label class="tb-title" [ngClass]="{'tb-required': !disabled && required}">{{ label }}
-    <mat-icon *ngIf="hint" class="material-icons-outlined pe"
+    <mat-icon *ngIf="hint" class="material-icons-outlined pointer-event"
-              matSuffix style="cursor:pointer;"
+              style="cursor:pointer;"
               matTooltip="{{hint}}">info_outlined
     </mat-icon>
   </label>

ui-ngx/src/app/shared/components/file-input.component.scss

@@ -94,7 +94,7 @@ $previewSize: 100px !default;
     }
   }
 
-  .pe {
+  .pointer-event {
     pointer-events: auto;
   }
 }

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

@@ -1311,6 +1311,10 @@
         "copyAccessToken": "Copy access token",
         "copy-mqtt-authentication": "Copy MQTT credentials",
         "transportCommandCopiedMessage": "Transport Command has been copied to clipboard",
+        "telemetry-commands-help-link": "In order to publish telemetry data to (<a href='{{helpLink}}' target='_blank'>ThingsBoard device</a>) with credentials of the current device you can use the following commands.",
+        "telemetry-command-setup-step": "1. Setup:",
+        "telemetry-command-send-step": "2. Send command:",
+        "telemetry-command-send-step-coap": "2. Send command: (based on CoAP cli)",
         "idCopiedMessage": "Device Id has been copied to clipboard",
         "accessTokenCopiedMessage": "Device access token has been copied to clipboard",
         "mqtt-authentication-copied-message": "Device MQTT authentication has been copied to clipboard",
@@ -2565,11 +2569,22 @@
             "xmpp": "XMPP Connector",
             "ocpp": "OCPP Connector"
         },
-        "connectors": "Connectors configuration",
+        "connectors": "Connectors",
+        "connectors-config": "Connectors configuration",
         "connectors-active": "Connector active",
         "connectors-inactive": "Connector inactive",
+        "connectors-table-enabled": "Enabled",
+        "connectors-table-name": "Name",
+        "connectors-table-type": "Type",
+        "connectors-table-actions": "Actions",
+        "connectors-table-key": "Key",
+        "connectors-table-class": "Class",
+        "rpc-command-send": "Send",
+        "rpc-command-result": "Result",
+        "rpc-command-edit-params": "Edit parameters",
         "select-connector": "Select connector",
         "gateway-configuration": "Gateway Configuration",
+        "docker-label": "In order to run ThingsBoard IoT gateway in docker with credentials for this device you can use the following commands.",
         "copy-command": "Copy docker command",
         "create-new-gateway": "Create a new gateway",
         "create-new-gateway-text": "Are you sure you want create a new gateway with name: '{{gatewayName}}'?",
@@ -4643,7 +4658,9 @@
             "read-only": "Read only",
             "events-title": "Gateway events form title",
             "events-filter": "Events filter",
-            "event-key-contains": "Event key contains..."
+            "event-key-contains": "Event key contains...",
+            "is-connector": "Is Connector",
+            "state-param-name": "State parameter connector name"
         },
         "gauge": {
             "default-color": "Default color",