Skip to content

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

feat(editor): more work on editor components, extracing things and making reusable directives

parent 0d2e1354
Showing with 23 additions and 154 deletions
public/app/directives/metric.segment.js
...@@ -197,12 +197,16 @@ function (angular, app, _, $) { ...@@ -197,12 +197,16 @@ function (angular, app, _, $) {
var option = _.findWhere($scope.options, {text: $scope.segment.value}); var option = _.findWhere($scope.options, {text: $scope.segment.value});
if (option && option.value !== $scope.property) { if (option && option.value !== $scope.property) {
$scope.property = option.value; $scope.property = option.value;
$scope.onChange();
} }
} else { } else {
$scope.property = $scope.segment.value; $scope.property = $scope.segment.value;
$scope.onChange();
} }
// needs to call this after digest so
// property is synced with outerscope
$scope.$$postDigest(function() {
$scope.onChange();
});
}; };
$scope.segment = $scope.valueToSegment($scope.property); $scope.segment = $scope.valueToSegment($scope.property);
......
public/app/plugins/datasource/elasticsearch/bucketAgg.js
...@@ -27,8 +27,6 @@ function (angular, _, $) { ...@@ -27,8 +27,6 @@ function (angular, _, $) {
$scope.aggOptionsString = "Top 5, Order by: sum @value"; $scope.aggOptionsString = "Top 5, Order by: sum @value";
} }
$scope.fieldSegment = uiSegmentSrv.newSegment($scope.agg.field);
$scope.toggleOptions = function() { $scope.toggleOptions = function() {
$scope.showOptions = !$scope.showOptions; $scope.showOptions = !$scope.showOptions;
} }
...@@ -45,21 +43,11 @@ function (angular, _, $) { ...@@ -45,21 +43,11 @@ function (angular, _, $) {
bucketAggs.splice(addIndex, 0, {type: "terms", field: "select field" }); bucketAggs.splice(addIndex, 0, {type: "terms", field: "select field" });
}; };
$scope.removeBucketAgg = function(index) { $scope.removeBucketAgg = function() {
bucketAggs.splice(index, 1); bucketAggs.splice($scope.index, 1);
$scope.onChange();
};
$scope.fieldChanged = function() {
$scope.agg.showOptions = true;
$scope.agg.field = $scope.fieldSegment.value;
$scope.onChange(); $scope.onChange();
}; };
$scope.bucketAggTypeChanged = function() {
$scope.agg.type = $scope.typeSegment.value;
$scope.onChange();
};
}); });
module.directive('elasticBucketAgg', function() { module.directive('elasticBucketAgg', function() {
......
public/app/plugins/datasource/elasticsearch/datasource.js
...@@ -190,12 +190,12 @@ function (angular, _, config, kbn, moment, ElasticQueryBuilder) { ...@@ -190,12 +190,12 @@ function (angular, _, config, kbn, moment, ElasticQueryBuilder) {
metric = target.metrics[y]; metric = target.metrics[y];
seriesName = parentName; seriesName = parentName;
if (metric.field) { if (metric.type === 'count') {
seriesName += ' ' + metric.field + ' ' + metric.type;
value = bucket['m' + y.toString()].value;
} else {
seriesName += ' count'; seriesName += ' count';
value = bucket.doc_count; value = bucket.doc_count;
} else {
seriesName += ' ' + metric.field + ' ' + metric.type;
value = bucket['m' + y.toString()].value;
} }
var serie = series[seriesName] = series[seriesName] || {target: seriesName, datapoints: []}; var serie = series[seriesName] = series[seriesName] || {target: seriesName, datapoints: []};
......
public/app/plugins/datasource/elasticsearch/metricAgg.js
...@@ -42,8 +42,8 @@ function (angular, _, $) { ...@@ -42,8 +42,8 @@ function (angular, _, $) {
metricAggs.splice(addIndex, 0, {type: "count", field: "select field" }); metricAggs.splice(addIndex, 0, {type: "count", field: "select field" });
}; };
$scope.removeMetricAgg = function(index) { $scope.removeMetricAgg = function() {
metricAggs.splice(index, 1); metricAggs.splice($scope.index, 1);
$scope.onChange(); $scope.onChange();
}; };
......
public/app/plugins/datasource/elasticsearch/partials/bucketAgg.html
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
<span ng-hide="isFirst">Then by</span> <span ng-hide="isFirst">Then by</span>
</li> </li>
<li> <li>
<metric-segment-model property="agg.type" options="bucketAggTypes" on-change="typeChanged()"></metric-segment-model> <metric-segment-model property="agg.type" options="bucketAggTypes" on-change="onChange()"></metric-segment-model>
<metric-segment segment="fieldSegment" get-alt-segments="getFields()" on-value-changed="fieldChanged()"></metric-segment> <metric-segment-model property="agg.field" get-options="getFields()" on-change="onChange()"></metric-segment>
</li> </li>
<li class="tight-form-item tight-form-align" ng-if="aggOptionsString"> <li class="tight-form-item tight-form-align" ng-if="aggOptionsString">
<a ng-click="toggleOptions()">{{aggOptionsString}}</a> <a ng-click="toggleOptions()">{{aggOptionsString}}</a>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a> <a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a>
</li> </li>
<li class="tight-form-item last" ng-if="!isLast"> <li class="tight-form-item last" ng-if="!isLast">
<a class="pointer" ng-click="removeBucketAgg($index)"><i class="fa fa-minus"></i></a> <a class="pointer" ng-click="removeBucketAgg()"><i class="fa fa-minus"></i></a>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
......
public/app/plugins/datasource/elasticsearch/partials/metricAgg.html
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<a class="pointer" ng-click="addMetricAgg()"><i class="fa fa-plus"></i></a> <a class="pointer" ng-click="addMetricAgg()"><i class="fa fa-plus"></i></a>
</li> </li>
<li class="tight-form-item last" ng-if="!isSingle"> <li class="tight-form-item last" ng-if="!isSingle">
<a class="pointer" ng-click="removeMetricAgg($index)"><i class="fa fa-minus"></i></a> <a class="pointer" ng-click="removeMetricAgg()"><i class="fa fa-minus"></i></a>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
......
public/app/plugins/datasource/elasticsearch/queryBuilder.js
...@@ -68,13 +68,14 @@ function (angular) { ...@@ -68,13 +68,14 @@ function (angular) {
for (i = 0; i < target.metrics.length; i++) { for (i = 0; i < target.metrics.length; i++) {
var metric = target.metrics[i]; var metric = target.metrics[i];
if (metric.field) { if (metric.type === 'count') {
continue;
}
var aggField = {}; var aggField = {};
aggField[metric.type] = {field: metric.field}; aggField[metric.type] = {field: metric.field};
nestedAggs.aggs['m' + i] = aggField; nestedAggs.aggs['m' + i] = aggField;
} }
}
return query; return query;
}; };
......
public/app/plugins/datasource/elasticsearch/queryCtrl.js
...@@ -30,7 +30,6 @@ function (angular, _, ElasticQueryBuilder) { ...@@ -30,7 +30,6 @@ function (angular, _, ElasticQueryBuilder) {
$scope.timeSegment = uiSegmentSrv.newSegment(target.timeField); $scope.timeSegment = uiSegmentSrv.newSegment(target.timeField);
$scope.initSelectSegments();
$scope.removeSelectSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove select --'}); $scope.removeSelectSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove select --'});
$scope.resetSelectSegment = uiSegmentSrv.newSegment({fake: true, value: '-- reset --'}); $scope.resetSelectSegment = uiSegmentSrv.newSegment({fake: true, value: '-- reset --'});
...@@ -38,137 +37,14 @@ function (angular, _, ElasticQueryBuilder) { ...@@ -38,137 +37,14 @@ function (angular, _, ElasticQueryBuilder) {
$scope.rawQueryOld = angular.toJson($scope.queryBuilder.build($scope.target), true); $scope.rawQueryOld = angular.toJson($scope.queryBuilder.build($scope.target), true);
}; };
$scope.initSelectSegments = function() {
$scope.selectSegments = [];
_.each($scope.target.metrics, function(select) {
if ($scope.selectSegments.length > 0) {
$scope.selectSegments.push(uiSegmentSrv.newCondition(" and "));
}
if (select.agg === 'count') {
$scope.selectSegments.push(uiSegmentSrv.newSegment({value: select.agg, type: 'agg'}));
} else {
$scope.selectSegments.push(uiSegmentSrv.newSegment({value: select.agg, type: 'agg'}));
$scope.selectSegments.push(uiSegmentSrv.newSegment({value: select.field, type: 'field' }));
}
});
};
$scope.getSelectSegments = function(segment, index) {
if (segment.type === 'agg' || segment.type === 'plus-button') {
var options = [
uiSegmentSrv.newSegment({value: 'count', type: 'agg'}),
uiSegmentSrv.newSegment({value: 'avg', type: 'agg', reqField: true}),
uiSegmentSrv.newSegment({value: 'sum', type: 'agg', reqField: true}),
uiSegmentSrv.newSegment({value: 'min', type: 'agg', reqField: true}),
uiSegmentSrv.newSegment({value: 'max', type: 'agg', reqField: true}),
];
// if we have other selects and this is not a plus button add remove option
if (segment.type !== 'plus-button' && $scope.selectSegments.length > 3) {
options.splice(0, 0, angular.copy($scope.removeSelectSegment));
}
// revert option is to reset the selectSegments if they become fucked
if (index === 0 && $scope.selectSegments.length > 2) {
options.splice(0, 0, angular.copy($scope.resetSelectSegment));
}
return $q.when(options);
}
return $scope.datasource.metricFindQuery('fields()')
.then($scope.transformToSegments(false))
.then(null, $scope.handleQueryError);
};
$scope.selectChanged = function(segment, index) {
// reset
if (segment.value === $scope.resetSelectSegment.value) {
$scope.target.metrics = [{ agg: 'count' }];
$scope.initSelectSegments();
$scope.queryUpdated();
return;
}
var nextSegment, removeCount;
// remove this select field
if (segment.value === $scope.removeSelectSegment.value) {
nextSegment = $scope.selectSegments[index + 1];
removeCount = 2;
if (nextSegment && nextSegment.type === 'field') {
removeCount += 1;
}
$scope.selectSegments.splice(Math.max(index-1, 0), removeCount);
$scope.rebuildTargetSelects();
$scope.queryUpdated();
return;
}
// add new
if (segment.type === 'plus-button' && index > 0) {
$scope.selectSegments.splice(index, 0, uiSegmentSrv.newCondition(' And '));
segment.type = 'agg';
index += 1;
}
if (segment.type === 'agg') {
nextSegment = $scope.selectSegments[index + 1];
if (segment.value === 'count' && nextSegment && nextSegment.type === 'field') {
$scope.selectSegments.splice(index + 1, 1);
} else if (!nextSegment || nextSegment.type !== 'field') {
$scope.selectSegments.splice(index + 1, 0, uiSegmentSrv.newSegment({value: 'select field', fake: true, type: 'field'}));
}
}
if ((index+1) === $scope.selectSegments.length) {
$scope.selectSegments.push(uiSegmentSrv.newPlusButton());
}
$scope.rebuildTargetSelects();
$scope.queryUpdated();
};
$scope.rebuildTargetSelects = function() {
$scope.target.metrics = [];
for (var i = 0; i < $scope.selectSegments.length; i++) {
var segment = $scope.selectSegments[i];
var select = {agg: segment.value };
if (segment.type === 'agg' && segment.value !== 'count') {
select.field = $scope.selectSegments[i+1].value;
i += 2;
} else {
i += 1;
}
if (select.field === 'select field') { continue; }
$scope.target.metrics.push(select);
}
};
$scope.getGroupByFields = function(segment) {
return $scope.datasource.metricFindQuery('fields()')
.then($scope.transformToSegments(false))
.then(function(results) {
if (segment.type !== 'plus-button') {
results.splice(0, 0, angular.copy($scope.removeGroupBySegment));
}
return results;
})
.then(null, $scope.handleQueryError);
};
$scope.getFields = function() { $scope.getFields = function() {
return $scope.datasource.metricFindQuery('fields()') return $scope.datasource.metricFindQuery('fields()')
.then($scope.transformToSegments(false)) .then($scope.transformToSegments(false))
.then(null, $scope.handleQueryError); .then(null, $scope.handleQueryError);
}; };
$scope.timeFieldChanged = function() {
$scope.target.timeField = $scope.timeSegment.value;
$scope.queryUpdated();
};
$scope.queryUpdated = function() { $scope.queryUpdated = function() {
console.log('qery updated');
var newJson = angular.toJson($scope.queryBuilder.build($scope.target), true); var newJson = angular.toJson($scope.queryBuilder.build($scope.target), true);
if (newJson !== $scope.oldQueryRaw) { if (newJson !== $scope.oldQueryRaw) {
$scope.rawQueryOld = newJson; $scope.rawQueryOld = newJson;
......
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