UI: Add loading bar home overview. Improve tables column tracking.

thingsboard · Jan 29, 2025 · fdeae2b · fdeae2b
1 parent 4cca203
commit fdeae2b
Show file tree

Hide file tree

Showing 11 changed files with 21 additions and 37 deletions.
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table-home.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table-home.component.html
@@ -86,7 +86,7 @@
         </mat-checkbox>
       </mat-cell>
     </ng-container>
-    @for (column of entityColumns; track trackByColumnKey(column)) {
+    @for (column of entityColumns; track column.key) {
       <ng-container [matColumnDef]="column.key">
         <mat-header-cell [class.mat-number-cell]="column.isNumberColumn"
           *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
@@ -124,7 +124,7 @@
         </mat-cell>
       </ng-container>
     }
-    @for (column of actionColumns; track trackByColumnKey(column)) {
+    @for (column of actionColumns; track column.key) {
       <ng-container [matColumnDef]="column.key">
         <mat-header-cell *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
         <mat-cell *matCellDef="let entity; let row = index"

diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table-home.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table-home.component.ts
@@ -583,10 +583,6 @@ export class EntitiesTableHomeComponent extends PageComponent implements AfterVi
     return res;
   }
 
-  trackByColumnKey(column: EntityColumn<BaseData>) {
-    return column.key;
-  }
-
   calcTableHeight(): string {
     return this.breakpointObserver.isMatched(MediaBreakpoints['gt-xxl']) ? '300px' : '150px';
   }

diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table-ws.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table-ws.component.html
@@ -32,7 +32,7 @@
       </mat-checkbox>
     </mat-cell>
   </ng-container>
-  @for (column of entityColumns; track trackByColumnKey(column)) {
+  @for (column of entityColumns; track column.key) {
     <ng-container [matColumnDef]="column.key" sticky>
       <mat-header-cell [class.mat-number-cell]="column.isNumberColumn"
         *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
@@ -70,7 +70,7 @@
       </mat-cell>
     </ng-container>
   }
-  @for (column of actionColumns; track trackByColumnKey(column)) {
+  @for (column of actionColumns; track column.key) {
     <ng-container [matColumnDef]="column.key" sticky>
       <mat-header-cell *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
       <mat-cell *matCellDef="let entity; let row = index"

diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table-ws.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table-ws.component.ts
@@ -401,10 +401,6 @@ export class EntitiesTableWsComponent extends PageComponent implements AfterView
     return res;
   }
 
-  trackByColumnKey(column: EntityColumn<BaseData>) {
-    return column.key;
-  }
-
   private calcDefaultPageSize(): number {
     if (this.breakpointObserver.isMatched(MediaBreakpoints['gt-xxl'])) {
       return 15;

diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@@ -189,7 +189,7 @@
                 </mat-checkbox>
               </mat-cell>
             </ng-container>
-            @for (column of entityColumns; track trackByColumnKey) {
+            @for (column of entityColumns; track column.key) {
               <ng-container [matColumnDef]="column.key">
                 <mat-header-cell [class.mat-number-cell]="column.isNumberColumn"
                                  *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
@@ -231,7 +231,7 @@
                 </mat-cell>
               </ng-container>
             }
-            @for (column of chipsColumns; track trackByColumnKey(column)) {
+            @for (column of chipsColumns; track column.key) {
               <ng-container [matColumnDef]="column.key">
                 <mat-header-cell
                   *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
@@ -257,7 +257,7 @@
                 </mat-cell>
               </ng-container>
             }
-            @for (column of actionColumns; track trackByColumnKey(column)) {
+            @for (column of actionColumns; track column.key) {
               <ng-container [matColumnDef]="column.key">
                 <mat-header-cell *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
                 <mat-cell *matCellDef="let entity; let row = index"

diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
@@ -676,8 +676,4 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
     }
     return res;
   }
-
-  trackByColumnKey(column: EntityColumn<BaseData>) {
-    return column.key;
-  }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/home-overview/home-overview.component.html b/ui-ngx/src/app/modules/home/pages/home-overview/home-overview.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-home-overview flex flex-row gap-3 lt-lg:flex-col">
-    <div class="flex max-w-70% flex-col gap-3">
+  <div class="flex max-w-70% flex-col gap-3">
     @defer {
       <tb-home-charts></tb-home-charts>
     }

diff --git a/ui-ngx/src/app/modules/home/pages/home-overview/home-overview.component.ts b/ui-ngx/src/app/modules/home/pages/home-overview/home-overview.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, ChangeDetectorRef, Component } from '@angular/core';
+import { Component } from '@angular/core';
 import { HomeChartsComponent } from '../../components/home-charts/home-charts.component';
 import { HomeCardsSessionsCredentialsComponent } from '../../components/home-cards-sessions-credentials/home-cards-sessions-credentials.component';
 import { CardConfigComponent } from '../../components/card-config/card-config.component';
@@ -23,19 +23,19 @@ import { KafkaTablesTabGroupComponent } from '../../components/kafka-tables/kafk
 import { GettingStartedHomeComponent } from '../../components/getting-started/getting-started-home.component';
 import { QuickLinksComponent } from '../../components/quick-links/quick-links.component';
 import { VersionCardComponent } from '../../components/version-card/version-card.component';
+import { PageComponent } from '@shared/components/page.component';
+import { AppState } from '@core/core.state';
+import { Store } from '@ngrx/store';
 
 @Component({
     selector: 'tb-home-overview',
     templateUrl: './home-overview.component.html',
     styleUrls: ['./home-overview.component.scss'],
     imports: [HomeChartsComponent, HomeCardsSessionsCredentialsComponent, CardConfigComponent, KafkaBrokersHomeTableComponent, KafkaTablesTabGroupComponent, GettingStartedHomeComponent, QuickLinksComponent, VersionCardComponent]
 })
-export class HomeOverviewComponent implements AfterViewInit {
+export class HomeOverviewComponent extends PageComponent {
 
-  constructor(private cd: ChangeDetectorRef) {
-  }
-
-  ngAfterViewInit(): void {
-    this.cd.detectChanges();
+  constructor(protected store: Store<AppState>) {
+    super(store);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/ws-client/ws-client.component.html b/ui-ngx/src/app/modules/home/pages/ws-client/ws-client.component.html
@@ -18,17 +18,17 @@
 @if ((connections | async)?.length) {
   <ng-container *ngTemplateOutlet="hasConnections"></ng-container>
 } @else {
-  @defer {
-    <section style="width: 100%; height: 100%;">
+  <section style="width: 100%; height: 100%;">
+    @if ((isLoading$ | async) === false) {
       <div class="add-connection-container">
         <button class="add-connection-btn flex flex-1 items-center justify-start"
                 (click)="addConnection($event)">
           <mat-icon class="mat-icon tb-mat-64">add</mat-icon>
           <span translate>ws-client.connections.add-connection</span>
         </button>
       </div>
-    </section>
-  }
+    }
+  </section>
 }
 
 <ng-template #hasConnections>

diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.html b/ui-ngx/src/app/shared/components/breadcrumb.component.html
@@ -23,7 +23,7 @@ <h1 class="flex gt-sm:!hidden">
       : (breadcrumb.label | translate) }}
     </h1>
   }
-  @for (breadcrumb of breadcrumbs$ | async; track trackByBreadcrumbs; let isLast = $last) {
+  @for (breadcrumb of breadcrumbs$ | async; track breadcrumb.id; let isLast = $last) {
     <span class="flex lt-md:!hidden">
       @switch (isLast) {
         @case (false) {

diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.ts b/ui-ngx/src/app/shared/components/breadcrumb.component.ts
@@ -18,7 +18,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { BehaviorSubject, Subject, Subscription } from 'rxjs';
 import { BreadCrumb, BreadCrumbConfig } from './breadcrumb';
 import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router, RouterLink } from '@angular/router';
-import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators';
+import { distinctUntilChanged, filter, map } from 'rxjs/operators';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { guid } from '@core/utils';
 import { BroadcastService } from '@core/services/broadcast.service';
@@ -138,8 +138,4 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
     }
     return newBreadcrumbs;
   }
-
-  trackByBreadcrumbs(index: number, breadcrumb: BreadCrumb){
-    return breadcrumb.id;
-  }
 }