PR changes

apps/frontend/src/app/backups-overview/backups/backups/backups.component.html

@@ -35,8 +35,8 @@ <h1 class="header">Backups Overview</h1>
   </div>
 </div>
 
-<div>
-  <app-data-stores></app-data-stores>
+<div class="clr-row">
+  <app-data-stores class="clr-col-12"></app-data-stores>
 </div>
 
 <div class="clr-row">

apps/frontend/src/app/data-stores/component/data-stores.component.html

@@ -3,7 +3,8 @@
     <span class="data-store-name">Data Stores</span>
   </div>
   <div class="card-body">
-    <div *ngFor="let dataStore of (showAll ? dataStores : dataStores.slice(0, 5))" class="data-store">
+    <div *ngFor="let dataStore of (showAll ? (dataStores$ | async) : (dataStores$ | async)?.slice(0, 5))"
+         class="data-store">
       <span class="data-store-name">{{ dataStore.displayName }}</span>
       <div class="progress-bar-container">
         <clr-progress-bar
@@ -15,11 +16,11 @@
         <div class="high-water-mark" [style.left.%]="getHighWaterMarkPercentage(dataStore)"></div>
       </div>
     </div>
-    <button *ngIf="dataStores.length > 5" class="show-more-btn" (click)="toggleShowAll()">
-      {{ showAll ? 'Weniger anzeigen' : 'Mehr anzeigen' }}
+    <button *ngIf="((dataStores$ | async)?.length ?? 0) > 5" class="show-more-btn" (click)="toggleShowAll()">
+      {{ showAll ? 'Show less' : 'Show all' }}
     </button>
   </div>
   <div class="card-footer">
-    {{ dataStores.length }} Data Stores are being monitored.
+    {{ (dataStores$ | async)?.length }} Data Stores are being monitored.
   </div>
 </div>

apps/frontend/src/app/data-stores/component/data-stores.component.spec.ts

@@ -4,6 +4,23 @@ import { randomUUID } from 'crypto';
 import { DataStoresComponent } from './data-stores.component';
 import { DataStore } from '../../shared/types/data-store';
 
+const dataStores: DataStore[] = [
+  {
+    id: randomUUID().toString(),
+    displayName: 'test',
+    capacity: 100,
+    filled: 50,
+    highWaterMark: 80,
+  },
+  {
+    id: randomUUID().toString(),
+    displayName: 'test2',
+    capacity: 100,
+    filled: 80,
+    highWaterMark: 80,
+  },
+];
+
 describe('DataStoresComponent', () => {
   let component: DataStoresComponent;
   let mockDataStoresService: {
@@ -12,37 +29,19 @@ describe('DataStoresComponent', () => {
 
   beforeEach(() => {
     mockDataStoresService = {
-      getAllDataStores: vi.fn(),
+      getAllDataStores: vi.fn().mockReturnValue(of(dataStores)),
     };
 
     component = new DataStoresComponent(mockDataStoresService as any);
   });
 
-  describe('loadDataStores', () => {
-    it('should load data stores correctly', () => {
-      const dataStores: DataStore[] = [
-        {
-          id: randomUUID().toString(),
-          displayName: 'test',
-          capacity: 100,
-          filled: 50,
-          highWaterMark: 80,
-        },
-        {
-          id: randomUUID().toString(),
-          displayName: 'test2',
-          capacity: 100,
-          filled: 80,
-          highWaterMark: 80,
-        },
-      ];
-
+  describe('dataStores$', () => {
+    it('should load data stores correctly', (done) => {
       mockDataStoresService.getAllDataStores.mockReturnValue(of(dataStores));
 
-      component.loadDataStores();
-
-      expect(component.dataStores).toEqual(dataStores);
-      expect(component.showAll).toBeFalsy();
+      component.dataStores$.subscribe((result) => {
+        expect(result).toEqual(dataStores);
+      });
     });
   });
 

apps/frontend/src/app/data-stores/component/data-stores.component.ts

@@ -1,22 +1,25 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { DataStoresService } from '../service/data-stores-service.service';
-import { Subject, takeUntil } from 'rxjs';
+import { map, Observable, shareReplay, Subject, takeUntil } from 'rxjs';
 import { DataStore } from '../../shared/types/data-store';
 
 @Component({
   selector: 'app-data-stores',
   templateUrl: './data-stores.component.html',
   styleUrl: './data-stores.component.css',
 })
-export class DataStoresComponent implements OnInit, OnDestroy {
+export class DataStoresComponent implements OnDestroy {
   private readonly destroy$ = new Subject<void>();
-  dataStores: DataStore[] = [];
-  showAll = false;
+  dataStores$: Observable<DataStore[]>;
 
-  constructor(private readonly dataStoresService: DataStoresService) {}
+  showAll = false;
 
-  ngOnInit(): void {
-    this.loadDataStores();
+  constructor(private readonly dataStoresService: DataStoresService) {
+    this.dataStores$ = this.dataStoresService
+      .getAllDataStores()
+      .pipe(takeUntil(this.destroy$),
+        map(dataStores => this.sortDataStores(dataStores)),
+        shareReplay(1));
   }
 
   ngOnDestroy(): void {
@@ -40,14 +43,7 @@ export class DataStoresComponent implements OnInit, OnDestroy {
     this.showAll = !this.showAll;
   }
 
-  loadDataStores() {
-    this.dataStoresService
-      .getAllDataStores()
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((dataStores) => {
-        this.dataStores = dataStores.sort(
-          (a, b) => this.getFilledPercentage(b) - this.getFilledPercentage(a)
-        );
-      });
+  private sortDataStores(dataStores: DataStore[]): DataStore[] {
+    return dataStores.sort((a, b) => this.getFilledPercentage(b) - this.getFilledPercentage(a));
   }
 }