move component to components dir. also move directive registration out from datasource

public/app/core/angular_wrappers.ts

@@ -5,6 +5,7 @@ import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
 import { SearchResult } from './components/search/SearchResult';
 import { TagFilter } from './components/TagFilter/TagFilter';
 import { SideMenu } from './components/sidemenu/SideMenu';
+import { MetricSelect } from './components/Select/MetricSelect';
 import AppNotificationList from './components/AppNotifications/AppNotificationList';
 
 export function registerAngularDirectives() {
@@ -19,4 +20,14 @@ export function registerAngularDirectives() {
     ['onChange', { watchDepth: 'reference' }],
     ['tagOptions', { watchDepth: 'reference' }],
   ]);
+  react2AngularDirective('metricSelect', MetricSelect, [
+    'options',
+    'onChange',
+    'value',
+    'isSearchable',
+    'className',
+    'placeholder',
+    'groupName',
+    ['variables', { watchDepth: 'reference' }],
+  ]);
 }

public/app/core/components/Select/MetricSelect.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 
-import Select from 'app/core/components/Select/Select';
+import Select from './Select';
 import { Variable } from 'app/types/templates';
 
 export interface Props {
@@ -19,7 +19,7 @@ interface State {
   options: any[];
 }
 
-export class StackdriverPicker extends React.Component<Props, State> {
+export class MetricSelect extends React.Component<Props, State> {
   static defaultProps = {
     variables: [],
     options: [],

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

@@ -1,7 +1,7 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleAggregationChange"
       value="ctrl.target.aggregation.crossSeriesReducer"
       options="ctrl.aggOptions"
@@ -10,7 +10,7 @@
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
       group-name="'Aggregations'"
-    ></stackdriver-picker>
+    ></metric-select>
   </div>
   <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
@@ -24,7 +24,7 @@
 <div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-15">Aligner</label>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleAlignmentChange"
       value="ctrl.target.aggregation.perSeriesAligner"
       options="ctrl.alignOptions"
@@ -33,7 +33,7 @@
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
       group-name="'Alignment Options'"
-    ></stackdriver-picker>
+    ></metric-select>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
@@ -41,7 +41,7 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleAlignmentPeriodChange"
       value="ctrl.target.aggregation.alignmentPeriod"
       options="ctrl.alignmentPeriods"
@@ -50,7 +50,7 @@
       className="'width-15'"
       variables="ctrl.templateSrv.variables"
       group-name="'Alignment Periods'"
-    ></stackdriver-picker>
+    ></metric-select>
   </div>
 
   <div class="gf-form gf-form--grow">

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

@@ -1,21 +1,21 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Service</span>
-    <stackdriver-picker
+    <metric-select
       onChange="ctrl.handleServiceChange"
       value="ctrl.target.service"
       options="ctrl.services"
       is-searchable="false"
       placeholder="'Select Services'"
       className="'width-15'"
-    ></stackdriver-picker>
+    ></metric-select>
   </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
+    <metric-select
       onChange="ctrl.handleMetricTypeChange"
       value="ctrl.target.metricType"
       options="ctrl.getMetricsList()"
@@ -24,7 +24,7 @@
       is-searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
-    ></stackdriver-picker>
+    ></metric-select>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>

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

@@ -2,8 +2,6 @@ import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
-import { StackdriverPicker } from './components/StackdriverPicker';
-import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
   alignmentPeriod: string;
@@ -63,16 +61,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
-    react2AngularDirective('stackdriverPicker', StackdriverPicker, [
-      'options',
-      'onChange',
-      'value',
-      'isSearchable',
-      'className',
-      'placeholder',
-      'groupName',
-      ['variables', { watchDepth: 'reference' }],
-    ]);
   }
 
   onDataReceived(dataList) {