From 234095e6df72fae1535a1489ec8ec699f1addffd Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Thu, 13 Dec 2018 16:46:10 +0100 Subject: [PATCH] starting with threshold refactor --- .../app/plugins/panel/gauge/GaugeOptions.tsx | 6 +- public/app/plugins/panel/gauge/Thresholds.tsx | 91 ++++++------------- public/app/plugins/panel/gauge/module.tsx | 12 ++- public/app/viz/Gauge.tsx | 60 ++++++++---- public/sass/components/_thresholds.scss | 2 +- 5 files changed, 86 insertions(+), 85 deletions(-) diff --git a/public/app/plugins/panel/gauge/GaugeOptions.tsx b/public/app/plugins/panel/gauge/GaugeOptions.tsx index 82e68a7a313..3a3d7cdeede 100644 --- a/public/app/plugins/panel/gauge/GaugeOptions.tsx +++ b/public/app/plugins/panel/gauge/GaugeOptions.tsx @@ -15,7 +15,7 @@ export default class GaugeOptions extends PureComponent { onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value }); render() { - const { showThresholdLabels, showThresholdMarkers } = this.props.options; + const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = this.props.options; return (
@@ -38,11 +38,11 @@ export default class GaugeOptions extends PureComponent {
- +
- +
); diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx index 84daa0dba76..d2e04323db4 100644 --- a/public/app/plugins/panel/gauge/Thresholds.tsx +++ b/public/app/plugins/panel/gauge/Thresholds.tsx @@ -88,6 +88,7 @@ export default class Thresholds extends PureComponent ); }; + onChangeBaseColor = color => this.props.onChange({ ...this.props.options, baseColor: color }); onBlur = () => { this.setState(prevState => ({ thresholds: this.sortThresholds(prevState.thresholds), @@ -116,47 +117,10 @@ export default class Thresholds extends PureComponent return index < thresholds.length ? thresholds[index].color : BasicGaugeColor.Red; }; - renderNoThresholds() { - const { thresholds } = this.state; - - const min = thresholds[0]; - - return [ -
-
-
-
- this.onChangeThresholdColor(min, color)} /> -
-
- this.onChangeThresholdValue(event, min)} - value={min.value} - /> -
{min.label}
-
-
, -
-
-
this.onAddThreshold(1)} className="threshold-row-add"> - -
-
Add new threshold by clicking the line.
-
-
, - ]; - } - renderThresholds() { const { thresholds } = this.state; return thresholds.map((threshold, index) => { - if (index === thresholds.length - 1) { - return null; - } - const rowStyle = classNames({ 'threshold-row': true, 'threshold-row-min': index === 0, @@ -182,13 +146,9 @@ export default class Thresholds extends PureComponent value={threshold.value} onBlur={this.onBlur} /> - {threshold.canRemove ? ( -
this.onRemoveThreshold(threshold)} className="threshold-row-remove"> - -
- ) : ( -
{threshold.label}
- )} +
this.onRemoveThreshold(threshold)} className="threshold-row-remove"> + +
); @@ -260,38 +220,47 @@ export default class Thresholds extends PureComponent renderIndicator() { const { thresholds } = this.state; - return thresholds.map((t, i) => { - if (i <= thresholds.length - 1) { - return this.renderIndicatorSection(i); - } + if (thresholds.length > 0) { + return thresholds.map((t, i) => { + if (i <= thresholds.length - 1) { + return this.renderIndicatorSection(i); + } - return null; - }); + return null; + }); + } + + return ( +
+
this.onAddThreshold(0)} + style={{ height: '100%', backgroundColor: this.props.options.baseColor }} + /> +
+ ); } render() { const { thresholds } = this.state; - const max = thresholds[thresholds.length - 1]; return (
Thresholds
+ Click the colored line to add a threshold
{this.renderIndicator()}
- {thresholds.length > 2 ? this.renderThresholds() : this.renderNoThresholds()} -
+
-
- this.onChangeThresholdValue(event, max)} - value={max.value} - /> -
{max.label}
+
+
+ this.onChangeBaseColor(color)} /> +
+
+
Base
+ {thresholds.length > 0 && this.renderThresholds()}
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx index 84579a77343..9e0370394b4 100644 --- a/public/app/plugins/panel/gauge/module.tsx +++ b/public/app/plugins/panel/gauge/module.tsx @@ -16,15 +16,18 @@ import { } from 'app/types'; export interface OptionsProps { + baseColor: string; decimals: number; + mappings: Array; + maxValue: number; + minValue: number; prefix: string; showThresholdLabels: boolean; showThresholdMarkers: boolean; stat: string; suffix: string; - unit: string; thresholds: Threshold[]; - mappings: Array; + unit: string; } export interface OptionModuleProps { @@ -34,6 +37,7 @@ export interface OptionModuleProps { export const defaultProps = { options: { + baseColor: BasicGaugeColor.Green, minValue: 0, maxValue: 100, prefix: '', @@ -45,8 +49,8 @@ export const defaultProps = { unit: '', mappings: [], thresholds: [ - { index: 0, label: 'Min', value: 0, canRemove: false, color: BasicGaugeColor.Green }, - { index: 1, label: 'Max', value: 100, canRemove: false }, + { index: 0, value: 0, color: BasicGaugeColor.Green, label: 'Min', canRemove: false }, + { index: 1, value: 100, color: BasicGaugeColor.Red, label: 'Max', canRemove: false }, ], }, }; diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx index d918752f287..7afa512a00f 100644 --- a/public/app/viz/Gauge.tsx +++ b/public/app/viz/Gauge.tsx @@ -1,10 +1,11 @@ import React, { PureComponent } from 'react'; import $ from 'jquery'; -import { MappingType, RangeMap, Threshold, TimeSeriesVMs, ValueMap } from 'app/types'; +import { BasicGaugeColor, MappingType, RangeMap, Threshold, TimeSeriesVMs, ValueMap } from 'app/types'; import config from '../core/config'; import kbn from '../core/utils/kbn'; interface Props { + baseColor: string; decimals: number; height: number; mappings: Array; @@ -25,6 +26,7 @@ export class Gauge extends PureComponent { canvasElement: any; static defaultProps = { + baseColor: BasicGaugeColor.Green, maxValue: 100, mappings: [], minValue: 0, @@ -32,11 +34,9 @@ export class Gauge extends PureComponent { showThresholdMarkers: true, showThresholdLabels: false, suffix: '', - thresholds: [ - { label: 'Min', value: 0, color: 'rgba(50, 172, 45, 0.97)' }, - { label: 'Max', value: 100, color: 'rgba(245, 54, 54, 0.9)' }, - ], + thresholds: [{ value: 0, color: BasicGaugeColor.Green }, { value: 100, color: BasicGaugeColor.Red }], unit: 'none', + stat: 'avg', }; componentDidMount() { @@ -92,12 +92,43 @@ export class Gauge extends PureComponent { return `${prefix} ${formattedValue} ${suffix}`; } + getFontColor(value) { + const { baseColor, thresholds } = this.props; + + if (thresholds.length > 0) { + const foo = thresholds.filter(t => value <= t.value); + + if (foo.length > 0) { + return foo[0].color; + } + } + + return baseColor; + } + draw() { - const { timeSeries, showThresholdLabels, showThresholdMarkers, thresholds, width, height, stat } = this.props; + const { + maxValue, + minValue, + timeSeries, + showThresholdLabels, + showThresholdMarkers, + thresholds, + width, + height, + stat, + } = this.props; + + let value: string | number = ''; + + if (timeSeries[0]) { + value = timeSeries[0].stats[stat]; + } else { + value = 'N/A'; + } const dimension = Math.min(width, height * 1.3); const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)'; - const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)'; const fontScale = parseInt('80', 10) / 100; const fontSize = Math.min(dimension / 5, 100) * fontScale; const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1; @@ -113,12 +144,14 @@ export class Gauge extends PureComponent { }; }); + console.log(formattedThresholds); + const options = { series: { gauges: { gauge: { - min: thresholds[0].value, - max: thresholds[thresholds.length - 1].value, + min: minValue, + max: maxValue, background: { color: backgroundColor }, border: { color: null }, shadow: { show: false }, @@ -139,10 +172,10 @@ export class Gauge extends PureComponent { width: thresholdMarkersWidth, }, value: { - color: fontColor, + color: this.getFontColor(value), formatter: () => { if (timeSeries[0]) { - return this.formatValue(timeSeries[0].stats[stat]); + return this.formatValue(value); } return ''; @@ -157,11 +190,6 @@ export class Gauge extends PureComponent { }, }; - let value: string | number = 'N/A'; - if (timeSeries.length) { - value = timeSeries[0].stats[stat]; - } - const plotSeries = { data: [[0, value]], }; diff --git a/public/sass/components/_thresholds.scss b/public/sass/components/_thresholds.scss index 5e516278b3e..5935c120ced 100644 --- a/public/sass/components/_thresholds.scss +++ b/public/sass/components/_thresholds.scss @@ -65,7 +65,7 @@ padding: 5px 8px; } -.threshold-row-min { +.threshold-row-base { margin-top: -22px; }