UI: gateway dashboard improvements

application/src/main/data/json/tenant/dashboards/gateways.json

@@ -5218,7 +5218,7 @@
             "widgets": {
               "02a05113-d878-b086-328e-75bd6f02b2bb": {
                 "sizeX": 24,
-                "sizeY": 11,
+                "sizeY": 12,
                 "row": 0,
                 "col": 0
               }
@@ -5230,7 +5230,7 @@
               "backgroundSizeMode": "100%",
               "autoFillHeight": true,
               "backgroundImageUrl": null,
-              "mobileAutoFillHeight": false,
+              "mobileAutoFillHeight": true,
               "mobileRowHeight": 70,
               "outerMargin": true
             }

ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.ts

@@ -77,7 +77,7 @@ export class AddConnectorDialogComponent extends DialogComponent<AddConnectorDia
   }
 
   helpLinkId(): string {
-    return "https://thingsboard.io/docs/iot-gateway/configuration/";
+    return 'https://thingsboard.io/docs/iot-gateway/configuration/';
   }
 
   cancel(): void {

ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss

@@ -15,10 +15,11 @@
  */
 
 :host {
+  display: grid;
+  height: 100%;
+
   .key-mapping {
-    min-width: 700px;
-    width: 900px;
-    height: 770px;
+    max-width: 900px;
     display: flex;
     flex-direction: column;
 
@@ -30,6 +31,10 @@
       padding: 4px 0;
     }
   }
+
+  .mat-mdc-dialog-content {
+    max-height: 670px;
+  }
 }
 
 :host ::ng-deep {
@@ -43,7 +48,7 @@
   }
   .tb-form-row {
     .fixed-title-width {
-      min-width: 120px;
+      min-width: 40px;
       width: 35%;
       white-space: nowrap;
       overflow: hidden;

ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts

@@ -254,7 +254,7 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
   }
 
   helpLinkId(): string {
-    return "https://thingsboard.io/docs/iot-gateway/config/mqtt/#section-mapping";
+    return 'https://thingsboard.io/docs/iot-gateway/config/mqtt/#section-mapping';
   }
 
   cancel(): void {
@@ -306,11 +306,6 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
     }
   }
 
-  // updateVisibleChips(count: number): void {
-  //   console.log(count, 'count');
-  //   this.hiddenAttributesCount = count;
-  // }
-
   private prepareMappingData(): {[key: string]: any} {
     const formValue = this.mappingForm.value;
     if (this.data.mappingType === MappingType.DATA) {

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

@@ -177,7 +177,7 @@
               <div class="fixed-title-width tb-required" translate>gateway.name</div>
               <div class="tb-flex no-gap">
                 <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <input matInput name="value" formControlName="name" placeholder="{{ 'gateway.default' | translate }}"/>
+                  <input matInput name="value" formControlName="name" placeholder="{{ 'gateway.set' | translate }}"/>
                   <mat-icon matSuffix
                             matTooltipPosition="above"
                             matTooltipClass="tb-error-tooltip"
@@ -245,13 +245,14 @@
                   <div class="fixed-title-width tb-required" translate>gateway.port</div>
                   <div class="tb-flex no-gap">
                     <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                      <input matInput type="number" name="value" formControlName="port" placeholder="{{ 'gateway.set' | translate }}"/>
+                      <input matInput type="number" min="0" name="value" formControlName="port" placeholder="{{ 'gateway.set' | translate }}"/>
                       <mat-icon matSuffix
                                 matTooltipPosition="above"
                                 matTooltipClass="tb-error-tooltip"
-                                [matTooltip]="('gateway.port-required') | translate"
-                                *ngIf="connectorForm.get('basicConfig.broker.port').hasError('required')
-                                       && connectorForm.get('basicConfig.broker.port').touched"
+                                [matTooltip]="portErrorTooltip | translate"
+                                *ngIf="(connectorForm.get('basicConfig.broker.port').hasError('required') ||
+                                        connectorForm.get('basicConfig.broker.port').hasError('min')) &&
+                                        connectorForm.get('basicConfig.broker.port').touched"
                                 class="tb-error">
                         warning
                       </mat-icon>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts

@@ -178,6 +178,15 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     this.connectorForm.disable();
   }
 
