use correct event handler name convention. register directive on startup

public/app/core/angular_wrappers.ts

 import { react2AngularDirective } from 'app/core/utils/react2angular';
+import { QueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor';
 import { PasswordStrength } from './components/PasswordStrength';
 import PageHeader from './components/PageHeader/PageHeader';
 import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
@@ -29,4 +30,11 @@ export function registerAngularDirectives() {
     'placeholder',
     ['variables', { watchDepth: 'reference' }],
   ]);
+  react2AngularDirective('queryEditor', QueryEditor, [
+    'target',
+    'onQueryChange',
+    'onExecuteQuery',
+    ['events', { watchDepth: 'reference' }],
+    ['datasource', { watchDepth: 'reference' }],
+  ]);
 }

public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts

@@ -7,7 +7,7 @@ export class StackdriverAnnotationsQueryCtrl {
 
   constructor() {
     this.annotation.target = this.annotation.target || {};
-    this.handleQueryChange = this.handleQueryChange.bind(this);
+    this.onQueryChange = this.onQueryChange.bind(this);
 
     react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
       'target',
@@ -17,7 +17,7 @@ export class StackdriverAnnotationsQueryCtrl {
     ]);
   }
 
-  handleQueryChange(target) {
+  onQueryChange(target) {
     Object.assign(this.annotation.target, target);
   }
 }

public/app/plugins/datasource/stackdriver/components/Aggregations.tsx

@@ -52,7 +52,7 @@ export class Aggregations extends React.Component<Props, State> {
     this.setState({ aggOptions });
   }
 
