From 0fd92ef6fbd092c2f1f8ce7e38231af2eb24e070 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 17 Dec 2018 13:55:25 +0100
Subject: [PATCH 1/2] Refactoring react graph

---
 .../app/plugins/panel/graph2/GraphOptions.tsx | 54 +++++++++++
 .../app/plugins/panel/graph2/GraphPanel.tsx   | 43 +++++++++
 public/app/plugins/panel/graph2/module.tsx    | 92 +------------------
 public/app/plugins/panel/graph2/types.ts      |  5 +
 4 files changed, 105 insertions(+), 89 deletions(-)
 create mode 100644 public/app/plugins/panel/graph2/GraphOptions.tsx
 create mode 100644 public/app/plugins/panel/graph2/GraphPanel.tsx
 create mode 100644 public/app/plugins/panel/graph2/types.ts

diff --git a/public/app/plugins/panel/graph2/GraphOptions.tsx b/public/app/plugins/panel/graph2/GraphOptions.tsx
new file mode 100644
index 00000000000..2272cdc7aef
--- /dev/null
+++ b/public/app/plugins/panel/graph2/GraphOptions.tsx
@@ -0,0 +1,54 @@
+//// Libraries
+import _ from 'lodash';
+import React, { PureComponent } from 'react';
+
+// Components
+import { Switch } from 'app/core/components/Switch/Switch';
+
+// Types
+import { PanelOptionsProps } from 'app/types';
+import { Options } from './types';
+
+export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
+  onToggleLines = () => {
+    this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines });
+  };
+
+  onToggleBars = () => {
+    this.props.onChange({ ...this.props.options, showBars: !this.props.options.showBars });
+  };
+
+  onTogglePoints = () => {
+    this.props.onChange({ ...this.props.options, showPoints: !this.props.options.showPoints });
+  };
+
+  render() {
+    const { showBars, showPoints, showLines } = this.props.options;
+
+    return (
+      <div>
+        <div className="form-option-box">
+          <div className="form-option-box__header">Display Options</div>
+          <div className="section gf-form-group">
+            <h5 className="section-heading">Draw Modes</h5>
+            <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
+            <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
+            <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
+          </div>
+          <div className="section gf-form-group">
+            <h5 className="section-heading">Test Options</h5>
+            <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
+            <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
+            <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
+          </div>
+        </div>
+        <div className="form-option-box">
+          <div className="form-option-box__header">Axes</div>
+        </div>
+        <div className="form-option-box">
+          <div className="form-option-box__header">Thresholds</div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx
new file mode 100644
index 00000000000..a7ef45e5428
--- /dev/null
+++ b/public/app/plugins/panel/graph2/GraphPanel.tsx
@@ -0,0 +1,43 @@
+// Libraries
+import _ from 'lodash';
+import React, { PureComponent } from 'react';
+
+// Components
+import Graph from 'app/viz/Graph';
+
+// Services & Utils
+import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
+
+// Types
+import { PanelProps, NullValueMode } from 'app/types';
+import { Options } from './types';
+
+interface Props extends PanelProps<Options> {}
+
+export class GraphPanel extends PureComponent<Props> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { timeSeries, timeRange, width, height } = this.props;
+    const { showLines, showBars, showPoints } = this.props.options;
+
+    const vmSeries = getTimeSeriesVMs({
+      timeSeries: timeSeries,
+      nullValueMode: NullValueMode.Ignore,
+    });
+
+    return (
+      <Graph
+        timeSeries={vmSeries}
+        timeRange={timeRange}
+        showLines={showLines}
+        showPoints={showPoints}
+        showBars={showBars}
+        width={width}
+        height={height}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx
index f2c1344d782..ba761ca92cb 100644
--- a/public/app/plugins/panel/graph2/module.tsx
+++ b/public/app/plugins/panel/graph2/module.tsx
@@ -1,90 +1,4 @@
-import _ from 'lodash';
-import React, { PureComponent } from 'react';
+import { GraphPanel } from './GraphPanel';
+import { GraphOptions } from './GraphOptions';
 
-import Graph from 'app/viz/Graph';
-import { Switch } from 'app/core/components/Switch/Switch';
-
-import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
-import { PanelProps, PanelOptionsProps, NullValueMode } from 'app/types';
-
-interface Options {
-  showBars: boolean;
-  showLines: boolean;
-  showPoints: boolean;
-}
-
-interface Props extends PanelProps<Options> {}
-
-export class Graph2 extends PureComponent<Props> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { timeSeries, timeRange, width, height } = this.props;
-    const { showLines, showBars, showPoints } = this.props.options;
-
-    const vmSeries = getTimeSeriesVMs({
-      timeSeries: timeSeries,
-      nullValueMode: NullValueMode.Ignore,
-    });
-
-    return (
-      <Graph
-        timeSeries={vmSeries}
-        timeRange={timeRange}
-        showLines={showLines}
-        showPoints={showPoints}
-        showBars={showBars}
-        width={width}
-        height={height}
-      />
-    );
-  }
-}
-
-export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
-  onToggleLines = () => {
-    this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines });
-  };
-
-  onToggleBars = () => {
-    this.props.onChange({ ...this.props.options, showBars: !this.props.options.showBars });
-  };
-
-  onTogglePoints = () => {
-    this.props.onChange({ ...this.props.options, showPoints: !this.props.options.showPoints });
-  };
-
-  render() {
-    const { showBars, showPoints, showLines } = this.props.options;
-
-    return (
-      <div>
-        <div className="form-option-box">
-          <div className="form-option-box__header">Display Options</div>
-          <div className="section gf-form-group">
-            <h5 className="section-heading">Draw Modes</h5>
-            <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
-            <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
-            <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
-          </div>
-          <div className="section gf-form-group">
-            <h5 className="section-heading">Test Options</h5>
-            <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
-            <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
-            <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
-          </div>
-        </div>
-        <div className="form-option-box">
-          <div className="form-option-box__header">Axes</div>
-        </div>
-        <div className="form-option-box">
-          <div className="form-option-box__header">Thresholds</div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export { Graph2 as Panel, GraphOptions as PanelOptions };
+export { GraphPanel as Panel, GraphOptions as PanelOptions };
diff --git a/public/app/plugins/panel/graph2/types.ts b/public/app/plugins/panel/graph2/types.ts
new file mode 100644
index 00000000000..b9baaa09cd7
--- /dev/null
+++ b/public/app/plugins/panel/graph2/types.ts
@@ -0,0 +1,5 @@
+export interface Options {
+  showBars: boolean;
+  showLines: boolean;
+  showPoints: boolean;
+}

From 0fe452ec26bdbf6fab1b280e01252b902076743b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 17 Dec 2018 15:38:51 +0100
Subject: [PATCH 2/2] Minor react graph panel refactorings and fixes

---
 public/app/core/components/Switch/Switch.tsx  |  2 +-
 .../app/plugins/panel/graph2/GraphOptions.tsx | 29 +++++++------------
 2 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/public/app/core/components/Switch/Switch.tsx b/public/app/core/components/Switch/Switch.tsx
index 5cb7617c89c..d53a3d68878 100644
--- a/public/app/core/components/Switch/Switch.tsx
+++ b/public/app/core/components/Switch/Switch.tsx
@@ -32,7 +32,7 @@ export class Switch extends PureComponent<Props, State> {
     const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
 
     return (
-      <label htmlFor={labelId} className="gf-form-switch-container">
+      <label htmlFor={labelId} className="gf-form gf-form-switch-container">
         {label && <div className={labelClassName}>{label}</div>}
         <div className={switchClassName}>
           <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
diff --git a/public/app/plugins/panel/graph2/GraphOptions.tsx b/public/app/plugins/panel/graph2/GraphOptions.tsx
index 2272cdc7aef..e87c03da634 100644
--- a/public/app/plugins/panel/graph2/GraphOptions.tsx
+++ b/public/app/plugins/panel/graph2/GraphOptions.tsx
@@ -27,26 +27,17 @@ export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
 
     return (
       <div>
-        <div className="form-option-box">
-          <div className="form-option-box__header">Display Options</div>
-          <div className="section gf-form-group">
-            <h5 className="section-heading">Draw Modes</h5>
-            <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
-            <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
-            <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
-          </div>
-          <div className="section gf-form-group">
-            <h5 className="section-heading">Test Options</h5>
-            <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
-            <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
-            <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
-          </div>
+        <div className="section gf-form-group">
+          <h5 className="section-heading">Draw Modes</h5>
+          <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
+          <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
+          <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
         </div>
-        <div className="form-option-box">
-          <div className="form-option-box__header">Axes</div>
-        </div>
-        <div className="form-option-box">
-          <div className="form-option-box__header">Thresholds</div>
+        <div className="section gf-form-group">
+          <h5 className="section-heading">Test Options</h5>
+          <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
+          <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
+          <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
         </div>
       </div>
     );