ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-performance-histogram/osd-performance-histogram.component.ts

   1 import { Component, Input, OnChanges } from '@angular/core';
   2
   3 import * as _ from 'lodash';
   4
   5 @Component({
   6   selector: 'cd-osd-performance-histogram',
   7   templateUrl: './osd-performance-histogram.component.html',
   8   styleUrls: ['./osd-performance-histogram.component.scss']
   9 })
  10 export class OsdPerformanceHistogramComponent implements OnChanges {
  11   @Input()
  12   histogram: any;
  13   valuesStyle: any;
  14   last = {};
  15
  16   constructor() {}
  17
  18   ngOnChanges() {
  19     this.render();
  20   }
  21
  22   hexdigits(v: number): string {
  23     const i = Math.floor(v * 255).toString(16);
  24     return i.length === 1 ? '0' + i : i;
  25   }
  26
  27   hexcolor(r: number, g: number, b: number) {
  28     return '#' + this.hexdigits(r) + this.hexdigits(g) + this.hexdigits(b);
  29   }
  30
  31   render() {
  32     if (!this.histogram) {
  33       return;
  34     }
  35     let max = 0;
  36
  37     _.each(this.histogram.values, (row, i) => {
  38       _.each(row, (col, j) => {
  39         let val;
  40         if (this.last && this.last[i] && this.last[i][j]) {
  41           val = col - this.last[i][j];
  42         } else {
  43           val = col;
  44         }
  45         max = Math.max(max, val);
  46       });
  47     });
  48
  49     this.valuesStyle = this.histogram.values.map((row: any, i: number) => {
  50       return row.map((col: any, j: number) => {
  51         const val = this.last && this.last[i] && this.last[i][j] ? col - this.last[i][j] : col;
  52         const g = max ? val / max : 0;
  53         const r = 1 - g;
  54         return { backgroundColor: this.hexcolor(r, g, 0) };
  55       });
  56     });
  57
  58     this.last = this.histogram.values;
  59   }
  60 }