add clustername on backup details

Author: peschmae

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

@@ -16,6 +16,7 @@ import {Component, OnDestroy, OnInit} from '@angular/core';
 import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {ActivatedRoute, Router} from '@angular/router';
 import {getBackupHealthStatus, HealthStatus} from '@app/shared/utils/health-status';
+import {ClusterService} from '@core/services/cluster';
 import {BackupService} from '@core/services/backup';
 import {ProjectService} from '@core/services/project';
 import {UserService} from '@core/services/user';
@@ -29,6 +30,7 @@ import {MemberUtils, Permission} from '@shared/utils/member';
 import _ from 'lodash';
 import {Subject} from 'rxjs';
 import {filter, map, switchMap, take, takeUntil} from 'rxjs/operators';
+import { Cluster } from '@app/shared/entity/cluster';
 
 @Component({
   selector: 'km-automatic-backup-details',
@@ -43,7 +45,7 @@ export class AutomaticBackupDetailsComponent implements OnInit, OnDestroy {
   selectedProject = {} as Project;
   isInitialized = false;
   backup: EtcdBackupConfig = {} as EtcdBackupConfig;
-
+  cluster: Cluster;
   get canDelete(): boolean {
     return MemberUtils.hasPermission(this._user, this._currentGroupConfig, View.Backups, Permission.Delete);
   }
@@ -57,6 +59,7 @@ export class AutomaticBackupDetailsComponent implements OnInit, OnDestroy {
   }
 
   constructor(
+    private readonly _clusterService: ClusterService,
     private readonly _backupService: BackupService,
     private readonly _projectService: ProjectService,
     private readonly _userService: UserService,
@@ -90,6 +93,13 @@ export class AutomaticBackupDetailsComponent implements OnInit, OnDestroy {
         this.backup = backup;
         this.isInitialized = true;
       });
+
+    this._projectService.selectedProject
+      .pipe(switchMap(project => this._clusterService.clusters(project.id, false)))
+      .pipe(takeUntil(this._unsubscribe))
+      .subscribe(clusters => {
+        this.cluster = clusters.find(cluster => cluster.id === this.backup.spec.clusterId);
+      });
   }
 
   ngOnDestroy(): void {
@@ -101,6 +111,10 @@ export class AutomaticBackupDetailsComponent implements OnInit, OnDestroy {
     this._router.navigate(['/projects/' + this.selectedProject.id + '/backups']);
   }
 
+  getClusterName(): string {
+    return this.cluster?.name;
+  }
+
   delete(backup: EtcdBackupConfig): void {
     const config: MatDialogConfig = {
       data: {

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

@@ -54,6 +54,10 @@
     </div>
   </mat-card-header>
   <mat-card-content fxLayout="row">
+    <km-property>
+      <div key>Cluster Name</div>
+      <div value>{{getClusterName()}}</div>
+    </km-property>
     <km-property>
       <div key>Cluster ID</div>
       <div value>{{backup.spec?.clusterId}}</div>

modules/web/src/app/backup/details/snapshot/component.ts

@@ -19,6 +19,7 @@ import {
   DeleteSnapshotDialogComponent,
   DeleteSnapshotDialogConfig,
 } from '@app/backup/list/snapshot/delete-dialog/component';
+import {ClusterService} from '@core/services/cluster';
 import {BackupService} from '@core/services/backup';
 import {ProjectService} from '@core/services/project';
 import {UserService} from '@core/services/user';
@@ -28,9 +29,10 @@ import {Member} from '@shared/entity/member';
 import {Project} from '@shared/entity/project';
 import {GroupConfig} from '@shared/model/Config';
 import {MemberUtils, Permission} from '@shared/utils/member';
-import {Subject} from 'rxjs';
+import {Observable, Subject} from 'rxjs';
 import {filter, map, switchMap, take, takeUntil} from 'rxjs/operators';
 import {getBackupHealthStatus, HealthStatus} from '@shared/utils/health-status';
+import { Cluster } from '@app/shared/entity/cluster';
 
 @Component({
   selector: 'km-snapshot-details',
@@ -45,7 +47,7 @@ export class SnapshotDetailsComponent implements OnInit, OnDestroy {
   selectedProject = {} as Project;
   isInitialized = false;
   backup: EtcdBackupConfig = {} as EtcdBackupConfig;
-
+  cluster: Cluster;
   get canDelete(): boolean {
     return MemberUtils.hasPermission(this._user, this._currentGroupConfig, View.Backups, Permission.Delete);
   }
@@ -59,6 +61,7 @@ export class SnapshotDetailsComponent implements OnInit, OnDestroy {
   }
 
   constructor(
+    private readonly _clusterService: ClusterService,
     private readonly _backupService: BackupService,
     private readonly _projectService: ProjectService,
     private readonly _userService: UserService,
@@ -92,6 +95,13 @@ export class SnapshotDetailsComponent implements OnInit, OnDestroy {
         this.backup = backup;
         this.isInitialized = true;
       });
+
+    this._projectService.selectedProject
+      .pipe(switchMap(project => this._clusterService.clusters(project.id, false)))
+      .pipe(takeUntil(this._unsubscribe))
+      .subscribe(clusters => {
+        this.cluster = clusters.find(cluster => cluster.id === this.backup.spec.clusterId);
+      });
   }
 
   ngOnDestroy(): void {
@@ -108,6 +118,10 @@ export class SnapshotDetailsComponent implements OnInit, OnDestroy {
     return getBackupHealthStatus(backup, condition);
   }
 
+  getClusterName(): string {
+    return this.cluster?.name;
+  }
+
   delete(backup: EtcdBackupConfig): void {
     const config: MatDialogConfig = {
       data: {

modules/web/src/app/backup/details/snapshot/template.html

@@ -47,6 +47,10 @@
     </mat-card-title>
   </mat-card-header>
   <mat-card-content fxLayout="row">
+    <km-property>
+      <div key>Cluster Name</div>
+      <div value>{{getClusterName()}}</div>
+    </km-property>
     <km-property>
       <div key>Cluster ID</div>
       <div value>{{backup.spec?.clusterId}}</div>