add elasticsearch query fields to the es query editor

public/app/plugins/datasource/elasticsearch/datasource.js

@@ -300,14 +300,21 @@ function (angular, _, config, kbn, moment, ElasticQueryBuilder) {
         if (target.hide) { return []; }
         var queryBuilder = new ElasticQueryBuilder(target);
         var query = queryBuilder.build();
+        console.log(target);
         query = query.replace(/\$interval/g, target.interval || options.interval);
         query = query.replace(/\$rangeFrom/g, options.range.from);
         query = query.replace(/\$rangeTo/g, options.range.to);
         query = query.replace(/\$maxDataPoints/g, options.maxDataPoints);
+        query = query.replace(/\$keyField/g, target.keyField);
+        query = query.replace(/\$valueField/g, target.valueField);
+        query = query.replace(/\$termKey/g, target.termKey);
+        query = query.replace(/\$termValue/g, target.termValue);
         query = templateSrv.replace(query, options.scopedVars);
         return query;
       }).join("\n");
 
+      console.log(allQueries);
+
       return this._post('/_search?search_type=count', allQueries).then(function(results) {
         if (!results || !results.facets) {
           return { data: [] };

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

@@ -63,7 +63,7 @@
 
 			<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
 				<li class="tight-form-item query-keyword" style="width: 75px;">
-					SELECT
+					Function
 				</li>
 				<li class="dropdown tight-form-item">
 					<a gf-dropdown="functionMenu" class="dropdown-toggle" data-toggle="dropdown">
@@ -75,23 +75,80 @@
 			<div class="clearfix"></div>
 		</div>
 
-		<div class="tight-form" ng-hide="target.rawQuery">
+		<!-- <div class="tight-form" ng-hide="target.rawQuery">
 			<ul class="tight-form-list">
 				<li class="tight-form-item">
 					<i class="fa fa-eye invisible"></i>
 				</li>
 				<li class="tight-form-item query-keyword" style="width: 75px;">
-					FROM
+					Measurement
 				</li>
 				<li>
 					<metric-segment segment="measurementSegment" get-alt-segments="getMeasurements()" on-value-changed="measurementChanged()"></metric-segment>
 				</li>
 			</ul>
 
+			<div class="clearfix"></div>
+		</div> -->
+
+		<div class="tight-form" ng-hide="target.rawQuery">
+			<ul class="tight-form-list">
+				<li class="tight-form-item">
+					<i class="fa fa-eye invisible"></i>
+				</li>
+				<li class="tight-form-item query-keyword" style="width: 75px;">
+					Key Field
+				</li>
+				<li>
+					<metric-segment segment="keyFieldSegment" on-value-changed="keyFieldChanged()"></metric-segment>
+				</li>
+			</ul>
+
+			<div class="clearfix"></div>
+		</div>
+
+		<div class="tight-form" ng-hide="target.rawQuery">
+			<ul class="tight-form-list">
+				<li class="tight-form-item">
+					<i class="fa fa-eye invisible"></i>
+				</li>
+				<li class="tight-form-item query-keyword" style="width: 75px;">
+					Value Field
+				</li>
+				<li>
+					<metric-segment segment="valueFieldSegment" on-value-changed="valueFieldChanged()"></metric-segment>
+				</li>
+			</ul>
+
 			<div class="clearfix"></div>
 		</div>
 
 		<div class="tight-form" ng-hide="target.rawQuery">
+			<ul class="tight-form-list">
+				<li class="tight-form-item">
+					<i class="fa fa-eye invisible"></i>
+				</li>
+
+				<li class="tight-form-item query-keyword" style="width: 75px;">
+					Term
+				</li>
+
+				<li>
+					<metric-segment segment="termKeySegment" on-value-changed="termKeySegmentChanged()"></metric-segment>
+				</li>
+
+				<li>
+					<span class="tight-form-item">:</span>
+				</li>
+
+				<li>
+					<metric-segment segment="termValueSegment" on-value-changed="termValueSegmentChanged()"></metric-segment>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+
+		<!-- <div class="tight-form" ng-hide="target.rawQuery">
 			<ul class="tight-form-list">
 				<li class="tight-form-item">
 					<i class="fa fa-eye invisible"></i>
@@ -106,9 +163,9 @@
 				</li>
 			</ul>
 			<div class="clearfix"></div>
-		</div>
+		</div> -->
 
-		<div class="tight-form">
+		<!-- <div class="tight-form">
 			<ul class="tight-form-list" ng-hide="target.rawQuery">
 				<li class="tight-form-item">
 					<i class="fa fa-eye invisible"></i>
@@ -150,7 +207,7 @@
 				</li>
 			</ul>
 			<div class="clearfix"></div>
-		</div>
+		</div> -->
 
 	</div>
 </div>

public/app/plugins/datasource/elasticsearch/queryBuilder.js

@@ -14,9 +14,9 @@ function () {
         "metric": {
           "date_histogram": {
             "interval": "$interval",
-            "key_field": "@timestamp",
+            "key_field": "$keyField",
             "min_doc_count": 0,
-            "value_field": "metric"
+            "value_field": "$valueField"
           }
         }
       },
@@ -34,7 +34,7 @@ function () {
               },
               {
                 "term": {
-                  "service": "cpu",
+                  "$termKey": "$termValue",
                 }
               }
             ]

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

@@ -24,6 +24,26 @@ function (angular, _, ElasticQueryBuilder) {
 
       $scope.queryBuilder = new ElasticQueryBuilder(target);
 
+      if (!target.keyField) {
+        target.keyField = '@timestamp';
+      }
+      $scope.keyFieldSegment = new MetricSegment({value: target.keyField});
+
+      if (!target.valueField) {
+        target.valueField = 'metric';
+      }
+      $scope.valueFieldSegment = new MetricSegment({value: target.valueField});
+
+      if (!target.termKey) {
+        target.termKey = 'service';
+      }
+      $scope.termKeySegment = new MetricSegment({value: target.termKey});
+
+      if (!target.termValue) {
+        target.termValue = 'cpu';
+      }
+      $scope.termValueSegment = new MetricSegment({value: target.termValue});
+
       if (!target.measurement) {
         $scope.measurementSegment = MetricSegment.newSelectMeasurement();
       } else {
@@ -53,6 +73,26 @@ function (angular, _, ElasticQueryBuilder) {
       $scope.removeGroupBySegment = new MetricSegment({fake: true, value: '-- remove group by --'});
     };
 
+    $scope.valueFieldChanged = function() {
+      $scope.target.valueField = $scope.valueFieldSegment.value;
+      $scope.$parent.get_data();
+    };
+
+    $scope.keyFieldChanged = function() {
+      $scope.target.keyField = $scope.keyFieldSegment.value;
+      $scope.$parent.get_data();
+    };
+
+    $scope.termValueSegmentChanged = function() {
+      $scope.target.termValue = $scope.termValueSegment.value;
+      $scope.$parent.get_data();
+    };
+
+    $scope.termKeySegmentChanged = function() {
+      $scope.target.termKey = $scope.termKeySegment.value;
+      $scope.$parent.get_data();
+    };
+
     $scope.fixTagSegments = function() {
       var count = $scope.tagSegments.length;
       var lastSegment = $scope.tagSegments[Math.max(count-1, 0)];