feat(datasource): added new mixed data source

public/app/features/panel/panelDirective.js

@@ -40,6 +40,8 @@ function (angular, $, config) {
     };
   });
 
+  var targetLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
   module.directive('queryEditorLoader', function($compile, $parse, datasourceSrv) {
     return {
       restrict: 'E',
@@ -57,6 +59,7 @@ function (angular, $, config) {
 
             editorScope = scope.$new();
             editorScope.datasource = ds;
+            editorScope.targetLetters = targetLetters;
 
             var panelEl = angular.element(document.createElement('metric-query-editor-' + ds.meta.type));
             elem.append(panelEl);

public/app/features/panel/panelSrv.js

@@ -55,6 +55,19 @@ function (angular, _, config) {
       $scope.setDatasource = function(datasource) {
         $scope.panel.datasource = datasource;
         $scope.datasource = null;
+        $scope.panel.targets = _.filter($scope.panel.targets, function(target) {
+          delete target.datasource;
+          return target.datasource === void 0;
+        });
+
+        if ($scope.panel.targets.length === 0) {
+          $scope.panel.targets = [{}];
+        }
+
+        if (datasource === 'mixed') {
+          $scope.panel.targets = [];
+        }
+
         $scope.get_data();
       };
 

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(panel.target)" ng-if="datasource.meta.type !== 'grafana'">
+		<button class="btn btn-inverse" ng-click="addDataQuery(panel.target)" ng-if="datasource.meta.type !== 'mixed'">
 			<i class="fa fa-plus"></i>&nbsp;
 			Query
 		</button>
 
-		<span class="dropdown" ng-if="datasource.meta.type === 'grafana'">
+		<span class="dropdown" ng-if="datasource.meta.type === 'mixed'">
 			<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
 				<i class="fa fa-plus"></i>&nbsp;
 				Query

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

@@ -9,7 +9,6 @@ function (angular, _, config, gfunc, Parser) {
   'use strict';
 
   var module = angular.module('grafana.controllers');
-  var targetLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 
   module.directive('metricQueryEditorGraphite', function() {
     return {
@@ -28,8 +27,6 @@ function (angular, _, config, gfunc, Parser) {
 
     $scope.init = function() {
       $scope.target.target = $scope.target.target || '';
-      $scope.targetLetters = targetLetters;
-
       parseTarget();
     };
 

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

@@ -1,4 +1,4 @@
-<div class="tight-form-container-no-item-borders" style="margin-bottom: 10px">
+<div class="tight-form-container-no-item-borders">
 	<div  class="tight-form">
 		<ul class="tight-form-list pull-right">
 			<li ng-show="parserError" class="tight-form-item">
@@ -48,6 +48,9 @@
 		</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();"
@@ -77,9 +80,7 @@
 
 		<div class="tight-form" ng-hide="target.rawQuery">
 			<ul class="tight-form-list">
-				<li class="tight-form-item">
+				<li class="tight-form-item" style="width: 44px"></li>
-					<i class="fa fa-eye invisible"></i>
-				</li>
 				<li class="tight-form-item query-keyword" style="width: 75px;">
 					FROM
 				</li>
@@ -93,9 +94,7 @@
 
 		<div class="tight-form" ng-hide="target.rawQuery">
 			<ul class="tight-form-list">
-				<li class="tight-form-item">
+				<li class="tight-form-item" style="width: 44px"></li>
-					<i class="fa fa-eye invisible"></i>
-				</li>
 
 				<li class="tight-form-item query-keyword" style="width: 75px;">
 					WHERE
@@ -110,10 +109,7 @@
 
 		<div class="tight-form">
 			<ul class="tight-form-list" ng-hide="target.rawQuery">
-				<li class="tight-form-item">
+				<li class="tight-form-item" style="width: 44px"></li>
-					<i class="fa fa-eye invisible"></i>
-				</li>
-
 				<li class="tight-form-item query-keyword">
 					GROUP BY
 				</li>

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

@@ -0,0 +1,42 @@
+define([
+  'angular',
+  'lodash',
+  'kbn',
+],
+function (angular, _, kbn) {
+  'use strict';
+
+  var module = angular.module('grafana.services');
+
+  module.factory('MixedDatasource', function($q, backendSrv, datasourceSrv) {
+
+    function MixedDatasource() {
+    }
+
+    MixedDatasource.prototype.query = function(options) {
+      var sets = _.groupBy(options.targets, 'datasource');
+      var promises = _.map(sets, function(targets) {
+        return datasourceSrv.get(targets[0].datasource).then(function(ds) {
+          var opt = angular.copy(options);
+          opt.targets = targets;
+          return ds.query(opt);
+        });
+      });
+
+      return $q.all(promises).then(function(results) {
+        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/mixed/plugin.json

@@ -0,0 +1,15 @@
+{
+  "pluginType": "datasource",
+  "name": "Mixed datasource",
+
+  "type": "mixed",
+  "serviceName": "MixedDatasource",
+
+  "module": "plugins/datasource/mixed/datasource",
+
+  "partials": {
+    "query": "app/plugins/datasource/mixed/partials/query.editor.html"
+  },
+
+  "metrics": true
+}

public/css/less/tightform.less

@@ -22,6 +22,7 @@
 
 .tight-form-container-no-item-borders {
   border: 1px solid @grafanaTargetBorder;
+  border-bottom: none;
 
   .tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input  {
     border: none;