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

Added a checkbox to the tooltip's settings that will cause the query to be displayed in the case an alias is not set.

Browse Source
This commit is contained in:
Spencer Alger 2013-08-30 15:17:46 -07:00
commit 2431e40145
6 changed files with 95 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
js/filters.js
View File

@ -32,4 +32,40 @@ angular.module('kibana.filters', [])
return arr.toString();
}
};
}).filter('noXml', function() {
return function(text) {
if(!_.isString(text)) {
return text;
}
return text.
replace(/&/g, '&').
replace(/</g, '&lt;').
replace(/>/g, '&gt;').
replace(/'/g, '&#39;').
replace(/"/g, '&quot;');
};
}).filter('urlLink', function() {
var //URLs starting with http://, https://, or ftp://
r1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim,
//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
r2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim,
//Change email addresses to mailto:: links.
r3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
return function(text, target, otherProp) {
if(!_.isString(text)) {
return text;
}
_.each(text.match(r1), function(url) {
text = text.replace(r1, "<a href=\"$1\" target=\"_blank\">$1</a>");
});
_.each(text.match(r2), function(url) {
text = text.replace(r2, "$1<a href=\"http://$2\" target=\"_blank\">$2</a>");
});
_.each(text.match(r3), function(url) {
text = text.replace(r3, "<a href=\"mailto:$1\">$1</a>");
});
return text;
};
});

14
js/services.js
View File

@ -11,11 +11,21 @@ angular.module('kibana.services', [])
this.list = [];
this.set = function(title,text,severity,timeout) {
var _a = {
var
_a = {
title: title || '',
text: text || '',
severity: severity || 'info',
};
},
_ca = angular.toJson(_a),
_clist = _.map(self.list,function(alert){return angular.toJson(alert);});
// If we already have this alert, remove it and add a new one
// Why do this instead of skipping the add because it resets the timer
if(_.contains(_clist,_ca)) {
_.remove(self.list,_.indexOf(_clist,_ca));
}
self.list.push(_a);
if (timeout > 0) {
$timeout(function() {

15
panels/histogram/editor.html
View File

@ -15,13 +15,13 @@
<label class="small">Note</label><small> In <strong>{{panel.mode}}</strong> mode the configured field <strong>must</strong> be a numeric type</small>
</div>
</div>
<div class="row-fluid" style="margin-bottom:10px;">
<h5>Chart Settings</h5>
<div class="row-fluid" style="margin-bottom:10px;">
<div class="span1"> <label class="small">Bars</label><input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
<div class="span1"> <label class="small">Lines</label><input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
<div class="span1"> <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
<div class="span1"> <label class="small">Stack</label><input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
<!--<div class="span1" ng-show="panel.stack"> <label class="small" bs-tooltip="'Stack as a percentage of total'">Percent</label><input type="checkbox" ng-model="panel.percentage" ng-checked="panel.percentage"></div>-->
<!--<div class="span1" ng-show="panel.stack">Percent <tip>Stack as a percentage of total</tip></label><input type="checkbox" ng-model="panel.percentage" ng-checked="panel.percentage"></div>-->
<div class="span1"> <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
<div class="span1"> <label class="small">xAxis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
<div class="span1"> <label class="small">yAxis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
@ -59,3 +59,14 @@
<label class="small">Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</label>
</div>
</div>
<h5>Tooltip Settings</h5>
<div class="row-fluid" style="margin-bottom:10px;">
<div class="span3">
<label class="small">Stacked Values <tip>How should the values in stacked charts to be calculated?></tip></label>
<select class="input-medium" ng-model="panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']"></select>
</div>
<div class="span3">
<label class="small">Display Query <tip>If an alias is set, it will be shown in the tooltip. If not, should it show the query?</tip></label>
<input type="checkbox" ng-model="panel.tooltip.query_as_alias" />
</div>
</div>

23
panels/histogram/module.js
View File

@ -72,6 +72,10 @@ angular.module('kibana.histogram', [])
'y-axis' : true,
percentage : false,
interactive : true,
tooltip : {
value_type: 'cumulative',
query_as_alias: false
}
};
_.defaults($scope.panel,_d);
@ -426,21 +430,24 @@ angular.module('kibana.histogram', [])
var $tooltip = $('<div>');
elem.bind("plothover", function (event, pos, item) {
var grouping;
var group, value;
if (item) {
if (item.series.info.alias) {
grouping = '<small style="font-size:0.9em;">' +
if (item.series.info.alias || scope.panel.tooltip.query_as_alias) {
group = '<small style="font-size:0.9em;">' +
'<i class="icon-circle" style="color:'+item.series.color+';"></i>' + ' ' +
item.series.info.alias +
(item.series.info.alias || item.series.info.query)+
'</small><br>';
} else {
grouping = kbn.query_color_dot(item.series.color, 15) + ' ';
group = kbn.query_color_dot(item.series.color, 15) + ' ';
}
if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') {
value = item.datapoint[1] - item.datapoint[2];
} else {
value = item.datapoint[1];
}
$tooltip
.html(
grouping +
item.datapoint[1].toFixed(0) + " @ " +
moment(item.datapoint[0]).format('MM/DD HH:mm:ss')
group + value + " @ " + moment(item.datapoint[0]).format('MM/DD HH:mm:ss')
)
.place_tt(pos.pageX, pos.pageY);
} else {

4
panels/query/module.html
View File

@ -45,9 +45,9 @@
<form class="form-search" style="position:relative;margin-bottom:5px;" ng-submit="refresh()">
<span class="begin-query">
<i class="icon-circle pointer" data-unique="1" bs-popover="'panels/query/meta.html'" data-placement="right" ng-style="{color: querySrv.list[id].color}"></i>
<i class="icon-remove-sign pointer remove-query" ng-show="unPinnedQueries.length>1" ng-click="querySrv.remove(id);refresh()"></i>
<i class="icon-remove-sign pointer remove-query" ng-show="querySrv.ids.length > 1" ng-click="querySrv.remove(id);refresh()"></i>
</span>
<input class="search-query panel-query" ng-class="{'input-block-level': unPinnedQueries.length==1,'last-query': $last,'has-remove': unPinnedQueries.length>1}" bs-typeahead="panel.history" data-min-length=0 data-items=100 type="text" ng-model="querySrv.list[id].query"/>
<input class="search-query panel-query" ng-class="{ 'input-block-level': unPinnedQueries.length==1, 'last-query': $last, 'has-remove': querySrv.ids.length > 1 }" bs-typeahead="panel.history" data-min-length=0 data-items=100 type="text" ng-model="querySrv.list[id].query" />
<span class="end-query">
<i class="icon-search pointer" ng-click="refresh()" ng-show="$last"></i>
<i class="icon-plus pointer" ng-click="querySrv.set({})" ng-show="$last"></i>

3
panels/table/module.html
View File

@ -74,7 +74,8 @@
<i class='icon-search pointer' ng-click="build_search(key,value)"></i>
<i class='icon-ban-circle pointer' ng-click="build_search(key,value,true)"></i>
</td>
<td style="white-space:pre-wrap">{{value}}</td>
<!-- At some point we need to create a more efficient way of applying the filter pipeline -->
<td style="white-space:pre-wrap" ng-bind-html-unsafe="value|noXml|urlLink"></td>
</tr>
</table>
</td>