Merge branch 'improvements/4097-modbus-adjustments' into improvements/050824-gateway

ui-ngx/src/app/modules/common/modules-map.ts

@@ -99,6 +99,9 @@ import * as TbJsonPipe from '@shared/pipe/tbJson.pipe';
 import * as TruncatePipe from '@shared/pipe/truncate.pipe';
 import * as ImagePipe from '@shared/pipe/image.pipe';
 
+import * as EllipsisChipListDirective from '@shared/directives/ellipsis-chip-list.directive';
+import * as TruncateWithTooltipDirective from '@shared/directives/truncate-with-tooltip.directive';
+
 import * as coercion from '@shared/decorators/coercion';
 import * as enumerable from '@shared/decorators/enumerable';
 import * as TbInject from '@shared/decorators/tb-inject';
@@ -422,6 +425,9 @@ class ModulesMap implements IModulesMap {
     '@shared/pipe/truncate.pipe': TruncatePipe,
     '@shared/pipe/image.pipe': ImagePipe,
 
+    '@shared/directives/ellipsis-chip-list.directive': EllipsisChipListDirective,
+    '@shared/directives/truncate-with-tooltip.directive': TruncateWithTooltipDirective,
+
     '@shared/decorators/coercion': coercion,
     '@shared/decorators/enumerable': enumerable,
     '@shared/decorators/tb-inject': TbInject,

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">
+                  <div *ngIf="isMaster else tagName" class="title-container" tbTruncateWithTooltip>
-                    <span *ngIf="isMaster else tagName">
+                    {{ keyControl.get('tag').value }}{{ '-' }}{{ keyControl.get('value').value }}
-                      {{ keyControl.get('tag').value }}{{ '-' }}{{ keyControl.get('value').value }}
-                    </span>
-                    <ng-template #tagName>{{ keyControl.get('tag').value }}</ng-template>
                   </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;
+      width: 12vw;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap
     }
 
     .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 bitsReadFunctionCodes = [1, 2];
-  private readonly stringAttrUpdatesWriteFunctionCodes = [6, 16];
+  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
+      return writeFunctionCodes.sort((a, b) => a - b);
-        ? this.stringAttrUpdatesWriteFunctionCodes
-        : this.defaultWriteFunctionCodes;
     }
 
     const functionCodes = [...this.defaultReadFunctionCodes];
     if (dataType === ModbusDataType.BITS) {
-      const bitsFunctionCodes = [1, 2];
+      functionCodes.push(...this.bitsReadFunctionCodes);
-      functionCodes.push(...bitsFunctionCodes);
-      functionCodes.sort();
     }
     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

@@ -40,6 +40,8 @@ import {
 import {
   ModbusMasterConfig,
   ModbusProtocolLabelsMap,
+  ModbusSlaveInfo,
+  ModbusValues,
   SlaveConfig
 } from '@home/components/widget/lib/gateway/gateway-widget.models';
 import { isDefinedAndNotNull } from '@core/utils';
@@ -150,12 +152,12 @@ export class ModbusMasterTableComponent implements ControlValueAccessor, AfterVi
     }
     const withIndex = isDefinedAndNotNull(index);
     const value = withIndex ? this.slaves.at(index).value : {};
-    this.dialog.open<ModbusSlaveDialogComponent, any, any>(ModbusSlaveDialogComponent, {
+    this.dialog.open<ModbusSlaveDialogComponent, ModbusSlaveInfo, ModbusValues>(ModbusSlaveDialogComponent, {
       disableClose: true,
       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/app/shared/directives/public-api.ts

@@ -0,0 +1,18 @@
+///
+/// Copyright © 2016-2024 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.
+///
+
+export * from './truncate-with-tooltip.directive';
+export * from './ellipsis-chip-list.directive';

ui-ngx/src/app/shared/directives/truncate-with-tooltip.directive.ts

@@ -105,8 +105,6 @@ export class TruncateWithTooltipDirective implements OnInit, AfterViewInit, OnDe
 
   private showTooltip(): void {
     this.tooltip.message = this.text;
-
-    this.renderer.setAttribute(this.elementRef.nativeElement, 'matTooltip', this.text);
     this.tooltip.show();
   }
 

ui-ngx/src/app/shared/public-api.ts

@@ -19,3 +19,4 @@ export * from './decorators/public-api';
 export * from './models/public-api';
 export * from './pipe/public-api';
 export * from './shared.module';
+export * from './directives/public-api';

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",