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: progress on metrics tab changes

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-08-31 16:38:49 +02:00
parent 84d4958a3c
commit eb0f5cc900
9 changed files with 112 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,6 +20,7 @@ import './jquery_extended';
import './partials';
import './components/jsontree/jsontree';
import './components/code_editor/code_editor';
import './utils/outline';
import {grafanaAppDirective} from './components/grafana_app';
import {sideMenuDirective} from './components/sidemenu/sidemenu';

32
public/app/core/utils/outline.js Normal file
View File

@@ -0,0 +1,32 @@
// outline.js
// based on http://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/
(function(d) {
"use strict";
var style_element = d.createElement('STYLE'),
dom_events = 'addEventListener' in d,
add_event_listener = function(type, callback) {
// Basic cross-browser event handling
if(dom_events){
d.addEventListener(type, callback);
} else {
d.attachEvent('on' + type, callback);
}
},
set_css = function(css_text) {
// Handle setting of <style> element contents in IE8
!!style_element.styleSheet ? style_element.styleSheet.cssText = css_text : style_element.innerHTML = css_text;
};
d.getElementsByTagName('HEAD')[0].appendChild(style_element);
// Using mousedown instead of mouseover, so that previously focused elements don't lose focus ring on mouse move
add_event_listener('mousedown', function() {
set_css(':focus{outline:0 !important}::-moz-focus-inner{border:0;}');
});
add_event_listener('keydown', function() {
set_css('');
});
})(document);

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

