From e339dbf4733dd60c5529064fc152d7b0e72f3fcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 4 Sep 2015 22:10:56 +0200 Subject: [PATCH] feat(elasticsearch): so much work on new editor, its pretty broken right now, but when it is done it is going to be amazing --- .../elasticsearch/advancedOptions.js | 23 +++++ .../datasource/elasticsearch/bucketAgg.js | 83 +++++++++++++++++ .../datasource/elasticsearch/directives.js | 2 +- .../elasticsearch/partials/bucketAgg.html | 65 +++++++++++++ .../elasticsearch/partials/query.editor.html | 92 ++++++++++++++----- .../elasticsearch/queryComponent.js | 60 ------------ .../datasource/elasticsearch/queryCtrl.js | 20 ---- public/css/less/tightform.less | 6 +- 8 files changed, 243 insertions(+), 108 deletions(-) create mode 100644 public/app/plugins/datasource/elasticsearch/advancedOptions.js create mode 100644 public/app/plugins/datasource/elasticsearch/bucketAgg.js create mode 100644 public/app/plugins/datasource/elasticsearch/partials/bucketAgg.html delete mode 100644 public/app/plugins/datasource/elasticsearch/queryComponent.js diff --git a/public/app/plugins/datasource/elasticsearch/advancedOptions.js b/public/app/plugins/datasource/elasticsearch/advancedOptions.js new file mode 100644 index 00000000000..aa8a1eb6007 --- /dev/null +++ b/public/app/plugins/datasource/elasticsearch/advancedOptions.js @@ -0,0 +1,23 @@ +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) { + } + }; + }); +}); diff --git a/public/app/plugins/datasource/elasticsearch/bucketAgg.js b/public/app/plugins/datasource/elasticsearch/bucketAgg.js new file mode 100644 index 00000000000..156f5582aca --- /dev/null +++ b/public/app/plugins/datasource/elasticsearch/bucketAgg.js @@ -0,0 +1,83 @@ +define([ + 'angular', + 'lodash', + 'jquery', +], +function (angular, _, $) { + 'use strict'; + + var module = angular.module('grafana.directives'); + + module.controller('ElasticBucketAggCtrl', function($scope, uiSegmentSrv, $q) { + var bucketAggs = $scope.target.bucketAggs; + + $scope.agg = bucketAggs[$scope.index]; + + $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.typeSegment = uiSegmentSrv.newSegment($scope.agg.type); + $scope.fieldSegment = uiSegmentSrv.newSegment($scope.agg.field); + + $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; + + if (lastBucket && lastBucket.type === 'date_histogram') { + addIndex - 1; + } + + bucketAggs.splice(addIndex, 0, {type: "terms", field: "select field" }); + }; + + $scope.removeBucketAgg = function(index) { + bucketAggs.splice(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() { + return { + templateUrl: 'app/plugins/datasource/elasticsearch/partials/bucketAgg.html', + controller: 'ElasticBucketAggCtrl', + restrict: 'E', + scope: { + target: "=", + index: "=", + onChange: "&", + getFields: "&", + }, + link: function postLink($scope, elem) { + } + }; + }); +}); diff --git a/public/app/plugins/datasource/elasticsearch/directives.js b/public/app/plugins/datasource/elasticsearch/directives.js index ee6e4a77625..40df508ab26 100644 --- a/public/app/plugins/datasource/elasticsearch/directives.js +++ b/public/app/plugins/datasource/elasticsearch/directives.js @@ -1,6 +1,6 @@ define([ 'angular', - './queryComponent', + './bucketAgg', ], function (angular) { 'use strict'; diff --git a/public/app/plugins/datasource/elasticsearch/partials/bucketAgg.html b/public/app/plugins/datasource/elasticsearch/partials/bucketAgg.html new file mode 100644 index 00000000000..68bea648205 --- /dev/null +++ b/public/app/plugins/datasource/elasticsearch/partials/bucketAgg.html @@ -0,0 +1,65 @@ +
+ + + +
+
+ +
+
+
+
    +
  • + Order +
    • +
  • + +
    • +
+
+
+
+
    +
  • + Size +
    • +
  • + +
    • +
+
+
+
+
    +
  • + Order by +
    • +
  • + +
    • +
+
+
+
+
+ + diff --git a/public/app/plugins/datasource/elasticsearch/partials/query.editor.html b/public/app/plugins/datasource/elasticsearch/partials/query.editor.html index 8b30fb7e6f4..a7a2b6648a1 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/query.editor.html +++ b/public/app/plugins/datasource/elasticsearch/partials/query.editor.html @@ -47,12 +47,6 @@
    • -
  • - Time field -
    • -
  • - -
    • @@ -73,28 +67,82 @@ -
    - - -
    - -
    + +
    + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/app/plugins/datasource/elasticsearch/queryComponent.js b/public/app/plugins/datasource/elasticsearch/queryComponent.js deleted file mode 100644 index 7d3b09a6e65..00000000000 --- a/public/app/plugins/datasource/elasticsearch/queryComponent.js +++ /dev/null @@ -1,60 +0,0 @@ -define([ - 'angular', - 'lodash', - 'jquery', -], -function (angular, _, $) { - 'use strict'; - - angular - .module('grafana.directives') - .directive('elasticQueryComponent', function($compile, uiSegmentSrv, $q) { - - //var linkTemplate = ''; - /* jshint maxlen:false */ - var template1 = ''; - /* jshint maxlen:false */ - var template2 = ''; - - return { - restrict: 'E', - scope: { - model: "=", - onChange: "&", - getFields: "&", - }, - link: function postLink($scope, elem) { - - $scope.getBucketAggTypes = function() { - return $q.when([ - uiSegmentSrv.newSegment({value: 'terms'}), - uiSegmentSrv.newSegment({value: 'date_histogram'}), - ]); - }; - - $scope.fieldChanged = function() { - $scope.model.field = $scope.fieldSegment.value; - $scope.onChange(); - }; - - $scope.bucketAggTypeChanged = function() { - $scope.model.type = $scope.typeSegment.value; - $scope.onChange(); - }; - - function addElementsAndCompile() { - var $html = $(template1 + template2); - - $scope.fieldSegment = uiSegmentSrv.newSegment($scope.model.field); - $scope.typeSegment = uiSegmentSrv.newSegment($scope.model.type); - - $html.appendTo(elem); - - $compile(elem.contents())($scope); - } - - addElementsAndCompile(); - } - }; - }); -}); diff --git a/public/app/plugins/datasource/elasticsearch/queryCtrl.js b/public/app/plugins/datasource/elasticsearch/queryCtrl.js index 60191fc2620..27d1d1c0952 100644 --- a/public/app/plugins/datasource/elasticsearch/queryCtrl.js +++ b/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) { diff --git a/public/css/less/tightform.less b/public/css/less/tightform.less index 7961cef775a..7581f6eac55 100644 --- a/public/css/less/tightform.less +++ b/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 {