Skip to content

N
nexpie-grafana-theme
Commit d2b71cff by Hugo Häggmark
Options

Reverted move of defaults for GaugePanelOptions

parent 5ceedc4a
Showing with 60 additions and 67 deletions
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { ThresholdsEditor } from './ThresholdsEditor'; import { ThresholdsEditor, Props } from './ThresholdsEditor';
import { BasicGaugeColor, PanelOptionsProps, GaugeOptions } from '../../types'; import { BasicGaugeColor } from '../../types';
const defaultProps = {
options: {
baseColor: BasicGaugeColor.Green,
minValue: 0,
maxValue: 100,
prefix: '',
showThresholdMarkers: true,
showThresholdLabels: false,
suffix: '',
decimals: 0,
stat: 'avg',
unit: 'none',
mappings: [],
thresholds: [],
},
};
const setup = (propOverrides?: object) => { const setup = (propOverrides?: object) => {
const props: PanelOptionsProps<GaugeOptions> = { const props: Props = {
onChange: jest.fn(), onChange: jest.fn(),
options: { thresholds: [],
...defaultProps.options,
thresholds: [],
},
}; };
Object.assign(props, propOverrides); Object.assign(props, propOverrides);
...@@ -46,10 +26,7 @@ describe('Add threshold', () => { ...@@ -46,10 +26,7 @@ describe('Add threshold', () => {
it('should add another threshold above a first', () => { it('should add another threshold above a first', () => {
const instance = setup({ const instance = setup({
options: { thresholds: [{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }],
...defaultProps.options,
thresholds: [{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }],
},
}); });
instance.onAddThreshold(1); instance.onAddThreshold(1);
......
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import tinycolor, { ColorInput } from 'tinycolor2'; import tinycolor, { ColorInput } from 'tinycolor2';
import { Threshold, PanelOptionsProps, GaugeOptions, BasicGaugeColor } from '../../types'; import { Threshold, BasicGaugeColor } from '../../types';
import { ColorPicker } from '../ColorPicker/ColorPicker'; import { ColorPicker } from '../ColorPicker/ColorPicker';
export interface Props {
thresholds: Threshold[];
onChange: (thresholds: Threshold[]) => void;
}
interface State { interface State {
thresholds: Threshold[]; thresholds: Threshold[];
baseColor: string; baseColor: string;
} }
export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>, State> { export class ThresholdsEditor extends PureComponent<Props, State> {
constructor(props: PanelOptionsProps<GaugeOptions>) { constructor(props: Props) {
super(props); super(props);
this.state = { thresholds: props.options.thresholds, baseColor: props.options.baseColor }; this.state = { thresholds: props.thresholds, baseColor: BasicGaugeColor.Green };
} }
onAddThreshold = (index: number) => { onAddThreshold = (index: number) => {
const { maxValue, minValue } = this.props.options; const maxValue = 100; // hardcoded for now before we add the base threshold
const minValue = 0; // hardcoded for now before we add the base threshold
const { thresholds } = this.state; const { thresholds } = this.state;
const newThresholds = thresholds.map(threshold => { const newThresholds = thresholds.map(threshold => {
if (threshold.index >= index) { if (threshold.index >= index) {
threshold = { ...threshold, index: threshold.index + 1 }; threshold = {
...threshold,
index: threshold.index + 1,
};
} }
return threshold; return threshold;
...@@ -49,7 +58,14 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio ...@@ -49,7 +58,14 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio
this.setState( this.setState(
{ {
thresholds: this.sortThresholds([...newThresholds, { index, value: value as number, color }]), thresholds: this.sortThresholds([
...newThresholds,
{
index,
value: value as number,
color,
},
]),
}, },
() => this.updateGauge() () => this.updateGauge()
); );
...@@ -95,7 +111,7 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio ...@@ -95,7 +111,7 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio
); );
}; };
onChangeBaseColor = (color: string) => this.props.onChange({ ...this.props.options, baseColor: color }); onChangeBaseColor = (color: string) => this.props.onChange(this.state.thresholds);
onBlur = () => { onBlur = () => {
this.setState(prevState => ({ thresholds: this.sortThresholds(prevState.thresholds) })); this.setState(prevState => ({ thresholds: this.sortThresholds(prevState.thresholds) }));
...@@ -103,7 +119,7 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio ...@@ -103,7 +119,7 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio
}; };
updateGauge = () => { updateGauge = () => {
this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds }); this.props.onChange(this.state.thresholds);
}; };
sortThresholds = (thresholds: Threshold[]) => { sortThresholds = (thresholds: Threshold[]) => {
...@@ -163,14 +179,14 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio ...@@ -163,14 +179,14 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptio
<div className="indicator-section" style={{ height: '100%' }}> <div className="indicator-section" style={{ height: '100%' }}>
<div <div
onClick={() => this.onAddThreshold(0)} onClick={() => this.onAddThreshold(0)}
style={{ height: '100%', backgroundColor: this.props.options.baseColor }} style={{ height: '100%', backgroundColor: BasicGaugeColor.Green }}
/> />
</div> </div>
); );
} }
renderBase() { renderBase() {
const { baseColor } = this.props.options; const baseColor = BasicGaugeColor.Green;
return ( return (
<div className="threshold-row threshold-row-base"> <div className="threshold-row threshold-row-base">
......
packages/grafana-ui/src/types/gauge.ts
import { BasicGaugeColor, RangeMap, Threshold, ValueMap } from './panel'; import { RangeMap, Threshold, ValueMap } from './panel';
export interface GaugeOptions { export interface GaugeOptions {
baseColor: string; baseColor: string;
...@@ -14,20 +14,3 @@ export interface GaugeOptions { ...@@ -14,20 +14,3 @@ export interface GaugeOptions {
thresholds: Threshold[]; thresholds: Threshold[];
unit: string; unit: string;
} }
export const GaugePanelOptionsDefaultProps = {
options: {
baseColor: BasicGaugeColor.Green,
minValue: 0,
maxValue: 100,
prefix: '',
showThresholdMarkers: true,
showThresholdLabels: false,
suffix: '',
decimals: 0,
stat: 'avg',
unit: 'none',
mappings: [],
thresholds: [],
},
};
public/app/plugins/panel/gauge/GaugePanelOptions.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { GaugeOptions, GaugePanelOptionsDefaultProps, PanelOptionsProps, ThresholdsEditor } from '@grafana/ui'; import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor, Threshold } from '@grafana/ui';
import ValueOptions from 'app/plugins/panel/gauge/ValueOptions'; import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
import ValueMappings from 'app/plugins/panel/gauge/ValueMappings'; import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
import GaugeOptionsEditor from './GaugeOptionsEditor'; import GaugeOptionsEditor from './GaugeOptionsEditor';
export const defaultProps = {
options: {
baseColor: BasicGaugeColor.Green,
minValue: 0,
maxValue: 100,
prefix: '',
showThresholdMarkers: true,
showThresholdLabels: false,
suffix: '',
decimals: 0,
stat: 'avg',
unit: 'none',
mappings: [],
thresholds: [],
},
};
export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> { export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> {
static defaultProps = GaugePanelOptionsDefaultProps; static defaultProps = defaultProps;
onThresholdsChanged = (thresholds: Threshold[]) => this.props.onChange({ ...this.props.options, thresholds });
render() { render() {
const { onChange, options } = this.props; const { onChange, options } = this.props;
...@@ -15,7 +34,7 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G ...@@ -15,7 +34,7 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
<div className="form-section"> <div className="form-section">
<ValueOptions onChange={onChange} options={options} /> <ValueOptions onChange={onChange} options={options} />
<GaugeOptionsEditor onChange={onChange} options={options} /> <GaugeOptionsEditor onChange={onChange} options={options} />
<ThresholdsEditor onChange={onChange} options={options} /> <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
</div> </div>
<div className="form-section"> <div className="form-section">
......
public/app/plugins/panel/gauge/ValueMappings.test.tsx
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { GaugeOptions, MappingType, PanelOptionsProps } from '@grafana/ui'; import { GaugeOptions, MappingType, PanelOptionsProps } from '@grafana/ui';
import { GaugePanelOptionsDefaultProps } from '@grafana/ui/src/types/gauge'; import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
import ValueMappings from './ValueMappings'; import ValueMappings from './ValueMappings';
...@@ -9,7 +9,7 @@ const setup = (propOverrides?: object) => { ...@@ -9,7 +9,7 @@ const setup = (propOverrides?: object) => {
const props: PanelOptionsProps<GaugeOptions> = { const props: PanelOptionsProps<GaugeOptions> = {
onChange: jest.fn(), onChange: jest.fn(),
options: { options: {
...GaugePanelOptionsDefaultProps.options, ...defaultProps.options,
mappings: [ mappings: [
{ id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' }, { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' },
{ id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' }, { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
...@@ -67,7 +67,7 @@ describe('Next id to add', () => { ...@@ -67,7 +67,7 @@ describe('Next id to add', () => {
}); });
it('should default to 1', () => { it('should default to 1', () => {
const { instance } = setup({ options: { ...GaugePanelOptionsDefaultProps.options } }); const { instance } = setup({ options: { ...defaultProps.options } });
expect(instance.state.nextIdToAdd).toEqual(1); expect(instance.state.nextIdToAdd).toEqual(1);
}); });
......
public/app/plugins/panel/gauge/module.tsx
import { GaugePanelOptionsDefaultProps } from '@grafana/ui'; import GaugePanelOptions, { defaultProps } from './GaugePanelOptions';
import GaugePanelOptions from './GaugePanelOptions';
import { GaugePanel } from './GaugePanel'; import { GaugePanel } from './GaugePanel';
export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, GaugePanelOptionsDefaultProps as PanelDefaults }; export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, defaultProps as PanelDefaults };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment