diff --git a/public/app/plugins/panel/gauge/GaugeOptions.tsx b/public/app/plugins/panel/gauge/GaugeOptions.tsx index 655e9b0a65d..7607374b1b7 100644 --- a/public/app/plugins/panel/gauge/GaugeOptions.tsx +++ b/public/app/plugins/panel/gauge/GaugeOptions.tsx @@ -1,9 +1,10 @@ import React, { PureComponent } from 'react'; import { Switch } from 'app/core/components/Switch/Switch'; -import { OptionModuleProps } from './module'; import { Label } from '../../../core/components/Label/Label'; +import { PanelOptionsProps } from '@grafana/ui'; +import { Options } from './types'; -export default class GaugeOptions extends PureComponent { +export default class GaugeOptions extends PureComponent> { onToggleThresholdLabels = () => this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels }); @@ -15,7 +16,8 @@ export default class GaugeOptions extends PureComponent { onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value }); render() { - const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = this.props.options; + const { options } = this.props; + const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options; return (
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx new file mode 100644 index 00000000000..5f1a438863f --- /dev/null +++ b/public/app/plugins/panel/gauge/GaugePanel.tsx @@ -0,0 +1,20 @@ +import React, { PureComponent } from 'react'; +import { PanelProps, NullValueMode } from '@grafana/ui'; +import { getTimeSeriesVMs } from 'app/viz/state/timeSeries'; +import Gauge from 'app/viz/Gauge'; +import { Options } from './types'; + +interface Props extends PanelProps {} + +export class GaugePanel extends PureComponent { + render() { + const { timeSeries, width, height } = this.props; + + const vmSeries = getTimeSeriesVMs({ + timeSeries: timeSeries, + nullValueMode: NullValueMode.Ignore, + }); + + return ; + } +} diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx new file mode 100644 index 00000000000..2b16ef5a1fe --- /dev/null +++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx @@ -0,0 +1,46 @@ +import React, { PureComponent } from 'react'; +import ValueOptions from 'app/plugins/panel/gauge/ValueOptions'; +import Thresholds from 'app/plugins/panel/gauge/Thresholds'; +import { BasicGaugeColor } from 'app/types'; +import { PanelOptionsProps } from '@grafana/ui'; +import ValueMappings from 'app/plugins/panel/gauge/ValueMappings'; +import { Options } from './types'; +import GaugeOptions from './GaugeOptions'; + +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> { + static defaultProps = defaultProps; + + render() { + const { onChange, options } = this.props; + return ( + <> +
+ + + +
+ +
+ +
+ + ); + } +} diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/public/app/plugins/panel/gauge/Threshold.test.tsx index 3fa508b98a9..852b9f4c104 100644 --- a/public/app/plugins/panel/gauge/Threshold.test.tsx +++ b/public/app/plugins/panel/gauge/Threshold.test.tsx @@ -1,12 +1,13 @@ import React from 'react'; import { shallow } from 'enzyme'; import Thresholds from './Thresholds'; -import { defaultProps, OptionsProps } from './module'; +import { defaultProps } from './GaugePanelOptions'; import { BasicGaugeColor } from 'app/types'; import { PanelOptionsProps } from '@grafana/ui'; +import { Options } from './types'; const setup = (propOverrides?: object) => { - const props: PanelOptionsProps = { + const props: PanelOptionsProps = { onChange: jest.fn(), options: { ...defaultProps.options, diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx index dd0dcc1e33b..b4d4930e11d 100644 --- a/public/app/plugins/panel/gauge/Thresholds.tsx +++ b/public/app/plugins/panel/gauge/Thresholds.tsx @@ -1,15 +1,16 @@ import React, { PureComponent } from 'react'; import tinycolor from 'tinycolor2'; import { ColorPicker } from 'app/core/components/colorpicker/ColorPicker'; -import { OptionModuleProps } from './module'; import { BasicGaugeColor, Threshold } from 'app/types'; +import { PanelOptionsProps } from '@grafana/ui'; +import { Options } from './types'; interface State { thresholds: Threshold[]; baseColor: string; } -export default class Thresholds extends PureComponent { +export default class Thresholds extends PureComponent, State> { constructor(props) { super(props); diff --git a/public/app/plugins/panel/gauge/ValueMappings.test.tsx b/public/app/plugins/panel/gauge/ValueMappings.test.tsx index fd9f56343b1..3e59cc76742 100644 --- a/public/app/plugins/panel/gauge/ValueMappings.test.tsx +++ b/public/app/plugins/panel/gauge/ValueMappings.test.tsx @@ -1,11 +1,13 @@ import React from 'react'; import { shallow } from 'enzyme'; import ValueMappings from './ValueMappings'; -import { defaultProps, OptionModuleProps } from './module'; import { MappingType } from 'app/types'; +import { PanelOptionsProps } from '@grafana/ui'; +import { Options } from './types'; +import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions'; const setup = (propOverrides?: object) => { - const props: OptionModuleProps = { + const props: PanelOptionsProps = { onChange: jest.fn(), options: { ...defaultProps.options, diff --git a/public/app/plugins/panel/gauge/ValueMappings.tsx b/public/app/plugins/panel/gauge/ValueMappings.tsx index 2197002a135..be800cf2412 100644 --- a/public/app/plugins/panel/gauge/ValueMappings.tsx +++ b/public/app/plugins/panel/gauge/ValueMappings.tsx @@ -1,14 +1,15 @@ import React, { PureComponent } from 'react'; import MappingRow from './MappingRow'; -import { OptionModuleProps } from './module'; import { MappingType, RangeMap, ValueMap } from 'app/types'; +import { PanelOptionsProps } from '@grafana/ui'; +import { Options } from './types'; interface State { mappings: Array; nextIdToAdd: number; } -export default class ValueMappings extends PureComponent { +export default class ValueMappings extends PureComponent, State> { constructor(props) { super(props); diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx index 445d6517c5a..4aafc0b0457 100644 --- a/public/app/plugins/panel/gauge/ValueOptions.tsx +++ b/public/app/plugins/panel/gauge/ValueOptions.tsx @@ -2,7 +2,8 @@ import React, { PureComponent } from 'react'; import { Label } from 'app/core/components/Label/Label'; import Select from 'app/core/components/Select/Select'; import UnitPicker from 'app/core/components/Select/UnitPicker'; -import { OptionModuleProps } from './module'; +import { PanelOptionsProps } from '@grafana/ui'; +import { Options } from './types'; const statOptions = [ { value: 'min', label: 'Min' }, @@ -20,7 +21,7 @@ const statOptions = [ const labelWidth = 6; -export default class ValueOptions extends PureComponent { +export default class ValueOptions extends PureComponent> { onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value }); onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value }); diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx index dccd424b416..783e4825657 100644 --- a/public/app/plugins/panel/gauge/module.tsx +++ b/public/app/plugins/panel/gauge/module.tsx @@ -1,83 +1,4 @@ -import React, { PureComponent } from 'react'; -import Gauge from 'app/viz/Gauge'; -import { getTimeSeriesVMs } from 'app/viz/state/timeSeries'; -import ValueOptions from './ValueOptions'; -import GaugeOptions from './GaugeOptions'; -import Thresholds from './Thresholds'; -import ValueMappings from './ValueMappings'; -import { PanelOptionsProps, PanelProps, NullValueMode } from '@grafana/ui'; -import { BasicGaugeColor, RangeMap, Threshold, ValueMap } from 'app/types'; +import GaugePanelOptions, { defaultProps } from './GaugePanelOptions'; +import { GaugePanel } from './GaugePanel'; -export interface OptionsProps { - baseColor: string; - decimals: number; - mappings: Array; - maxValue: number; - minValue: number; - prefix: string; - showThresholdLabels: boolean; - showThresholdMarkers: boolean; - stat: string; - suffix: string; - thresholds: Threshold[]; - unit: string; -} - -export interface OptionModuleProps { - onChange: (item: any) => void; - options: OptionsProps; -} - -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: [], - }, -}; - -interface Props extends PanelProps {} - -class GaugePanel extends PureComponent { - render() { - const { timeSeries, width, height } = this.props; - - const vmSeries = getTimeSeriesVMs({ - timeSeries: timeSeries, - nullValueMode: NullValueMode.Ignore, - }); - - return ; - } -} - -class Options extends PureComponent> { - static defaultProps = defaultProps; - - render() { - const { onChange, options } = this.props; - return ( -
-
- - - -
-
- -
-
- ); - } -} - -export { GaugePanel as Panel, Options as PanelOptions, defaultProps as PanelDefaults }; +export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, defaultProps as PanelDefaults }; diff --git a/public/app/plugins/panel/gauge/types.ts b/public/app/plugins/panel/gauge/types.ts new file mode 100644 index 00000000000..60c4fd1581d --- /dev/null +++ b/public/app/plugins/panel/gauge/types.ts @@ -0,0 +1,16 @@ +import { RangeMap, ValueMap, Threshold } from 'app/types'; + +export interface Options { + baseColor: string; + decimals: number; + mappings: Array; + maxValue: number; + minValue: number; + prefix: string; + showThresholdLabels: boolean; + showThresholdMarkers: boolean; + stat: string; + suffix: string; + thresholds: Threshold[]; + unit: string; +} diff --git a/public/app/plugins/panel/graph2/GraphOptions.tsx b/public/app/plugins/panel/graph2/GraphPanelOptions.tsx similarity index 95% rename from public/app/plugins/panel/graph2/GraphOptions.tsx rename to public/app/plugins/panel/graph2/GraphPanelOptions.tsx index 6bb4b2c13d5..32e68b7a1d4 100644 --- a/public/app/plugins/panel/graph2/GraphOptions.tsx +++ b/public/app/plugins/panel/graph2/GraphPanelOptions.tsx @@ -9,7 +9,7 @@ import { Switch } from 'app/core/components/Switch/Switch'; import { PanelOptionsProps } from '@grafana/ui'; import { Options } from './types'; -export class GraphOptions extends PureComponent> { +export class GraphPanelOptions extends PureComponent> { onToggleLines = () => { this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines }); }; diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx index ba761ca92cb..762d5609541 100644 --- a/public/app/plugins/panel/graph2/module.tsx +++ b/public/app/plugins/panel/graph2/module.tsx @@ -1,4 +1,4 @@ import { GraphPanel } from './GraphPanel'; -import { GraphOptions } from './GraphOptions'; +import { GraphPanelOptions } from './GraphPanelOptions'; -export { GraphPanel as Panel, GraphOptions as PanelOptions }; +export { GraphPanel as Panel, GraphPanelOptions as PanelOptions };