ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.ts

   1 import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
   2
   3 import { Subscription } from 'rxjs';
   4
   5 import { RbdMirroringService } from '~/app/shared/api/rbd-mirroring.service';
   6 import { TableStatusViewCache } from '~/app/shared/classes/table-status-view-cache';
   7
   8 @Component({
   9   selector: 'cd-mirroring-images',
  10   templateUrl: './image-list.component.html',
  11   styleUrls: ['./image-list.component.scss']
  12 })
  13 export class ImageListComponent implements OnInit, OnDestroy {
  14   @ViewChild('stateTmpl', { static: true })
  15   stateTmpl: TemplateRef<any>;
  16   @ViewChild('syncTmpl', { static: true })
  17   syncTmpl: TemplateRef<any>;
  18   @ViewChild('progressTmpl', { static: true })
  19   progressTmpl: TemplateRef<any>;
  20
  21   subs: Subscription;
  22
  23   image_error: Record<string, any> = {
  24     data: [],
  25     columns: {}
  26   };
  27   image_syncing: Record<string, any> = {
  28     data: [],
  29     columns: {}
  30   };
  31   image_ready: Record<string, any> = {
  32     data: [],
  33     columns: {}
  34   };
  35
  36   tableStatus = new TableStatusViewCache();
  37
  38   constructor(private rbdMirroringService: RbdMirroringService) {}
  39
  40   ngOnInit() {
  41     this.image_error.columns = [
  42       { prop: 'pool_name', name: $localize`Pool`, flexGrow: 2 },
  43       { prop: 'name', name: $localize`Image`, flexGrow: 2 },
  44       {
  45         prop: 'state',
  46         name: $localize`State`,
  47         cellTemplate: this.stateTmpl,
  48         flexGrow: 1
  49       },
  50       { prop: 'description', name: $localize`Issue`, flexGrow: 4 }
  51     ];
  52
  53     this.image_syncing.columns = [
  54       { prop: 'pool_name', name: $localize`Pool`, flexGrow: 2 },
  55       { prop: 'name', name: $localize`Image`, flexGrow: 2 },
  56       {
  57         prop: 'state',
  58         name: $localize`State`,
  59         cellTemplate: this.stateTmpl,
  60         flexGrow: 1
  61       },
  62       {
  63         prop: 'syncing_percent',
  64         name: $localize`Progress`,
  65         cellTemplate: this.progressTmpl,
  66         flexGrow: 2
  67       },
  68       { prop: 'bytes_per_second', name: $localize`Bytes per second`, flexGrow: 2 },
  69       { prop: 'entries_behind_primary', name: $localize`Entries behind primary`, flexGrow: 2 }
  70     ];
  71
  72     this.image_ready.columns = [
  73       { prop: 'pool_name', name: $localize`Pool`, flexGrow: 2 },
  74       { prop: 'name', name: $localize`Image`, flexGrow: 2 },
  75       {
  76         prop: 'state',
  77         name: $localize`State`,
  78         cellTemplate: this.stateTmpl,
  79         flexGrow: 1
  80       },
  81       { prop: 'description', name: $localize`Description`, flexGrow: 4 }
  82     ];
  83
  84     this.subs = this.rbdMirroringService.subscribeSummary((data) => {
  85       this.image_error.data = data.content_data.image_error;
  86       this.image_syncing.data = data.content_data.image_syncing;
  87       this.image_ready.data = data.content_data.image_ready;
  88       this.tableStatus = new TableStatusViewCache(data.status);
  89     });
  90   }
  91
  92   ngOnDestroy(): void {
  93     this.subs.unsubscribe();
  94   }
  95
  96   refresh() {
  97     this.rbdMirroringService.refresh();
  98   }
  99 }