poc: some tests for new influxdb editor

This commit is contained in:
Torkel Ödegaard 2015-09-23 09:58:36 +02:00
parent 2790e4e819
commit 075d01820c
2 changed files with 39 additions and 46 deletions

View File

@ -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;">

View File

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