mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
stackdriver: adds advanced options collapse to query editor with the possibility to select secondary aggregation and alignment
This commit is contained in:
Erik Sundell
35
public/app/plugins/datasource/stackdriver/constants.ts
Normal file
35
public/app/plugins/datasource/stackdriver/constants.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
export const alignOptions = [
|
||||
{ text: 'none', value: 'ALIGN_NONE' },
|
||||
{ text: 'delta', value: 'ALIGN_DELTA' },
|
||||
{ text: 'rate', value: 'ALIGN_RATE' },
|
||||
{ text: 'interpolate', value: 'ALIGN_INTERPOLATE' },
|
||||
{ text: 'next older', value: 'ALIGN_NEXT_OLDER' },
|
||||
{ text: 'min', value: 'ALIGN_MIN' },
|
||||
{ text: 'max', value: 'ALIGN_MAX' },
|
||||
{ text: 'mean', value: 'ALIGN_MEAN' },
|
||||
{ text: 'count', value: 'ALIGN_COUNT' },
|
||||
{ text: 'sum', value: 'ALIGN_SUM' },
|
||||
{ text: 'stddev', value: 'ALIGN_STDDEV' },
|
||||
{ text: 'count true', value: 'ALIGN_COUNT_TRUE' },
|
||||
{ text: 'count false', value: 'ALIGN_COUNT_FALSE' },
|
||||
{ text: 'fraction true', value: 'ALIGN_FRACTION_TRUE' },
|
||||
{ text: 'percentile 99', value: 'ALIGN_PERCENTILE_99' },
|
||||
{ text: 'percentile 95', value: 'ALIGN_PERCENTILE_95' },
|
||||
{ text: 'percentile 50', value: 'ALIGN_PERCENTILE_50' },
|
||||
{ text: 'percentile 05', value: 'ALIGN_PERCENTILE_05' },
|
||||
{ text: 'percent change', value: 'ALIGN_PERCENT_CHANGE' },
|
||||
];
|
||||
|
||||
export const aggOptions = [
|
||||
{ text: 'none', value: 'REDUCE_NONE' },
|
||||
{ text: 'mean', value: 'REDUCE_MEAN' },
|
||||
{ text: 'min', value: 'REDUCE_MIN' },
|
||||
{ text: 'max', value: 'REDUCE_MAX' },
|
||||
{ text: 'sum', value: 'REDUCE_SUM' },
|
||||
{ text: 'std. dev.', value: 'REDUCE_STDDEV' },
|
||||
{ text: 'count', value: 'REDUCE_COUNT' },
|
||||
{ text: '99th percentile', value: 'REDUCE_PERCENTILE_99' },
|
||||
{ text: '95th percentile', value: 'REDUCE_PERCENTILE_95' },
|
||||
{ text: '50th percentile', value: 'REDUCE_PERCENTILE_50' },
|
||||
{ text: '5th percentile', value: 'REDUCE_PERCENTILE_05' },
|
||||
];
|
||||
@@ -20,6 +20,7 @@ export default class StackdriverDatasource {
|
||||
if (!t.hasOwnProperty('aggregation')) {
|
||||
t.aggregation = {
|
||||
crossSeriesReducer: 'REDUCE_MEAN',
|
||||
secondaryCrossSeriesReducer: 'REDUCE_NONE',
|
||||
groupBys: [],
|
||||
};
|
||||
}
|
||||
@@ -28,6 +29,8 @@ export default class StackdriverDatasource {
|
||||
datasourceId: this.id,
|
||||
metricType: t.metricType,
|
||||
primaryAggregation: t.aggregation.crossSeriesReducer,
|
||||
secondaryAggregation: t.aggregation.secondaryCrossSeriesReducer,
|
||||
perSeriesAligner: t.aggregation.perSeriesAligner,
|
||||
groupBys: t.aggregation.groupBys,
|
||||
view: t.view || 'FULL',
|
||||
filters: t.filters,
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-9">Metric Type</span>
|
||||
<gf-form-dropdown model="ctrl.target.metricType" get-options="ctrl.getMetricTypes($query)" class="min-width-20"
|
||||
disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onMetricTypeChange()"></gf-form-dropdown>
|
||||
<gf-form-dropdown model="ctrl.target.metricType" get-options="ctrl.getMetricTypes($query)" class="min-width-20" disabled
|
||||
type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onMetricTypeChange()"></gf-form-dropdown>
|
||||
</div>
|
||||
<div class="gf-form gf-form--grow">
|
||||
<div class="gf-form-label gf-form-label--grow"></div>
|
||||
@@ -16,15 +16,11 @@
|
||||
<metric-segment segment="segment" get-options="ctrl.getFilters(segment, $index)" on-change="ctrl.filterSegmentUpdated(segment, $index)"></metric-segment>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form gf-form--grow">
|
||||
<div class="gf-form-label gf-form-label--grow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form-inline">
|
||||
<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">
|
||||
<select class="gf-form-input width-14" ng-model="ctrl.target.aggregation.crossSeriesReducer" ng-options="f.value as f.text for f in ctrl.aggOptions"
|
||||
ng-change="ctrl.refresh()"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label query-keyword width-9">Group By</span>
|
||||
<div class="gf-form" ng-repeat="segment in ctrl.groupBySegments">
|
||||
@@ -35,11 +31,47 @@
|
||||
<div class="gf-form-label gf-form-label--grow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form-inline">
|
||||
<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">
|
||||
<select class="gf-form-input width-12" ng-model="ctrl.target.aggregation.crossSeriesReducer" ng-options="f.value as f.text for f in ctrl.aggOptions"
|
||||
ng-change="ctrl.refresh()"></select>
|
||||
</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>
|
||||
Options
|
||||
</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
|
||||
<div class="gf-form offset-width-9">
|
||||
<label class="gf-form-label query-keyword width-12">Secondary Aggregation</label>
|
||||
<div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
|
||||
<select class="gf-form-input width-14" ng-model="ctrl.target.aggregation.secondaryCrossSeriesReducer" ng-options="f.value as f.text for f in ctrl.aggOptions"
|
||||
ng-change="ctrl.refresh()"></select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>
|
||||
<div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions"> -->
|
||||
<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">
|
||||
<select class="gf-form-input width-14" ng-model="ctrl.target.aggregation.perSeriesAligner" ng-options="f.value as f.text for f in ctrl.alignOptions"
|
||||
ng-change="ctrl.refresh()"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-9">Project</span>
|
||||
<input class="gf-form-input" disabled type="text" ng-model='ctrl.target.project.name' get-options="ctrl.getProjects()"
|
||||
css-class="min-width-12" />
|
||||
<input class="gf-form-input" disabled type="text" ng-model='ctrl.target.project.name' get-options="ctrl.getProjects()" css-class="min-width-12"
|
||||
/>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import _ from 'lodash';
|
||||
import { QueryCtrl } from 'app/plugins/sdk';
|
||||
import appEvents from 'app/core/app_events';
|
||||
import { aggOptions, alignOptions } from './constants';
|
||||
|
||||
export interface QueryMeta {
|
||||
rawQuery: string;
|
||||
@@ -20,6 +21,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
|
||||
refId: string;
|
||||
aggregation: {
|
||||
crossSeriesReducer: string;
|
||||
secondaryCrossSeriesReducer: string;
|
||||
alignmentPeriod: string;
|
||||
perSeriesAligner: string;
|
||||
groupBys: string[];
|
||||
@@ -40,30 +42,21 @@ export class StackdriverQueryCtrl extends QueryCtrl {
|
||||
metricType: this.defaultDropdownValue,
|
||||
aggregation: {
|
||||
crossSeriesReducer: 'REDUCE_MEAN',
|
||||
secondaryCrossSeriesReducer: 'REDUCE_NONE',
|
||||
alignmentPeriod: '',
|
||||
perSeriesAligner: '',
|
||||
perSeriesAligner: 'ALIGN_MEAN',
|
||||
groupBys: [],
|
||||
},
|
||||
filters: [],
|
||||
showAggregationOptions: false,
|
||||
};
|
||||
|
||||
groupBySegments: any[];
|
||||
filterSegments: any[];
|
||||
removeSegment: any;
|
||||
|
||||
aggOptions = [
|
||||
{ text: 'none', value: 'REDUCE_NONE' },
|
||||
{ text: 'mean', value: 'REDUCE_MEAN' },
|
||||
{ text: 'min', value: 'REDUCE_MIN' },
|
||||
{ text: 'max', value: 'REDUCE_MAX' },
|
||||
{ text: 'sum', value: 'REDUCE_SUM' },
|
||||
{ text: 'std. dev.', value: 'REDUCE_STDDEV' },
|
||||
{ text: 'count', value: 'REDUCE_COUNT' },
|
||||
{ text: '99th percentile', value: 'REDUCE_PERCENTILE_99' },
|
||||
{ text: '95th percentile', value: 'REDUCE_PERCENTILE_95' },
|
||||
{ text: '50th percentile', value: 'REDUCE_PERCENTILE_50' },
|
||||
{ text: '5th percentile', value: 'REDUCE_PERCENTILE_05' },
|
||||
];
|
||||
aggOptions = [];
|
||||
alignOptions = [];
|
||||
|
||||
showHelp: boolean;
|
||||
showLastQuery: boolean;
|
||||
@@ -79,6 +72,8 @@ export class StackdriverQueryCtrl extends QueryCtrl {
|
||||
|
||||
this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
|
||||
this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
|
||||
this.alignOptions = alignOptions;
|
||||
this.aggOptions = aggOptions;
|
||||
|
||||
this.getCurrentProject()
|
||||
.then(this.getMetricTypes.bind(this))
|
||||
|
||||
Reference in New Issue
Block a user