Skip to content

N
nexpie-grafana-theme
Commit 6e4090ab by Torkel Ödegaard
Options

feat: finished work on the interval changes #9161

parent 07e192ff
Showing with 32 additions and 262 deletions
public/app/features/panel/panel_ctrl.ts
......@@ -29,7 +29,6 @@ export class PanelCtrl {
fullscreen: boolean;
inspector: any;
editModeInitiated: boolean;
editorHelpIndex: number;
editMode: any;
height: any;
containerHeight: any;
......@@ -186,14 +185,6 @@ export class PanelCtrl {
this.events.emit('render', payload);
}
toggleEditorHelp(index) {
if (this.editorHelpIndex === index) {
this.editorHelpIndex = null;
return;
}
this.editorHelpIndex = index;
}
duplicate() {
this.dashboard.duplicatePanel(this.panel, this.row);
this.$timeout(() => {
......
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">
<label class="gf-form-label gf-query-ds-label">
<i class="icon-gf icon-gf-datasources"></i>
Data Source
</label>
<label class="gf-form-label">Data Source</label>
<gf-form-dropdown model="ctrl.panelDsValue" css-class="gf-size-auto"
lookup-text="true"
get-options="ctrl.getOptions(true)"
......@@ -35,8 +36,8 @@
<div>
<div ng-if="ctrl.optionsOpen">
<div class="gf-form gf-form--flex-end" ng-if="ctrl.queryOptions.minInterval">
<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()" />
<label class="gf-form-label">Min time interval</label>
<input type="text" class="gf-form-input width-6" placeholder="{{ctrl.panelCtrl.interval}}" 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
......
public/app/plugins/datasource/elasticsearch/partials/query.options.html deleted 100644 → 0
<section class="grafana-metric-options">
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">
<i class="fa fa-wrench"></i>
</span>
<span class="gf-form-label">Group by time interval</span>
<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.panelCtrl.panel.interval" ng-blur="ctrl.panelCtrl.refresh();"
spellcheck='false' placeholder="example: >10s">
<span class="gf-form-label">
<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >60s'" data-placement="right"></i>
</span>
</div>
<div class="gf-form">
<span class="gf-form-label">
<i class="fa fa-info-circle"></i>
</span>
<span class="gf-form-label width-23">
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
alias patterns
</a>
</span>
</div>
</div>
</section>
<div class="pull-left">
<div class="grafana-info-box" style="border: 0;" ng-if="ctrl.panelCtrl.editorHelpIndex === 1">
<h5>Alias patterns</h5>
<ul ng-non-bindable>
<li>{{term fieldname}} = replaced with value of term group by</li>
<li>{{metric}} = replaced with metric name (ex. Average, Min, Max)</li>
<li>{{field}} = replaced with the metric field name</li>
</ul>
</div>
</div>
public/app/plugins/datasource/elasticsearch/plugin.json
......@@ -21,5 +21,9 @@
},
"annotations": true,
"metrics": true
"metrics": true,
"queryOptions": {
"minInterval": true
}
}
public/app/plugins/datasource/elasticsearch/query_help.md 0 → 100644
#### Alias patterns
- {{term fieldname}} = replaced with value of term group by
- {{metric}} = replaced with metric name (ex. Average, Min, Max)
- {{field}} = replaced with the metric field name
#### Documentation links
[Grafana's Elasticsearch Documentation](http://docs.grafana.org/features/datasources/elasticsearch)
[Official Elasticsearch Documentation](https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html)
public/app/plugins/datasource/graphite/module.ts
......@@ -2,10 +2,6 @@ import {GraphiteDatasource} from './datasource';
import {GraphiteQueryCtrl} from './query_ctrl';
import {GraphiteConfigCtrl} from './config_ctrl';
class GraphiteQueryOptionsCtrl {
static templateUrl = 'partials/query.options.html';
}
class AnnotationsQueryCtrl {
static templateUrl = 'partials/annotations.editor.html';
}
......@@ -14,7 +10,6 @@ export {
GraphiteDatasource as Datasource,
GraphiteQueryCtrl as QueryCtrl,
GraphiteConfigCtrl as ConfigCtrl,
GraphiteQueryOptionsCtrl as QueryOptionsCtrl,
AnnotationsQueryCtrl as AnnotationsQueryCtrl,
};
public/app/plugins/datasource/graphite/partials/query.options.html deleted 100644 → 0
<section class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-15">
<span class="gf-form-label width-8">
Cache timeout
</span>
<input type="text"
class="gf-form-input"
ng-model="ctrl.panelCtrl.panel.cacheTimeout"
bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
data-placement="right"
spellcheck='false'
placeholder="60">
</input>
</div>
<div class="gf-form max-width-15">
<span class="gf-form-label">Max data points</span>
<input type="text"
class="gf-form-input"
ng-model="ctrl.panelCtrl.panel.maxDataPoints"
bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
data-placement="right"
ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
spellcheck='false'
placeholder="auto">
</input>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-12">
<i class="fa fa-info-circle"></i>
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
Shorter legend names
</a>
</span>
<span class="gf-form-label width-12">
<i class="fa fa-info-circle"></i>
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
Series as parameters
</a>
</span>
<span class="gf-form-label width-7">
<i class="fa fa-info-circle"></i>
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
Stacking
</a>
</span>
<span class="gf-form-label width-8">
<i class="fa fa-info-circle"></i>
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
Templating
</a>
</span>
<span class="gf-form-label width-10">
<i class="fa fa-info-circle"></i>
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
max data points
</a>
</span>
</div>
</div>
</section>
<div class="editor-row">
<div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 1">
<h5>Shorter legend names</h5>
<ul>
<li>alias() function to specify a custom series name</li>
<li>aliasByNode(2) to alias by a specific part of your metric path</li>
<li>aliasByNode(2, -1) you can add multiple segment paths, and use negative index</li>
<li>groupByNode(2, 'sum') is useful if you have 2 wildcards in your metric path and want to sumSeries and group by</li>
</ul>
</div>
<div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 2">
<h5>Series as parameter</h5>
<ul>
<li>Some graphite functions allow you to have many series arguments</li>
<li>Use #[A-Z] to use a graphite query as parameter to a function</li>
<li>
Examples:
<ul>
<li>asPercent(#A, #B)</li>
<li>prod.srv-01.counters.count - asPercent(#A) : percentage of count in comparison with A query</li>
<li>prod.srv-01.counters.count - sumSeries(#A) : sum count and series A </li>
<li>divideSeries(#A, #B)</li>
</ul>
</li>
<li>If a query is added only to be used as a parameter, hide it from the graph with the eye icon</li>
</ul>
</div>
<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 3">
<h5>Stacking</h5>
<ul>
<li>You find the stacking option under Display Styles tab</li>
<li>When stacking is enabled make sure null point mode is set to 'null as zero'</li>
</ul>
</div>
<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 4">
<h5>Templating</h5>
<ul>
<li>You can use a template variable in place of metric names</li>
<li>You can use a template variable in place of function parameters</li>
<li>You enable the templating feature in Dashboard settings / Feature toggles </li>
</ul>
</div>
<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 5">
<h5>Max data points</h5>
<ul>
<li>Every graphite request is issued with a maxDataPoints parameter</li>
<li>Graphite uses this parameter to consolidate the real number of values down to this number</li>
<li>If there are more real values, then by default they will be consolidated using averages</li>
<li>This could hide real peaks and max values in your series</li>
<li>You can change how point consolidation is made using the consolidateBy graphite function</li>
<li>Point consolidation will effect series legend values (min,max,total,current)</li>
<li>If you override maxDataPoint and set a high value performance can be severely effected</li>
</ul>
</div>
</div>
public/app/plugins/datasource/influxdb/module.ts
......@@ -5,10 +5,6 @@ class InfluxConfigCtrl {
static templateUrl = 'partials/config.html';
}
class InfluxQueryOptionsCtrl {
static templateUrl = 'partials/query.options.html';
}
class InfluxAnnotationsQueryCtrl {
static templateUrl = 'partials/annotations.editor.html';
}
......@@ -17,7 +13,6 @@ export {
InfluxDatasource as Datasource,
InfluxQueryCtrl as QueryCtrl,
InfluxConfigCtrl as ConfigCtrl,
InfluxQueryOptionsCtrl as QueryOptionsCtrl,
InfluxAnnotationsQueryCtrl as AnnotationsQueryCtrl,
};
......
public/app/plugins/datasource/influxdb/partials/config.html
......@@ -26,7 +26,7 @@
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label">Min interval</span>
<span class="gf-form-label">Min time interval</span>
<input type="text" class="gf-form-input width-6" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="10s"></input>
<info-popover mode="right-absolute">
A lower limit for the auto group by time interval. Recommended to be set to write frequency,
......
public/app/plugins/datasource/influxdb/partials/query.options.html deleted 100644 → 0
<section class="grafana-metric-options">
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label"><i class="fa fa-wrench"></i></span>
<span class="gf-form-label width-11">Group by time interval</span>
<input type="text" class="gf-form-input width-16" ng-model="ctrl.panelCtrl.panel.interval" ng-blur="ctrl.panelCtrl.refresh();"
spellcheck='false' placeholder="example: >10s">
<info-popover mode="right-absolute">
Set a low limit by having a greater sign: example: >60s
</info-popover>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
<i class="fa fa-info-circle"></i>
&nbsp;alias patterns
</a>
</span>
<span class="gf-form-label width-10">
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
<i class="fa fa-info-circle"></i>
&nbsp;stacking &amp; fill
</a>
</span>
<span class="gf-form-label width-10">
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
<i class="fa fa-info-circle"></i>
&nbsp;group by time
</a>
</span>
</div>
</div>
</div>
</section>
<div class="editor-row">
<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 1">
<h5>Alias patterns</h5>
<ul>
<li>$m = replaced with measurement name</li>
<li>$measurement = replaced with measurement name</li>
<li>$1 - $9 = replaced with part of measurement name (if you separate your measurement name with dots)</li>
<li>$col = replaced with column name</li>
<li>$tag_exampletag = replaced with the value of the <i>exampletag</i> tag</li>
<li>You can also use [[tag_exampletag]] pattern replacement syntax</li>
</ul>
</div>
<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 2">
<h5>Stacking and fill</h5>
<ul>
<li>When stacking is enabled it is important that points align</li>
<li>If there are missing points for one series it can cause gaps or missing bars</li>
<li>You must use fill(0), and select a group by time low limit</li>
<li>Use the group by time option below your queries and specify for example &gt;10s if your metrics are written every 10 seconds</li>
<li>This will insert zeros for series that are missing measurements and will make stacking work properly</li>
</ul>
</div>
<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 3">
<h5>Group by time</h5>
<ul>
<li>Group by time is important, otherwise the query could return many thousands of datapoints that will slow down Grafana</li>
<li>Leave the group by time field empty for each query and it will be calculated based on time range and pixel width of the graph</li>
<li>If you use fill(0) or fill(null) set a low limit for the auto group by time interval</li>
<li>The low limit can only be set in the group by time option below your queries</li>
<li>You set a low limit by adding a greater sign before the interval</li>
<li>Example: &gt;60s if you write metrics to InfluxDB every 60 seconds</li>
</ul>
</div>
</div>
public/app/plugins/datasource/influxdb/query_help.md
......@@ -20,3 +20,9 @@
- The low limit can only be set in the group by time option below your queries
- You set a low limit by adding a greater sign before the interval
- Example: &gt;60s if you write metrics to InfluxDB every 60 seconds
#### Documentation links:
[Grafana's InfluxDB Documentation](http://docs.grafana.org/features/datasources/influxdb)
[Official InfluxDB Documentation](https://docs.influxdata.com/influxdb)
public/sass/components/_query_editor.scss
......@@ -67,6 +67,11 @@
}
}
.gf-query-ds-label {
text-align: center;
width: 44px;
}
.grafana-metric-options {
margin-top: 25px;
}
......
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