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 { I18n } from '@ngx-translate/i18n-polyfill';
   4 import { Subscription } from 'rxjs';
   5
   6 import { RbdMirroringService } from '../../../../shared/api/rbd-mirroring.service';
   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   constructor(private rbdMirroringService: RbdMirroringService, private i18n: I18n) {}
  37
  38   ngOnInit() {
  39     this.image_error.columns = [
  40       { prop: 'pool_name', name: this.i18n('Pool'), flexGrow: 2 },
  41       { prop: 'name', name: this.i18n('Image'), flexGrow: 2 },
  42       { prop: 'description', name: this.i18n('Issue'), flexGrow: 4 },
  43       {
  44         prop: 'state',
  45         name: this.i18n('State'),
  46         cellTemplate: this.stateTmpl,
  47         flexGrow: 1
  48       }
  49     ];
  50
  51     this.image_syncing.columns = [
  52       { prop: 'pool_name', name: this.i18n('Pool'), flexGrow: 2 },
  53       { prop: 'name', name: this.i18n('Image'), flexGrow: 2 },
  54       {
  55         prop: 'progress',
  56         name: this.i18n('Progress'),
  57         cellTemplate: this.progressTmpl,
  58         flexGrow: 2
  59       },
  60       {
  61         prop: 'state',
  62         name: this.i18n('State'),
  63         cellTemplate: this.syncTmpl,
  64         flexGrow: 1
  65       }
  66     ];
  67
  68     this.image_ready.columns = [
  69       { prop: 'pool_name', name: this.i18n('Pool'), flexGrow: 2 },
  70       { prop: 'name', name: this.i18n('Image'), flexGrow: 2 },
  71       { prop: 'description', name: this.i18n('Description'), flexGrow: 4 },
  72       {
  73         prop: 'state',
  74         name: this.i18n('State'),
  75         cellTemplate: this.stateTmpl,
  76         flexGrow: 1
  77       }
  78     ];
  79
  80     this.subs = this.rbdMirroringService.subscribeSummary((data: any) => {
  81       if (!data) {
  82         return;
  83       }
  84       this.image_error.data = data.content_data.image_error;
  85       this.image_syncing.data = data.content_data.image_syncing;
  86       this.image_ready.data = data.content_data.image_ready;
  87     });
  88   }
  89
  90   ngOnDestroy(): void {
  91     this.subs.unsubscribe();
  92   }
  93
  94   refresh() {
  95     this.rbdMirroringService.refresh();
  96   }
  97 }