feat(mixed datasource): fixing varios issues with the query editor changes, updated kariosdb data source editor to work with the new model, #436

public/app/directives/giveFocus.js

@@ -16,8 +16,11 @@ function (angular) {
         }
         setTimeout(function() {
           element.focus();
+          var domEl = element[0];
+          if (domEl.setSelectionRange) {
             var pos = element.val().length * 2;
-          element[0].setSelectionRange(pos, pos);
+            domEl.setSelectionRange(pos, pos);
+          }
         }, 200);
       },true);
     };

public/app/directives/metric.segment.js

@@ -15,7 +15,7 @@ function (angular, app, _, $) {
                             ' spellcheck="false" style="display:none"></input>';
 
       var buttonTemplate = '<a class="tight-form-item" ng-class="segment.cssClass" ' +
-        'tabindex="1" focus-me="segment.focus" ng-bind-html="segment.html"></a>';
+        'tabindex="1" give-focus="segment.focus" ng-bind-html="segment.html"></a>';
 
       return {
         scope: {

public/app/plugins/datasource/influxdb/partials/query.editor.html

@@ -49,7 +49,7 @@
 
 		<ul class="tight-form-list">
 			<li class="tight-form-item" style="min-width: 15px; text-align: center">
-				{{targetLetters[$index]}}
+				{{target.refId}}
 			</li>
 			<li>
 				<a  class="tight-form-item"

public/app/plugins/datasource/influxdb_08/partials/query.editor.html

@@ -24,6 +24,9 @@
 	</ul>
 
 	<ul class="tight-form-list">
+		<li class="tight-form-item" style="min-width: 15px; text-align: center">
+			{{target.refId}}
+		</li>
 		<li>
 			<a class="tight-form-item" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
 				<i class="fa fa-eye"></i>
@@ -81,10 +84,7 @@
 <div class="tight-form">
 	<!-- Raw Query mode  -->
 	<ul class="tight-form-list" ng-show="target.rawQuery">
-		<li class="tight-form-item">
+		<li class="tight-form-item tight-form-align">
-			<i class="fa fa-eye invisible"></i>
-		</li>
-		<li class="tight-form-item">
 			alias
 		</li>
 		<li>
@@ -108,10 +108,7 @@
 
 	<!-- Query editor mode -->
 	<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
-		<li class="tight-form-item">
+		<li class="tight-form-item tight-form-align">
-			<i class="fa fa-eye invisible"></i>
-		</li>
-		<li class="tight-form-item">
 			select
 		</li>
 		<li class="dropdown">

public/app/plugins/datasource/kairosdb/datasource.js

@@ -3,6 +3,7 @@ define([
   'lodash',
   'kbn',
   './queryCtrl',
+  './directives',
 ],
 function (angular, _, kbn) {
   'use strict';

public/app/plugins/datasource/kairosdb/directives.js

@@ -0,0 +1,17 @@
+define([
+  'angular',
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('grafana.directives');
+
+  module.directive('metricQueryEditorKairosdb', function() {
+    return {controller: 'KairosDBQueryCtrl', templateUrl: 'app/plugins/datasource/kairosdb/partials/query.editor.html'};
+  });
+
+  module.directive('metricQueryOptionsKairosdb', function() {
+    return {templateUrl: 'app/plugins/datasource/kairosdb/partials/query.options.html'};
+  });
+
+});

public/app/plugins/datasource/kairosdb/partials/query.editor.html

@@ -1,17 +1,8 @@
-<div class="editor-row">
+<div class="tight-form">
-	<div ng-repeat="target in panel.targets"
-		class="tight-form-container"
-		ng-class="{'tight-form-disabled': target.hide}"
-		ng-controller="KairosDBQueryCtrl"
-		ng-init="init()">
-
-		<div class="tight-form">
 	<ul class="tight-form-list pull-right">
 		<li class="tight-form-item">
 			<div class="dropdown">
-						<a  class="pointer dropdown-toggle"
+				<a  class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
-							data-toggle="dropdown"
-							tabindex="1">
 					<i class="fa fa-bars"></i>
 				</a>
 				<ul class="dropdown-menu pull-right" role="menu">
@@ -29,6 +20,9 @@
 	</ul>
 
 	<ul class="tight-form-list">
+		<li class="tight-form-item" style="min-width: 15px; text-align: center">
+			{{target.refId}}
+		</li>
 		<li>
 			<a class="tight-form-item" ng-click="target.hide = !target.hide; targetBlur();" role="menuitem">
 				<i class="fa fa-eye"></i>
@@ -38,15 +32,13 @@
 			Metric
 		</li>
 		<li>
-					<input type="text"
+			<input type="text" class="input-large tight-form-input"
-						   class="input-large tight-form-input"
 			ng-model="target.metric"
 			spellcheck="false"
 			bs-typeahead="suggestMetrics"
 			placeholder="metric name"
 			data-min-length=0 data-items=100
-						   ng-blur="targetBlur()"
+			ng-blur="targetBlur()">
-						   >
 			<a bs-tooltip="target.errors.metric"
 				style="color: rgb(229, 189, 28)"
 				ng-show="target.errors.metric">
@@ -67,15 +59,12 @@
 	</ul>
 
 	<div class="clearfix"></div>
-		</div>
+</div>
 
-		<!-- TAGS -->
+<!-- TAGS -->
-		<div class="tight-form">
+<div class="tight-form">
 	<ul class="tight-form-list" role="menu">
-				<li class="tight-form-item">
+		<li class="tight-form-item tight-form-align">
-					<i class="fa fa-eye invisible"></i>
-				</li>
-				<li class="tight-form-item">
 			Tags
 		</li>
 		<li ng-repeat="(key, value) in target.tags track by $index" class="tight-form-item">
@@ -124,16 +113,12 @@
 		</li>
 	</ul>
 	<div class="clearfix"></div>
-		</div>
+</div>
 
-		<!-- GROUP BY -->
+<!-- GROUP BY -->
-		<div class="tight-form">
+<div class="tight-form">
 	<ul class="tight-form-list" role="menu">
-				<li class="tight-form-item">
+		<li class="tight-form-item tight-form-align">
-					<i class="fa fa-eye invisible"></i>
-				</li>
-
-				<li class="tight-form-item">
 			Group By
 		</li>
 
@@ -234,17 +219,14 @@
 				<i ng-show="isGroupByValid" class="fa fa-plus-circle"></i>
 			</a>
 		</li>
+	</ul>
 	<div class="clearfix"></div>
-		</div>
+</div>
 
-		<!-- HORIZONTAL AGGREGATION -->
+<!-- HORIZONTAL AGGREGATION -->
-		<div class="tight-form">
+<div class="tight-form">
 	<ul class="tight-form-list" role="menu">
-				<li class="tight-form-item">
+		<li class="tight-form-item tight-form-align">
-					<i class="fa fa-eye invisible"></i>
-				</li>
-
-				<li class="tight-form-item">
 			Aggregators
 		</li>
 		<li ng-repeat="aggregatorObject in target.horizontalAggregators track by $index" class="tight-form-item">
@@ -341,44 +323,6 @@
 		</li>
 	</ul>
 	<div class="clearfix"></div>
-		</div>
-	</div>
 </div>
 
-<section class="grafana-metric-options" ng-controller="KairosDBQueryCtrl">
-	<div class="tight-form">
-		<ul class="tight-form-list">
-			<li class="tight-form-item tight-form-item-icon">
-				<i class="fa fa-wrench"></i>
-			</li>
 
-			<li class="tight-form-item">
-				Downsampling with
-			</li>
-			<li>
-				<select class="input-medium tight-form-input" ng-change="panelBlur()" ng-model="panel.downsampling" ng-options="f for f in ['(NONE)','avg', 'sum', 'min', 'max', 'dev']" ></select>
-			</li>
-
-			<!-- SAMPLING RATE -->
-			<li ng-hide="panel.downsampling=='(NONE)'" class="tight-form-item">
-				every
-			</li>
-			<li>
-				<input type="text"
-				ng-hide="panel.downsampling=='(NONE)'"
-				class="input-mini tight-form-input"
-				ng-model="panel.sampling"
-				placeholder="{{interval}}"
-				bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
-				spellcheck='false'
-				ng-blur="panelBlur()" >
-				<a bs-tooltip="target.errors.sampling"
-					style="color: rgb(229, 189, 28)"
-					ng-show="target.errors.sampling">
-					<i class="fa fa-warning"></i>
-				</a>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
-	</div>
-</section>

public/app/plugins/datasource/kairosdb/partials/query.options.html

@@ -0,0 +1,37 @@
+<section class="grafana-metric-options" ng-controller="KairosDBQueryCtrl">
+	<div class="tight-form">
+		<ul class="tight-form-list">
+			<li class="tight-form-item tight-form-item-icon">
+				<i class="fa fa-wrench"></i>
+			</li>
+
+			<li class="tight-form-item">
+				Downsampling with
+			</li>
+			<li>
+				<select class="input-medium tight-form-input" ng-change="panelBlur()" ng-model="panel.downsampling" ng-options="f for f in ['(NONE)','avg', 'sum', 'min', 'max', 'dev']" ></select>
+			</li>
+
+			<!-- SAMPLING RATE -->
+			<li ng-hide="panel.downsampling=='(NONE)'" class="tight-form-item">
+				every
+			</li>
+			<li>
+				<input type="text"
+				ng-hide="panel.downsampling=='(NONE)'"
+				class="input-mini tight-form-input"
+				ng-model="panel.sampling"
+				placeholder="{{interval}}"
+				bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
+				spellcheck='false'
+				ng-blur="panelBlur()" >
+				<a bs-tooltip="target.errors.sampling"
+					style="color: rgb(229, 189, 28)"
+					ng-show="target.errors.sampling">
+					<i class="fa fa-warning"></i>
+				</a>
+			</li>
+		</ul>
+		<div class="clearfix"></div>
+	</div>
+</section>

public/app/plugins/datasource/kairosdb/plugin.json

@@ -8,8 +8,7 @@
   "module": "plugins/datasource/kairosdb/datasource",
 
   "partials": {
-    "config": "app/plugins/datasource/kairosdb/partials/config.html",
+    "config": "app/plugins/datasource/kairosdb/partials/config.html"
-    "query": "app/plugins/datasource/kairosdb/partials/query.editor.html"
   },
 
   "metrics": true,