Skip to content

N
nexpie-grafana-theme
Commit 0d2e1354 by Torkel Ödegaard
Options

feat(editor): thing are starting to work again

parent f9ce9bdc
Showing with 138 additions and 48 deletions
public/app/directives/metric.segment.js
......@@ -20,9 +20,9 @@ function (angular, app, _, $) {
return {
scope: {
segment: "=",
disableCustom: "=",
getAltSegments: "&",
onValueChanged: "&",
noCustom: "=",
getOptions: "&",
onChange: "&",
},
link: function($scope, elem) {
......@@ -48,14 +48,14 @@ function (angular, app, _, $) {
segment.fake = false;
segment.expandable = selected.expandable;
}
else if ($scope.disableCustom === false) {
else if ($scope.noCustom === false) {
segment.value = value;
segment.html = $sce.trustAsHtml(value);
segment.expandable = true;
segment.fake = false;
}
$scope.onValueChanged();
$scope.onChange();
});
};
......@@ -78,12 +78,12 @@ function (angular, app, _, $) {
if (options) { return options; }
$scope.$apply(function() {
$scope.getAltSegments().then(function(altSegments) {
$scope.getOptions().then(function(altSegments) {
$scope.altSegments = altSegments;
options = _.map($scope.altSegments, function(alt) { return alt.value; });
// add custom values
if ($scope.disableCustom === false) {
if ($scope.noCustom === false) {
if (!segment.fake && _.indexOf(options, segment.value) === -1) {
options.unshift(segment.value);
}
......@@ -161,11 +161,12 @@ function (angular, app, _, $) {
.module('grafana.directives')
.directive('metricSegmentModel', function(uiSegmentSrv, $q) {
return {
template: '<metric-segment segment="segment" get-alt-segments="getOptions()" on-value-changed="onSegmentChange()" disable-custom="true"></metric-segment>',
template: '<metric-segment segment="segment" get-options="getOptionsInternal()" on-change="onSegmentChange()" no-custom="true"></metric-segment>',
restrict: 'E',
scope: {
property: "=",
options: "=",
getOptions: "&",
onChange: "&",
},
link: {
......@@ -180,17 +181,26 @@ function (angular, app, _, $) {
}
};
$scope.getOptions = function() {
var optionSegments = _.map($scope.options, function(option) {
return uiSegmentSrv.newSegment({value: option.text});
});
return $q.when(optionSegments);
$scope.getOptionsInternal = function() {
if ($scope.options) {
var optionSegments = _.map($scope.options, function(option) {
return uiSegmentSrv.newSegment({value: option.text});
});
return $q.when(optionSegments);
} else {
return $scope.getOptions();
}
};
$scope.onSegmentChange = function() {
var option = _.findWhere($scope.options, {text: $scope.segment.value});
if (option && option.value !== $scope.property) {
$scope.property = option.value;
if ($scope.options) {
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();
}
};
......
public/app/plugins/datasource/elasticsearch/datasource.js
......@@ -191,7 +191,7 @@ function (angular, _, config, kbn, moment, ElasticQueryBuilder) {
seriesName = parentName;
if (metric.field) {
seriesName += ' ' + metric.field + ' ' + metric.agg;
seriesName += ' ' + metric.field + ' ' + metric.type;
value = bucket['m' + y.toString()].value;
} else {
seriesName += ' count';
......
public/app/plugins/datasource/elasticsearch/directives.js
define([
'angular',
'./bucketAgg',
'./metricAgg',
],
function (angular) {
'use strict';
......
public/app/plugins/datasource/elasticsearch/metricAgg.js 0 → 100644
define([
'angular',
'lodash',
'jquery',
],
function (angular, _, $) {
'use strict';
var module = angular.module('grafana.directives');
module.controller('ElasticMetricAggCtrl', function($scope, uiSegmentSrv, $q) {
var metricAggs = $scope.target.metrics;
$scope.metricAggTypes = [
{text: "Count", value: 'count' },
{text: "Average of", value: 'avg' },
{text: "Sum of", value: 'sum' },
{text: "Max of", value: 'max' },
{text: "Min of", value: 'min' },
{text: "Standard Deviations", value: 'std_dev' },
];
$scope.init = function() {
$scope.agg = metricAggs[$scope.index];
if (!$scope.agg.field) {
$scope.agg.field = 'select field';
}
}
$scope.$watchCollection("target.metrics", function() {
$scope.isFirst = $scope.index === 0;
$scope.isLast = $scope.index === metricAggs.length - 1;
$scope.isSingle = metricAggs.length === 1;
});
$scope.toggleOptions = function() {
$scope.showOptions = !$scope.showOptions;
}
$scope.addMetricAgg = function() {
var addIndex = metricAggs.length;
metricAggs.splice(addIndex, 0, {type: "count", field: "select field" });
};
$scope.removeMetricAgg = function(index) {
metricAggs.splice(index, 1);
$scope.onChange();
};
$scope.init();
});
module.directive('elasticMetricAgg', function() {
return {
templateUrl: 'app/plugins/datasource/elasticsearch/partials/metricAgg.html',
controller: 'ElasticMetricAggCtrl',
restrict: 'E',
scope: {
target: "=",
index: "=",
onChange: "&",
getFields: "&",
},
link: function postLink($scope, elem) {
}
};
});
});
public/app/plugins/datasource/elasticsearch/partials/bucketAgg.html
......@@ -14,10 +14,10 @@
</ul>
<ul class="tight-form-list pull-right">
<li class="tight-form-item" ng-if="isFirst">
<li class="tight-form-item last" 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">
<li class="tight-form-item last" ng-if="!isLast">
<a class="pointer" ng-click="removeBucketAgg($index)"><i class="fa fa-minus"></i></a>
</li>
</ul>
......
public/app/plugins/datasource/elasticsearch/partials/metricAgg.html 0 → 100644
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
Metric
</li>
<li>
<metric-segment-model property="agg.type" options="metricAggTypes" on-change="onChange()"></metric-segment-model>
</li>
<li ng-if="agg.type !== 'count'">
<metric-segment-model property="agg.field" get-options="getFields()" on-change="onChange()"></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 last" ng-if="isFirst">
<a class="pointer" ng-click="addMetricAgg()"><i class="fa fa-plus"></i></a>
</li>
<li class="tight-form-item last" ng-if="!isSingle">
<a class="pointer" ng-click="removeMetricAgg($index)"><i class="fa fa-minus"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
public/app/plugins/datasource/elasticsearch/partials/query.editor.html
......@@ -57,25 +57,13 @@
</div>
<div ng-hide="target.rawQuery">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
Metrics
</li>
<li ng-repeat="segment in selectSegments">
<metric-segment segment="segment" get-alt-segments="getSelectSegments(segment, $index)" on-value-changed="selectChanged(segment, $index)"></metric-segment>
</li>
</ul>
<ul class="tight-form-list pull-right">
<li class="tight-form-item" ng-if="$index === 0">
<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="removeMetric($index)"><i class="fa fa-minus"></i></a>
</li>
</ul>
<div class="clearfix"></div>
<div ng-repeat="agg in target.metrics">
<elastic-metric-agg
target="target" index="$index"
get-fields="getFields()"
on-change="queryUpdated()">
</elastic-metric-agg>
</div>
<div ng-repeat="agg in target.bucketAggs">
......
public/app/plugins/datasource/elasticsearch/queryBuilder.js
......@@ -70,7 +70,7 @@ function (angular) {
var metric = target.metrics[i];
if (metric.field) {
var aggField = {};
aggField[metric.agg] = {field: metric.field};
aggField[metric.type] = {field: metric.field};
nestedAggs.aggs['m' + i] = aggField;
}
......
public/app/plugins/datasource/elasticsearch/queryCtrl.js
......@@ -10,18 +10,12 @@ function (angular, _, ElasticQueryBuilder) {
module.controller('ElasticQueryCtrl', function($scope, $timeout, uiSegmentSrv, templateSrv, $q) {
$scope.metricAggregations = {
"Count": { value: 'count' },
"Average of": { value: 'avg' },
"Max of": { value: 'max' },
};
$scope.init = function() {
var target = $scope.target;
if (!target) { return; }
target.timeField = target.timeField || '@timestamp';
target.metrics = target.metrics || [{ agg: 'count' }];
target.metrics = target.metrics || [{ type: 'count' }];
target.bucketAggs = target.bucketAggs || [];
target.bucketAggs = [
{
......
public/test/specs/elasticsearch-querybuilder-specs.js
......@@ -9,7 +9,7 @@ define([
var builder = new ElasticQueryBuilder();
var query = builder.build({
metrics: [{agg: 'Count'}],
metrics: [{type: 'Count'}],
timeField: '@timestamp',
bucketAggs: [{type: 'date_histogram', field: '@timestamp'}],
});
......@@ -22,7 +22,7 @@ define([
var builder = new ElasticQueryBuilder();
var query = builder.build({
metrics: [{agg: 'Count'}],
metrics: [{type: 'Count'}],
timeField: '@timestamp',
bucketAggs: [
{type: 'terms', field: '@host'},
......@@ -39,7 +39,7 @@ define([
var builder = new ElasticQueryBuilder();
var query = builder.build({
metrics: [{agg: 'avg', field: '@value'}],
metrics: [{type: 'avg', field: '@value'}],
bucketAggs: [{type: 'date_histogram', field: '@timestamp'}],
}, 100, 1000);
......
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