Merge pull request #14801 from grafana/reorganize-gauge-panel

Minor refactor of Gauge panel

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<OptionModuleProps> {
+export default class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
   onToggleThresholdLabels = () =>
     this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
 
@@ -15,7 +16,8 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
   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 (
       <div className="section gf-form-group">

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<Options> {}
+
+export class GaugePanel extends PureComponent<Props> {
+  render() {
+    const { timeSeries, width, height } = this.props;
+
+    const vmSeries = getTimeSeriesVMs({
+      timeSeries: timeSeries,
+      nullValueMode: NullValueMode.Ignore,
+    });
+
+    return <Gauge timeSeries={vmSeries} {...this.props.options} width={width} height={height} />;
+  }
+}

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<PanelOptionsProps<Options>> {
+  static defaultProps = defaultProps;
+
+  render() {
+    const { onChange, options } = this.props;
+    return (
+      <>
+        <div className="form-section">
+          <ValueOptions onChange={onChange} options={options} />
+          <GaugeOptions onChange={onChange} options={options} />
+          <Thresholds onChange={onChange} options={options} />
+        </div>
+
+        <div className="form-section">
+          <ValueMappings onChange={onChange} options={options} />
+        </div>
+      </>
+    );
+  }
+}

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<OptionsProps> = {
+  const props: PanelOptionsProps<Options> = {
     onChange: jest.fn(),
     options: {
       ...defaultProps.options,

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<OptionModuleProps, State> {
+export default class Thresholds extends PureComponent<PanelOptionsProps<Options>, State> {
   constructor(props) {
     super(props);
 

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<Options> = {
     onChange: jest.fn(),
     options: {
       ...defaultProps.options,

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<ValueMap | RangeMap>;
   nextIdToAdd: number;
 }
 
-export default class ValueMappings extends PureComponent<OptionModuleProps, State> {
+export default class ValueMappings extends PureComponent<PanelOptionsProps<Options>, State> {
   constructor(props) {
     super(props);
 

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<OptionModuleProps> {
+export default class ValueOptions extends PureComponent<PanelOptionsProps<Options>> {
   onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
 
   onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });

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<RangeMap | ValueMap>;
-  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<OptionsProps> {}
-
-class GaugePanel extends PureComponent<Props> {
-  render() {
-    const { timeSeries, width, height } = this.props;
-
-    const vmSeries = getTimeSeriesVMs({
-      timeSeries: timeSeries,
-      nullValueMode: NullValueMode.Ignore,
-    });
-
-    return <Gauge timeSeries={vmSeries} {...this.props.options} width={width} height={height} />;
-  }
-}
-
-class Options extends PureComponent<PanelOptionsProps<OptionsProps>> {
-  static defaultProps = defaultProps;
-
-  render() {
-    const { onChange, options } = this.props;
-    return (
-      <div>
-        <div className="form-section">
-          <ValueOptions onChange={onChange} options={options} />
-          <GaugeOptions onChange={onChange} options={options} />
-          <Thresholds onChange={onChange} options={options} />
-        </div>
-        <div className="form-section">
-          <ValueMappings onChange={onChange} options={options} />
-        </div>
-      </div>
-    );
-  }
-}
-
-export { GaugePanel as Panel, Options as PanelOptions, defaultProps as PanelDefaults };
+export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, defaultProps as PanelDefaults };

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<RangeMap | ValueMap>;
+  maxValue: number;
+  minValue: number;
+  prefix: string;
+  showThresholdLabels: boolean;
+  showThresholdMarkers: boolean;
+  stat: string;
+  suffix: string;
+  thresholds: Threshold[];
+  unit: string;
+}

public/app/plugins/panel/graph2/GraphOptions.tsx → 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<PanelOptionsProps<Options>> {
+export class GraphPanelOptions extends PureComponent<PanelOptionsProps<Options>> {
   onToggleLines = () => {
     this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines });
   };

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 };