IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: metrics tab v3

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-08-30 16:39:00 +02:00
parent 54129b1340
commit 9b60a63778
6 changed files with 84 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/core/components/code_editor/code_editor.ts
View File

@@ -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();

5
public/app/features/panel/metrics_tab.ts
View File

@@ -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 **/

63
public/app/features/panel/partials/metrics_tab.html
View File

@@ -1,3 +1,45 @@
<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>

23
public/app/features/panel/query_troubleshooter.ts
View File

@@ -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) {

4
public/sass/components/_gf-form.scss
View File

@@ -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;

22
public/sass/components/_query_editor.scss
View File

@@ -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;
}