use new settings

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

@@ -38,13 +38,13 @@ export class GaugePanel extends Component<Props, State> {
 
   findDisplayValue(props: Props): DisplayValue {
     const { replaceVariables, options } = this.props;
-    const { displayOptions } = options;
+    const { display } = options;
 
-    const prefix = replaceVariables(displayOptions.prefix);
-    const suffix = replaceVariables(displayOptions.suffix);
+    const prefix = replaceVariables(display.prefix);
+    const suffix = replaceVariables(display.suffix);
     return getValueProcessor({
       color: BasicGaugeColor.Red, // The default color
-      ...displayOptions,
+      ...display,
       prefix,
       suffix,
       // ??? theme:getTheme(GrafanaThemeType.Dark), !! how do I get it here???
@@ -72,6 +72,7 @@ export class GaugePanel extends Component<Props, State> {
   render() {
     const { width, height, options } = this.props;
     const { value } = this.state;
+    const { display } = options;
 
     return (
       <ThemeContext.Consumer>
@@ -80,7 +81,7 @@ export class GaugePanel extends Component<Props, State> {
             value={value}
             width={width}
             height={height}
-            thresholds={options.thresholds}
+            thresholds={display.thresholds}
             showThresholdLabels={options.showThresholdLabels}
             showThresholdMarkers={options.showThresholdMarkers}
             minValue={options.minValue}

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

@@ -10,37 +10,32 @@ import {
 
 import { SingleStatValueEditor } from 'app/plugins/panel/gauge/SingleStatValueEditor';
 import { GaugeOptionsBox } from './GaugeOptionsBox';
-import { GaugeOptions, SingleStatValueOptions } from './types';
+import { GaugeOptions } from './types';
 import { DisplayValueEditor } from './DisplayValueEditor';
 import { DisplayValueOptions } from '@grafana/ui/src/utils/valueProcessor';
 
 export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOptions>> {
-  onThresholdsChanged = (thresholds: Threshold[]) =>
-    this.props.onOptionsChange({
-      ...this.props.options,
-      thresholds,
-    });
-
-  onValueMappingsChanged = (valueMappings: ValueMapping[]) =>
+  onDisplayOptionsChanged = (displayOptions: DisplayValueOptions) =>
     this.props.onOptionsChange({
       ...this.props.options,
-      valueMappings,
+      display: displayOptions,
     });
 
-  onValueOptionsChanged = (valueOptions: SingleStatValueOptions) =>
-    this.props.onOptionsChange({
-      ...this.props.options,
-      valueOptions,
+  onThresholdsChanged = (thresholds: Threshold[]) =>
+    this.onDisplayOptionsChanged({
+      ...this.props.options.display,
+      thresholds,
     });
 
-  onDisplayOptionsChanged = (displayOptions: DisplayValueOptions) =>
-    this.props.onOptionsChange({
-      ...this.props.options,
-      displayOptions,
+  onValueMappingsChanged = (valueMappings: ValueMapping[]) =>
+    this.onDisplayOptionsChanged({
+      ...this.props.options.display,
+      mappings: valueMappings,
     });
 
   render() {
     const { onOptionsChange, options } = this.props;
+    const { display } = options;
 
     return (
       <>
@@ -48,12 +43,12 @@ export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOption
           {/* This just sets the 'stats', that should be moved to somethign more general */}
           <SingleStatValueEditor onChange={onOptionsChange} options={options} />
 
-          <DisplayValueEditor onChange={this.onDisplayOptionsChanged} options={options.displayOptions} />
+          <DisplayValueEditor onChange={this.onDisplayOptionsChanged} options={display} />
           <GaugeOptionsBox onOptionsChange={onOptionsChange} options={options} />
-          <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
+          <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={display.thresholds} />
         </PanelOptionsGrid>
 
-        <ValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={options.valueMappings} />
+        <ValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={display.mappings} />
       </>
     );
   }

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

@@ -8,7 +8,7 @@ export interface GaugeOptions {
   showThresholdMarkers: boolean;
 
   stat: string;
-  displayOptions: DisplayValueOptions;
+  display: DisplayValueOptions;
 
   // TODO: migrate to DisplayValueOptions
   thresholds?: Threshold[];
@@ -32,7 +32,7 @@ export const defaults: GaugeOptions = {
   showThresholdLabels: false,
 
   stat: 'avg',
-  displayOptions: {
+  display: {
     prefix: '',
     suffix: '',
     decimals: null,