From 77d709d9dff5e2bb200b7c5d705eda25ddf72124 Mon Sep 17 00:00:00 2001
From: ryan <ryantxu@gmail.com>
Date: Mon, 4 Mar 2019 11:21:05 -0800
Subject: [PATCH 1/2] use updateOptions rather than onChange

---
 packages/grafana-ui/src/types/panel.ts                 |  2 +-
 .../dashboard/panel_editor/VisualizationTab.tsx        |  2 +-
 public/app/plugins/panel/gauge/GaugeOptionsBox.tsx     |  8 ++++----
 public/app/plugins/panel/gauge/GaugePanelEditor.tsx    | 10 +++++-----
 public/app/plugins/panel/graph2/GraphPanelEditor.tsx   |  6 +++---
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts
index 2da48b0fec6..0cd4bb8a1a4 100644
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/packages/grafana-ui/src/types/panel.ts
@@ -22,7 +22,7 @@ export interface PanelData {
 
 export interface PanelEditorProps<T = any> {
   options: T;
-  onChange: (options: T) => void;
+  updateOptions: (options: T) => void;
 }
 
 export class ReactPanelPlugin<TOptions = any> {
diff --git a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
index 8a904961a4f..41fc5988256 100644
--- a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
+++ b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
@@ -66,7 +66,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
       const PanelEditor = plugin.exports.reactPanel.editor;
 
       if (PanelEditor) {
-        return <PanelEditor options={this.getReactPanelOptions()} onChange={this.onPanelOptionsChanged} />;
+        return <PanelEditor options={this.getReactPanelOptions()} updateOptions={this.onPanelOptionsChanged} />;
       }
     }
 
diff --git a/public/app/plugins/panel/gauge/GaugeOptionsBox.tsx b/public/app/plugins/panel/gauge/GaugeOptionsBox.tsx
index b5d6acca806..ea2f10f4629 100644
--- a/public/app/plugins/panel/gauge/GaugeOptionsBox.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptionsBox.tsx
@@ -10,14 +10,14 @@ import { GaugeOptions } from './types';
 
 export class GaugeOptionsBox extends PureComponent<PanelEditorProps<GaugeOptions>> {
   onToggleThresholdLabels = () =>
-    this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
+    this.props.updateOptions({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
 
   onToggleThresholdMarkers = () =>
-    this.props.onChange({ ...this.props.options, showThresholdMarkers: !this.props.options.showThresholdMarkers });
+    this.props.updateOptions({ ...this.props.options, showThresholdMarkers: !this.props.options.showThresholdMarkers });
 
-  onMinValueChange = ({ target }) => this.props.onChange({ ...this.props.options, minValue: target.value });
+  onMinValueChange = ({ target }) => this.props.updateOptions({ ...this.props.options, minValue: target.value });
 
-  onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
+  onMaxValueChange = ({ target }) => this.props.updateOptions({ ...this.props.options, maxValue: target.value });
 
   render() {
     const { options } = this.props;
diff --git a/public/app/plugins/panel/gauge/GaugePanelEditor.tsx b/public/app/plugins/panel/gauge/GaugePanelEditor.tsx
index 63031f9d895..0109de33fc5 100644
--- a/public/app/plugins/panel/gauge/GaugePanelEditor.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelEditor.tsx
@@ -14,31 +14,31 @@ import { GaugeOptions, SingleStatValueOptions } from './types';
 
 export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOptions>> {
   onThresholdsChanged = (thresholds: Threshold[]) =>
-    this.props.onChange({
+    this.props.updateOptions({
       ...this.props.options,
       thresholds,
     });
 
   onValueMappingsChanged = (valueMappings: ValueMapping[]) =>
-    this.props.onChange({
+    this.props.updateOptions({
       ...this.props.options,
       valueMappings,
     });
 
   onValueOptionsChanged = (valueOptions: SingleStatValueOptions) =>
-    this.props.onChange({
+    this.props.updateOptions({
       ...this.props.options,
       valueOptions,
     });
 
   render() {
-    const { onChange, options } = this.props;
+    const { updateOptions, options } = this.props;
 
     return (
       <>
         <PanelOptionsGrid>
           <SingleStatValueEditor onChange={this.onValueOptionsChanged} options={options.valueOptions} />
-          <GaugeOptionsBox onChange={onChange} options={options} />
+          <GaugeOptionsBox updateOptions={updateOptions} options={options} />
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
         </PanelOptionsGrid>
 
diff --git a/public/app/plugins/panel/graph2/GraphPanelEditor.tsx b/public/app/plugins/panel/graph2/GraphPanelEditor.tsx
index 80b17ccd5c4..9141324274a 100644
--- a/public/app/plugins/panel/graph2/GraphPanelEditor.tsx
+++ b/public/app/plugins/panel/graph2/GraphPanelEditor.tsx
@@ -8,15 +8,15 @@ import { Options } from './types';
 
 export class GraphPanelEditor extends PureComponent<PanelEditorProps<Options>> {
   onToggleLines = () => {
-    this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines });
+    this.props.updateOptions({ ...this.props.options, showLines: !this.props.options.showLines });
   };
 
   onToggleBars = () => {
-    this.props.onChange({ ...this.props.options, showBars: !this.props.options.showBars });
+    this.props.updateOptions({ ...this.props.options, showBars: !this.props.options.showBars });
   };
 
   onTogglePoints = () => {
-    this.props.onChange({ ...this.props.options, showPoints: !this.props.options.showPoints });
+    this.props.updateOptions({ ...this.props.options, showPoints: !this.props.options.showPoints });
   };
 
   render() {

From 3d165284590d25352b0f9969368639859e04e5c6 Mon Sep 17 00:00:00 2001
From: ryan <ryantxu@gmail.com>
Date: Mon, 4 Mar 2019 12:35:24 -0800
Subject: [PATCH 2/2] use onOptionsChange

---
 packages/grafana-ui/src/types/panel.ts                |  2 +-
 .../dashboard/panel_editor/VisualizationTab.tsx       |  2 +-
 public/app/plugins/panel/gauge/GaugeOptionsBox.tsx    | 11 +++++++----
 public/app/plugins/panel/gauge/GaugePanelEditor.tsx   | 10 +++++-----
 public/app/plugins/panel/graph2/GraphPanelEditor.tsx  |  6 +++---
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts
index 0cd4bb8a1a4..81068083803 100644
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/packages/grafana-ui/src/types/panel.ts
@@ -22,7 +22,7 @@ export interface PanelData {
 
 export interface PanelEditorProps<T = any> {
   options: T;
-  updateOptions: (options: T) => void;
+  onOptionsChange: (options: T) => void;
 }
 
 export class ReactPanelPlugin<TOptions = any> {
diff --git a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
index 41fc5988256..5330baf1be6 100644
--- a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
+++ b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
@@ -66,7 +66,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
       const PanelEditor = plugin.exports.reactPanel.editor;
 
       if (PanelEditor) {
-        return <PanelEditor options={this.getReactPanelOptions()} updateOptions={this.onPanelOptionsChanged} />;
+        return <PanelEditor options={this.getReactPanelOptions()} onOptionsChange={this.onPanelOptionsChanged} />;
       }
     }
 
diff --git a/public/app/plugins/panel/gauge/GaugeOptionsBox.tsx b/public/app/plugins/panel/gauge/GaugeOptionsBox.tsx
index ea2f10f4629..bb3043ddd8b 100644
--- a/public/app/plugins/panel/gauge/GaugeOptionsBox.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptionsBox.tsx
@@ -10,14 +10,17 @@ import { GaugeOptions } from './types';
 
 export class GaugeOptionsBox extends PureComponent<PanelEditorProps<GaugeOptions>> {
   onToggleThresholdLabels = () =>
-    this.props.updateOptions({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
+    this.props.onOptionsChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
 
   onToggleThresholdMarkers = () =>
-    this.props.updateOptions({ ...this.props.options, showThresholdMarkers: !this.props.options.showThresholdMarkers });
+    this.props.onOptionsChange({
+      ...this.props.options,
+      showThresholdMarkers: !this.props.options.showThresholdMarkers,
+    });
 
-  onMinValueChange = ({ target }) => this.props.updateOptions({ ...this.props.options, minValue: target.value });
+  onMinValueChange = ({ target }) => this.props.onOptionsChange({ ...this.props.options, minValue: target.value });
 
-  onMaxValueChange = ({ target }) => this.props.updateOptions({ ...this.props.options, maxValue: target.value });
+  onMaxValueChange = ({ target }) => this.props.onOptionsChange({ ...this.props.options, maxValue: target.value });
 
   render() {
     const { options } = this.props;
diff --git a/public/app/plugins/panel/gauge/GaugePanelEditor.tsx b/public/app/plugins/panel/gauge/GaugePanelEditor.tsx
index 0109de33fc5..f226be7328c 100644
--- a/public/app/plugins/panel/gauge/GaugePanelEditor.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelEditor.tsx
@@ -14,31 +14,31 @@ import { GaugeOptions, SingleStatValueOptions } from './types';
 
 export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOptions>> {
   onThresholdsChanged = (thresholds: Threshold[]) =>
-    this.props.updateOptions({
+    this.props.onOptionsChange({
       ...this.props.options,
       thresholds,
     });
 
   onValueMappingsChanged = (valueMappings: ValueMapping[]) =>
-    this.props.updateOptions({
+    this.props.onOptionsChange({
       ...this.props.options,
       valueMappings,
     });
 
   onValueOptionsChanged = (valueOptions: SingleStatValueOptions) =>
-    this.props.updateOptions({
+    this.props.onOptionsChange({
       ...this.props.options,
       valueOptions,
     });
 
   render() {
-    const { updateOptions, options } = this.props;
+    const { onOptionsChange, options } = this.props;
 
     return (
       <>
         <PanelOptionsGrid>
           <SingleStatValueEditor onChange={this.onValueOptionsChanged} options={options.valueOptions} />
-          <GaugeOptionsBox updateOptions={updateOptions} options={options} />
+          <GaugeOptionsBox onOptionsChange={onOptionsChange} options={options} />
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
         </PanelOptionsGrid>
 
diff --git a/public/app/plugins/panel/graph2/GraphPanelEditor.tsx b/public/app/plugins/panel/graph2/GraphPanelEditor.tsx
index 9141324274a..1a64290759c 100644
--- a/public/app/plugins/panel/graph2/GraphPanelEditor.tsx
+++ b/public/app/plugins/panel/graph2/GraphPanelEditor.tsx
@@ -8,15 +8,15 @@ import { Options } from './types';
 
 export class GraphPanelEditor extends PureComponent<PanelEditorProps<Options>> {
   onToggleLines = () => {
-    this.props.updateOptions({ ...this.props.options, showLines: !this.props.options.showLines });
+    this.props.onOptionsChange({ ...this.props.options, showLines: !this.props.options.showLines });
   };
 
   onToggleBars = () => {
-    this.props.updateOptions({ ...this.props.options, showBars: !this.props.options.showBars });
+    this.props.onOptionsChange({ ...this.props.options, showBars: !this.props.options.showBars });
   };
 
   onTogglePoints = () => {
-    this.props.updateOptions({ ...this.props.options, showPoints: !this.props.options.showPoints });
+    this.props.onOptionsChange({ ...this.props.options, showPoints: !this.props.options.showPoints });
   };
 
   render() {