Stackdriver: Refactored api call to google resource manager

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

@@ -7,7 +7,7 @@ export class StackdriverConfigCtrl {
   inputDataValid: boolean;
   inputDataValid: boolean;
   defaultProject: string;
   defaultProject: string;
   projectsError: string;
   projectsError: string;
-  projects: string[];
+  projects: any[];
   loadingProjects: boolean;
   loadingProjects: boolean;
 
 
   /** @ngInject */
   /** @ngInject */
@@ -15,6 +15,7 @@ export class StackdriverConfigCtrl {
     this.datasourceSrv = datasourceSrv;
     this.datasourceSrv = datasourceSrv;
     this.current.jsonData = this.current.jsonData || {};
     this.current.jsonData = this.current.jsonData || {};
     this.current.secureJsonData = this.current.secureJsonData || {};
     this.current.secureJsonData = this.current.secureJsonData || {};
+    this.defaultProject = this.current.jsonData.defaultProject;
     this.projects = [];
     this.projects = [];
   }
   }
 
 
@@ -80,11 +81,12 @@ export class StackdriverConfigCtrl {
       try {
       try {
         this.loadingProjects = true;
         this.loadingProjects = true;
         const ds = await this.datasourceSrv.loadDatasource(this.current.name);
         const ds = await this.datasourceSrv.loadDatasource(this.current.name);
-        const response = await ds.doRequest(`/cloudresourcemanager/v1/projects`);
+        this.projects = await ds.getProjects();
         this.$scope.$apply(() => {
         this.$scope.$apply(() => {
-          this.projects = response.data.projects.map(p => ({ id: p.projectId, name: p.name }));
+          if (this.projects.length > 0) {
+            this.current.jsonData.defaultProject = this.current.jsonData.defaultProject || this.projects[0].id;
+          }
         });
         });
-        console.log(this.projects);
       } catch (error) {
       } catch (error) {
         let message = 'Projects cannot be fetched: ';
         let message = 'Projects cannot be fetched: ';
         message += error.statusText ? error.statusText + ': ' : '';
         message += error.statusText ? error.statusText + ': ' : '';
@@ -100,10 +102,9 @@ export class StackdriverConfigCtrl {
         } else {
         } else {
           message += 'Cannot connect to Stackdriver API';
           message += 'Cannot connect to Stackdriver API';
         }
         }
-        this.$scope.$apply(() => {
-          this.loadingProjects = false;
-          this.projectsError = message;
-        });
+        this.$scope.$apply(() => (this.projectsError = message));
+      } finally {
+        this.$scope.$apply(() => (this.loadingProjects = false));
       }
       }
     }
     }
   }
   }

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

@@ -38,7 +38,12 @@ export default class StackdriverDatasource {
       });
       });
   }
   }
 
 
-  doRequest(url, maxRetries = 1) {
+  async getProjects() {
+    const response = await this.doRequest(`/cloudresourcemanager/v1/projects`);
+    return response.data.projects.map(p => ({ id: p.projectId, name: p.name }));
+  }
+
+  async doRequest(url, maxRetries = 1) {
     return this.backendSrv
     return this.backendSrv
       .datasourceRequest({
       .datasourceRequest({
         url: this.url + url,
         url: this.url + url,

public/app/plugins/datasource/stackdriver/partials/config.html

@@ -28,7 +28,8 @@
 		<div class="gf-form" ng-if="ctrl.inputDataValid">
 		<div class="gf-form" ng-if="ctrl.inputDataValid">
 			<span class="gf-form-label width-10">Default Project</span>
 			<span class="gf-form-label width-10">Default Project</span>
 			<div class="gf-form-select-wrapper max-width-23">
 			<div class="gf-form-select-wrapper max-width-23">
-				<select class="gf-form-input" ng-model="ctrl.defaultProject" ng-options="p.id as p.name for p in ctrl.projects" ng-change="ctrl.userChangedDefaultProject()"></select>
+				<select class="gf-form-input" ng-model="ctrl.current.jsonData.defaultProject" ng-options="p.id as p.name for p in ctrl.projects"
+				 ng-change="ctrl.userChangedDefaultProject()"></select>
 			</div>
 			</div>
 			<div ng-if="ctrl.loadingProjects">
 			<div ng-if="ctrl.loadingProjects">
 				<i class="fa fa-spinner fa-spin"></i>
 				<i class="fa fa-spinner fa-spin"></i>