UI: gateway dashboard improvements for connectors config

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts

@@ -63,33 +63,52 @@ export class EllipsisChipListDirective implements OnDestroy {
 
   private adjustChips(): void {
     const chipListElement = this.el.nativeElement;
-    const ellipsisText = this.el.nativeElement.querySelector('.ellipsis-text');
-    const chipNodes = chipListElement.querySelectorAll('mat-chip:not(.ellipsis-chip)');
     const ellipsisChip = this.el.nativeElement.querySelector('.ellipsis-chip');
-    this.renderer.setStyle(ellipsisChip,'display', 'inline-flex');
-    ellipsisText.innerHTML = this.translate.instant('gateway.ellipsis-chips-text',
-      {count: (this.chipsValue.length)});
-
     const margin = parseFloat(this.window.getComputedStyle(ellipsisChip).marginLeft) || 0;
-    const availableWidth = chipListElement.offsetWidth - (ellipsisChip.offsetWidth + margin);
+    const chipNodes = chipListElement.querySelectorAll('mat-chip:not(.ellipsis-chip)');
-    let usedWidth = 0;
+
-    let visibleChipsCount = 0;
+    if (this.chipsValue.length > 1) {
+      const ellipsisText = this.el.nativeElement.querySelector('.ellipsis-text');
+      this.renderer.setStyle(ellipsisChip, 'display', 'inline-flex');
+      ellipsisText.innerHTML = this.translate.instant('gateway.ellipsis-chips-text',
+        {count: (this.chipsValue.length)});
 
-    chipNodes.forEach((chip) => {
+      const availableWidth = chipListElement.offsetWidth - (ellipsisChip.offsetWidth + margin);
-      this.renderer.setStyle(chip, 'display', 'inline-flex');
+      let usedWidth = 0;
-      if ((usedWidth + (chip.offsetWidth + margin) <= availableWidth) && (visibleChipsCount < this.chipsValue.length)) {
+      let visibleChipsCount = 0;
-        visibleChipsCount++;
+
-        usedWidth += chip.offsetWidth + margin;
+      chipNodes.forEach((chip) => {
-      } else {
+        this.renderer.setStyle(chip, 'display', 'inline-flex');
-        this.renderer.setStyle(chip, 'display', 'none');
+        if ((usedWidth + (chip.offsetWidth + margin) <= availableWidth) && (visibleChipsCount < this.chipsValue.length)) {
+          visibleChipsCount++;
+          usedWidth += chip.offsetWidth + margin;
+        } else {
+          this.renderer.setStyle(chip, 'display', 'none');
+        }
+      });
+
+      ellipsisText.innerHTML = this.translate.instant('gateway.ellipsis-chips-text',
+        {count: (this.chipsValue.length - visibleChipsCount)});
+
+      if (visibleChipsCount === this.chipsValue?.length) {
+        this.renderer.setStyle(ellipsisChip, 'display', 'none');
       }
-    });
+    } else if (this.chipsValue.length === 1) {
+      this.renderer.setStyle(ellipsisChip, 'display', 'none');
+      const chipLabelContainer = chipNodes[0].querySelector('.mdc-evolution-chip__action');
+      const textLabelContainer = chipLabelContainer.querySelector('.mdc-evolution-chip__text-label');
+      const leftPadding = parseFloat(this.window.getComputedStyle(chipLabelContainer).paddingLeft) || 0;
+      const rightPadding = parseFloat(this.window.getComputedStyle(chipLabelContainer).paddingRight) || 0;
 
-    ellipsisText.innerHTML = this.translate.instant('gateway.ellipsis-chips-text',
+      const computedTextWidth = chipListElement.offsetWidth - margin -
-      {count: (this.chipsValue.length - visibleChipsCount)});
+        (leftPadding + rightPadding);
 
-    if (visibleChipsCount === this.chipsValue?.length) {
+      this.renderer.setStyle(textLabelContainer, 'max-width', computedTextWidth + 'px');
-      this.renderer.setStyle(ellipsisChip,'display', 'none');
+      this.renderer.setStyle(textLabelContainer, 'overflow', 'hidden');
+      this.renderer.setStyle(textLabelContainer, 'text-overflow', 'ellipsis');
+      this.renderer.setStyle(textLabelContainer, 'white-space', 'nowrap');
+    } else {
+      this.renderer.setStyle(ellipsisChip, 'display', 'none');
     }
   }
 

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

@@ -26,7 +26,9 @@
             <mat-expansion-panel class="tb-settings" [expanded]="last">
               <mat-expansion-panel-header fxLayout="row wrap">
                 <mat-panel-title>
-                  {{ keyControl.get('key').value + '-' + valueTitle(keyControl.get('value').value) }}
+                  <div class="title-container">{{ keyControl.get('key').value }}</div>
+                    {{ '-' }}
+                  <div class="title-container">{{ valueTitle(keyControl.get('value').value) }}</div>
                 </mat-panel-title>
               </mat-expansion-panel-header>
               <ng-template matExpansionPanelContent>

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

@@ -16,9 +16,16 @@
 
 :host {
   .tb-mapping-keys-panel {
-    min-width: 700px;
+    width: 77vw;
     max-width: 700px;
 
+    .title-container {
+      max-width: 14vw;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap
+    }
+
     .key-panel {
       height: 500px;
       overflow: auto;

ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html

@@ -98,7 +98,7 @@
                      *ngIf="converterType === ConvertorTypeEnum.BYTES || converterType === ConvertorTypeEnum.JSON">
                   <div class="tb-form-row space-between tb-flex">
                     <div class="fixed-title-width" translate>gateway.attributes</div>
-                    <div class="tb-flex">
+                    <div class="tb-flex ellipsis-chips-container">
                       <mat-chip-listbox [tb-ellipsis-chip-list]="converterAttributes" class="tb-flex">
                           <mat-chip *ngFor="let attribute of converterAttributes">
                             {{ attribute }}
@@ -118,7 +118,7 @@
                   </div>
                   <div class="tb-form-row space-between tb-flex">
                     <div class="fixed-title-width" translate>gateway.timeseries</div>
-                    <div class="tb-flex">
+                    <div class="tb-flex ellipsis-chips-container">
                       <mat-chip-listbox class="tb-flex" [tb-ellipsis-chip-list]="converterTelemetry">
                         <mat-chip *ngFor="let telemetry of converterTelemetry">
                           {{ telemetry }}
@@ -163,7 +163,7 @@
                     <div class="tb-form-hint tb-primary-fill">{{ 'gateway.extension-configuration-hint' | translate }}</div>
                     <div class="tb-form-row space-between tb-flex">
                       <div class="fixed-title-width" translate>gateway.keys</div>
-                      <div class="tb-flex">
+                      <div class="tb-flex ellipsis-chips-container">
                         <mat-chip-listbox [tb-ellipsis-chip-list]="customKeys" class="tb-flex">
                           <mat-chip *ngFor="let telemetry of customKeys">
                             {{ telemetry }}

ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss

@@ -36,6 +36,10 @@
     max-height: 670px;
     height: 670px;
   }
+
+  .ellipsis-chips-container {
+    max-width: 70%;
+  }
 }
 
 :host ::ng-deep {

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

@@ -317,7 +317,7 @@
                     <div class="tb-flex no-gap">
                       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                         <input matInput name="value" type="number" min="1" formControlName="maxNumberOfWorkers"
-                               placeholder="{{ 'gateway.default' | translate }}"/>
+                               placeholder="{{ 'gateway.set' | translate }}"/>
                         <mat-icon matSuffix
                                   matTooltipPosition="above"
                                   matTooltipClass="tb-error-tooltip"
@@ -339,7 +339,7 @@
                     <div class="tb-flex no-gap">
                       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                         <input matInput name="value" type="number" min="1" formControlName="maxMessageNumberPerWorker"
-                               placeholder="{{ 'gateway.default' | translate }}"/>
+                               placeholder="{{ 'gateway.set' | translate }}"/>
                         <mat-icon matSuffix
                                   matTooltipPosition="above"
                                   matTooltipClass="tb-error-tooltip"

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

@@ -64,6 +64,7 @@ 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 { ErrorStateMatcher } from '@angular/material/core';
+import { PageData } from '@shared/models/page/page-data';
 
 export class ForceErrorStateMatcher implements ErrorStateMatcher {
   isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@@ -136,7 +137,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
 
   private subscriptionOptions: WidgetSubscriptionOptions = {
     callbacks: {
-      onDataUpdated: (data) => this.ctx.ngZone.run(() => {
+      onDataUpdated: () => this.ctx.ngZone.run(() => {
         this.onDataUpdated();
       }),
       onDataUpdateError: (subscription, e) => this.ctx.ngZone.run(() => {
@@ -363,17 +364,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
       this.activeData = data.data.filter(value => this.activeConnectors.includes(value.key));
       this.combineData();
       this.generateSubscription();
-      if (this.initialConnector) {
+      this.setClientData(data);
-        const clientConnectorData = data.data.find(attr => attr.key === this.initialConnector.name);
-        if (clientConnectorData) {
-          clientConnectorData.value = typeof clientConnectorData.value === 'string' ?
-            JSON.parse(clientConnectorData.value) : clientConnectorData.value;
-
-          if (this.isConnectorSynced(clientConnectorData) && clientConnectorData.value.configurationJson) {
-            this.setFormValue(clientConnectorData.value);
-          }
-        }
-      }
     });
     this.inactiveConnectorsDataSource.loadAttributes(this.device, AttributeScope.SHARED_SCOPE, this.pageLink, reload).subscribe(data => {
       this.sharedAttributeData = data.data.filter(value => this.activeConnectors.includes(value.key));
@@ -723,4 +714,18 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     this.connectorForm.patchValue(connector, {emitEvent: false});
     this.connectorForm.markAsPristine();
   }
+
+  private setClientData(data: PageData<AttributeData>): void {
+    if (this.initialConnector) {
+      const clientConnectorData = data.data.find(attr => attr.key === this.initialConnector.name);
+      if (clientConnectorData) {
+        clientConnectorData.value = typeof clientConnectorData.value === 'string' ?
+          JSON.parse(clientConnectorData.value) : clientConnectorData.value;
+
+        if (this.isConnectorSynced(clientConnectorData) && clientConnectorData.value.configurationJson) {
+          this.setFormValue(clientConnectorData.value);
+        }
+      }
+    }
+  }
 }