Modbus minor UI adjustments

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html

@@ -26,12 +26,16 @@
             <mat-expansion-panel class="tb-settings" [expanded]="last">
               <mat-expansion-panel-header fxLayout="row wrap">
                 <mat-panel-title>
-                  <div class="title-container">
-                    <span *ngIf="isMaster else tagName">
-                      {{ keyControl.get('tag').value }}{{ '-' }}{{ keyControl.get('value').value }}
-                    </span>
-                    <ng-template #tagName>{{ keyControl.get('tag').value }}</ng-template>
+                  <div *ngIf="isMaster else tagName" class="title-container" tbTruncateWithTooltip>
+                    {{ keyControl.get('tag').value }}{{ '-' }}{{ keyControl.get('value').value }}
                   </div>
+                  <ng-template #tagName>
+                    <div class="tb-flex">
+                      <div class="title-container" tbTruncateWithTooltip>{{ 'gateway.key' | translate }}: {{ keyControl.get('tag').value }}</div>
+                      <div class="title-container">{{ 'gateway.address' | translate }}: {{ keyControl.get('address').value }}</div>
+                      <div class="title-container">{{ 'gateway.type' | translate }}: {{ keyControl.get('type').value }}</div>
+                    </div>
+                  </ng-template>
                 </mat-panel-title>
               </mat-expansion-panel-header>
               <ng-template matExpansionPanelContent>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.scss

@@ -20,10 +20,7 @@
     max-width: 700px;
 
     .title-container {
-      max-width: 11vw;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap
+      width: 12vw;
     }
 
     .key-panel {

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.ts

@@ -40,6 +40,7 @@ import { generateSecret } from '@core/utils';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { TruncateWithTooltipDirective } from '@shared/directives/truncate-with-tooltip.directive';
 
 @Component({
   selector: 'tb-modbus-data-keys-panel',
@@ -50,6 +51,7 @@ import { Subject } from 'rxjs';
     CommonModule,
     SharedModule,
     GatewayHelpLinkPipe,
+    TruncateWithTooltipDirective,
   ]
 })
 export class ModbusDataKeysPanelComponent implements OnInit, OnDestroy {
@@ -78,8 +80,9 @@ export class ModbusDataKeysPanelComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
 
   private readonly defaultReadFunctionCodes = [3, 4];
-  private readonly defaultWriteFunctionCodes = [5, 6, 15, 16];
-  private readonly stringAttrUpdatesWriteFunctionCodes = [6, 16];
+  private readonly bitsReadFunctionCodes = [1, 2];
+  private readonly defaultWriteFunctionCodes = [6, 16];
+  private readonly bitsWriteFunctionCodes = [5, 15];
 
   constructor(private fb: UntypedFormBuilder) {}
 
@@ -177,23 +180,23 @@ export class ModbusDataKeysPanelComponent implements OnInit, OnDestroy {
   }
 
   private getFunctionCodes(dataType: ModbusDataType): number[] {
+    const writeFunctionCodes = [
+      ...(dataType === ModbusDataType.BITS ? this.bitsWriteFunctionCodes : []), ...this.defaultWriteFunctionCodes
+    ];
+
     if (this.keysType === ModbusValueKey.ATTRIBUTES_UPDATES) {
-      return dataType === ModbusDataType.STRING
-        ? this.stringAttrUpdatesWriteFunctionCodes
-        : this.defaultWriteFunctionCodes;
+      return writeFunctionCodes.sort((a, b) => a - b);
     }
 
     const functionCodes = [...this.defaultReadFunctionCodes];
     if (dataType === ModbusDataType.BITS) {
-      const bitsFunctionCodes = [1, 2];
-      functionCodes.push(...bitsFunctionCodes);
-      functionCodes.sort();
+      functionCodes.push(...this.bitsReadFunctionCodes);
     }
     if (this.keysType === ModbusValueKey.RPC_REQUESTS) {
-      functionCodes.push(...this.defaultWriteFunctionCodes);
+      functionCodes.push(...writeFunctionCodes);
     }
 
-    return functionCodes;
+    return functionCodes.sort((a, b) => a - b);
   }
 
   private getDefaultFunctionCodes(): number[] {

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

@@ -16,6 +16,9 @@
 
 -->
 <div class="tb-master-table tb-absolute-fill">
+  <div class="tb-form-panel no-border no-padding padding-top">
+    <div class="tb-form-hint tb-primary-fill tb-flex center">{{ 'gateway.hints.modbus-master' | translate }}</div>
+  </div>
   <div fxFlex fxLayout="column" class="tb-master-table-content">
     <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
       <div class="mat-toolbar-tools">

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

@@ -169,7 +169,7 @@ export class ModbusMasterTableComponent implements ControlValueAccessor, Validat
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
       data: {
         value,
-        buttonTitle: withIndex ? 'action.add' : 'action.apply'
+        buttonTitle: withIndex ? 'action.apply' : 'action.add'
       }
     }).afterClosed()
       .pipe(take(1), takeUntil(this.destroy$))

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

@@ -28,7 +28,7 @@
   </mat-toolbar>
   <div mat-dialog-content [formGroup]="slaveConfigFormGroup" class="tb-form-panel">
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width tb-required" translate>gateway.name</div>
+      <div class="fixed-title-width slave-name-label 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.set' | translate }}"/>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss

@@ -18,4 +18,9 @@
     width: 80vw;
     max-width: 900px;
   }
+
+  .slave-name-label {
+    margin-right: 16px;
+    color: rgba(0, 0, 0, 0.87);
+  }
 }

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

@@ -3326,7 +3326,8 @@
         "write-register": "Write Register",
         "write-registers": "Write Registers",
         "hints": {
-            "modbus-server": "Starting with version 3.0, Gateway can run as a Modbus slave.",
+            "modbus-master": "Configuration sections for connecting to Modbus servers and reading data from them.",
+            "modbus-server": "Configuration section for the Modbus server, storing data and sending updates to the platform when changes occur or at fixed intervals.",
             "remote-configuration": "Enables remote configuration and management of the gateway",
             "remote-shell": "Enables remote control of the operating system with the gateway from the Remote Shell widget",
             "host": "Hostname or IP address of platform server",