feat(elasticsearch): close to getting group by term options ui working

This commit is contained in:
Torkel Ödegaard 2015-09-05 10:48:11 +02:00
parent c48f24d269
commit 756ec8ccd7
3 changed files with 54 additions and 14 deletions

View File

@ -170,14 +170,14 @@ function (angular, app, _, $) {
onChange: "&",
},
link: {
pre: function postLink($scope, elem) {
pre: function postLink($scope, elem, attrs) {
$scope.valueToSegment = function(value) {
var option = _.findWhere($scope.options, {value: value});
if (option) {
return uiSegmentSrv.newSegment({value: option.text});
return uiSegmentSrv.newSegment({value: option.text, cssClass: attrs.cssClass});
} else {
return uiSegmentSrv.newSegment({value: value});
return uiSegmentSrv.newSegment({value: value, cssClass: attrs.cssClass});
}
};

View File

@ -11,24 +11,62 @@ function (angular, _, $) {
module.controller('ElasticBucketAggCtrl', function($scope, uiSegmentSrv, $q) {
var bucketAggs = $scope.target.bucketAggs;
$scope.agg = bucketAggs[$scope.index];
$scope.bucketAggTypes = [
{text: "Terms", value: 'terms' },
{text: "Date Histogram", value: 'date_histogram' },
];
$scope.orderOptions = [
{text: "Top", value: 'desc' },
{text: "Bottom", value: 'asc' },
];
$scope.sizeOptions = [
{text: "No limit", value: '0' },
{text: "1", value: '1' },
{text: "2", value: '2' },
{text: "3", value: '4' },
{text: "5", value: '5' },
{text: "10", value: '10' },
{text: "15", value: '15' },
{text: "20", value: '20' },
];
$scope.$watch("index", function() {
$scope.isFirst = $scope.index === 0;
$scope.isLast = $scope.index === bucketAggs.length - 1;
});
if ($scope.agg.type === "terms") {
$scope.aggOptionsString = "Top 5, Order by: sum @value";
}
$scope.init = function() {
$scope.agg = bucketAggs[$scope.index];
$scope.modelIsValid();
};
$scope.onChangeInternal = function() {
if ($scope.modelIsValid()) {
$scope.onChange();
}
};
$scope.modelIsValid = function() {
if ($scope.agg.type === "terms") {
$scope.aggOptionsString = "Top 5, Order by: sum @value";
$scope.agg.order = $scope.agg.order || "desc";
$scope.agg.size = $scope.agg.size || "0";
$scope.agg.orderBy = $scope.agg.orderBy || "_count";
}
return true;
};
$scope.toggleOptions = function() {
$scope.showOptions = !$scope.showOptions;
$scope.orderByOptions = [
{text: "Doc Count", value: '_count' },
{text: "Term name", value: '_term' },
{text: "Average of @value", value: '0' },
];
}
$scope.addBucketAgg = function() {
@ -48,6 +86,8 @@ function (angular, _, $) {
$scope.onChange();
};
$scope.init();
});
module.directive('elasticBucketAgg', function() {

View File

@ -5,8 +5,8 @@
<span ng-hide="isFirst">Then by</span>
</li>
<li>
<metric-segment-model property="agg.type" options="bucketAggTypes" on-change="onChange()"></metric-segment-model>
<metric-segment-model property="agg.field" get-options="getFields()" on-change="onChange()"></metric-segment>
<metric-segment-model property="agg.type" options="bucketAggTypes" on-change="onChangeInternal()"></metric-segment-model>
<metric-segment-model property="agg.field" get-options="getFields()" on-change="onChangeInternal()"></metric-segment>
</li>
<li class="tight-form-item tight-form-align" ng-if="aggOptionsString">
<a ng-click="toggleOptions()">{{aggOptionsString}}</a>
@ -32,7 +32,7 @@
Order
</li>
<li>
<metric-segment-model property="agg.order" options="['Top', 'Bottom']"></metric-segment-model>
<metric-segment-model property="agg.order" options="orderOptions" on-change="onChangeInternal()" css-class="last"></metric-segment-model>
</li>
</ul>
<div class="clearfix"></div>
@ -43,7 +43,7 @@
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()">
<metric-segment-model property="agg.size" options="sizeOptions" on-change="onChangeInternal()" css-class="last"></metric-segment-model>
</li>
</ul>
<div class="clearfix"></div>
@ -51,10 +51,10 @@
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 60px">
Order by
By
</li>
<li>
<metric-segment segment="timeSegment" get-alt-segments="getFields()" on-value-changed="timeFieldChanged()"></metric-segment>
<metric-segment-model property="agg.orderBy" options="orderByOptions" on-change="onChangeInternal()" css-class="last"></metric-segment-model>
</li>
</ul>
<div class="clearfix"></div>