feat: query troubleshooter

public/app/features/panel/all.js

@@ -6,4 +6,5 @@ define([
   './panel_editor_tab',
   './query_editor_row',
   './metrics_ds_selector',
+  './query_troubleshooter',
 ], function () {});

public/app/features/panel/metrics_ds_selector.ts

@@ -8,10 +8,6 @@ var module = angular.module('grafana.directives');
 
 var template = `
 
-<div class="gf-form-group" ng-if="ctrl.showResponse">
-  <response-viewer response="ctrl.responseData" />
-</div>
-
 <div class="gf-form-group">
   <div class="gf-form-inline">
     <div class="gf-form">
@@ -40,13 +36,6 @@ var template = `
       </div>
     </div>
 
-    <div class="gf-form gf-form--offset-1">
-      <button class="btn btn-inverse gf-form-btn" ng-click="ctrl.toggleShowResponse()" ng-show="ctrl.responseData">
-        <i class="fa fa-binoculars"></i>&nbsp;
-        Request & Response
-      </button>
-    </div>
-
   </div>
 </div>
 `;
@@ -81,24 +70,8 @@ export class MetricsDsSelectorCtrl {
 
     this.dsSegment = uiSegmentSrv.newSegment({value: this.current.name, 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) {
-    this.responseData = data;
-  }
-
-  toggleShowResponse() {
-    this.showResponse = !this.showResponse;
-  }
-
-  onRequestError(err) {
-    this.responseData = err;
-    this.responseData.isError = true;
-    this.showResponse = true;
-  }
 
   getOptions(includeBuiltin) {
     return Promise.resolve(this.datasources.filter(value => {

public/app/features/panel/query_troubleshooter.ts

@@ -0,0 +1,108 @@
+///<reference path="../../headers/common.d.ts" />
+
+import _ from 'lodash';
+import appEvents  from 'app/core/app_events';
+import {coreModule, JsonExplorer} from 'app/core/core';
+
+const template = `
+<collapse-box title="Query Troubleshooter" is-open="ctrl.showResponse" on-open="ctrl.onOpen()">
+  <collapse-box-actions>
+    <a class="pointer"><i class="fa fa-clipboard"></i> Copy to clipboard</a>
+  </collapse-box-actions>
+  <collapse-box-body>
+    <div class="query-troubleshooter-json"></div>
+  </collapse-box-body>
+</collapse-box>
+`;
+
+export class QueryTroubleshooterCtrl {
+  responseData: any;
+  showResponse: boolean;
+  panelCtrl: any;
+  renderJsonExplorer: (data) => void;
+
+  /** @ngInject **/
+  constructor($scope, private $timeout) {
+    appEvents.on('ds-request-response', this.onRequestResponse.bind(this), $scope);
+    appEvents.on('ds-request-error', this.onRequestError.bind(this), $scope);
+  }
+
+  onRequestResponse(data) {
+    this.responseData = data;
+  }
+
+  toggleShowResponse() {
+    this.showResponse = !this.showResponse;
+  }
+
+  onRequestError(err) {
+    this.responseData = err;
+    this.responseData.isError = true;
+    this.showResponse = true;
+  }
+
+  onOpen() {
+    if (!this.responseData) {
+      console.log('no data');
+      return;
+    }
+
+    var data = this.responseData;
+    if (data.headers) {
+      delete data.headers;
+    }
+
+    if (data.config) {
+      data.request = data.config;
+      delete data.config;
+      delete data.request.transformRequest;
+      delete data.request.transformResponse;
+      delete data.request.paramSerializer;
+      delete data.request.jsonpCallbackParam;
+      delete data.request.headers;
+      delete data.request.requestId;
+      delete data.request.inspect;
+      delete data.request.retry;
+      delete data.request.timeout;
+    }
+
+    if (data.data) {
+      data.response = data.data;
+
+      delete data.data;
+      delete data.status;
+      delete data.statusText;
+      delete data.$$config;
+    }
+
+    this.$timeout(_.partial(this.renderJsonExplorer, data), 10);
+  }
+}
+
+export function queryTroubleshooter() {
+  return {
+    restrict: 'E',
+    template: template,
+    controller: QueryTroubleshooterCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {
+      panelCtrl: "="
+    },
+    link: function(scope, elem, attrs, ctrl) {
+
+      ctrl.renderJsonExplorer = function(data) {
+        var jsonElem = elem.find('.query-troubleshooter-json');
+
+        const formatter =  new JsonExplorer(data, 2, {
+          theme: 'dark',
+        });
+
+        const html = formatter.render(true);
+        jsonElem.html(html);
+      };
+    }
+  };
+}
+
+coreModule.directive('queryTroubleshooter', queryTroubleshooter);