From 2cf6de81c0227aea231e06fbb89b3f90b1278c39 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 1 Dec 2020 10:16:58 +0200
Subject: [PATCH] UI: Added trackBy in table widget

---
 .../widget/lib/alarms-table-widget.component.html    |  6 +++---
 .../widget/lib/alarms-table-widget.component.ts      |  8 ++++++--
 .../widget/lib/entities-table-widget.component.html  |  6 +++---
 .../widget/lib/entities-table-widget.component.ts    |  8 ++++++--
 .../lib/timeseries-table-widget.component.html       |  8 ++++----
 .../widget/lib/timeseries-table-widget.component.ts  | 12 ++++++++++--
 6 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
index d269fbbe92..54ddd6fc80 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
@@ -61,7 +61,7 @@
       </div>
     </mat-toolbar>
     <div fxFlex class="table-container">
-      <table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByRowIndex"
+      <table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByAlarmId"
                  matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
           <mat-header-cell *matHeaderCellDef style="width: 30px;">
@@ -96,7 +96,7 @@
                                                                 width: (actionCellDescriptors.length * 40) + 'px' }">
             <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
               <button mat-button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
-                      *ngFor="let actionDescriptor of actionCellDescriptors"
+                      *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId"
                       matTooltip="{{ actionDescriptor.displayName }}"
                       matTooltipPosition="above"
                       (click)="onActionButtonClick($event, alarm, actionDescriptor)">
@@ -110,7 +110,7 @@
                 <mat-icon class="material-icons">more_vert</mat-icon>
               </button>
               <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                <button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors"
+                <button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId"
                         [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
                         (click)="onActionButtonClick($event, alarm, actionDescriptor)">
                   <mat-icon>{{actionDescriptor.icon}}</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
index 3e4b37dc79..75d0b24485 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
@@ -563,8 +563,12 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     return column.def;
   }
 
-  public trackByRowIndex(index: number) {
-    return index;
+  public trackByAlarmId(index: number, alarm: AlarmData) {
+    return alarm.id.id;
+  }
+
+  public trackByActionCellDescriptionId(index: number, action: WidgetActionDescriptor) {
+    return action.id;
   }
 
   public headerStyle(key: EntityColumn): any {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
index 2eb4b372b9..5d2100a71d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
@@ -38,7 +38,7 @@
       </div>
     </mat-toolbar>
     <div fxFlex class="table-container">
-      <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByRowIndex"
+      <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByEntityId"
                  matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
         <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; trackBy: trackByColumnDef;">
           <mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header> {{ column.title }} </mat-header-cell>
@@ -57,7 +57,7 @@
                                                                 width: (actionCellDescriptors.length * 40) + 'px' }">
             <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
               <button mat-button mat-icon-button [disabled]="isLoading$ | async"
-                      *ngFor="let actionDescriptor of actionCellDescriptors"
+                      *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId"
                       matTooltip="{{ actionDescriptor.displayName }}"
                       matTooltipPosition="above"
                       (click)="onActionButtonClick($event, entity, actionDescriptor)">
@@ -71,7 +71,7 @@
                 <mat-icon class="material-icons">more_vert</mat-icon>
               </button>
               <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                <button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors"
+                <button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId"
                         [disabled]="isLoading$ | async"
                         (click)="onActionButtonClick($event, entity, actionDescriptor)">
                   <mat-icon>{{actionDescriptor.icon}}</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
index b9791b5ae9..6254b89c75 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
@@ -486,8 +486,12 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     return column.def;
   }
 
-  public trackByRowIndex(index: number) {
-    return index;
+  public trackByEntityId(index: number, entity: EntityData) {
+    return entity.id.id;
+  }
+
+  public trackByActionCellDescriptionId(index: number, action: WidgetActionDescriptor) {
+    return action.id;
   }
 
   public headerStyle(key: EntityColumn): any {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
index 96335a3053..85a73027ff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
@@ -39,9 +39,9 @@
     </mat-toolbar>
     <mat-tab-group [ngClass]="{'tb-headless': sources.length === 1}" fxFlex
                    [(selectedIndex)]="sourceIndex" (selectedIndexChange)="onSourceIndexChanged()">
-      <mat-tab *ngFor="let source of sources" label="{{ source.datasource.name }}">
+      <mat-tab *ngFor="let source of sources; trackBy: trackBySourcesIndex" label="{{ source.datasource.name }}">
         <div fxFlex class="table-container">
-          <table mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowIndex"
+          <table mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowTimestamp"
                      matSort [matSortActive]="source.pageLink.sortOrder.property" [matSortDirection]="source.pageLink.sortDirection()" matSortDisableClear>
             <ng-container *ngIf="showTimestamp" [matColumnDef]="'0'">
               <mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</mat-header-cell>
@@ -67,7 +67,7 @@
                                                                 width: (actionCellDescriptors.length * 40) + 'px' }">
                 <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
                   <button mat-button mat-icon-button [disabled]="isLoading$ | async"
-                          *ngFor="let actionDescriptor of actionCellDescriptors"
+                          *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId"
                           matTooltip="{{ actionDescriptor.displayName }}"
                           matTooltipPosition="above"
                           (click)="onActionButtonClick($event, row, actionDescriptor)">
@@ -81,7 +81,7 @@
                     <mat-icon class="material-icons">more_vert</mat-icon>
                   </button>
                   <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                    <button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors"
+                    <button mat-menu-item *ngFor="let actionDescriptor of actionCellDescriptors; trackBy: trackByActionCellDescriptionId"
                             [disabled]="isLoading$ | async"
                             (click)="onActionButtonClick($event, row, actionDescriptor)">
                       <mat-icon>{{actionDescriptor.icon}}</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
index 1b820ab722..a317337a79 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
@@ -366,8 +366,16 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
     return header.index;
   }
 
-  public trackByRowIndex(index: number) {
-    return index;
+  public trackByRowTimestamp(index: number, row: TimeseriesRow) {
+    return row[0];
+  }
+
+  public trackByActionCellDescriptionId(index: number, action: WidgetActionDescriptor) {
+    return action.id;
+  }
+
+  public trackBySourcesIndex(index: number, source: TimeseriesTableSource) {
+    return source.datasource.entityId;
   }
 
   public cellStyle(source: TimeseriesTableSource, index: number, value: any): any {