feat(mixed datasources): updated OpenTSDB data source query editor to new model, #436

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

@@ -80,8 +80,7 @@
 
 		<div class="tight-form" ng-hide="target.rawQuery">
 			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 44px"></li>
-				<li class="tight-form-item query-keyword" style="width: 75px;">
+				<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
 					FROM
 				</li>
 				<li>
@@ -94,9 +93,7 @@
 
 		<div class="tight-form" ng-hide="target.rawQuery">
 			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 44px"></li>
-
-				<li class="tight-form-item query-keyword" style="width: 75px;">
+				<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
 					WHERE
 				</li>
 
@@ -109,8 +106,7 @@
 
 		<div class="tight-form">
 			<ul class="tight-form-list" ng-hide="target.rawQuery">
-				<li class="tight-form-item" style="width: 44px"></li>
-				<li class="tight-form-item query-keyword">
+				<li class="tight-form-item query-keyword tight-form-align">
 					GROUP BY
 				</li>
 
@@ -144,13 +140,14 @@
 					Alias pattern
 				</li>
 				<li>
-					<input type="text" class="input-medium tight-form-input" ng-model="target.alias" spellcheck='false' placeholder="alias" ng-model-onblur ng-change="get_data()">
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-
+					<input type="text" class="input-medium tight-form-input"
+						ng-model="target.alias" spellcheck='false' placeholder="alias"
+						ng-model-onblur ng-change="get_data()"></input>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
-	</div>
 
+	</div>
+</div>
 

public/app/plugins/datasource/mixed/datasource.js

