Skip to content

N
nexpie-grafana-theme
Commit e339dbf4 by Torkel Ödegaard
Options

feat(elasticsearch): so much work on new editor, its pretty broken right now,… 

feat(elasticsearch): so much work on new editor, its pretty broken right now, but when it is done it is going to be amazing
parent cc1e3d01
Showing with 221 additions and 86 deletions
public/app/plugins/datasource/elasticsearch/advancedOptions.js 0 → 100644
define([
'angular',
'lodash',
'jquery',
],
function (angular, _, $) {
'use strict';
angular
.module('grafana.directives')
.directive('tightFormAdvancedOption', function($compile, uiSegmentSrv, $q) {
return {
templateUrl: 'app/plugins/datasource/elasticsearch/partials/advancedOption.html',
restrict: 'E',
scope: {
model: "=",
option: "=",
},
link: function postLink($scope, elem) {
}
};
});
});
public/app/plugins/datasource/elasticsearch/queryComponent.js → public/app/plugins/datasource/elasticsearch/bucketAgg.js
......@@ -6,54 +6,77 @@ define([
function (angular, _, $) {
'use strict';
angular
.module('grafana.directives')
.directive('elasticQueryComponent', function($compile, uiSegmentSrv, $q) {
var module = angular.module('grafana.directives');
//var linkTemplate = '<a class="tight-form-item tabindex="1" ng-bind-html="textRep"></a>';
/* jshint maxlen:false */
var template1 = '<metric-segment segment="typeSegment" get-alt-segments="getBucketAggTypes()" on-value-changed="bucketAggTypeChanged()"></metric-segment>';
/* jshint maxlen:false */
var template2 = '<metric-segment segment="fieldSegment" get-alt-segments="getFields()" on-value-changed="fieldChanged()"></metric-segment>';
module.controller('ElasticBucketAggCtrl', function($scope, uiSegmentSrv, $q) {
var bucketAggs = $scope.target.bucketAggs;
return {
restrict: 'E',
scope: {
model: "=",
onChange: "&",
getFields: "&",
},
link: function postLink($scope, elem) {
$scope.agg = bucketAggs[$scope.index];
$scope.getBucketAggTypes = function() {
return $q.when([
uiSegmentSrv.newSegment({value: 'terms'}),
uiSegmentSrv.newSegment({value: 'date_histogram'}),
]);
};
$scope.$watch("index", function() {
$scope.isFirst = $scope.index === 0;
$scope.isLast = $scope.index === bucketAggs.length - 1;
});
$scope.fieldChanged = function() {
$scope.model.field = $scope.fieldSegment.value;
$scope.onChange();
};
if ($scope.agg.type === "terms") {
$scope.aggOptionsString = "Top 5, Order by: sum @value";
}
$scope.bucketAggTypeChanged = function() {
$scope.model.type = $scope.typeSegment.value;
$scope.onChange();
};
$scope.typeSegment = uiSegmentSrv.newSegment($scope.agg.type);
$scope.fieldSegment = uiSegmentSrv.newSegment($scope.agg.field);
function addElementsAndCompile() {
var $html = $(template1 + template2);
$scope.getBucketAggTypes = function() {
return $q.when([
uiSegmentSrv.newSegment({value: 'terms'}),
uiSegmentSrv.newSegment({value: 'date_histogram'}),
]);
};
$scope.toggleOptions = function() {
$scope.showOptions = $scope.showOptions;
}
$scope.addBucketAgg = function() {
// if last is date histogram add it before
var lastBucket = bucketAggs[bucketAggs.length - 1];
var addIndex = bucketAggs.length - 1;
$scope.fieldSegment = uiSegmentSrv.newSegment($scope.model.field);
$scope.typeSegment = uiSegmentSrv.newSegment($scope.model.type);
if (lastBucket && lastBucket.type === 'date_histogram') {
addIndex - 1;
}
$html.appendTo(elem);
bucketAggs.splice(addIndex, 0, {type: "terms", field: "select field" });
};
$compile(elem.contents())($scope);
}
$scope.removeBucketAgg = function(index) {
bucketAggs.splice(index, 1);
$scope.onChange();
};
addElementsAndCompile();
$scope.fieldChanged = function() {
$scope.agg.showOptions = true;
$scope.agg.field = $scope.fieldSegment.value;
$scope.onChange();
};
$scope.bucketAggTypeChanged = function() {
$scope.agg.type = $scope.typeSegment.value;
$scope.onChange();
};
});
module.directive('elasticBucketAgg', function() {
return {
templateUrl: 'app/plugins/datasource/elasticsearch/partials/bucketAgg.html',
controller: 'ElasticBucketAggCtrl',
restrict: 'E',
scope: {
target: "=",
index: "=",
onChange: "&",
getFields: "&",
},
link: function postLink($scope, elem) {
}
};
});
......
public/app/plugins/datasource/elasticsearch/directives.js
define([
'angular',
'./queryComponent',
'./bucketAgg',
],
function (angular) {
'use strict';
......
public/app/plugins/datasource/elasticsearch/partials/bucketAgg.html 0 → 100644
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
<span ng-show="isFirst">Group by</span>
<span ng-hide="isFirst">Then by</span>
</li>
<li>
<metric-segment segment="typeSegment" get-alt-segments="getBucketAggTypes()" on-value-changed="bucketAggTypeChanged()"></metric-segment>
<metric-segment segment="fieldSegment" get-alt-segments="getFields()" on-value-changed="fieldChanged()"></metric-segment>
</li>
<li class="tight-form-item tight-form-align" ng-if="aggOptionsString">
<a ng-click="toggleOptions()">{{aggOptionsString}}</a>
</li>
</ul>
<ul class="tight-form-list pull-right">
<li class="tight-form-item" ng-if="isFirst">
<a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a>
</li>
<li class="tight-form-item" ng-if="!isLast">
<a class="pointer" ng-click="removeBucketAgg($index)"><i class="fa fa-minus"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="showOptions">
<div style="margin: 20px 0 20px 148px;display: inline-block">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 60px">
Order
</li>
<li>
<metric-segment segment="orderSegment" get-alt-segments="getOrders()" on-value-changed="orderSegmentChanged()"></metric-segment>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 60px">
Size
</li>
<li>
<input type="text" class="input-mini tight-form-input" ng-model="agg.options.size" spellcheck='false' placeholder="0" ng-blur="get_data()">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 60px">
Order by
</li>
<li>
<metric-segment segment="timeSegment" get-alt-segments="getFields()" on-value-changed="timeFieldChanged()"></metric-segment>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
public/app/plugins/datasource/elasticsearch/partials/query.editor.html
......@@ -47,12 +47,6 @@
<li>
<input type="text" class="input-xlarge tight-form-input" ng-model="target.query" spellcheck='false' placeholder="Lucence query" ng-blur="get_data()">
</li>
<li class="tight-form-item query-keyword">
Time field
</li>
<li>
<metric-segment segment="timeSegment" get-alt-segments="getFields()" on-value-changed="timeFieldChanged()"></metric-segment>
</li>
</ul>
<div class="clearfix"></div>
......@@ -73,28 +67,82 @@
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-repeat="agg in target.bucketAggs">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
<span ng-show="$first">Group by</span>
<span ng-show="!$first">Then by</span>
</li>
<li>
<elastic-query-component model="agg" get-fields="getFields()" on-change="queryUpdated()"></elastic-query-component>
</li>
</ul>
<ul class="tight-form-list pull-right">
<li class="tight-form-item" ng-if="$index === 0">
<a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a>
<a class="pointer" ng-click="addMetric()"><i class="fa fa-plus"></i></a>
</li>
<li class="tight-form-item" ng-if="!$last">
<a class="pointer" ng-click="removeBucketAgg(agg, $index)"><i class="fa fa-minus"></i></a>
<a class="pointer" ng-click="removeMetric($index)"><i class="fa fa-minus"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div ng-repeat="agg in target.bucketAggs">
<elastic-bucket-agg
target="target" index="$index"
get-fields="getFields()"
on-change="queryUpdated()">
</elastic-bucket-agg>
</div>
<!-- <div class="tight&#45;form"> -->
<!-- <ul class="tight&#45;form&#45;list"> -->
<!-- <li class="tight&#45;form&#45;item query&#45;keyword tight&#45;form&#45;align" style="width: 75px;"> -->
<!-- <span ng&#45;show="$first">Group by</span> -->
<!-- <span ng&#45;show="!$first">Then by</span> -->
<!-- </li> -->
<!-- <li> -->
<!-- <elastic&#45;query&#45;component model="agg" get&#45;fields="getFields()" on&#45;change="queryUpdated()"></elastic&#45;query&#45;component> -->
<!-- </li> -->
<!-- </ul> -->
<!-- -->
<!-- <ul class="tight&#45;form&#45;list pull&#45;right"> -->
<!-- <li class="tight&#45;form&#45;item" ng&#45;if="$index === 0"> -->
<!-- <a class="pointer" ng&#45;click="addBucketAgg()"><i class="fa fa&#45;plus"></i></a> -->
<!-- </li> -->
<!-- <li class="tight&#45;form&#45;item" ng&#45;if="!$last"> -->
<!-- <a class="pointer" ng&#45;click="removeBucketAgg($index)"><i class="fa fa&#45;minus"></i></a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div class="clearfix"></div> -->
<!-- </div> -->
<!-- -->
<!-- <div class="tight&#45;form" ng&#45;if="agg.showOptions"> -->
<!-- <div style="margin: 20px 0 20px 148px;display: inline&#45;block"> -->
<!-- <div class="tight&#45;form"> -->
<!-- <ul class="tight&#45;form&#45;list"> -->
<!-- <li class="tight&#45;form&#45;item" style="width: 60px"> -->
<!-- Order -->
<!-- </li> -->
<!-- <li> -->
<!-- <metric&#45;segment segment="" get&#45;alt&#45;segments="getFields()" on&#45;value&#45;changed="timeFieldChanged()"></metric&#45;segment> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div class="clearfix"></div> -->
<!-- </div> -->
<!-- <div class="tight&#45;form"> -->
<!-- <ul class="tight&#45;form&#45;list"> -->
<!-- <li class="tight&#45;form&#45;item" style="width: 60px"> -->
<!-- Size -->
<!-- </li> -->
<!-- <li> -->
<!-- <input type="text" class="input&#45;mini tight&#45;form&#45;input" ng&#45;model="agg.options.size" spellcheck='false' placeholder="0" ng&#45;blur="get_data()"> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div class="clearfix"></div> -->
<!-- </div> -->
<!-- <div class="tight&#45;form last"> -->
<!-- <ul class="tight&#45;form&#45;list"> -->
<!-- <li class="tight&#45;form&#45;item" style="width: 60px"> -->
<!-- Order by -->
<!-- </li> -->
<!-- <li> -->
<!-- <metric&#45;segment segment="timeSegment" get&#45;alt&#45;segments="getFields()" on&#45;value&#45;changed="timeFieldChanged()"></metric&#45;segment> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div class="clearfix"></div> -->
<!-- </div> -->
<!-- </div> -->
</div>
public/app/plugins/datasource/elasticsearch/queryCtrl.js
......@@ -33,7 +33,6 @@ function (angular, _, ElasticQueryBuilder) {
$scope.initSelectSegments();
$scope.removeSelectSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove select --'});
$scope.resetSelectSegment = uiSegmentSrv.newSegment({fake: true, value: '-- reset --'});
$scope.removeGroupBySegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove group by --'});
$scope.queryBuilder = new ElasticQueryBuilder(target);
$scope.rawQueryOld = angular.toJson($scope.queryBuilder.build($scope.target), true);
......@@ -52,8 +51,6 @@ function (angular, _, ElasticQueryBuilder) {
$scope.selectSegments.push(uiSegmentSrv.newSegment({value: select.field, type: 'field' }));
}
});
$scope.selectSegments.push(uiSegmentSrv.newPlusButton());
};
$scope.getSelectSegments = function(segment, index) {
......@@ -171,23 +168,6 @@ function (angular, _, ElasticQueryBuilder) {
$scope.queryUpdated();
};
$scope.addBucketAgg = function() {
// if last is date histogram add it before
var lastBucket = $scope.target.bucketAggs[$scope.target.bucketAggs.length - 1];
var addIndex = $scope.target.bucketAggs.length - 1;
if (lastBucket && lastBucket.type === 'date_histogram') {
addIndex - 1;
}
$scope.target.bucketAggs.splice(addIndex, 0, {type: "terms", field: "select field" });
};
$scope.removeBucketAgg = function(index) {
$scope.target.bucketAggs.splice(index, 1);
$scope.queryUpdated();
};
$scope.queryUpdated = function() {
var newJson = angular.toJson($scope.queryBuilder.build($scope.target), true);
if (newJson !== $scope.oldQueryRaw) {
......
public/css/less/tightform.less
......@@ -4,7 +4,7 @@
border-right: 1px solid @grafanaTargetBorder;
background: @grafanaTargetBackground;
&:last-child, &.last {
&.last {
border-bottom: 1px solid @grafanaTargetBorder;
}
......@@ -45,10 +45,6 @@
.tight-form-container {
border-bottom: 1px solid @grafanaTargetBorder;
.tight-form:last-child {
border-bottom: none;
}
}
.tight-form-btn {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment