feat: query troubleshooter progress

public/app/core/components/collapse_box.ts

@@ -10,7 +10,7 @@ const template = `
       <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 class="collapse-box__header-actions" ng-transclude="actions" ng-if="ctrl.isOpen"></div>
   </div>
   <div class="collapse-box__body" ng-transclude="body" ng-if="ctrl.isOpen">
   </div>
@@ -19,18 +19,18 @@ const template = `
 
 export class CollapseBoxCtrl {
   isOpen: boolean;
-  onOpen: () => void;
+  stateChanged: () => void;
 
   /** @ngInject **/
-  constructor() {
+  constructor(private $timeout) {
     this.isOpen = false;
   }
 
   toggle() {
     this.isOpen = !this.isOpen;
-    if (this.isOpen) {
-      this.onOpen();
-    }
+    this.$timeout(() => {
+      this.stateChanged();
+    });
   }
 }
 
@@ -44,7 +44,7 @@ export function collapseBox() {
     scope: {
       "title": "@",
       "isOpen": "=?",
-      "onOpen": "&"
+      "stateChanged": "&"
     },
     transclude: {
       'actions': '?collapseBoxActions',

public/app/features/panel/query_troubleshooter.ts

@@ -5,7 +5,8 @@ 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 title="Query Troubleshooter" is-open="ctrl.isOpen" state-changed="ctrl.stateChanged()"
+              ng-class="{'collapse-box--error': ctrl.hasError}">
   <collapse-box-actions>
     <a class="pointer"><i class="fa fa-clipboard"></i> Copy to clipboard</a>
   </collapse-box-actions>
@@ -16,38 +17,47 @@ const template = `
 `;
 
 export class QueryTroubleshooterCtrl {
-  responseData: any;
+  isOpen: any;
   showResponse: boolean;
   panelCtrl: any;
   renderJsonExplorer: (data) => void;
+  onRequestErrorEventListener: any;
+  onRequestResponseEventListener: any;
+  hasError: boolean;
 
   /** @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);
+    this.onRequestErrorEventListener = this.onRequestError.bind(this);
+    this.onRequestResponseEventListener = this.onRequestResponse.bind(this);
+
+    appEvents.on('ds-request-error', this.onRequestErrorEventListener);
+    $scope.$on('$destroy',  this.removeEventsListeners.bind(this));
   }
 
-  onRequestResponse(data) {
-    this.responseData = data;
-  }
-
-  toggleShowResponse() {
-    this.showResponse = !this.showResponse;
+  removeEventsListeners() {
+    appEvents.off('ds-request-response', this.onRequestResponseEventListener);
+    appEvents.off('ds-request-error', this.onRequestErrorEventListener);
   }
 
   onRequestError(err) {
-    this.responseData = err;
-    this.responseData.isError = true;
-    this.showResponse = true;
+    this.isOpen = true;
+    this.hasError = true;
+    this.onRequestResponse(err);
   }
 
-  onOpen() {
-    if (!this.responseData) {
-      console.log('no data');
-      return;
+  stateChanged() {
+    console.log(this.isOpen);
+    if (this.isOpen) {
+      appEvents.on('ds-request-response', this.onRequestResponseEventListener);
+      this.panelCtrl.refresh();
+    } else {
+      this.hasError = false;
     }
+  }
+
+  onRequestResponse(data) {
+    data = _.cloneDeep(data);
 
-    var data = this.responseData;
     if (data.headers) {
       delete data.headers;
     }
@@ -75,7 +85,7 @@ export class QueryTroubleshooterCtrl {
       delete data.$$config;
     }
 
-    this.$timeout(_.partial(this.renderJsonExplorer, data), 10);
+    this.$timeout(_.partial(this.renderJsonExplorer, data));
   }
 }
 
@@ -94,7 +104,7 @@ export function queryTroubleshooter() {
       ctrl.renderJsonExplorer = function(data) {
         var jsonElem = elem.find('.query-troubleshooter-json');
 
-        const formatter =  new JsonExplorer(data, 2, {
+        const formatter =  new JsonExplorer(data, 3, {
           theme: 'dark',
         });
 

public/app/plugins/datasource/influxdb/datasource.ts

@@ -213,10 +213,12 @@ export default class InfluxDatasource {
     var currentUrl = self.urls.shift();
     self.urls.push(currentUrl);
 
-    var params: any = {
-      u: self.username,
-      p: self.password,
-    };
+    var params: any = {};
+
+    if (self.username) {
+      params.username =  self.username;
+      params.password =  self.password;
+    }
 
     if (self.database) {
       params.db = self.database;

public/sass/components/_collapse_box.scss

@@ -1,5 +1,12 @@
 .collapse-box {
   margin-bottom: $spacer;
+
+  &--error {
+    .collapse-box__header {
+      background-color: $red;
+      color: $white;
+    }
+  }
 }
 
 .collapse-box__header {
@@ -27,3 +34,4 @@
   border: $input-btn-border-width solid transparent;
   @include border-radius($label-border-radius-sm);
 }
+