@@ -21,7 +21,7 @@ export class MetricsTabCtrl {
hasMinInterval: boolean;
hasCacheTimeout: boolean;
hasMaxDataPoints: boolean;
animateStart: boolean;
optionsOpen: boolean;
/** @ngInject */
constructor($scope, private $sce, private datasourceSrv, private backendSrv, private $timeout) {
@@ -85,19 +85,25 @@ export class MetricsTabCtrl {
}
toggleHelp() {
this.animateStart = false;
this.optionsOpen = false;
this.queryTroubleshooterOpen = false;
this.helpOpen = !this.helpOpen;
this.backendSrv.get(`/api/plugins/${this.current.meta.id}/markdown/help`).then(res => {
var md = new Remarkable();
this.helpHtml = this.$sce.trustAsHtml(md.render(res));
this.$timeout(() => {
this.animateStart = true;
}, 1);
});
}
toggleOptions() {
this.helpOpen = false;
this.queryTroubleshooterOpen = false;
this.optionsOpen = !this.optionsOpen;
}
toggleQueryTroubleshooter() {
this.helpOpen = false;
this.optionsOpen = false;
this.queryTroubleshooterOpen = !this.queryTroubleshooterOpen;
}
}

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

@@ -11,82 +11,65 @@
on-change="ctrl.datasourceChanged($option)">
</gf-form-dropdown>
</div>
<div class="gf-form" ng-if="ctrl.hasMinInterval">
<label class="gf-form-label">
Min auto interval
</label>
<input type="text"
class="gf-form-input width-6"
placeholder="1s"
ng-model="ctrl.panel.interval"
spellcheck="false"
ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
/>
<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" ng-if="ctrl.hasCacheTimeout">
<label class="gf-form-label">
Cache timeout
</label>
<input type="text"
class="gf-form-input width-6"
placeholder="60"
ng-model="ctrl.panel.cacheTimeout"
ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
spellcheck="false"
/>
<info-popover mode="right-absolute">
If your time series store has a query cache this option can override the default
cache timeout. Specify a numeric value in seconds.
</info-popover>
</div>
<div class="gf-form" ng-if="ctrl.hasMaxDataPoints">
<label class="gf-form-label">
Max data points
</label>
<input type="text"
class="gf-form-input width-6"
placeholder="auto"
ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
ng-model="ctrl.panel.maxDataPoints"
spellcheck="false" />
<info-popover mode="right-absolute">
The maximum data points the query should return. For graphs this
is automatically set to one data point per pixel.
</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" ng-if="ctrl.hasHelp">
<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.toggleHelp()">
<i class="fa fa-chevron-right" ng-hide="ctrl.helpOpen"></i>
<i class="fa fa-chevron-down" ng-show="ctrl.helpOpen"></i>
Help
<a class="gf-form-label" ng-click="ctrl.toggleOptions()">
<i class="fa fa-fw fa-caret-right" ng-hide="ctrl.optionsOpen"></i><i class="fa fa-fw fa-caret-down" ng-show="ctrl.optionsOpen"></i>Options
</a>
</div>
<div class="gf-form" ng-if="ctrl.hasHelp">
<button class="gf-form-label" ng-click="ctrl.toggleHelp()">
<i class="fa fa-fw fa-caret-right" ng-hide="ctrl.helpOpen"></i><i class="fa fa-fw fa-caret-down" ng-show="ctrl.helpOpen"></i>Help
</button>
</div>
<div class="gf-form">
<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.toggleQueryTroubleshooter()" bs-tooltip="'Display data query request & response'">
<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 class="gf-form-label" ng-click="ctrl.toggleQueryTroubleshooter()" bs-tooltip="'Display query request & response'">
<i class="fa fa-fw fa-caret-right" ng-hide="ctrl.queryTroubleshooterOpen"></i><i class="fa fa-fw fa-caret-down" ng-show="ctrl.queryTroubleshooterOpen"></i>Query Inspector
</button>
</div>
</div>
<div class="grafana-info-box grafana-info-box--animate" ng-if="ctrl.helpOpen" ng-class="{'grafana-info-box--animate-open': ctrl.animateStart}">
<div class="markdown-html" ng-bind-html="ctrl.helpHtml"></div>
<a class="grafana-info-box__close" ng-click="ctrl.toggleHelp()">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<div>
<div class="" ng-if="ctrl.optionsOpen">
<div class="gf-form gf-form--flex-end" ng-if="ctrl.hasMinInterval">
<label class="gf-form-label">Min auto interval</label>
<input type="text" class="gf-form-input width-6" placeholder="1s" ng-model="ctrl.panel.interval" spellcheck="false" ng-model-onblur ng-change="ctrl.panelCtrl.refresh()" />
<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--flex-end" ng-if="ctrl.hasCacheTimeout">
<label class="gf-form-label width-9">Cache timeout</label>
<input type="text" class="gf-form-input width-6" placeholder="60" ng-model="ctrl.panel.cacheTimeout" ng-model-onblur ng-change="ctrl.panelCtrl.refresh()" spellcheck="false" />
<info-popover mode="right-absolute">
If your time series store has a query cache this option can override the default
cache timeout. Specify a numeric value in seconds.
</info-popover>
</div>
<div class="gf-form gf-form--flex-end" ng-if="ctrl.hasMaxDataPoints">
<label class="gf-form-label width-9">Max data points</label>
<input type="text" class="gf-form-input width-6" placeholder="auto" ng-model-onblur ng-change="ctrl.panelCtrl.refresh()" ng-model="ctrl.panel.maxDataPoints" spellcheck="false" />
<info-popover mode="right-absolute">
The maximum data points the query should return. For graphs this
is automatically set to one data point per pixel.
</info-popover>
</div>
</div>
<query-troubleshooter panel-ctrl="ctrl.panelCtrl" is-open="ctrl.queryTroubleshooterOpen"></query-troubleshooter>
<div class="grafana-info-box" ng-if="ctrl.helpOpen">
<div class="markdown-html" ng-bind-html="ctrl.helpHtml"></div>
<a class="grafana-info-box__close" ng-click="ctrl.toggleHelp()">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<query-troubleshooter panel-ctrl="ctrl.panelCtrl" is-open="ctrl.queryTroubleshooterOpen"></query-troubleshooter>
</div>
</div>
<div class="query-editor-rows gf-form-group">
@@ -110,9 +93,7 @@
</button>
<div class="dropdown" ng-if="ctrl.current.meta.mixed">
<gf-form-dropdown model="ctrl.addQueryDropdown"
get-options="ctrl.getOptions(false)"
on-change="ctrl.addMixedQuery($option)">
<gf-form-dropdown model="ctrl.addQueryDropdown" get-options="ctrl.getOptions(false)" on-change="ctrl.addMixedQuery($option)">
</gf-form-dropdown>
</div>
</div>

7
public/app/plugins/datasource/graphite/help.md
View File

@@ -1,9 +1,8 @@
#### Get Shorter legend names
- alias() function to specify a custom series name<
- alias() function to specify a custom series name
- aliasByNode(2) to alias by a specific part of your metric path
- aliasByNode(2, -1) you can add multiple segment paths, and use negative index
- groupByNode(2, 'sum') is useful if you have 2 wildcards in your metric path and want to sumSeries and group by
- groupByNode(2, 'sum') is useful if you have 2 wildcards in your metric path and want to sumSeries and group by.
#### Series as parameter
@@ -11,8 +10,6 @@
- Use #[A-Z] to use a graphite query as parameter to a function
- Examples:
- asPercent(#A, #B)
- prod.srv-01.counters.count - asPercent(#A) : percentage of count in comparison with A query
- prod.srv-01.counters.count - sumSeries(#A) : sum count and series A
- divideSeries(#A, #B)
If a query is added only to be used as a parameter, hide it from the graph with the eye icon

2
public/sass/_variables.dark.scss
View File

@@ -276,7 +276,7 @@ $card-background-hover: linear-gradient(135deg, #343434, #262626);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
// info box
$info-box-background: linear-gradient(177deg, #006e95, #412078);
$info-box-background: linear-gradient(100deg, #1a4552, #0b2127);
// footer
$footer-link-color: $gray-1;

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

@@ -16,6 +16,10 @@ $gf-form-margin: 0.25rem;
&--grow {
flex-grow: 1;
}
&--flex-end {
justify-content: flex-end;
}
}
.gf-form-disabled {

13
public/sass/components/_infobox.scss
View File

@@ -16,27 +16,18 @@
border-radius: 4px;
margin-bottom: $spacer;
margin-right: $gf-form-margin;
flex-grow: 1;
h5 {
margin-bottom: $spacer;
}
ul {
padding-left: $spacer;
padding-left: $spacer * 1.5;
}
a {
@extend .external-link;
}
&--animate {
max-height: 0;
overflow: hidden;
}
&--animate-open {
max-height: 1000px;
transition: max-height 250ms ease-in-out;
}
}
.grafana-info-box__close {

11
public/sass/mixins/_animations.scss
View File

@@ -23,3 +23,14 @@
-o-animation: #{$str};
animation: #{$str};
}
.animate-height {
max-height: 0;
overflow: hidden;
&--open {
max-height: 1000px;
overflow: auto;
transition: max-height 250ms ease-in-out;
}
}