fixed flicker of table content on hardware images locations views

Author: RINO767

src/app/components/clouds/cloud-view/cloud-view.component.html

@@ -25,13 +25,13 @@ <h2 class="subtitle">
   <div class="columns">
     <!-- hardware table -->
     <div class="column">
-      <div class="title is-4"
+      <div class="title is-4 is-clickable"
            [routerLink]="['/hardware']"
            [queryParams]="{ cloud: cloud? cloud.id: null}">
         Hardware
       </div>
       <div class="table-container card">
-        <table cdk-table class="table is-fullwidth is-striped is-hoverable" *ngIf="hardwareDataSource"
+        <table cdk-table class="table is-fullwidth is-striped is-hoverable is-clickable" *ngIf="hardwareDataSource"
                [dataSource]="hardwareDataSource.value">
 
           <!-- Name Definition -->
@@ -79,9 +79,10 @@ <h2 class="subtitle">
     <div class="column">
       <div class="title is-4"
            [routerLink]="['/images']"
-           [queryParams]="{ cloud: cloud? cloud.id: null}">Images</div>
+           [queryParams]="{ cloud: cloud? cloud.id: null}">Images
+      </div>
       <div class="table-container card">
-        <table cdk-table class="table is-fullwidth is-striped is-hoverable" *ngIf="imagesDataSource"
+        <table cdk-table class="table is-fullwidth is-striped is-hoverable is-clickable" *ngIf="imagesDataSource"
                [dataSource]="imagesDataSource.value">
 
           <!-- Name Definition -->
@@ -97,7 +98,9 @@ <h2 class="subtitle">
             <th cdk-header-cell *cdkHeaderCellDef class="is-unselectable">
               OS
             </th>
-            <td cdk-cell *cdkCellDef="let row"> {{row.operatingSystem ? row.operatingSystem.operatingSystemFamily : ''}}</td>
+            <td cdk-cell *cdkCellDef="let row"> {{row.operatingSystem ? row.operatingSystem.operatingSystemFamily :
+              ''}}
+            </td>
           </ng-container>
 
           <!-- Header and Row Declarations -->

src/app/components/hardware/hardware-overview/hardware-overview.component.html

@@ -18,7 +18,7 @@ <h1 class="title">Hardware</h1>
       </span>
     </p>
 
-    <table cdk-table class="table card is-fullwidth is-striped is-hoverable" [dataSource]="dataSource.value">
+    <table cdk-table class="table card is-fullwidth is-striped is-hoverable is-clickable" [dataSource]="dataSource.value">
 
       <!-- Name Definition -->
       <ng-container cdkColumnDef="name">

src/app/components/hardware/hardware-overview/hardware-overview.component.scss

@@ -1,4 +1,3 @@
 .table {
   margin: 5px 0 0 0;
-  cursor: default;
 }

src/app/components/hardware/hardware-overview/hardware-overview.component.ts

@@ -1,5 +1,5 @@
-import {Component, OnInit} from '@angular/core';
-import {BehaviorSubject, combineLatest} from 'rxjs';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {BehaviorSubject, combineLatest, Subscription} from 'rxjs';
 import {Hardware} from 'cloudiator-rest-api';
 import {CloudDataService} from '../../../services/cloud-data.service';
 import {FormControl} from '@angular/forms';
@@ -10,20 +10,23 @@ import {ActivatedRoute} from '@angular/router';
   templateUrl: './hardware-overview.component.html',
   styleUrls: ['./hardware-overview.component.scss']
 })
