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