IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 17:43:35 -06:00
Code Issues Packages Projects Releases Wiki Activity

use new option group in aggregation directive

Browse Source
This commit is contained in:
Erik Sundell 2018-12-12 09:57:30 +01:00
parent eea91d2885
commit caedbc67b8
3 changed files with 97 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
View File

@ -2,16 +2,21 @@
<div class="gf-form">
<label class="gf-form-label query-keyword width-9">Aggregation</label>
<div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
<gf-form-dropdown model="ctrl.target.aggregation.crossSeriesReducer" get-options="ctrl.aggOptions" class="gf-form width-12"
disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
<option-group-picker
onChange="ctrl.handleAggregationChange"
selected="ctrl.target.aggregation.crossSeriesReducer"
groups="ctrl.aggOptions"
searchable="true"
placeholder="'Select Aggregation'"
className="'width-15'"
></option-group-picker>
</div>
</div>
<div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow">
<a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
<i class="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions"></i>
<i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i>
Advanced Options
<i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i> Advanced Options
</a>
</label>
</div>
@ -20,27 +25,35 @@
<div class="gf-form offset-width-9">
<label class="gf-form-label query-keyword width-12">Aligner</label>
<div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
<gf-form-dropdown model="ctrl.target.aggregation.perSeriesAligner" get-options="ctrl.alignOptions" class="gf-form width-12"
disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
<option-group-picker
onChange="ctrl.handleAlignmentChange"
selected="ctrl.target.aggregation.perSeriesAligner"
groups="ctrl.alignOptions"
searchable="true"
placeholder="'Select Alignment'"
className="'width-15'"
></option-group-picker>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
<div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label query-keyword width-9">Alignment Period</label>
<div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
<gf-form-dropdown model="ctrl.target.aggregation.alignmentPeriod" get-options="ctrl.alignmentPeriods" class="gf-form width-12"
disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
<option-group-picker
onChange="ctrl.handleAlignmentPeriodChange"
selected="ctrl.target.aggregation.alignmentPeriod"
groups="ctrl.alignmentPeriods"
searchable="true"
placeholder="'Select Alignment'"
className="'width-15'"
></option-group-picker>
</div>
</div>
<div class="gf-form gf-form--grow">
<label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow">
{{ctrl.formatAlignmentText()}}
</label>
<label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow"> {{ ctrl.formatAlignmentText() }} </label>
</div>
</div>
</div>

3
public/app/plugins/datasource/stackdriver/partials/query.editor.html
View File

@ -1,5 +1,6 @@
<query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
<stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"></stackdriver-filter>
<stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
></stackdriver-filter>
<stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
<div class="gf-form-inline">
<div class="gf-form">

79
public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
View File

@ -1,6 +1,6 @@
import coreModule from 'app/core/core_module';
import _ from 'lodash';
import * as options from './constants';
import { alignmentPeriods } from './constants';
import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from './functions';
import kbn from 'app/core/utils/kbn';
@ -29,9 +29,16 @@ export class StackdriverAggregationCtrl {
constructor(private $scope, private templateSrv) {
this.$scope.ctrl = this;
this.target = $scope.target;
this.alignmentPeriods = options.alignmentPeriods;
this.aggOptions = options.aggOptions;
this.alignOptions = options.alignOptions;
this.alignmentPeriods = [
this.getTemplateVariablesGroup(),
{
label: 'Alignment Periods',
options: alignmentPeriods.map(ap => ({
...ap,
label: ap.text,
})),
},
];
this.setAggOptions();
this.setAlignOptions();
const self = this;
@ -39,30 +46,68 @@ export class StackdriverAggregationCtrl {
self.setAggOptions();
self.setAlignOptions();
});
this.handleAlignmentChange = this.handleAlignmentChange.bind(this);
this.handleAggregationChange = this.handleAggregationChange.bind(this);
this.handleAlignmentPeriodChange = this.handleAlignmentPeriodChange.bind(this);
}
setAlignOptions() {
this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
if (!this.alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
...a,
label: a.text,
}));
this.alignOptions = [
this.getTemplateVariablesGroup(),
{
label: 'Alignment Options',
options: alignments,
},
];
if (!alignments.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
this.target.aggregation.perSeriesAligner = alignments.length > 0 ? alignments[0].value : '';
}
}
setAggOptions() {
this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
let aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
...a,
label: a.text,
}));
if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
this.deselectAggregationOption('REDUCE_NONE');
}
if (this.target.aggregation.groupBys.length > 0) {
this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
aggregations = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
this.deselectAggregationOption('REDUCE_NONE');
}
this.aggOptions = [
this.getTemplateVariablesGroup(),
{
label: 'Aggregations',
options: aggregations,
},
];
}
handleAlignmentChange(value) {
this.target.aggregation.perSeriesAligner = value;
this.$scope.refresh();
}
handleAggregationChange(value) {
this.target.aggregation.crossSeriesReducer = value;
this.$scope.refresh();
}
handleAlignmentPeriodChange(value) {
this.target.aggregation.alignmentPeriod = value;
this.$scope.refresh();
}
formatAlignmentText() {
const selectedAlignment = this.alignOptions.find(
const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
const selectedAlignment = alignments.find(
ap => ap.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner)
);
return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${
@ -74,6 +119,16 @@ export class StackdriverAggregationCtrl {
const newValue = this.aggOptions.find(o => o.value !== notValidOptionValue);
this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
}
getTemplateVariablesGroup() {
return {
label: 'Template Variables',
options: this.templateSrv.variables.map(v => ({
label: `$${v.name}`,
value: `$${v.name}`,
})),
};
}
}
coreModule.directive('stackdriverAggregation', StackdriverAggregation);