Improved user experience

public/app/features/dashboard/upload.ts

@@ -1,4 +1,5 @@
 import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
 
 const template = `
 <input type="file" id="dashupload" name="dashupload" class="hide" onchange="angular.element(this).scope().file_selected"/>
@@ -26,7 +27,7 @@ function uploadDashboardDirective(timer, alertSrv, $location) {
               dash = JSON.parse(e.target.result);
             } catch (err) {
               console.log(err);
-              scope.appEvent('alert-error', ['Import failed', 'JSON -> JS Serialization failed: ' + err.message]);
+              appEvents.emit('alert-error', ['Import failed', 'JSON -> JS Serialization failed: ' + err.message]);
               return;
             }
 

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

@@ -2,10 +2,67 @@ export class StackdriverConfigCtrl {
   static templateUrl = 'public/app/plugins/datasource/stackdriver/partials/config.html';
   datasourceSrv: any;
   current: any;
+  jsonText: string;
+  validationErrors: string[] = [];
+  inputDataValid: boolean;
 
   /** @ngInject */
   constructor($scope, datasourceSrv) {
     this.datasourceSrv = datasourceSrv;
     this.current.jsonData = this.current.jsonData || {};
+    this.current.secureJsonData = this.current.secureJsonData || {};
+  }
+
+  save(jwt) {
+    this.current.secureJsonData.privateKey = jwt.private_key;
+    this.current.jsonData.tokenUri = jwt.token_uri;
+    this.current.jsonData.clientEmail = jwt.client_email;
+  }
+
+  validateJwt(jwt) {
+    this.resetValidationMessages();
+    if (!jwt.private_key || jwt.private_key.length === 0) {
+      this.validationErrors.push('Private key field missing in JWT file.');
+    }
+
+    if (!jwt.token_uri || jwt.token_uri.length === 0) {
+      this.validationErrors.push('Token URI field missing in JWT file.');
+    }
+
+    if (!jwt.client_email || jwt.client_email.length === 0) {
+      this.validationErrors.push('Client Email field missing in JWT file.');
+    }
+
+    if (this.validationErrors.length === 0) {
+      this.inputDataValid = true;
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  onUpload(json) {
+    this.jsonText = '';
+    if (this.validateJwt(json)) {
+      this.save(json);
+    }
+  }
+
+  onPasteJwt(e) {
+    try {
+      const json = JSON.parse(e.originalEvent.clipboardData.getData('text/plain') || this.jsonText);
+      if (this.validateJwt(json)) {
+        this.save(json);
+      }
+    } catch (error) {
+      this.resetValidationMessages();
+      this.validationErrors.push(`Invalid json: ${error.message}`);
+    }
+  }
+
+  resetValidationMessages() {
+    this.validationErrors = [];
+    this.inputDataValid = false;
+    this.jsonText = '';
   }
 }

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

@@ -1,6 +1,26 @@
-<datasource-http-settings
-	current="ctrl.current"
-	suggest-url="http://localhost:8080">
-</datasource-http-settings>
-
-<h3 class="page-heading">Hello Stackdriver</h3>
+<h3>Stackdriver Authentication</h3>
+<div class="gf-form-group" ng-if="!ctrl.inputDataValid">
+	<div class="gf-form">
+		<form>
+			<dash-upload on-upload="ctrl.onUpload(dash)"></dash-upload>
+		</form>
+	</div>
+</div>
+<div class="gf-form-group">
+	<h5 class="section-heading" ng-if="!ctrl.inputDataValid">Or paste JSON</h5>
+	<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 ng-repeat="valError in ctrl.validationErrors" class="text-error p-l-1">
+		<i class="fa fa-warning"></i>
+		{{valError}}
+	</div>
+	<div ng-if="ctrl.inputDataValid">
+		<div class="text-success p-l-1">
+			<i class="fa fa-info"></i>
+			Successfully validated input format
+		</div>
+		<br />
+		<a class="btn btn-secondary gf-form-btn" href="#" ng-click="ctrl.resetValidationMessages()">Reset form</a>
+	</div>
+</div>