From 9b60a6377881d7da826baef9daa628ec152dcb7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 30 Aug 2017 16:39:00 +0200 Subject: [PATCH] ux: metrics tab v3 --- .../components/code_editor/code_editor.ts | 1 - public/app/features/panel/metrics_tab.ts | 5 ++ .../features/panel/partials/metrics_tab.html | 63 ++++++++++++------- .../features/panel/query_troubleshooter.ts | 23 ++++--- public/sass/components/_gf-form.scss | 4 -- public/sass/components/_query_editor.scss | 22 +++++++ 6 files changed, 84 insertions(+), 34 deletions(-) diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts index d2d32d1f46e..151ebffab5d 100644 --- a/public/app/core/components/code_editor/code_editor.ts +++ b/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(); diff --git a/public/app/features/panel/metrics_tab.ts b/public/app/features/panel/metrics_tab.ts index e1825173172..82fa3be99e7 100644 --- a/public/app/features/panel/metrics_tab.ts +++ b/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 **/ diff --git a/public/app/features/panel/partials/metrics_tab.html b/public/app/features/panel/partials/metrics_tab.html index bc0bcf7c6b2..8ceee90e7ff 100644 --- a/public/app/features/panel/partials/metrics_tab.html +++ b/public/app/features/panel/partials/metrics_tab.html @@ -1,3 +1,45 @@ +
+
+
+ + + +
+
+ + + + A lower limit for the auto group by time interval. Recommended to be set to write frequency, + for example 1m if your data is written every minute. Access auto interval via variable $__interval for time range + string and $__interval_ms for numeric variable that can be used in math expressions. + +
+
+ +
+
+ +
+
+ +
+
+ +
+
@@ -27,24 +69,3 @@
- - - -
-
-
- - - -
-
-
- - - - - - diff --git a/public/app/features/panel/query_troubleshooter.ts b/public/app/features/panel/query_troubleshooter.ts index 84ae2045dc7..94357e53e5d 100644 --- a/public/app/features/panel/query_troubleshooter.ts +++ b/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 = ` - - +
+
Expand All @@ -15,12 +14,12 @@ const template = ` Collapse All Copy to Clipboard - - +
+
- - +
+
`; 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) { diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index e70b88c96cd..a330cc779a0 100644 --- a/public/sass/components/_gf-form.scss +++ b/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; diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss index f2d29572e37..737abb593de 100644 --- a/public/sass/components/_query_editor.scss +++ b/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; +}