-export class HardwareOverviewComponent implements OnInit {
+export class HardwareOverviewComponent implements OnInit, OnDestroy {
 
-  dataSource: BehaviorSubject<Hardware[]>;
+  dataSource = new BehaviorSubject<Hardware[]>([]);
 
   searchFormControl = new FormControl();
 
   sortKey = new BehaviorSubject<string>('');
   sortDirection = new BehaviorSubject<string>('');
 
+  subscriptions: Subscription[] = [];
+
   constructor(private activatedRoute: ActivatedRoute,
               public cloudDataService: CloudDataService) {
   }
 
   ngOnInit() {
+    this.adjustSort('cores');
 
     combineLatest(this.cloudDataService.findHardware(), this.searchFormControl.valueChanges, this.sortKey, this.sortDirection)
       .subscribe(([changedHardwareData, searchTerm, sortKey, sortDirection]) => {
@@ -50,12 +53,6 @@ export class HardwareOverviewComponent implements OnInit {
         this.dataSource.next(sortedHardware);
       });
 
-
-    this.cloudDataService.findHardware().subscribe(hardware => {
-      this.dataSource = new BehaviorSubject<Hardware[]>(hardware);
-      this.adjustSort('cores');
-    });
-
     this.searchFormControl.setValue('');
 
 
@@ -68,6 +65,10 @@ export class HardwareOverviewComponent implements OnInit {
     });
   }
 
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(s => s.unsubscribe());
+  }
+
   adjustSort(key: string) {
     if (this.sortKey.value === key) {
       if (this.sortDirection.value === 'asc') {

src/app/components/images/images-overview/images-overview.component.html

@@ -18,7 +18,7 @@ <h1 class="title">Images</h1>
       </span>
     </p>
 
-    <table cdk-table class="table card is-fullwidth is-striped is-hoverable" [dataSource]="dataSource.value">
+    <table cdk-table class="table card is-fullwidth is-striped is-hoverable is-clickable" [dataSource]="dataSource.value">
 
       <!-- Name Definition -->
       <ng-container cdkColumnDef="name">

src/app/components/images/images-overview/images-overview.component.scss

@@ -1,4 +1,3 @@
 .table {
   margin: 5px 0 0 0;
-  cursor: default;
 }

src/app/components/images/images-overview/images-overview.component.ts

@@ -12,7 +12,7 @@ import {ActivatedRoute} from '@angular/router';
 })
 export class ImagesOverviewComponent implements OnInit {
 
-  dataSource: BehaviorSubject<Image[]>;
+  dataSource = new BehaviorSubject<Image[]>([]);
 
   searchFormControl = new FormControl();
 
@@ -23,6 +23,7 @@ export class ImagesOverviewComponent implements OnInit {
     public cloudDataService: CloudDataService) { }
 
   ngOnInit() {
+    this.adjustSort('name');
 
     combineLatest(this.cloudDataService.findImages(), this.searchFormControl.valueChanges, this.sortKey, this.sortDirection)
       .subscribe(([changedHardwareData, searchTerm, sortKey, sortDirection]) => {
@@ -50,12 +51,6 @@ export class ImagesOverviewComponent implements OnInit {
       });
 
 
-    this.cloudDataService.findImages().subscribe(images => {
-      this.dataSource = new BehaviorSubject<Image[]>(images);
-      this.adjustSort('name');
-    });
-
-
     this.searchFormControl.setValue('');
 
 

src/app/components/locations/locations-overview/locations-overview.component.html

@@ -18,7 +18,7 @@ <h1 class="title">Locations</h1>
       </span>
     </p>
 
-    <table cdk-table class="table card is-fullwidth is-striped is-hoverable" [dataSource]="dataSource.value">
+    <table cdk-table class="table card is-fullwidth is-striped is-hoverable is-clickable" [dataSource]="dataSource.value">
 
       <!-- Name Definition -->
       <ng-container cdkColumnDef="name">

src/app/components/locations/locations-overview/locations-overview.component.scss

@@ -1,4 +1,3 @@
 .table {
   margin: 5px 0 0 0;
-  cursor: default;
 }

src/app/components/locations/locations-overview/locations-overview.component.ts

@@ -11,7 +11,7 @@ import {CloudDataService} from '../../../services/cloud-data.service';
 })
 export class LocationsOverviewComponent implements OnInit {
 
-  dataSource: BehaviorSubject<Location[]>;
+  dataSource = new BehaviorSubject<Location[]>([]);
 
   searchFormControl = new FormControl();
 
@@ -22,6 +22,7 @@ export class LocationsOverviewComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.adjustSort('name');
 
     combineLatest(this.cloudDataService.findLocations(), this.searchFormControl.valueChanges, this.sortKey, this.sortDirection)
       .subscribe(([changedHardwareData, searchTerm, sortKey, sortDirection]) => {
@@ -48,13 +49,6 @@ export class LocationsOverviewComponent implements OnInit {
         this.dataSource.next(sortedLocations);
       });
 
-
-    this.cloudDataService.findLocations().subscribe(locations => {
-      this.dataSource = new BehaviorSubject<Location[]>(locations);
-      this.adjustSort('cores');
-    });
-
-
     this.searchFormControl.setValue('');
   }