From 03856b4e55e36fed2f81de591a742a982ffb2530 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 19 Dec 2018 21:44:38 +0100
Subject: [PATCH] move component to components dir. also move directive
 registration out from datasource

---
 public/app/core/angular_wrappers.ts                  | 11 +++++++++++
 .../components/Select/MetricSelect.tsx}              |  4 ++--
 .../stackdriver/partials/query.aggregation.html      | 12 ++++++------
 .../stackdriver/partials/query.filter.html           |  8 ++++----
 .../app/plugins/datasource/stackdriver/query_ctrl.ts | 12 ------------
 5 files changed, 23 insertions(+), 24 deletions(-)
 rename public/app/{plugins/datasource/stackdriver/components/StackdriverPicker.tsx => core/components/Select/MetricSelect.tsx} (94%)

diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 5609c058a27..004d8eb12c5 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/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' }],
+  ]);
 }
diff --git a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx b/public/app/core/components/Select/MetricSelect.tsx
similarity index 94%
rename from public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
rename to public/app/core/components/Select/MetricSelect.tsx
index 49862bb2023..03d700f1ef4 100644
--- a/public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx
+++ b/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: [],
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
index 122f14a9cb6..2dc9035c7fe 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+++ b/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">
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.filter.html b/public/app/plugins/datasource/stackdriver/partials/query.filter.html
index f93a7a6eb16..4c90f4fe608 100644
--- a/public/app/plugins/datasource/stackdriver/partials/query.filter.html
+++ b/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>
diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts
index c8a2daf9ba5..ff6348c1ff5 100644
--- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts
+++ b/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) {