Fixed issue with OpenTSDB editor and checkboxes, Fixes #1559

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));
+        }
+      };
+    });
+
 });
 });

src/app/plugins/datasource/opentsdb/partials/query.editor.html

@@ -131,10 +131,7 @@
         </li>
         </li>
 
 
 				<li class="tight-form-item">
 				<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>
 				</li>
 
 
 			</ul>
 			</ul>
@@ -198,17 +195,11 @@
 				</li>
 				</li>
 
 
 				<li class="tight-form-item" style="width: 86px">
 				<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>
 
 
         <li class="tight-form-item" ng-hide="!target.shouldComputeRate">
         <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>
 
 
 				<li class="tight-form-item" ng-hide="!target.isCounter">
 				<li class="tight-form-item" ng-hide="!target.isCounter">

src/css/less/tightform.less

@@ -17,6 +17,12 @@
     background: transparent;
     background: transparent;
     border: none;
     border: none;
   }
   }
+
+  .checkbox-label {
+    display: inline;
+    padding-right: 4px;
+    margin-bottom: 0;
+  }
 }
 }
 
 
 .spaced-form {
 .spaced-form {