Merge branch 'feature/modbus-extended-functionality' of github.com:maxunbearable/thingsboard into improvement/gateway-dashboard

2 years ago · ffa9bc229e
39 changed files with 3135 additions and 151 deletions
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component.html
@ -42,7 +42,7 @@
        <mat-icon matSuffix
                  matTooltipPosition="above"
                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="portErrorTooltip"
+                  [matTooltip]="brokerConfigFormGroup.get('port') | getGatewayPortTooltip"
                  *ngIf="(brokerConfigFormGroup.get('port').hasError('required') ||
                                            brokerConfigFormGroup.get('port').hasError('min') ||
                                            brokerConfigFormGroup.get('port').hasError('max')) &&
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component.ts
@ -37,6 +37,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { generateSecret } from '@core/utils';
 import { SecurityConfigComponent } from '@home/components/widget/lib/gateway/connectors-configuration/public-api';
 import { Subject } from 'rxjs';
+import { GatewayPortTooltipPipe } from '@home/pipes/public-api';

@Component({
  selector: 'tb-broker-config-control',
@ -47,6 +48,7 @@ import { Subject } from 'rxjs';
    CommonModule,
    SharedModule,
    SecurityConfigComponent,
+    GatewayPortTooltipPipe,
  ],
  providers: [
    {
@ -89,19 +91,6 @@ export class BrokerConfigControlComponent implements ControlValueAccessor, Valid
    });
  }

-  get portErrorTooltip(): string {
-    if (this.brokerConfigFormGroup.get('port').hasError('required')) {
-      return this.translate.instant('gateway.port-required');
-    } else if (
-      this.brokerConfigFormGroup.get('port').hasError('min') ||
-      this.brokerConfigFormGroup.get('port').hasError('max')
-    ) {
-      return this.translate.instant('gateway.port-limits-error',
-        {min: PortLimits.MIN, max: PortLimits.MAX});
-    }
-    return '';
-  }
-
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts
@ -28,8 +28,8 @@ import {
 import { TranslateService } from '@ngx-translate/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogService } from '@core/services/dialog.service';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, take, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
 import {
  ControlValueAccessor,
  FormBuilder,
@ -52,13 +52,13 @@ import {
  RequestType,
  RequestTypesTranslationsMap
 } from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { DataSource } from '@angular/cdk/collections';
 import { MappingDialogComponent } from '@home/components/widget/lib/gateway/dialog/mapping-dialog.component';
 import { isDefinedAndNotNull, isUndefinedOrNull } from '@core/utils';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { SharedModule } from '@shared/shared.module';
 import { CommonModule } from '@angular/common';
 import { TooltipDirective } from '@shared/directives/public-api';
+import { TbDatasource } from '@shared/abstract/public-api';

@Component({
  selector: 'tb-mapping-table',
@ -223,7 +223,7 @@ export class MappingTableComponent implements ControlValueAccessor, Validator, A
        )
      );
    }
-    this.dataSource.loadMappings(tableValue);
+    this.dataSource.loadData(tableValue);
  }

  deleteMapping($event: Event, index: number): void {
@ -311,33 +311,8 @@ export class MappingTableComponent implements ControlValueAccessor, Validator, A
  }
 }

