From 8867d8e99c27852b612e50b3f20f5d73619a0665 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Tue, 8 Jan 2019 13:52:19 +0100 Subject: [PATCH] make templateSrv a prop --- public/app/core/angular_wrappers.ts | 9 ++++++++ .../stackdriver/annotations_query_ctrl.ts | 15 ++++-------- .../components/AnnotationQueryEditor.tsx | 7 +++--- .../components/QueryEditor.test.tsx | 2 +- .../stackdriver/components/QueryEditor.tsx | 23 ++++++++++--------- .../partials/annotations.editor.html | 1 + .../stackdriver/partials/query.editor.html | 1 + .../datasource/stackdriver/query_ctrl.ts | 4 +++- 8 files changed, 35 insertions(+), 27 deletions(-) diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 92f5d663656..6508b97d490 100644 --- a/public/app/core/angular_wrappers.ts +++ b/public/app/core/angular_wrappers.ts @@ -1,5 +1,6 @@ import { react2AngularDirective } from 'app/core/utils/react2angular'; import { QueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor'; +import { AnnotationQueryEditor } from 'app/plugins/datasource/stackdriver/components/AnnotationQueryEditor'; import { PasswordStrength } from './components/PasswordStrength'; import PageHeader from './components/PageHeader/PageHeader'; import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA'; @@ -36,5 +37,13 @@ export function registerAngularDirectives() { 'onExecuteQuery', ['events', { watchDepth: 'reference' }], ['datasource', { watchDepth: 'reference' }], + ['templateSrv', { watchDepth: 'reference' }], + ]); + react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [ + 'target', + 'onQueryChange', + 'onExecuteQuery', + ['datasource', { watchDepth: 'reference' }], + ['templateSrv', { watchDepth: 'reference' }], ]); } diff --git a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts index 26a09e3d1fa..8827e9e9746 100644 --- a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts +++ b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts @@ -1,20 +1,13 @@ -import { react2AngularDirective } from 'app/core/utils/react2angular'; -import { AnnotationQueryEditor } from './components/AnnotationQueryEditor'; - export class StackdriverAnnotationsQueryCtrl { static templateUrl = 'partials/annotations.editor.html'; annotation: any; + templateSrv: any; - constructor() { + /** @ngInject */ + constructor(templateSrv) { + this.templateSrv = templateSrv; this.annotation.target = this.annotation.target || {}; this.onQueryChange = this.onQueryChange.bind(this); - - react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [ - 'target', - 'onQueryChange', - 'onExecuteQuery', - ['datasource', { watchDepth: 'reference' }], - ]); } onQueryChange(target) { diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx index cbd27e6ba81..e6942d2195c 100644 --- a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx +++ b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx @@ -10,6 +10,7 @@ export interface Props { onQueryChange: (target: AnnotationTarget) => void; target: AnnotationTarget; datasource: any; + templateSrv: any; } interface State extends AnnotationTarget { @@ -59,14 +60,14 @@ export class AnnotationQueryEditor extends React.Component { render() { const { defaultProject, metricType, filters, refId, title, text } = this.state; - const { datasource } = this.props; + const { datasource, templateSrv } = this.props; return ( <> this.onMetricTypeChange(value)} > @@ -77,7 +78,7 @@ export class AnnotationQueryEditor extends React.Component { filters={filters} refId={refId} hideGroupBys={true} - templateSrv={datasource.templateSrv} + templateSrv={templateSrv} datasource={datasource} metricType={metric ? metric.type : ''} /> diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx index 86682f20035..8098433d83b 100644 --- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx +++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx @@ -8,10 +8,10 @@ const props: Props = { target: DefaultTarget, events: { on: () => {} }, datasource: { - templateSrv: { variables: [] }, getDefaultProject: () => 'project', getMetricTypes: () => [], }, + templateSrv: { variables: [] }, }; describe('QueryEditor', () => { diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx index 5312c9865db..0b101ae3ad7 100644 --- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx +++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx @@ -13,10 +13,11 @@ import { getAlignmentPickerData } from '../functions'; export interface Props { onQueryChange: (target: Target) => void; - onExecuteQuery?: () => void; + onExecuteQuery: () => void; target: Target; events: any; datasource: any; + templateSrv: any; } interface State extends Target { @@ -49,10 +50,10 @@ export class QueryEditor extends React.Component { state: State = DefaultTarget; componentDidMount() { - const { events, target, datasource } = this.props; + const { events, target, templateSrv } = this.props; events.on('data-received', this.onDataReceived.bind(this)); events.on('data-error', this.onDataError.bind(this)); - const { perSeriesAligner, alignOptions } = getAlignmentPickerData(target, datasource.templateSrv); + const { perSeriesAligner, alignOptions } = getAlignmentPickerData(target, templateSrv); this.setState({ ...this.props.target, alignOptions, @@ -92,10 +93,10 @@ export class QueryEditor extends React.Component { } onMetricTypeChange({ valueType, metricKind, type, unit }) { - const { datasource, onQueryChange, onExecuteQuery } = this.props; + const { templateSrv, onQueryChange, onExecuteQuery } = this.props; const { perSeriesAligner, alignOptions } = getAlignmentPickerData( { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner }, - datasource.templateSrv + templateSrv ); this.setState( { @@ -135,14 +136,14 @@ export class QueryEditor extends React.Component { lastQueryError, refId, } = this.state; - const { datasource } = this.props; + const { datasource, templateSrv } = this.props; return ( <> this.onMetricTypeChange(value)} > @@ -155,13 +156,13 @@ export class QueryEditor extends React.Component { groupBys={groupBys} refId={refId} hideGroupBys={false} - templateSrv={datasource.templateSrv} + templateSrv={templateSrv} datasource={datasource} metricType={metric ? metric.type : ''} /> this.onPropertyChange('crossSeriesReducer', value)} @@ -170,7 +171,7 @@ export class QueryEditor extends React.Component { displayAdvancedOptions && ( this.onPropertyChange('perSeriesAligner', value)} /> @@ -179,7 +180,7 @@ export class QueryEditor extends React.Component { this.onPropertyChange('aliasBy', value)} /> this.onPropertyChange('alignmentPeriod', value)} /> diff --git a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html index a638e7bfe55..ccc62258ba5 100644 --- a/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html +++ b/public/app/plugins/datasource/stackdriver/partials/annotations.editor.html @@ -2,4 +2,5 @@ target="ctrl.annotation.target" on-query-change="(ctrl.onQueryChange)" datasource="ctrl.datasource" + template-srv="ctrl.templateSrv" > diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html index d8adebbed58..1b9b208a110 100755 --- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html +++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html @@ -3,6 +3,7 @@ target="ctrl.target" events="ctrl.panelCtrl.events" datasource="ctrl.datasource" + template-srv="ctrl.templateSrv" on-query-change="(ctrl.onQueryChange)" on-execute-query="(ctrl.onExecuteQuery)" > diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts index a54c2365ab6..3de2af919f5 100644 --- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts +++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts @@ -5,10 +5,12 @@ import { Target } from './types'; export class StackdriverQueryCtrl extends QueryCtrl { static templateUrl = 'partials/query.editor.html'; + templateSrv: any; /** @ngInject */ - constructor($scope, $injector) { + constructor($scope, $injector, templateSrv) { super($scope, $injector); + this.templateSrv = templateSrv; this.onQueryChange = this.onQueryChange.bind(this); this.onExecuteQuery = this.onExecuteQuery.bind(this); }