From c48f24d269d38ffa2d58462f9c5aa5f45cc93fc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 5 Sep 2015 10:14:21 +0200 Subject: [PATCH] feat(editor): more work on editor components, extracing things and making reusable directives --- public/app/directives/metric.segment.js | 8 +- .../datasource/elasticsearch/bucketAgg.js | 16 +-- .../datasource/elasticsearch/datasource.js | 8 +- .../datasource/elasticsearch/metricAgg.js | 4 +- .../elasticsearch/partials/bucketAgg.html | 6 +- .../elasticsearch/partials/metricAgg.html | 2 +- .../datasource/elasticsearch/queryBuilder.js | 11 +- .../datasource/elasticsearch/queryCtrl.js | 126 +----------------- 8 files changed, 25 insertions(+), 156 deletions(-) diff --git a/public/app/directives/metric.segment.js b/public/app/directives/metric.segment.js index e9d014d195c..3cd8068031f 100644 --- a/public/app/directives/metric.segment.js +++ b/public/app/directives/metric.segment.js @@ -197,12 +197,16 @@ function (angular, app, _, $) { var option = _.findWhere($scope.options, {text: $scope.segment.value}); if (option && option.value !== $scope.property) { $scope.property = option.value; - $scope.onChange(); } } else { $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); diff --git a/public/app/plugins/datasource/elasticsearch/bucketAgg.js b/public/app/plugins/datasource/elasticsearch/bucketAgg.js index 7c3954805e8..818305c427b 100644 --- a/public/app/plugins/datasource/elasticsearch/bucketAgg.js +++ b/public/app/plugins/datasource/elasticsearch/bucketAgg.js @@ -27,8 +27,6 @@ function (angular, _, $) { $scope.aggOptionsString = "Top 5, Order by: sum @value"; } - $scope.fieldSegment = uiSegmentSrv.newSegment($scope.agg.field); - $scope.toggleOptions = function() { $scope.showOptions = !$scope.showOptions; } @@ -45,21 +43,11 @@ function (angular, _, $) { bucketAggs.splice(addIndex, 0, {type: "terms", field: "select field" }); }; - $scope.removeBucketAgg = function(index) { - bucketAggs.splice(index, 1); + $scope.removeBucketAgg = function() { + bucketAggs.splice($scope.index, 1); $scope.onChange(); }; - $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() { diff --git a/public/app/plugins/datasource/elasticsearch/datasource.js b/public/app/plugins/datasource/elasticsearch/datasource.js index c28792e2d95..94eba54f8b5 100644 --- a/public/app/plugins/datasource/elasticsearch/datasource.js +++ b/public/app/plugins/datasource/elasticsearch/datasource.js @@ -190,12 +190,12 @@ function (angular, _, config, kbn, moment, ElasticQueryBuilder) { metric = target.metrics[y]; seriesName = parentName; - if (metric.field) { - seriesName += ' ' + metric.field + ' ' + metric.type; - value = bucket['m' + y.toString()].value; - } else { + if (metric.type === 'count') { seriesName += ' 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: []}; diff --git a/public/app/plugins/datasource/elasticsearch/metricAgg.js b/public/app/plugins/datasource/elasticsearch/metricAgg.js index 0cc43bcc2cc..ffe6c47ba40 100644 --- a/public/app/plugins/datasource/elasticsearch/metricAgg.js +++ b/public/app/plugins/datasource/elasticsearch/metricAgg.js @@ -42,8 +42,8 @@ function (angular, _, $) { metricAggs.splice(addIndex, 0, {type: "count", field: "select field" }); }; - $scope.removeMetricAgg = function(index) { - metricAggs.splice(index, 1); + $scope.removeMetricAgg = function() { + metricAggs.splice($scope.index, 1); $scope.onChange(); }; diff --git a/public/app/plugins/datasource/elasticsearch/partials/bucketAgg.html b/public/app/plugins/datasource/elasticsearch/partials/bucketAgg.html index 85ae79a0ae0..0ac2572ce45 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/bucketAgg.html +++ b/public/app/plugins/datasource/elasticsearch/partials/bucketAgg.html @@ -5,8 +5,8 @@ Then by
  • - - + +
  • {{aggOptionsString}} @@ -18,7 +18,7 @@
  • - +
    • diff --git a/public/app/plugins/datasource/elasticsearch/partials/metricAgg.html b/public/app/plugins/datasource/elasticsearch/partials/metricAgg.html index e42f2fe3f52..109e7c63cec 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/metricAgg.html +++ b/public/app/plugins/datasource/elasticsearch/partials/metricAgg.html @@ -19,7 +19,7 @@
  • - +
    • diff --git a/public/app/plugins/datasource/elasticsearch/queryBuilder.js b/public/app/plugins/datasource/elasticsearch/queryBuilder.js index 52373b03249..2f336b3a698 100644 --- a/public/app/plugins/datasource/elasticsearch/queryBuilder.js +++ b/public/app/plugins/datasource/elasticsearch/queryBuilder.js @@ -68,12 +68,13 @@ function (angular) { for (i = 0; i < target.metrics.length; i++) { var metric = target.metrics[i]; - if (metric.field) { - var aggField = {}; - aggField[metric.type] = {field: metric.field}; - - nestedAggs.aggs['m' + i] = aggField; + if (metric.type === 'count') { + continue; } + + var aggField = {}; + aggField[metric.type] = {field: metric.field}; + nestedAggs.aggs['m' + i] = aggField; } return query; diff --git a/public/app/plugins/datasource/elasticsearch/queryCtrl.js b/public/app/plugins/datasource/elasticsearch/queryCtrl.js index 2bfaad6e0ab..2885f073b50 100644 --- a/public/app/plugins/datasource/elasticsearch/queryCtrl.js +++ b/public/app/plugins/datasource/elasticsearch/queryCtrl.js @@ -30,7 +30,6 @@ function (angular, _, ElasticQueryBuilder) { $scope.timeSegment = uiSegmentSrv.newSegment(target.timeField); - $scope.initSelectSegments(); $scope.removeSelectSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove select --'}); $scope.resetSelectSegment = uiSegmentSrv.newSegment({fake: true, value: '-- reset --'}); @@ -38,137 +37,14 @@ function (angular, _, ElasticQueryBuilder) { $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() { return $scope.datasource.metricFindQuery('fields()') .then($scope.transformToSegments(false)) .then(null, $scope.handleQueryError); }; - $scope.timeFieldChanged = function() { - $scope.target.timeField = $scope.timeSegment.value; - $scope.queryUpdated(); - }; - $scope.queryUpdated = function() { + console.log('qery updated'); var newJson = angular.toJson($scope.queryBuilder.build($scope.target), true); if (newJson !== $scope.oldQueryRaw) { $scope.rawQueryOld = newJson;