diff --git a/public/app/plugins/panel/gauge/GaugeOptions.tsx b/public/app/plugins/panel/gauge/GaugeOptions.tsx index ec3330ad62e..82e68a7a313 100644 --- a/public/app/plugins/panel/gauge/GaugeOptions.tsx +++ b/public/app/plugins/panel/gauge/GaugeOptions.tsx @@ -1,14 +1,19 @@ import React, { PureComponent } from 'react'; import { Switch } from 'app/core/components/Switch/Switch'; import { OptionModuleProps } from './module'; +import { Label } from '../../../core/components/Label/Label'; export default class GaugeOptions extends PureComponent { - toggleThresholdLabels = () => + onToggleThresholdLabels = () => this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels }); - toggleThresholdMarkers = () => + onToggleThresholdMarkers = () => this.props.onChange({ ...this.props.options, showThresholdMarkers: !this.props.options.showThresholdMarkers }); + onMinValueChange = ({ target }) => this.props.onChange({ ...this.props.options, minValue: target.value }); + + onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value }); + render() { const { showThresholdLabels, showThresholdMarkers } = this.props.options; @@ -20,7 +25,7 @@ export default class GaugeOptions extends PureComponent { label="Threshold labels" labelClass="width-10" checked={showThresholdLabels} - onChange={this.toggleThresholdLabels} + onChange={this.onToggleThresholdLabels} />
@@ -28,9 +33,17 @@ export default class GaugeOptions extends PureComponent { label="Threshold markers" labelClass="width-10" checked={showThresholdMarkers} - onChange={this.toggleThresholdMarkers} + onChange={this.onToggleThresholdMarkers} />
+
+ + +
+
+ + +
); } diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx index b1a46ecbc36..cb9ba022ad8 100644 --- a/public/app/plugins/panel/gauge/Thresholds.tsx +++ b/public/app/plugins/panel/gauge/Thresholds.tsx @@ -169,22 +169,20 @@ export default class Thresholds extends PureComponent const rowStyle = classNames({ 'threshold-row': true, 'threshold-row-min': index === 0, - 'threshold-row-max': index === thresholds.length - 1, }); return (
- {threshold.color && - index !== thresholds.length - 1 && ( -
- this.onChangeThresholdColor(threshold, color)} - /> -
- )} + {threshold.color && ( +
+ this.onChangeThresholdColor(threshold, color)} + /> +
+ )}