cleanup. remove comments, not used files etc

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

@@ -2,6 +2,7 @@ import { react2AngularDirective } from 'app/core/utils/react2angular';
 import { QueryEditor } from './components/QueryEditor';
 import { AnnotationQueryEditor } from './components/AnnotationQueryEditor';
 
+//This should be removed when the plugin is fully reactified
 export function registerAngularDirectives() {
   react2AngularDirective('queryEditor', QueryEditor, [
     'target',

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

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import './query_filter_ctrl';
-import { registerAngularDirectives } from './angular_wrappers';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
+import { AnnotationQueryEditor } from './components/AnnotationQueryEditor';
 
 export class StackdriverAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
@@ -28,8 +29,14 @@ export class StackdriverAnnotationsQueryCtrl {
     this.annotation.target = this.annotation.target || {};
     this.annotation.target.refId = 'annotationQuery';
     _.defaultsDeep(this.annotation.target, this.defaults);
-    registerAngularDirectives();
     this.handleQueryChange = this.handleQueryChange.bind(this);
+
+    react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
+      'target',
+      'onQueryChange',
+      'onExecuteQuery',
+      ['datasource', { watchDepth: 'reference' }],
+    ]);
   }
 
   handleQueryChange(target) {

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
 
-import { getAggregationOptionsByMetric } from '../functions';
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
+import { getAggregationOptionsByMetric } from '../functions';
 
 export interface Props {
   onChange: (metricDescriptor) => void;

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

@@ -109,7 +109,6 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
         </div>
 
         <AnnotationsHelp />
-        {/* <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} /> */}
       </React.Fragment>
     );
   }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 
+import appEvents from 'app/core/app_events';
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
 
 export interface Props {
@@ -54,7 +55,7 @@ export class Metrics extends React.Component<Props, State> {
         }
         resolve(this.state.defaultProject);
       } catch (error) {
-        // appEvents.emit('ds-request-error', error);
+        appEvents.emit('ds-request-error', error);
         reject();
       }
     });

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

@@ -1,44 +0,0 @@
-import React, { PureComponent } from 'react';
-import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
-import 'app/core/directives/metric_segment';
-
-interface QueryEditorProps {
-  segment: any;
-  getOptions: () => Promise<any[]>;
-  onChange: (segment, index) => void;
-  key: number;
-}
-
-export default class Segment extends PureComponent<QueryEditorProps, any> {
-  element: any;
-  component: AngularComponent;
-
-  async componentDidMount() {
-    if (!this.element) {
-      return;
-    }
-
-    const { segment, getOptions, onChange } = this.props;
-    const loader = getAngularLoader();
-    const template = '<metric-segment> </metric-segment>';
-
-    const scopeProps = {
-      segment,
-      onChange,
-      getOptions,
-      debounce: false,
-    };
-
-    this.component = loader.load(this.element, scopeProps, template);
-  }
-
-  componentWillUnmount() {
-    if (this.component) {
-      this.component.destroy();
-    }
-  }
-
-  render() {
-    return <div ref={element => (this.element = element)} style={{ width: '100%' }} />;
-  }
-}

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

@@ -1,97 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import Select from 'app/core/components/Select/Select';
-
-export interface Props {
-  onChange: (value: string) => void;
-  options: any[];
-  searchable: boolean;
-  selected: string;
-  placeholder?: string;
-  className?: string;
-  groupName?: string;
-  templateVariables?: any[];
-}
-
-interface State {
-  options: any[];
-}
-
-export class StackdriverPicker extends React.Component<Props, State> {
-  static defaultProps = {
-    templateVariables: [],
-    options: [],
-    groupName: 'Options',
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = { options: [] };
-  }
-
-  componentDidMount() {
-    this.setState({ options: this.buildOptions(this.props) });
-  }
-
-  componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.options.length > 0 || nextProps.templateVariables.length) {
-      this.setState({ options: this.buildOptions(nextProps) });
-    }
-  }
-
-  shouldComponentUpdate(nextProps: Props) {
-    const nextOptions = this.buildOptions(nextProps);
-    return nextProps.selected !== this.props.selected || !_.isEqual(nextOptions, this.state.options);
-  }
-
-  buildOptions({ templateVariables = [], groupName = '', options }) {
-    return templateVariables.length > 0
-      ? [
-          this.getTemplateVariablesGroup(),
-          {
-            label: groupName,
-            expanded: true,
-            options,
-          },
-        ]
-      : options;
-  }
-
-  getTemplateVariablesGroup() {
-    return {
-      label: 'Template Variables',
-      options: this.props.templateVariables.map(v => ({
-        label: `$${v.name}`,
-        value: `$${v.name}`,
-      })),
-    };
-  }
-
-  getSelectedOption() {
-    const { options } = this.state;
-    const allOptions = options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
-    return allOptions.find(option => option.value === this.props.selected);
-  }
-
-  render() {
-    const { placeholder, className, searchable, onChange } = this.props;
-    const { options } = this.state;
-    const selectedOption = this.getSelectedOption();
-
-    return (
-      <Select
-        className={className}
-        isMulti={false}
-        isClearable={false}
-        backspaceRemovesValue={false}
-        onChange={item => onChange(item.value)}
-        options={options}
-        isSearchable={searchable}
-        maxMenuHeight={500}
-        placeholder={placeholder}
-        noOptionsMessage={() => 'No options found'}
-        value={selectedOption}
-      />
-    );
-  }
-}

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

@@ -1,5 +1,5 @@
 <annotation-query-editor
   target="ctrl.annotation.target"
-  datasource="ctrl.datasource"
   on-query-change="(ctrl.handleQueryChange)"
+  datasource="ctrl.datasource"
 ></annotation-query-editor>

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

@@ -1,33 +1,3 @@
-<!--
-  <div class="gf-form-inline">
-    <div class="gf-form">
-      <span class="gf-form-label width-9 query-keyword">Service</span>
-      <stackdriver-picker
-        onChange="ctrl.handleServiceChange"
-        selected="ctrl.target.service"
-        options="ctrl.services"
-        searchable="false"
-        placeholder="'Select Services'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
-    <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
-  </div>
-  <div class="gf-form-inline">
-    <div class="gf-form">
-      <span class="gf-form-label width-9 query-keyword">Metric</span>
-      <stackdriver-picker
-        onChange="ctrl.handleMetricTypeChange"
-        selected="ctrl.target.metricType"
-        options="ctrl.getMetricsList()"
-        template-variables="ctrl.templateSrv.variables"
-        group-name="'Metric Types'"
-        searchable="true"
-        placeholder="'Select Metric'"
-        className="'width-15'"
-      ></stackdriver-picker>
-    </div>
--->
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label query-keyword width-9">Filter</span>

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

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