stackdriver: use new naming convention for query editor all over

conf/defaults.ini

@@ -249,7 +249,7 @@ signout_redirect_url =
 #################################### Anonymous Auth ######################
 [auth.anonymous]
 # enable anonymous access
-enabled = false
+enabled = true
 
 # specify organization name that should be used for unauthenticated users
 org_name = Main Org.

public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap

@@ -14,3 +14,4 @@ exports[`PickerOption renders correctly 1`] = `
   </div>
 </div>
 `;
+  

public/app/features/plugins/TemplateQueryComponentLoader.tsx → public/app/features/plugins/VariableQueryComponentLoader.tsx

@@ -2,19 +2,19 @@ import coreModule from 'app/core/core_module';
 import { importPluginModule } from './plugin_loader';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import DefaultTemplateQueryComponent from '../templating/DefaultTemplateQueryComponent';
+import DefaultVariableQueryEditor from '../templating/DefaultVariableQueryEditor';
 
 async function loadComponent(module) {
   const component = await importPluginModule(module);
-  if (component && component.TemplateQueryComponent) {
-    return component.TemplateQueryComponent;
+  if (component && component.VariableQueryEditor) {
+    return component.VariableQueryEditor;
   } else {
-    return DefaultTemplateQueryComponent;
+    return DefaultVariableQueryEditor;
   }
 }
 
 /** @ngInject */
-function templateQueryComponentLoader() {
+function variableQueryEditorLoader() {
   return {
     restrict: 'E',
     link: async (scope, elem) => {
@@ -32,4 +32,4 @@ function templateQueryComponentLoader() {
   };
 }
 
-coreModule.directive('templateQueryComponentLoader', templateQueryComponentLoader);
+coreModule.directive('variableQueryEditorLoader', variableQueryEditorLoader);

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 './TemplateQueryComponentLoader';
+import './VariableQueryComponentLoader';

public/app/features/templating/DefaultTemplateQueryComponent.tsx → public/app/features/templating/DefaultVariableQueryEditor.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
-import { TemplateQueryProps } from 'app/types/plugins';
+import { VariableQueryProps } from 'app/types/plugins';
 
-export default class DefaultTemplateQueryComponent extends PureComponent<TemplateQueryProps, any> {
+export default class DefaultVariableQueryEditor extends PureComponent<VariableQueryProps, any> {
   constructor(props) {
     super(props);
     this.state = { value: props.query };

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

@@ -200,8 +200,8 @@
 			</div>
 
 			<rebuild-on-change property="currentDatasource">
-				<template-query-component-loader>
-				</template-query-component-loader>
+				<variable-query-editor-loader>
+				</variable-query-editor-loader>
 			</rebuild-on-change>
 
 			<div class="gf-form">

public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx → public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.test.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { StackdriverTemplateQueryComponent } from './TemplateQueryComponent';
-import { TemplateQueryProps } from 'app/types/plugins';
+import { StackdriverVariableQueryEditor } from './VariableQueryEditor';
+import { VariableQueryProps } from 'app/types/plugins';
 import { MetricFindQueryTypes } from '../types';
 
 jest.mock('../functions', () => ({
   getMetricTypes: () => ({ metricTypes: [], selectedMetricType: '' }),
 }));
 
-const props: TemplateQueryProps = {
+const props: VariableQueryProps = {
   onChange: (query, definition) => {},
   query: {},
   datasource: {
@@ -16,9 +16,9 @@ const props: TemplateQueryProps = {
   },
 };
 
-describe('StackdriverTemplateQueryComponent', () => {
+describe('VariableQueryEditor', () => {
   it('renders correctly', () => {
-    const tree = renderer.create(<StackdriverTemplateQueryComponent {...props} />).toJSON();
+    const tree = renderer.create(<StackdriverVariableQueryEditor {...props} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -28,7 +28,7 @@ describe('StackdriverTemplateQueryComponent', () => {
         expect(definition).toBe('Stackdriver - Metric Types');
         done();
       };
-      renderer.create(<StackdriverTemplateQueryComponent {...props} />).toJSON();
+      renderer.create(<StackdriverVariableQueryEditor {...props} />).toJSON();
     });
   });
 
@@ -39,7 +39,7 @@ describe('StackdriverTemplateQueryComponent', () => {
         expect(definition).toBe('Stackdriver - Metric Labels');
         done();
       };
-      renderer.create(<StackdriverTemplateQueryComponent {...props} />).toJSON();
+      renderer.create(<StackdriverVariableQueryEditor {...props} />).toJSON();
     });
   });
 });

public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx → public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx

@@ -1,11 +1,11 @@
 import React, { PureComponent } from 'react';
 import uniqBy from 'lodash/uniqBy';
-import { TemplateQueryProps } from 'app/types/plugins';
+import { VariableQueryProps } from 'app/types/plugins';
 import SimpleSelect from './SimpleSelect';
 import { getMetricTypes } from '../functions';
-import { MetricFindQueryTypes, TemplateQueryComponentData } from '../types';
+import { MetricFindQueryTypes, VariableQueryData } from '../types';
 
-export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQueryProps, TemplateQueryComponentData> {
+export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryProps, VariableQueryData> {
   queryTypes: Array<{ value: string; name: string }> = [
     { value: MetricFindQueryTypes.MetricTypes, name: 'Metric Types' },
     { value: MetricFindQueryTypes.MetricLabels, name: 'Metric Labels' },
@@ -16,7 +16,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
     { value: MetricFindQueryTypes.AlignmentPeriods, name: 'Alignment Periods' },
   ];
 
-  defaults: TemplateQueryComponentData = {
+  defaults: VariableQueryData = {
     selectedQueryType: this.queryTypes[0].value,
     metricDescriptors: [],
     selectedService: '',
@@ -27,7 +27,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
     services: [],
   };
 
-  constructor(props: TemplateQueryProps) {
+  constructor(props: VariableQueryProps) {
     super(props);
     this.handleQueryTypeChange = this.handleQueryTypeChange.bind(this);
     this.onServiceChange = this.onServiceChange.bind(this);
@@ -111,7 +111,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
   async getLabels(selectedMetricType, selectedQueryType = this.state.selectedQueryType) {
     let result = { labels: this.state.labels, labelKey: this.state.labelKey };
     if (selectedMetricType && this.isLabelQuery(selectedQueryType)) {
-      const refId = 'StackdriverTemplateQueryComponent';
+      const refId = 'StackdriverVariableQueryEditor';
       const response = await this.props.datasource.getLabels(selectedMetricType, refId);
       const labels = Object.keys(response.meta[selectedQueryType]);
       const labelKey = labels.some(l => l === this.state.labelKey) ? this.state.labelKey : labels[0];

public/app/plugins/datasource/stackdriver/components/__snapshots__/TemplateQueryComponent.test.tsx.snap → public/app/plugins/datasource/stackdriver/components/__snapshots__/VariableQueryEditor.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StackdriverTemplateQueryComponent renders correctly 1`] = `
+exports[`VariableQueryEditor renders correctly 1`] = `
 Array [
   <div
     className="gf-form max-width-21"

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

@@ -111,6 +111,11 @@ export default class StackdriverDatasource {
     return unit;
   }
 
+  async getProjects() {
+    const response = await this.doRequest(`/cloudresourcemanager/v1/projects`);
+    return response.data.projects.map(p => ({ value: p.projectId, name: p.name }));
+  }
+
   async query(options) {
     const result = [];
     const data = await this.getTimeSeries(options);

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 { StackdriverTemplateQueryComponent } from './components/TemplateQueryComponent';
+import { StackdriverVariableQueryEditor } from './components/VariableQueryEditor';
 
 export {
   StackdriverDatasource as Datasource,
   StackdriverQueryCtrl as QueryCtrl,
   StackdriverConfigCtrl as ConfigCtrl,
   StackdriverAnnotationsQueryCtrl as AnnotationsQueryCtrl,
-  StackdriverTemplateQueryComponent as TemplateQueryComponent,
+  StackdriverVariableQueryEditor as VariableQueryEditor,
 };

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

@@ -13,9 +13,14 @@
     </div>
   </div>
   <div class="gf-form-inline">
-    <div class="gf-form">
+    <!-- <div class="gf-form">
       <span class="gf-form-label width-9">Project</span>
       <input class="gf-form-input" disabled type="text" ng-model='ctrl.target.defaultProject' css-class="min-width-12" />
+    </div> -->
+    <div class="gf-form">
+      <span class="gf-form-label width-9">Project</span>
+      <gf-form-dropdown class="gf-form-input" type="text" ng-model='ctrl.target.defaultProject' get-options="ctrl.projects"
+        css-class="min-width-12"></gf-form-dropdown>
     </div>
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
@@ -70,4 +75,4 @@
   <div class="gf-form" ng-show="ctrl.lastQueryError">
     <pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
   </div>
-</query-editor-row>
+</query-editor-row>

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

@@ -52,6 +52,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     metricKind: '',
     valueType: '',
   };
+  projects: any;
 
   showHelp: boolean;
   showLastQuery: boolean;
@@ -62,11 +63,16 @@ export class StackdriverQueryCtrl extends QueryCtrl {
   constructor($scope, $injector) {
     super($scope, $injector);
     _.defaultsDeep(this.target, this.defaults);
-
+    this.setProjects($scope.ctrl.datasource);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
   }
 
+  async setProjects(ds) {
+    this.projects = await ds.getProjects();
+    console.log(this.projects);
+  }
+
   onDataReceived(dataList) {
     this.lastQueryError = null;
     this.lastQueryMeta = null;

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

@@ -8,7 +8,7 @@ export enum MetricFindQueryTypes {
   AlignmentPeriods = 'alignmentPeriods',
 }
 
-export interface TemplateQueryComponentData {
+export interface VariableQueryData {
   selectedQueryType: string;
   metricDescriptors: any[];
   selectedService: string;

public/app/types/plugins.ts

@@ -6,7 +6,7 @@ export interface PluginExports {
   QueryCtrl?: any;
   ConfigCtrl?: any;
   AnnotationsQueryCtrl?: any;
-  TemplateQueryComponent?: any;
+  VariableQueryEditor?: any;
   ExploreQueryField?: any;
   ExploreStartPage?: any;
 
@@ -100,7 +100,7 @@ export interface PluginsState {
   dashboards: PluginDashboard[];
 }
 
-export interface TemplateQueryProps {
+export interface VariableQueryProps {
   query: any;
   onChange: (query: any, definition: string) => void;
   datasource: any;