diff --git 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 index f70ed366e1..b5ef346300 100644 --- 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 @@ gateway.platform-side
- gateway.key + tb-hint-tooltip-icon="{{ 'gateway.JSONPath-hint' | translate }}"> + {{ 'gateway.key' | translate }}
@@ -97,8 +97,8 @@
- gateway.value + tb-hint-tooltip-icon="{{ 'gateway.JSONPath-hint' | translate }}"> + {{ 'gateway.value' | translate }}
-
- gateway.method-name +
+ {{ 'gateway.method-name' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html index 48e280bc67..9f0566b566 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html @@ -61,11 +61,11 @@ + [class.request-column]="mappingType === mappingTypeEnum.REQUESTS"> {{ column.title | translate }} - + {{ mapping[column.def] }} diff --git 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 index 7042e5ae38..2652f032b8 100644 --- 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,12 +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 { TruncateWithTooltipDirective } from '@shared/directives/truncate-with-tooltip.directive'; +import { TbTableDatasource } from '@shared/components/table/table-datasource.abstract'; @Component({ selector: 'tb-mapping-table', @@ -77,7 +78,7 @@ import { CommonModule } from '@angular/common'; } ], standalone: true, - imports: [CommonModule, SharedModule] + imports: [CommonModule, SharedModule, TruncateWithTooltipDirective] }) export class MappingTableComponent implements ControlValueAccessor, Validator, AfterViewInit, OnInit, OnDestroy { @@ -191,7 +192,7 @@ export class MappingTableComponent implements ControlValueAccessor, Validator, A $event.stopPropagation(); } const value = isDefinedAndNotNull(index) ? this.mappingFormGroup.at(index).value : {}; - this.dialog.open(MappingDialogComponent, { + this.dialog.open(MappingDialogComponent, { disableClose: true, panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], data: { @@ -206,7 +207,7 @@ export class MappingTableComponent implements ControlValueAccessor, Validator, A if (isDefinedAndNotNull(index)) { this.mappingFormGroup.at(index).patchValue(res); } else { - this.mappingFormGroup.push(this.fb.group(res)); + this.pushDataAsFormArrays([res]); } this.mappingFormGroup.markAsDirty(); } @@ -222,7 +223,7 @@ export class MappingTableComponent implements ControlValueAccessor, Validator, A ) ); } - this.dataSource.loadMappings(tableValue); + this.dataSource.loadData(tableValue); } deleteMapping($event: Event, index: number): void { @@ -310,33 +311,8 @@ export class MappingTableComponent implements ControlValueAccessor, Validator, A } } -export class MappingDatasource implements DataSource<{[key: string]: any}> { - - private mappingSubject = new BehaviorSubject>([]); - - constructor() {} - - connect(): Observable> { - return this.mappingSubject.asObservable(); - } - - disconnect(): void { - this.mappingSubject.complete(); - } - - loadMappings(mappings: Array<{[key: string]: any}>): void { - this.mappingSubject.next(mappings); - } - - isEmpty(): Observable { - return this.mappingSubject.pipe( - map((mappings) => !mappings.length) - ); - } - - total(): Observable { - return this.mappingSubject.pipe( - map((mappings) => mappings.length) - ); +export class MappingDatasource extends TbTableDatasource { + constructor() { + super(); } } diff --git 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 new file mode 100644 index 0000000000..17f5185bc6 --- /dev/null +++ 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 @@ + + + + + + + + + + + + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.scss new file mode 100644 index 0000000000..b70fe42401 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.scss @@ -0,0 +1,24 @@ +/** + * 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 { + height: 100%; +} + +:host ::ng-deep { + .mat-mdc-tab-body-content { + overflow: hidden !important; + } +} diff --git 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 new file mode 100644 index 0000000000..1fca768980 --- /dev/null +++ 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,116 @@ +/// +/// 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/ellipsis-chip-list.directive'; +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, + ], + styleUrls: ['./modbus-basic-config.component.scss'], +}) + +export class ModbusBasicConfigComponent implements ControlValueAccessor, Validator, OnDestroy { + + @Input() generalTabContent: TemplateRef; + + basicFormGroup: FormGroup; + + onChange: (value: ModbusBasicConfig) => void; + onTouched: () => void; + + private destroy$ = new Subject(); + + 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: ModbusBasicConfig) => 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} + }; + } +} diff --git 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 new file mode 100644 index 0000000000..02d2d1491d --- /dev/null +++ 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,180 @@ + +
+
+
{{ panelTitle | translate }}{{' (' + keysListFormArray.controls.length + ')'}}
+
+
+
+ + + + +
+ + {{ keyControl.get('tag').value }}{{ '-' }}{{ keyControl.get('value').value }} + + {{ keyControl.get('tag').value }} +
+ + + +
+
gateway.platform-side
+
+
+ gateway.key +
+
+ + + + warning + + +
+
+
+
+
gateway.connector-side
+
+
+ gateway.type +
+
+ + + {{ type }} + + +
+
+
+
gateway.function-code
+
+ + + + {{ ModbusFunctionCodeTranslationsMap.get(code) | translate }} + + + +
+
+
+
gateway.objects-count
+
+ + + +
+
+
+
gateway.address
+
+ + + + warning + + +
+
+
+
gateway.value
+
+ + + + warning + + +
+
+
+ + + +
+ +
+
+
+ +
+
+ +
+ {{ noKeysText }} +
+ +
+ + +
+
diff --git 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 new file mode 100644 index 0000000000..0e9f9a432f --- /dev/null +++ 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); + } + } + } +} + diff --git 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 new file mode 100644 index 0000000000..5b312f52c8 --- /dev/null +++ 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,208 @@ +/// +/// 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, OnDestroy, OnInit, Output } from '@angular/core'; +import { + AbstractControl, + FormArray, + FormGroup, + UntypedFormArray, + UntypedFormBuilder, + UntypedFormGroup, + Validators +} from '@angular/forms'; +import { TbPopoverComponent } from '@shared/components/popover.component'; +import { + ModbusDataType, + ModbusFunctionCodeTranslationsMap, + ModbusObjectCountByDataType, + 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/components/widget/lib/gateway/pipes/gateway-help-link.pipe'; +import { generateSecret } from '@core/utils'; +import { coerceBoolean } from '@shared/decorators/coercion'; +import { takeUntil } from 'rxjs/operators'; +import { Subject } from 'rxjs'; + +@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, OnDestroy { + + @coerceBoolean() + @Input() isMaster = false; + @Input() panelTitle: string; + @Input() addKeyTitle: string; + @Input() deleteKeyTitle: string; + @Input() noKeysText: string; + @Input() keysType: ModbusValueKey; + @Input() values: ModbusValue[]; + @Input() popover: TbPopoverComponent; + + @Output() keysDataApplied = new EventEmitter>(); + + keysListFormArray: FormArray; + modbusDataTypes = Object.values(ModbusDataType); + withFunctionCode = true; + functionCodesMap = new Map(); + defaultFunctionCodes = []; + + readonly editableDataTypes = [ModbusDataType.BYTES, ModbusDataType.BITS, ModbusDataType.STRING]; + readonly ModbusFunctionCodeTranslationsMap = ModbusFunctionCodeTranslationsMap; + + private destroy$ = new Subject(); + + private readonly defaultReadFunctionCodes = [3, 4]; + private readonly defaultWriteFunctionCodes = [5, 6, 15, 16]; + private readonly stringAttrUpdatesWriteFunctionCodes = [6, 16]; + + constructor(private fb: UntypedFormBuilder) {} + + ngOnInit(): void { + this.withFunctionCode = !this.isMaster || (this.keysType !== ModbusValueKey.ATTRIBUTES && this.keysType !== ModbusValueKey.TIMESERIES); + this.keysListFormArray = this.prepareKeysFormArray(this.values); + this.defaultFunctionCodes = this.getDefaultFunctionCodes(); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } + + trackByControlId(_: number, keyControl: AbstractControl): string { + return keyControl.value.id; + } + + 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.BYTES, [Validators.required]], + address: [null, [Validators.required]], + objectsCount: [1, [Validators.required]], + functionCode: [{ value: this.getDefaultFunctionCodes()[0], disabled: !this.withFunctionCode }, [Validators.required]], + 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 = []; + + if (values) { + values.forEach(value => { + const dataKeyFormGroup = this.createDataKeyFormGroup(value); + this.observeKeyDataType(dataKeyFormGroup); + this.functionCodesMap.set(dataKeyFormGroup.get('id').value, this.getFunctionCodes(value.type)); + + keysControlGroups.push(dataKeyFormGroup); + }); + } + + return this.fb.array(keysControlGroups); + } + + private createDataKeyFormGroup(modbusValue: ModbusValue): FormGroup { + const { tag, value, type, address, objectsCount, functionCode } = modbusValue; + + return 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: [{ value: functionCode, disabled: !this.withFunctionCode }, [Validators.required]], + id: [{ value: generateSecret(5), disabled: true }], + }); + } + + private observeKeyDataType(keyFormGroup: FormGroup): void { + keyFormGroup.get('type').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(dataType => { + if (!this.editableDataTypes.includes(dataType)) { + keyFormGroup.get('objectsCount').patchValue(ModbusObjectCountByDataType[dataType], {emitEvent: false}); + } + this.updateFunctionCodes(keyFormGroup, dataType); + }); + } + + private updateFunctionCodes(keyFormGroup: FormGroup, dataType: ModbusDataType): void { + const functionCodes = this.getFunctionCodes(dataType); + this.functionCodesMap.set(keyFormGroup.get('id').value, functionCodes); + if (!functionCodes.includes(keyFormGroup.get('functionCode').value)) { + keyFormGroup.get('functionCode').patchValue(functionCodes[0], {emitEvent: false}); + } + } + + private getFunctionCodes(dataType: ModbusDataType): number[] { + if (this.keysType === ModbusValueKey.ATTRIBUTES_UPDATES) { + return dataType === ModbusDataType.STRING + ? this.stringAttrUpdatesWriteFunctionCodes + : this.defaultWriteFunctionCodes; + } + + const functionCodes = [...this.defaultReadFunctionCodes]; + if (dataType === ModbusDataType.BITS) { + const bitsFunctionCodes = [1, 2]; + functionCodes.push(...bitsFunctionCodes); + functionCodes.sort(); + } + if (this.keysType === ModbusValueKey.RPC_REQUESTS) { + functionCodes.push(...this.defaultWriteFunctionCodes); + } + + 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; + } +} diff --git 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 new file mode 100644 index 0000000000..e16aa0c51f --- /dev/null +++ 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 @@ + +
+
+ +
+
+ {{ 'gateway.servers-slaves' | translate}} +
+ + + +
+ + +
+ + +   + + + +
+ +
+
+ + + {{ 'gateway.name' | translate }} + + + {{ mapping['name'] }} + + + + + {{ 'gateway.client-communication-type' | translate }} + + + {{ ModbusProtocolLabelsMap.get(mapping['type']) }} + + + + + + +
+ + +
+
+ + + + + +
+ + + + +
+
+ +
+
+ + widget.no-data-found + +
+
diff --git 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 new file mode 100644 index 0000000000..e9a5d3ebcd --- /dev/null +++ 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,90 @@ +/** + * 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; + + .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: 38%; + } + } + } + } + } + + .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 + } + } +} diff --git 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 new file mode 100644 index 0000000000..2cb66f6062 --- /dev/null +++ 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,228 @@ +/// +/// 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, + ChangeDetectorRef, + 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 { + ModbusMasterConfig, + ModbusProtocolLabelsMap, + 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 { ModbusSlaveDialogComponent } from '../modbus-slave-dialog/modbus-slave-dialog.component'; +import { TbTableDatasource } from '@shared/components/table/table-datasource.abstract'; + +@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; + masterFormGroup: UntypedFormGroup; + textSearch = this.fb.control('', {nonNullable: true}); + + readonly ModbusProtocolLabelsMap = ModbusProtocolLabelsMap; + + private onChange: (value: ModbusMasterConfig) => void = () => {}; + private onTouched: () => void = () => {}; + + private destroy$ = new Subject(); + + constructor( + public translate: TranslateService, + public dialog: MatDialog, + private dialogService: DialogService, + private fb: FormBuilder, + private cdr: ChangeDetectorRef, + ) { + this.masterFormGroup = this.fb.group({ slaves: this.fb.array([]) }); + 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 => this.updateTableData(this.slaves.value, text.trim())); + } + + registerOnChange(fn: (value: ModbusMasterConfig) => 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; + this.cdr.detectChanges(); + const searchInput = this.searchInputField.nativeElement; + searchInput.focus(); + searchInput.setSelectionRange(0, 0); + } + + exitFilterMode(): void { + this.updateTableData(this.slaves.value); + this.textSearchMode = false; + this.textSearch.reset(); + } + + manageSlave($event: Event, index?: number): void { + if ($event) { + $event.stopPropagation(); + } + const withIndex = isDefinedAndNotNull(index); + const value = withIndex ? this.slaves.at(index).value : {}; + this.dialog.open(ModbusSlaveDialogComponent, { + disableClose: true, + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], + data: { + value, + buttonTitle: withIndex ? 'action.add' : 'action.apply' + } + }).afterClosed() + .pipe(take(1), takeUntil(this.destroy$)) + .subscribe(res => { + if (res) { + if (withIndex) { + 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 + ).pipe(take(1), takeUntil(this.destroy$)).subscribe((result) => { + if (result) { + this.slaves.removeAt(index); + this.masterFormGroup.markAsDirty(); + } + }); + } + + private updateTableData(data: SlaveConfig[], textSearch?: string): void { + if (textSearch) { + data = data.filter(item => + Object.values(item).some(value => + value.toString().toLowerCase().includes(textSearch.toLowerCase()) + ) + ); + } + this.dataSource.loadData(data); + } + + private pushDataAsFormArrays(slaves: SlaveConfig[]): void { + if (slaves?.length) { + slaves.forEach((slave: SlaveConfig) => this.slaves.push(this.fb.control(slave))); + } + } +} + +export class SlavesDatasource extends TbTableDatasource { + constructor() { + super(); + } +} diff --git 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 new file mode 100644 index 0000000000..66db8c5018 --- /dev/null +++ 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 @@ + +
+
{{ 'gateway.hints.path-in-os' | translate }}
+
+
gateway.client-cert-path
+
+ + + +
+
+
+
gateway.private-key-path
+
+ + + +
+
+
+
gateway.password
+
+ + +
+ +
+ +
+
+
+
gateway.server-hostname
+
+ + + +
+
+
+ + + {{ 'gateway.request-client-certificate' | translate }} + + +
+
diff --git 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 new file mode 100644 index 0000000000..bc40727b55 --- /dev/null +++ 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,163 @@ +/// +/// 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 +} 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 { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { coerceBoolean } from '@shared/decorators/coercion'; + +@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, + ] +}) +export class ModbusSecurityConfigComponent implements ControlValueAccessor, Validator, OnChanges, OnDestroy { + + @coerceBoolean() + @Input() isMaster = false; + + securityConfigFormGroup: UntypedFormGroup; + + private disabled = false; + + private onChange: (value: ModbusSecurity) => void; + private onTouched: () => void; + + private destroy$ = new Subject(); + + constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) { + this.securityConfigFormGroup = this.fb.group({ + certfile: ['', [Validators.pattern(noLeadTrailSpacesRegex)]], + keyfile: ['', [Validators.pattern(noLeadTrailSpacesRegex)]], + password: ['', [Validators.pattern(noLeadTrailSpacesRegex)]], + server_hostname: ['', [Validators.pattern(noLeadTrailSpacesRegex)]], + reqclicert: [{value: false, disabled: true}], + }); + + this.observeValueChanges(); + } + + ngOnChanges(): void { + this.updateMasterEnabling(); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } + + registerOnChange(fn: (value: ModbusSecurity) => void): void { + this.onChange = fn; + } + + registerOnTouched(fn: () => void): void { + this.onTouched = fn; + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (this.disabled) { + this.securityConfigFormGroup.disable({emitEvent: false}); + } else { + this.securityConfigFormGroup.enable({emitEvent: false}); + } + this.updateMasterEnabling(); + this.cdr.markForCheck(); + } + + validate(): ValidationErrors | null { + return this.securityConfigFormGroup.valid ? null : { + securityConfigFormGroup: { valid: false } + }; + } + + writeValue(securityConfig: ModbusSecurity): void { + const { certfile, password, keyfile, server_hostname } = securityConfig; + const securityState = { + certfile: certfile ?? '', + password: password ?? '', + keyfile: keyfile ?? '', + server_hostname: server_hostname ?? '', + reqclicert: !!securityConfig.reqclicert, + }; + + this.securityConfigFormGroup.reset(securityState, {emitEvent: false}); + } + + private updateMasterEnabling(): void { + if (this.isMaster) { + if (!this.disabled) { + this.securityConfigFormGroup.get('reqclicert').enable({emitEvent: false}); + } + this.securityConfigFormGroup.get('server_hostname').disable({emitEvent: false}); + } else { + if (!this.disabled) { + this.securityConfigFormGroup.get('server_hostname').enable({emitEvent: false}); + } + this.securityConfigFormGroup.get('reqclicert').disable({emitEvent: false}); + } + } + + private observeValueChanges(): void { + this.securityConfigFormGroup.valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe((value: ModbusSecurity) => { + this.onChange(value); + this.onTouched(); + }); + } +} diff --git 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 new file mode 100644 index 0000000000..d37c8cc9ee --- /dev/null +++ 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,263 @@ + +
+
+
{{ 'gateway.hints.modbus-server' | translate }}
+
+ + + {{ 'gateway.enable' | translate }} + + +
+
+
+
+
gateway.server-slave-config
+ + {{ ModbusProtocolLabelsMap.get(type) }} + +
+
+
+
gateway.host
+
+ + + + warning + + +
+
+
+
gateway.port
+
+ + + + warning + + +
+
+ +
+
gateway.port
+
+ + + + warning + + +
+
+ +
+
+ gateway.method +
+
+ + + {{ ModbusMethodLabelsMap.get(method) }} + + +
+
+
+
+
gateway.unit-id
+
+ + + + warning + + +
+
+
+
gateway.device-name
+
+ + + + warning + + +
+
+
+
gateway.device-profile
+
+ + + + warning + + +
+
+
+
gateway.poll-period
+
+ + + +
+
+
+
gateway.baudrate
+
+ + + {{ rate }} + + +
+
+
+ + + +
gateway.advanced-connection-settings
+ + +
+
+
gateway.byte-order
+
+ + + {{ order }} + + +
+
+
+ + + + + + {{ 'gateway.tls-connection' | translate }} + + + + + + +
+ +
+
gateway.vendor-name
+
+ + + +
+
+
+
gateway.product-code
+
+ + + +
+
+
+
gateway.vendor-url
+
+ + + +
+
+
+
gateway.product-name
+
+ + + +
+
+
+
gateway.model-name
+
+ + + +
+
+ +
+ +
+
+
gateway.values
+ +
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.scss new file mode 100644 index 0000000000..a464832202 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.scss @@ -0,0 +1,27 @@ +/** + * 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. + */ +$server-config-header-height: 132px; + +:host { + .slave-content { + height: calc(100% - #{$server-config-header-height}); + overflow: auto; + } + + .slave-container { + display: inherit; + } +} diff --git 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 new file mode 100644 index 0000000000..2a8488a2d4 --- /dev/null +++ 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,287 @@ +/// +/// 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, + FormControl, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + UntypedFormGroup, + ValidationErrors, + Validator, + Validators, +} from '@angular/forms'; +import { + ModbusBaudrates, + ModbusMethodLabelsMap, + ModbusMethodType, + ModbusOrderType, + ModbusProtocolLabelsMap, + ModbusProtocolType, + ModbusRegisterValues, + ModbusSerialMethodType, + 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 { startWith, takeUntil } from 'rxjs/operators'; +import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe'; +import { ModbusSecurityConfigComponent } from '../modbus-security-config/modbus-security-config.component'; +import { ModbusValuesComponent, } from '../modbus-values/modbus-values.component'; +import { isEqual } from '@core/utils'; + +@Component({ + selector: 'tb-modbus-slave-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, + ], + styleUrls: ['./modbus-slave-config.component.scss'], +}) +export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validator, OnDestroy { + + slaveConfigFormGroup: UntypedFormGroup; + showSecurityControl: FormControl; + ModbusProtocolLabelsMap = ModbusProtocolLabelsMap; + ModbusMethodLabelsMap = ModbusMethodLabelsMap; + portLimits = PortLimits; + + readonly modbusProtocolTypes = Object.values(ModbusProtocolType); + readonly modbusMethodTypes = Object.values(ModbusMethodType); + readonly modbusSerialMethodTypes = Object.values(ModbusSerialMethodType); + readonly modbusOrderType = Object.values(ModbusOrderType); + readonly ModbusProtocolType = ModbusProtocolType; + readonly modbusBaudrates = ModbusBaudrates; + + private readonly serialSpecificControlKeys = ['serialPort', 'baudrate']; + private readonly tcpUdpSpecificControlKeys = ['port', 'security', 'host']; + + private onChange: (value: SlaveConfig) => void; + private onTouched: () => void; + + private destroy$ = new Subject(); + + 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: [0, [Validators.required]], + baudrate: [this.modbusBaudrates[0]], + deviceName: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], + deviceType: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], + pollPeriod: [5000], + 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.observeValueChanges(); + this.observeTypeChange(); + this.observeFormEnable(); + this.observeShowSecurity(); + } + + get isSlaveEnabled(): boolean { + return this.slaveConfigFormGroup.get('sendDataToThingsBoard').value; + } + + get protocolType(): ModbusProtocolType { + return this.slaveConfigFormGroup.get('type').value; + } + + 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 : { + slaveConfigFormGroup: { valid: false } + }; + } + + writeValue(slaveConfig: ModbusSlave): void { + this.showSecurityControl.patchValue(!!slaveConfig.security && !isEqual(slaveConfig.security, {})); + this.updateSlaveConfig(slaveConfig); + this.updateFormEnableState(slaveConfig.sendDataToThingsBoard); + } + + private observeValueChanges(): void { + 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(); + }); + } + + private observeTypeChange(): void { + this.slaveConfigFormGroup.get('type').valueChanges + .pipe(takeUntil(this.destroy$)) + .subscribe(type => { + this.updateFormEnableState(this.isSlaveEnabled); + this.updateMethodType(type); + }); + } + + private updateMethodType(type: ModbusProtocolType): void { + if (this.slaveConfigFormGroup.get('method').value !== ModbusMethodType.RTU) { + this.slaveConfigFormGroup.get('method').patchValue( + type === ModbusProtocolType.Serial + ? ModbusSerialMethodType.ASCII + : ModbusMethodType.SOCKET, + {emitEvent: false} + ); + } + } + + private observeFormEnable(): void { + this.slaveConfigFormGroup.get('sendDataToThingsBoard').valueChanges + .pipe(startWith(this.isSlaveEnabled), takeUntil(this.destroy$)) + .subscribe(value => this.updateFormEnableState(value)); + } + + private updateFormEnableState(enabled: boolean): void { + if (enabled) { + this.slaveConfigFormGroup.enable({emitEvent: false}); + this.showSecurityControl.enable({emitEvent: false}); + } else { + this.slaveConfigFormGroup.disable({emitEvent: false}); + this.showSecurityControl.disable({emitEvent: false}); + this.slaveConfigFormGroup.get('sendDataToThingsBoard').enable({emitEvent: false}); + } + this.updateEnablingByProtocol(this.protocolType); + this.updateSecurityEnable(this.showSecurityControl.value); + } + + private observeShowSecurity(): void { + this.showSecurityControl.valueChanges + .pipe(takeUntil(this.destroy$)) + .subscribe(value => this.updateSecurityEnable(value)); + } + + private updateSecurityEnable(securityEnabled: boolean): void { + if (securityEnabled && this.isSlaveEnabled && this.protocolType !== ModbusProtocolType.Serial) { + this.slaveConfigFormGroup.get('security').enable({emitEvent: false}); + } else { + this.slaveConfigFormGroup.get('security').disable({emitEvent: false}); + } + } + + private updateEnablingByProtocol(type: ModbusProtocolType): void { + const enableKeys = type === ModbusProtocolType.Serial ? this.serialSpecificControlKeys : this.tcpUdpSpecificControlKeys; + const disableKeys = type === ModbusProtocolType.Serial ? this.tcpUdpSpecificControlKeys : this.serialSpecificControlKeys; + + if (this.isSlaveEnabled) { + enableKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.enable({ emitEvent: false })); + } + + disableKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.disable({ emitEvent: false })); + } + + private updateSlaveConfig(slaveConfig: ModbusSlave): void { + const { + type = ModbusProtocolType.TCP, + method = ModbusMethodType.RTU, + unitId = 0, + deviceName = '', + deviceType = '', + pollPeriod = 5000, + sendDataToThingsBoard = false, + byteOrder = ModbusOrderType.BIG, + security = {}, + identity = { + vendorName: '', + productCode: '', + vendorUrl: '', + productName: '', + modelName: '', + }, + values = {} as ModbusRegisterValues, + baudrate = this.modbusBaudrates[0], + host = '', + port = null, + } = slaveConfig; + + const slaveState: ModbusSlave = { + type, + method, + unitId, + deviceName, + deviceType, + pollPeriod, + sendDataToThingsBoard: !!sendDataToThingsBoard, + byteOrder, + security, + identity, + values, + baudrate, + host: type === ModbusProtocolType.Serial ? '' : host, + port: type === ModbusProtocolType.Serial ? null : port, + serialPort: (type === ModbusProtocolType.Serial ? port : '') as string, + }; + + this.slaveConfigFormGroup.setValue(slaveState, { emitEvent: false }); + } +} diff --git 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 new file mode 100644 index 0000000000..1e47479f03 --- /dev/null +++ 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,362 @@ + +
+ +

{{ 'gateway.server-slave' | translate }}

+ +
+ + +
+
+
gateway.name
+
+ + + + warning + + +
+
+
+
+
+
gateway.server-connection
+ + {{ ModbusProtocolLabelsMap.get(type) }} + +
+
+
+
gateway.host
+
+ + + + warning + + +
+
+
+
gateway.port
+
+ + + + warning + + +
+
+ +
+
gateway.port
+
+ + + + warning + + +
+
+ +
+
+ gateway.method +
+
+ + + {{ ModbusMethodLabelsMap.get(method) }} + + +
+
+
+ +
+
gateway.baudrate
+
+ + + {{ rate }} + + +
+
+
+
gateway.bytesize
+
+ + + {{ size }} + + +
+
+
+
gateway.stopbits
+
+ + + +
+
+
+
gateway.parity
+
+ + + {{ ModbusParityLabelsMap.get(parity) }} + + +
+
+
+ + + {{ 'gateway.strict' | translate }} + + +
+ +
+
gateway.unit-id
+
+ + + + warning + + +
+
+
+
gateway.device-name
+
+ + + + warning + + +
+
+
+
gateway.device-profile
+
+ + + + warning + + +
+
+
+ + + {{ 'gateway.send-data-on-change' | translate }} + + +
+
+ + + +
gateway.advanced-connection-settings
+ + +
+
+
gateway.connection-timeout
+
+ + + +
+
+
+
gateway.byte-order
+
+ + + {{ order }} + + +
+
+
+
gateway.word-order
+
+ + + {{ order }} + + +
+
+
+ + + + + + {{ 'gateway.tls-connection' | translate }} + + + + + + +
+
+ + + {{ 'gateway.retries' | translate }} + + +
+
+ + + {{ 'gateway.retries-on-empty' | translate }} + + +
+
+ + + {{ 'gateway.retries-on-invalid' | translate }} + + +
+
+
gateway.poll-period
+
+ + + +
+
+
+
gateway.connect-attempt-time
+
+ + + +
+
+
+
gateway.connect-attempt-count
+
+ + + +
+
+
+
gateway.wait-after-failed-attempts
+
+ + + +
+
+
+ +
+
+ +
+
+
+
+
+ + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss new file mode 100644 index 0000000000..8cea184957 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss @@ -0,0 +1,21 @@ +/** + * 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 { + .slaves-config-container { + width: 80vw; + max-width: 900px; + } +} diff --git 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 new file mode 100644 index 0000000000..a00a488aa0 --- /dev/null +++ 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,243 @@ +/// +/// 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, + FormControl, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + UntypedFormGroup, + Validators, +} from '@angular/forms'; +import { + ModbusBaudrates, + ModbusByteSizes, + ModbusMethodLabelsMap, + ModbusMethodType, + ModbusOrderType, + ModbusParity, + ModbusParityLabelsMap, + ModbusProtocolLabelsMap, + ModbusProtocolType, + ModbusSerialMethodType, + ModbusSlaveInfo, + 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/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe'; +import { takeUntil } from 'rxjs/operators'; +import { isEqual } from '@core/utils'; + +@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, + ], + styleUrls: ['./modbus-slave-dialog.component.scss'], +}) +export class ModbusSlaveDialogComponent extends DialogComponent implements OnDestroy { + + slaveConfigFormGroup: UntypedFormGroup; + showSecurityControl: FormControl; + portLimits = PortLimits; + + readonly modbusProtocolTypes = Object.values(ModbusProtocolType); + readonly modbusMethodTypes = Object.values(ModbusMethodType); + readonly modbusSerialMethodTypes = Object.values(ModbusSerialMethodType); + readonly modbusParities = Object.values(ModbusParity); + readonly modbusByteSizes = ModbusByteSizes; + readonly modbusBaudrates = ModbusBaudrates; + readonly modbusOrderType = Object.values(ModbusOrderType); + readonly ModbusProtocolType = ModbusProtocolType; + readonly ModbusParityLabelsMap = ModbusParityLabelsMap; + readonly ModbusProtocolLabelsMap = ModbusProtocolLabelsMap; + readonly ModbusMethodLabelsMap = ModbusMethodLabelsMap; + readonly modbusHelpLink = + 'https://thingsboard.io/docs/iot-gateway/config/modbus/#section-master-description-and-configuration-parameters'; + + private readonly serialSpecificControlKeys = ['serialPort', 'baudrate', 'stopbits', 'bytesize', 'parity', 'strict']; + private readonly tcpUdpSpecificControlKeys = ['port', 'security', 'host', 'wordOrder']; + + private destroy$ = new Subject(); + + constructor( + private fb: FormBuilder, + protected store: Store, + protected router: Router, + @Inject(MAT_DIALOG_DATA) public data: ModbusSlaveInfo, + public dialogRef: MatDialogRef, + ) { + super(store, router, dialogRef); + + this.showSecurityControl = this.fb.control(false); + this.initializeSlaveFormGroup(); + this.updateSlaveFormGroup(); + this.updateControlsEnabling(this.data.value.type); + this.observeTypeChange(); + this.observeShowSecurity(); + this.showSecurityControl.patchValue(!!this.data.value.security && !isEqual(this.data.value.security, {})); + } + + get protocolType(): ModbusProtocolType { + return this.slaveConfigFormGroup.get('type').value; + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } + + cancel(): void { + this.dialogRef.close(null); + } + + add(): void { + if (!this.slaveConfigFormGroup.valid) { + return; + } + + const { values, type, serialPort, ...rest } = this.slaveConfigFormGroup.value; + const slaveResult = { ...rest, type, ...values }; + + if (type === ModbusProtocolType.Serial) { + slaveResult.port = serialPort; + } + + this.dialogRef.close(slaveResult); + } + + private initializeSlaveFormGroup(): void { + this.slaveConfigFormGroup = this.fb.group({ + name: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], + 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, [Validators.required]], + baudrate: [this.modbusBaudrates[0]], + stopbits: [1], + bytesize: [ModbusByteSizes[0]], + parity: [ModbusParity.None], + strict: [true], + unitId: [0, [Validators.required]], + deviceName: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], + deviceType: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], + sendDataOnlyOnChange: [false], + timeout: [35], + byteOrder: [ModbusOrderType.BIG], + wordOrder: [ModbusOrderType.BIG], + retries: [true], + retryOnEmpty: [true], + retryOnInvalid: [true], + pollPeriod: [5000], + connectAttemptTimeMs: [5000], + connectAttemptCount: [5], + waitAfterFailedAttemptsMs: [300000], + values: [{}], + security: [{}], + }); + } + + private updateSlaveFormGroup(): void { + this.slaveConfigFormGroup.patchValue({ + ...this.data.value, + port: this.data.value.type === ModbusProtocolType.Serial ? null : this.data.value.port, + serialPort: this.data.value.type === ModbusProtocolType.Serial ? this.data.value.port : '', + values: { + attributes: this.data.value.attributes ?? [], + timeseries: this.data.value.timeseries ?? [], + attributeUpdates: this.data.value.attributeUpdates ?? [], + rpc: this.data.value.rpc ?? [], + } + }); + } + + private observeTypeChange(): void { + this.slaveConfigFormGroup.get('type').valueChanges + .pipe(takeUntil(this.destroy$)) + .subscribe(type => { + this.updateControlsEnabling(type); + this.updateMethodType(type); + }); + } + + private updateMethodType(type: ModbusProtocolType): void { + if (this.slaveConfigFormGroup.get('method').value !== ModbusMethodType.RTU) { + this.slaveConfigFormGroup.get('method').patchValue( + type === ModbusProtocolType.Serial + ? ModbusSerialMethodType.ASCII + : ModbusMethodType.SOCKET, + {emitEvent: false} + ); + } + } + + private updateControlsEnabling(type: ModbusProtocolType): void { + const [enableKeys, disableKeys] = type === ModbusProtocolType.Serial + ? [this.serialSpecificControlKeys, this.tcpUdpSpecificControlKeys] + : [this.tcpUdpSpecificControlKeys, this.serialSpecificControlKeys]; + + enableKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.enable({ emitEvent: false })); + disableKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.disable({ emitEvent: false })); + + this.updateSecurityEnabling(this.showSecurityControl.value); + } + + private observeShowSecurity(): void { + this.showSecurityControl.valueChanges + .pipe(takeUntil(this.destroy$)) + .subscribe(value => this.updateSecurityEnabling(value)); + } + + private updateSecurityEnabling(isEnabled: boolean): void { + if (isEnabled && this.protocolType !== ModbusProtocolType.Serial) { + this.slaveConfigFormGroup.get('security').enable({emitEvent: false}); + } else { + this.slaveConfigFormGroup.get('security').disable({emitEvent: false}); + } + } +} diff --git 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 new file mode 100644 index 0000000000..a6b4382638 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.html @@ -0,0 +1,121 @@ + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+
gateway.attributes
+
+ + + {{ attribute.tag }} + + + + + + +
+
+
+
gateway.timeseries
+
+ + + {{ telemetry.tag }} + + + + + + +
+
+
+
gateway.attribute-updates
+
+ + + {{ attributeUpdate.tag }} + + + + + + +
+
+
+
gateway.rpc-requests
+
+ + + {{ rpcRequest.tag }} + + + + + + +
+
+ + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.scss new file mode 100644 index 0000000000..2d0782e6a5 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.scss @@ -0,0 +1,24 @@ +/** + * 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 { + .mat-mdc-tab-body-wrapper { + min-height: 320px; + } +} + +::ng-deep .mdc-evolution-chip-set__chips { + align-items: center; +} diff --git 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 new file mode 100644 index 0000000000..6bfc07c130 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.ts @@ -0,0 +1,236 @@ +/// +/// 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, + OnDestroy, + OnInit, + 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, + ModbusValue, + ModbusValueKey, + ModbusValues, + ModbusValuesState, +} 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/ellipsis-chip-list.directive'; +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'; +import { coerceBoolean } from '@shared/decorators/coercion'; + +@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, + ], + styleUrls: ['./modbus-values.component.scss'] +}) + +export class ModbusValuesComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy { + + @coerceBoolean() + @Input() singleMode = false; + + disabled = false; + modbusRegisterTypes: ModbusRegisterType[] = Object.values(ModbusRegisterType); + modbusValueKeys = Object.values(ModbusValueKey); + ModbusValuesTranslationsMap = ModbusRegisterTranslationsMap; + ModbusValueKey = ModbusValueKey; + valuesFormGroup: FormGroup; + + private onChange: (value: ModbusValuesState) => void; + private onTouched: () => void; + + private destroy$ = new Subject(); + + constructor(private fb: FormBuilder, + private popoverService: TbPopoverService, + private renderer: Renderer2, + private viewContainerRef: ViewContainerRef, + private cdr: ChangeDetectorRef, + ) {} + + ngOnInit() { + this.initializeValuesFormGroup(); + this.observeValuesChanges(); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } + + registerOnChange(fn: (value: ModbusValuesState) => void): void { + this.onChange = fn; + } + + registerOnTouched(fn: () => void): void { + this.onTouched = fn; + } + + writeValue(values: ModbusValuesState): void { + if (this.singleMode) { + this.valuesFormGroup.setValue(this.getSingleRegisterState(values as ModbusValues), { emitEvent: false }); + } else { + const { holding_registers, coils_initializer, input_registers, discrete_inputs } = values as ModbusRegisterValues; + this.valuesFormGroup.setValue({ + holding_registers: this.getSingleRegisterState(holding_registers), + coils_initializer: this.getSingleRegisterState(coils_initializer), + input_registers: this.getSingleRegisterState(input_registers), + discrete_inputs: this.getSingleRegisterState(discrete_inputs), + }, { emitEvent: false }); + } + this.cdr.markForCheck(); + } + + validate(): ValidationErrors | null { + return this.valuesFormGroup.valid ? null : { + valuesFormGroup: {valid: false} + }; + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + this.cdr.markForCheck(); + } + + getValueGroup(valueKey: ModbusValueKey, register?: ModbusRegisterType): FormGroup { + return register + ? this.valuesFormGroup.get(register).get(valueKey) as FormGroup + : this.valuesFormGroup.get(valueKey) as FormGroup; + } + + manageKeys($event: Event, matButton: MatButton, keysType: ModbusValueKey, register?: ModbusRegisterType): void { + $event.stopPropagation(); + const trigger = matButton._elementRef.nativeElement; + if (this.popoverService.hasPopover(trigger)) { + this.popoverService.hidePopover(trigger); + return; + } + + const keysControl = this.getValueGroup(keysType, register); + 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: ModbusValue[]) => { + dataKeysPanelPopover.hide(); + keysControl.patchValue(keysData); + keysControl.markAsDirty(); + this.cdr.markForCheck(); + }); + } + + private initializeValuesFormGroup(): void { + const getValuesFormGroup = () => this.fb.group(this.modbusValueKeys.reduce((acc, key) => { + acc[key] = this.fb.control([[], []]); + return acc; + }, {})); + + if (this.singleMode) { + this.valuesFormGroup = getValuesFormGroup(); + } else { + this.valuesFormGroup = this.fb.group( + this.modbusRegisterTypes.reduce((registersAcc, register) => { + registersAcc[register] = getValuesFormGroup(); + return registersAcc; + }, {}) + ); + } + } + + + private observeValuesChanges(): void { + this.valuesFormGroup.valueChanges + .pipe(takeUntil(this.destroy$)) + .subscribe(value => { + this.onChange(value); + this.onTouched(); + }); + } + + private getSingleRegisterState(values: ModbusValues): ModbusValues { + return { + attributes: values?.attributes ?? [], + timeseries: values?.timeseries ?? [], + attributeUpdates: values?.attributeUpdates ?? [], + rpc: values?.rpc ?? [], + }; + } +} diff --git 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 index 650ecef68a..8ae9fc6163 100644 --- 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,22 +25,28 @@ import { Validator, } from '@angular/forms'; import { - ConnectorBaseConfig, MappingType, + MQTTBasicConfig, RequestMappingData, RequestType, } from '@home/components/widget/lib/gateway/gateway-widget.models'; import { SharedModule } from '@shared/shared.module'; import { CommonModule } from '@angular/common'; -import { - BrokerConfigControlComponent, - MappingTableComponent, - SecurityConfigComponent, - WorkersConfigControlComponent -} from '@home/components/widget/lib/gateway/connectors-configuration/public-api'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { isObject } from 'lodash'; +import { + SecurityConfigComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component'; +import { + WorkersConfigControlComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component'; +import { + BrokerConfigControlComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component'; +import { + MappingTableComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component'; @Component({ selector: 'tb-mqtt-basic-config', @@ -112,17 +118,18 @@ 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: { - maxNumberOfWorkers: basicConfig.broker?.maxNumberOfWorkers, - maxMessageNumberPerWorker: basicConfig.broker?.maxMessageNumberPerWorker, - }, - dataMapping: basicConfig.dataMapping || [], - broker: basicConfig.broker || {}, - requestsMapping: Array.isArray(basicConfig.requestsMapping) - ? basicConfig.requestsMapping - : this.getRequestDataArray(basicConfig.requestsMapping), + workers: broker && (broker.maxNumberOfWorkers || broker.maxMessageNumberPerWorker) ? { + maxNumberOfWorkers: broker.maxNumberOfWorkers, + maxMessageNumberPerWorker: broker.maxMessageNumberPerWorker, + } : {}, + dataMapping: dataMapping || [], + broker: broker || {}, + requestsMapping: Array.isArray(requestsMapping) + ? requestsMapping + : this.getRequestDataArray(requestsMapping), }; this.basicFormGroup.setValue(editedBase, {emitEvent: false}); diff --git 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 new file mode 100644 index 0000000000..4c992c0e21 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.html @@ -0,0 +1,125 @@ + +
+
+
gateway.server-url
+
+ + + + warning + + +
+
+
+
+
{{ 'gateway.timeout' | translate }}
+
+
+ + + + warning + + +
+
+
+
gateway.security
+
+ + + {{ version.name }} + + +
+
+
+
+
{{ 'gateway.scan-period' | translate }}
+
+
+ + + + warning + + +
+
+
+
+
{{ 'gateway.sub-check-period' | translate }}
+
+
+ + + + warning + + +
+
+
+ + +
{{ 'gateway.enable-subscription' | translate }}
+ + +
+
+ + + {{ 'gateway.show-map' | translate }} + + +
+ + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/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 similarity index 82% rename from ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss rename to ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.scss index 64e886ffef..416f368279 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/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 @@ -17,12 +17,4 @@ width: 100%; height: 100%; display: block; - - .server-conf-field-title { - min-width: 250px; - width: 30%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/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 similarity index 71% rename from ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.ts index 98a36182a6..eddad255a3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/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 @@ -33,24 +33,27 @@ import { } 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'; +import { TruncateWithTooltipDirective } from '@shared/directives/truncate-with-tooltip.directive'; +import { + SecurityConfigComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component'; @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 } ], @@ -59,9 +62,10 @@ import { takeUntil } from 'rxjs/operators'; CommonModule, SharedModule, SecurityConfigComponent, + TruncateWithTooltipDirective, ] }) -export class ServerConfigComponent implements ControlValueAccessor, Validator, OnDestroy { +export class OpcServerConfigComponent implements ControlValueAccessor, Validator, OnDestroy { securityPolicyTypes = SecurityPolicyTypes; serverConfigFormGroup: UntypedFormGroup; @@ -112,6 +116,16 @@ export class ServerConfigComponent implements ControlValueAccessor, Validator, O } writeValue(serverConfig: ServerConfig): void { - this.serverConfigFormGroup.patchValue(serverConfig, {emitEvent: false}); + const { timeoutInMillis, scanPeriodInMillis, enableSubscriptions, subCheckPeriodInMillis, showMap, security } = serverConfig; + const serverConfigState = { + ...serverConfig, + timeoutInMillis: timeoutInMillis || 1000, + scanPeriodInMillis: scanPeriodInMillis || 1000, + enableSubscriptions: enableSubscriptions || true, + subCheckPeriodInMillis: subCheckPeriodInMillis || 10, + showMap: showMap || false, + security: security || SecurityPolicy.BASIC128, + }; + this.serverConfigFormGroup.reset(serverConfigState, {emitEvent: false}); } } diff --git 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 index 1089fd114c..5f8b25af9d 100644 --- 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 @@ - +
diff --git 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 index 2c1dd7dd2b..39198c9696 100644 --- 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,21 +25,29 @@ 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'; -import { - BrokerConfigControlComponent, - MappingTableComponent, - SecurityConfigComponent, - ServerConfigComponent, - WorkersConfigControlComponent -} from '@home/components/widget/lib/gateway/connectors-configuration/public-api'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; +import { + SecurityConfigComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component'; +import { + WorkersConfigControlComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component'; +import { + BrokerConfigControlComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component'; +import { + MappingTableComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component'; +import { + OpcServerConfigComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component'; @Component({ selector: 'tb-opc-ua-basic-config', @@ -65,7 +73,7 @@ import { Subject } from 'rxjs'; WorkersConfigControlComponent, BrokerConfigControlComponent, MappingTableComponent, - ServerConfigComponent, + OpcServerConfigComponent, ], styleUrls: ['./opc-ua-basic-config.component.scss'] }) @@ -109,7 +117,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 || [], diff --git 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 deleted file mode 100644 index 5e185ddf0a..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/public-api.ts +++ /dev/null @@ -1,26 +0,0 @@ -/// -/// 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 './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 './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'; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.ts index 38a66daafc..18d1a96e38 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.ts @@ -16,6 +16,7 @@ import { ChangeDetectionStrategy, + ChangeDetectorRef, Component, forwardRef, Input, @@ -87,7 +88,7 @@ export class SecurityConfigComponent implements ControlValueAccessor, OnInit, On private destroy$ = new Subject(); - constructor(private fb: FormBuilder) {} + constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {} ngOnInit(): void { this.securityFormGroup = this.fb.group({ @@ -127,6 +128,7 @@ export class SecurityConfigComponent implements ControlValueAccessor, OnInit, On } this.securityFormGroup.reset(securityInfo, {emitEvent: false}); } + this.cdr.markForCheck(); } validate(): ValidationErrors | null { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html deleted file mode 100644 index 43b15de06c..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html +++ /dev/null @@ -1,127 +0,0 @@ - -
-
-
-
gateway.server-url
-
- - - - warning - - -
-
-
-
- gateway.timeout -
-
- - - - warning - - -
-
-
-
gateway.security
-
- - - {{ version.name }} - - -
-
-
-
- gateway.scan-period -
-
- - - - warning - - -
-
-
-
- gateway.sub-check-period -
-
- - - - warning - - -
-
-
-
- - - {{ 'gateway.enable-subscription' | translate }} - - -
-
- - - {{ 'gateway.show-map' | translate }} - - -
- - -
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html index 37f7b1422e..0a3bd4e6f3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html @@ -18,8 +18,8 @@
- gateway.max-number-of-workers + tb-hint-tooltip-icon="{{ 'gateway.max-number-of-workers-hint' | translate }}"> +
{{ 'gateway.max-number-of-workers' | translate }}
@@ -40,8 +40,8 @@
- gateway.max-messages-queue-for-worker + tb-hint-tooltip-icon="{{ 'gateway.max-messages-queue-for-worker-hint' | translate }}"> +
{{ 'gateway.max-messages-queue-for-worker' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts index 9a37bdb07c..ad13b921bc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts @@ -25,7 +25,9 @@ import { FormBuilder, NG_VALIDATORS, NG_VALUE_ACCESSOR, - UntypedFormGroup, ValidationErrors, Validator, + UntypedFormGroup, + ValidationErrors, + Validator, Validators } from '@angular/forms'; import { SharedModule } from '@shared/shared.module'; @@ -33,6 +35,7 @@ import { CommonModule } from '@angular/common'; import { WorkersConfig } from '@home/components/widget/lib/gateway/gateway-widget.models'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { TruncateWithTooltipDirective } from '@shared/directives/truncate-with-tooltip.directive'; @Component({ selector: 'tb-workers-config-control', @@ -42,6 +45,7 @@ import { takeUntil } from 'rxjs/operators'; imports: [ CommonModule, SharedModule, + TruncateWithTooltipDirective, ], providers: [ { @@ -91,7 +95,11 @@ export class WorkersConfigControlComponent implements OnDestroy, ControlValueAcc } writeValue(workersConfig: WorkersConfig): void { - this.workersConfigFormGroup.patchValue(workersConfig, {emitEvent: false}); + const { maxNumberOfWorkers, maxMessageNumberPerWorker } = workersConfig; + this.workersConfigFormGroup.reset({ + maxNumberOfWorkers: maxNumberOfWorkers || 100, + maxMessageNumberPerWorker: maxMessageNumberPerWorker || 10, + }, {emitEvent: false}); } validate(): ValidationErrors | null { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.ts index 7cdfbf5808..5a1b5d2a1b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.ts @@ -33,7 +33,7 @@ import { } from '@home/components/widget/lib/gateway/gateway-widget.models'; import { Subject } from 'rxjs'; import { ResourcesService } from '@core/services/resources.service'; -import { takeUntil, tap } from "rxjs/operators"; +import { takeUntil, tap } from 'rxjs/operators'; @Component({ selector: 'tb-add-connector-dialog', diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html index 35ac90f671..17c002115c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html @@ -19,7 +19,7 @@

{{ MappingTypeTranslationsMap.get(this.data?.mappingType) | translate}}

-
+
-
- gateway.mqtt-qos +
+ {{ 'gateway.mqtt-qos' | translate }}
@@ -140,8 +140,8 @@
- gateway.extension + tb-hint-tooltip-icon="{{ 'gateway.extension-hint' | translate }}"> + {{ 'gateway.extension' | translate }}
@@ -369,8 +369,8 @@
- gateway.device-name-filter + tb-hint-tooltip-icon="{{ 'gateway.device-name-filter-hint' | translate }}"> + {{ 'gateway.device-name-filter' | translate }}
@@ -388,8 +388,8 @@
-
- gateway.attribute-filter +
+ {{ 'gateway.attribute-filter' | translate }}
@@ -472,8 +472,8 @@
-
- gateway.device-name-filter +
+ {{ 'gateway.device-name-filter' | translate }}
@@ -491,8 +491,8 @@
-
- gateway.method-filter +
+ {{ 'gateway.method-filter' | translate }}
@@ -580,8 +580,8 @@
-
- gateway.response-topic-Qos +
+ {{ 'gateway.response-topic-Qos' | translate }}
@@ -618,8 +618,8 @@
-
- gateway.device-node +
+ {{ 'gateway.device-node' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss index 190422eeb0..4212e8f834 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss @@ -47,6 +47,7 @@ .mdc-evolution-chip-set__chips { justify-content: flex-end; align-items: center; + flex-wrap: nowrap; } } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts index 3812fa161e..9e5a43bc17 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts @@ -24,10 +24,15 @@ import { Router } from '@angular/router'; import { Attribute, AttributesUpdate, + ConnectorMapping, + ConnectorMappingFormValue, + ConverterMappingFormValue, ConvertorType, ConvertorTypeTranslationsMap, DataConversionTranslationsMap, + DeviceConnectorMapping, DeviceInfoType, + HelpLinkByMappingTypeMap, MappingHintTranslationsMap, MappingInfo, MappingKeysAddKeyTranslationsMap, @@ -37,11 +42,11 @@ import { MappingKeysType, MappingType, MappingTypeTranslationsMap, - MappingValue, noLeadTrailSpacesRegex, OPCUaSourceTypes, QualityTypes, QualityTypeTranslationsMap, + RequestMappingFormValue, RequestType, RequestTypesTranslationsMap, RpcMethod, @@ -55,14 +60,16 @@ import { startWith, takeUntil } from 'rxjs/operators'; import { MatButton } from '@angular/material/button'; import { TbPopoverService } from '@shared/components/popover.service'; import { TranslateService } from '@ngx-translate/core'; -import { MappingDataKeysPanelComponent } from '@home/components/widget/lib/gateway/connectors-configuration/public-api'; +import { + MappingDataKeysPanelComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component'; @Component({ selector: 'tb-mapping-dialog', templateUrl: './mapping-dialog.component.html', styleUrls: ['./mapping-dialog.component.scss'] }) -export class MappingDialogComponent extends DialogComponent implements OnDestroy { +export class MappingDialogComponent extends DialogComponent implements OnDestroy { mappingForm: UntypedFormGroup; @@ -97,6 +104,8 @@ export class MappingDialogComponent extends DialogComponent(); @@ -104,7 +113,7 @@ export class MappingDialogComponent extends DialogComponent, protected router: Router, @Inject(MAT_DIALOG_DATA) public data: MappingInfo, - public dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, private fb: FormBuilder, private popoverService: TbPopoverService, private renderer: Renderer2, @@ -187,10 +196,6 @@ export class MappingDialogComponent extends DialogComponent

{{ 'gateway.connectors' | translate }}

- +
{{ 'gateway.statistics.command' | translate }} @@ -43,13 +48,16 @@ matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear> - {{ 'widgets.gateway.created-time' | translate }} + {{ 'widgets.gateway.created-time' | translate }} + - {{row[0]| date:'yyyy-MM-dd HH:mm:ss' }} + {{ row[0]| date:'yyyy-MM-dd HH:mm:ss' }} - {{ 'widgets.gateway.message' | translate }} + {{ 'widgets.gateway.message' | translate }} + {{ row[1] }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.scss index cd7722d12d..9f719807ca 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.scss @@ -28,6 +28,7 @@ height: 100%; margin-right: 35px; padding: 15px; + gap: 22px; } @media only screen and (max-width: 750px) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.ts index a3cb79e125..b17b8ef28a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.ts @@ -32,6 +32,7 @@ import { Direction, SortOrder } from '@shared/models/page/sort-order'; import { MatTableDataSource } from '@angular/material/table'; import { MatSort } from '@angular/material/sort'; import { NULL_UUID } from '@shared/models/id/has-uuid'; +import { deepClone } from '@core/utils'; @Component({ selector: 'tb-gateway-statistics', @@ -135,6 +136,11 @@ export class GatewayStatisticsComponent implements AfterViewInit { } } + public navigateToStatistics() { + const params = deepClone(this.ctx.stateController.getStateParams()); + this.ctx.stateController.openState('configuration', params); + } + public sortData() { this.dataSource.sortData(this.dataSource.data, this.sort); } diff --git 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 index 9805008503..8df3994ea2 100644 --- 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 @@ -174,13 +174,25 @@ export interface ConnectorSecurity { export type ConnectorMapping = DeviceConnectorMapping | RequestMappingData | ConverterConnectorMapping; -export interface ConnectorBaseConfig { - mapping?: DeviceConnectorMapping[]; - dataMapping?: ConverterConnectorMapping[]; - requestsMapping?: Record | RequestMappingData[]; - server?: ServerConfig; - broker?: BrokerConfig; - workers?: WorkersConfig; +export type ConnectorMappingFormValue = DeviceConnectorMapping | RequestMappingFormValue | ConverterMappingFormValue; + +export type ConnectorBaseConfig = MQTTBasicConfig | OPCBasicConfig | ModbusBasicConfig; + +export interface MQTTBasicConfig { + dataMapping: ConverterConnectorMapping[]; + requestsMapping: Record | RequestMappingData[]; + broker: BrokerConfig; + workers: WorkersConfig; +} + +export interface OPCBasicConfig { + mapping: DeviceConnectorMapping[]; + server: ServerConfig; +} + +export interface ModbusBasicConfig { + master: ModbusMasterConfig; + slave: ModbusSlave; } export interface WorkersConfig { @@ -223,7 +235,7 @@ export interface AttributesUpdate { value: string; } -interface Converter { +export interface Converter { type: ConvertorType; deviceNameJsonExpression: string; deviceTypeJsonExpression: string; @@ -239,14 +251,20 @@ export interface ConverterConnectorMapping { converter: Converter; } +export type ConverterMappingFormValue = Omit & { + converter: { + type: ConvertorType; + } & Record; +}; + export interface DeviceConnectorMapping { deviceNodePattern: string; deviceNodeSource: string; deviceInfo: DeviceInfo; - attributes: Attribute[]; - timeseries: Timeseries[]; - rpc_methods: RpcMethod[]; - attributes_updates: AttributesUpdate[]; + attributes?: Attribute[]; + timeseries?: Timeseries[]; + rpc_methods?: RpcMethod[]; + attributes_updates?: AttributesUpdate[]; } export enum ConnectorType { @@ -475,6 +493,11 @@ export interface MappingInfo { buttonTitle: string; } +export interface ModbusSlaveInfo { + value: SlaveConfig; + buttonTitle: string; +} + export enum ConnectorConfigurationModes { BASIC = 'basic', ADVANCED = 'advanced' @@ -540,6 +563,14 @@ export const MappingHintTranslationsMap = new Map( ] ); +export const HelpLinkByMappingTypeMap = new Map( + [ + [MappingType.DATA, 'https://thingsboard.io/docs/iot-gateway/config/mqtt/#section-mapping'], + [MappingType.OPCUA, 'https://thingsboard.io/docs/iot-gateway/config/opc-ua/#section-mapping'], + [MappingType.REQUESTS, 'https://thingsboard.io/docs/iot-gateway/config/mqtt/#section-mapping'] + ] +); + export const QualityTypes = [0, 1 ,2]; export const QualityTypeTranslationsMap = new Map( @@ -597,6 +628,10 @@ export interface RequestMappingData { requestValue: RequestDataItem; } +export type RequestMappingFormValue = Omit & { + requestValue: Record; +}; + export interface RequestDataItem { type: string; details: string; @@ -739,3 +774,259 @@ 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.TCP, 'TCP'], + [ModbusProtocolType.UDP, 'UDP'], + [ModbusProtocolType.Serial, 'Serial'], + ] +); + +export enum ModbusMethodType { + SOCKET = 'socket', + RTU = 'rtu', +} + +export enum ModbusSerialMethodType { + RTU = 'rtu', + ASCII = 'ascii', +} + +export const ModbusMethodLabelsMap = new Map( + [ + [ModbusMethodType.SOCKET, 'Socket'], + [ModbusMethodType.RTU, 'RTU'], + [ModbusSerialMethodType.ASCII, 'ASCII'], + ] +); + +export const ModbusByteSizes = [5, 6, 7 ,8]; + +export enum ModbusParity { + Even = 'E', + Odd = 'O', + None = 'N' +} + +export const ModbusParityLabelsMap = new Map( + [ + [ModbusParity.Even, 'Even'], + [ModbusParity.Odd, 'Odd'], + [ModbusParity.None, 'None'], + ] +); + +export enum ModbusOrderType { + BIG = 'BIG', + LITTLE = 'LITTLE', +} + +export enum ModbusRegisterType { + HoldingRegisters = 'holding_registers', + CoilsInitializer = 'coils_initializer', + InputRegisters = 'input_registers', + DiscreteInputs = 'discrete_inputs' +} + +export const ModbusRegisterTranslationsMap = new Map( + [ + [ModbusRegisterType.HoldingRegisters, 'gateway.holding_registers'], + [ModbusRegisterType.CoilsInitializer, 'gateway.coils_initializer'], + [ModbusRegisterType.InputRegisters, 'gateway.input_registers'], + [ModbusRegisterType.DiscreteInputs, 'gateway.discrete_inputs'] + ] +); + +export enum ModbusDataType { + STRING = 'string', + BYTES = 'bytes', + BITS = 'bits', + INT8 = '8int', + UINT8 = '8uint', + FLOAT8 = '8float', + INT16 = '16int', + UINT16 = '16uint', + FLOAT16 = '16float', + INT32 = '32int', + UINT32 = '32uint', + FLOAT32 = '32float', + INT64 = '64int', + UINT64 = '64uint', + FLOAT64 = '64float' +} + +export enum ModbusObjectCountByDataType { + '8int' = 1, + '8uint' = 1, + '8float' = 1, + '16int' = 1, + '16uint' = 1, + '16float' = 1, + '32int' = 2, + '32uint' = 2, + '32float' = 2, + '64int' = 4, + '64uint' = 4, + '64float' = 4, +} + +export enum ModbusValueKey { + ATTRIBUTES = 'attributes', + TIMESERIES = 'timeseries', + ATTRIBUTES_UPDATES = 'attributeUpdates', + RPC_REQUESTS = 'rpc', +} + +export const ModbusKeysPanelTitleTranslationsMap = new Map( + [ + [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.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.ATTRIBUTES, 'gateway.delete-attribute'], + [ModbusValueKey.TIMESERIES, 'gateway.delete-timeseries'], + [ModbusValueKey.ATTRIBUTES_UPDATES, 'gateway.delete-attribute-update'], + [ModbusValueKey.RPC_REQUESTS, 'gateway.delete-rpc-request'] + ] +); + +export const ModbusKeysNoKeysTextTranslationsMap = new Map( + [ + [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 ModbusFunctionCodeTranslationsMap = new Map( + [ + [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?: ModbusParity; + 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: ModbusValuesState; + port: string | number; + security: ModbusSecurity; +} + +export type ModbusValuesState = ModbusRegisterValues | ModbusValues; + +export interface ModbusRegisterValues { + holding_registers: ModbusValues; + coils_initializer: ModbusValues; + input_registers: ModbusValues; + discrete_inputs: ModbusValues; +} + +export interface ModbusValues { + attributes: ModbusValue[]; + timeseries: ModbusValue[]; + attributeUpdates: ModbusValue[]; + rpc: ModbusValue[]; +} + +export interface ModbusIdentity { + vendorName?: string; + productCode?: string; + vendorUrl?: string; + productName?: string; + modelName?: string; +} + +export const ModbusBaudrates = [4800, 9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600]; diff --git a/ui-ngx/src/app/modules/home/pipes/gateway-help-link/gateway-help-link.pipe.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-help-link.pipe.ts similarity index 100% rename from ui-ngx/src/app/modules/home/pipes/gateway-help-link/gateway-help-link.pipe.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-help-link.pipe.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe.ts new file mode 100644 index 0000000000..fcf5766c05 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/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'); + } + if (portControl.hasError('min') || portControl.hasError('max')) { + return this.translate.instant('gateway.port-limits-error', { + min: PortLimits.MIN, + max: PortLimits.MAX, + }); + } + return ''; + } +} diff --git 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 index 1d28f139c0..51d82dece9 100644 --- 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'; @@ -112,18 +109,38 @@ import { import { NotificationTypeFilterPanelComponent } from '@home/components/widget/lib/cards/notification-type-filter-panel.component'; -import { GatewayHelpLinkPipe } from '@home/pipes/public-api'; +import { GatewayHelpLinkPipe } from '@home/components/widget/lib/gateway/pipes/gateway-help-link.pipe'; +import { EllipsisChipListDirective } from '@shared/directives/ellipsis-chip-list.directive'; +import { + BrokerConfigControlComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component'; +import { + WorkersConfigControlComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component'; +import { + OpcServerConfigComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component'; +import { + MqttBasicConfigComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/mqtt-basic-config/mqtt-basic-config.component'; +import { + MappingTableComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component'; +import { + OpcUaBasicConfigComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/opc-ua-basic-config/opc-ua-basic-config.component'; import { - BrokerConfigControlComponent, - DeviceInfoTableComponent, - MappingDataKeysPanelComponent, - MappingTableComponent, - MqttBasicConfigComponent, - OpcUaBasicConfigComponent, - ServerConfigComponent, - TypeValuePanelComponent, - WorkersConfigControlComponent, -} from '@home/components/widget/lib/gateway/connectors-configuration/public-api'; + ModbusBasicConfigComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component'; +import { + DeviceInfoTableComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/device-info-table/device-info-table.component'; +import { + MappingDataKeysPanelComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component'; +import { + TypeValuePanelComponent +} from '@home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component'; @NgModule({ declarations: [ @@ -163,7 +180,6 @@ import { GatewayConfigurationComponent, GatewayRemoteConfigurationDialogComponent, GatewayServiceRPCConnectorTemplateDialogComponent, - EllipsisChipListDirective, ValueCardWidgetComponent, AggregatedValueCardWidgetComponent, CountWidgetComponent, @@ -192,7 +208,8 @@ import { LabelCardWidgetComponent, LabelValueCardWidgetComponent, UnreadNotificationWidgetComponent, - NotificationTypeFilterPanelComponent], + NotificationTypeFilterPanelComponent + ], imports: [ CommonModule, SharedModule, @@ -203,11 +220,13 @@ import { GatewayHelpLinkPipe, BrokerConfigControlComponent, WorkersConfigControlComponent, - ServerConfigComponent, + OpcServerConfigComponent, MqttBasicConfigComponent, MappingTableComponent, OpcUaBasicConfigComponent, - KeyValueIsNotEmptyPipe + KeyValueIsNotEmptyPipe, + ModbusBasicConfigComponent, + EllipsisChipListDirective, ], exports: [ EntitiesTableWidgetComponent, diff --git a/ui-ngx/src/app/modules/home/pipes/public-api.ts b/ui-ngx/src/app/modules/home/pipes/public-api.ts deleted file mode 100644 index 1cb3ce312a..0000000000 --- a/ui-ngx/src/app/modules/home/pipes/public-api.ts +++ /dev/null @@ -1,17 +0,0 @@ -/// -/// 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 './gateway-help-link/gateway-help-link.pipe'; diff --git a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html index 32b66fd2b7..f2413f0ad7 100644 --- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html +++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html @@ -15,7 +15,7 @@ limitations under the License. --> - + implements DataSource { + + protected dataSubject = new BehaviorSubject>([]); + + connect(): Observable> { + return this.dataSubject.asObservable(); + } + + disconnect(): void { + this.dataSubject.complete(); + } + + loadData(data: Array): void { + this.dataSubject.next(data); + } + + isEmpty(): Observable { + return this.dataSubject.pipe( + map((data: T[]) => !data.length) + ); + } + + total(): Observable { + return this.dataSubject.pipe( + map((data: T[]) => data.length) + ); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts b/ui-ngx/src/app/shared/directives/ellipsis-chip-list.directive.ts similarity index 90% rename from ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts rename to ui-ngx/src/app/shared/directives/ellipsis-chip-list.directive.ts index aa4738d707..c320a2f78a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts +++ b/ui-ngx/src/app/shared/directives/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(); + private intersectionObserver: IntersectionObserver; @Input('tb-ellipsis-chip-list') set chips(value: string[]) { @@ -59,6 +61,19 @@ export class EllipsisChipListDirective implements OnDestroy { ).subscribe(() => { this.adjustChips(); }); + this.observeIntersection(); + } + + private observeIntersection(): void { + this.intersectionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + this.adjustChips(); + } + }); + }); + + this.intersectionObserver.observe(this.el.nativeElement); } private adjustChips(): void { @@ -124,5 +139,6 @@ export class EllipsisChipListDirective implements OnDestroy { ngOnDestroy(): void { this.destroy$.next(); this.destroy$.complete(); + this.intersectionObserver.disconnect(); } } diff --git a/ui-ngx/src/app/shared/directives/truncate-with-tooltip.directive.ts b/ui-ngx/src/app/shared/directives/truncate-with-tooltip.directive.ts new file mode 100644 index 0000000000..1281b86040 --- /dev/null +++ b/ui-ngx/src/app/shared/directives/truncate-with-tooltip.directive.ts @@ -0,0 +1,116 @@ +/// +/// 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, + Directive, + ElementRef, + Input, + OnDestroy, + OnInit, + Renderer2, +} from '@angular/core'; +import { fromEvent, Subject } from 'rxjs'; +import { filter, takeUntil, tap } from 'rxjs/operators'; +import { MatTooltip, TooltipPosition } from '@angular/material/tooltip'; +import { coerceBoolean } from '@shared/decorators/coercion'; + +@Directive({ + standalone: true, + selector: '[tbTruncateWithTooltip]', + providers: [MatTooltip], +}) +export class TruncateWithTooltipDirective implements OnInit, AfterViewInit, OnDestroy { + + @Input('tbTruncateWithTooltip') + text: string; + + @Input() + @coerceBoolean() + tooltipEnabled = true; + + @Input() + position: TooltipPosition = 'above'; + + private destroy$ = new Subject(); + + constructor( + private elementRef: ElementRef, + private renderer: Renderer2, + private tooltip: MatTooltip + ) {} + + ngOnInit(): void { + this.observeMouseEvents(); + this.applyTruncationStyles(); + } + + ngAfterViewInit(): void { + if (!this.text) { + this.text = this.elementRef.nativeElement.innerText; + } + + this.tooltip.position = this.position; + } + + ngOnDestroy(): void { + if (this.tooltip._isTooltipVisible()) { + this.hideTooltip(); + } + this.destroy$.next(); + this.destroy$.complete(); + } + + private observeMouseEvents(): void { + fromEvent(this.elementRef.nativeElement, 'mouseenter') + .pipe( + filter(() => this.tooltipEnabled), + filter(() => this.isOverflown(this.elementRef.nativeElement)), + tap(() => this.showTooltip()), + takeUntil(this.destroy$), + ) + .subscribe(); + fromEvent(this.elementRef.nativeElement, 'mouseleave') + .pipe( + filter(() => this.tooltipEnabled), + filter(() => this.tooltip._isTooltipVisible()), + tap(() => this.hideTooltip()), + takeUntil(this.destroy$), + ) + .subscribe(); + } + + private applyTruncationStyles(): void { + this.renderer.setStyle(this.elementRef.nativeElement, 'white-space', 'nowrap'); + this.renderer.setStyle(this.elementRef.nativeElement, 'overflow', 'hidden'); + this.renderer.setStyle(this.elementRef.nativeElement, 'text-overflow', 'ellipsis'); + } + + private isOverflown(element: HTMLElement): boolean { + return element.clientWidth < element.scrollWidth; + } + + private showTooltip(): void { + this.tooltip.message = this.text; + + this.renderer.setAttribute(this.elementRef.nativeElement, 'matTooltip', this.text); + this.tooltip.show(); + } + + private hideTooltip(): void { + this.tooltip.hide(); + } +} diff --git a/ui-ngx/src/app/shared/pipe/key-value-not-empty.pipe.ts b/ui-ngx/src/app/shared/pipe/key-value-not-empty.pipe.ts index 94eeced50e..08afba9d81 100644 --- a/ui-ngx/src/app/shared/pipe/key-value-not-empty.pipe.ts +++ b/ui-ngx/src/app/shared/pipe/key-value-not-empty.pipe.ts @@ -62,6 +62,6 @@ export class KeyValueIsNotEmptyPipe implements PipeTransform { } private makeKeyValuePair(key: string, value: unknown): KeyValue { - return {key: key, value: value}; + return {key, value}; } } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 5e1f84acfb..14eb272910 100644 --- 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,27 @@ "function": "Function" }, "gateway": { + "address": "Address", + "address-required": "Address required", "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-attribute-update": "Add attribute update", + "delete-rpc-request": "Delete request", + "delete-attribute-update": "Delete attribute update", "advanced": "Advanced", + "advanced-connection-settings": "Advanced connection settings", "attributes": "Attributes", "attribute-updates": "Attribute updates", "attribute-filter": "Attribute filter", @@ -2777,6 +2785,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 +2821,9 @@ "connectors-table-actions": "Actions", "connectors-table-key": "Key", "connectors-table-class": "Class", + "connection-timeout": "Connection timeout (s)", + "connect-attempt-time": "Connect attempt time (ms)", + "connect-attempt-count": "Connect attempt count", "copy-username": "Copy username", "copy-password": "Copy password", "copy-client-id": "Copy client ID", @@ -2839,7 +2852,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 +2872,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,8 +2898,11 @@ "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": "Enable", "enable-subscription": "Enable subscription", "extension": "Extension", "extension-hint": "Put your converter classname in the field. Custom converter with such class should be in extension/mqtt folder.", @@ -2895,6 +2913,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 +2952,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 registers", + "coils_initializer": "Coils initializer", + "input_registers": "Input registers", + "discrete_inputs": "Discrete inputs", "json-parse": "Not valid JSON.", "json-required": "Field cannot be empty.", "JSONPath-hint": "This field supports constants and JSONPath expressions.", @@ -2968,12 +2992,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 +3013,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 (ms)", "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 +3037,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 +3131,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 +3143,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 +3154,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,17 +3180,28 @@ }, "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": { "statistic": "Statistic", "statistics": "Statistics", "statistic-commands-empty": "No configured statistic keys found. You can configure them in \"Statistics\" tab in general configuration.", + "statistics-button": "Go to configuration", "commands": "Commands", "send-period": "Statistic send period (in sec)", "send-period-required": "Statistic send period is required", @@ -3237,6 +3287,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.", @@ -3256,13 +3308,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 (ms)", "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", @@ -3301,7 +3365,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.", diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/modbus.json b/ui-ngx/src/assets/metadata/connector-default-configs/modbus.json index 437a6abd95..441f63ab5f 100644 --- 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", @@ -15,6 +16,7 @@ "pollPeriod": 5000, "unitId": 1, "deviceName": "Temp Sensor", + "deviceType": "default", "sendDataOnlyOnChange": true, "connectAttemptTimeMs": 5000, "connectAttemptCount": 5, @@ -185,64 +187,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": "8int", + "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": [] - } - ] } } }