Skip to content

N
nexpie-grafana-theme
Commit 566f6ebd by Torkel Ödegaard
Options

feature toggle series by alias!

parent 48f8891e
Showing with 47 additions and 60 deletions
src/app/panels/graphite/module.html
...@@ -41,47 +41,6 @@ ...@@ -41,47 +41,6 @@
</span> </span>
</div> </div>
<form class="form-inline bordered histogram-options" ng-show="options">
<span>
<div class="checkbox">
<label class="small">
<input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars" ng-change="render()">
Bars
</label>
</div>
<div class="checkbox">
<label class="small">
<input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines" ng-change="render()">
Lines
</label>
</div>
<div class="checkbox">
<label class="small">
<input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack" ng-change="render()">
Stack
</label>
</div>
</span>
<span ng-show="panel.stack">
<div class="checkbox">
<label style="white-space:nowrap" class="small">
<input type="checkbox" ng-model="panel.percentage" ng-checked="panel.percentage" ng-change="render()">
Percent
</label>
</div>
</span>
<span>
<div class="checkbox">
<label class="small">
<input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend" ng-change="render()">
Legend
</label>
</div>
</span>
<span>
<label class="small">Interval</label> <select ng-change="set_interval(panel.interval);get_data();" class="input-small" ng-model="panel.interval" ng-options="interval_label(time) for time in _.union([panel.interval],panel.intervals)"></select>
</span>
</form>
<center><img ng-show='panel.loading && _.isUndefined(data)' src="img/load_big.gif"></center> <center><img ng-show='panel.loading && _.isUndefined(data)' src="img/load_big.gif"></center>
<div histogram-chart class="pointer histogram-chart" params="{{panel}}"> <div histogram-chart class="pointer histogram-chart" params="{{panel}}">
...@@ -89,13 +48,14 @@ ...@@ -89,13 +48,14 @@
<div class="grafana-legend-container"> <div class="grafana-legend-container">
<span ng-show="panel.legend" <span ng-show="panel.legend"
ng-class="{'pull-right': series.yaxis === 2}" ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
ng-repeat='series in legend' ng-repeat='series in legend'
class="histogram-legend"> class="histogram-legend">
<i class='icon-circle' ng-style="{color: series.color}"></i> <i class='icon-circle' ng-style="{color: series.color}"></i>
<span class='small histogram-legend-item'> <span class='small histogram-legend-item'>
<span ng-if="panel.show_query">{{series.alias || series.query}}</span> <a ng-click="toggleSeries(series)">
<span ng-if="!panel.show_query">{{series.alias}}</span> {{series.alias}}
</a>
</span> </span>
</span> </span>
</div> </div>
......
src/app/panels/graphite/module.js
...@@ -216,6 +216,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) { ...@@ -216,6 +216,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
// Hide view options by default // Hide view options by default
$scope.options = false; $scope.options = false;
$scope.editor = {index: 1}; $scope.editor = {index: 1};
$scope.hiddenSeries = {};
// Always show the query if an alias isn't set. Users can set an alias if the query is too // Always show the query if an alias isn't set. Users can set an alias if the query is too
// long // long
...@@ -380,8 +381,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) { ...@@ -380,8 +381,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
$scope.legend.push(seriesInfo); $scope.legend.push(seriesInfo);
data.hasSecondY = (target.yaxis || 1) > 1;
data.push({ data.push({
info: seriesInfo, info: seriesInfo,
time_series: time_series, time_series: time_series,
...@@ -443,9 +442,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) { ...@@ -443,9 +442,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
$scope.$emit('render'); $scope.$emit('render');
}; };
$scope.toggleSeries = function(info) {
if ($scope.hiddenSeries[info.alias]) {
delete $scope.hiddenSeries[info.alias];
info.hidden = false;
}
else {
$scope.hiddenSeries[info.alias] = true;
info.hidden = true;
}
$scope.$emit('toggleLegend', info.alias);
};
$scope.setEditorTabs = function(panelMeta) { $scope.setEditorTabs = function(panelMeta) {
$scope.editorTabs = _.union(['General'],_.pluck(panelMeta.fullEditorTabs,'title')); $scope.editorTabs = _.union(['General'],_.pluck(panelMeta.fullEditorTabs,'title'));
return $scope.editorTabs;
}; };
}); });
...@@ -456,11 +467,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) { ...@@ -456,11 +467,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
template: '<div> </div>', template: '<div> </div>',
link: function(scope, elem) { link: function(scope, elem) {
var data, plot; var data, plot;
var hiddenData = {};
scope.$on('refresh',function() { scope.$on('refresh',function() {
scope.get_data(); scope.get_data();
}); });
scope.$on('toggleLegend', function(e, alias) {
if (hiddenData[alias]) {
data.push(hiddenData[alias]);
delete hiddenData[alias];
}
render_panel(data);
});
// Receive render events // Receive render events
scope.$on('render',function(event, d) { scope.$on('render',function(event, d) {
data = d || data; data = d || data;
...@@ -481,13 +502,20 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) { ...@@ -481,13 +502,20 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
// IE doesn't work without this // IE doesn't work without this
elem.css({height:scope.panel.height || scope.row.height}); elem.css({height:scope.panel.height || scope.row.height});
// Populate from the query service
try {
_.each(data, function(series) { _.each(data, function(series) {
series.label = series.info.alias; series.label = series.info.alias;
series.color = series.info.color; series.color = series.info.color;
}); });
} catch(e) {return;}
_.each(_.keys(scope.hiddenSeries), function(seriesAlias) {
var dataSeries = _.find(data, function(series) {
return series.info.alias === seriesAlias;
});
if (dataSeries) {
hiddenData[dataSeries.info.alias] = dataSeries;
data = _.without(data, dataSeries);
}
});
// Set barwidth based on specified interval // Set barwidth based on specified interval
var barwidth = kbn.interval_to_ms(scope.panel.interval); var barwidth = kbn.interval_to_ms(scope.panel.interval);
...@@ -599,7 +627,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) { ...@@ -599,7 +627,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
data[i].data = _d; data[i].data = _d;
} }
if (data.hasSecondY) { var hasSecondY = _.findWhere(data, { yaxis: 2});
if (hasSecondY) {
options.yaxes.push({ options.yaxes.push({
position: 'right', position: 'right',
show: scope.panel['y-axis'], show: scope.panel['y-axis'],
......
src/app/panels/graphite/styleEditor.html
...@@ -52,15 +52,6 @@ ...@@ -52,15 +52,6 @@
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
<h5>Header<h5>
<div class="editor-option">
<label class="small">Zoom</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" />
</div>
<div class="editor-option">
<label class="small">View</label><input type="checkbox" ng-model="panel.options" ng-checked="panel.options" />
</div>
</div>
<div class="section">
<h5>Legend<h5> <h5>Legend<h5>
<div class="editor-option"> <div class="editor-option">
<label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"> <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend">
......
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/vendor/bootstrap/less/grafana.less
...@@ -64,6 +64,12 @@ ...@@ -64,6 +64,12 @@
font-size: 12px; font-size: 12px;
} }
.hidden-series {
a {
color: darken(@linkColor, 45%);
}
}
.full-edit-mode { .full-edit-mode {
//display: none; //display: none;
} }
......
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