Moved gauge value options into a sub oject and made editor more generic, will be moved out of gauge pane later and shared between singlestat, gauge, bargauge, honecomb

public/app/features/dashboard/state/DashboardMigrator.ts

@@ -392,6 +392,18 @@ export class DashboardMigrator {
       panelUpgrades.push(panel => {
         if (panel['options-gauge']) {
           panel.options = panel['options-gauge'];
+          panel.options.valueOptions = {
+            unit: panel.options.unit,
+            stat: panel.options.stat,
+            decimals: panel.options.decimals,
+            prefix: panel.options.prefix,
+            suffix: panel.options.suffix,
+          };
+          delete panel.options.unit;
+          delete panel.options.stat;
+          delete panel.options.decimals;
+          delete panel.options.prefix;
+          delete panel.options.suffix;
           delete panel['options-gauge'];
         }
       });

public/app/plugins/panel/gauge/GaugePanel.tsx

@@ -16,9 +16,10 @@ interface Props extends PanelProps<GaugeOptions> {}
 export class GaugePanel extends PureComponent<Props> {
   render() {
     const { panelData, width, height, onInterpolate, options } = this.props;
+    const { valueOptions } = options;
 
-    const prefix = onInterpolate(options.prefix);
-    const suffix = onInterpolate(options.suffix);
+    const prefix = onInterpolate(valueOptions.prefix);
+    const suffix = onInterpolate(valueOptions.suffix);
     let value: TimeSeriesValue;
 
     if (panelData.timeSeries) {
@@ -28,7 +29,7 @@ export class GaugePanel extends PureComponent<Props> {
       });
 
       if (vmSeries[0]) {
-        value = vmSeries[0].stats[options.stat];
+        value = vmSeries[0].stats[valueOptions.stat];
       } else {
         value = null;
       }
@@ -41,11 +42,14 @@ export class GaugePanel extends PureComponent<Props> {
         {theme => (
           <Gauge
             value={value}
-            {...this.props.options}
             width={width}
             height={height}
             prefix={prefix}
             suffix={suffix}
+            unit={valueOptions.unit}
+            decimals={valueOptions.decimals}
+            thresholds={options.thresholds}
+            valueMappings={options.valueMappings}
             theme={theme}
           />
         )}

public/app/plugins/panel/gauge/GaugePanelEditor.tsx

@@ -8,9 +8,9 @@ import {
   ValueMapping,
 } from '@grafana/ui';
 
-import { ValueOptions } from 'app/plugins/panel/gauge/ValueOptions';
+import { SingleStatValueEditor } from 'app/plugins/panel/gauge/SingleStatValueEditor';
 import { GaugeOptionsBox } from './GaugeOptionsBox';
-import { GaugeOptions } from './types';
+import { GaugeOptions, SingleStatValueOptions } from './types';
 
 export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOptions>> {
   onThresholdsChanged = (thresholds: Threshold[]) =>
@@ -25,13 +25,19 @@ export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOption
       valueMappings,
     });
 
+  onValueOptionsChanged = (valueOptions: SingleStatValueOptions) =>
+    this.props.onChange({
+      ...this.props.options,
+      valueOptions,
+    });
+
   render() {
     const { onChange, options } = this.props;
 
     return (
       <>
         <PanelOptionsGrid>
-          <ValueOptions onChange={onChange} options={options} />
+          <SingleStatValueEditor onChange={this.onValueOptionsChanged} options={options.valueOptions} />
           <GaugeOptionsBox onChange={onChange} options={options} />
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
         </PanelOptionsGrid>

public/app/plugins/panel/gauge/SingleStatValueEditor.tsx

@@ -6,8 +6,7 @@ import UnitPicker from 'app/core/components/Select/UnitPicker';
 import { FormField, FormLabel, PanelOptionsGroup, Select } from '@grafana/ui';
 
 // Types
-import { GaugeOptions } from './types';
-import { PanelEditorProps } from '@grafana/ui';
+import { SingleStatValueOptions } from './types';
 
 const statOptions = [
   { value: 'min', label: 'Min' },
@@ -25,9 +24,13 @@ const statOptions = [
 
 const labelWidth = 6;
 
-export class ValueOptions extends PureComponent<PanelEditorProps<GaugeOptions>> {
-  onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
+export interface Props {
+  options: SingleStatValueOptions;
+  onChange: (valueOptions: SingleStatValueOptions) => void;
+}
 
+export class SingleStatValueEditor extends PureComponent<Props> {
+  onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
   onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });
 
   onDecimalChange = event => {
@@ -37,7 +40,6 @@ export class ValueOptions extends PureComponent<PanelEditorProps<GaugeOptions>>
   };
 
   onPrefixChange = event => this.props.onChange({ ...this.props.options, prefix: event.target.value });
-
   onSuffixChange = event => this.props.onChange({ ...this.props.options, suffix: event.target.value });
 
   render() {

public/app/plugins/panel/gauge/types.ts

@@ -1,29 +1,35 @@
 import { Threshold, ValueMapping } from '@grafana/ui';
 
 export interface GaugeOptions {
-  decimals: number;
   valueMappings: ValueMapping[];
   maxValue: number;
   minValue: number;
-  prefix: string;
   showThresholdLabels: boolean;
   showThresholdMarkers: boolean;
-  stat: string;
-  suffix: string;
   thresholds: Threshold[];
+  valueOptions: SingleStatValueOptions;
+}
+
+export interface SingleStatValueOptions {
   unit: string;
+  suffix: string;
+  stat: string;
+  prefix: string;
+  decimals: number;
 }
 
 export const defaults: GaugeOptions = {
   minValue: 0,
   maxValue: 100,
-  prefix: '',
   showThresholdMarkers: true,
   showThresholdLabels: false,
-  suffix: '',
-  decimals: 0,
-  stat: 'avg',
-  unit: 'none',
+  valueOptions: {
+    prefix: '',
+    suffix: '',
+    decimals: 0,
+    stat: 'avg',
+    unit: 'none',
+  },
   valueMappings: [],
   thresholds: [],
 };