From af9dc4c277c565e649ac611d49543cb5f35ca572 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Thu, 5 Mar 2015 11:00:47 +0100
Subject: [PATCH] Fixed issue with OpenTSDB editor and checkboxes, Fixes #1559

---
 src/app/directives/tip.js                     | 20 +++++++++++++++++++
 .../opentsdb/partials/query.editor.html       | 15 +++-----------
 src/css/less/tightform.less                   |  6 ++++++
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/app/directives/tip.js b/src/app/directives/tip.js
index a0aac161bb2..fa234e8b8bc 100644
--- a/src/app/directives/tip.js
+++ b/src/app/directives/tip.js
@@ -55,4 +55,24 @@ function (angular, kbn) {
       };
     });
 
+  angular
+    .module('grafana.directives')
+    .directive('editorCheckbox', function($compile) {
+      return {
+        restrict: 'E',
+        link: function(scope, elem, attrs) {
+          var ngchange = attrs.change ? (' ng-change="' + attrs.change + '"') : '';
+          var tip = attrs.tip ? (' <tip>' + attrs.tip + '</tip>') : '';
+
+          var template = '<label for="' + scope.$id + attrs.model + '" class="checkbox-label">' +
+                           attrs.text + tip + '</label>' +
+                          '<input class="cr1" id="' + scope.$id + attrs.model + '" type="checkbox" ' +
+                          '       ng-model="' + attrs.model + '"' + ngchange +
+                          '       ng-checked="' + attrs.model + '"></input>' +
+                          ' <label for="' + scope.$id + attrs.model + '" class="cr1"></label>';
+          elem.replaceWith($compile(angular.element(template))(scope));
+        }
+      };
+    });
+
 });
diff --git a/src/app/plugins/datasource/opentsdb/partials/query.editor.html b/src/app/plugins/datasource/opentsdb/partials/query.editor.html
index b732d999719..79dd6cd5ffd 100644
--- a/src/app/plugins/datasource/opentsdb/partials/query.editor.html
+++ b/src/app/plugins/datasource/opentsdb/partials/query.editor.html
@@ -131,10 +131,7 @@
         </li>
 
 				<li class="tight-form-item">
-					Disable downsampling&nbsp;
-					<input class="cr1" id="target.disableDownsampling" type="checkbox"
-					ng-model="target.disableDownsampling" ng-checked="target.disableDownsampling" ng-change="targetBlur()">
-					<label for="target.disableDownsampling" class="cr1"></label>
+					<editor-checkbox text="Disable downsampling" model="target.disableDownsampling" change="targetBlur()"></editor-checkbox>
 				</li>
 
 			</ul>
@@ -198,17 +195,11 @@
 				</li>
 
 				<li class="tight-form-item" style="width: 86px">
-					Rate&nbsp;
-					<input class="cr1" id="target.shouldComputeRate" type="checkbox"
-					ng-model="target.shouldComputeRate" ng-checked="target.shouldComputeRate" ng-change="targetBlur()">
-					<label for="target.shouldComputeRate" class="cr1"></label>
+					<editor-checkbox text="Rate" model="target.shouldComputeRate" change="targetBlur()"></editor-checkbox>
 				</li>
 
         <li class="tight-form-item" ng-hide="!target.shouldComputeRate">
-					Counter&nbsp;
-					<input class="cr1" id="target.isCounter" type="checkbox"
-					ng-model="target.isCounter" ng-checked="target.isCounter" ng-change="targetBlur()">
-					<label for="target.isCounter" class="cr1"></label>
+					<editor-checkbox text="Counter" model="target.isCounter" change="targetBlur()"></editor-checkbox>
 				</li>
 
 				<li class="tight-form-item" ng-hide="!target.isCounter">
diff --git a/src/css/less/tightform.less b/src/css/less/tightform.less
index 387420b6c49..6f83c7c5466 100644
--- a/src/css/less/tightform.less
+++ b/src/css/less/tightform.less
@@ -17,6 +17,12 @@
     background: transparent;
     border: none;
   }
+
+  .checkbox-label {
+    display: inline;
+    padding-right: 4px;
+    margin-bottom: 0;
+  }
 }
 
 .spaced-form {