ux: metrics tab v3

public/app/core/components/code_editor/code_editor.ts

@@ -159,7 +159,6 @@ function link(scope, elem, attrs) {
         enableSnippets: true
       });
 
-      console.log('getting completer', lang);
       if (scope.getCompleter()) {
         // make copy of array as ace seems to share completers array between instances
         codeEditor.completers = codeEditor.completers.slice();

public/app/features/panel/metrics_tab.ts

@@ -13,6 +13,7 @@ export class MetricsTabCtrl {
   dashboard: DashboardModel;
   panelDsValue: any;
   addQueryDropdown: any;
+  queryTroubleshooterOpen: boolean;
 
   /** @ngInject */
   constructor($scope, private uiSegmentSrv, private datasourceSrv) {
@@ -65,6 +66,10 @@ export class MetricsTabCtrl {
   addQuery() {
     this.panelCtrl.addQuery({isNew: true});
   }
+
+  toggleQueryTroubleshooter() {
+    this.queryTroubleshooterOpen = !this.queryTroubleshooterOpen;
+  }
 }
 
 /** @ngInject **/

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

+<div class="gf-form-group">
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <label class="gf-form-label">
+				<i class="icon-gf icon-gf-datasources"></i>
+				Data Source
+			</label>
+      <gf-form-dropdown model="ctrl.panelDsValue" css-class="gf-size-auto"
+                        lookup-text="true"
+                        get-options="ctrl.getOptions(true)"
+                        on-change="ctrl.datasourceChanged($option)">
+      </gf-form-dropdown>
+		</div>
+		<div class="gf-form">
+			<label class="gf-form-label">Min auto interval</label>
+			<input type="text" class="gf-form-input width-7" placeholder="1s" />
+			<info-popover mode="right-absolute">
+				A lower limit for the auto group by time interval. Recommended to be set to write frequency,
+				for example <code>1m</code> if your data is written every minute. Access auto interval via variable <code>$__interval</code> for time range
+				string and <code>$__interval_ms</code> for numeric variable that can be used in math expressions.
+			</info-popover>
+    </div>
+		<div class="gf-form gf-form--grow">
+			<label class="gf-form-label gf-form-label--grow"></label>
+		</div>
+		<div class="gf-form">
+			<label class="gf-form-label">
+				<i class="fa fa-question-circle"></i>
+				<a href="http://google.com">Help &amp; Docs</a>
+			</label>
+		</div>
+		<div class="gf-form">
+			<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.toggleQueryTroubleshooter()">
+				<i class="fa fa-chevron-right" ng-hide="ctrl.queryTroubleshooterOpen"></i>
+				<i class="fa fa-chevron-down" ng-show="ctrl.queryTroubleshooterOpen"></i>
+				Query Inspector
+			</button>
+    </div>
+  </div>
+	<query-troubleshooter panel-ctrl="ctrl.panelCtrl" is-open="ctrl.queryTroubleshooterOpen"></query-troubleshooter>
+</div>
+
 <div class="query-editor-rows gf-form-group">
   <div ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}">
     <rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
@@ -27,24 +69,3 @@
     </div>
   </div>
 </div>
-
-<!-- <query&#45;troubleshooter panel&#45;ctrl="ctrl.panelCtrl"></query&#45;troubleshooter> -->
-
-<div class="gf-form-group">
-  <div class="gf-form-inline">
-    <div class="gf-form">
-      <label class="gf-form-label">Panel Data Source</label>
-      <gf-form-dropdown model="ctrl.panelDsValue"
-                        lookup-text="true"
-                        get-options="ctrl.getOptions(true)"
-                        on-change="ctrl.datasourceChanged($option)">
-      </gf-form-dropdown>
-    </div>
-  </div>
-</div>
-
-<rebuild-on-change property="ctrl.panel.datasource" show-null="true">
-  <plugin-component type="query-options-ctrl">
-  </plugin-component>
-</rebuild-on-change>
-</div>

public/app/features/panel/query_troubleshooter.ts

@@ -5,9 +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.isOpen" state-changed="ctrl.stateChanged()"
-              ng-class="{'collapse-box--error': ctrl.hasError}">
-  <collapse-box-actions>
+<div class="query-troubleshooter" ng-if="ctrl.isOpen">
+  <div class="query-troubleshooter__header">
     <a class="pointer" ng-click="ctrl.toggleExpand()" ng-hide="ctrl.allNodesExpanded">
       <i class="fa fa-plus-square-o"></i> Expand All
     </a>
@@ -15,12 +14,12 @@ const template = `
       <i class="fa fa-minus-square-o"></i> Collapse All
     </a>
     <a class="pointer" clipboard-button="ctrl.getClipboardText()"><i class="fa fa-clipboard"></i> Copy to Clipboard</a>
-  </collapse-box-actions>
-  <collapse-box-body>
+  </div>
+  <div class="query-troubleshooter__body">
     <i class="fa fa-spinner fa-spin" ng-show="ctrl.isLoading"></i>
     <div class="query-troubleshooter-json"></div>
-  </collapse-box-body>
-</collapse-box>
+  </div>
+</div>
 `;
 
 export class QueryTroubleshooterCtrl {
@@ -42,7 +41,9 @@ export class QueryTroubleshooterCtrl {
 
     appEvents.on('ds-request-response', this.onRequestResponseEventListener);
     appEvents.on('ds-request-error', this.onRequestErrorEventListener);
+
     $scope.$on('$destroy',  this.removeEventsListeners.bind(this));
+    $scope.$watch('ctrl.isOpen',  this.stateChanged.bind(this));
   }
 
   removeEventsListeners() {
@@ -51,6 +52,11 @@ export class QueryTroubleshooterCtrl {
   }
 
   onRequestError(err) {
+    // ignore if closed
+    if (!this.isOpen) {
+      return;
+    }
+
     this.isOpen = true;
     this.hasError = true;
     this.onRequestResponse(err);
@@ -133,7 +139,8 @@ export function queryTroubleshooter() {
     bindToController: true,
     controllerAs: 'ctrl',
     scope: {
-      panelCtrl: "="
+      panelCtrl: "=",
+      isOpen: "=",
     },
     link: function(scope, elem, attrs, ctrl) {
 

public/sass/components/_gf-form.scss

@@ -54,7 +54,6 @@ $gf-form-margin: 0.25rem;
   background-color: $input-label-bg;
   display: block;
   font-size: $font-size-sm;
-  margin-right: $gf-form-margin;
 
   border: $input-btn-border-width solid transparent;
   @include border-radius($label-border-radius-sm);
@@ -103,7 +102,6 @@ $gf-form-margin: 0.25rem;
   padding: $input-padding-y $input-padding-x;
   margin-right: $gf-form-margin;
   font-size: $font-size-base;
-  margin-right: $gf-form-margin;
   line-height: $input-line-height;
   color: $input-color;
   background-color: $input-bg;
@@ -112,7 +110,6 @@ $gf-form-margin: 0.25rem;
   border: $input-btn-border-width solid $input-border-color;
   @include border-radius($input-border-radius-sm);
   @include box-shadow($input-box-shadow);
-  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -235,7 +232,6 @@ $gf-form-margin: 0.25rem;
   font-size: $font-size-sm;
   box-shadow: none;
   border: $input-btn-border-width solid transparent;
-  @include border-radius($label-border-radius-sm);
 
   flex-shrink: 0;
   flex-grow: 0;

public/sass/components/_query_editor.scss

@@ -146,3 +146,25 @@ input[type="text"].tight-form-func-param {
     margin-left: 10px;
   }
 }
+
+.query-troubleshooter {
+  font-size: $font-size-sm;
+  margin: $gf-form-margin;
+  border: 1px solid $btn-secondary-bg;
+  min-height: 100px;
+  border-radius: 3px;
+}
+
+.query-troubleshooter__header {
+  float: right;
+  font-size: $font-size-sm;
+  text-align: right;
+  padding: $input-padding-y $input-padding-x;
+  a {
+    margin-left: $spacer;
+  }
+}
+
+.query-troubleshooter__body {
+  padding: $spacer 0;
+}