Add clusterName to automatic backup list

Signed-off-by: Mathias Petermann <[email protected]>

Author: peschmae

modules/web/src/app/backup/list/automatic-backup/component.ts

@@ -22,6 +22,7 @@ import {
   AddAutomaticBackupDialogConfig,
 } from '@app/backup/list/automatic-backup/add-dialog/component';
 import {BackupService} from '@core/services/backup';
+import {ClusterService} from '@core/services/cluster';
 import {NotificationService} from '@core/services/notification';
 import {ProjectService} from '@core/services/project';
 import {UserService} from '@core/services/user';
@@ -49,6 +50,7 @@ export class AutomaticBackupListComponent implements OnInit, OnDestroy {
   private _currentGroupConfig: GroupConfig;
   private _selectedProject = {} as Project;
   private _backups = [];
+  private _clusters = [];
   dataSource = new MatTableDataSource<EtcdBackupConfig>();
   isInitialized = true;
 
@@ -57,7 +59,7 @@ export class AutomaticBackupListComponent implements OnInit, OnDestroy {
   }
 
   get columns(): string[] {
-    return ['status', 'name', 'cluster', 'destination', 'schedule', 'keep', 'created', 'actions'];
+    return ['status', 'name', 'clusterName', 'cluster', 'destination', 'schedule', 'keep', 'created', 'actions'];
   }
 
   get isEmpty(): boolean {
@@ -82,6 +84,7 @@ export class AutomaticBackupListComponent implements OnInit, OnDestroy {
 
   constructor(
     private readonly _backupService: BackupService,
+    private readonly _clusterService: ClusterService,
     private readonly _projectService: ProjectService,
     private readonly _userService: UserService,
     private readonly _matDialog: MatDialog,
@@ -116,6 +119,13 @@ export class AutomaticBackupListComponent implements OnInit, OnDestroy {
         this._backups = backups;
         this.dataSource.data = this._backups;
       });
+
+    this._projectService.selectedProject
+      .pipe(switchMap(project => this._clusterService.clusters(project.id, false)))
+      .pipe(takeUntil(this._unsubscribe))
+      .subscribe(clusters => {
+        this._clusters = clusters;
+      });
   }
 
   ngOnDestroy(): void {
@@ -136,6 +146,15 @@ export class AutomaticBackupListComponent implements OnInit, OnDestroy {
     return getBackupHealthStatus(backup, condition);
   }
 
+  getClusterName(backup: EtcdBackupConfig): string {
+    for (const cluster of this._clusters) {
+      if (cluster.id === backup.spec.clusterId) {
+        return cluster.name;
+      }
+    }
+    return 'N/A';
+  }
+
   delete(backup: EtcdBackupConfig): void {
     const config: MatDialogConfig = {
       data: {

modules/web/src/app/backup/list/automatic-backup/template.html

@@ -61,6 +61,17 @@
         </td>
       </ng-container>
 
+      <ng-container matColumnDef="clusterName">
+        <th mat-header-cell
+            *matHeaderCellDef
+            class="km-header-cell p-15">Cluster Name
+        </th>
+        <td mat-cell
+            *matCellDef="let element">
+          <span>{{getClusterName(element)}}</span>
+        </td>
+      </ng-container>
+
       <ng-container matColumnDef="cluster">
         <th mat-header-cell
             *matHeaderCellDef