File

src/app/ceph/block/mirroring/image-list/image-list.component.ts

Implements

OnInit OnDestroy

Metadata

selector cd-mirroring-images
styleUrls ./image-list.component.scss
templateUrl ./image-list.component.html

Index

Properties
Methods

Constructor

constructor(rbdMirroringService: RbdMirroringService, i18n: I18n)
Parameters :
Name Type Optional
rbdMirroringService RbdMirroringService No
i18n I18n No

Methods

ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
refresh
refresh()
Returns : void

Properties

image_error
Type : object
Default value : { data: [], columns: {} }
image_ready
Type : object
Default value : { data: [], columns: {} }
image_syncing
Type : object
Default value : { data: [], columns: {} }
progressTmpl
Type : TemplateRef<any>
Decorators :
@ViewChild('progressTmpl')
stateTmpl
Type : TemplateRef<any>
Decorators :
@ViewChild('stateTmpl')
subs
Type : Subscription
syncTmpl
Type : TemplateRef<any>
Decorators :
@ViewChild('syncTmpl')
import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';

import { I18n } from '@ngx-translate/i18n-polyfill';
import { Subscription } from 'rxjs';

import { RbdMirroringService } from '../../../../shared/api/rbd-mirroring.service';

@Component({
  selector: 'cd-mirroring-images',
  templateUrl: './image-list.component.html',
  styleUrls: ['./image-list.component.scss']
})
export class ImageListComponent implements OnInit, OnDestroy {
  @ViewChild('stateTmpl')
  stateTmpl: TemplateRef<any>;
  @ViewChild('syncTmpl')
  syncTmpl: TemplateRef<any>;
  @ViewChild('progressTmpl')
  progressTmpl: TemplateRef<any>;

  subs: Subscription;

  image_error = {
    data: [],
    columns: {}
  };
  image_syncing = {
    data: [],
    columns: {}
  };
  image_ready = {
    data: [],
    columns: {}
  };

  constructor(private rbdMirroringService: RbdMirroringService, private i18n: I18n) {}

  ngOnInit() {
    this.image_error.columns = [
      { prop: 'pool_name', name: this.i18n('Pool'), flexGrow: 2 },
      { prop: 'name', name: this.i18n('Image'), flexGrow: 2 },
      { prop: 'description', name: this.i18n('Issue'), flexGrow: 4 },
      {
        prop: 'state',
        name: this.i18n('State'),
        cellTemplate: this.stateTmpl,
        flexGrow: 1
      }
    ];

    this.image_syncing.columns = [
      { prop: 'pool_name', name: this.i18n('Pool'), flexGrow: 2 },
      { prop: 'name', name: this.i18n('Image'), flexGrow: 2 },
      {
        prop: 'progress',
        name: this.i18n('Progress'),
        cellTemplate: this.progressTmpl,
        flexGrow: 2
      },
      {
        prop: 'state',
        name: this.i18n('State'),
        cellTemplate: this.syncTmpl,
        flexGrow: 1
      }
    ];

    this.image_ready.columns = [
      { prop: 'pool_name', name: this.i18n('Pool'), flexGrow: 2 },
      { prop: 'name', name: this.i18n('Image'), flexGrow: 2 },
      { prop: 'description', name: this.i18n('Description'), flexGrow: 4 },
      {
        prop: 'state',
        name: this.i18n('State'),
        cellTemplate: this.stateTmpl,
        flexGrow: 1
      }
    ];

    this.subs = this.rbdMirroringService.subscribeSummary((data: any) => {
      if (!data) {
        return;
      }
      this.image_error.data = data.content_data.image_error;
      this.image_syncing.data = data.content_data.image_syncing;
      this.image_ready.data = data.content_data.image_ready;
    });
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }

  refresh() {
    this.rbdMirroringService.refresh();
  }
}
<tabset>
  <tab heading="Issues"
       i18n-heading>
    <cd-table [data]="image_error.data"
              columnMode="flex"
              [columns]="image_error.columns"
              [autoReload]="0"
              (fetchData)="refresh()">
    </cd-table>
  </tab>
  <tab heading="Syncing"
       i18n-heading>
    <cd-table [data]="image_syncing.data"
              columnMode="flex"
              [columns]="image_syncing.columns"
              [autoReload]="0"
              (fetchData)="refresh()">
    </cd-table>
  </tab>
  <tab heading="Ready"
       i18n-heading>
    <cd-table [data]="image_ready.data"
              columnMode="flex"
              [columns]="image_ready.columns"
              [autoReload]="0"
              (fetchData)="refresh()">
    </cd-table>
  </tab>
</tabset>

<ng-template #stateTmpl
             let-row="row"
             let-value="value">
  <span [ngClass]="row.state_color | mirrorHealthColor">{{ value }}</span>
</ng-template>

<ng-template #syncTmpl>
  <span class="label label-info" i18n>Syncing</span>
</ng-template>

<ng-template #progressTmpl
             let-value="value">
  <progressbar type="info"
               [value]="value">
  </progressbar>
</ng-template>

./image-list.component.scss

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""