stackdriver: conditional template component rendering

public/app/features/plugins/all.ts

@@ -4,4 +4,4 @@ import './import_list/import_list';
 import './ds_edit_ctrl';
 import './datasource_srv';
 import './plugin_component';
-import './plugin_react_component';
+import './pluginTemplateQueryComponentLoader';

public/app/features/plugins/plugin_react_component.tsx → public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx

@@ -4,6 +4,7 @@ import { importPluginModule } from './plugin_loader';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
+import DefaultTemplateQueryCtrl from '../templating/defaultTemplateQueryCtrl';
 
 function WrapInProvider(Component, props) {
   return (
@@ -13,30 +14,23 @@ function WrapInProvider(Component, props) {
   );
 }
 
-/** @ngInject */
-function pluginReactDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache, $timeout) {
-  async function getModule(scope, attrs) {
-    switch (attrs.type) {
-      case 'template-query-ctrl': {
-        const dsModule = await importPluginModule(scope.currentDatasource.meta.module);
-        console.log(dsModule);
-        return dsModule.TemplateQueryCtrl;
-      }
-      default: {
-        return $q.reject({
-          message: 'Could not find component type: ' + attrs.type,
-        });
-      }
-    }
+async function loadComponent(module) {
+  const component = await importPluginModule(module);
+  if (!component.TemplateQueryCtrl) {
+    return DefaultTemplateQueryCtrl;
+  } else {
+    return component.TemplateQueryCtrl;
   }
+}
 
+/** @ngInject */
+function pluginTemplateQueryComponentLoader(datasourceSrv) {
   return {
     restrict: 'E',
-    link: async (scope, elem, attrs) => {
-      const component = await getModule(scope, attrs);
-      const props = { datasourceSrv };
+    link: async (scope, elem) => {
+      const component = await loadComponent(scope.currentDatasource.meta.module);
+      const props = { datasourceSrv, query: scope.current.query, isValid: scope.current.isValid };
       ReactDOM.render(WrapInProvider(component, props), elem[0]);
-
       scope.$on('$destroy', () => {
         ReactDOM.unmountComponentAtNode(elem[0]);
       });
@@ -44,4 +38,4 @@ function pluginReactDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $ht
   };
 }
 
-coreModule.directive('pluginReactComponent', pluginReactDirectiveLoader);
+coreModule.directive('pluginTemplateQueryComponent', pluginTemplateQueryComponentLoader);

public/app/features/templating/defaultTemplateQueryCtrl.tsx

+import React, { PureComponent } from 'react';
+
+interface Props {
+  query: string;
+}
+
+export default class DefaultTemplateQueryCtrl extends PureComponent<Props> {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    console.log('componentDidMount');
+  }
+
+  render() {
+    return (
+      <div className="gf-form">
+        <span className="gf-form-label width-7">Query</span>
+        <input
+          type="text"
+          className="gf-form-input"
+          ng-model="current.query"
+          placeholder="metric name or tags query"
+          ng-model-onblur
+          ng-change="runQuery()"
+          required
+        />
+      </div>
+    );
+  }
+}

public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx

 import React, { PureComponent } from 'react';
+import DatasourceSrv from 'app/features/plugins/datasource_srv';
 
-interface Props {}
+interface Props {
+  query: string;
+  datasourceSrv: DatasourceSrv;
+  isValid: any;
+}
 
 export class StackdriverTemplateQueryCtrl extends PureComponent<Props> {
   constructor(props) {