From 075d01820c2d7de325152aa8154dae918790af46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Wed, 23 Sep 2015 09:58:36 +0200
Subject: [PATCH] poc: some tests for new influxdb editor

---
 .../influxdb/partials/query.editor.html       | 78 ++++++++-----------
 .../plugins/datasource/influxdb/queryCtrl.js  |  7 +-
 2 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/public/app/plugins/datasource/influxdb/partials/query.editor.html b/public/app/plugins/datasource/influxdb/partials/query.editor.html
index c9c7203bed7..6ab3528b5c1 100644
--- a/public/app/plugins/datasource/influxdb/partials/query.editor.html
+++ b/public/app/plugins/datasource/influxdb/partials/query.editor.html
@@ -48,60 +48,22 @@
 			<li>
 				<metric-segment segment="measurementSegment" get-options="getMeasurements()" on-change="measurementChanged()"></metric-segment>
 			</li>
+			<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
+				WHERE
+			</li>
+			<li ng-repeat="segment in tagSegments">
+				<metric-segment segment="segment" get-options="getTagsOrValues(segment, $index)" on-change="tagSegmentUpdated(segment, $index)"></metric-segment>
+			</li>
 		</ul>
 		<div class="clearfix"></div>
 
 		<div style="padding: 10px" ng-if="target.rawQuery">
 			<textarea ng-model="target.query" rows="8" spellcheck="false" style="width: 100%; box-sizing: border-box;" ng-blur="get_data()"></textarea>
 		</div>
+
 	</div>
 
 	<div ng-hide="target.rawQuery">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
-					WHERE
-				</li>
-				<li ng-repeat="segment in tagSegments">
-					<metric-segment segment="segment" get-options="getTagsOrValues(segment, $index)" on-change="tagSegmentUpdated(segment, $index)"></metric-segment>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-
-		<div class="tight-form" ng-repeat="field in target.fields">
-			<ul class="tight-form-list">
-				<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
-					<span ng-show="$index === 0">SELECT</span>
-				</li>
-				<li>
-					<metric-segment-model property="field.func" get-options="getFunctions()" on-change="get_data()" css-class="tight-form-item-xlarge"></metric-segment>
-				</li>
-				<li>
-					<metric-segment-model property="field.name" get-options="getFields()" on-change="get_data()" css-class="tight-form-item-large"></metric-segment>
-				</li>
-				<li>
-					<input type="text" class="tight-form-clear-input text-center" style="width: 70px;" ng-model="field.mathExpr" spellcheck='false' placeholder="math expr" ng-blur="get_data()">
-				</li>
-				<li class="tight-form-item query-keyword">
-					AS
-				</li>
-				<li>
-					<input type="text" class="tight-form-clear-input" style="width: 180px;" ng-model="field.asExpr" spellcheck='false' placeholder="as expr" ng-blur="get_data()">
-				</li>
-			</ul>
-
-			<ul class="tight-form-list pull-right">
-				<li class="tight-form-item last" ng-show="$index === 0">
-					<a class="pointer" ng-click="addSelect()"><i class="fa fa-plus"></i></a>
-				</li>
-				<li class="tight-form-item last" ng-show="target.fields.length > 1">
-					<a class="pointer" ng-click="removeSelect($index)"><i class="fa fa-minus"></i></a>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-
 		<div class="tight-form" ng-repeat="groupBy in target.groupBy">
 			<ul class="tight-form-list">
 				<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
@@ -146,6 +108,32 @@
 		</div>
 	</div>
 
+	<div class="tight-form" ng-repeat="field in target.fields">
+			<ul class="tight-form-list">
+				<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
+					<span ng-show="$index === 0">SELECT</span>
+				</li>
+				<li>
+					<metric-segment-model property="field.name" get-options="getFields()" on-change="get_data()"></metric-segment>
+				</li>
+				<li ng-repeat="func in field.functions">
+					<span graphite-func-editor class="tight-form-item tight-form-func">
+					</span>
+				</li>
+			</ul>
+
+			<ul class="tight-form-list pull-right">
+				<li class="tight-form-item last" ng-show="$index === 0">
+					<a class="pointer" ng-click="addSelect()"><i class="fa fa-plus"></i></a>
+				</li>
+				<li class="tight-form-item last" ng-show="target.fields.length > 1">
+					<a class="pointer" ng-click="removeSelect($index)"><i class="fa fa-minus"></i></a>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+
+
 	<div class="tight-form">
 		<ul class="tight-form-list">
 			<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
diff --git a/public/app/plugins/datasource/influxdb/queryCtrl.js b/public/app/plugins/datasource/influxdb/queryCtrl.js
index 5df07d678b4..cfd6c5ab565 100644
--- a/public/app/plugins/datasource/influxdb/queryCtrl.js
+++ b/public/app/plugins/datasource/influxdb/queryCtrl.js
@@ -1,9 +1,10 @@
 define([
   'angular',
   'lodash',
+  '../graphite/gfunc',
   './queryBuilder',
 ],
-function (angular, _, InfluxQueryBuilder) {
+function (angular, _, gfunc, InfluxQueryBuilder) {
   'use strict';
 
   var module = angular.module('grafana.controllers');
@@ -17,6 +18,10 @@ function (angular, _, InfluxQueryBuilder) {
       target.tags = target.tags || [];
       target.groupBy = target.groupBy || [{type: 'time', interval: 'auto'}];
       target.fields = target.fields || [{name: 'value', func: target.function || 'mean'}];
+      target.fields[0].functions = [
+        gfunc.createFuncInstance('scaleToSeconds', { withDefaultParams: true }),
+        gfunc.createFuncInstance('movingAverage', { withDefaultParams: true }),
+      ];
 
       $scope.queryBuilder = new InfluxQueryBuilder(target);