IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

stackdriver: WIP - implement stackdriver style auto alignment period. also return the used alignment period and display it in the query editor

Browse Source
This commit is contained in:
Erik Sundell
2018-09-26 17:50:08 +02:00
parent af9033f3e0
commit ed6d3bf6ed
5 changed files with 48 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,15 +28,19 @@
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form offset-width-9">
<label class="gf-form-label query-keyword width-12">Alignment Period</label>
</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">
<select class="gf-form-input width-14" ng-model="target.aggregation.alignmentPeriod" ng-options="f.value as f.text for f in alignmentPeriods"
<select class="gf-form-input width-12" ng-model="target.aggregation.alignmentPeriod" ng-options="f.value as f.text for f in alignmentPeriods"
ng-change="refresh()"></select>
</div>
</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">
<label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow">
{{formatAlignmentText()}}
</label>
</div>
</div>

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

@@ -41,7 +41,7 @@
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<stackdriver-aggregation target="ctrl.target" refresh="ctrl.refresh()"></stackdriver-aggregation>
<stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label query-keyword width-9">Alias By</span>

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

@@ -1,6 +1,8 @@
import angular from 'angular';
import _ from 'lodash';
import * as options from './constants';
import * as options from './constants';
import kbn from 'app/core/utils/kbn';
export class StackdriverAggregation {
constructor() {
@@ -10,6 +12,7 @@ export class StackdriverAggregation {
restrict: 'E',
scope: {
target: '=',
alignmentPeriod: '<',
refresh: '&',
},
};
@@ -24,6 +27,7 @@ export class StackdriverAggregationCtrl {
$scope.alignmentPeriods = options.alignmentPeriods;
$scope.onAlignmentChange = this.onAlignmentChange.bind(this);
$scope.onAggregationChange = this.onAggregationChange.bind(this);
$scope.formatAlignmentText = this.formatAlignmentText.bind(this);
$scope.$on('metricTypeChanged', this.setAlignOptions.bind(this));
}
@@ -77,6 +81,13 @@ export class StackdriverAggregationCtrl {
this.$scope.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
}
}
formatAlignmentText() {
const selectedAlignment = this.$scope.alignOptions.find(
ap => ap.value === this.$scope.target.aggregation.perSeriesAligner
);
return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${selectedAlignment.text})`;
}
}
angular.module('grafana.controllers').directive('stackdriverAggregation', StackdriverAggregation);

1
public/app/plugins/datasource/stackdriver/query_ctrl.ts
View File

@@ -5,6 +5,7 @@ import { FilterSegments, DefaultRemoveFilterValue } from './filter_segments';
import './query_aggregation_ctrl';
export interface QueryMeta {
alignmentPeriod: string;
rawQuery: string;
rawQueryString: string;
metricLabels: { [key: string]: string[] };