+  get portErrorTooltip(): string {
+    if (this.connectorForm.get('basicConfig.broker.port').hasError('required')) {
+      return 'gateway.port-required';
+    } else if (this.connectorForm.get('basicConfig.broker.port').hasError('min')) {
+      return 'gateway.only-natural-numbers';
+    }
+    return '';
+  }
+
   ngAfterViewInit() {
     this.connectorForm.get('type').valueChanges.pipe(
       takeUntil(this.destroy$)
@@ -639,7 +648,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     const brokerGroup = this.fb.group({
       name: ['', []],
       host: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      port: [null, [Validators.required]],
+      port: [null, [Validators.required, Validators.min(0)]],
       version: [5, []],
       clientId: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
       maxNumberOfWorkers: [100, [Validators.required, Validators.min(1)]],

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

@@ -2797,9 +2797,9 @@
         "payload-type": "Payload type",
         "platform-side": "Platform side",
         "JSON": "JSON",
-        "JSON-hint": "Converter for this payload type processes MQTT messages in JSON format. It uses JSON Path expressions to extract vital details such as device names, device profile names, attributes, and time series from the message. And regular expressions to get device details from topics.",
+        "JSON-hint": "Converter for this payload type processes MQTT messages in JSON format. It uses JSON Path expressions to extract vital details such as device names, device profile names, attributes, and timeseries from the message. And regular expressions to get device details from topics.",
         "bytes": "Bytes",
-        "bytes-hint": "Converter for this payload type designed for binary MQTT payloads, this converter directly interprets binary data to retrieve device names and device profile names, along with attributes and time series, using specific byte positions for data extraction.",
+        "bytes-hint": "Converter for this payload type designed for binary MQTT payloads, this converter directly interprets binary data to retrieve device names and device profile names, along with attributes and timeseries, using specific byte positions for data extraction.",
         "custom": "Custom",
         "custom-hint": "This option allows you to use a custom converter for specific data tasks. You need to add your custom converter to the extension folder and enter its class name in the UI settings. Any keys you provide will be sent as configuration to your custom converter.",
         "client-cert-path": "Path to client certificate file",
@@ -2807,7 +2807,7 @@
         "client-id": "Client ID",
         "data-conversion": "Data conversion",
         "data-mapping": "Data mapping",
-        "data-mapping-hint": "Data mapping provides the capability to parse and convert the data received from a MQTT client in incoming messages into specific attributes and telemetry data keys.",
+        "data-mapping-hint": "Data mapping provides the capability to parse and convert the data received from a MQTT client in incoming messages into specific attributes and timeseries data keys.",
         "delete": "Delete configuration",
         "delete-attribute": "Delete attribute",
         "delete-key": "Delete key",
@@ -3044,6 +3044,7 @@
         "with-response": "With response",
         "without-response": "Without response",
         "other": "Other",
+        "only-natural-numbers": "Only natural numbers allowed.",
         "save-tip": "Save configuration file",
         "security": "Security",
         "security-type": "Security type",
@@ -3056,7 +3057,7 @@
         },
         "select-connector": "Select connector to display config",
         "send-change-data": "Send data only on change",
-        "send-change-data-hint": "The values will be saved to the database only if they are different from the corresponding values in the previous converted message. This functionality applies to both attributes and telemetry in the converter output.",
+        "send-change-data-hint": "The values will be saved to the database only if they are different from the corresponding values in the previous converted message. This functionality applies to both attributes and timeseries in the converter output.",
         "server-port": "Server port",
         "set": "Set",
         "statistics": {