From 00f5f8b2a03016bcae76d1d3e17738f7c9329185 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 17 Aug 2015 21:20:09 +0200
Subject: [PATCH] feat(mixed datasource): polishing feature, making sure
 everything works, #436

---
 public/app/features/templating/editorCtrl.js  |  5 +-
 public/app/partials/metrics.html              |  4 +-
 .../plugins/datasource/grafana/datasource.js  |  1 +
 .../plugins/datasource/grafana/directives.js  | 13 ++++
 .../grafana/partials/query.editor.html        | 66 +++++++++++++++----
 .../graphite/partials/query.editor.html       | 32 ++++-----
 6 files changed, 84 insertions(+), 37 deletions(-)
 create mode 100644 public/app/plugins/datasource/grafana/directives.js

diff --git a/public/app/features/templating/editorCtrl.js b/public/app/features/templating/editorCtrl.js
index f48452e4569..65b06f3ceb3 100644
--- a/public/app/features/templating/editorCtrl.js
+++ b/public/app/features/templating/editorCtrl.js
@@ -23,7 +23,10 @@ function (angular, _) {
 
     $scope.init = function() {
       $scope.editor = { index: 0 };
-      $scope.datasources = datasourceSrv.getMetricSources();
+      $scope.datasources = _.filter(datasourceSrv.getMetricSources(), function(ds) {
+        return !ds.meta.builtIn;
+      });
+
       $scope.variables = templateSrv.variables;
       $scope.reset();
 
diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html
index 4aaffed9791..215bc2dd945 100644
--- a/public/app/partials/metrics.html
+++ b/public/app/partials/metrics.html
@@ -6,12 +6,12 @@
 	</div>
 
 	<div style="margin: 20px 0 0 0">
-		<button class="btn btn-inverse" ng-click="addDataQuery()" ng-hide="datasource.meta.builtIn">
+		<button class="btn btn-inverse" ng-click="addDataQuery()" ng-hide="datasource.meta.mixed">
 			<i class="fa fa-plus"></i>&nbsp;
 			Query
 		</button>
 
-		<div class="dropdown" ng-if="datasource.meta.builtIn">
+		<div class="dropdown" ng-if="datasource.meta.mixed">
 			<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
 				<i class="fa fa-plus"></i>&nbsp;
 				Query &nbsp; <span class="caret"></span>
diff --git a/public/app/plugins/datasource/grafana/datasource.js b/public/app/plugins/datasource/grafana/datasource.js
index c6d47da8552..16c16211d13 100644
--- a/public/app/plugins/datasource/grafana/datasource.js
+++ b/public/app/plugins/datasource/grafana/datasource.js
@@ -2,6 +2,7 @@ define([
   'angular',
   'lodash',
   'kbn',
+  './directives',
 ],
 function (angular, _, kbn) {
   'use strict';
diff --git a/public/app/plugins/datasource/grafana/directives.js b/public/app/plugins/datasource/grafana/directives.js
new file mode 100644
index 00000000000..9c29340e430
--- /dev/null
+++ b/public/app/plugins/datasource/grafana/directives.js
@@ -0,0 +1,13 @@
+define([
+  'angular',
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('grafana.directives');
+
+  module.directive('metricQueryEditorGrafana', function() {
+    return {templateUrl: 'app/plugins/datasource/grafana/partials/query.editor.html'};
+  });
+
+});
diff --git a/public/app/plugins/datasource/grafana/partials/query.editor.html b/public/app/plugins/datasource/grafana/partials/query.editor.html
index 2ab843827e2..15297d5c3f0 100644
--- a/public/app/plugins/datasource/grafana/partials/query.editor.html
+++ b/public/app/plugins/datasource/grafana/partials/query.editor.html
@@ -1,16 +1,56 @@
+<div class="tight-form">
+	<ul class="tight-form-list pull-right">
+		<li ng-show="parserError" class="tight-form-item">
+			<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
+				<i class="fa fa-warning"></i>
+			</a>
+		</li>
+		<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>
+					</li>
+					<li role="menuitem">
+						<a  tabindex="1"
+							ng-click="moveMetricQuery($index, $index-1)">
+							Move up
+						</a>
+					</li>
+					<li role="menuitem">
+						<a  tabindex="1"
+							ng-click="moveMetricQuery($index, $index+1)">
+							Move down
+						</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>
 
-<div class="fluid-row" style="margin-top: 20px">
-	<div class="span2"></div>
-	<div class="grafana-info-box span8">
-		<h5>Test graph</h5>
-
-		<p>
-		This is just a test data source that generates random walk series. If this is your only data source
-		open the left side menu and navigate to the data sources admin screen and add your data sources (you need to be
-		logged in to do this). You can change data source using the button to the left of the <strong>Add query</strong> button.
-		</p>
-	</div>
-	<div class="span2"></div>
-
+	<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>
+			</a>
+		</li>
+		<li class="tight-form-item">
+			Test metric (fake data source)
+		</li>
+	</ul>
 	<div class="clearfix"></div>
 </div>
diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html
index a26dfd0e52e..9ae415369ae 100755
--- a/public/app/plugins/datasource/graphite/partials/query.editor.html
+++ b/public/app/plugins/datasource/graphite/partials/query.editor.html
@@ -5,36 +5,28 @@
 				<i class="fa fa-warning"></i>
 			</a>
 		</li>
-		<li class="tight-form-item">
-			<a class="pointer" tabindex="1" ng-click="toggleEditorMode()">
-				<i class="fa fa-pencil"></i>
-			</a>
+		<li class="tight-form-item small" ng-show="target.datasource">
+			<i class="fa fa-database"></i> <em>{{target.datasource}}</em>
 		</li>
 		<li class="tight-form-item">
 			<div class="dropdown">
-				<a  class="pointer dropdown-toggle"
-					data-toggle="dropdown"
-					tabindex="1">
+				<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 tabindex="1" ng-click="toggleEditorMode()">
+							Switch editor mode
 						</a>
 					</li>
 					<li role="menuitem">
-						<a  tabindex="1"
-							ng-click="moveMetricQuery($index, $index-1)">
-							Move up
-						</a>
+						<a tabindex="1" ng-click="duplicate()">Duplicate</a>
 					</li>
 					<li role="menuitem">
-						<a  tabindex="1"
-							ng-click="moveMetricQuery($index, $index+1)">
-							Move down
-						</a>
+						<a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up</a>
+					</li>
+					<li role="menuitem">
+						<a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a>
 					</li>
 				</ul>
 			</div>
@@ -51,9 +43,7 @@
 			{{target.refId}}
 		</li>
 		<li>
-			<a  class="tight-form-item"
-				ng-click="target.hide = !target.hide; get_data();"
-				role="menuitem">
+			<a class="tight-form-item" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
 				<i class="fa fa-eye"></i>
 			</a>
 		</li>