Skip to content

N
nexpie-grafana-theme
Commit 9b60a637 by Torkel Ödegaard
Options

ux: metrics tab v3

parent 54129b13
Showing with 84 additions and 34 deletions
public/app/core/components/code_editor/code_editor.ts
...@@ -159,7 +159,6 @@ function link(scope, elem, attrs) { ...@@ -159,7 +159,6 @@ function link(scope, elem, attrs) {
enableSnippets: true enableSnippets: true
}); });
console.log('getting completer', lang);
if (scope.getCompleter()) { if (scope.getCompleter()) {
// make copy of array as ace seems to share completers array between instances // make copy of array as ace seems to share completers array between instances
codeEditor.completers = codeEditor.completers.slice(); codeEditor.completers = codeEditor.completers.slice();
......
public/app/features/panel/metrics_tab.ts
...@@ -13,6 +13,7 @@ export class MetricsTabCtrl { ...@@ -13,6 +13,7 @@ export class MetricsTabCtrl {
dashboard: DashboardModel; dashboard: DashboardModel;
panelDsValue: any; panelDsValue: any;
addQueryDropdown: any; addQueryDropdown: any;
queryTroubleshooterOpen: boolean;
/** @ngInject */ /** @ngInject */
constructor($scope, private uiSegmentSrv, private datasourceSrv) { constructor($scope, private uiSegmentSrv, private datasourceSrv) {
...@@ -65,6 +66,10 @@ export class MetricsTabCtrl { ...@@ -65,6 +66,10 @@ export class MetricsTabCtrl {
addQuery() { addQuery() {
this.panelCtrl.addQuery({isNew: true}); this.panelCtrl.addQuery({isNew: true});
} }
toggleQueryTroubleshooter() {
this.queryTroubleshooterOpen = !this.queryTroubleshooterOpen;
}
} }
/** @ngInject **/ /** @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 class="query-editor-rows gf-form-group">
<div ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}"> <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"> <rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
...@@ -27,24 +69,3 @@ ...@@ -27,24 +69,3 @@
</div> </div>
</div> </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'; ...@@ -5,9 +5,8 @@ import appEvents from 'app/core/app_events';
import {coreModule, JsonExplorer} from 'app/core/core'; import {coreModule, JsonExplorer} from 'app/core/core';
const template = ` const template = `
<collapse-box title="Query Troubleshooter" is-open="ctrl.isOpen" state-changed="ctrl.stateChanged()" <div class="query-troubleshooter" ng-if="ctrl.isOpen">
ng-class="{'collapse-box--error': ctrl.hasError}"> <div class="query-troubleshooter__header">
<collapse-box-actions>
<a class="pointer" ng-click="ctrl.toggleExpand()" ng-hide="ctrl.allNodesExpanded"> <a class="pointer" ng-click="ctrl.toggleExpand()" ng-hide="ctrl.allNodesExpanded">
<i class="fa fa-plus-square-o"></i> Expand All <i class="fa fa-plus-square-o"></i> Expand All
</a> </a>
...@@ -15,12 +14,12 @@ const template = ` ...@@ -15,12 +14,12 @@ const template = `
<i class="fa fa-minus-square-o"></i> Collapse All <i class="fa fa-minus-square-o"></i> Collapse All
</a> </a>
<a class="pointer" clipboard-button="ctrl.getClipboardText()"><i class="fa fa-clipboard"></i> Copy to Clipboard</a> <a class="pointer" clipboard-button="ctrl.getClipboardText()"><i class="fa fa-clipboard"></i> Copy to Clipboard</a>
</collapse-box-actions> </div>
<collapse-box-body> <div class="query-troubleshooter__body">
<i class="fa fa-spinner fa-spin" ng-show="ctrl.isLoading"></i> <i class="fa fa-spinner fa-spin" ng-show="ctrl.isLoading"></i>
<div class="query-troubleshooter-json"></div> <div class="query-troubleshooter-json"></div>
</collapse-box-body> </div>
</collapse-box> </div>
`; `;
export class QueryTroubleshooterCtrl { export class QueryTroubleshooterCtrl {
...@@ -42,7 +41,9 @@ export class QueryTroubleshooterCtrl { ...@@ -42,7 +41,9 @@ export class QueryTroubleshooterCtrl {
appEvents.on('ds-request-response', this.onRequestResponseEventListener); 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));
$scope.$watch('ctrl.isOpen', this.stateChanged.bind(this));
} }
removeEventsListeners() { removeEventsListeners() {
...@@ -51,6 +52,11 @@ export class QueryTroubleshooterCtrl { ...@@ -51,6 +52,11 @@ export class QueryTroubleshooterCtrl {
} }
onRequestError(err) { onRequestError(err) {
// ignore if closed
if (!this.isOpen) {
return;
}
this.isOpen = true; this.isOpen = true;
this.hasError = true; this.hasError = true;
this.onRequestResponse(err); this.onRequestResponse(err);
...@@ -133,7 +139,8 @@ export function queryTroubleshooter() { ...@@ -133,7 +139,8 @@ export function queryTroubleshooter() {
bindToController: true, bindToController: true,
controllerAs: 'ctrl', controllerAs: 'ctrl',
scope: { scope: {
panelCtrl: "=" panelCtrl: "=",
isOpen: "=",
}, },
link: function(scope, elem, attrs, ctrl) { link: function(scope, elem, attrs, ctrl) {
......
public/sass/components/_gf-form.scss
...@@ -54,7 +54,6 @@ $gf-form-margin: 0.25rem; ...@@ -54,7 +54,6 @@ $gf-form-margin: 0.25rem;
background-color: $input-label-bg; background-color: $input-label-bg;
display: block; display: block;
font-size: $font-size-sm; font-size: $font-size-sm;
margin-right: $gf-form-margin;
border: $input-btn-border-width solid transparent; border: $input-btn-border-width solid transparent;
@include border-radius($label-border-radius-sm); @include border-radius($label-border-radius-sm);
...@@ -103,7 +102,6 @@ $gf-form-margin: 0.25rem; ...@@ -103,7 +102,6 @@ $gf-form-margin: 0.25rem;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
font-size: $font-size-base; font-size: $font-size-base;
margin-right: $gf-form-margin;
line-height: $input-line-height; line-height: $input-line-height;
color: $input-color; color: $input-color;
background-color: $input-bg; background-color: $input-bg;
...@@ -112,7 +110,6 @@ $gf-form-margin: 0.25rem; ...@@ -112,7 +110,6 @@ $gf-form-margin: 0.25rem;
border: $input-btn-border-width solid $input-border-color; border: $input-btn-border-width solid $input-border-color;
@include border-radius($input-border-radius-sm); @include border-radius($input-border-radius-sm);
@include box-shadow($input-box-shadow); @include box-shadow($input-box-shadow);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -235,7 +232,6 @@ $gf-form-margin: 0.25rem; ...@@ -235,7 +232,6 @@ $gf-form-margin: 0.25rem;
font-size: $font-size-sm; font-size: $font-size-sm;
box-shadow: none; box-shadow: none;
border: $input-btn-border-width solid transparent; border: $input-btn-border-width solid transparent;
@include border-radius($label-border-radius-sm);
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
......
public/sass/components/_query_editor.scss
...@@ -146,3 +146,25 @@ input[type="text"].tight-form-func-param { ...@@ -146,3 +146,25 @@ input[type="text"].tight-form-func-param {
margin-left: 10px; 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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment