stackdriver: small fixes after reactifying

public/app/core/angular_wrappers.ts

 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 { QueryEditor as StackdriverQueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor';
+import { AnnotationQueryEditor as StackdriverAnnotationQueryEditor } from 'app/plugins/datasource/stackdriver/components/AnnotationQueryEditor';
 import { PasswordStrength } from './components/PasswordStrength';
 import PageHeader from './components/PageHeader/PageHeader';
 import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
@@ -41,7 +41,7 @@ export function registerAngularDirectives() {
     'placeholder',
     ['variables', { watchDepth: 'reference' }],
   ]);
-  react2AngularDirective('queryEditor', QueryEditor, [
+  react2AngularDirective('stackdriverQueryEditor', StackdriverQueryEditor, [
     'target',
     'onQueryChange',
     'onExecuteQuery',
@@ -49,7 +49,7 @@ export function registerAngularDirectives() {
     ['datasource', { watchDepth: 'reference' }],
     ['templateSrv', { watchDepth: 'reference' }],
   ]);
-  react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
+  react2AngularDirective('stackdriverAnnotationQueryEditor', StackdriverAnnotationQueryEditor, [
     'target',
     'onQueryChange',
     'onExecuteQuery',

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

@@ -52,11 +52,11 @@ export class Aggregations extends React.Component<Props, State> {
     this.setState({ aggOptions });
   }
 
-  onToggleDisplayAdvanced() {
+  onToggleDisplayAdvanced = () => {
     this.setState(state => ({
       displayAdvancedOptions: !state.displayAdvancedOptions,
     }));
-  }
+  };
 
   render() {
     const { displayAdvancedOptions, aggOptions } = this.state;
@@ -68,7 +68,7 @@ export class Aggregations extends React.Component<Props, State> {
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Aggregation</label>
             <MetricSelect
-              onChange={value => onChange(value)}
+              onChange={onChange}
               value={crossSeriesReducer}
               variables={templateSrv.variables}
               options={aggOptions}
@@ -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.onToggleDisplayAdvanced()}>
+              <a onClick={this.onToggleDisplayAdvanced}>
                 <>
                   <i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
                 </>

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

@@ -29,10 +29,10 @@ export class AliasBy extends Component<Props, State> {
     }
   }
 
-  onChange(e) {
+  onChange = e => {
     this.setState({ value: e.target.value });
     this.propagateOnChange(e.target.value);
-  }
+  };
 
   render() {
     return (
@@ -40,12 +40,7 @@ export class AliasBy extends Component<Props, State> {
         <div className="gf-form-inline">
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Alias By</label>
-            <input
-              type="text"
-              className="gf-form-input width-24"
-              value={this.state.value}
-              onChange={e => this.onChange(e)}
-            />
+            <input type="text" className="gf-form-input width-24" value={this.state.value} onChange={this.onChange} />
           </div>
           <div className="gf-form gf-form--grow">
             <div className="gf-form-label gf-form-label--grow" />

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

@@ -29,7 +29,7 @@ export const AlignmentPeriods: SFC<Props> = ({
         <div className="gf-form">
           <label className="gf-form-label query-keyword width-9">Alignment Period</label>
           <MetricSelect
-            onChange={value => onChange(value)}
+            onChange={onChange}
             value={alignmentPeriod}
             variables={templateSrv.variables}
             options={[

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

@@ -17,7 +17,7 @@ export const Alignments: SFC<Props> = ({ perSeriesAligner, templateSrv, onChange
         <div className="gf-form offset-width-9">
           <label className="gf-form-label query-keyword width-15">Aligner</label>
           <MetricSelect
-            onChange={value => onChange(value)}
+            onChange={onChange}
             value={perSeriesAligner}
             variables={templateSrv.variables}
             options={alignOptions}

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

@@ -40,7 +40,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
     });
   }
 
-  onMetricTypeChange({ valueType, metricKind, type, unit }) {
+  onMetricTypeChange = ({ valueType, metricKind, type, unit }) => {
     const { onQueryChange } = this.props;
     this.setState(
       {
@@ -53,7 +53,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
         onQueryChange(this.state);
       }
     );
-  }
+  };
 
   onChange(prop, value) {
     this.setState({ [prop]: value }, () => {
@@ -72,7 +72,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
           metricType={metricType}
           templateSrv={templateSrv}
           datasource={datasource}
-          onChange={value => this.onMetricTypeChange(value)}
+          onChange={this.onMetricTypeChange}
         >
           {metric => (
             <>

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

@@ -19,13 +19,13 @@ export class Help extends React.Component<Props, State> {
     displaRawQuery: false,
   };
 
-  onHelpClicked() {
+  onHelpClicked = () => {
     this.setState({ displayHelp: !this.state.displayHelp });
-  }
+  };
 
-  onRawQueryClicked() {
+  onRawQueryClicked = () => {
     this.setState({ displaRawQuery: !this.state.displaRawQuery });
-  }
+  };
 
   shouldComponentUpdate(nextProps) {
     return nextProps.metricDescriptor !== null;
@@ -39,14 +39,14 @@ export class Help extends React.Component<Props, State> {
       <>
         <div className="gf-form-inline">
           <Project datasource={datasource} />
-          <div className="gf-form" onClick={() => this.onHelpClicked()}>
+          <div className="gf-form" onClick={this.onHelpClicked}>
             <label className="gf-form-label query-keyword pointer">
               Show Help <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
             </label>
           </div>
 
           {rawQuery && (
-            <div className="gf-form" onClick={() => this.onRawQueryClicked()}>
+            <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" />
               </label>

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

@@ -100,7 +100,7 @@ export class Metrics extends React.Component<Props, State> {
     return metricsByService;
   }
 
-  onServiceChange(service) {
+  onServiceChange = service => {
     const { metricDescriptors } = this.state;
     const { templateSrv, metricType } = this.props;
 
@@ -116,13 +116,13 @@ export class Metrics extends React.Component<Props, State> {
     if (metrics.length > 0 && !metrics.some(m => m.value === templateSrv.replace(metricType))) {
       this.onMetricTypeChange(metrics[0].value);
     }
-  }
+  };
 
-  onMetricTypeChange(value) {
+  onMetricTypeChange = value => {
     const metricDescriptor = this.getSelectedMetricDescriptor(value);
     this.setState({ metricDescriptor });
     this.props.onChange({ ...metricDescriptor, type: value });
-  }
+  };
 
   getServicesList(metricDescriptors: MetricDescriptor[]) {
     const services = metricDescriptors.map(m => ({
@@ -153,7 +153,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.onServiceChange(value)}
+              onChange={this.onServiceChange}
               value={service}
               options={services}
               isSearchable={false}
@@ -169,7 +169,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.onMetricTypeChange(value)}
+              onChange={this.onMetricTypeChange}
               value={metricType}
               variables={templateSrv.variables}
               options={[

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

@@ -99,7 +99,7 @@ export class QueryEditor extends React.Component<Props, State> {
     this.setState({ lastQuery, lastQueryError });
   }
 
-  onMetricTypeChange({ valueType, metricKind, type, unit }: MetricDescriptor) {
+  onMetricTypeChange = ({ valueType, metricKind, type, unit }: MetricDescriptor) => {
     const { templateSrv, onQueryChange, onExecuteQuery } = this.props;
     const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
       { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
@@ -119,7 +119,7 @@ export class QueryEditor extends React.Component<Props, State> {
         onExecuteQuery();
       }
     );
-  }
+  };
 
   onPropertyChange(prop, value) {
     this.setState({ [prop]: value }, () => {
@@ -153,7 +153,7 @@ export class QueryEditor extends React.Component<Props, State> {
           metricType={metricType}
           templateSrv={templateSrv}
           datasource={datasource}
-          onChange={value => this.onMetricTypeChange(value)}
+          onChange={this.onMetricTypeChange}
         >
           {metric => (
             <>

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

-<annotation-query-editor
+<stackdriver-annotation-query-editor
   target="ctrl.annotation.target"
   on-query-change="(ctrl.onQueryChange)"
   datasource="ctrl.datasource"
   template-srv="ctrl.templateSrv"
-></annotation-query-editor>
+></stackdriver-annotation-query-editor>

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

 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <query-editor
+  <stackdriver-query-editor
     target="ctrl.target"
     events="ctrl.panelCtrl.events"
     datasource="ctrl.datasource"
     template-srv="ctrl.templateSrv"
     on-query-change="(ctrl.onQueryChange)"
     on-execute-query="(ctrl.onExecuteQuery)"
-  ></query-editor>
+  ></stackdriver-query-editor>
 </query-editor-row>