mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(elasticsearch): so much work on new editor, its pretty broken right now, but when it is done it is going to be amazing
This commit is contained in:
parent
cc1e3d0101
commit
e339dbf473
@ -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) {
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
83
public/app/plugins/datasource/elasticsearch/bucketAgg.js
Normal file
83
public/app/plugins/datasource/elasticsearch/bucketAgg.js
Normal file
@ -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) {
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
@ -1,6 +1,6 @@
|
||||
define([
|
||||
'angular',
|
||||
'./queryComponent',
|
||||
'./bucketAgg',
|
||||
],
|
||||
function (angular) {
|
||||
'use strict';
|
||||
|
@ -0,0 +1,65 @@
|
||||
<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>
|
||||
|
||||
|
@ -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-form"> -->
|
||||
<!-- <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> -->
|
||||
<!-- </li> -->
|
||||
<!-- <li class="tight-form-item" ng-if="!$last"> -->
|
||||
<!-- <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="agg.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="" get-alt-segments="getFields()" on-value-changed="timeFieldChanged()"></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>
|
||||
|
@ -1,60 +0,0 @@
|
||||
define([
|
||||
'angular',
|
||||
'lodash',
|
||||
'jquery',
|
||||
],
|
||||
function (angular, _, $) {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('grafana.directives')
|
||||
.directive('elasticQueryComponent', function($compile, uiSegmentSrv, $q) {
|
||||
|
||||
//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>';
|
||||
|
||||
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();
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
@ -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) {
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user