add event handler

public/app/plugins/datasource/stackdriver/components/Help.tsx

@@ -4,6 +4,7 @@ import { Project } from './Project';
 export interface Props {
   datasource: any;
   rawQuery: string;
+  lastQueryError: string;
 }
 
 interface State {
@@ -31,7 +32,7 @@ export class Help extends React.Component<Props, State> {
 
   render() {
     const { displayHelp, displaRawQuery } = this.state;
-    const { datasource, rawQuery } = this.props;
+    const { datasource, rawQuery, lastQueryError } = this.props;
 
     return (
       <React.Fragment>
@@ -96,12 +97,15 @@ export class Help extends React.Component<Props, State> {
                   <code>{`${'{{resource.label.label_name}}'}`}</code> = Resource label metadata e.g. resource.label.zone
                 </li>
               </ul>
-              <div className="gf-form" ng-show="ctrl.lastQueryError">
-                <pre className="gf-form-pre alert alert-error">{'ctrl.lastQueryError'}</pre>
-              </div>
             </pre>
           </div>
         )}
+
+        {lastQueryError && (
+          <div className="gf-form">
+            <pre className="gf-form-pre alert alert-error">{lastQueryError}</pre>
+          </div>
+        )}
       </React.Fragment>
     );
   }

public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx

@@ -24,6 +24,7 @@ export interface Props {
 interface State extends Target {
   alignOptions: any[];
   lastQuery: string;
+  lastQueryError: string;
 }
 
 const DefaultTarget: State = {
@@ -42,6 +43,7 @@ const DefaultTarget: State = {
   aliasBy: '',
   alignOptions: [],
   lastQuery: '',
+  lastQueryError: '',
 };
 
 export class QueryEditor extends React.Component<Props, State> {
@@ -62,25 +64,29 @@ export class QueryEditor extends React.Component<Props, State> {
   onDataReceived(dataList) {
     const anySeriesFromQuery = dataList.find(item => item.refId === this.props.target.refId);
     if (anySeriesFromQuery) {
-      this.setState({ lastQuery: decodeURIComponent(anySeriesFromQuery.meta.rawQuery) });
+      this.setState({ lastQuery: decodeURIComponent(anySeriesFromQuery.meta.rawQuery), lastQueryError: '' });
     }
   }
 
   onDataError(err) {
-    // if (err.data && err.data.results) {
-    //   const queryRes = err.data.results[this.target.refId];
-    //   if (queryRes && queryRes.error) {
-    //     this.lastQueryMeta = queryRes.meta;
-    //     this.lastQueryMeta.rawQueryString = decodeURIComponent(this.lastQueryMeta.rawQuery);
-    //     let jsonBody;
-    //     try {
-    //       jsonBody = JSON.parse(queryRes.error);
-    //     } catch {
-    //       this.lastQueryError = queryRes.error;
-    //     }
-    //     this.lastQueryError = jsonBody.error.message;
-    //   }
-    // }
+    if (err) {
+      let lastQuery;
+      let lastQueryError;
+      if (err.data && err.data.error) {
+        lastQueryError = this.props.datasource.formatStackdriverError(err);
+      } else if (err.data && err.data.results) {
+        const queryRes = err.data.results[this.props.target.refId];
+        lastQuery = decodeURIComponent(queryRes.meta.rawQuery);
+        if (queryRes && queryRes.error) {
+          try {
+            lastQueryError = JSON.parse(queryRes.error).error.message;
+          } catch {
+            lastQueryError = queryRes.error;
+          }
+        }
+      }
+      this.setState({ lastQuery, lastQueryError });
+    }
   }
 
   handleMetricTypeChange({ valueType, metricKind, type, unit }) {
@@ -157,6 +163,7 @@ export class QueryEditor extends React.Component<Props, State> {
       alignmentPeriod,
       aliasBy,
       lastQuery,
+      lastQueryError,
     } = this.state;
     const { templateSrv, datasource, uiSegmentSrv } = this.props;
 
@@ -207,7 +214,7 @@ export class QueryEditor extends React.Component<Props, State> {
                 onChange={value => this.handleAlignmentPeriodChange(value)}
               />
 
-              <Help datasource={datasource} rawQuery={lastQuery} />
+              <Help datasource={datasource} rawQuery={lastQuery} lastQueryError={lastQueryError} />
             </React.Fragment>
           )}
         </Metrics>

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

@@ -63,8 +63,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     this.$rootScope = $rootScope;
     this.uiSegmentSrv = uiSegmentSrv;
     _.defaultsDeep(this.target, this.defaults);
-    this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
-    this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
     react2AngularDirective('stackdriverPicker', StackdriverPicker, [
       'options',
       'onChange',
@@ -76,8 +74,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       ['templateVariables', { watchDepth: 'reference' }],
     ]);
     registerAngularDirectives();
-    this.handleQueryChange = this.handleQueryChange.bind(this);
-    this.handleExecuteQuery = this.handleExecuteQuery.bind(this);
   }
 
   handleQueryChange(target: Target) {
@@ -87,34 +83,4 @@ export class StackdriverQueryCtrl extends QueryCtrl {
   handleExecuteQuery() {
     this.$scope.ctrl.refresh();
   }
-
-  onDataReceived(dataList) {
-    this.lastQueryError = null;
-    this.lastQueryMeta = null;
-
-    const anySeriesFromQuery: any = _.find(dataList, { refId: this.target.refId });
-    if (anySeriesFromQuery) {
-      this.lastQueryMeta = anySeriesFromQuery.meta;
-      this.lastQueryMeta.rawQueryString = decodeURIComponent(this.lastQueryMeta.rawQuery);
-    }
-  }
-
-  onDataError(err) {
-    if (err.data && err.data.results) {
-      const queryRes = err.data.results[this.target.refId];
-      if (queryRes && queryRes.error) {
-        this.lastQueryMeta = queryRes.meta;
-        this.lastQueryMeta.rawQueryString = decodeURIComponent(this.lastQueryMeta.rawQuery);
-
-        let jsonBody;
-        try {
-          jsonBody = JSON.parse(queryRes.error);
-        } catch {
-          this.lastQueryError = queryRes.error;
-        }
-
-        this.lastQueryError = jsonBody.error.message;
-      }
-    }
-  }
 }