From 0fd96b951ae2b8fda8bedd1df05cf4477f548bf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Tue, 2 May 2017 09:55:18 +0200
Subject: [PATCH 1/3] wip: heatmap refactor

---
 .../app/plugins/panel/heatmap/axes_editor.ts  | 25 +++++++-
 .../app/plugins/panel/heatmap/heatmap_ctrl.ts |  8 +--
 public/app/plugins/panel/heatmap/module.html  |  1 -
 .../panel/heatmap/partials/axes_editor.html   | 58 ++++++-------------
 4 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/axes_editor.ts b/public/app/plugins/panel/heatmap/axes_editor.ts
index b8fcba871a7..2bf4ac05622 100644
--- a/public/app/plugins/panel/heatmap/axes_editor.ts
+++ b/public/app/plugins/panel/heatmap/axes_editor.ts
@@ -8,13 +8,14 @@ export class AxesEditorCtrl {
   unitFormats: any;
   logScales: any;
   dataFormats: any;
+  yBucketOptions: any[];
+  xBucketOptions: any[];
 
   /** @ngInject */
-  constructor($scope) {
+  constructor($scope, uiSegmentSrv) {
     $scope.editor = this;
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
-
     this.unitFormats = kbn.getUnitFormats();
 
     this.logScales = {
@@ -29,6 +30,26 @@ export class AxesEditorCtrl {
       'Time series': 'timeseries',
       'Time series Pre-bucketed': 'tsbuckets'
     };
+
+    this.yBucketOptions =  [
+      {text: '5',  value: '5'},
+      {text: '10', value: '10'},
+      {text: '20', value: '20'},
+      {text: '30', value: '30'},
+      {text: '50', value: '50'},
+    ];
+
+    this.xBucketOptions =  [
+      {text: '15', value: '15'},
+      {text: '20', value: '20'},
+      {text: '30', value: '30'},
+      {text: '50', value: '50'},
+      {text: '1m', value: '1m'},
+      {text: '5m', value: '5m'},
+      {text: '10m', value: '10m'},
+      {text: '20m', value: '20m'},
+      {text: '1h', value: '1h'},
+    ];
   }
 
   setUnitFormat(subItem) {
diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
index c0d3a7bd25d..8a7672f7a23 100644
--- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
@@ -28,12 +28,9 @@ let panelDefaults = {
     fillBackground: false
   },
   dataFormat: 'timeseries',
-  xBucketSize: null,
-  xBucketNumber: null,
-  yBucketSize: null,
-  yBucketNumber: null,
   xAxis: {
-    show: true
+    show: true,
+    buckets: 'auto',
   },
   yAxis: {
     show: true,
@@ -43,6 +40,7 @@ let panelDefaults = {
     splitFactor: null,
     min: null,
     max: null,
+    buckets: 'auto',
     removeZeroValues: false
   },
   tooltip: {
diff --git a/public/app/plugins/panel/heatmap/module.html b/public/app/plugins/panel/heatmap/module.html
index a59092b2687..6cb89f2e1f2 100644
--- a/public/app/plugins/panel/heatmap/module.html
+++ b/public/app/plugins/panel/heatmap/module.html
@@ -7,6 +7,5 @@
 
 		<div class="heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
 	</div>
-	<!-- <div class="graph-legend-wrapper" ng-if="ctrl.panel.legend.show" heatmap-legend></div> -->
 </div>
 <div class="clearfix"></div>
diff --git a/public/app/plugins/panel/heatmap/partials/axes_editor.html b/public/app/plugins/panel/heatmap/partials/axes_editor.html
index 161be2dab19..a8dd1a05473 100644
--- a/public/app/plugins/panel/heatmap/partials/axes_editor.html
+++ b/public/app/plugins/panel/heatmap/partials/axes_editor.html
@@ -1,12 +1,8 @@
 <div class="editor-row">
   <div class="section gf-form-group">
     <h5 class="section-heading">Y Axis</h5>
-    <gf-form-switch class="gf-form" label-class="width-5"
-      label="Show"
-      checked="ctrl.panel.yAxis.show" on-change="ctrl.render()">
-    </gf-form-switch>
     <div class="gf-form">
-      <label class="gf-form-label width-5">Unit</label>
+      <label class="gf-form-label width-6">Unit</label>
       <div class="gf-form-dropdown-typeahead max-width-15"
         ng-model="ctrl.panel.yAxis.format"
         dropdown-typeahead2="editor.unitFormats"
@@ -14,73 +10,55 @@
       </div>
     </div>
     <div class="gf-form">
-      <label class="gf-form-label width-5">Scale</label>
+      <label class="gf-form-label width-6">Scale</label>
       <div class="gf-form-select-wrapper max-width-15">
         <select class="gf-form-input" ng-model="ctrl.panel.yAxis.logBase" ng-options="v as k for (k, v) in editor.logScales" ng-change="ctrl.refresh()"></select>
       </div>
     </div>
     <div class="gf-form-inline">
-      <div class="gf-form max-width-10">
-        <label class="gf-form-label width-5">Y-Min</label>
-        <input type="text" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
+      <div class="gf-form">
+        <label class="gf-form-label width-6">Y-Min</label>
+        <input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
       </div>
-      <div class="gf-form max-width-10">
-        <label class="gf-form-label width-5">Y-Max</label>
-        <input type="text" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
+      <div class="gf-form">
+        <label class="gf-form-label">Y-Max</label>
+        <input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
       </div>
     </div>
     <div class="gf-form">
-      <label class="gf-form-label width-10">Decimals</label>
+      <label class="gf-form-label width-6">Decimals</label>
       <input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
         bs-tooltip="'Override automatic decimal precision for axis.'"
         ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
     </div>
     <div ng-show="ctrl.panel.yAxis.logBase === 1">
-      <div class="gf-form">
-        <label class="gf-form-label width-10">Buckets</label>
-        <input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
-          bs-tooltip="'Number of buckets for Y axis.'"
-          ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label width-10">Bucket Size</label>
-        <input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
-          bs-tooltip="'Size of bucket. Has priority over Buckets option.'"
-          ng-model="ctrl.panel.yBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
+      <div class="gf-form-inline">
+        <div class="gf-form">
+          <label class="gf-form-label width-6">Buckets
+            <info-popover mode="right-normal">Number of buckets for Y axis</info-popover>
+          </label>
+          <metric-segment-model css-class="width-10" property="ctrl.panel.yAxis.buckets" options="editor.yBucketOptions" on-change="ctrl.render()" select-mode="true"></metric-segment>
+        </div>
       </div>
     </div>
     <div ng-show="ctrl.panel.yAxis.logBase !== 1">
       <div class="gf-form">
-        <label class="gf-form-label width-10">Split Buckets</label>
+        <label class="gf-form-label width-7">Split Buckets</label>
         <input type="number" class="gf-form-input width-10" placeholder="1" data-placement="right"
           bs-tooltip="'For log scales only. By default Y values is splitted by integer powers of log base (1, 2, 4, 8, 16, ... for log2). This option allows to split each default bucket into specified number of buckets.'"
           ng-model="ctrl.panel.yAxis.splitFactor" ng-change="ctrl.refresh()" ng-model-onblur>
       </div>
-      <gf-form-switch class="gf-form" label-class="width-10"
-        label="Remove zero values"
-        checked="ctrl.panel.yAxis.removeZeroValues" on-change="ctrl.render()">
-      </gf-form-switch>
     </div>
   </div>
 
   <div class="section gf-form-group">
     <h5 class="section-heading">X Axis</h5>
-    <gf-form-switch class="gf-form" label-class="width-8"
-      label="Show"
-      checked="ctrl.panel.xAxis.show" on-change="ctrl.render()">
-    </gf-form-switch>
     <div class="gf-form">
-      <label class="gf-form-label width-8">Buckets</label>
+      <label class="gf-form-label width-6">Buckets</label>
       <input type="number" class="gf-form-input width-8" placeholder="auto" data-placement="right"
         bs-tooltip="'Number of buckets for X axis.'"
         ng-model="ctrl.panel.xBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
     </div>
-    <div class="gf-form">
-      <label class="gf-form-label width-8">Bucket Size</label>
-      <input type="text" class="gf-form-input width-8" placeholder="auto" data-placement="right"
-        bs-tooltip="'Size of bucket. Number or interval (10s, 5m, 1h, etc). Supported intervals: ms, s, m, h, d, w, M, y. Has priority over Buckets option.'"
-        ng-model="ctrl.panel.xBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
-    </div>
   </div>
 
   <div class="section gf-form-group">

From 61b51c0cbf09834a22ca0f228ecb0443b1e3d513 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Thu, 4 May 2017 16:03:47 +0200
Subject: [PATCH 2/3] heatmap: refactoring

---
 .../app/plugins/panel/heatmap/axes_editor.ts  | 24 +++----------
 .../panel/heatmap/partials/axes_editor.html   | 36 +++++++++++--------
 2 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/axes_editor.ts b/public/app/plugins/panel/heatmap/axes_editor.ts
index 2bf4ac05622..32ea66cc4d9 100644
--- a/public/app/plugins/panel/heatmap/axes_editor.ts
+++ b/public/app/plugins/panel/heatmap/axes_editor.ts
@@ -8,8 +8,7 @@ export class AxesEditorCtrl {
   unitFormats: any;
   logScales: any;
   dataFormats: any;
-  yBucketOptions: any[];
-  xBucketOptions: any[];
+  yBucketModes: any[];
 
   /** @ngInject */
   constructor($scope, uiSegmentSrv) {
@@ -31,24 +30,9 @@ export class AxesEditorCtrl {
       'Time series Pre-bucketed': 'tsbuckets'
     };
 
-    this.yBucketOptions =  [
-      {text: '5',  value: '5'},
-      {text: '10', value: '10'},
-      {text: '20', value: '20'},
-      {text: '30', value: '30'},
-      {text: '50', value: '50'},
-    ];
-
-    this.xBucketOptions =  [
-      {text: '15', value: '15'},
-      {text: '20', value: '20'},
-      {text: '30', value: '30'},
-      {text: '50', value: '50'},
-      {text: '1m', value: '1m'},
-      {text: '5m', value: '5m'},
-      {text: '10m', value: '10m'},
-      {text: '20m', value: '20m'},
-      {text: '1h', value: '1h'},
+    this.yBucketModes =  [
+      {text: 'Count',  value: 'count'},
+      {text: 'Interval', value: 'interval'},
     ];
   }
 
diff --git a/public/app/plugins/panel/heatmap/partials/axes_editor.html b/public/app/plugins/panel/heatmap/partials/axes_editor.html
index a8dd1a05473..933f3f08df1 100644
--- a/public/app/plugins/panel/heatmap/partials/axes_editor.html
+++ b/public/app/plugins/panel/heatmap/partials/axes_editor.html
@@ -3,7 +3,7 @@
     <h5 class="section-heading">Y Axis</h5>
     <div class="gf-form">
       <label class="gf-form-label width-6">Unit</label>
-      <div class="gf-form-dropdown-typeahead max-width-15"
+      <div class="gf-form-dropdown-typeahead max-width-10"
         ng-model="ctrl.panel.yAxis.format"
         dropdown-typeahead2="editor.unitFormats"
         dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
@@ -11,19 +11,17 @@
     </div>
     <div class="gf-form">
       <label class="gf-form-label width-6">Scale</label>
-      <div class="gf-form-select-wrapper max-width-15">
+      <div class="gf-form-select-wrapper max-width-10">
         <select class="gf-form-input" ng-model="ctrl.panel.yAxis.logBase" ng-options="v as k for (k, v) in editor.logScales" ng-change="ctrl.refresh()"></select>
       </div>
     </div>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-6">Y-Min</label>
-        <input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label">Y-Max</label>
-        <input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
-      </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-6">Y-Min</label>
+      <input type="text" class="gf-form-input width-10" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.min" ng-change="ctrl.render()" ng-model-onblur>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-6">Y-Max</label>
+      <input type="text" class="gf-form-input width-10" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
     </div>
     <div class="gf-form">
       <label class="gf-form-label width-6">Decimals</label>
@@ -34,10 +32,18 @@
     <div ng-show="ctrl.panel.yAxis.logBase === 1">
       <div class="gf-form-inline">
         <div class="gf-form">
-          <label class="gf-form-label width-6">Buckets
-            <info-popover mode="right-normal">Number of buckets for Y axis</info-popover>
-          </label>
-          <metric-segment-model css-class="width-10" property="ctrl.panel.yAxis.buckets" options="editor.yBucketOptions" on-change="ctrl.render()" select-mode="true"></metric-segment>
+          <label class="gf-form-label width-6">Bucket</label>
+          <div class="gf-form-select-wrapper width-7">
+            <select class="input-small gf-form-input" ng-model="ctrl.panel.yAxis.bucketMode" ng-options="f.value as f.text for f in editor.yBucketModes" ng-change="ctrl.render()"></select>
+          </div>
+          <input type="number"
+                 class="gf-form-input width-5"
+                 placeholder="auto"
+                 ng-model="ctrl.panel.yAxis.bucketCount"
+                 ng-change="ctrl.render()"
+                 ng-model-onblur>
+          </input>
+          <info-popover mode="right-normal">Number of buckets for Y axis</info-popover>
         </div>
       </div>
     </div>

From 5acabc6ccbfab78b7441e2894e0ba7513025ac29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Thu, 4 May 2017 19:56:20 +0200
Subject: [PATCH 3/3] heatmap: refactoring

---
 .../app/plugins/panel/heatmap/axes_editor.ts  |  6 --
 .../app/plugins/panel/heatmap/heatmap_ctrl.ts | 12 ++-
 .../panel/heatmap/partials/axes_editor.html   | 84 +++++++++++--------
 3 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/axes_editor.ts b/public/app/plugins/panel/heatmap/axes_editor.ts
index 32ea66cc4d9..46926697522 100644
--- a/public/app/plugins/panel/heatmap/axes_editor.ts
+++ b/public/app/plugins/panel/heatmap/axes_editor.ts
@@ -8,7 +8,6 @@ export class AxesEditorCtrl {
   unitFormats: any;
   logScales: any;
   dataFormats: any;
-  yBucketModes: any[];
 
   /** @ngInject */
   constructor($scope, uiSegmentSrv) {
@@ -29,11 +28,6 @@ export class AxesEditorCtrl {
       'Time series': 'timeseries',
       'Time series Pre-bucketed': 'tsbuckets'
     };
-
-    this.yBucketModes =  [
-      {text: 'Count',  value: 'count'},
-      {text: 'Interval', value: 'interval'},
-    ];
   }
 
   setUnitFormat(subItem) {
diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
index 8a7672f7a23..5c5f8b33efb 100644
--- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
@@ -30,7 +30,11 @@ let panelDefaults = {
   dataFormat: 'timeseries',
   xAxis: {
     show: true,
-    buckets: 'auto',
+    buckets: {
+      mode: 'count',
+      count: null,
+      size: null,
+    },
   },
   yAxis: {
     show: true,
@@ -40,7 +44,11 @@ let panelDefaults = {
     splitFactor: null,
     min: null,
     max: null,
-    buckets: 'auto',
+    buckets: {
+      mode: 'count',
+      count: null,
+      size: null,
+    },
     removeZeroValues: false
   },
   tooltip: {
diff --git a/public/app/plugins/panel/heatmap/partials/axes_editor.html b/public/app/plugins/panel/heatmap/partials/axes_editor.html
index 933f3f08df1..5841470f69c 100644
--- a/public/app/plugins/panel/heatmap/partials/axes_editor.html
+++ b/public/app/plugins/panel/heatmap/partials/axes_editor.html
@@ -4,9 +4,9 @@
     <div class="gf-form">
       <label class="gf-form-label width-6">Unit</label>
       <div class="gf-form-dropdown-typeahead max-width-10"
-        ng-model="ctrl.panel.yAxis.format"
-        dropdown-typeahead2="editor.unitFormats"
-        dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
+           ng-model="ctrl.panel.yAxis.format"
+           dropdown-typeahead2="editor.unitFormats"
+           dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
       </div>
     </div>
     <div class="gf-form">
@@ -26,54 +26,66 @@
     <div class="gf-form">
       <label class="gf-form-label width-6">Decimals</label>
       <input type="number" class="gf-form-input width-10" placeholder="auto" data-placement="right"
-        bs-tooltip="'Override automatic decimal precision for axis.'"
-        ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
+                                                                             bs-tooltip="'Override automatic decimal precision for axis.'"
+                                                                             ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
     </div>
+  </div>
+
+  <div class="section gf-form-group" ng-if="ctrl.panel.dataFormat == 'timeseries'">
+    <h5 class="section-heading">Buckets</h5>
     <div ng-show="ctrl.panel.yAxis.logBase === 1">
       <div class="gf-form-inline">
         <div class="gf-form">
-          <label class="gf-form-label width-6">Bucket</label>
-          <div class="gf-form-select-wrapper width-7">
-            <select class="input-small gf-form-input" ng-model="ctrl.panel.yAxis.bucketMode" ng-options="f.value as f.text for f in editor.yBucketModes" ng-change="ctrl.render()"></select>
-          </div>
-          <input type="number"
-                 class="gf-form-input width-5"
-                 placeholder="auto"
-                 ng-model="ctrl.panel.yAxis.bucketCount"
-                 ng-change="ctrl.render()"
-                 ng-model-onblur>
-          </input>
-          <info-popover mode="right-normal">Number of buckets for Y axis</info-popover>
+          <label class="gf-form-label">Y Axis</label>
+          <label class="gf-form-label">Buckets</label>
+          <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
+                                                                                bs-tooltip="'Number of buckets for Y axis.'"
+                                                                                ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
+        </div>
+        <div class="gf-form">
+          <label class="gf-form-label">Size</label>
+          <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
+                                                                                bs-tooltip="'Size of bucket. Has priority over Buckets option.'"
+                                                                                ng-model="ctrl.panel.yBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
+        </div>
+      </div>
+      <div class="gf-form-inline">
+        <div class="gf-form">
+          <label class="gf-form-label">X Axis</label>
+          <label class="gf-form-label">Buckets</label>
+          <input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right"
+                                                                                bs-tooltip="'Number of buckets for Y axis.'"
+                                                                                ng-model="ctrl.panel.yBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
+        </div>
+        <div class="gf-form">
+          <label class="gf-form-label">Size</label>
+          <input type="text" class="gf-form-input width-5" placeholder="auto" data-placement="right"
+                                                                              bs-tooltip="'Size of bucket. Number or interval (10s, 5m, 1h, etc). Supported intervals: ms, s, m, h, d, w, M, y. Has priority over Buckets option.'"
+                                                                              ng-model="ctrl.panel.xBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
         </div>
       </div>
     </div>
     <div ng-show="ctrl.panel.yAxis.logBase !== 1">
       <div class="gf-form">
-        <label class="gf-form-label width-7">Split Buckets</label>
-        <input type="number" class="gf-form-input width-10" placeholder="1" data-placement="right"
-          bs-tooltip="'For log scales only. By default Y values is splitted by integer powers of log base (1, 2, 4, 8, 16, ... for log2). This option allows to split each default bucket into specified number of buckets.'"
-          ng-model="ctrl.panel.yAxis.splitFactor" ng-change="ctrl.refresh()" ng-model-onblur>
+        <label class="gf-form-label width-7">Split Factor</label>
+        <input type="number"
+               class="gf-form-input width-3"
+               placeholder="1"
+               data-placement="right"
+               bs-tooltip="'For log scales only. By default Y values is splitted by integer powers of log base (1, 2, 4, 8, 16, ... for log2). This option allows to split each default bucket into specified number of buckets.'"
+               ng-model="ctrl.panel.yAxis.splitFactor" ng-change="ctrl.refresh()" ng-model-onblur>
+        </input>
       </div>
     </div>
   </div>
 
   <div class="section gf-form-group">
-    <h5 class="section-heading">X Axis</h5>
+    <h5 class="section-heading">Data format</h5>
     <div class="gf-form">
-      <label class="gf-form-label width-6">Buckets</label>
-      <input type="number" class="gf-form-input width-8" placeholder="auto" data-placement="right"
-        bs-tooltip="'Number of buckets for X axis.'"
-        ng-model="ctrl.panel.xBucketNumber" ng-change="ctrl.refresh()" ng-model-onblur>
-    </div>
-  </div>
-
-  <div class="section gf-form-group">
-  <h5 class="section-heading">Data format</h5>
-  <div class="gf-form">
-    <label class="gf-form-label width-5">Format</label>
-    <div class="gf-form-select-wrapper max-width-15">
-      <select class="gf-form-input" ng-model="ctrl.panel.dataFormat" ng-options="v as k for (k, v) in editor.dataFormats" ng-change="ctrl.render()"></select>
+      <label class="gf-form-label width-5">Format</label>
+      <div class="gf-form-select-wrapper max-width-15">
+        <select class="gf-form-input" ng-model="ctrl.panel.dataFormat" ng-options="v as k for (k, v) in editor.dataFormats" ng-change="ctrl.render()"></select>
+      </div>
     </div>
   </div>
 </div>
-</div>