stackdriver: make it possible to load react plugin components from template query page

public/app/features/templating/editor_ctrl.ts

@@ -171,6 +171,11 @@ export class VariableEditorCtrl {
     $scope.showMoreOptions = () => {
       $scope.optionsLimit += 20;
     };
+
+    $scope.datasourceChanged = async () => {
+      $scope.currentDatasource = await datasourceSrv.get($scope.current.datasource);
+      console.log($scope.currentDatasource);
+    };
   }
 }
 

public/app/features/templating/partials/editor.html

@@ -170,11 +170,12 @@
 				<div class="gf-form max-width-21">
 					<span class="gf-form-label width-7">Data source</span>
 					<div class="gf-form-select-wrapper max-width-14">
-						<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required>
+						<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" ng-change="datasourceChanged()" required>
 							<option value="" ng-if="false"></option>
 						</select>
 					</div>
 				</div>
+
 				<div class="gf-form max-width-22">
 					<span class="gf-form-label width-7">
 						Refresh
@@ -187,6 +188,12 @@
 					</div>
 				</div>
 			</div>
+			
+			<rebuild-on-change property="currentDatasource">
+				<plugin-react-component type="template-query-ctrl">
+				</plugin-react-component>
+			</rebuild-on-change>
+
 			<div class="gf-form">
 				<span class="gf-form-label width-7">Query</span>
 				<input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()" required></input>

public/app/types/plugins.ts

@@ -6,6 +6,7 @@ export interface PluginExports {
   QueryCtrl?: any;
   ConfigCtrl?: any;
   AnnotationsQueryCtrl?: any;
+  TemplateQueryCtrl?: any;
   ExploreQueryField?: any;
   ExploreStartPage?: any;