feat: in app query request & response troubleshooting

public/app/core/services/backend_srv.ts

@@ -4,6 +4,7 @@ import angular from 'angular';
 import _ from 'lodash';
 import _ from 'lodash';
 import config from 'app/core/config';
 import config from 'app/core/config';
 import coreModule from 'app/core/core_module';
 import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
 
 
 export class BackendSrv {
 export class BackendSrv {
   inFlightRequests = {};
   inFlightRequests = {};
@@ -150,7 +151,10 @@ export class BackendSrv {
       }
       }
     }
     }
 
 
-    return this.$http(options).catch(err => {
+    return this.$http(options).then(response => {
+      appEvents.emit('ds-request-response', response);
+      return response;
+    }).catch(err => {
       if (err.status === this.HTTP_REQUEST_CANCELLED) {
       if (err.status === this.HTTP_REQUEST_CANCELLED) {
         throw {err, cancelled: true};
         throw {err, cancelled: true};
       }
       }
@@ -179,7 +183,9 @@ export class BackendSrv {
         err.data.message = err.data.error;
         err.data.message = err.data.error;
       }
       }
 
 
+      appEvents.emit('ds-request-error', err);
       throw err;
       throw err;
+
     }).finally(() => {
     }).finally(() => {
       // clean up
       // clean up
       if (options.requestId) {
       if (options.requestId) {

public/app/features/panel/metrics_ds_selector.ts

@@ -2,10 +2,24 @@
 
 
 import angular from 'angular';
 import angular from 'angular';
 import _ from 'lodash';
 import _ from 'lodash';
+import appEvents  from 'app/core/app_events';
 
 
 var module = angular.module('grafana.directives');
 var module = angular.module('grafana.directives');
 
 
 var template = `
 var template = `
+
+<div class="gf-form-group" ng-if="ctrl.lastError">
+  <div class="gf-form">
+    <pre class="gf-form-pre alert alert-error">{{ctrl.lastError}}</pre>
+  </div>
+</div>
+
+<div class="gf-form-group" ng-if="ctrl.showResponse">
+  <div class="gf-form">
+    <pre class="gf-form-pre alert alert-info">{{ctrl.lastResponse}}</pre>
+  </div>
+</div>
+
 <div class="gf-form-group">
 <div class="gf-form-group">
   <div class="gf-form-inline">
   <div class="gf-form-inline">
     <div class="gf-form">
     <div class="gf-form">
@@ -22,9 +36,9 @@ var template = `
     </div>
     </div>
 
 
     <div class="gf-form gf-form--offset-1">
     <div class="gf-form gf-form--offset-1">
-      <button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addDataQuery()" ng-hide="ctrl.current.meta.mixed">
+      <button class="btn btn-inverse gf-form-btn" ng-click="ctrl.addDataQuery()" ng-hide="ctrl.current.meta.mixed">
         <i class="fa fa-plus"></i>&nbsp;
         <i class="fa fa-plus"></i>&nbsp;
-        Add query
+        Add Query
       </button>
       </button>
 
 
       <div class="dropdown" ng-if="ctrl.current.meta.mixed">
       <div class="dropdown" ng-if="ctrl.current.meta.mixed">
@@ -33,6 +47,14 @@ var template = `
                         on-change="ctrl.mixedDatasourceChanged()"></metric-segment>
                         on-change="ctrl.mixedDatasourceChanged()"></metric-segment>
       </div>
       </div>
     </div>
     </div>
+
+    <div class="gf-form gf-form--offset-1">
+      <button class="btn btn-secondary gf-form-btn" ng-click="ctrl.toggleShowResponse()" ng-show="ctrl.lastResponse">
+        <i class="fa fa-info"></i>&nbsp;
+        Show Response
+      </button>
+    </div>
+
   </div>
   </div>
 </div>
 </div>
 `;
 `;
@@ -45,9 +67,12 @@ export class MetricsDsSelectorCtrl {
   panelCtrl: any;
   panelCtrl: any;
   datasources: any[];
   datasources: any[];
   current: any;
   current: any;
+  lastResponse: any;
+  lastError: any;
+  showResponse: boolean;
 
 
   /** @ngInject */
   /** @ngInject */
-  constructor(private uiSegmentSrv, datasourceSrv) {
+  constructor($scope, private uiSegmentSrv, datasourceSrv) {
     this.datasources = datasourceSrv.getMetricSources();
     this.datasources = datasourceSrv.getMetricSources();
 
 
     var dsValue = this.panelCtrl.panel.datasource || null;
     var dsValue = this.panelCtrl.panel.datasource || null;
@@ -63,7 +88,25 @@ export class MetricsDsSelectorCtrl {
     }
     }
 
 
     this.dsSegment = uiSegmentSrv.newSegment({value: this.current.name, selectMode: true});
     this.dsSegment = uiSegmentSrv.newSegment({value: this.current.name, selectMode: true});
-    this.mixedDsSegment = uiSegmentSrv.newSegment({value: 'Add query', selectMode: true});
+    this.mixedDsSegment = uiSegmentSrv.newSegment({value: 'Add Query', selectMode: true});
+
+    appEvents.on('ds-request-response', this.onRequestResponse.bind(this), $scope);
+    appEvents.on('ds-request-error', this.onRequestError.bind(this), $scope);
+  }
+
+  onRequestResponse(data) {
+    console.log(data);
+    this.lastResponse = JSON.stringify(data, null, 2);
+    this.lastError = null;
+  }
+
+  toggleShowResponse() {
+    this.showResponse = !this.showResponse;
+  }
+
+  onRequestError(err) {
+    console.log(err);
+    this.lastError = JSON.stringify(err, null, 2);
   }
   }
 
 
   getOptions(includeBuiltin) {
   getOptions(includeBuiltin) {
@@ -79,6 +122,8 @@ export class MetricsDsSelectorCtrl {
     if (ds) {
     if (ds) {
       this.current = ds;
       this.current = ds;
       this.panelCtrl.setDatasource(ds);
       this.panelCtrl.setDatasource(ds);
+      this.lastError = null;
+      this.lastResponse = null;
     }
     }
   }
   }
 
 

public/app/features/panel/metrics_panel_ctrl.ts

@@ -256,7 +256,7 @@ class MetricsPanelCtrl extends PanelCtrl {
       result = {data: []};
       result = {data: []};
     }
     }
 
 
-    return this.events.emit('data-received', result.data);
+    this.events.emit('data-received', result.data);
   }
   }
 
 
   handleDataStream(stream) {
   handleDataStream(stream) {