feat: metrics tab

public/app/features/panel/partials/metrics_tab.html

@@ -27,7 +27,7 @@
 
 <query-troubleshooter panel-ctrl="ctrl.panelCtrl"></query-troubleshooter>
 
-<collapse-box title="Data Source Options">
+<collapse-box title="Data Source: {{ctrl.dsSegment.value}}">
 	<collapse-box-body>
 
 		<div class="gf-form-group">

public/app/features/panel/query_troubleshooter.ts

@@ -17,6 +17,7 @@ const template = `
     <a class="pointer" clipboard-button="ctrl.getClipboardText()"><i class="fa fa-clipboard"></i> Copy to Clipboard</a>
   </collapse-box-actions>
   <collapse-box-body>
+    <i class="fa fa-spinner fa-spin" ng-show="ctrl.isLoading"></i>
     <div class="query-troubleshooter-json"></div>
   </collapse-box-body>
 </collapse-box>
@@ -24,6 +25,7 @@ const template = `
 
 export class QueryTroubleshooterCtrl {
   isOpen: any;
+  isLoading: boolean;
   showResponse: boolean;
   panelCtrl: any;
   renderJsonExplorer: (data) => void;
@@ -57,8 +59,7 @@ export class QueryTroubleshooterCtrl {
     if (this.isOpen) {
       appEvents.on('ds-request-response', this.onRequestResponseEventListener);
       this.panelCtrl.refresh();
-    } else {
-      this.hasError = false;
+      this.isLoading = true;
     }
   }
 
@@ -69,6 +70,7 @@ export class QueryTroubleshooterCtrl {
   }
 
   onRequestResponse(data) {
+    this.isLoading = false;
     data = _.cloneDeep(data);
 
     if (data.headers) {
@@ -92,6 +94,15 @@ export class QueryTroubleshooterCtrl {
     if (data.data) {
       data.response = data.data;
 
+      if (data.status === 200) {
+        // if we are in error state, assume we automatically opened
+        // and auto close it again
+        if (this.hasError) {
+          this.hasError = false;
+          this.isOpen = false;
+        }
+      }
+
       delete data.data;
       delete data.status;
       delete data.statusText;

public/sass/components/_collapse_box.scss

 .collapse-box {
   margin-bottom: $spacer;
+
+  &--error {
+    .collapse-box__header {
+      border-color: $collapse-box-body-error-border;
+    }
+    .collapse-box__body {
+      border-color: $collapse-box-body-error-border;
+    }
+  }
+
 }
 
 .collapse-box__header {
@@ -12,10 +22,6 @@
   margin-right: $gf-form-margin;
   border: $input-btn-border-width solid $collapse-box-body-border;
   @include border-radius($label-border-radius-sm);
-
-  &--error {
-    border-color: $collapse-box-body-error-border;
-  }
 }
 
 .collapse-box__header-title {
@@ -29,10 +35,6 @@
   border: $input-btn-border-width solid $collapse-box-body-border;
   border-top: none;
   @include border-radius($label-border-radius-sm);
-
-  &--error {
-    border-color: $collapse-box-body-error-border;
-  }
 }
 
 .collapse-box__header-actions {