-  handleToggleDisplayAdvanced() {
+  onToggleDisplayAdvanced() {
     this.setState(state => ({
       displayAdvancedOptions: !state.displayAdvancedOptions,
     }));
@@ -78,7 +78,7 @@ export class Aggregations extends React.Component<Props, State> {
           </div>
           <div className="gf-form gf-form--grow">
             <label className="gf-form-label gf-form-label--grow">
-              <a onClick={() => this.handleToggleDisplayAdvanced()}>
+              <a onClick={() => this.onToggleDisplayAdvanced()}>
                 <>
                   <i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
                 </>

public/app/plugins/datasource/stackdriver/components/AliasBy.tsx

@@ -13,8 +13,7 @@ export interface State {
 export class AliasBy extends Component<Props, State> {
   constructor(props) {
     super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.onChange = debounce(this.onChange.bind(this), 500);
+    this.updateQuery = debounce(this.updateQuery.bind(this), 500);
     this.state = { value: '' };
   }
 
@@ -28,18 +27,18 @@ export class AliasBy extends Component<Props, State> {
     }
   }
 
-  handleChange(e) {
+  onChange(e) {
     this.setState({ value: e.target.value });
-    this.onChange(e.target.value);
+    this.updateQuery(e.target.value);
   }
 
-  onChange(value) {
+  updateQuery(value) {
     this.props.onChange(value);
   }
 
   render() {
     return (
-      <>
+      <React.Fragment>
         <div className="gf-form-inline">
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Alias By</label>
@@ -47,14 +46,14 @@ export class AliasBy extends Component<Props, State> {
               type="text"
               className="gf-form-input width-24"
               value={this.state.value}
-              onChange={this.handleChange}
+              onChange={e => this.onChange(e)}
             />
           </div>
           <div className="gf-form gf-form--grow">
             <div className="gf-form-label gf-form-label--grow" />
           </div>
         </div>
-      </>
+      </React.Fragment>
     );
   }
 }

public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx

@@ -36,7 +36,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
     });
   }
 
-  handleMetricTypeChange({ valueType, metricKind, type, unit }) {
+  onMetricTypeChange({ valueType, metricKind, type, unit }) {
     const { onQueryChange } = this.props;
     this.setState(
       {
@@ -51,7 +51,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
     );
   }
 
-  handleChange(prop, value) {
+  onChange(prop, value) {
     this.setState({ [prop]: value }, () => {
       this.props.onQueryChange(this.state);
     });
@@ -68,12 +68,12 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
           metricType={metricType}
           templateSrv={datasource.templateSrv}
           datasource={datasource}
-          onChange={value => this.handleMetricTypeChange(value)}
+          onChange={value => this.onMetricTypeChange(value)}
         >
           {metric => (
             <>
               <Filter
-                filtersChanged={value => this.handleChange('filters', value)}
+                filtersChanged={value => this.onChange('filters', value)}
                 filters={filters}
                 refId={refId}
                 hideGroupBys={true}
@@ -91,7 +91,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
               type="text"
               className="gf-form-input width-20"
               value={title}
-              onChange={e => this.handleChange('title', e.target.value)}
+              onChange={e => this.onChange('title', e.target.value)}
             />
           </div>
           <div className="gf-form">
@@ -100,7 +100,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
               type="text"
               className="gf-form-input width-20"
               value={text}
-              onChange={e => this.handleChange('text', e.target.value)}
+              onChange={e => this.onChange('text', e.target.value)}
             />
           </div>
           <div className="gf-form gf-form--grow">

public/app/plugins/datasource/stackdriver/components/Help.tsx

@@ -18,11 +18,11 @@ export class Help extends React.Component<Props, State> {
     displaRawQuery: false,
   };
 
-  handleHelpClicked() {
+  onHelpClicked() {
     this.setState({ displayHelp: !this.state.displayHelp });
   }
 
-  handleRawQueryClicked() {
+  onRawQueryClicked() {
     this.setState({ displaRawQuery: !this.state.displaRawQuery });
   }
 
@@ -38,7 +38,7 @@ export class Help extends React.Component<Props, State> {
       <>
         <div className="gf-form-inline">
           <Project datasource={datasource} />
-          <div className="gf-form" onClick={() => this.handleHelpClicked()}>
+          <div className="gf-form" onClick={() => this.onHelpClicked()}>
             <label className="gf-form-label query-keyword">
               Show Help
               <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
@@ -46,7 +46,7 @@ export class Help extends React.Component<Props, State> {
           </div>
 
           {rawQuery && (
-            <div className="gf-form" onClick={() => this.handleRawQueryClicked()}>
+            <div className="gf-form" onClick={() => this.onRawQueryClicked()}>
               <label className="gf-form-label query-keyword">
                 Raw Query
                 <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />

public/app/plugins/datasource/stackdriver/components/Metrics.tsx

@@ -98,7 +98,7 @@ export class Metrics extends React.Component<Props, State> {
     return metricsByService;
   }
 
-  handleServiceChange(service) {
+  onServiceChange(service) {
     const { metricDescriptors } = this.state;
     const { templateSrv, metricType } = this.props;
 
@@ -112,11 +112,11 @@ export class Metrics extends React.Component<Props, State> {
     this.setState({ service, metrics });
 
     if (metrics.length > 0 && !metrics.some(m => m.value === templateSrv.replace(metricType))) {
-      this.handleMetricTypeChange(metrics[0].value);
+      this.onMetricTypeChange(metrics[0].value);
     }
   }
 
-  handleMetricTypeChange(value) {
+  onMetricTypeChange(value) {
     const metricDescriptor = this.getSelectedMetricDescriptor(value);
     this.setState({ metricDescriptor });
     this.props.onChange({ ...metricDescriptor, type: value });
@@ -151,7 +151,7 @@ export class Metrics extends React.Component<Props, State> {
           <div className="gf-form">
             <span className="gf-form-label width-9 query-keyword">Service</span>
             <MetricSelect
-              onChange={value => this.handleServiceChange(value)}
+              onChange={value => this.onServiceChange(value)}
               value={service}
               options={services}
               isSearchable={false}
@@ -167,7 +167,7 @@ export class Metrics extends React.Component<Props, State> {
           <div className="gf-form">
             <span className="gf-form-label width-9 query-keyword">Metric</span>
             <MetricSelect
-              onChange={value => this.handleMetricTypeChange(value)}
+              onChange={value => this.onMetricTypeChange(value)}
               value={metricType}
               variables={templateSrv.variables}
               options={[

public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx

@@ -91,7 +91,7 @@ export class QueryEditor extends React.Component<Props, State> {
     this.setState({ lastQuery, lastQueryError });
   }
 
-  handleMetricTypeChange({ valueType, metricKind, type, unit }) {
+  onMetricTypeChange({ valueType, metricKind, type, unit }) {
     const { datasource, onQueryChange, onExecuteQuery } = this.props;
     const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
       { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
@@ -113,7 +113,7 @@ export class QueryEditor extends React.Component<Props, State> {
     );
   }
 
-  handleChange(prop, value) {
+  onPropertyChange(prop, value) {
     this.setState({ [prop]: value }, () => {
       this.props.onQueryChange(this.state);
       this.props.onExecuteQuery();
@@ -144,13 +144,13 @@ export class QueryEditor extends React.Component<Props, State> {
           metricType={metricType}
           templateSrv={datasource.templateSrv}
           datasource={datasource}
-          onChange={value => this.handleMetricTypeChange(value)}
+          onChange={value => this.onMetricTypeChange(value)}
         >
           {metric => (
             <>
               <Filter
-                filtersChanged={value => this.handleChange('filters', value)}
-                groupBysChanged={value => this.handleChange('groupBys', value)}
+                filtersChanged={value => this.onPropertyChange('filters', value)}
+                groupBysChanged={value => this.onPropertyChange('groupBys', value)}
                 filters={filters}
                 groupBys={groupBys}
                 refId={refId}
@@ -164,7 +164,7 @@ export class QueryEditor extends React.Component<Props, State> {
                 templateSrv={datasource.templateSrv}
                 crossSeriesReducer={crossSeriesReducer}
                 groupBys={groupBys}
-                onChange={value => this.handleChange('crossSeriesReducer', value)}
+                onChange={value => this.onPropertyChange('crossSeriesReducer', value)}
               >
                 {displayAdvancedOptions =>
                   displayAdvancedOptions && (
@@ -172,16 +172,16 @@ export class QueryEditor extends React.Component<Props, State> {
                       alignOptions={alignOptions}
                       templateSrv={datasource.templateSrv}
                       perSeriesAligner={perSeriesAligner}
-                      onChange={value => this.handleChange('perSeriesAligner', value)}
+                      onChange={value => this.onPropertyChange('perSeriesAligner', value)}
                     />
                   )
                 }
               </Aggregations>
-              <AliasBy value={aliasBy} onChange={value => this.handleChange('aliasBy', value)} />
+              <AliasBy value={aliasBy} onChange={value => this.onPropertyChange('aliasBy', value)} />
               <AlignmentPeriods
                 templateSrv={datasource.templateSrv}
                 alignmentPeriod={alignmentPeriod}
-                onChange={value => this.handleChange('alignmentPeriod', value)}
+                onChange={value => this.onPropertyChange('alignmentPeriod', value)}
               />
               <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} />
             </>

public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx

@@ -63,7 +63,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
     this.setState(state);
   }
 
-  async handleQueryTypeChange(event) {
+  async onQueryTypeChange(event) {
     const state: any = {
       selectedQueryType: event.target.value,
       ...await this.getLabels(this.state.selectedMetricType, event.target.value),
@@ -186,7 +186,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
         <SimpleSelect
           value={this.state.selectedQueryType}
           options={this.queryTypes}
-          onValueChange={e => this.handleQueryTypeChange(e)}
+          onValueChange={e => this.onQueryTypeChange(e)}
           label="Query Type"
         />
         {this.renderQueryTypeSwitch(this.state.selectedQueryType)}

public/app/plugins/datasource/stackdriver/partials/annotations.editor.html

 <annotation-query-editor
   target="ctrl.annotation.target"
-  on-query-change="(ctrl.handleQueryChange)"
+  on-query-change="(ctrl.onQueryChange)"
   datasource="ctrl.datasource"
 ></annotation-query-editor>

public/app/plugins/datasource/stackdriver/partials/query.editor.html

@@ -3,7 +3,7 @@
     target="ctrl.target"
     events="ctrl.panelCtrl.events"
     datasource="ctrl.datasource"
-    on-query-change="(ctrl.handleQueryChange)"
-    on-execute-query="(ctrl.handleExecuteQuery)"
+    on-query-change="(ctrl.onQueryChange)"
+    on-execute-query="(ctrl.onExecuteQuery)"
   ></query-editor>
-</query-editor-row>
\ No newline at end of file
+</query-editor-row>

public/app/plugins/datasource/stackdriver/query_ctrl.ts

 import _ from 'lodash';
 
 import { QueryCtrl } from 'app/plugins/sdk';
-import { react2AngularDirective } from 'app/core/utils/react2angular';
-
-import { QueryEditor } from './components/QueryEditor';
 import { Target } from './types';
 
 export class StackdriverQueryCtrl extends QueryCtrl {
@@ -12,22 +9,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
   /** @ngInject */
   constructor($scope, $injector) {
     super($scope, $injector);
-    this.handleQueryChange = this.handleQueryChange.bind(this);
-    this.handleExecuteQuery = this.handleExecuteQuery.bind(this);
-    react2AngularDirective('queryEditor', QueryEditor, [
-      'target',
-      'onQueryChange',
-      'onExecuteQuery',
-      ['events', { watchDepth: 'reference' }],
-      ['datasource', { watchDepth: 'reference' }],
-    ]);
+    this.onQueryChange = this.onQueryChange.bind(this);
+    this.onExecuteQuery = this.onExecuteQuery.bind(this);
   }
 
-  handleQueryChange(target: Target) {
+  onQueryChange(target: Target) {
     Object.assign(this.target, target);
   }
 
-  handleExecuteQuery() {
+  onExecuteQuery() {
     this.$scope.ctrl.refresh();
   }
 }