IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15387 from grafana/hugoh/can-not-set-decimal-threshold-in-gauge

Browse Source 
Fixes #15372 with number input and parseFloat
This commit is contained in:
Torkel Ödegaard 2019-02-12 12:22:09 +01:00 committed by GitHub
commit e5759fa0ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { ChangeEvent } from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { ThresholdsEditor, Props } from './ThresholdsEditor'; import { ThresholdsEditor, Props } from './ThresholdsEditor';
@ -118,7 +118,7 @@ describe('change threshold value', () => {
]; ];
const instance = setup({ thresholds }); const instance = setup({ thresholds });
const mockEvent = { target: { value: 12 } }; const mockEvent = ({ target: { value: '12' } } as any) as ChangeEvent<HTMLInputElement>;
instance.onChangeThresholdValue(mockEvent, thresholds[0]); instance.onChangeThresholdValue(mockEvent, thresholds[0]);
@ -137,7 +137,7 @@ describe('change threshold value', () => {
thresholds, thresholds,
}; };
const mockEvent = { target: { value: 78 } }; const mockEvent = ({ target: { value: '78' } } as any) as ChangeEvent<HTMLInputElement>;
instance.onChangeThresholdValue(mockEvent, thresholds[1]); instance.onChangeThresholdValue(mockEvent, thresholds[1]);

17
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
View File

@ -1,4 +1,4 @@
import React, { PureComponent } from 'react'; import React, { PureComponent, ChangeEvent } from 'react';
import { Threshold } from '../../types'; import { Threshold } from '../../types';
import { ColorPicker } from '../ColorPicker/ColorPicker'; import { ColorPicker } from '../ColorPicker/ColorPicker';
import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup'; import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
@ -94,14 +94,15 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
); );
}; };
onChangeThresholdValue = (event: any, threshold: Threshold) => { onChangeThresholdValue = (event: ChangeEvent<HTMLInputElement>, threshold: Threshold) => {
if (threshold.index === 0) { if (threshold.index === 0) {
return; return;
} }
const { thresholds } = this.state; const { thresholds } = this.state;
const parsedValue = parseInt(event.target.value, 10); const cleanValue = event.target.value.replace(/,/g, '.');
const value = isNaN(parsedValue) ? null : parsedValue; const parsedValue = parseFloat(cleanValue);
const value = isNaN(parsedValue) ? '' : parsedValue;
const newThresholds = thresholds.map(t => { const newThresholds = thresholds.map(t => {
if (t === threshold && t.index !== 0) { if (t === threshold && t.index !== 0) {
@ -164,16 +165,14 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
<div className="thresholds-row-input-inner-color"> <div className="thresholds-row-input-inner-color">
{threshold.color && ( {threshold.color && (
<div className="thresholds-row-input-inner-color-colorpicker"> <div className="thresholds-row-input-inner-color-colorpicker">
<ColorPicker <ColorPicker color={threshold.color} onChange={color => this.onChangeThresholdColor(threshold, color)} />
color={threshold.color}
onChange={color => this.onChangeThresholdColor(threshold, color)}
/>
</div> </div>
)} )}
</div> </div>
<div className="thresholds-row-input-inner-value"> <div className="thresholds-row-input-inner-value">
<input <input
type="text" type="number"
step="0.0001"
onChange={event => this.onChangeThresholdValue(event, threshold)} onChange={event => this.onChangeThresholdValue(event, threshold)}
value={value} value={value}
onBlur={this.onBlur} onBlur={this.onBlur}