feat: metrics tab, minor change

public/app/core/services/backend_srv.ts

@@ -170,7 +170,7 @@ export class BackendSrv {
         });
         });
       }
       }
 
 
-      //populate error obj on Internal Error
+      // populate error obj on Internal Error
       if (_.isString(err.data) && err.status === 500) {
       if (_.isString(err.data) && err.status === 500) {
         err.data = {
         err.data = {
           error: err.statusText,
           error: err.statusText,

public/app/features/panel/query_troubleshooter.ts

@@ -40,6 +40,7 @@ export class QueryTroubleshooterCtrl {
     this.onRequestErrorEventListener = this.onRequestError.bind(this);
     this.onRequestErrorEventListener = this.onRequestError.bind(this);
     this.onRequestResponseEventListener = this.onRequestResponse.bind(this);
     this.onRequestResponseEventListener = this.onRequestResponse.bind(this);
 
 
+    appEvents.on('ds-request-response', this.onRequestResponseEventListener);
     appEvents.on('ds-request-error', this.onRequestErrorEventListener);
     appEvents.on('ds-request-error', this.onRequestErrorEventListener);
     $scope.$on('$destroy',  this.removeEventsListeners.bind(this));
     $scope.$on('$destroy',  this.removeEventsListeners.bind(this));
   }
   }
@@ -57,7 +58,6 @@ export class QueryTroubleshooterCtrl {
 
 
   stateChanged() {
   stateChanged() {
     if (this.isOpen) {
     if (this.isOpen) {
-      appEvents.on('ds-request-response', this.onRequestResponseEventListener);
       this.panelCtrl.refresh();
       this.panelCtrl.refresh();
       this.isLoading = true;
       this.isLoading = true;
     }
     }
@@ -70,6 +70,11 @@ export class QueryTroubleshooterCtrl {
   }
   }
 
 
   onRequestResponse(data) {
   onRequestResponse(data) {
+    // ignore if closed
+    if (!this.isOpen) {
+      return;
+    }
+
     this.isLoading = false;
     this.isLoading = false;
     data = _.cloneDeep(data);
     data = _.cloneDeep(data);
 
 
@@ -135,7 +140,9 @@ export function queryTroubleshooter() {
       ctrl.renderJsonExplorer = function(data) {
       ctrl.renderJsonExplorer = function(data) {
         var jsonElem = elem.find('.query-troubleshooter-json');
         var jsonElem = elem.find('.query-troubleshooter-json');
 
 
-        ctrl.jsonExplorer =  new JsonExplorer(data, 3, { });
+        ctrl.jsonExplorer =  new JsonExplorer(data, 3, {
+          animateOpen: true,
+        });
 
 
         const html = ctrl.jsonExplorer.render(true);
         const html = ctrl.jsonExplorer.render(true);
         jsonElem.html(html);
         jsonElem.html(html);

public/sass/_variables.dark.scss

@@ -286,9 +286,9 @@ $collapse-box-body-error-border: $red;
 
 
 // json-explorer
 // json-explorer
 $json-explorer-default-color: white;
 $json-explorer-default-color: white;
-$json-explorer-string-color: #31F031;
-$json-explorer-number-color: #66C2FF;
-$json-explorer-boolean-color: #EC4242;
+$json-explorer-string-color: #23d662;
+$json-explorer-number-color: $variable;
+$json-explorer-boolean-color: $variable;
 $json-explorer-null-color: #EEC97D;
 $json-explorer-null-color: #EEC97D;
 $json-explorer-undefined-color: rgb(239, 143, 190);
 $json-explorer-undefined-color: rgb(239, 143, 190);
 $json-explorer-function-color: #FD48CB;
 $json-explorer-function-color: #FD48CB;