feat: query troubleshooter

public/app/core/components/collapse_box.ts

@@ -0,0 +1,58 @@
+///<reference path="../../headers/common.d.ts" />
+
+import coreModule from 'app/core/core_module';
+
+const template = `
+<div class="collapse-box">
+  <div class="collapse-box__header">
+    <a class="collapse-box__header-title pointer" ng-click="ctrl.toggle()">
+      <span class="fa fa-fw fa-caret-right" ng-hide="ctrl.isOpen"></span>
+      <span class="fa fa-fw fa-caret-down" ng-hide="!ctrl.isOpen"></span>
+      {{ctrl.title}}
+    </a>
+    <div class="collapse-box__header-actions" ng-transclude="actions"></div>
+  </div>
+  <div class="collapse-box__body" ng-transclude="body" ng-if="ctrl.isOpen">
+  </div>
+</div>
+`;
+
+export class CollapseBoxCtrl {
+  isOpen: boolean;
+  onOpen: () => void;
+
+  /** @ngInject **/
+  constructor() {
+    this.isOpen = false;
+  }
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+    if (this.isOpen) {
+      this.onOpen();
+    }
+  }
+}
+
+export function collapseBox() {
+  return {
+    restrict: 'E',
+    template: template,
+    controller: CollapseBoxCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {
+      "title": "@",
+      "isOpen": "=?",
+      "onOpen": "&"
+    },
+    transclude: {
+      'actions': '?collapseBoxActions',
+      'body': 'collapseBoxBody',
+    },
+    link: function(scope, elem, attrs) {
+    }
+  };
+}
+
+coreModule.directive('collapseBox', collapseBox);

public/app/core/components/json_explorer/json_explorer.ts

@@ -45,7 +45,7 @@ const _defaultConfig: JsonExplorerConfig = {
  * JsonExplorer allows you to render JSON objects in HTML with a
  * **collapsible** navigation.
 */
-export default class JsonExplorer {
+export class JsonExplorer {
 
   // Hold the open state after the toggler is used
   private _isOpen: boolean = null;
@@ -273,7 +273,7 @@ export default class JsonExplorer {
    *
    * @returns {HTMLDivElement}
   */
-  render(): HTMLDivElement {
+  render(skipRoot = false): HTMLDivElement {
 
     // construct the root element and assign it to this.element
     this.element = createElement('div', 'row');
@@ -371,7 +371,9 @@ export default class JsonExplorer {
     }
 
     // append toggler and children elements to root element
-    this.element.appendChild(togglerLink);
+    if (!skipRoot) {
+      this.element.appendChild(togglerLink);
+    }
     this.element.appendChild(children);
 
     // if formatter is set to be open call appendChildren

public/app/core/components/response_viewer.ts

@@ -1,63 +0,0 @@
-///<reference path="../../headers/common.d.ts" />
-
-import coreModule from 'app/core/core_module';
-import JsonExplorer from './json_explorer/json_explorer';
-
-
-const template = `
-<div class="response-viewer">
-  <div class="response-viewer-json"></div>
-</div>
-`;
-
-export function responseViewer() {
-  return {
-    restrict: 'E',
-    template: template,
-    scope: {response: "="},
-    link: function(scope, elem) {
-      var jsonElem = elem.find('.response-viewer-json');
-
-      scope.$watch("response", newVal => {
-        if (!newVal) {
-          elem.empty();
-          return;
-        }
-
-        if (scope.response.headers) {
-          delete scope.response.headers;
-        }
-
-        if (scope.response.data) {
-          scope.response.response = scope.response.data;
-          delete scope.response.data;
-        }
-
-        if (scope.response.config) {
-          scope.response.request = scope.response.config;
-          delete scope.response.config;
-          delete scope.response.request.transformRequest;
-          delete scope.response.request.transformResponse;
-          delete scope.response.request.paramSerializer;
-          delete scope.response.request.jsonpCallbackParam;
-          delete scope.response.request.headers;
-          delete scope.response.request.requestId;
-          delete scope.response.request.inspect;
-          delete scope.response.request.retry;
-          delete scope.response.request.timeout;
-        }
-
-
-        const formatter =  new JsonExplorer(scope.response, 2, {
-          theme: 'dark',
-        });
-
-        const html = formatter.render();
-        jsonElem.html(html);
-      });
-
-    }
-  };
-}
-
-coreModule.directive('responseViewer', responseViewer);

public/app/core/core.ts

@@ -45,7 +45,8 @@ import {assignModelProperties} from './utils/model_utils';
 import {contextSrv} from './services/context_srv';
 import {KeybindingSrv} from './services/keybindingSrv';
 import {helpModal} from './components/help/help';
-import {responseViewer} from './components/response_viewer';
+import {collapseBox} from './components/collapse_box';
+import {JsonExplorer} from './components/json_explorer/json_explorer';
 
 export {
   arrayJoin,
@@ -69,5 +70,6 @@ export {
   contextSrv,
   KeybindingSrv,
   helpModal,
-  responseViewer,
+  collapseBox,
+  JsonExplorer,
 };