|
| 1 | +import * as React from 'react'; |
| 2 | +import { useTranslation } from 'react-i18next'; |
| 3 | +import { valueFormat } from '../../utils/format'; |
| 4 | +import { AlertWithRuleName, computeAlertScore, computeExcessRatioStatusWeighted } from './helper'; |
| 5 | + |
| 6 | +import { Tooltip } from '@patternfly/react-core'; |
| 7 | +import './health-color-square.css'; |
| 8 | + |
| 9 | +export interface HealthColorSquareProps { |
| 10 | + alert: AlertWithRuleName; |
| 11 | +} |
| 12 | + |
| 13 | +// rgb in [0,255] bounds |
| 14 | +type Color = { r: number; g: number; b: number }; |
| 15 | +type ColorMap = Color[]; |
| 16 | + |
| 17 | +const criticalColorMap: ColorMap = [ |
| 18 | + { r: 250, g: 234, b: 232 }, |
| 19 | + { r: 163, g: 0, b: 0 }, |
| 20 | + { r: 44, g: 0, b: 0 }, |
| 21 | + { r: 20, g: 0, b: 20 } |
| 22 | +]; |
| 23 | + |
| 24 | +const warningColorMap: ColorMap = [ |
| 25 | + { r: 253, g: 247, b: 231 }, |
| 26 | + { r: 240, g: 171, b: 0 }, |
| 27 | + { r: 236, g: 122, b: 8 }, |
| 28 | + { r: 59, g: 31, b: 0 } |
| 29 | +]; |
| 30 | + |
| 31 | +const infoColorMap: ColorMap = [ |
| 32 | + { r: 62, g: 134, b: 53 }, |
| 33 | + { r: 228, g: 245, b: 188 }, |
| 34 | + { r: 154, g: 216, b: 216 } |
| 35 | +]; |
| 36 | + |
| 37 | +const getCellColors = (value: number, rangeFrom: number, rangeTo: number, colorMap: ColorMap) => { |
| 38 | + const clamped = Math.max(rangeFrom, Math.min(rangeTo, value)); |
| 39 | + const ratio = (clamped - rangeFrom) / (rangeTo - rangeFrom); // e.g. 0.8 | 0 | 1 |
| 40 | + const colorRatio = ratio * (colorMap.length - 1); // e.g. (length is 3) 1.6 | 0 | 2 |
| 41 | + const colorLow = colorMap[Math.floor(colorRatio)]; // e.g. m[1] | m[0] | m[2] |
| 42 | + const colorHigh = colorMap[Math.ceil(colorRatio)]; // e.g. m[2] | m[0] | m[2] |
| 43 | + const remains = colorRatio - Math.floor(colorRatio); // e.g. 0.6 | 0 | 0 |
| 44 | + const r = Math.floor((colorHigh.r - colorLow.r) * remains + colorLow.r); |
| 45 | + const g = Math.floor((colorHigh.g - colorLow.g) * remains + colorLow.g); |
| 46 | + const b = Math.floor((colorHigh.b - colorLow.b) * remains + colorLow.b); |
| 47 | + const brightness = 0.21 * r + 0.72 * g + 0.07 * b; // https://www.johndcook.com/blog/2009/08/24/algorithms-convert-color-grayscale/ |
| 48 | + const textColor = brightness > 128 ? 'var(--pf-global--palette--black-1000)' : 'var(--pf-global--palette--black-100)'; |
| 49 | + return { |
| 50 | + color: textColor, |
| 51 | + backgroundColor: `rgb(${r},${g},${b})` |
| 52 | + }; |
| 53 | +}; |
| 54 | + |
| 55 | +const buildGradientCSS = (colorMap: ColorMap): string => { |
| 56 | + const colorStops = colorMap.map(c => `rgb(${c.r},${c.g},${c.b})`); |
| 57 | + return 'linear-gradient(to right,' + colorStops.join(',') + ')'; |
| 58 | +}; |
| 59 | + |
| 60 | +export const HealthColorSquare: React.FC<HealthColorSquareProps> = ({ alert }) => { |
| 61 | + const { t } = useTranslation('plugin__netobserv-plugin'); |
| 62 | + |
| 63 | + let prefix = ''; |
| 64 | + switch (alert.state) { |
| 65 | + case 'pending': |
| 66 | + prefix = `[pending] `; |
| 67 | + break; |
| 68 | + case 'silenced': |
| 69 | + prefix = `[silenced] `; |
| 70 | + break; |
| 71 | + } |
| 72 | + const valueInfo = |
| 73 | + valueFormat(alert.value as number, 2) + |
| 74 | + (alert.metadata?.threshold ? '> ' + alert.metadata.threshold + ' ' + alert.metadata.unit : ''); |
| 75 | + const tooltip = `${prefix}${alert.annotations['summary']} | ${valueInfo}`; |
| 76 | + |
| 77 | + const colorMap = |
| 78 | + alert.labels.severity === 'critical' |
| 79 | + ? criticalColorMap |
| 80 | + : alert.labels.severity === 'warning' |
| 81 | + ? warningColorMap |
| 82 | + : infoColorMap; |
| 83 | + |
| 84 | + const scoreForMap = computeExcessRatioStatusWeighted(alert); |
| 85 | + const score = computeAlertScore(alert); |
| 86 | + |
| 87 | + return ( |
| 88 | + <Tooltip |
| 89 | + content={ |
| 90 | + <> |
| 91 | + {t('Score') + ': ' + valueFormat(score.rawScore)} |
| 92 | + <br /> |
| 93 | + {t('Weight') + ': ' + score.weight} |
| 94 | + <br /> |
| 95 | + <div className="gradient" style={{ backgroundImage: buildGradientCSS(colorMap) }}> |
| 96 | + <span className="vertical-mark" style={{ width: 100 * scoreForMap + '%' }} /> |
| 97 | + </div> |
| 98 | + </> |
| 99 | + } |
| 100 | + > |
| 101 | + <div className={'cell'} style={getCellColors(scoreForMap, 0, 1, colorMap)} title={tooltip} /> |
| 102 | + </Tooltip> |
| 103 | + ); |
| 104 | +}; |
0 commit comments