From 33c9217cc987cf4aee124c623cebe0bd45cbb7fb Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Fri, 26 Oct 2018 09:44:36 +0200
Subject: [PATCH] stackdriver: refactoring - rename react components and file
 structure changes

---
 .../pluginTemplateQueryComponentLoader.tsx    |  6 ++--
 .../MetricTypeSelector.tsx}                   | 12 ++++----
 .../ServiceSelector.tsx}                      |  4 +--
 .../TemplateQueryComponent.tsx}               | 30 ++++++++++---------
 .../plugins/datasource/stackdriver/module.ts  |  4 +--
 public/app/types/plugins.ts                   |  2 +-
 6 files changed, 30 insertions(+), 28 deletions(-)
 rename public/app/plugins/datasource/stackdriver/{metricTypes.tsx => components/MetricTypeSelector.tsx} (77%)
 rename public/app/plugins/datasource/stackdriver/{services.tsx => components/ServiceSelector.tsx} (90%)
 rename public/app/plugins/datasource/stackdriver/{templateQueryCtrl.tsx => components/TemplateQueryComponent.tsx} (69%)

diff --git a/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx b/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx
index 9a27643ace5..9db8fc97088 100644
--- a/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx
+++ b/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx
@@ -6,10 +6,10 @@ import DefaultTemplateQueryCtrl from '../templating/defaultTemplateQueryCtrl';
 
 async function loadComponent(module) {
   const component = await importPluginModule(module);
-  if (!component.TemplateQueryCtrl) {
-    return DefaultTemplateQueryCtrl;
+  if (component && component.TemplateQueryComponent) {
+    return component.TemplateQueryComponent;
   } else {
-    return component.TemplateQueryCtrl;
+    return DefaultTemplateQueryCtrl;
   }
 }
 
diff --git a/public/app/plugins/datasource/stackdriver/metricTypes.tsx b/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx
similarity index 77%
rename from public/app/plugins/datasource/stackdriver/metricTypes.tsx
rename to public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx
index d4e82dbc380..cf25a100747 100644
--- a/public/app/plugins/datasource/stackdriver/metricTypes.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx
@@ -1,13 +1,13 @@
 import React, { SFC } from 'react';
 
 interface Props {
-  onMetricTypeChanged: any;
+  onMetricTypeChange: any;
   selectedService: string;
   metricDescriptors: any[];
 }
 
-const MetricTypes: SFC<Props> = props => {
-  const extractMetricTypes = () => {
+const MetricTypeSelector: SFC<Props> = props => {
+  const filterMetricTypes = () => {
     if (!props.selectedService) {
       return [];
     }
@@ -22,8 +22,8 @@ const MetricTypes: SFC<Props> = props => {
     <div className="gf-form max-width-21">
       <span className="gf-form-label width-7">Metric Types</span>
       <div className="gf-form-select-wrapper max-width-14">
-        <select className="gf-form-input" required onChange={props.onMetricTypeChanged}>
-          {extractMetricTypes().map((qt, i) => (
+        <select className="gf-form-input" required onChange={props.onMetricTypeChange}>
+          {filterMetricTypes().map((qt, i) => (
             <option key={i} value={qt.value} ng-if="false">
               {qt.name}
             </option>
@@ -34,4 +34,4 @@ const MetricTypes: SFC<Props> = props => {
   );
 };
 
-export default MetricTypes;
+export default MetricTypeSelector;
diff --git a/public/app/plugins/datasource/stackdriver/services.tsx b/public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx
similarity index 90%
rename from public/app/plugins/datasource/stackdriver/services.tsx
rename to public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx
index e8da82933d2..44cf6122ebf 100644
--- a/public/app/plugins/datasource/stackdriver/services.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx
@@ -6,7 +6,7 @@ interface Props {
   metricDescriptors: any[];
 }
 
-const Services: SFC<Props> = props => {
+const ServiceSelector: SFC<Props> = props => {
   const extractServices = () =>
     uniqBy(props.metricDescriptors, 'service').map(m => ({
       value: m.service,
@@ -29,4 +29,4 @@ const Services: SFC<Props> = props => {
   );
 };
 
-export default Services;
+export default ServiceSelector;
diff --git a/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx
similarity index 69%
rename from public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx
rename to public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx
index 20a2cf28077..a0ca1ad422e 100644
--- a/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx
@@ -1,15 +1,15 @@
 import React, { PureComponent } from 'react';
-import StackdriverDatasource from './datasource';
-import Services from './services';
-import MetricTypes from './metricTypes';
+import StackdriverDatasource from '../datasource';
+import ServiceSelector from './ServiceSelector';
+import MetricTypeSelector from './MetricTypeSelector';
 
 interface Props {
   datasource: StackdriverDatasource;
-  query: string;
+  query: any;
   onChange: (c: string) => void;
 }
 
-export class StackdriverTemplateQueryCtrl extends PureComponent<Props, any> {
+export class StackdriverTemplateQueryComponent extends PureComponent<Props, any> {
   queryTypes: Array<{ value: string; name: string }> = [
     { value: 'services', name: 'Services' },
     { value: 'metricTypes', name: 'Metric Types' },
@@ -18,9 +18,9 @@ export class StackdriverTemplateQueryCtrl extends PureComponent<Props, any> {
 
   constructor(props) {
     super(props);
-    this.handleChange = this.handleChange.bind(this);
+    this.handleQueryTypeChange = this.handleQueryTypeChange.bind(this);
     this.onServiceChange = this.onServiceChange.bind(this);
-    this.onMetricTypeChanged = this.onMetricTypeChanged.bind(this);
+    this.onMetricTypeChange = this.onMetricTypeChange.bind(this);
     this.state = { queryType: undefined, metricDescriptors: [], service: undefined, metricType: undefined };
   }
 
@@ -29,7 +29,7 @@ export class StackdriverTemplateQueryCtrl extends PureComponent<Props, any> {
     this.setState({ metricDescriptors });
   }
 
-  handleChange(event) {
+  handleQueryTypeChange(event) {
     this.setState({ queryType: event.target.value });
   }
 
@@ -37,22 +37,24 @@ export class StackdriverTemplateQueryCtrl extends PureComponent<Props, any> {
     this.setState({ service: event.target.value });
   }
 
-  onMetricTypeChanged(event) {
+  onMetricTypeChange(event) {
     this.setState({ metricType: event.target.value });
   }
 
   renderSwitch(queryType) {
     switch (queryType) {
       case 'metricTypes':
-        return <Services metricDescriptors={this.state.metricDescriptors} onServiceChange={this.onServiceChange} />;
+        return (
+          <ServiceSelector metricDescriptors={this.state.metricDescriptors} onServiceChange={this.onServiceChange} />
+        );
       case 'metricLabels':
         return (
           <React.Fragment>
-            <Services metricDescriptors={this.state.metricDescriptors} onServiceChange={this.onServiceChange} />
-            <MetricTypes
+            <ServiceSelector metricDescriptors={this.state.metricDescriptors} onServiceChange={this.onServiceChange} />
+            <MetricTypeSelector
               selectedService={this.state.service}
               metricDescriptors={this.state.metricDescriptors}
-              onMetricTypeChanged={this.onMetricTypeChanged}
+              onMetricTypeChange={this.onMetricTypeChange}
             />
           </React.Fragment>
         );
@@ -67,7 +69,7 @@ export class StackdriverTemplateQueryCtrl extends PureComponent<Props, any> {
         <div className="gf-form max-width-21">
           <span className="gf-form-label width-7">Query Type</span>
           <div className="gf-form-select-wrapper max-width-14">
-            <select className="gf-form-input" required onChange={this.handleChange}>
+            <select className="gf-form-input" required onChange={this.handleQueryTypeChange}>
               {this.queryTypes.map((qt, i) => (
                 <option key={i} value={qt.value} ng-if="false">
                   {qt.name}
diff --git a/public/app/plugins/datasource/stackdriver/module.ts b/public/app/plugins/datasource/stackdriver/module.ts
index a23ea4e6eda..2a83f3bb548 100644
--- a/public/app/plugins/datasource/stackdriver/module.ts
+++ b/public/app/plugins/datasource/stackdriver/module.ts
@@ -2,12 +2,12 @@ import StackdriverDatasource from './datasource';
 import { StackdriverQueryCtrl } from './query_ctrl';
 import { StackdriverConfigCtrl } from './config_ctrl';
 import { StackdriverAnnotationsQueryCtrl } from './annotations_query_ctrl';
-import { StackdriverTemplateQueryCtrl } from './templateQueryCtrl';
+import { StackdriverTemplateQueryComponent } from './components/TemplateQueryComponent';
 
 export {
   StackdriverDatasource as Datasource,
   StackdriverQueryCtrl as QueryCtrl,
   StackdriverConfigCtrl as ConfigCtrl,
   StackdriverAnnotationsQueryCtrl as AnnotationsQueryCtrl,
-  StackdriverTemplateQueryCtrl as TemplateQueryCtrl,
+  StackdriverTemplateQueryComponent as TemplateQueryComponent,
 };
diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts
index a22879daa70..4d6ad6584c6 100644
--- a/public/app/types/plugins.ts
+++ b/public/app/types/plugins.ts
@@ -6,7 +6,7 @@ export interface PluginExports {
   QueryCtrl?: any;
   ConfigCtrl?: any;
   AnnotationsQueryCtrl?: any;
-  TemplateQueryCtrl?: any;
+  TemplateQueryComponent?: any;
   ExploreQueryField?: any;
   ExploreStartPage?: any;