-export class MappingDatasource implements DataSource<{[key: string]: any}> {
-
-  private mappingSubject = new BehaviorSubject<Array<{[key: string]: any}>>([]);
-
-  constructor() {}
-
-  connect(): Observable<Array<{[key: string]: any}>> {
-    return this.mappingSubject.asObservable();
-  }
-
-  disconnect(): void {
-    this.mappingSubject.complete();
-  }
-
-  loadMappings(mappings: Array<{[key: string]: any}>): void {
-    this.mappingSubject.next(mappings);
-  }
-
-  isEmpty(): Observable<boolean> {
-    return this.mappingSubject.pipe(
-      map((mappings) => !mappings.length)
-    );
-  }
-
-  total(): Observable<number> {
-    return this.mappingSubject.pipe(
-      map((mappings) => mappings.length)
-    );
+export class MappingDatasource extends TbDatasource<MappingValue> {
+  constructor() {
+    super();
  }
 }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html
@ -0,0 +1,28 @@
+<!--
+
+    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.
+
+-->
+<mat-tab-group [formGroup]="basicFormGroup">
+  <mat-tab label="{{ 'gateway.general' | translate }}">
+    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>
+  </mat-tab>
+  <mat-tab label="{{ 'gateway.master-connections' | translate }}">
+    <tb-modbus-master-table formControlName="master"></tb-modbus-master-table>
+  </mat-tab>
+  <mat-tab label="{{ 'gateway.server-config' | translate }}">
+    <tb-modbus-server-config formControlName="slave"></tb-modbus-server-config>
+  </mat-tab>
+</mat-tab-group>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts
@ -0,0 +1,126 @@
+///
+/// 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.
+///
+
+import { ChangeDetectionStrategy, Component, forwardRef, Input, OnDestroy, TemplateRef } from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormBuilder,
+  FormGroup,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  ValidationErrors,
+  Validator,
+} from '@angular/forms';
+import { ConnectorType, ModbusBasicConfig } from '@home/components/widget/lib/gateway/gateway-widget.models';
+import { SharedModule } from '@shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+import { EllipsisChipListDirective } from '@shared/directives/public-api';
+import { ModbusSlaveConfigComponent } from '../modbus-slave-config/modbus-slave-config.component';
+import { ModbusMasterTableComponent } from '../modbus-master-table/modbus-master-table.component';
+
+@Component({
+  selector: 'tb-modbus-basic-config',
+  templateUrl: './modbus-basic-config.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ModbusBasicConfigComponent),
+      multi: true
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => ModbusBasicConfigComponent),
+      multi: true
+    }
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    ModbusSlaveConfigComponent,
+    ModbusMasterTableComponent,
+    EllipsisChipListDirective,
+  ],
+  styles: [`
+    :host {
+      height: 100%;
+    }
+    :host ::ng-deep {
+      .mat-mdc-tab-group, .mat-mdc-tab-body-wrapper {
+        height: 100%;
+      }
+    }
+  `]
+})
+
+export class ModbusBasicConfigComponent implements ControlValueAccessor, Validator, OnDestroy {
+
+  @Input() generalTabContent: TemplateRef<any>;
+
+  basicFormGroup: FormGroup;
+
+  onChange: (value: string) => void;
+  onTouched: () => void;
+
+  protected readonly connectorType = ConnectorType;
+  private destroy$ = new Subject<void>();
+
+  constructor(private fb: FormBuilder) {
+    this.basicFormGroup = this.fb.group({
+      master: [],
+      slave: [],
+    });
+
+    this.basicFormGroup.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(value => {
+        this.onChange(value);
+        this.onTouched();
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  writeValue(basicConfig: ModbusBasicConfig): void {
+    const editedBase = {
+      slave: basicConfig.slave || {},
+      master: basicConfig.master || {},
+    };
+
+    this.basicFormGroup.setValue(editedBase, {emitEvent: false});
+  }
+
+  validate(): ValidationErrors | null {
+    return this.basicFormGroup.valid ? null : {
+      basicFormGroup: {valid: false}
+    };
+  }
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
@ -0,0 +1,165 @@
+<!--
+
+    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.
+
+-->
+<div class="tb-modbus-keys-panel">
+  <div class="tb-form-panel no-border no-padding">
+    <div class="tb-form-panel-title">{{ panelTitle  | translate }}{{' (' + keysListFormArray.controls.length + ')'}}</div>
+    <div class="tb-form-panel no-border no-padding key-panel" *ngIf="keysListFormArray.controls.length; else noKeys">
+      <div class="tb-form-panel no-border no-padding tb-flex no-flex row center fill-width"
+           *ngFor="let keyControl of keysListFormArray.controls; trackBy: trackByKey; let $index = index; let last = last;">
+        <div class="tb-form-panel stroked tb-flex">
+          <ng-container [formGroup]="keyControl">
+            <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>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <ng-template matExpansionPanelContent>
+                <div class="tb-form-panel stroked">
+                  <div class="tb-form-panel-title" translate>gateway.platform-side</div>
+                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="fixed-title-width tb-required" translate>
+                      gateway.key
+                    </div>
+                    <div class="tb-flex no-gap">
+                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <input matInput name="value" formControlName="tag" placeholder="{{ 'gateway.set' | translate }}"/>
+                        <mat-icon matSuffix
+                                  matTooltipPosition="above"
+                                  matTooltipClass="tb-error-tooltip"
+                                  [matTooltip]="('gateway.key-required') | translate"
+                                  *ngIf="keyControl.get('tag').hasError('required') &&
+                                           keyControl.get('tag').touched"
+                                  class="tb-error">
+                          warning
+                        </mat-icon>
+                      </mat-form-field>
+                    </div>
+                  </div>
+                </div>
+                <div class="tb-form-panel stroked">
+                  <div class="tb-form-panel-title" translate>gateway.connector-side</div>
+                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="fixed-title-width" translate>
+                      gateway.type
+                    </div>
+                    <div class="tb-flex no-gap">
+                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <mat-select formControlName="type">
+                          <mat-option *ngFor="let type of modbusDataTypes" [value]="type">{{ type }}</mat-option>
+                        </mat-select>
+                      </mat-form-field>
+                    </div>
+                  </div>
+                  <div *ngIf="withFunctionCode" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="fixed-title-width" translate>gateway.function-code</div>
+                    <div class="tb-flex no-gap">
+                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <mat-select formControlName="functionCode">
+                          <mat-option *ngFor="let code of functionCodesMap.get(keyControl.get('id').value) || defaultFunctionCodes" [value]="code">{{ ModbusFunctionCodeTranslationsMap.get(code) | translate }}</mat-option>
+                        </mat-select>
+                      </mat-form-field>
+                    </div>
+                  </div>
+                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="fixed-title-width" translate>gateway.objects-count</div>
+                    <div class="tb-flex no-gap">
+                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <input
+                          matInput
+                          type="number"
+                          min="1"
+                          name="value"
+                          formControlName="objectsCount"
+                          placeholder="{{ 'gateway.set' | translate }}"
+                          [readonly]="!editableDataTypes.includes(keyControl.get('type').value)"
+                        />
+                      </mat-form-field>
+                    </div>
+                  </div>
+                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="fixed-title-width" translate>gateway.address</div>
+                    <div class="tb-flex no-gap">
+                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <input matInput type="number" min="0" name="value" formControlName="address" placeholder="{{ 'gateway.set' | translate }}"/>
+                      </mat-form-field>
+                    </div>
+                  </div>
+                  <div *ngIf="isMaster" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                    <div class="fixed-title-width tb-required" translate>gateway.value</div>
+                    <div class="tb-flex no-gap">
+                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                        <input matInput name="value" formControlName="value" placeholder="{{ 'gateway.set' | translate }}"/>
+                        <mat-icon matSuffix
+                                  matTooltipPosition="above"
+                                  matTooltipClass="tb-error-tooltip"
+                                  [matTooltip]="('gateway.value-required') | translate"
+                                  *ngIf="keyControl.get('value').hasError('required') &&
+                                           keyControl.get('value').touched"
+                                  class="tb-error">
+                          warning
+                        </mat-icon>
+                      </mat-form-field>
+                    </div>
+                  </div>
+                </div>
+              </ng-template>
+            </mat-expansion-panel>
+          </ng-container>
+        </div>
+        <button type="button"
+                mat-icon-button
+                (click)="deleteKey($event, $index)"
+                [matTooltip]="deleteKeyTitle | translate"
+                matTooltipPosition="above">
+          <mat-icon>delete</mat-icon>
+        </button>
+      </div>
+    </div>
+    <div>
+      <button type="button" mat-stroked-button color="primary" (click)="addKey()">
+        {{ addKeyTitle | translate }}
+      </button>
+    </div>
+  </div>
+  <ng-template #noKeys>
+    <div class="tb-flex no-flex center align-center key-panel">
+      <span class="tb-prompt" translate>{{ noKeysText }}</span>
+    </div>
+  </ng-template>
+  <div class="tb-flex flex-end">
+    <button mat-button
+            color="primary"
+            type="button"
+            (click)="cancel()">
+      {{ 'action.cancel' | translate }}
+    </button>
+    <button mat-raised-button
+            color="primary"
+            type="button"
+            (click)="applyKeysData()"
+            [disabled]="keysListFormArray.invalid || !keysListFormArray.dirty">
+      {{ 'action.apply' | translate }}
+    </button>
+  </div>
+</div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.scss
@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+:host {
+  .tb-modbus-keys-panel {
+    width: 77vw;
+    max-width: 700px;
+
+    .title-container {
+      max-width: 11vw;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap
+    }
+
+    .key-panel {
+      height: 500px;
+      overflow: auto;
+    }
+
+    .tb-form-panel {
+      .mat-mdc-icon-button {
+        width: 56px;
+        height: 56px;
+        padding: 16px;
+        color: rgba(0, 0, 0, 0.54);
+      }
+    }
+  }
+}
+
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.ts
@ -0,0 +1,172 @@
+///
+/// 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.
+///
+
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { AbstractControl, FormGroup, UntypedFormArray, UntypedFormBuilder, Validators } from '@angular/forms';
+import { TbPopoverComponent } from '@shared/components/popover.component';
+import {
+  ModbusDataType,
+  ModbusFunctionCodeTranslationsMap,
+  ModbusObjectCountByDataType,
+  ModbusRegisterType,
+  ModbusValue,
+  ModbusValueKey,
+  noLeadTrailSpacesRegex,
+} from '@home/components/widget/lib/gateway/gateway-widget.models';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { GatewayHelpLinkPipe } from '@home/pipes/public-api';
+import { generateSecret } from '@core/utils';
+
+@Component({
+  selector: 'tb-modbus-data-keys-panel',
+  templateUrl: './modbus-data-keys-panel.component.html',
+  styleUrls: ['./modbus-data-keys-panel.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    GatewayHelpLinkPipe,
+  ]
+})
+export class ModbusDataKeysPanelComponent implements OnInit {
+
+  @Input() isMaster = false;
+  @Input() panelTitle: string;
+  @Input() addKeyTitle: string;
+  @Input() deleteKeyTitle: string;
+  @Input() noKeysText: string;
+  @Input() register: ModbusRegisterType;
+  @Input() keysType: ModbusValueKey;
+  @Input() values: ModbusValue[];
+  @Input() popover: TbPopoverComponent<ModbusDataKeysPanelComponent>;
+
+  @Output() keysDataApplied = new EventEmitter<Array<ModbusValue>>();
+
+  keysListFormArray: UntypedFormArray;
+  errorText = '';
+  modbusDataTypes = Object.values(ModbusDataType);
+  withFunctionCode = true;
+  functionCodesMap = new Map();
+  defaultFunctionCodes = [];
+
+  readonly editableDataTypes = [ModbusDataType.BYTES, ModbusDataType.BITS, ModbusDataType.STRING];
+  readonly ModbusFunctionCodeTranslationsMap = ModbusFunctionCodeTranslationsMap;
+  readonly defaultReadFunctionCodes = [3, 4];
+  readonly defaultWriteFunctionCodes = [5, 6, 15, 16];
+
+  constructor(private fb: UntypedFormBuilder) {}
+
+  ngOnInit(): void {
+    this.keysListFormArray = this.prepareKeysFormArray(this.values);
+    this.withFunctionCode = !this.isMaster || (this.keysType !== ModbusValueKey.ATTRIBUTES && this.keysType !== ModbusValueKey.TIMESERIES);
+    this.defaultFunctionCodes = this.getDefaultFunctionCodes();
+  }
+
+  trackByKey(_: number, keyControl: AbstractControl): AbstractControl {
+    return keyControl;
+  }
+
+  addKey(): void {
+    const dataKeyFormGroup = this.fb.group({
+      tag: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+      value: [{value: '', disabled: !this.isMaster}, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+      type: [ModbusDataType.STRING, [Validators.required]],
+      address: [0, [Validators.required]],
+      objectsCount: [1, [Validators.required]],
+      functionCode: [this.getDefaultFunctionCodes()[0]],
+      id: [{value: generateSecret(5), disabled: true}],
+    });
+    this.observeKeyDataType(dataKeyFormGroup);
+
+    this.keysListFormArray.push(dataKeyFormGroup);
+  }
+
+  deleteKey($event: Event, index: number): void {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    this.keysListFormArray.removeAt(index);
+    this.keysListFormArray.markAsDirty();
+  }
+
+  cancel(): void {
+    this.popover?.hide();
+  }
+
+  applyKeysData(): void {
+    this.keysDataApplied.emit(this.keysListFormArray.value);
+  }
+
+  private prepareKeysFormArray(values: ModbusValue[]): UntypedFormArray {
+    const keysControlGroups: Array<AbstractControl> = [];
+    if (values) {
+      values.forEach(keyData => {
+        const { tag, value, type, address, objectsCount, functionCode } = keyData;
+        const dataKeyFormGroup = this.fb.group({
+          tag: [tag, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+          value: [{value, disabled: !this.isMaster}, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+          type: [type, [Validators.required]],
+          address: [address, [Validators.required]],
+          objectsCount: [objectsCount, [Validators.required]],
+          functionCode: [functionCode, []],
+          id: [{value: generateSecret(5), disabled: true}],
+        });
+        this.observeKeyDataType(dataKeyFormGroup);
+        this.functionCodesMap.set(dataKeyFormGroup.get('id').value, this.getFunctionCodes(type));
+
+        keysControlGroups.push(dataKeyFormGroup);
+      });
+    }
+    return this.fb.array(keysControlGroups);
+  }
+
+  private observeKeyDataType(keyFormGroup: FormGroup): void {
+    keyFormGroup.get('type').valueChanges.subscribe(dataType => {
+      const objectsCountControl = keyFormGroup.get('objectsCount');
+      if (!this.editableDataTypes.includes(dataType)) {
+        objectsCountControl.patchValue(ModbusObjectCountByDataType[dataType]);
+      }
+      this.functionCodesMap.set(keyFormGroup.get('id').value, this.getFunctionCodes(dataType));
+    });
+  }
+
+  private getFunctionCodes(dataType: ModbusDataType): number[] {
+    if (this.keysType === ModbusValueKey.ATTRIBUTES_UPDATES) {
+      return this.defaultWriteFunctionCodes;
+    }
+    const functionCodes = [...this.defaultReadFunctionCodes];
+    if (dataType === ModbusDataType.BITS) {
+      const bitsFunctionCodes = [1, 2];
+      bitsFunctionCodes.forEach(code => functionCodes.push(code));
+      functionCodes.sort();
+    }
+    if (this.keysType === ModbusValueKey.RPC_REQUESTS) {
+      this.defaultWriteFunctionCodes.forEach(code => functionCodes.push(code));
+    }
+    return functionCodes;
+  }
+
+  private getDefaultFunctionCodes(): number[] {
+    if (this.keysType === ModbusValueKey.ATTRIBUTES_UPDATES) {
+      return this.defaultWriteFunctionCodes;
+    }
+    if (this.keysType === ModbusValueKey.RPC_REQUESTS) {
+      return [...this.defaultReadFunctionCodes, ...this.defaultWriteFunctionCodes];
+    }
+    return this.defaultReadFunctionCodes;
+  }
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
@ -0,0 +1,131 @@
+<!--
+
+    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.
+
+-->
+<div class="tb-master-table tb-absolute-fill">
+  <div fxFlex fxLayout="column" class="tb-master-table-content">
+    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
+      <div class="mat-toolbar-tools">
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+          <span class="tb-master-table-title">{{ 'gateway.servers-slaves' | translate}}</span>
+        </div>
+        <span fxFlex></span>
+        <button mat-icon-button
+                (click)="manageSlave($event)"
+                matTooltip="{{ 'action.add' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>add</mat-icon>
+        </button>
+        <button mat-icon-button
+                (click)="enterFilterMode()"
+                matTooltip="{{ 'action.search' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>search</mat-icon>
+        </button>
+      </div>
+    </mat-toolbar>
+    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+      <div class="mat-toolbar-tools">
+        <button mat-icon-button
+                matTooltip="{{ 'action.search' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>search</mat-icon>
+        </button>
+        <mat-form-field fxFlex>
+          <mat-label>&nbsp;</mat-label>
+          <input #searchInput matInput
+                 [formControl]="textSearch"
+                 placeholder="{{ 'common.enter-search' | translate }}"/>
+        </mat-form-field>
+        <button mat-icon-button (click)="exitFilterMode()"
+                matTooltip="{{ 'action.close' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon>close</mat-icon>
+        </button>
+      </div>
+    </mat-toolbar>
+    <div class="table-container">
+      <table mat-table [dataSource]="dataSource">
+        <ng-container [matColumnDef]="'name'">
+          <mat-header-cell *matHeaderCellDef class="table-value-column request-column">
+            {{ 'gateway.name' | translate }}
+          </mat-header-cell>
+          <mat-cell *matCellDef="let mapping" class="table-value-column request-column">
+            {{ mapping['name'] }}
+          </mat-cell>
+        </ng-container>
+        <ng-container [matColumnDef]="'type'">
+          <mat-header-cell *matHeaderCellDef class="table-value-column request-column">
+            {{ 'gateway.client-communication-type' | translate }}
+          </mat-header-cell>
+          <mat-cell *matCellDef="let mapping" class="table-value-column request-column">
+            {{ ModbusClientTypeLabelsMap.get(mapping['type']) }}
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="actions" stickyEnd>
+          <mat-header-cell *matHeaderCellDef
+                           [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px', textAlign: 'center'}">
+          </mat-header-cell>
+          <mat-cell *matCellDef="let mapping; let i = index"
+                    [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px'}">
+            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+              <button mat-icon-button
+                      (click)="manageSlave($event, i)">
+                <tb-icon>edit</tb-icon>
+              </button>
+              <button mat-icon-button
+                      (click)="deleteMapping($event, i)">
+                <tb-icon>delete</tb-icon>
+              </button>
+            </div>
+            <div fxHide fxShow.lt-lg fxFlex fxLayout="row" fxLayoutAlign="end">
+              <button mat-icon-button
+                      (click)="$event.stopPropagation()"
+                      [matMenuTriggerFor]="cellActionsMenu">
+                <mat-icon class="material-icons">more_vert</mat-icon>
+              </button>
+              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                <button mat-icon-button
+                        (click)="manageSlave($event, i)">
+                  <tb-icon>edit</tb-icon>
+                </button>
+                <button mat-icon-button
+                        (click)="deleteMapping($event, i)">
+                  <tb-icon>delete</tb-icon>
+                </button>
+              </mat-menu>
+            </div>
+          </mat-cell>
+        </ng-container>
+        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="['name', 'type', 'actions']; sticky: true"></mat-header-row>
+        <mat-row *matRowDef="let mapping; columns: ['name', 'type', 'actions'];"></mat-row>
+      </table>
+      <section [fxShow]="!textSearchMode && (dataSource.isEmpty() | async)" fxLayoutAlign="center center"
+               class="mat-headline-5 tb-absolute-fill tb-add-new">
+        <button mat-button class="connector"
+                (click)="manageSlave($event)">
+          <mat-icon class="tb-mat-96">add</mat-icon>
+          <span>{{ 'gateway.add-slave' | translate }}</span>
+        </button>
+      </section>
+    </div>
+    <span [fxShow]="textSearchMode && (dataSource.isEmpty() | async)"
+          fxLayoutAlign="center center"
+          class="no-data-found" translate>
+      widget.no-data-found
+    </span>
+  </div>
+</div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.scss
@ -0,0 +1,101 @@
+/**
+ * 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.
+ */
+@import '../scss/constants';
+
+:host {
+  width: 100%;
+  height: 100%;
+  display: block;
+  .tb-master-table {
+    .tb-master-table-content {
+      width: 100%;
+      height: 100%;
+      background: #fff;
+      overflow: hidden;
+
+      &.tb-outlined-border {
+        box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%);
+        border: solid 1px #e0e0e0;
+        border-radius: 4px;
+      }
+
+      .mat-toolbar-tools{
+        min-height: auto;
+      }
+
+      .title-container{
+        overflow: hidden;
+      }
+
+      .tb-master-table-title {
+        padding-right: 20px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .table-container {
+        overflow: auto;
+        .mat-mdc-table {
+          table-layout: fixed;
+          min-width: 450px;
+
+          .table-value-column {
+            padding: 0 12px;
+            width: 23%;
+
+            &.request-column {
+              width: 38%;
+            }
+          }
+        }
+      }
+
+      .ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .no-data-found {
+    height: calc(100% - 120px);
+  }
+
+  @media #{$mat-xs} {
+    .mat-toolbar {
+      height: auto;
+      min-height: 100px;
+
+      .tb-master-table-title{
+        padding-bottom: 5px;
+        width: 100%;
+      }
+    }
+  }
+}
+
+:host ::ng-deep {
+  mat-cell.tb-value-cell {
+    cursor: pointer;
+    .mat-icon {
+      height: 24px;
+      width: 24px;
+      font-size: 24px;
+      color: #757575
+    }
+  }
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts
@ -0,0 +1,231 @@
+///
+/// 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.
+///
+
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  forwardRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { MatDialog } from '@angular/material/dialog';
+import { DialogService } from '@core/services/dialog.service';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
+import {
+  ControlValueAccessor,
+  FormArray,
+  FormBuilder,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  UntypedFormGroup,
+  ValidationErrors,
+  Validator,
+} from '@angular/forms';
+import {
+  ModbusClientTypeLabelsMap, ModbusMasterConfig, SlaveConfig,
+} from '@home/components/widget/lib/gateway/gateway-widget.models';
+import { isDefinedAndNotNull, isUndefinedOrNull } from '@core/utils';
+import { SharedModule } from '@shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { TbDatasource } from '@shared/abstract/datasource/datasource.abstract';
+import { ModbusSlaveDialogComponent } from '../modbus-slave-dialog/modbus-slave-dialog.component';
+
+@Component({
+  selector: 'tb-modbus-master-table',
+  templateUrl: './modbus-master-table.component.html',
+  styleUrls: ['./modbus-master-table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ModbusMasterTableComponent),
+      multi: true
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => ModbusMasterTableComponent),
+      multi: true
+    }
+  ],
+  standalone: true,
+  imports: [CommonModule, SharedModule]
+})
+export class ModbusMasterTableComponent implements ControlValueAccessor, Validator, AfterViewInit, OnInit, OnDestroy {
+
+  @ViewChild('searchInput') searchInputField: ElementRef;
+
+  textSearchMode = false;
+  dataSource: SlavesDatasource;
+  hidePageSize = false;
+  activeValue = false;
+  dirtyValue = false;
+  masterFormGroup: UntypedFormGroup;
+  textSearch = this.fb.control('', {nonNullable: true});
+
+  readonly ModbusClientTypeLabelsMap = ModbusClientTypeLabelsMap;
+
+  private onChange: (value: string) => void = () => {};
+  private onTouched: () => void  = () => {};
+
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    public translate: TranslateService,
+    public dialog: MatDialog,
+    private dialogService: DialogService,
+    private fb: FormBuilder
+  ) {
+    this.masterFormGroup =  this.fb.group({ slaves: this.fb.array([])});
+    this.dirtyValue = !this.activeValue;
+    this.dataSource = new SlavesDatasource();
+  }
+
+  get slaves(): FormArray {
+    return this.masterFormGroup.get('slaves') as FormArray;
+  }
+
+  ngOnInit(): void {
+    this.masterFormGroup.valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe((value) => {
+      this.updateTableData(value.slaves);
+      this.onChange(value);
+      this.onTouched();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  ngAfterViewInit(): void {
+    this.textSearch.valueChanges.pipe(
+      debounceTime(150),
+      distinctUntilChanged((prev, current) => (prev ?? '') === current.trim()),
+      takeUntil(this.destroy$)
+    ).subscribe((text) => {
+      const searchText = text.trim();
+      this.updateTableData(this.slaves.value, searchText.trim());
+    });
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  writeValue(master: ModbusMasterConfig): void {
+    this.slaves.clear();
+    this.pushDataAsFormArrays(master.slaves);
+  }
+
+  validate(): ValidationErrors | null {
+    return this.slaves.controls.length ? null : {
+      slavesFormGroup: {valid: false}
+    };
+  }
+
+  enterFilterMode(): void {
+    this.textSearchMode = true;
+    setTimeout(() => {
+      this.searchInputField.nativeElement.focus();
+      this.searchInputField.nativeElement.setSelectionRange(0, 0);
+    }, 10);
+  }
+
+  exitFilterMode(): void {
+    this.updateTableData(this.slaves.value);
+    this.textSearchMode = false;
+    this.textSearch.reset();
+  }
+
+  manageSlave($event: Event, index?: number): void {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    const value = isDefinedAndNotNull(index) ? this.slaves.at(index).value : {};
+    this.dialog.open<ModbusSlaveDialogComponent, any, any>(ModbusSlaveDialogComponent, {
+      disableClose: true,
+      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+      data: {
+        value,
+        buttonTitle: isUndefinedOrNull(index) ?  'action.add' : 'action.apply'
+      }
+    }).afterClosed()
+      .pipe(take(1), takeUntil(this.destroy$))
+      .subscribe(res => {
+        if (res) {
+          if (isDefinedAndNotNull(index)) {
+            this.slaves.at(index).patchValue(res);
+          } else {
+            this.slaves.push(this.fb.control(res));
+          }
+          this.masterFormGroup.markAsDirty();
+        }
+    });
+  }
+
+  deleteMapping($event: Event, index: number): void {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    this.dialogService.confirm(
+      this.translate.instant('gateway.delete-slave-title'),
+      '',
+      this.translate.instant('action.no'),
+      this.translate.instant('action.yes'),
+      true
+    ).subscribe((result) => {
+      if (result) {
+        this.slaves.removeAt(index);
+        this.masterFormGroup.markAsDirty();
+      }
+    });
+  }
+
+  private updateTableData(data: SlaveConfig[], textSearch?: string): void {
+    let tableValue = data;
+    if (textSearch) {
+      tableValue = tableValue.filter(value =>
+        Object.values(value).some(val =>
+          val.toString().toLowerCase().includes(textSearch.toLowerCase())
+        )
+      );
+    }
+    this.dataSource.loadData(tableValue);
+  }
+
+  private pushDataAsFormArrays(slaves: SlaveConfig[]): void {
+    if (slaves?.length) {
+      slaves.forEach((slave: SlaveConfig) => this.slaves.push(this.fb.control(slave)));
+    }
+  }
+}
+
+export class SlavesDatasource extends TbDatasource<SlaveConfig> {
+  constructor() {
+    super();
+  }
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html
@ -0,0 +1,62 @@
+<!--
+
+    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.
+
+-->
+<div class="tb-form-panel no-border no-padding" [formGroup]="securityConfigFormGroup">
+  <div class="tb-form-hint tb-primary-fill">{{ 'gateway.hints.path-in-os' | translate }}</div>
+  <div class="tb-form-row space-between tb-flex fill-width">
+    <div class="fixed-title-width" translate>gateway.client-cert-path</div>
+    <div class="tb-flex no-gap">
+      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+        <input matInput name="value" formControlName="certfile" placeholder="{{ 'gateway.set' | translate }}"/>
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="tb-form-row space-between tb-flex fill-width">
+    <div class="fixed-title-width" translate>gateway.private-key-path</div>
+    <div class="tb-flex no-gap">
+      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+        <input matInput name="value" formControlName="keyfile" placeholder="{{ 'gateway.set' | translate }}"/>
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="tb-form-row space-between tb-flex fill-width">
+    <div class="fixed-title-width" translate>gateway.password</div>
+    <div class="tb-flex no-gap">
+      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+        <input matInput type="password" name="value" formControlName="password" placeholder="{{ 'gateway.set' | translate }}"/>
+        <div class="tb-flex no-gap align-center fill-height" matSuffix>
+          <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>
+        </div>
+      </mat-form-field>
+    </div>
+  </div>
+  <div *ngIf="!isMaster" class="tb-form-row space-between tb-flex fill-width">
+    <div class="fixed-title-width" translate>gateway.server-hostname</div>
+    <div class="tb-flex no-gap">
+      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+        <input matInput name="value" formControlName="server_hostname" placeholder="{{ 'gateway.set' | translate }}"/>
+      </mat-form-field>
+    </div>
+  </div>
+  <div *ngIf="isMaster" class="tb-form-row" fxLayoutAlign="space-between center">
+    <mat-slide-toggle class="mat-slide" formControlName="reqclicert">
+      <mat-label>
+        {{ 'gateway.request-client-certificate' | translate }}
+      </mat-label>
+    </mat-slide-toggle>
+  </div>
+</div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.ts
@ -0,0 +1,139 @@
+///
+/// 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.
+///
+
+import { ChangeDetectionStrategy, Component, forwardRef, Input, OnChanges, OnDestroy } from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormBuilder,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  UntypedFormGroup,
+  ValidationErrors,
+  Validator,
+  Validators
+} from '@angular/forms';
+import {
+  ModbusSecurity,
+  noLeadTrailSpacesRegex,
+} from '@home/components/widget/lib/gateway/gateway-widget.models';
+import { SharedModule } from '@shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { SecurityConfigComponent } from '@home/components/widget/lib/gateway/connectors-configuration/public-api';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'tb-modbus-security-config',
+  templateUrl: './modbus-security-config.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ModbusSecurityConfigComponent),
+      multi: true
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => ModbusSecurityConfigComponent),
+      multi: true
+    }
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    SecurityConfigComponent,
+  ]
+})
+export class ModbusSecurityConfigComponent implements ControlValueAccessor, Validator, OnChanges, OnDestroy {
+
+  @Input() isMaster = false;
+
+  securityConfigFormGroup: UntypedFormGroup;
+
+  private onChange: (value: ModbusSecurity) => void;
+  private onTouched: () => void;
+
+  private destroy$ = new Subject<void>();
+
+  constructor(private fb: FormBuilder) {
+    this.securityConfigFormGroup = this.fb.group({
+      certfile: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+      keyfile: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+      password: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+      server_hostname: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+    });
+
+    this.observeValueChanges();
+  }
+
+  ngOnChanges(): void {
+    if (this.isMaster) {
+      this.securityConfigFormGroup = this.fb.group({
+        certfile: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+        keyfile: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+        password: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+        reqclicert: [false, []],
+      });
+      this.observeValueChanges();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  registerOnChange(fn: (value: ModbusSecurity) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  validate(): ValidationErrors | null {
+    return this.securityConfigFormGroup.valid ? null : {
+      serverConfigFormGroup: { valid: false }
+    };
+  }
+
+  writeValue(securityConfig: ModbusSecurity): void {
+    const { certfile, password, keyfile, server_hostname } = securityConfig;
+    let securityState = {
+      certfile: certfile ?? '',
+      password: password ?? '',
+      keyfile: keyfile ?? '',
+      server_hostname: server_hostname?? '',
+      reqclicert: !!securityConfig.reqclicert,
+    };
+    if (this.isMaster) {
+      securityState = { ...securityState, reqclicert: !!securityConfig.reqclicert };
+    } else {
+      securityState = { ...securityState, server_hostname: server_hostname ?? '' };
+    }
+    this.securityConfigFormGroup.reset(securityState, {emitEvent: false});
+  }
+
+  private observeValueChanges(): void {
+    this.securityConfigFormGroup.valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe((value: ModbusSecurity) => {
+      this.onChange(value);
+      this.onTouched();
+    });
+  }
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html
@ -0,0 +1,256 @@
+<!--
+
+    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.
+
+-->
+<div class="tb-form-panel no-border no-padding padding-top" [formGroup]="slaveConfigFormGroup">
+  <div class="tb-form-hint tb-primary-fill tb-flex center">{{ 'gateway.hints.modbus-server' | translate }}</div>
+  <div class="tb-flex row space-between align-center no-gap fill-width">
+    <div class="fixed-title-width" translate>gateway.server-slave-config</div>
+    <tb-toggle-select formControlName="type" appearance="fill">
+      <tb-toggle-option *ngFor="let type of modbusProtocolTypes" [value]="type">{{ ModbusProtocolLabelsMap.get(type) }}</tb-toggle-option>
+    </tb-toggle-select>
+  </div>
+  <div class="tb-form-panel no-border no-padding padding-top">
+    <div *ngIf="this.slaveConfigFormGroup.get('type').value !== ModbusProtocolType.Serial"
+         class="tb-form-row column-xs"
+         fxLayoutAlign="space-between center"
+    >
+      <div class="fixed-title-width tb-required" translate>gateway.host</div>
+      <div class="tb-flex no-gap">
+        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+          <input matInput name="value" formControlName="host" placeholder="{{ 'gateway.set' | translate }}"/>
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="('gateway.host-required') | translate"
+                    *ngIf="slaveConfigFormGroup.get('host').hasError('required')
+                                           && slaveConfigFormGroup.get('host').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+      </div>
+    </div>
+    <div *ngIf="this.slaveConfigFormGroup.get('type').value !== ModbusProtocolType.Serial else serialPort"
+         class="tb-form-row column-xs"
+         fxLayoutAlign="space-between center"
+    >
+      <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" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"
+                 name="value" formControlName="port" placeholder="{{ 'gateway.set' | translate }}"/>
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="slaveConfigFormGroup.get('port') | getGatewayPortTooltip"
+                    *ngIf="(slaveConfigFormGroup.get('port').hasError('required') ||
+                                            slaveConfigFormGroup.get('port').hasError('min') ||
+                                            slaveConfigFormGroup.get('port').hasError('max')) &&
+                                            slaveConfigFormGroup.get('port').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+      </div>
+    </div>
+    <ng-template #serialPort>
+      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+        <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 name="value" formControlName="serialPort" placeholder="{{ 'gateway.set' | translate }}"/>
+            <mat-icon matSuffix
+                      matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
+                      [matTooltip]="slaveConfigFormGroup.get('serialPort') | getGatewayPortTooltip"
+                      *ngIf="(slaveConfigFormGroup.get('serialPort').hasError('required') ||
+                                            slaveConfigFormGroup.get('serialPort').hasError('min') ||
+                                            slaveConfigFormGroup.get('serialPort').hasError('max')) &&
+                                            slaveConfigFormGroup.get('serialPort').touched"
+                      class="tb-error">
+              warning
+            </mat-icon>
+          </mat-form-field>
+        </div>
+      </div>
+    </ng-template>
+    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.framer-type' | translate }}" translate>
+        gateway.method
+      </div>
+      <div class="tb-flex no-gap">
+        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+          <mat-select formControlName="method">
+            <mat-option *ngFor="let method of modbusMethodTypes" [value]="method">{{ ModbusMethodLabelsMap.get(method) }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </div>
+  </div>
+  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div class="fixed-title-width tb-required" translate>gateway.unit-id</div>
+    <div class="tb-flex no-gap">
+      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+        <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ 'gateway.set' | translate }}"/>
+        <mat-icon matSuffix
+                  matTooltipPosition="above"
+                  matTooltipClass="tb-error-tooltip"
+                  [matTooltip]="('gateway.unit-id-required') | translate"
+                  *ngIf="slaveConfigFormGroup.get('unitId').hasError('required') &&
+                                           slaveConfigFormGroup.get('unitId').touched"
+                  class="tb-error">
+          warning
+        </mat-icon>
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div class="fixed-title-width tb-required" translate>gateway.device-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="deviceName" placeholder="{{ 'gateway.set' | translate }}"/>
+        <mat-icon matSuffix
+                  matTooltipPosition="above"
+                  matTooltipClass="tb-error-tooltip"
+                  [matTooltip]="('gateway.device-name-required') | translate"
+                  *ngIf="slaveConfigFormGroup.get('deviceName').hasError('required') &&
+                                           slaveConfigFormGroup.get('deviceName').touched"
+                  class="tb-error">
+          warning
+        </mat-icon>
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div class="fixed-title-width tb-required" translate>gateway.device-profile</div>
+    <div class="tb-flex no-gap">
+      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+        <input matInput name="value" formControlName="deviceType" placeholder="{{ 'gateway.set' | translate }}"/>
+        <mat-icon matSuffix
+                  matTooltipPosition="above"
+                  matTooltipClass="tb-error-tooltip"
+                  [matTooltip]="('gateway.device-profile-required') | translate"
+                  *ngIf="slaveConfigFormGroup.get('deviceType').hasError('required') &&
+                                           slaveConfigFormGroup.get('deviceType').touched"
+                  class="tb-error">
+          warning
+        </mat-icon>
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div class="fixed-title-width" translate>gateway.poll-period</div>
+    <div class="tb-flex no-gap">
+      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+        <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
+      </mat-form-field>
+    </div>
+  </div>
+  <div *ngIf="this.slaveConfigFormGroup.get('type').value === ModbusProtocolType.Serial" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+    <div class="fixed-title-width" translate>gateway.baudrate</div>
+    <div class="tb-flex no-gap">
+      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+        <input matInput type="number" min="0" name="value" formControlName="baudrate" placeholder="{{ 'gateway.set' | translate }}"/>
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="tb-form-row" fxLayoutAlign="space-between center">
+    <mat-slide-toggle class="mat-slide" formControlName="sendDataToThingsBoard">
+      <mat-label>
+        {{ 'gateway.send-data-TB' | translate }}
+      </mat-label>
+    </mat-slide-toggle>
+  </div>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div class="tb-form-panel no-border no-padding padding-top" [formGroup]="slaveConfigFormGroup">
+      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+        <div class="fixed-title-width" translate>gateway.byte-order</div>
+        <div class="tb-flex no-gap">
+          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+            <mat-select formControlName="byteOrder">
+              <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+      </div>
+      <mat-expansion-panel *ngIf="this.slaveConfigFormGroup.get('type').value !== ModbusProtocolType.Serial"
+                           [expanded]="showSecurityControl.value">
+        <mat-expansion-panel-header class="nested-expansion-header">
+          <mat-panel-title>
+            <mat-slide-toggle [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">
+              <mat-label>
+                {{ 'gateway.tls-connection' | translate }}
+              </mat-label>
+            </mat-slide-toggle>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <tb-modbus-security-config formControlName="security" [isMaster]="true"></tb-modbus-security-config>
+      </mat-expansion-panel>
+      <ng-container [formGroup]="slaveConfigFormGroup.get('identity')">
+        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="fixed-title-width" translate>gateway.vendor-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="vendorName" placeholder="{{ 'gateway.set' | translate }}"/>
+            </mat-form-field>
+          </div>
+        </div>
+        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="fixed-title-width" translate>gateway.product-code</div>
+          <div class="tb-flex no-gap">
+            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+              <input matInput name="value" formControlName="productCode" placeholder="{{ 'gateway.set' | translate }}"/>
+            </mat-form-field>
+          </div>
+        </div>
+        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="fixed-title-width" translate>gateway.vendor-url</div>
+          <div class="tb-flex no-gap">
+            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+              <input matInput name="value" formControlName="vendorUrl" placeholder="{{ 'gateway.set' | translate }}"/>
+            </mat-form-field>
+          </div>
+        </div>
+        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="fixed-title-width" translate>gateway.product-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="productName" placeholder="{{ 'gateway.set' | translate }}"/>
+            </mat-form-field>
+          </div>
+        </div>
+        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="fixed-title-width" translate>gateway.model-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="modelName" placeholder="{{ 'gateway.set' | translate }}"/>
+            </mat-form-field>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  </mat-expansion-panel>
+  <div class="tb-form-panel stroked">
+    <div class="tb-form-panel-title" translate>gateway.values</div>
+    <tb-modbus-values formControlName="values"></tb-modbus-values>
+  </div>
+</div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts
@ -0,0 +1,229 @@
+///
+/// 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.
+///
+
+import { ChangeDetectionStrategy, Component, forwardRef, OnDestroy } from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormBuilder,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  UntypedFormControl,
+  UntypedFormGroup,
+  ValidationErrors,
+  Validator,
+  Validators,
+} from '@angular/forms';
+import {
+  ModbusMethodLabelsMap,
+  ModbusMethodType,
+  ModbusOrderType,
+  ModbusProtocolLabelsMap,
+  ModbusProtocolType,
+  ModbusRegisterValues,
+  ModbusSlave,
+  noLeadTrailSpacesRegex,
+  PortLimits,
+  SlaveConfig,
+} from '@home/components/widget/lib/gateway/gateway-widget.models';
+import { SharedModule } from '@shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { GatewayPortTooltipPipe } from '@home/pipes/public-api';
+import { ModbusSecurityConfigComponent } from '../modbus-security-config/modbus-security-config.component';
+import { ModbusValuesComponent, } from '../modbus-values/modbus-values.component';
+
+@Component({
+  selector: 'tb-modbus-server-config',
+  templateUrl: './modbus-slave-config.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ModbusSlaveConfigComponent),
+      multi: true
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => ModbusSlaveConfigComponent),
+      multi: true
+    }
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    ModbusValuesComponent,
+    ModbusSecurityConfigComponent,
+    GatewayPortTooltipPipe,
+  ],
+  styles: [`
+    :host {
+      .nested-expansion-header {
+        .mat-content {
+          height: 100%;
+        }
+      }
+    }
+  `],
+})
+export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validator, OnDestroy {
+
+  slaveConfigFormGroup: UntypedFormGroup;
+  showSecurityControl: UntypedFormControl;
+  ModbusProtocolLabelsMap = ModbusProtocolLabelsMap;
+  ModbusMethodLabelsMap = ModbusMethodLabelsMap;
+  portLimits = PortLimits;
+
+  readonly modbusProtocolTypes = Object.values(ModbusProtocolType);
+  readonly modbusMethodTypes = Object.values(ModbusMethodType);
+  readonly modbusOrderType = Object.values(ModbusOrderType);
+  readonly ModbusProtocolType = ModbusProtocolType;
+  readonly serialSpecificControlKeys = ['serialPort', 'baudrate'];
+  readonly tcpUdpSpecificControlKeys = ['port', 'security', 'host'];
+
+  private onChange: (value: SlaveConfig) => void;
+  private onTouched: () => void;
+
+  private destroy$ = new Subject<void>();
+
+  constructor(private fb: FormBuilder) {
+    this.showSecurityControl = this.fb.control(false);
+    this.slaveConfigFormGroup = this.fb.group({
+      type: [ModbusProtocolType.TCP, []],
+      host: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+      port: [null, [Validators.required, Validators.min(PortLimits.MIN), Validators.max(PortLimits.MAX)]],
+      serialPort: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+      method: [ModbusMethodType.SOCKET, []],
+      unitId: [null, [Validators.required]],
+      baudrate: [null, []],
+      deviceName: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+      deviceType: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+      pollPeriod: [null, []],
+      sendDataToThingsBoard: [false, []],
+      byteOrder:[ModbusOrderType.BIG, []],
+      security: [],
+      identity: this.fb.group({
+        vendorName: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+        productCode: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+        vendorUrl: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+        productName: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+        modelName: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+      }),
+      values: [],
+    });
+
+    this.slaveConfigFormGroup.valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe((value: SlaveConfig) => {
+      if (value.type === ModbusProtocolType.Serial) {
+        value.port = value.serialPort;
+        delete value.serialPort;
+      }
+      this.onChange(value);
+      this.onTouched();
+    });
+
+    this.observeTypeChange();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  registerOnChange(fn: (value: SlaveConfig) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  validate(): ValidationErrors | null {
+    return this.slaveConfigFormGroup.valid ? null : {
+      serverConfigFormGroup: { valid: false }
+    };
+  }
+
+  writeValue(slaveConfig: ModbusSlave): void {
+    this.showSecurityControl.patchValue(!!slaveConfig.security);
+    this.updateSlaveConfig(slaveConfig);
+    this.updateControlsEnabling(slaveConfig.type);
+  }
+
+  private observeTypeChange(): void {
+    this.slaveConfigFormGroup.get('type').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(type => {
+      this.updateControlsEnabling(type);
+    });
+  }
+
+  private updateControlsEnabling(type: ModbusProtocolType): void {
+    if (type === ModbusProtocolType.Serial) {
+      this.serialSpecificControlKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.enable({emitEvent: false}));
+      this.tcpUdpSpecificControlKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.disable({emitEvent: false}));
+    } else {
+      this.serialSpecificControlKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.disable({emitEvent: false}));
+      this.tcpUdpSpecificControlKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.enable({emitEvent: false}));
+    }
+  };
+
+  private updateSlaveConfig(slaveConfig: ModbusSlave): void {
+    const {
+      type,
+      method,
+      unitId,
+      deviceName,
+      deviceType,
+      pollPeriod,
+      sendDataToThingsBoard,
+      byteOrder,
+      security,
+      identity,
+      values,
+      baudrate,
+      host,
+      port,
+    } = slaveConfig;
+    let slaveState: ModbusSlave = {
+      host: host ?? '',
+      type: type ?? ModbusProtocolType.TCP,
+      method: method ?? ModbusMethodType.SOCKET,
+      unitId: unitId ?? null,
+      deviceName: deviceName ?? '',
+      deviceType: deviceType ?? '',
+      pollPeriod: pollPeriod ?? null,
+      sendDataToThingsBoard: !!sendDataToThingsBoard,
+      byteOrder: byteOrder ?? ModbusOrderType.BIG,
+      security: security ?? {},
+      identity: identity ?? {
+        vendorName: '',
+        productCode: '',
+        vendorUrl: '',
+        productName: '',
+        modelName: '',
+      },
+      values: values ?? {} as ModbusRegisterValues,
+      port: port ?? null,
+    };
+    if (slaveConfig.type === ModbusProtocolType.Serial) {
+      slaveState = { ...slaveState, baudrate, serialPort: port, host: '', port: null } as ModbusSlave;
+    } else {
+      slaveState = { ...slaveState, serialPort: '', baudrate: null } as ModbusSlave;
+    }
+    this.slaveConfigFormGroup.setValue(slaveState, {emitEvent: false});
+  }
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
@ -0,0 +1,354 @@
+<!--
+
+    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.
+
+-->
+<div class="slaves-config-container">
+  <mat-toolbar color="primary">
+    <h2>{{ 'gateway.server-slave' | translate }}</h2>
+    <span fxFlex></span>
+    <div [tb-help]="modbusHelpLink"></div>
+    <button mat-icon-button
+            (click)="cancel()"
+            type="button">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  </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="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 }}"/>
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="('gateway.name-required') | translate"
+                    *ngIf="slaveConfigFormGroup.get('name').hasError('required') &&
+                                           slaveConfigFormGroup.get('name').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+      </div>
+    </div>
+    <div class="stroked tb-form-panel">
+      <div class="tb-form-panel no-border no-padding padding-top">
+        <div class="tb-flex row space-between align-center no-gap fill-width">
+          <div class="fixed-title-width" translate>gateway.server-connection</div>
+          <tb-toggle-select formControlName="type" appearance="fill">
+            <tb-toggle-option *ngFor="let type of modbusProtocolTypes" [value]="type">{{ ModbusProtocolLabelsMap.get(type) }}</tb-toggle-option>
+          </tb-toggle-select>
+        </div>
+        <div class="tb-form-panel no-border no-padding padding-top">
+          <div *ngIf="this.slaveConfigFormGroup.get('type').value !== ModbusProtocolType.Serial"
+               class="tb-form-row column-xs"
+               fxLayoutAlign="space-between center"
+          >
+            <div class="fixed-title-width tb-required" translate>gateway.host</div>
+            <div class="tb-flex no-gap">
+              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                <input matInput name="value" formControlName="host" placeholder="{{ 'gateway.set' | translate }}"/>
+                <mat-icon matSuffix
+                          matTooltipPosition="above"
+                          matTooltipClass="tb-error-tooltip"
+                          [matTooltip]="('gateway.host-required') | translate"
+                          *ngIf="slaveConfigFormGroup.get('host').hasError('required')
+                                           && slaveConfigFormGroup.get('host').touched"
+                          class="tb-error">
+                  warning
+                </mat-icon>
+              </mat-form-field>
+            </div>
+          </div>
+          <div *ngIf="this.slaveConfigFormGroup.get('type').value !== ModbusProtocolType.Serial else serialPort"
+               class="tb-form-row column-xs"
+               fxLayoutAlign="space-between center"
+          >
+            <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" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"
+                       name="value" formControlName="port" placeholder="{{ 'gateway.set' | translate }}"/>
+                <mat-icon matSuffix
+                          matTooltipPosition="above"
+                          matTooltipClass="tb-error-tooltip"
+                          [matTooltip]="slaveConfigFormGroup.get('port') | getGatewayPortTooltip"
+                          *ngIf="(slaveConfigFormGroup.get('port').hasError('required') ||
+                                            slaveConfigFormGroup.get('port').hasError('min') ||
+                                            slaveConfigFormGroup.get('port').hasError('max')) &&
+                                            slaveConfigFormGroup.get('port').touched"
+                          class="tb-error">
+                  warning
+                </mat-icon>
+              </mat-form-field>
+            </div>
+          </div>
+          <ng-template #serialPort>
+            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <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 name="value" formControlName="serialPort" placeholder="{{ 'gateway.set' | translate }}"/>
+                  <mat-icon matSuffix
+                            matTooltipPosition="above"
+                            matTooltipClass="tb-error-tooltip"
+                            [matTooltip]="slaveConfigFormGroup.get('serialPort') | getGatewayPortTooltip"
+                            *ngIf="(slaveConfigFormGroup.get('serialPort').hasError('required') ||
+                                            slaveConfigFormGroup.get('serialPort').hasError('min') ||
+                                            slaveConfigFormGroup.get('serialPort').hasError('max')) &&
+                                            slaveConfigFormGroup.get('serialPort').touched"
+                            class="tb-error">
+                    warning
+                  </mat-icon>
+                </mat-form-field>
+              </div>
+            </div>
+          </ng-template>
+          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.framer-type' | translate }}" translate>
+              gateway.method
+            </div>
+            <div class="tb-flex no-gap">
+              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                <mat-select formControlName="method">
+                  <mat-option *ngFor="let method of modbusMethodTypes" [value]="method">{{ ModbusMethodLabelsMap.get(method) }}</mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+          </div>
+        </div>
+        <ng-container *ngIf="this.slaveConfigFormGroup.get('type').value === ModbusProtocolType.Serial">
+          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+            <div class="fixed-title-width" translate>gateway.baudrate</div>
+            <div class="tb-flex no-gap">
+              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                <input matInput type="number" min="0" name="value" formControlName="baudrate" placeholder="{{ 'gateway.set' | translate }}"/>
+              </mat-form-field>
+            </div>
+          </div>
+          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+            <div class="fixed-title-width" translate>gateway.bytesize</div>
+            <div class="tb-flex no-gap">
+              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                <input matInput type="number" min="0" name="value" formControlName="bytesize" placeholder="{{ 'gateway.set' | translate }}"/>
+              </mat-form-field>
+            </div>
+          </div>
+          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+            <div class="fixed-title-width" translate>gateway.stopbits</div>
+            <div class="tb-flex no-gap">
+              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                <input matInput type="number" min="0" name="value" formControlName="stopbits" placeholder="{{ 'gateway.set' | translate }}"/>
+              </mat-form-field>
+            </div>
+          </div>
+          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+            <div class="fixed-title-width" translate>gateway.parity</div>
+            <div class="tb-flex no-gap">
+              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                <input matInput name="value" formControlName="parity" placeholder="{{ 'gateway.set' | translate }}"/>
+              </mat-form-field>
+            </div>
+          </div>
+          <div class="tb-form-row" fxLayoutAlign="space-between center">
+            <mat-slide-toggle class="mat-slide" formControlName="strict">
+              <mat-label>
+                {{ 'gateway.strict' | translate }}
+              </mat-label>
+            </mat-slide-toggle>
+          </div>
+        </ng-container>
+        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="fixed-title-width tb-required" translate>gateway.unit-id</div>
+          <div class="tb-flex no-gap">
+            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+              <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ 'gateway.set' | translate }}"/>
+              <mat-icon matSuffix
+                        matTooltipPosition="above"
+                        matTooltipClass="tb-error-tooltip"
+                        [matTooltip]="('gateway.unit-id-required') | translate"
+                        *ngIf="slaveConfigFormGroup.get('unitId').hasError('required') &&
+                                           slaveConfigFormGroup.get('unitId').touched"
+                        class="tb-error">
+                warning
+              </mat-icon>
+            </mat-form-field>
+          </div>
+        </div>
+        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="fixed-title-width tb-required" translate>gateway.device-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="deviceName" placeholder="{{ 'gateway.set' | translate }}"/>
+              <mat-icon matSuffix
+                        matTooltipPosition="above"
+                        matTooltipClass="tb-error-tooltip"
+                        [matTooltip]="('gateway.device-name-required') | translate"
+                        *ngIf="slaveConfigFormGroup.get('deviceName').hasError('required') &&
+                                           slaveConfigFormGroup.get('deviceName').touched"
+                        class="tb-error">
+                warning
+              </mat-icon>
+            </mat-form-field>
+          </div>
+        </div>
+        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+          <div class="fixed-title-width tb-required" translate>gateway.device-profile</div>
+          <div class="tb-flex no-gap">
+            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+              <input matInput name="value" formControlName="deviceType" placeholder="{{ 'gateway.set' | translate }}"/>
+              <mat-icon matSuffix
+                        matTooltipPosition="above"
+                        matTooltipClass="tb-error-tooltip"
+                        [matTooltip]="('gateway.device-profile-required') | translate"
+                        *ngIf="slaveConfigFormGroup.get('deviceType').hasError('required') &&
+                                           slaveConfigFormGroup.get('deviceType').touched"
+                        class="tb-error">
+                warning
+              </mat-icon>
+            </mat-form-field>
+          </div>
+        </div>
+        <div class="tb-form-row" fxLayoutAlign="space-between center">
+          <mat-slide-toggle class="mat-slide" formControlName="sendDataOnlyOnChange">
+            <mat-label>
+              {{ 'gateway.send-data-on-change' | translate }}
+            </mat-label>
+          </mat-slide-toggle>
+        </div>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div class="tb-form-panel no-border no-padding padding-top">
+            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="fixed-title-width" translate>gateway.connection-timeout</div>
+              <div class="tb-flex no-gap">
+                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                  <input matInput type="number" min="0" name="value" formControlName="timeout" placeholder="{{ 'gateway.set' | translate }}"/>
+                </mat-form-field>
+              </div>
+            </div>
+            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="fixed-title-width" translate>gateway.byte-order</div>
+              <div class="tb-flex no-gap">
+                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                  <mat-select formControlName="byteOrder">
+                    <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
+                  </mat-select>
+                </mat-form-field>
+              </div>
+            </div>
+            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="fixed-title-width" translate>gateway.word-order</div>
+              <div class="tb-flex no-gap">
+                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                  <mat-select formControlName="wordOrder">
+                    <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
+                  </mat-select>
+                </mat-form-field>
+              </div>
+            </div>
+            <mat-expansion-panel *ngIf="this.slaveConfigFormGroup.get('security')" [expanded]="showSecurityControl.value">
+              <mat-expansion-panel-header class="nested-expansion-header">
+                <mat-panel-title>
+                  <mat-slide-toggle [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">
+                    <mat-label>
+                      {{ 'gateway.tls-connection' | translate }}
+                    </mat-label>
+                  </mat-slide-toggle>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <tb-modbus-security-config formControlName="security"></tb-modbus-security-config>
+            </mat-expansion-panel>
+            <div class="tb-form-row" fxLayoutAlign="space-between center">
+              <mat-slide-toggle class="mat-slide" formControlName="retries">
+                <mat-label>
+                  {{ 'gateway.retries' | translate }}
+                </mat-label>
+              </mat-slide-toggle>
+            </div>
+            <div class="tb-form-row" fxLayoutAlign="space-between center">
+              <mat-slide-toggle class="mat-slide" formControlName="retryOnEmpty">
+                <mat-label>
+                  {{ 'gateway.retries-on-empty' | translate }}
+                </mat-label>
+              </mat-slide-toggle>
+            </div>
+            <div class="tb-form-row" fxLayoutAlign="space-between center">
+              <mat-slide-toggle class="mat-slide" formControlName="retryOnInvalid">
+                <mat-label>
+                  {{ 'gateway.retries-on-invalid' | translate }}
+                </mat-label>
+              </mat-slide-toggle>
+            </div>
+            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="fixed-title-width" translate>gateway.poll-period</div>
+              <div class="tb-flex no-gap">
+                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                  <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
+                </mat-form-field>
+              </div>
+            </div>
+            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="fixed-title-width" translate>gateway.connect-attempt-time</div>
+              <div class="tb-flex no-gap">
+                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                  <input matInput type="number" min="0" name="value" formControlName="connectAttemptTimeMs" placeholder="{{ 'gateway.set' | translate }}"/>
+                </mat-form-field>
+              </div>
+            </div>
+            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="fixed-title-width" translate>gateway.connect-attempt-count</div>
+              <div class="tb-flex no-gap">
+                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                  <input matInput type="number" min="0" name="value" formControlName="connectAttemptCount" placeholder="{{ 'gateway.set' | translate }}"/>
+                </mat-form-field>
+              </div>
+            </div>
+            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+              <div class="fixed-title-width" translate>gateway.wait-after-failed-attempts</div>
+              <div class="tb-flex no-gap">
+                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                  <input matInput type="number" min="0" name="value" formControlName="waitAfterFailedAttemptsMs" placeholder="{{ 'gateway.set' | translate }}"/>
+                </mat-form-field>
+              </div>
+            </div>
+          </div>
+        </mat-expansion-panel>
+        <div class="tb-form-panel stroked">
+          <div class="tb-form-panel-title" translate>gateway.values</div>
+          <tb-modbus-values [singleMode]="true" formControlName="values"></tb-modbus-values>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div mat-dialog-actions fxLayoutAlign="end center">
+    <button mat-button color="primary"
+            type="button"
+            cdkFocusInitial
+            (click)="cancel()">
+      {{ 'action.cancel' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            (click)="add()"
+            [disabled]="slaveConfigFormGroup.invalid || !slaveConfigFormGroup.dirty">
+      {{ this.data.buttonTitle | translate }}
+    </button>
+  </div>
+</div>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts
@ -0,0 +1,196 @@
+///
+/// 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.
+///
+
+import { ChangeDetectionStrategy, Component, forwardRef, Inject, OnDestroy } from '@angular/core';
+import {
+  FormBuilder,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
+import {
+  MappingInfo,
+  ModbusMethodLabelsMap,
+  ModbusMethodType,
+  ModbusOrderType,
+  ModbusProtocolLabelsMap,
+  ModbusProtocolType,
+  noLeadTrailSpacesRegex,
+  PortLimits, SlaveConfig,
+} from '@home/components/widget/lib/gateway/gateway-widget.models';
+import { SharedModule } from '@shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { Subject } from 'rxjs';
+import { ModbusValuesComponent } from '../modbus-values/modbus-values.component';
+import { ModbusSecurityConfigComponent } from '../modbus-security-config/modbus-security-config.component';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { Router } from '@angular/router';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { GatewayPortTooltipPipe } from '@home/pipes/gateway-port-tooltip/gateway-port-tooltip.pipe';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'tb-modbus-slave-dialog',
+  templateUrl: './modbus-slave-dialog.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ModbusSlaveDialogComponent),
+      multi: true
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => ModbusSlaveDialogComponent),
+      multi: true
+    }
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    ModbusValuesComponent,
+    ModbusSecurityConfigComponent,
+    GatewayPortTooltipPipe,
+  ],
+  styles: [`
+    :host {
+      .slaves-config-container {
+        width: 900px;
+      }
+      .nested-expansion-header {
+        .mat-content {
+          height: 100%;
+          overflow: hidden;
+        }
+      }
+    }
+  `],
+})
+export class ModbusSlaveDialogComponent extends DialogComponent<ModbusSlaveDialogComponent, SlaveConfig> implements OnDestroy {
+
+  slaveConfigFormGroup: UntypedFormGroup;
+  showSecurityControl: UntypedFormControl;
+  portLimits = PortLimits;
+
+  readonly modbusProtocolTypes = Object.values(ModbusProtocolType);
+  readonly modbusMethodTypes = Object.values(ModbusMethodType);
+  readonly modbusOrderType = Object.values(ModbusOrderType);
+  readonly ModbusProtocolType = ModbusProtocolType;
+  readonly ModbusProtocolLabelsMap = ModbusProtocolLabelsMap;
+  readonly ModbusMethodLabelsMap = ModbusMethodLabelsMap;
+  readonly modbusHelpLink =
+    'https://thingsboard.io/docs/iot-gateway/config/modbus/#section-master-description-and-configuration-parameters';
+  readonly serialSpecificControlKeys = ['serialPort', 'baudrate', 'stopbits', 'bytesize', 'parity', 'strict'];
+  readonly tcpUdpSpecificControlKeys = ['port', 'security', 'host'];
+
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private fb: FormBuilder,
+    protected store: Store<AppState>,
+    protected router: Router,
+    @Inject(MAT_DIALOG_DATA) public data: MappingInfo,
+    public dialogRef: MatDialogRef<ModbusSlaveDialogComponent, SlaveConfig>,
+  ) {
+    super(store, router, dialogRef);
+
+    this.showSecurityControl = this.fb.control(false);
+    this.slaveConfigFormGroup = this.fb.group({
+      name: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+      type: [ModbusProtocolType.TCP, [Validators.required]],
+      host: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+      port: [null, [Validators.required, Validators.min(PortLimits.MIN), Validators.max(PortLimits.MAX)]],
+      serialPort: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+      method: [ModbusMethodType.SOCKET, []],
+      baudrate: [null, []],
+      stopbits: [null, []],
+      bytesize: [null, []],
+      parity: [null, []],
+      strict: [false, []],
+      unitId: [null, [Validators.required]],
+      deviceName: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+      deviceType: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+      sendDataOnlyOnChange: [false, []],
+      timeout: [],
+      byteOrder: [ModbusOrderType.BIG, []],
+      wordOrder: [ModbusOrderType.BIG, []],
+      retries: [false, []],
+      retryOnEmpty: [false, []],
+      retryOnInvalid: [false, []],
+      pollPeriod: [null, []],
+      connectAttemptTimeMs: [null, []],
+      connectAttemptCount: [null, []],
+      waitAfterFailedAttemptsMs: [null, []],
+      values: [{}, []],
+      security: [{}],
+    });
+
+    this.slaveConfigFormGroup.patchValue({
+      ...this.data.value,
+      values: {
+        attributes: this.data.value.attributes ?? [],
+        timeseries: this.data.value.timeseries ?? [],
+        attributeUpdates: this.data.value.attributeUpdates ?? [],
+        rpc: this.data.value.rpc ?? [],
+      }
+    });
+    this.showSecurityControl.patchValue(!!this.data.value.security);
+    this.updateControlsEnabling(this.data.value.type);
+    this.observeTypeChange();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  cancel(): void {
+    this.dialogRef.close(null);
+  }
+
+  add(): void {
+    if (this.slaveConfigFormGroup.valid) {
+      const slaveResult = {...this.slaveConfigFormGroup.value, ...this.slaveConfigFormGroup.value.values};
+      delete slaveResult.values;
+      if (slaveResult.type === ModbusProtocolType.Serial) {
+        slaveResult.port = slaveResult.serialPort;
+        delete slaveResult.serialPort;
+      }
+      this.dialogRef.close(slaveResult);
+    }
+  }
+
+  private observeTypeChange(): void {
+    this.slaveConfigFormGroup.get('type').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(type => {
+      this.updateControlsEnabling(type);
+    });
+  }
+
+  private updateControlsEnabling(type: ModbusProtocolType): void {
+    if (type === ModbusProtocolType.Serial) {
+      this.serialSpecificControlKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.enable({emitEvent: false}));
+      this.tcpUdpSpecificControlKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.disable({emitEvent: false}));
+    } else {
+      this.serialSpecificControlKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.disable({emitEvent: false}));
+      this.tcpUdpSpecificControlKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.enable({emitEvent: false}));
+    }
+  };
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.html
@ -0,0 +1,117 @@
+<!--
+
+    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.
+
+-->
+
+<ng-container *ngIf="singleMode else multipleView">
+  <div [formGroup]="valuesFormGroup" class="tb-form-panel no-border no-padding padding-top" fxLayout="column">
+    <ng-container [ngTemplateOutlet]="singleView" [ngTemplateOutletContext]="{$implicit: null}"></ng-container>
+  </div>
+</ng-container>
+
+<ng-template #multipleView>
+  <mat-tab-group [formGroup]="valuesFormGroup">
+    <mat-tab *ngFor="let register of modbusRegisterTypes" label="{{ ModbusValuesTranslationsMap.get(register) | translate }}">
+      <div [formGroup]="valuesFormGroup.get(register)" class="tb-form-panel no-border no-padding padding-top" fxLayout="column">
+        <ng-container [ngTemplateOutlet]="singleView" [ngTemplateOutletContext]="{$implicit: register}"></ng-container>
+      </div>
+    </mat-tab>
+  </mat-tab-group>
+</ng-template>
+
+<ng-template #singleView let-register>
+  <div class="tb-form-row space-between tb-flex">
+    <div class="fixed-title-width" translate>gateway.attributes</div>
+    <div class="tb-flex ellipsis-chips-container">
+      <mat-chip-listbox [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.ATTRIBUTES, register)" class="tb-flex">
+        <mat-chip *ngFor="let attribute of getValueGroup(ModbusValueKey.ATTRIBUTES, register)">
+          {{ attribute.tag }}
+        </mat-chip>
+        <mat-chip class="mat-mdc-chip ellipsis-chip">
+          <label class="ellipsis-text"></label>
+        </mat-chip>
+      </mat-chip-listbox>
+      <button type="button"
+              mat-icon-button
+              color="primary"
+              #attributesButton
+              (click)="manageKeys($event, attributesButton, ModbusValueKey.ATTRIBUTES, register)">
+        <tb-icon matButtonIcon>edit</tb-icon>
+      </button>
+    </div>
+  </div>
+  <div class="tb-form-row space-between tb-flex">
+    <div class="fixed-title-width" translate>gateway.timeseries</div>
+    <div class="tb-flex ellipsis-chips-container">
+      <mat-chip-listbox class="tb-flex" [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.TIMESERIES, register)">
+        <mat-chip *ngFor="let telemetry of getValueGroup(ModbusValueKey.TIMESERIES, register)">
+          {{ telemetry.tag }}
+        </mat-chip>
+        <mat-chip class="mat-mdc-chip ellipsis-chip">
+          <label class="ellipsis-text"></label>
+        </mat-chip>
+      </mat-chip-listbox>
+      <button type="button"
+              mat-icon-button
+              color="primary"
+              #telemetryButton
+              (click)="manageKeys($event, telemetryButton, ModbusValueKey.TIMESERIES, register)">
+        <tb-icon matButtonIcon>edit</tb-icon>
+      </button>
+    </div>
+  </div>
+  <div class="tb-form-row space-between tb-flex">
+    <div class="fixed-title-width" translate>gateway.attribute-updates</div>
+    <div class="tb-flex ellipsis-chips-container">
+      <mat-chip-listbox [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.ATTRIBUTES_UPDATES, register)" class="tb-flex">
+        <mat-chip *ngFor="let attributeUpdate of getValueGroup(ModbusValueKey.ATTRIBUTES_UPDATES, register)">
+          {{ attributeUpdate.tag }}
+        </mat-chip>
+        <mat-chip class="mat-mdc-chip ellipsis-chip">
+          <label class="ellipsis-text"></label>
+        </mat-chip>
+      </mat-chip-listbox>
+      <button type="button"
+              mat-icon-button
+              color="primary"
+              #attributesUpdatesButton
+              (click)="manageKeys($event, attributesUpdatesButton, ModbusValueKey.ATTRIBUTES_UPDATES, register)">
+        <tb-icon matButtonIcon>edit</tb-icon>
+      </button>
+    </div>
+  </div>
+  <div class="tb-form-row space-between tb-flex">
+    <div class="fixed-title-width" translate>gateway.rpc-requests</div>
+    <div class="tb-flex ellipsis-chips-container">
+      <mat-chip-listbox [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.RPC_REQUESTS, register)" class="tb-flex">
+        <mat-chip *ngFor="let rpcRequest of getValueGroup(ModbusValueKey.RPC_REQUESTS, register)">
+          {{ rpcRequest.tag }}
+        </mat-chip>
+        <mat-chip class="mat-mdc-chip ellipsis-chip">
+          <label class="ellipsis-text"></label>
+        </mat-chip>
+      </mat-chip-listbox>
+      <button type="button"
+              mat-icon-button
+              color="primary"
+              #rpcRequestsButton
+              (click)="manageKeys($event, rpcRequestsButton, ModbusValueKey.RPC_REQUESTS, register)">
+        <tb-icon matButtonIcon>edit</tb-icon>
+      </button>
+    </div>
+  </div>
+</ng-template>
+
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.ts
@ -0,0 +1,204 @@
+///
+/// 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.
+///
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  forwardRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Renderer2,
+  ViewContainerRef
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormBuilder,
+  FormGroup,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  ValidationErrors,
+  Validator,
+} from '@angular/forms';
+import {
+  ModbusKeysAddKeyTranslationsMap,
+  ModbusKeysDeleteKeyTranslationsMap,
+  ModbusKeysNoKeysTextTranslationsMap,
+  ModbusKeysPanelTitleTranslationsMap,
+  ModbusRegisterTranslationsMap,
+  ModbusRegisterType,
+  ModbusRegisterValues,
+  ModbusValueKey,
+} from '@home/components/widget/lib/gateway/gateway-widget.models';
+import { SharedModule } from '@shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { EllipsisChipListDirective } from '@shared/directives/public-api';
+import { MatButton } from '@angular/material/button';
+import { TbPopoverService } from '@shared/components/popover.service';
+import { ModbusDataKeysPanelComponent } from '../modbus-data-keys-panel/modbus-data-keys-panel.component';
+
+@Component({
+  selector: 'tb-modbus-values',
+  templateUrl: './modbus-values.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ModbusValuesComponent),
+      multi: true
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => ModbusValuesComponent),
+      multi: true
+    }
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    EllipsisChipListDirective,
+  ],
+  styles: [`
+    :host {
+      .mat-mdc-tab-body-wrapper {
+        min-height: 320px;
+      }
+    }
+  `]
+})
+
+export class ModbusValuesComponent implements ControlValueAccessor, Validator, OnChanges, OnDestroy {
+
+  @Input() singleMode = false;
+
+  modbusRegisterTypes: ModbusRegisterType[] = Object.values(ModbusRegisterType);
+  modbusValueKeys = Object.values(ModbusValueKey);
+  ModbusValuesTranslationsMap = ModbusRegisterTranslationsMap;
+  ModbusValueKey = ModbusValueKey;
+  valuesFormGroup: FormGroup;
+
+  private onChange: (value: string) => void;
+  private onTouched: () => void;
+
+  private destroy$ = new Subject<void>();
+
+  constructor(private fb: FormBuilder,
+              private popoverService: TbPopoverService,
+              private renderer: Renderer2,
+              private viewContainerRef: ViewContainerRef,
+              private cdr: ChangeDetectorRef,
+  ) {
+    this.valuesFormGroup = this.fb.group(this.modbusRegisterTypes.reduce((registersAcc, register) => {
+      return {
+        ...registersAcc,
+        [register]: this.fb.group(this.modbusValueKeys.reduce((acc, key) => ({...acc, [key]: [[], []]}), {})),
+      };
+    }, {}));
+
+    this.observeValuesChanges();
+  }
+
+  ngOnChanges(): void {
+    if (this.singleMode) {
+      this.valuesFormGroup = this.fb.group(this.modbusValueKeys.reduce((acc, key) => ({...acc, [key]: [[], []]}), {}));
+      this.observeValuesChanges();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  writeValue(values: ModbusRegisterValues): void {
+    this.valuesFormGroup.patchValue(values, {emitEvent: false});
+  }
+
+  validate(): ValidationErrors | null {
+    return this.valuesFormGroup.valid ? null : {
+      valuesFormGroup: {valid: false}
+    };
+  }
+
+  getValueGroup(valueKey: ModbusValueKey, register?: ModbusRegisterType) {
+    return register ? this.valuesFormGroup.get(register).get(valueKey).value : this.valuesFormGroup.get(valueKey).value;
+  }
+
+  manageKeys($event: Event, matButton: MatButton, keysType: ModbusValueKey, register?: ModbusRegisterType): void {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    const trigger = matButton._elementRef.nativeElement;
+    if (this.popoverService.hasPopover(trigger)) {
+      this.popoverService.hidePopover(trigger);
+    } else {
+      const group = this.valuesFormGroup;
+
+      const keysControl = register ? group.get(register).get(keysType) : group.get(keysType);
+      const ctx = {
+        values: keysControl.value,
+        isMaster: !this.singleMode,
+        keysType,
+        panelTitle: ModbusKeysPanelTitleTranslationsMap.get(keysType),
+        addKeyTitle: ModbusKeysAddKeyTranslationsMap.get(keysType),
+        deleteKeyTitle: ModbusKeysDeleteKeyTranslationsMap.get(keysType),
+        noKeysText: ModbusKeysNoKeysTextTranslationsMap.get(keysType)
+      };
+      const dataKeysPanelPopover = this.popoverService.displayPopover(
+        trigger,
+        this.renderer,
+        this.viewContainerRef,
+        ModbusDataKeysPanelComponent,
+        'leftBottom',
+        false,
+        null,
+        ctx,
+        {},
+        {},
+        {},
+        true
+      );
+      dataKeysPanelPopover.tbComponentRef.instance.popover = dataKeysPanelPopover;
+      dataKeysPanelPopover.tbComponentRef.instance.keysDataApplied.pipe(takeUntil(this.destroy$)).subscribe((keysData) => {
+        dataKeysPanelPopover.hide();
+        keysControl.patchValue(keysData);
+        keysControl.markAsDirty();
+        this.cdr.markForCheck();
+      });
+    }
+  }
+
+  private observeValuesChanges(): void {
+    this.valuesFormGroup.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(value => {
+        this.onChange(value);
+        this.onTouched();
+      });
+  }
+}
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/public-api.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/public-api.ts
@ -0,0 +1,23 @@
+///
+/// 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 './modbus-basic-config/modbus-basic-config.component';
+export * from './modbus-values/modbus-values.component';
+export * from './modbus-data-keys-panel/modbus-data-keys-panel.component';
+export * from './modbus-slave-config/modbus-slave-config.component';
+export * from './modbus-master-table/modbus-master-table.component';
+export * from './modbus-slave-dialog/modbus-slave-dialog.component';
+export * from './modbus-security-config/modbus-security-config.component';
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt-basic-config/mqtt-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt-basic-config/mqtt-basic-config.component.ts
@ -25,8 +25,8 @@ import {
  Validator,
 } from '@angular/forms';
 import {
-  ConnectorBaseConfig,
  MappingType,
+  MQTTBasicConfig,
  RequestMappingData,
  RequestType,
 } from '@home/components/widget/lib/gateway/gateway-widget.models';
@ -112,9 +112,8 @@ export class MqttBasicConfigComponent implements ControlValueAccessor, Validator
    this.onTouched = fn;
  }

-  writeValue(basicConfig: ConnectorBaseConfig): void {
+  writeValue(basicConfig: MQTTBasicConfig): void {
    const { broker, dataMapping = [], requestsMapping } = basicConfig;
-
    const editedBase = {
      workers: broker && (broker.maxNumberOfWorkers || broker.maxMessageNumberPerWorker) ? {
        maxNumberOfWorkers: broker.maxNumberOfWorkers,
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.html
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.scss
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.ts
@ -39,19 +39,19 @@ import { takeUntil } from 'rxjs/operators';
 import { TooltipDirective } from '@shared/directives/public-api';

@Component({
-  selector: 'tb-server-config',
-  templateUrl: './server-config.component.html',
-  styleUrls: ['./server-config.component.scss'],
+  selector: 'tb-opc-server-config',
+  templateUrl: './opc-server-config.component.html',
+  styleUrls: ['./opc-server-config.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ServerConfigComponent),
+      useExisting: forwardRef(() => OpcServerConfigComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => ServerConfigComponent),
+      useExisting: forwardRef(() => OpcServerConfigComponent),
      multi: true
    }
  ],
@ -63,7 +63,7 @@ import { TooltipDirective } from '@shared/directives/public-api';
    TooltipDirective,
  ]
 })
-export class ServerConfigComponent implements ControlValueAccessor, Validator, OnDestroy {
+export class OpcServerConfigComponent implements ControlValueAccessor, Validator, OnDestroy {

  securityPolicyTypes = SecurityPolicyTypes;
  serverConfigFormGroup: UntypedFormGroup;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-ua-basic-config/opc-ua-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-ua-basic-config/opc-ua-basic-config.component.html
@ -20,7 +20,7 @@
    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>
  </mat-tab>
  <mat-tab label="{{ 'gateway.server' | translate }}*">
-    <tb-server-config formControlName="server"></tb-server-config>
+    <tb-opc-server-config formControlName="server"></tb-opc-server-config>
  </mat-tab>
  <mat-tab label="{{ 'gateway.data-mapping' | translate }}*">
    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-ua-basic-config/opc-ua-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-ua-basic-config/opc-ua-basic-config.component.ts
@ -25,9 +25,9 @@ import {
  Validator,
 } from '@angular/forms';
 import {
-  ConnectorBaseConfig,
  ConnectorType,
  MappingType,
+  OPCBasicConfig,
 } from '@home/components/widget/lib/gateway/gateway-widget.models';
 import { SharedModule } from '@shared/shared.module';
 import { CommonModule } from '@angular/common';
@ -35,7 +35,7 @@ import {
  BrokerConfigControlComponent,
  MappingTableComponent,
  SecurityConfigComponent,
-  ServerConfigComponent,
+  OpcServerConfigComponent,
  WorkersConfigControlComponent
 } from '@home/components/widget/lib/gateway/connectors-configuration/public-api';
 import { takeUntil } from 'rxjs/operators';
@ -65,7 +65,7 @@ import { Subject } from 'rxjs';
    WorkersConfigControlComponent,
    BrokerConfigControlComponent,
    MappingTableComponent,
-    ServerConfigComponent,
+    OpcServerConfigComponent,
  ],
  styleUrls: ['./opc-ua-basic-config.component.scss']
 })
@ -109,7 +109,7 @@ export class OpcUaBasicConfigComponent implements ControlValueAccessor, Validato
    this.onTouched = fn;
  }

-  writeValue(basicConfig: ConnectorBaseConfig): void {
+  writeValue(basicConfig: OPCBasicConfig): void {
    const editedBase = {
      server: basicConfig.server || {},
      mapping: basicConfig.mapping || [],
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/public-api.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/public-api.ts
@ -17,10 +17,11 @@
 export * from './mapping-table/mapping-table.component';
 export * from './device-info-table/device-info-table.component';
 export * from './security-config/security-config.component';
-export * from './server-config/server-config.component';
+export * from './opc-server-config/opc-server-config.component';
 export * from './mapping-data-keys-panel/mapping-data-keys-panel.component';
 export * from './type-value-panel/type-value-panel.component';
 export * from './broker-config-control/broker-config-control.component';
 export * from './workers-config-control/workers-config-control.component';
 export * from './opc-ua-basic-config/opc-ua-basic-config.component';
 export * from './mqtt-basic-config/mqtt-basic-config.component';
+export * from './modbus/public-api';
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
@ -183,6 +183,10 @@
                                  formControlName="basicConfig"
                                  [generalTabContent]="generalTabContent">
          </tb-opc-ua-basic-config>
+          <tb-modbus-basic-config *ngSwitchCase="connectorType.MODBUS"
+                                  formControlName="basicConfig"
+                                  [generalTabContent]="generalTabContent">
+          </tb-modbus-basic-config>
        </ng-container>
      </ng-container>
      <ng-template #defaultConfig>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts
@ -50,6 +50,7 @@ import { UtilsService } from '@core/services/utils.service';
 import { EntityType } from '@shared/models/entity-type.models';
 import {
  AddConnectorConfigData,
+  ConnectorBaseConfig,
  ConnectorConfigurationModes,
  ConnectorType,
  GatewayConnector,
@ -92,7 +93,8 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie

  allowBasicConfig = new Set<ConnectorType>([
    ConnectorType.MQTT,
-    ConnectorType.OPCUA
+    ConnectorType.OPCUA,
+    ConnectorType.MODBUS,
  ]);

  gatewayLogLevel = Object.values(GatewayLogLevel);
@ -719,7 +721,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
      connector.key = 'auto';
    }
    if (!connector.configurationJson) {
-      connector.configurationJson = {};
+      connector.configurationJson = {} as ConnectorBaseConfig;
    }
    connector.basicConfig = connector.configurationJson;

@ -732,6 +734,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
    switch (connector.type) {
      case ConnectorType.MQTT:
      case ConnectorType.OPCUA:
+      case ConnectorType.MODBUS:
        this.connectorForm.get('type').patchValue(connector.type, {emitValue: false, onlySelf: true});
        this.connectorForm.get('basicConfig').setValue({}, {emitEvent: false});

--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
@ -176,13 +176,23 @@ export type ConnectorMapping = DeviceConnectorMapping | RequestMappingData | Con

 export type ConnectorMappingFormValue = DeviceConnectorMapping | RequestMappingFormValue | ConverterMappingFormValue;

-export interface ConnectorBaseConfig {
-  mapping?: DeviceConnectorMapping[];
-  dataMapping?: ConverterConnectorMapping[];
-  requestsMapping?: Record<RequestType, RequestMappingData> | RequestMappingData[];
-  server?: ServerConfig;
-  broker?: BrokerConfig;
-  workers?: WorkersConfig;
+export type ConnectorBaseConfig = MQTTBasicConfig | OPCBasicConfig | ModbusBasicConfig;
+
+export interface MQTTBasicConfig {
+  dataMapping: ConverterConnectorMapping[];
+  requestsMapping: Record<RequestType, RequestMappingData> | RequestMappingData[];
+  broker: BrokerConfig;
+  workers: WorkersConfig;
+}
+
+export interface OPCBasicConfig {
+  mapping: DeviceConnectorMapping[];
+  server: ServerConfig;
+}
+
+export interface ModbusBasicConfig {
+  master: ModbusMasterConfig;
+  slave: ModbusSlave;
 }

 export interface WorkersConfig {
@ -759,3 +769,246 @@ export const SecurityPolicyTypes = [
  { value: SecurityPolicy.BASIC256, name: 'Basic256' },
  { value: SecurityPolicy.BASIC256SHA, name: 'Basic256SHA256' }
 ];
+
+export enum ModbusProtocolType {
+  TCP = 'tcp',
+  UDP = 'udp',
+  Serial = 'serial',
+}
+
+export const ModbusProtocolLabelsMap = new Map<ModbusProtocolType, string>(
+  [
+    [ModbusProtocolType.TCP, 'TCP'],
+    [ModbusProtocolType.UDP, 'UDP'],
+    [ModbusProtocolType.Serial, 'Serial'],
+  ]
+);
+
+export enum ModbusMethodType {
+  SOCKET = 'socket',
+  RTU = 'rtu',
+}
+
+export const ModbusMethodLabelsMap = new Map<ModbusMethodType, string>(
+  [
+    [ModbusMethodType.SOCKET, 'Socket'],
+    [ModbusMethodType.RTU, 'RTU'],
+  ]
+);
+
+export enum ModbusOrderType {
+  BIG = 'BIG',
+  LITTLE = 'LITTLE',
+}
+
+export enum ModbusRegisterType {
+  HoldingRegister = 'holding_registers',
+  CoilsInitializer = 'coils_initializer',
+  InputRegister = 'input_registers',
+  DiscreteInputs = 'discrete_inputs'
+}
+
+export const ModbusRegisterTranslationsMap = new Map<ModbusRegisterType, string>(
+  [
+    [ModbusRegisterType.HoldingRegister, 'gateway.holding_registers'],
+    [ModbusRegisterType.CoilsInitializer, 'gateway.coils_initializer'],
+    [ModbusRegisterType.InputRegister, 'gateway.input_registers'],
+    [ModbusRegisterType.DiscreteInputs, 'gateway.discrete_inputs']
+  ]
+);
+
+export enum ModbusDataType {
+  STRING = 'string',
+  BYTES = 'bytes',
+  BITS = 'bits',
+  INT16 = '16int',
+  UINT16 = '16uint',
+  FLOAT16 = '16float',
+  INT32 = '32int',
+  UINT32 = '32uint',
+  FLOAT32 = '32float',
+  INT64 = '64int',
+  UINT64 = '64uint',
+  FLOAT64 = '64float'
+}
+
+export enum ModbusObjectCountByDataType {
+  '16int' = 1,
+  '16uint' = 1,
+  '16float' = 1,
+  '32int' = 2,
+  '32uint' = 2,
+  '32float' = 2,
+  '64int' = 4,
+  '64uint' = 4,
+  '64float' = 4,
+}
+
+export enum ModbusValueField {
+  Tag = 'tag',
+  Type = 'type',
+  ObjectsCount = 'objectsCount',
+  Address = 'address',
+  Value = 'value',
+}
+
+export const ModbusFieldsTranslationsMap = new Map<ModbusValueField, string>(
+  [
+    [ModbusValueField.Tag, 'gateway.tag'],
+    [ModbusValueField.Type, 'gateway.type'],
+    [ModbusValueField.ObjectsCount, 'gateway.objects_count'],
+    [ModbusValueField.Address, 'gateway.address'],
+    [ModbusValueField.Value, 'gateway.value']
+  ]
+);
+
+export enum ModbusValueKey {
+  ATTRIBUTES = 'attributes',
+  TIMESERIES = 'timeseries',
+  ATTRIBUTES_UPDATES = 'attributeUpdates',
+  RPC_REQUESTS = 'rpc',
+}
+
+export const ModbusKeysPanelTitleTranslationsMap = new Map<ModbusValueKey, string>(
+  [
+    [ModbusValueKey.ATTRIBUTES, 'gateway.attributes'],
+    [ModbusValueKey.TIMESERIES, 'gateway.timeseries'],
+    [ModbusValueKey.ATTRIBUTES_UPDATES, 'gateway.attribute-updates'],
+    [ModbusValueKey.RPC_REQUESTS, 'gateway.rpc-requests']
+  ]
+);
+
+export const ModbusKeysAddKeyTranslationsMap = new Map<ModbusValueKey, string>(
+  [
+    [ModbusValueKey.ATTRIBUTES, 'gateway.add-attribute'],
+    [ModbusValueKey.TIMESERIES, 'gateway.add-timeseries'],
+    [ModbusValueKey.ATTRIBUTES_UPDATES, 'gateway.add-attribute-update'],
+    [ModbusValueKey.RPC_REQUESTS, 'gateway.add-rpc-request']
+  ]
+);
+
+export const ModbusKeysDeleteKeyTranslationsMap = new Map<ModbusValueKey, string>(
+  [
+    [ModbusValueKey.ATTRIBUTES, 'gateway.delete-attribute'],
+    [ModbusValueKey.TIMESERIES, 'gateway.delete-timeseries'],
+    [ModbusValueKey.ATTRIBUTES_UPDATES, 'gateway.delete-attribute-update'],
+    [ModbusValueKey.RPC_REQUESTS, 'gateway.delete-rpc-requests']
+  ]
+);
+
+export const ModbusKeysNoKeysTextTranslationsMap = new Map<ModbusValueKey, string>(
+  [
+    [ModbusValueKey.ATTRIBUTES, 'gateway.no-attributes'],
+    [ModbusValueKey.TIMESERIES, 'gateway.no-timeseries'],
+    [ModbusValueKey.ATTRIBUTES_UPDATES, 'gateway.no-attribute-updates'],
+    [ModbusValueKey.RPC_REQUESTS, 'gateway.no-rpc-requests']
+  ]
+);
+
+export const ModbusClientTypeLabelsMap = new Map<ModbusProtocolType, string>(
+  [
+    [ModbusProtocolType.TCP, 'TCP/UDP'],
+    [ModbusProtocolType.UDP, 'TCP/UDP'],
+    [ModbusProtocolType.Serial, 'Serial'],
+  ]
+);
+
+export const ModbusFunctionCodeTranslationsMap = new Map<number, string>(
+  [
+    [1, 'gateway.read-coils'],
+    [2, 'gateway.read-discrete-inputs'],
+    [3, 'gateway.read-multiple-holding-registers'],
+    [4, 'gateway.read-input-registers'],
+    [5, 'gateway.write-coil'],
+    [6, 'gateway.write-register'],
+    [15, 'gateway.write-coils'],
+    [16, 'gateway.write-registers'],
+  ]
+);
+
+export interface ModbusMasterConfig {
+  slaves: SlaveConfig[];
+}
+
+export interface SlaveConfig {
+  name: string;
+  host?: string;
+  port: string | number;
+  serialPort?: string;
+  type: ModbusProtocolType;
+  method: ModbusMethodType;
+  timeout: number;
+  byteOrder: ModbusOrderType;
+  wordOrder: ModbusOrderType;
+  retries: boolean;
+  retryOnEmpty: boolean;
+  retryOnInvalid: boolean;
+  pollPeriod: number;
+  unitId: number;
+  deviceName: string;
+  deviceType?: string;
+  sendDataOnlyOnChange: boolean;
+  connectAttemptTimeMs: number;
+  connectAttemptCount: number;
+  waitAfterFailedAttemptsMs: number;
+  attributes: ModbusValue[];
+  timeseries: ModbusValue[];
+  attributeUpdates: ModbusValue[];
+  rpc: ModbusValue[];
+  security?: ModbusSecurity;
+  baudrate?: number;
+  stopbits?: number;
+  bytesize?: number;
+  parity?: string;
+  strict?: boolean;
+}
+
+export interface ModbusValue {
+  tag: string;
+  type: ModbusDataType;
+  functionCode?: number;
+  objectsCount: number;
+  address: number;
+  value?: string;
+}
+
+export interface ModbusSecurity {
+  certfile?: string;
+  keyfile?: string;
+  password?: string;
+  server_hostname?: string;
+  reqclicert?: boolean;
+}
+
+export interface ModbusSlave {
+  host?: string;
+  type: ModbusProtocolType;
+  method: ModbusMethodType;
+  unitId: number;
+  serialPort?: string;
+  baudrate?: number;
+  deviceName: string;
+  deviceType: string;
+  pollPeriod: number;
+  sendDataToThingsBoard: boolean;
+  byteOrder: ModbusOrderType;
+  identity: ModbusIdentity;
+  values: ModbusRegisterValues;
+  port: string | number;
+  security: ModbusSecurity;
+}
+
+export interface ModbusRegisterValues {
+  attributes: ModbusValue[];
+  timeseries: ModbusValue[];
+  attributeUpdates: ModbusValue[];
+  rpc: ModbusValue[];
+}
+
+export interface ModbusIdentity {
+  vendorName?: string;
+  productCode?: string;
+  vendorUrl?: string;
+  productName?: string;
+  modelName?: string;
+}
--- a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
@ -90,9 +90,6 @@ import { ToggleButtonWidgetComponent } from '@home/components/widget/lib/button/
 import { TimeSeriesChartWidgetComponent } from '@home/components/widget/lib/chart/time-series-chart-widget.component';
 import { AddConnectorDialogComponent } from '@home/components/widget/lib/gateway/dialog/add-connector-dialog.component';
 import { MappingDialogComponent } from '@home/components/widget/lib/gateway/dialog/mapping-dialog.component';
-import {
-  EllipsisChipListDirective
-} from '@home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive';
 import { StatusWidgetComponent } from '@home/components/widget/lib/indicator/status-widget.component';
 import { LatestChartComponent } from '@home/components/widget/lib/chart/latest-chart.component';
 import { PieChartWidgetComponent } from '@home/components/widget/lib/chart/pie-chart-widget.component';
@ -120,10 +117,12 @@ import {
  MappingTableComponent,
  MqttBasicConfigComponent,
  OpcUaBasicConfigComponent,
-  ServerConfigComponent,
+  OpcServerConfigComponent,
  TypeValuePanelComponent,
  WorkersConfigControlComponent,
+  ModbusBasicConfigComponent
 } from '@home/components/widget/lib/gateway/connectors-configuration/public-api';
+import { EllipsisChipListDirective } from '@shared/directives/public-api';

@NgModule({
  declarations: [
@ -163,7 +162,6 @@ import {
    GatewayConfigurationComponent,
    GatewayRemoteConfigurationDialogComponent,
    GatewayServiceRPCConnectorTemplateDialogComponent,
-    EllipsisChipListDirective,
    ValueCardWidgetComponent,
    AggregatedValueCardWidgetComponent,
    CountWidgetComponent,
@ -193,22 +191,24 @@ import {
    LabelValueCardWidgetComponent,
    UnreadNotificationWidgetComponent,
    NotificationTypeFilterPanelComponent],
-  imports: [
-    CommonModule,
-    SharedModule,
-    RpcWidgetsModule,
-    HomePageWidgetsModule,
-    SharedHomeComponentsModule,
-    RestConnectorSecurityComponent,
-    GatewayHelpLinkPipe,
-    BrokerConfigControlComponent,
-    WorkersConfigControlComponent,
-    ServerConfigComponent,
-    MqttBasicConfigComponent,
-    MappingTableComponent,
-    OpcUaBasicConfigComponent,
-    KeyValueIsNotEmptyPipe
-  ],
+    imports: [
+        CommonModule,
+        SharedModule,
+        RpcWidgetsModule,
+        HomePageWidgetsModule,
+        SharedHomeComponentsModule,
+        RestConnectorSecurityComponent,
+        GatewayHelpLinkPipe,
+        BrokerConfigControlComponent,
+        WorkersConfigControlComponent,
+        OpcServerConfigComponent,
+        MqttBasicConfigComponent,
+        MappingTableComponent,
+        OpcUaBasicConfigComponent,
+        KeyValueIsNotEmptyPipe,
+        ModbusBasicConfigComponent,
+        EllipsisChipListDirective,
+    ],
  exports: [
    EntitiesTableWidgetComponent,
    AlarmsTableWidgetComponent,
--- a/ui-ngx/src/app/modules/home/pipes/gateway-port-tooltip/gateway-port-tooltip.pipe.ts
+++ b/ui-ngx/src/app/modules/home/pipes/gateway-port-tooltip/gateway-port-tooltip.pipe.ts
@ -0,0 +1,42 @@
+///
+/// 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.
+///
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { PortLimits, } from '@home/components/widget/lib/gateway/gateway-widget.models';
+import { AbstractControl } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+
+@Pipe({
+  name: 'getGatewayPortTooltip',
+  standalone: true,
+})
+export class GatewayPortTooltipPipe implements PipeTransform {
+
+  constructor(private translate: TranslateService) {}
+
+  transform(portControl: AbstractControl): string {
+    if (portControl.hasError('required')) {
+      return this.translate.instant('gateway.port-required');
+    } else if (
+      portControl.hasError('min') ||
+      portControl.hasError('max')
+    ) {
+      return this.translate.instant('gateway.port-limits-error',
+        {min: PortLimits.MIN, max: PortLimits.MAX});
+    }
+    return '';
+  }
+}
--- a/ui-ngx/src/app/modules/home/pipes/public-api.ts
+++ b/ui-ngx/src/app/modules/home/pipes/public-api.ts
@ -15,3 +15,4 @@
 ///

 export * from './gateway-help-link/gateway-help-link.pipe';
+export * from './gateway-port-tooltip/gateway-port-tooltip.pipe';
--- a/ui-ngx/src/app/shared/abstract/datasource/datasource.abstract.ts
+++ b/ui-ngx/src/app/shared/abstract/datasource/datasource.abstract.ts
@ -0,0 +1,48 @@
+///
+/// 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.
+///
+
+import { DataSource } from '@angular/cdk/collections';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export abstract class TbDatasource<T> implements DataSource<T> {
+
+  protected dataSubject = new BehaviorSubject<Array<T>>([]);
+
+  connect(): Observable<Array<T>> {
+    return this.dataSubject.asObservable();
+  }
+
+  disconnect(): void {
+    this.dataSubject.complete();
+  }
+
+  loadData(data: Array<T>): void {
+    this.dataSubject.next(data);
+  }
+
+  isEmpty(): Observable<boolean> {
+    return this.dataSubject.pipe(
+      map((data: T[]) => !data.length)
+    );
+  }
+
+  total(): Observable<number> {
+    return this.dataSubject.pipe(
+      map((data: T[]) => data.length)
+    );
+  }
+}
--- a/ui-ngx/src/app/shared/abstract/public-api.ts
+++ b/ui-ngx/src/app/shared/abstract/public-api.ts
@ -0,0 +1,17 @@
+///
+/// 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 './datasource/datasource.abstract';
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts
@ -20,7 +20,7 @@ import {
  Inject,
  Input,
  OnDestroy,
-  Renderer2
+  Renderer2,
 } from '@angular/core';
 import { isEqual } from '@core/utils';
 import { TranslateService } from '@ngx-translate/core';
@ -30,13 +30,15 @@ import { takeUntil } from 'rxjs/operators';

@Directive({
  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: '[tb-ellipsis-chip-list]'
+  selector: '[tb-ellipsis-chip-list]',
+  standalone: true,
 })
 export class EllipsisChipListDirective implements OnDestroy {

  chipsValue: string[];

  private destroy$ = new Subject<void>();
+  private intersectionObserver: IntersectionObserver;

  @Input('tb-ellipsis-chip-list')
  set chips(value: string[]) {
@ -59,6 +61,16 @@ export class EllipsisChipListDirective implements OnDestroy {
    ).subscribe(() => {
      this.adjustChips();
    });
+
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          this.adjustChips();
+        }
+      });
+    });
+
+    this.intersectionObserver.observe(this.el.nativeElement);
  }

  private adjustChips(): void {
@ -124,5 +136,6 @@ export class EllipsisChipListDirective implements OnDestroy {
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
+    this.intersectionObserver.disconnect();
  }
 }
--- a/ui-ngx/src/app/shared/directives/public-api.ts
+++ b/ui-ngx/src/app/shared/directives/public-api.ts
@ -15,3 +15,4 @@
 ///

 export * from './tooltip/tooltip.directive';
+export * from './ellipsis-chip-list/ellipsis-chip-list.directive';
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@ -2755,19 +2755,26 @@
        "function": "Function"
    },
    "gateway": {
+        "address": "Address",
        "add-entry": "Add configuration",
        "add-attribute": "Add attribute",
        "add-attribute-update": "Add attribute update",
        "add-key": "Add key",
        "add-timeseries": "Add time series",
        "add-mapping": "Add mapping",
+        "add-slave": "Add Slave",
        "arguments": "Arguments",
        "add-rpc-method": "Add method",
+        "add-rpc-request": "Add request",
        "add-value": "Add argument",
+        "baudrate": "Baudrate",
+        "bytesize": "Bytesize",
        "delete-value": "Delete value",
        "delete-rpc-method": "Delete method",
+        "delete-rpc-request": "Delete request",
        "delete-attribute-update": "Add attribute update",
        "advanced": "Advanced",
+        "advanced-connection-settings": "Advanced connection settings",
        "attributes": "Attributes",
        "attribute-updates": "Attribute updates",
        "attribute-filter": "Attribute filter",
@ -2777,6 +2784,8 @@
        "attribute-name-expression-required": "Attribute name expression required.",
        "attribute-name-expression-hint": "Hint for Attribute name expression",
        "basic": "Basic",
+        "byte-order": "Byte order",
+        "word-order": "Word order",
        "broker": {
            "connection": "Connection to broker",
            "name": "Broker name",
@ -2811,6 +2820,9 @@
        "connectors-table-actions": "Actions",
        "connectors-table-key": "Key",
        "connectors-table-class": "Class",
+        "connection-timeout": "Connection timeout (s)",
+        "connect-attempt-time": "Connect attempt time (s)",
+        "connect-attempt-count": "Connect attempt count",
        "copy-username": "Copy username",
        "copy-password": "Copy password",
        "copy-client-id": "Copy client ID",
@ -2839,7 +2851,8 @@
        "device-name-filter-hint": "This field supports Regular expressions to filter incoming data by device name.",
        "device-name-filter-required": "Device name filter is required.",
        "details": "Details",
-        "delete-mapping-title": "Delete mapping ?",
+        "delete-mapping-title": "Delete mapping?",
+        "delete-slave-title": "Delete slave?",
        "download-configuration-file": "Download configuration file",
        "download-docker-compose": "Download docker-compose.yml for your gateway",
        "enable-remote-logging": "Enable remote logging",
@ -2858,6 +2871,7 @@
        "configuration-delete-dialog-confirm": "Turn Off",
        "connector-duplicate-name": "Connector with such name already exists.",
        "connector-side": "Connector side",
+        "client-communication-type": "Client communication type",
        "payload-type": "Payload type",
        "platform-side": "Platform side",
        "JSON": "JSON",
@ -2883,6 +2897,8 @@
        "device-node-hint": "Path or identifier for device node on OPC UA server. Relative paths from it for attributes and time series can be used.",
        "device-name": "Device name",
        "device-profile": "Device profile",
+        "device-name-required": "Device name required",
+        "device-profile-required": "Device profile required",
        "download-tip": "Download configuration file",
        "drop-file": "Drop file here or",
        "enable-subscription": "Enable subscription",
@ -2895,6 +2911,7 @@
        "fill-connector-defaults-hint": "This property allows to fill connector configuration with default values on it's creation.",
        "from-device-request-settings": "Input request parsing",
        "from-device-request-settings-hint": "These fields support JSONPath expressions to extract a name from incoming message.",
+        "function-code": "Function code",
        "to-device-response-settings": "Output request processing",
        "to-device-response-settings-hint": "For these fields you can use the following variables and they will be replaced with actual values: ${deviceName}, ${attributeKey}, ${attributeValue}",
        "gateway": "Gateway",
@ -2933,8 +2950,13 @@
        "inactivity-timeout-seconds-required": "Inactivity timeout is required",
        "inactivity-timeout-seconds-min": "Inactivity timeout can not be less then 1",
        "inactivity-timeout-seconds-pattern": "Inactivity timeout is not valid",
+        "unit-id": "Unit ID",
        "host": "Host",
        "host-required": "Host is required.",
+        "holding_registers": "Holding register",
+        "coils_initializer": "Coils initializer",
+        "input_registers": "Input register",
+        "discrete_inputs": "Discrete input",
        "json-parse": "Not valid JSON.",
        "json-required": "Field cannot be empty.",
        "JSONPath-hint": "This field supports constants and JSONPath expressions.",
@ -2968,12 +2990,14 @@
        "max-messages-queue-for-worker": "Max messages queue per worker",
        "max-messages-queue-for-worker-hint": "Maximal messages count that will be in the queue \nfor each converter worker.",
        "max-messages-queue-for-worker-required": "Max messages queue per worker is required.",
+        "method": "Method",
        "method-name": "Method name",
        "method-required": "Method name is required.",
        "min-pack-send-delay": "Min pack send delay (in ms)",
        "min-pack-send-delay-required": "Min pack send delay is required",
        "min-pack-send-delay-min": "Min pack send delay can not be less then 0",
        "mode": "Mode",
+        "model-name": "Model name",
        "mqtt-version": "MQTT version",
        "name": "Name",
        "name-required": "Name is required.",
@ -2987,17 +3011,22 @@
        "no-keys": "No keys",
        "no-value": "No arguments",
        "no-rpc-methods": "No RPC methods",
+        "no-rpc-requests": "No RPC requests",
        "path-hint": "The path is local to the gateway file system",
        "path-logs": "Path to log files",
        "path-logs-required": "Path is required.",
        "password": "Password",
        "password-required": "Password is required.",
        "permit-without-calls": "Keep alive permit without calls",
+        "poll-period": "Poll period (s)",
        "port": "Port",
        "port-required": "Port is required.",
        "port-limits-error": "Port should be number from {{min}} to {{max}}.",
        "private-key-path": "Path to private key file",
        "path-to-private-key-required": "Path to private key file is required.",
+        "parity": "Parity",
+        "product-code": "Product code",
+        "product-name": "Product name",
        "raw": "Raw",
        "retain": "Retain",
        "retain-hint": "This flag tells the broker to store the message for a topic\nand ensures any new client subscribing to that topic\nwill receive the stored message.",
@ -3006,6 +3035,9 @@
        "remove-entry": "Remove configuration",
        "remote-shell": "Remote shell",
        "remote-configuration": "Remote Configuration",
+        "retries": "Retries",
+        "retries-on-empty": "Retries on empty",
+        "retries-on-invalid": "Retries on invalid",
        "rpc": {
            "title": "{{type}} Connector RPC parameters",
            "templates-title": "Connector RPC Templates",
@ -3097,6 +3129,7 @@
            "json-value-invalid": "JSON value has an invalid format"
        },
        "rpc-methods": "RPC methods",
+        "rpc-requests": "RPC requests",
        "request" : {
            "connect-request": "Connect request",
            "disconnect-request": "Disconnect request",
@ -3108,6 +3141,7 @@
        "requests-mapping": "Requests mapping",
        "requests-mapping-hint": "MQTT Connector requests allows you to connect, disconnect, process attribute requests from the device, handle attribute updates on the server and RPC processing configuration.",
        "request-topic-expression": "Request topic expression",
+        "request-client-certificate": "Request client certificate",
        "request-topic-expression-required": "Request topic expression is required.",
        "response-timeout": "Response timeout (ms)",
        "response-timeout-required": "Response timeout is required.",
@ -3118,7 +3152,10 @@
        "response-topic-expression-required": "Response topic expression is required.",
        "response-value-expression": "Response value expression",
        "response-value-expression-required": "Response value expression is required.",
+        "vendor-name": "Vendor name",
+        "vendor-url": "Vendor URL",
        "value": "Value",
+        "values": "Values",
        "value-required": "Value is required.",
        "value-expression": "Value expression",
        "value-expression-required": "Value expression is required.",
@ -3141,11 +3178,21 @@
        },
        "select-connector": "Select connector to display config",
        "send-change-data": "Send data only on change",
+        "send-data-TB": "Send data to ThingsBoard",
+        "send-data-on-change": "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 time series in the converter output.",
        "server": "Server",
+        "server-hostname": "Server hostname",
+        "server-slave": "Server (Slave)",
+        "servers-slaves": "Servers (Slaves)",
        "server-port": "Server port",
        "server-url": "Server endpoint url",
+        "server-connection": "Server Connection",
+        "server-config": "Server configuration",
+        "server-slave-config": "Server (Slave) configuration",
        "server-url-required": "Server endpoint url is required.",
+        "stopbits": "Stopbits",
+        "strict": "Strict",
        "set": "Set",
        "show-map": "Show map",
        "statistics": {
@ -3238,6 +3285,8 @@
        "topic-required": "Topic filter is required.",
        "tls-path-ca-certificate": "Path to CA certificate on gateway",
        "tls-path-client-certificate": "Path to client certificate on gateway",
+        "tls-connection": "TLS Connection",
+        "master-connections": "Master Connections",
        "method-filter": "Method filter",
        "method-filter-hint": "Regular expression to filter incoming RPC method from platform.",
        "method-filter-required": "Method filter is required.",
@ -3257,13 +3306,25 @@
            "at-least-once": "1 - At least once",
            "exactly-once": "2 - Exactly once"
        },
+        "objects-count": "Objects count",
+        "wait-after-failed-attempts": "Wait after failed attempts (s)",
        "tls-path-private-key": "Path to private key on gateway",
        "toggle-fullscreen": "Toggle fullscreen",
        "transformer-json-config": "Configuration JSON*",
        "update-config": "Add/update configuration JSON",
        "username": "Username",
        "username-required": "Username is required.",
+        "unit-id-required": "Unit ID is required.",
+        "read-coils": "Read Coils",
+        "read-discrete-inputs": "Read Discrete Inputs",
+        "read-multiple-holding-registers": "Read Multiple Holding Register",
+        "read-input-registers": "Read Input Registers",
+        "write-coil": "Write Coil",
+        "write-coils": "Write Coils",
+        "write-register": "Write Register",
+        "write-registers": "Write Registers",
        "hints": {
+            "modbus-server": "Starting with version 3.0, Gateway can run as a Modbus slave.",
            "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",
@ -3302,7 +3363,9 @@
            "grpc-max-pings-without-data": "Maximum number of keepalive ping messages that the server can send without receiving any data before it considers the connection dead.",
            "grpc-min-ping-interval-without-data": "Minimum amount of time the server should wait between sending keepalive ping messages when there is no data being sent or received.",
            "permit-without-calls": "Allow server to keep the GRPC connection alive even when there are no active RPC calls.",
+            "path-in-os": "Path in gateway os.",
            "memory": "Your data will be stored in the in-memory queue, it is a fastest but no persistence guarantee.",
+            "framer-type": "Type of framer.",
            "file": "Your data will be stored in separated files and will be saved even after the gateway restart.",
            "sqlite": "Your data will be stored in file based database. And will be saved even after the gateway restart.",
            "opcua-timeout": "Timeout in seconds for connecting to OPC-UA server.",
--- a/ui-ngx/src/assets/metadata/connector-default-configs/modbus.json
+++ b/ui-ngx/src/assets/metadata/connector-default-configs/modbus.json
@ -2,6 +2,7 @@
  "master": {
    "slaves": [
      {
+        "name": "Slave 1",
        "host": "127.0.0.1",
        "port": 5021,
        "type": "tcp",
@ -185,64 +186,60 @@
    "wordOrder": "LITTLE",
    "unitId": 0,
    "values": {
-      "holding_registers": [
-        {
-          "attributes": [
-            {
-              "address": 1,
-              "type": "string",
-              "tag": "sm",
-              "objectsCount": 1,
-              "value": "ON"
-            }
-          ],
-          "timeseries": [
-            {
-              "address": 2,
-              "type": "int",
-              "tag": "smm",
-              "objectsCount": 1,
-              "value": "12334"
-            }
-          ],
-          "attributeUpdates": [
-            {
-              "tag": "shared_attribute_write",
-              "type": "32int",
-              "functionCode": 6,
-              "objectsCount": 2,
-              "address": 29,
-              "value": 1243
-            }
-          ],
-          "rpc": [
-            {
-              "tag": "setValue",
-              "type": "bits",
-              "functionCode": 5,
-              "objectsCount": 1,
-              "address": 31,
-              "value": 22
-            }
-          ]
+        "holding_registers": {
+            "attributes": [
+                {
+                    "address": 1,
+                    "type": "string",
+                    "tag": "sm",
+                    "objectsCount": 1,
+                    "value": "ON"
+                }
+            ],
+            "timeseries": [
+                {
+                    "address": 2,
+                    "type": "int",
+                    "tag": "smm",
+                    "objectsCount": 1,
+                    "value": "12334"
+                }
+            ],
+            "attributeUpdates": [
+                {
+                    "tag": "shared_attribute_write",
+                    "type": "32int",
+                    "functionCode": 6,
+                    "objectsCount": 2,
+                    "address": 29,
+                    "value": 1243
+                }
+            ],
+            "rpc": [
+                {
+                    "tag": "setValue",
+                    "type": "bits",
+                    "functionCode": 5,
+                    "objectsCount": 1,
+                    "address": 31,
+                    "value": 22
+                }
+            ]
+        },
+        "coils_initializer": {
+            "attributes": [
+                {
+                    "address": 5,
+                    "type": "string",
+                    "tag": "sm",
+                    "objectsCount": 1,
+                    "value": "12"
+                }
+            ],
+            "timeseries": [],
+            "attributeUpdates": [],
+            "rpc": []
        }
-      ],
-      "coils_initializer": [
-        {
-          "attributes": [
-            {
-              "address": 5,
-              "type": "string",
-              "tag": "sm",
-              "objectsCount": 1,
-              "value": "12"
-            }
-          ],
-          "timeseries": [],
-          "attributeUpdates": [],
-          "rpc": []
-        }
-      ]
    }
  }
 }