Stackdriver: Fixed error message from google resource manager

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

@@ -6,11 +6,12 @@ export class StackdriverConfigCtrl {
   validationErrors: string[] = [];
   inputDataValid: boolean;
   defaultProject: string;
+  projectsError: string;
   projects: string[];
   loadingProjects: boolean;
 
   /** @ngInject */
-  constructor($scope, datasourceSrv) {
+  constructor(private $scope, datasourceSrv) {
     this.datasourceSrv = datasourceSrv;
     this.current.jsonData = this.current.jsonData || {};
     this.current.secureJsonData = this.current.secureJsonData || {};
@@ -70,16 +71,39 @@ export class StackdriverConfigCtrl {
     this.validationErrors = [];
     this.inputDataValid = false;
     this.jsonText = '';
+    this.loadingProjects = false;
+    this.projectsError = '';
   }
 
   async displayProjects() {
     if (this.projects.length === 0) {
-      this.loadingProjects = true;
-      const ds = await this.datasourceSrv.loadDatasource(this.current.name);
       try {
-        this.projects = await ds.doRequest(`/cloudresourcemanager/v1/projects`);
+        this.loadingProjects = true;
+        const ds = await this.datasourceSrv.loadDatasource(this.current.name);
+        const response = await ds.doRequest(`/cloudresourcemanager/v1/projects`);
+        this.$scope.$apply(() => {
+          this.projects = response.data.projects.map(p => ({ id: p.projectId, name: p.name }));
+        });
+        console.log(this.projects);
       } catch (error) {
-        console.log(error);
+        let message = 'Projects cannot be fetched: ';
+        message += error.statusText ? error.statusText + ': ' : '';
+        if (error && error.data && error.data.error && error.data.error.message) {
+          if (error.data.error.code === 403) {
+            message += `
+            A list of projects could not be fetched from the Google Cloud Resource Manager API.
+            You might need to enable it first:
+            https://console.developers.google.com/apis/library/cloudresourcemanager.googleapis.com`;
+          } else {
+            message += error.data.error.code + '. ' + error.data.error.message;
+          }
+        } else {
+          message += 'Cannot connect to Stackdriver API';
+        }
+        this.$scope.$apply(() => {
+          this.loadingProjects = false;
+          this.projectsError = message;
+        });
       }
     }
   }

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

@@ -11,16 +11,6 @@
 	<div class="gf-form" ng-if="!ctrl.inputDataValid">
 		<textarea rows="10" data-share-panel-url="" class="gf-form-input" ng-model="ctrl.jsonText" ng-paste="ctrl.onPasteJwt($event)"></textarea>
 	</div>
-	<div class="gf-form" ng-if="ctrl.inputDataValid">
-		<span class="gf-form-label width-7">Default Projects</span>
-		<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>
-		</div>
-		<div ng-if="ctrl.loadingProjects">
-			<i class="fa fa-spinner fa-spin"></i>
-			<em>Fetching history list&hellip;</em>
-		</div>
-	</div>
 	<div ng-repeat="valError in ctrl.validationErrors" class="text-error p-l-1">
 		<i class="fa fa-warning"></i>
 		{{valError}}
@@ -33,4 +23,21 @@
 		<br />
 		<a class="btn btn-secondary gf-form-btn" href="#" ng-click="ctrl.resetValidationMessages()">Reset form</a>
 	</div>
+	<br />
+	<div class="gf-form-group" ng-if="ctrl.inputDataValid">
+		<div class="gf-form" ng-if="ctrl.inputDataValid">
+			<span class="gf-form-label width-10">Default Project</span>
+			<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>
+			</div>
+			<div ng-if="ctrl.loadingProjects">
+				<i class="fa fa-spinner fa-spin"></i>
+				<em>Fetching projects...&hellip;</em>
+			</div>
+		</div>
+		<div ng-if="ctrl.projectsError" class="text-error p-l-1">
+			<i class="fa fa-warning"></i>
+			{{ctrl.projectsError}}
+		</div>
+	</div>
 </div>