ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.ts

   1 import { DatePipe } from '@angular/common';
   2 import { Component, Input, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
   3
   4 import { I18n } from '@ngx-translate/i18n-polyfill';
   5 import { HostService } from '../../../shared/api/host.service';
   6 import { OsdService } from '../../../shared/api/osd.service';
   7 import { CellTemplate } from '../../../shared/enum/cell-template.enum';
   8 import { CdTableColumn } from '../../../shared/models/cd-table-column';
   9 import { CdDevice } from '../../../shared/models/devices';
  10
  11 @Component({
  12   selector: 'cd-device-list',
  13   templateUrl: './device-list.component.html',
  14   styleUrls: ['./device-list.component.scss']
  15 })
  16 export class DeviceListComponent implements OnChanges, OnInit {
  17   @Input()
  18   hostname = '';
  19   @Input()
  20   osdId: number = null;
  21
  22   @ViewChild('deviceLocation', { static: true })
  23   locationTemplate: TemplateRef<any>;
  24   @ViewChild('lifeExpectancy', { static: true })
  25   lifeExpectancyTemplate: TemplateRef<any>;
  26   @ViewChild('lifeExpectancyTimestamp', { static: true })
  27   lifeExpectancyTimestampTemplate: TemplateRef<any>;
  28
  29   devices: CdDevice[] = null;
  30   columns: CdTableColumn[] = [];
  31   translationMapping = {
  32     '=1': '# week',
  33     other: '# weeks'
  34   };
  35
  36   constructor(
  37     private hostService: HostService,
  38     private i18n: I18n,
  39     private datePipe: DatePipe,
  40     private osdService: OsdService
  41   ) {}
  42
  43   ngOnInit() {
  44     this.columns = [
  45       { prop: 'devid', name: this.i18n('Device ID'), minWidth: 200 },
  46       {
  47         prop: 'state',
  48         name: this.i18n('State of Health'),
  49         flexGrow: 1,
  50         cellTransformation: CellTemplate.badge,
  51         customTemplateConfig: {
  52           map: {
  53             good: { value: this.i18n('Good'), class: 'badge-success' },
  54             warning: { value: this.i18n('Warning'), class: 'badge-warning' },
  55             bad: { value: this.i18n('Bad'), class: 'badge-danger' },
  56             stale: { value: this.i18n('Stale'), class: 'badge-info' },
  57             unknown: { value: this.i18n('Unknown'), class: 'badge-dark' }
  58           }
  59         }
  60       },
  61       {
  62         prop: 'life_expectancy_weeks',
  63         name: this.i18n('Life Expectancy'),
  64         cellTemplate: this.lifeExpectancyTemplate
  65       },
  66       {
  67         prop: 'life_expectancy_stamp',
  68         name: this.i18n('Prediction Creation Date'),
  69         cellTemplate: this.lifeExpectancyTimestampTemplate,
  70         pipe: this.datePipe,
  71         isHidden: true
  72       },
  73       { prop: 'location', name: this.i18n('Device Name'), cellTemplate: this.locationTemplate },
  74       { prop: 'readableDaemons', name: this.i18n('Daemons') }
  75     ];
  76   }
  77
  78   ngOnChanges() {
  79     const updateDevicesFn = (devices: CdDevice[]) => (this.devices = devices);
  80     if (this.hostname) {
  81       this.hostService.getDevices(this.hostname).subscribe(updateDevicesFn);
  82     } else if (this.osdId !== null) {
  83       this.osdService.getDevices(this.osdId).subscribe(updateDevicesFn);
  84     }
  85   }
  86 }