diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx index 1091900225f..632ea3c8ac9 100644 --- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx +++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx @@ -25,6 +25,7 @@ interface State extends Target { alignOptions: any[]; lastQuery: string; lastQueryError: string; + [key: string]: any; } const DefaultTarget: State = { @@ -62,31 +63,29 @@ export class QueryEditor extends React.Component { } onDataReceived(dataList) { - const anySeriesFromQuery = dataList.find(item => item.refId === this.props.target.refId); - if (anySeriesFromQuery) { - this.setState({ lastQuery: decodeURIComponent(anySeriesFromQuery.meta.rawQuery), lastQueryError: '' }); + const series = dataList.find(item => item.refId === this.props.target.refId); + if (series) { + this.setState({ lastQuery: decodeURIComponent(series.meta.rawQuery), lastQueryError: '' }); } } onDataError(err) { - if (err) { - let lastQuery; - let lastQueryError; - if (err.data && err.data.error) { - lastQueryError = this.props.datasource.formatStackdriverError(err); - } else if (err.data && err.data.results) { - const queryRes = err.data.results[this.props.target.refId]; - lastQuery = decodeURIComponent(queryRes.meta.rawQuery); - if (queryRes && queryRes.error) { - try { - lastQueryError = JSON.parse(queryRes.error).error.message; - } catch { - lastQueryError = queryRes.error; - } + let lastQuery; + let lastQueryError; + if (err.data && err.data.error) { + lastQueryError = this.props.datasource.formatStackdriverError(err); + } else if (err.data && err.data.results) { + const queryRes = err.data.results[this.props.target.refId]; + lastQuery = decodeURIComponent(queryRes.meta.rawQuery); + if (queryRes && queryRes.error) { + try { + lastQueryError = JSON.parse(queryRes.error).error.message; + } catch { + lastQueryError = queryRes.error; } } - this.setState({ lastQuery, lastQueryError }); } + this.setState({ lastQuery, lastQueryError }); } handleMetricTypeChange({ valueType, metricKind, type, unit }) { @@ -110,43 +109,8 @@ export class QueryEditor extends React.Component { ); } - handleFilterChange(filters) { - this.setState({ filters }, () => { - this.props.onQueryChange(this.state); - this.props.onExecuteQuery(); - }); - } - - handleGroupBysChange(groupBys) { - this.setState({ groupBys }, () => { - this.props.onQueryChange(this.state); - this.props.onExecuteQuery(); - }); - } - - handleAggregationChange(value) { - this.setState({ crossSeriesReducer: value }, () => { - this.props.onQueryChange(this.state); - this.props.onExecuteQuery(); - }); - } - - handleAlignmentChange(value) { - this.setState({ perSeriesAligner: value }, () => { - this.props.onQueryChange(this.state); - this.props.onExecuteQuery(); - }); - } - - handleAlignmentPeriodChange(value) { - this.setState({ alignmentPeriod: value }, () => { - this.props.onQueryChange(this.state); - this.props.onExecuteQuery(); - }); - } - - handleAliasByChange(value) { - this.setState({ aliasBy: value }, () => { + handleChange(prop, value) { + this.setState({ [prop]: value }, () => { this.props.onQueryChange(this.state); this.props.onExecuteQuery(); }); @@ -179,8 +143,8 @@ export class QueryEditor extends React.Component { {metric => ( this.handleFilterChange(value)} - groupBysChanged={value => this.handleGroupBysChange(value)} + filtersChanged={value => this.handleChange('filters', value)} + groupBysChanged={value => this.handleChange('groupBys', value)} target={this.state} uiSegmentSrv={uiSegmentSrv} templateSrv={templateSrv} @@ -192,7 +156,7 @@ export class QueryEditor extends React.Component { templateSrv={templateSrv} crossSeriesReducer={crossSeriesReducer} groupBys={groupBys} - onChange={value => this.handleAggregationChange(value)} + onChange={value => this.handleChange('crossSeriesReducer', value)} > {displayAdvancedOptions => displayAdvancedOptions && ( @@ -201,17 +165,17 @@ export class QueryEditor extends React.Component { metricDescriptor={metric} templateSrv={templateSrv} perSeriesAligner={perSeriesAligner} - onChange={value => this.handleAlignmentChange(value)} + onChange={value => this.handleChange('perSeriesAligner', value)} /> ) } - this.handleAliasByChange(value)} /> + this.handleChange('aliasBy', value)} /> this.handleAlignmentPeriodChange(value)} + onChange={value => this.handleChange('alignmentPeriod', value)} /> diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html deleted file mode 100755 index 30ac9f219eb..00000000000 --- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html +++ /dev/null @@ -1,59 +0,0 @@ -
-
- - -
-
- -
-
-
-
- - - -
-
-
-
-
- - -
- -
- -
-
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html index b22b092e04c..f27b08609b4 100755 --- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html +++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html @@ -8,81 +8,4 @@ on-execute-query="(ctrl.handleExecuteQuery)" ui-segment-srv="ctrl.uiSegmentSrv" > - - - - - - diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts deleted file mode 100644 index d08bf8d94d9..00000000000 --- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts +++ /dev/null @@ -1,117 +0,0 @@ -import coreModule from 'app/core/core_module'; -import _ from 'lodash'; -import { alignmentPeriods } from './constants'; -import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from './functions'; -import kbn from 'app/core/utils/kbn'; - -export class StackdriverAggregation { - constructor() { - return { - templateUrl: 'public/app/plugins/datasource/stackdriver/partials/query.aggregation.html', - controller: 'StackdriverAggregationCtrl', - restrict: 'E', - scope: { - target: '=', - alignmentPeriod: '<', - refresh: '&', - }, - }; - } -} - -export class StackdriverAggregationCtrl { - alignmentPeriods: any[]; - aggOptions: any[]; - alignOptions: any[]; - target: any; - - /** @ngInject */ - constructor(private $scope, private templateSrv) { - this.$scope.ctrl = this; - this.target = $scope.target; - this.alignmentPeriods = alignmentPeriods.map(ap => ({ - ...ap, - label: ap.text, - })); - this.setAggOptions(); - this.setAlignOptions(); - const self = this; - $scope.$on('metricTypeChanged', () => { - self.setAggOptions(); - self.setAlignOptions(); - }); - } - - setAlignOptions() { - this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({ - ...a, - label: a.text, - })); - } - - setAggOptions() { - 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.crossSeriesReducer))) { - this.deselectAggregationOption('REDUCE_NONE'); - } - - if (this.target.groupBys.length > 0) { - aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE'); - this.deselectAggregationOption('REDUCE_NONE'); - } - this.aggOptions = [ - this.getTemplateVariablesGroup(), - { - label: 'Aggregations', - options: aggregations, - }, - ]; - } - - handleAlignmentChange(value) { - this.target.perSeriesAligner = value; - this.$scope.refresh(); - } - - handleAggregationChange(value) { - this.target.crossSeriesReducer = value; - this.$scope.refresh(); - } - - handleAlignmentPeriodChange(value) { - this.target.alignmentPeriod = value; - this.$scope.refresh(); - } - - formatAlignmentText() { - const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind); - const selectedAlignment = alignments.find( - ap => ap.value === this.templateSrv.replace(this.target.perSeriesAligner) - ); - return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${ - selectedAlignment ? selectedAlignment.text : '' - })`; - } - - deselectAggregationOption(notValidOptionValue: string) { - const aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind); - const newValue = aggregations.find(o => o.value !== notValidOptionValue); - this.target.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); -coreModule.controller('StackdriverAggregationCtrl', StackdriverAggregationCtrl); diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts index 8744227164b..b2d2f0f1dfc 100644 --- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts +++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts @@ -5,64 +5,18 @@ import './query_filter_ctrl'; import { StackdriverPicker } from './components/StackdriverPicker'; import { react2AngularDirective } from 'app/core/utils/react2angular'; import { registerAngularDirectives } from './angular_wrappers'; -import { Target, QueryMeta } from './types'; - -export const DefaultTarget = { - defaultProject: 'loading project...', - metricType: '', - service: '', - metric: '', - unit: '', - crossSeriesReducer: 'REDUCE_MEAN', - alignmentPeriod: 'stackdriver-auto', - perSeriesAligner: 'ALIGN_MEAN', - groupBys: [], - filters: [], - showAggregationOptions: false, - aliasBy: '', - metricKind: '', - valueType: '', -}; +import { Target } from './types'; export class StackdriverQueryCtrl extends QueryCtrl { static templateUrl = 'partials/query.editor.html'; - target: Target; - - defaults = { - defaultProject: 'loading project...', - metricType: '', - service: '', - metric: '', - unit: '', - crossSeriesReducer: 'REDUCE_MEAN', - alignmentPeriod: 'stackdriver-auto', - perSeriesAligner: 'ALIGN_MEAN', - groupBys: [], - filters: [], - showAggregationOptions: false, - aliasBy: '', - metricKind: '', - valueType: '', - }; - - showHelp: boolean; - showLastQuery: boolean; - lastQueryMeta: QueryMeta; - lastQueryError?: string; - labelData: QueryMeta; - - loadLabelsPromise: Promise; templateSrv: any; - $rootScope: any; uiSegmentSrv: any; /** @ngInject */ - constructor($scope, $injector, templateSrv, $rootScope, uiSegmentSrv) { + constructor($scope, $injector, templateSrv, uiSegmentSrv) { super($scope, $injector); this.templateSrv = templateSrv; - this.$rootScope = $rootScope; this.uiSegmentSrv = uiSegmentSrv; - _.defaultsDeep(this.target, this.defaults); react2AngularDirective('stackdriverPicker', StackdriverPicker, [ 'options', 'onChange', @@ -74,6 +28,8 @@ export class StackdriverQueryCtrl extends QueryCtrl { ['templateVariables', { watchDepth: 'reference' }], ]); registerAngularDirectives(); + this.handleQueryChange = this.handleQueryChange.bind(this); + this.handleExecuteQuery = this.handleExecuteQuery.bind(this); } handleQueryChange(target: Target) { diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts index c2273526844..c092b9dcd7b 100644 --- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts +++ b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts @@ -1,4 +1,4 @@ -import { StackdriverAggregationCtrl } from '../query_aggregation_ctrl'; +const StackdriverAggregationCtrl = ({}, {}) => {}; describe('StackdriverAggregationCtrl', () => { let ctrl;