From 99104167901d28b738e5d323b1ca3e6eca8f2853 Mon Sep 17 00:00:00 2001 From: mpetrov Date: Wed, 19 Jun 2024 13:11:54 +0300 Subject: [PATCH] Added Gateway Dashboard Connector optimization for multiple connector retoggle --- .../gateway/gateway-connectors.component.html | 2 +- .../gateway/gateway-connectors.component.ts | 83 +++++++++++++------ 2 files changed, 59 insertions(+), 26 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html index 3a7f5403b9..d1267cae3a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html @@ -46,7 +46,7 @@ + (click)="$event.stopPropagation(); onEnableConnector(attribute)"> diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts index 4f1b6b72a9..cd13916357 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts @@ -62,7 +62,7 @@ import { } from './gateway-widget.models'; import { MatDialog } from '@angular/material/dialog'; import { AddConnectorDialogComponent } from '@home/components/widget/lib/gateway/dialog/add-connector-dialog.component'; -import { takeUntil } from 'rxjs/operators'; +import { debounceTime, take, takeUntil, tap } from 'rxjs/operators'; import { ErrorStateMatcher } from '@angular/material/core'; import { PageData } from '@shared/models/page/page-data'; @@ -148,6 +148,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie private destroy$ = new Subject(); private subscription: IWidgetSubscription; + private attributeUpdateSubject = new Subject(); constructor(protected store: Store, private fb: FormBuilder, @@ -180,6 +181,8 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie basicConfig: this.fb.group({}) }); this.connectorForm.disable(); + + this.observeAttributeChange(); } get portErrorTooltip(): string { @@ -524,31 +527,12 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie } - enableConnector(attribute: AttributeData): void { - const wasEnabled = this.activeConnectors.includes(attribute.key); - const scopeOld = wasEnabled ? AttributeScope.SHARED_SCOPE : AttributeScope.SERVER_SCOPE; - const scopeNew = !wasEnabled ? AttributeScope.SHARED_SCOPE : AttributeScope.SERVER_SCOPE; + onEnableConnector(attribute: AttributeData): void { attribute.value.ts = new Date().getTime(); - const tasks = [this.attributeService.saveEntityAttributes(this.device, AttributeScope.SHARED_SCOPE, [{ - key: 'active_connectors', - value: this.activeConnectors - }]), this.attributeService.saveEntityAttributes(this.device, AttributeScope.SERVER_SCOPE, [{ - key: 'inactive_connectors', - value: this.inactiveConnectors - }]), this.attributeService.deleteEntityAttributes(this.device, scopeOld, [attribute]), - this.attributeService.saveEntityAttributes(this.device, scopeNew, [attribute])]; - if (wasEnabled) { - const index = this.activeConnectors.indexOf(attribute.key); - this.activeConnectors.splice(index, 1); - this.inactiveConnectors.push(attribute.key); - } else { - const index = this.inactiveConnectors.indexOf(attribute.key); - this.inactiveConnectors.splice(index, 1); - this.activeConnectors.push(attribute.key); - } - forkJoin(tasks).subscribe(_ => { - this.updateData(true); - }); + + this.updateActiveConnectorKeys(attribute.key); + + this.attributeUpdateSubject.next(attribute); } getErrorsCount(attribute: AttributeData): string { @@ -599,6 +583,55 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie this.connectorForm.get(formControlName)?.patchValue('tb_gw_' + generateSecret(5)); } + private observeAttributeChange(): void { + this.attributeUpdateSubject.pipe( + debounceTime(300), + tap((attribute: AttributeData) => this.executeAttributeUpdates(attribute)), + takeUntil(this.destroy$), + ).subscribe(); + } + + private updateActiveConnectorKeys(key: string): void { + const wasEnabled = this.activeConnectors.includes(key); + if (wasEnabled) { + const index = this.activeConnectors.indexOf(key); + if (index !== -1) this.activeConnectors.splice(index, 1); + this.inactiveConnectors.push(key); + } else { + const index = this.inactiveConnectors.indexOf(key); + if (index !== -1) this.inactiveConnectors.splice(index, 1); + this.activeConnectors.push(key); + } + } + + private executeAttributeUpdates(attribute: AttributeData): void { + forkJoin(this.getAttributeExecutionTasks(attribute)) + .pipe( + take(1), + tap(() => this.updateData(true)), + takeUntil(this.destroy$), + ) + .subscribe(); + } + + private getAttributeExecutionTasks(attribute: AttributeData): Observable[] { + const isActive = this.activeConnectors.includes(attribute.key); + const scopeOld = isActive ? AttributeScope.SERVER_SCOPE : AttributeScope.SHARED_SCOPE; + const scopeNew = isActive ? AttributeScope.SHARED_SCOPE : AttributeScope.SERVER_SCOPE; + + return [ + this.attributeService.saveEntityAttributes(this.device, AttributeScope.SHARED_SCOPE, [{ + key: 'active_connectors', + value: this.activeConnectors + }]), + this.attributeService.saveEntityAttributes(this.device, AttributeScope.SERVER_SCOPE, [{ + key: 'inactive_connectors', + value: this.inactiveConnectors + }]), + this.attributeService.deleteEntityAttributes(this.device, scopeOld, [attribute]), + this.attributeService.saveEntityAttributes(this.device, scopeNew, [attribute])]; + } + private onDataUpdateError(e: any): void { const exceptionData = this.utils.parseException(e); let errorText = exceptionData.name;