feat(mixed datasource): polishing feature, making sure everything works, #436

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();
 

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>

public/app/plugins/datasource/grafana/datasource.js

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

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

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

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

+<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>

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>