@@ -1,9 +1,8 @@
 define([
   'angular',
   'lodash',
-  'kbn',
 ],
-function (angular, _, kbn) {
+function (angular, _) {
   'use strict';
 
   var module = angular.module('grafana.services');
@@ -27,12 +26,6 @@ function (angular, _, kbn) {
         return { data: _.flatten(_.pluck(results, 'data')) };
       });
 
-      // console.log(options.targets);
-      // // get from & to in seconds
-      // var from = kbn.parseDate(options.range.from).getTime();
-      // var to = kbn.parseDate(options.range.to).getTime();
-      //
-      // return backendSrv.get('/api/metrics/test', { from: from, to: to, maxDataPoints: options.maxDataPoints });
     };
 
     return MixedDatasource;

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

@@ -1,241 +1,208 @@
-<div class="editor-row" style="margin-top: 10px;">
-
-  <div  ng-repeat="target in panel.targets"
-        style="margin-bottom: 10px;"
-        ng-class="{'tight-form-disabled': target.hide}"
-        ng-controller="OpenTSDBQueryCtrl"
-        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"
-							data-toggle="dropdown"
-							tabindex="1">
-							<i class="fa fa-bars"></i>
+<div class="tight-form">
+	<ul class="tight-form-list pull-right">
+		<li class="tight-form-item">
+			<div class="dropdown">
+				<a  class="pointer dropdown-toggle"
+					data-toggle="dropdown"
+					tabindex="1">
+					<i class="fa fa-bars"></i>
+				</a>
+				<ul class="dropdown-menu pull-right" role="menu">
+					<li role="menuitem">
+						<a  tabindex="1"
+							ng-click="duplicate()">
+							Duplicate
 						</a>
-						<ul class="dropdown-menu pull-right" role="menu">
-							<li role="menuitem">
-								<a  tabindex="1"
-									ng-click="duplicate()">
-									Duplicate
-								</a>
-							</li>
-						</ul>
-					</div>
-				</li>
-				<li class="tight-form-item last">
-					<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
-            <i class="fa fa-remove"></i>
-          </a>
-        </li>
-      </ul>
-
-      <ul class="tight-form-list">
-        <li>
-          <a  class="tight-form-item"
-              ng-click="target.hide = !target.hide; get_data();"
-              role="menuitem">
-            <i class="fa fa-eye"></i>
-          </a>
-        </li>
-      </ul>
-
-      <ul class="tight-form-list" role="menu">
-				<li class="tight-form-item" style="width: 86px">
-					Metric
-				</li>
-        <li>
-          <input type="text"
-                 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-model-onblur
-                 ng-change="targetBlur()"
-                 >
-          <a bs-tooltip="target.errors.metric"
-             style="color: rgb(229, 189, 28)"
-             ng-show="target.errors.metric">
-            <i class="fa fa-warning"></i>
-          </a>
-        </li>
-				<li class="tight-form-item">
-          Aggregator
-        </li>
-        <li>
-          <select ng-model="target.aggregator"
-                  class="tight-form-input input-small"
-                  ng-options="agg for agg in aggregators"
-                  ng-change="targetBlur()">
-          </select>
-          <a bs-tooltip="target.errors.aggregator"
-             style="color: rgb(229, 189, 28)"
-             ng-show="target.errors.aggregator">
-            <i class="fa fa-warning"></i>
-          </a>
-        </li>
-
-				<li class="tight-form-item">
-          Alias:
-					<tip>Use patterns like $tag_tagname to replace part of the alias for a tag value</tip>
-        </li>
-				<li>
-					<input type="text"
-                 class="tight-form-input input-large"
-                 ng-model="target.alias"
-                 spellcheck='false'
-                 placeholder="series alias"
-                 data-min-length=0 data-items=100
-                 ng-blur="targetBlur()"
-                 />
-        </li>
-
-      </ul>
-
-      <div class="clearfix"></div>
-    </div>
-
-    <div class="tight-form">
-			<ul class="tight-form-list" role="menu">
-				<li class="tight-form-item">
-					<i class="fa fa-eye invisible"></i>
-				</li>
-
-				<li class="tight-form-item" style="width: 86px">
-					Down sample
-				</li>
+					</li>
+				</ul>
+			</div>
+		</li>
+		<li class="tight-form-item last">
+			<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
+				<i class="fa fa-remove"></i>
+			</a>
+		</li>
+	</ul>
+
+	<ul class="tight-form-list">
+		<li class="tight-form-item" style="min-width: 15px; text-align: center">
+			{{targetLetters[$index]}}
+		</li>
+		<li>
+			<a  class="tight-form-item"
+				ng-click="target.hide = !target.hide; get_data();"
+				role="menuitem">
+				<i class="fa fa-eye"></i>
+			</a>
+		</li>
+	</ul>
+
+	<ul class="tight-form-list" role="menu">
+		<li class="tight-form-item" style="width: 86px">
+			Metric
+		</li>
+		<li>
+			<input type="text"
+				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-model-onblur
+				ng-change="targetBlur()">
+			</input>
+			<a bs-tooltip="target.errors.metric" style="color: rgb(229, 189, 28)" ng-show="target.errors.metric">
+				<i class="fa fa-warning"></i>
+			</a>
+		</li>
+		<li class="tight-form-item">
+			Aggregator
+		</li>
+		<li>
+			<select ng-model="target.aggregator" class="tight-form-input input-small"
+				ng-options="agg for agg in aggregators"
+				ng-change="targetBlur()">
+			</select>
+			<a bs-tooltip="target.errors.aggregator" style="color: rgb(229, 189, 28)" ng-show="target.errors.aggregator">
+				<i class="fa fa-warning"></i>
+			</a>
+		</li>
+
+		<li class="tight-form-item">
+			Alias:
+			<tip>Use patterns like $tag_tagname to replace part of the alias for a tag value</tip>
+		</li>
+		<li>
+			<input type="text" class="tight-form-input input-large"
+				ng-model="target.alias"
+				spellcheck='false'
+				placeholder="series alias"
+				data-min-length=0 data-items=100
+				ng-blur="targetBlur()"></input>
+		</li>
+	</ul>
+
+	<div class="clearfix"></div>
+</div>
 
-				<li>
-          <input type="text"
-                 class="input-large tight-form-input"
-                 ng-model="target.downsampleInterval"
-								 ng-model-onblur
-                 ng-change="targetBlur()"
-                 placeholder="interval (empty = auto)"
-                 >
-        </li>
-
-        <li class="tight-form-item">
-          Aggregator
-        </li>
-
-        <li>
-          <select ng-model="target.downsampleAggregator"
-                  class="tight-form-input input-small"
-                  ng-options="agg for agg in aggregators"
-                  ng-change="targetBlur()">
-          </select>
-        </li>
-
-				<li class="tight-form-item">
-					<editor-checkbox text="Disable downsampling" model="target.disableDownsampling" change="targetBlur()"></editor-checkbox>
+<div class="tight-form">
+	<ul class="tight-form-list" role="menu">
+		<li class="tight-form-item tight-form-align" style="width: 86px">
+			Down sample
+		</li>
+
+		<li>
+			<input type="text" class="input-large tight-form-input"
+				ng-model="target.downsampleInterval"
+				ng-model-onblur
+				ng-change="targetBlur()"
+				placeholder="interval (empty = auto)">
+			</li>
+
+			<li class="tight-form-item">
+				Aggregator
+			</li>
+
+			<li>
+				<select ng-model="target.downsampleAggregator" class="tight-form-input input-small"
+					ng-options="agg for agg in aggregators"
+					ng-change="targetBlur()">
+				</select>
+			</li>
+
+			<li class="tight-form-item">
+				<editor-checkbox text="Disable downsampling" model="target.disableDownsampling" change="targetBlur()"></editor-checkbox>
+			</li>
+
+		</ul>
+		<div class="clearfix"></div>
+	</div>
+
+	<div class="tight-form">
+		<ul class="tight-form-list" role="menu">
+			<li class="tight-form-item tight-form-align" style="width: 86px">
+				Tags
+			</li>
+			<li ng-repeat="(key, value) in target.tags track by $index" class="tight-form-item">
+				{{key}}&nbsp;=&nbsp;{{value}}
+				<a ng-click="removeTag(key)">
+					<i class="fa fa-remove"></i>
+				</a>
+			</li>
+
+			<li class="tight-form-item" ng-hide="addTagMode">
+				<a ng-click="addTag()">
+					<i class="fa fa-plus"></i>
+				</a>
+			</li>
+
+			<li ng-show="addTagMode">
+				<input type="text" class="input-small tight-form-input"
+					spellcheck='false'
+					bs-typeahead="suggestTagKeys"
+					data-min-length=0 data-items=100
+					ng-model="target.currentTagKey"
+					placeholder="key">
+					<input type="text"
+						class="input-small tight-form-input"
+						spellcheck='false'
+						bs-typeahead="suggestTagValues"
+						data-min-length=0 data-items=100
+						ng-model="target.currentTagValue"
+						placeholder="value">
+					</input>
+					<a ng-click="addTag()">
+						add tag
+					</a>
+					<a bs-tooltip="target.errors.tags"
+						style="color: rgb(229, 189, 28)"
+						ng-show="target.errors.tags">
+						<i class="fa fa-warning"></i>
+					</a>
 				</li>
-
 			</ul>
-      <div class="clearfix"></div>
-    </div>
+			<div class="clearfix"></div>
+		</div>
 
 		<div class="tight-form">
 			<ul class="tight-form-list" role="menu">
-				<li class="tight-form-item">
-					<i class="fa fa-eye invisible"></i>
+				<li class="tight-form-item tight-form-align" style="width: 86px">
+					<editor-checkbox text="Rate" model="target.shouldComputeRate" change="targetBlur()"></editor-checkbox>
 				</li>
 
-				<li class="tight-form-item" style="width: 86px">
-           Tags
-        </li>
-        <li ng-repeat="(key, value) in target.tags track by $index" class="tight-form-item">
-          {{key}}&nbsp;=&nbsp;{{value}}
-          <a ng-click="removeTag(key)">
-            <i class="fa fa-remove"></i>
-          </a>
-        </li>
-
-        <li class="tight-form-item" ng-hide="addTagMode">
-          <a ng-click="addTag()">
-            <i class="fa fa-plus"></i>
-          </a>
-        </li>
-
-        <li ng-show="addTagMode">
-            <input type="text"
-                   class="input-small tight-form-input"
-                   spellcheck='false'
-                   bs-typeahead="suggestTagKeys"
-                   data-min-length=0 data-items=100
-                   ng-model="target.currentTagKey"
-                   placeholder="key">
-            <input type="text"
-                   class="input-small tight-form-input"
-                   spellcheck='false'
-                   bs-typeahead="suggestTagValues"
-                   data-min-length=0 data-items=100
-                   ng-model="target.currentTagValue"
-                   placeholder="value">
-            <a ng-click="addTag()">
-							add tag
-            </a>
-            <a bs-tooltip="target.errors.tags"
-               style="color: rgb(229, 189, 28)"
-               ng-show="target.errors.tags">
-              <i class="fa fa-warning"></i>
-            </a>
-        </li>
-      </ul>
-      <div class="clearfix"></div>
-    </div>
-
-		<div class="tight-form">
-			<ul class="tight-form-list" role="menu">
-				<li class="tight-form-item">
-					<i class="fa fa-eye invisible"></i>
+				<li class="tight-form-item" ng-hide="!target.shouldComputeRate">
+					<editor-checkbox text="Counter" model="target.isCounter" change="targetBlur()"></editor-checkbox>
 				</li>
 
-				<li class="tight-form-item" style="width: 86px">
-					<editor-checkbox text="Rate" model="target.shouldComputeRate" change="targetBlur()"></editor-checkbox>
+				<li class="tight-form-item" ng-hide="!target.isCounter">
+					Counter Max:
 				</li>
 
-        <li class="tight-form-item" ng-hide="!target.shouldComputeRate">
-					<editor-checkbox text="Counter" model="target.isCounter" change="targetBlur()"></editor-checkbox>
+				<li ng-hide="!target.isCounter">
+					<input type="text" class="tight-form-input input-small"
+						ng-disabled="!target.shouldComputeRate"
+						ng-model="target.counterMax"
+						spellcheck='false'
+						placeholder="max value"
+						ng-model-onblur
+						ng-blur="targetBlur()"></input>
 				</li>
-
 				<li class="tight-form-item" ng-hide="!target.isCounter">
-          Counter Max:
-        </li>
-
-        <li ng-hide="!target.isCounter">
-          <input type="text"
-                 class="tight-form-input input-small"
-                 ng-disabled="!target.shouldComputeRate"
-                 ng-model="target.counterMax"
-                 spellcheck='false'
-                 placeholder="max value"
-								 ng-model-onblur
-                 ng-blur="targetBlur()"
-                 />
-        </li>
-        <li class="tight-form-item" ng-hide="!target.isCounter">
-          Reset Value:
-        </li>
-        <li ng-hide="!target.isCounter">
-          <input type="text"
-                 class="tight-form-input input-small"
-                 ng-disabled="!target.shouldComputeRate"
-                 ng-model="target.counterResetValue"
-                 spellcheck='false'
-                 placeholder="reset value"
-								 ng-model-onblur
-                 ng-blur="targetBlur()"
-                 />
-        </li>
+					Reset Value:
+				</li>
+				<li ng-hide="!target.isCounter">
+					<input type="text" class="tight-form-input input-small"
+						ng-disabled="!target.shouldComputeRate"
+						ng-model="target.counterResetValue"
+						spellcheck='false'
+						placeholder="reset value"
+						ng-model-onblur
+						ng-blur="targetBlur()"></input>
+				</li>
 			</ul>
 
-      <div class="clearfix"></div>
-    </div>
-
-  </div>
+			<div class="clearfix"></div>
+		</div>
+	</div>
 </div>

public/app/plugins/datasource/opentsdb/queryCtrl.js

@@ -8,6 +8,13 @@ function (angular, _, kbn) {
 
   var module = angular.module('grafana.controllers');
 
+  module.directive('metricQueryEditorOpentsdb', function() {
+    return {
+      controller: 'OpenTSDBQueryCtrl',
+      templateUrl: 'app/plugins/datasource/opentsdb/partials/query.editor.html',
+    };
+  });
+
   module.controller('OpenTSDBQueryCtrl', function($scope, $timeout) {
 
     $scope.init = function() {
@@ -113,6 +120,7 @@ function (angular, _, kbn) {
       return errs;
     }
 
+    $scope.init();
   });
 
 });

public/css/less/tightform.less

@@ -29,6 +29,7 @@
   }
 }
 
+
 .spaced-form {
   .tight-form {
     margin: 7px 0;
@@ -209,3 +210,7 @@ select.tight-form-input {
   }
 }
 
+.tight-form-align {
+  padding-left: 66px;
+}
+