Skip to content

N
nexpie-grafana-theme
Commit 81bdf86b by Erik Sundell
Options

stackdriver: es6 style directive, avoid using scope

parent 8ae72bce
Showing with 32 additions and 27 deletions
public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
......@@ -2,25 +2,25 @@
<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="target.aggregation.crossSeriesReducer" ng-options="f.value as f.text for f in aggOptions"
<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="refresh()"></select>
</div>
</div>
<div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow">
<a ng-click="target.showAggregationOptions = !target.showAggregationOptions">
<i class="fa fa-caret-down" ng-show="target.showAggregationOptions"></i>
<i class="fa fa-caret-right" ng-hide="target.showAggregationOptions"></i>
<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
</a>
</label>
</div>
</div>
<div class="gf-form-group" ng-if="target.showAggregationOptions">
<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="target.aggregation.perSeriesAligner" ng-options="f.value as f.text for f in alignOptions"
<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="refresh()"></select>
</div>
......@@ -33,14 +33,14 @@
<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-12" 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="ctrl.target.aggregation.alignmentPeriod" ng-options="f.value as f.text for f in ctrl.alignmentPeriods"
ng-change="refresh()"></select>
</div>
</div>
<div class="gf-form gf-form--grow">
<label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow">
{{formatAlignmentText()}}
{{ctrl.formatAlignmentText()}}
</label>
</div>
</div>
\ No newline at end of file
public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
......@@ -19,51 +19,55 @@ export class StackdriverAggregation {
}
export class StackdriverAggregationCtrl {
alignmentPeriods: any[];
alignmentPeriod: string;
aggOptions: any[];
alignOptions: any[];
target: any;
constructor(private $scope) {
$scope.aggOptions = options.aggOptions;
this.$scope.ctrl = this;
this.target = $scope.target;
this.alignmentPeriod = $scope.alignmentPeriod;
this.alignmentPeriods = options.alignmentPeriods;
this.aggOptions = options.aggOptions;
this.alignOptions = options.alignOptions;
this.setAggOptions();
this.setAlignOptions();
$scope.alignmentPeriods = options.alignmentPeriods;
$scope.formatAlignmentText = this.formatAlignmentText.bind(this);
$scope.$on('metricTypeChanged', this.setAlignOptions.bind(this));
}
setAlignOptions() {
this.$scope.alignOptions = !this.$scope.target.valueType
this.alignOptions = !this.target.valueType
? []
: options.alignOptions.filter(i => {
return (
i.valueTypes.indexOf(this.$scope.target.valueType) !== -1 &&
i.metricKinds.indexOf(this.$scope.target.metricKind) !== -1
i.valueTypes.indexOf(this.target.valueType) !== -1 && i.metricKinds.indexOf(this.target.metricKind) !== -1
);
});
if (!this.$scope.alignOptions.find(o => o.value === this.$scope.target.aggregation.perSeriesAligner)) {
this.$scope.target.aggregation.perSeriesAligner =
this.$scope.alignOptions.length > 0 ? this.$scope.alignOptions[0].value : '';
if (!this.alignOptions.find(o => o.value === this.target.aggregation.perSeriesAligner)) {
this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
}
}
setAggOptions() {
this.$scope.aggOptions = !this.$scope.target.metricKind
this.aggOptions = !this.target.metricKind
? []
: options.aggOptions.filter(i => {
return (
i.valueTypes.indexOf(this.$scope.target.valueType) !== -1 &&
i.metricKinds.indexOf(this.$scope.target.metricKind) !== -1
i.valueTypes.indexOf(this.target.valueType) !== -1 && i.metricKinds.indexOf(this.target.metricKind) !== -1
);
});
if (!this.$scope.aggOptions.find(o => o.value === this.$scope.target.aggregation.crossSeriesReducer)) {
const newValue = this.$scope.aggOptions.find(o => o.value !== 'REDUCE_NONE');
this.$scope.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
if (!this.aggOptions.find(o => o.value === this.target.aggregation.crossSeriesReducer)) {
const newValue = this.aggOptions.find(o => o.value !== 'REDUCE_NONE');
this.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})`;
const selectedAlignment = this.alignOptions.find(ap => ap.value === this.target.aggregation.perSeriesAligner);
return `${kbn.secondsToHms(this.alignmentPeriod)} interval (${selectedAlignment.text})`;
}
}
......
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