Skip to content

N
nexpie-grafana-theme
Commit 58256acb by Rashid Khan
Options

Switch styles to LESS build, add inspector.html, update flot

parent c87ca770
Showing with 96 additions and 165 deletions
Gruntfile.js
...@@ -46,14 +46,28 @@ module.exports = function (grunt) { ...@@ -46,14 +46,28 @@ module.exports = function (grunt) {
moment: false moment: false
} }
} }
},
less: {
production: {
options: {
paths: ["vendor/bootstrap/less"],
yuicompress:true
},
files: {
"common/css/bootstrap.dark.min.css": "vendor/bootstrap/less/bootstrap.dark.less",
"common/css/bootstrap.light.min.css": "vendor/bootstrap/less/bootstrap.light.less"
}
}
} }
}); });
// load plugins // load plugins
grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('assemble-less');
// Default task. // Default task.
grunt.registerTask('default', ['jshint']); grunt.registerTask('default', ['jshint','less']);
}; };
common/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
common/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
common/css/main.css
...@@ -132,10 +132,20 @@ ...@@ -132,10 +132,20 @@
max-width: 500px; max-width: 500px;
} }
.modal {
width: 770px;
margin-left: -385px;
top: 10px !important;
}
.tiny { .tiny {
font-size: 50%; font-size: 50%;
} }
.smaller {
font-size: 70%;
}
.small { .small {
font-size: 85%; font-size: 85%;
} }
......
common/lib/panels/jquery.flot.selection.js
...@@ -6,10 +6,10 @@ Licensed under the MIT license. ...@@ -6,10 +6,10 @@ Licensed under the MIT license.
The plugin supports these options: The plugin supports these options:
selection: { selection: {
mode: null or "x" or "y" or "xy", mode: null or "x" or "y" or "xy",
color: color, color: color,
shape: "round" or "miter" or "bevel", shape: "round" or "miter" or "bevel",
minSize: number of pixels minSize: number of pixels
} }
Selection support is enabled by setting the mode to one of "x", "y" or "xy". Selection support is enabled by setting the mode to one of "x", "y" or "xy".
...@@ -33,11 +33,11 @@ When selection support is enabled, a "plotselected" event will be emitted on ...@@ -33,11 +33,11 @@ When selection support is enabled, a "plotselected" event will be emitted on
the DOM element you passed into the plot function. The event handler gets a the DOM element you passed into the plot function. The event handler gets a
parameter with the ranges selected on the axes, like this: parameter with the ranges selected on the axes, like this:
placeholder.bind( "plotselected", function( event, ranges ) { placeholder.bind( "plotselected", function( event, ranges ) {
alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to) alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
// similar for yaxis - with multiple axes, the extra ones are in // similar for yaxis - with multiple axes, the extra ones are in
// x2axis, x3axis, ... // x2axis, x3axis, ...
}); });
The "plotselected" event is only fired when the user has finished making the The "plotselected" event is only fired when the user has finished making the
selection. A "plotselecting" event is fired during the process with the same selection. A "plotselecting" event is fired during the process with the same
...@@ -58,7 +58,7 @@ The plugin allso adds the following methods to the plot object: ...@@ -58,7 +58,7 @@ The plugin allso adds the following methods to the plot object:
an yaxis range and both xaxis and yaxis if the selection mode is "xy", like an yaxis range and both xaxis and yaxis if the selection mode is "xy", like
this: this:
setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } }); setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
setSelection will trigger the "plotselected" event when called. If you don't setSelection will trigger the "plotselected" event when called. If you don't
want that to happen, e.g. if you're inside a "plotselected" handler, pass want that to happen, e.g. if you're inside a "plotselected" handler, pass
......
common/lib/panels/jquery.flot.stack.js
/* Flot plugin for stacking data sets rather than overlyaing them. /* Flot plugin for stacking data sets rather than overlyaing them.
Copyright (c) 2007-2012 IOLA and Ole Laursen. Copyright (c) 2007-2013 IOLA and Ole Laursen.
Licensed under the MIT license. Licensed under the MIT license.
The plugin assumes the data is sorted on x (or y if stacking horizontally). The plugin assumes the data is sorted on x (or y if stacking horizontally).
...@@ -15,7 +15,7 @@ key (which can be any number or string or just "true"). To specify the default ...@@ -15,7 +15,7 @@ key (which can be any number or string or just "true"). To specify the default
stack, you can set the stack option like this: stack, you can set the stack option like this:
series: { series: {
stack: null or true or key (number/string) stack: null/false, true, or a key (number/string)
} }
You can also specify it for a single series, like this: You can also specify it for a single series, like this:
...@@ -55,7 +55,7 @@ charts or filled areas). ...@@ -55,7 +55,7 @@ charts or filled areas).
} }
function stackData(plot, s, datapoints) { function stackData(plot, s, datapoints) {
if (s.stack == null) if (s.stack == null || s.stack === false)
return; return;
var other = findMatchingSeries(s, plot.getData()); var other = findMatchingSeries(s, plot.getData());
...@@ -186,130 +186,3 @@ charts or filled areas). ...@@ -186,130 +186,3 @@ charts or filled areas).
version: '1.2' version: '1.2'
}); });
})(jQuery); })(jQuery);
(function ($) {
var options = {
series: {
stackpercent: null
} // or number/string
};
function init(plot) {
// will be built up dynamically as a hash from x-value, or y-value if horizontal
var stackBases = {};
var processed = false;
var stackSums = {};
//set percentage for stacked chart
function processRawData(plot, series, data, datapoints) {
if (!processed) {
processed = true;
stackSums = getStackSums(plot.getData());
}
if (series.stackpercent == true) {
var num = data.length;
series.percents = [];
var key_idx = 0;
var value_idx = 1;
if (series.bars && series.bars.horizontal && series.bars.horizontal === true) {
key_idx = 1;
value_idx = 0;
}
for (var j = 0; j < num; j++) {
var sum = stackSums[data[j][key_idx] + ""];
if (sum > 0) {
series.percents.push(data[j][value_idx] * 100 / sum);
} else {
series.percents.push(0);
}
}
}
}
//calculate summary
function getStackSums(_data) {
var data_len = _data.length;
var sums = {};
if (data_len > 0) {
//caculate summary
for (var i = 0; i < data_len; i++) {
if (_data[i].stackpercent) {
var key_idx = 0;
var value_idx = 1;
if (_data[i].bars && _data[i].bars.horizontal && _data[i].bars.horizontal === true) {
key_idx = 1;
value_idx = 0;
}
var num = _data[i].data.length;
for (var j = 0; j < num; j++) {
var value = 0;
if (_data[i].data[j][1] != null) {
value = _data[i].data[j][value_idx];
}
if (sums[_data[i].data[j][key_idx] + ""]) {
sums[_data[i].data[j][key_idx] + ""] += value;
} else {
sums[_data[i].data[j][key_idx] + ""] = value;
}
}
}
}
}
return sums;
}
function stackData(plot, s, datapoints) {
if (!s.stackpercent) return;
if (!processed) {
stackSums = getStackSums(plot.getData());
}
var newPoints = [];
var key_idx = 0;
var value_idx = 1;
if (s.bars && s.bars.horizontal && s.bars.horizontal === true) {
key_idx = 1;
value_idx = 0;
}
for (var i = 0; i < datapoints.points.length; i += 3) {
// note that the values need to be turned into absolute y-values.
// in other words, if you were to stack (x, y1), (x, y2), and (x, y3),
// (each from different series, which is where stackBases comes in),
// you'd want the new points to be (x, y1, 0), (x, y1+y2, y1), (x, y1+y2+y3, y1+y2)
// generally, (x, thisValue + (base up to this point), + (base up to this point))
if (!stackBases[datapoints.points[i + key_idx]]) {
stackBases[datapoints.points[i + key_idx]] = 0;
}
newPoints[i + key_idx] = datapoints.points[i + key_idx];
newPoints[i + value_idx] = datapoints.points[i + value_idx] + stackBases[datapoints.points[i + key_idx]];
newPoints[i + 2] = stackBases[datapoints.points[i + key_idx]];
stackBases[datapoints.points[i + key_idx]] += datapoints.points[i + value_idx];
// change points to percentage values
// you may need to set yaxis:{ max = 100 }
if ( stackSums[newPoints[i+key_idx]+""] > 0 ){
newPoints[i + value_idx] = newPoints[i + value_idx] * 100 / stackSums[newPoints[i + key_idx] + ""];
newPoints[i + 2] = newPoints[i + 2] * 100 / stackSums[newPoints[i + key_idx] + ""];
} else {
newPoints[i + value_idx] = 0;
newPoints[i + 2] = 0;
}
}
datapoints.points = newPoints;
}
plot.hooks.processRawData.push(processRawData);
plot.hooks.processDatapoints.push(stackData);
}
$.plot.plugins.push({
init: init,
options: options,
name: 'stackpercent',
version: '0.1'
});
})(jQuery);
common/lib/panels/jquery.flot.time.js
/* Pretty handling of time axes. /* Pretty handling of time axes.
Copyright (c) 2007-2012 IOLA and Ole Laursen. Copyright (c) 2007-2013 IOLA and Ole Laursen.
Licensed under the MIT license. Licensed under the MIT license.
Set axis.mode to "time" to enable. See the section "Time series data" in Set axis.mode to "time" to enable. See the section "Time series data" in
...@@ -10,7 +10,14 @@ API.txt for details. ...@@ -10,7 +10,14 @@ API.txt for details.
(function($) { (function($) {
var options = {}; var options = {
xaxis: {
timezone: null, // "browser" for local to the client or timezone for timezone-js
timeformat: null, // format string to use
twelveHourClock: false, // 12 or 24 time in time mode
monthNames: null // list of names of months
}
};
// round to nearby lower multiple of base // round to nearby lower multiple of base
...@@ -66,6 +73,7 @@ API.txt for details. ...@@ -66,6 +73,7 @@ API.txt for details.
case 'b': c = "" + monthNames[d.getMonth()]; break; case 'b': c = "" + monthNames[d.getMonth()]; break;
case 'd': c = leftPad(d.getDate()); break; case 'd': c = leftPad(d.getDate()); break;
case 'e': c = leftPad(d.getDate(), " "); break; case 'e': c = leftPad(d.getDate(), " "); break;
case 'h': // For back-compat with 0.7; remove in 1.0
case 'H': c = leftPad(hours); break; case 'H': c = leftPad(hours); break;
case 'I': c = leftPad(hours12); break; case 'I': c = leftPad(hours12); break;
case 'l': c = leftPad(hours12, " "); break; case 'l': c = leftPad(hours12, " "); break;
...@@ -187,7 +195,7 @@ API.txt for details. ...@@ -187,7 +195,7 @@ API.txt for details.
[1, "year"]]); [1, "year"]]);
function init(plot) { function init(plot) {
plot.hooks.processDatapoints.push(function (plot, series, datapoints) { plot.hooks.processOptions.push(function (plot, options) {
$.each(plot.getAxes(), function(axisName, axis) { $.each(plot.getAxes(), function(axisName, axis) {
var opts = axis.options; var opts = axis.options;
...@@ -287,17 +295,23 @@ API.txt for details. ...@@ -287,17 +295,23 @@ API.txt for details.
if (step >= timeUnitSize.minute) { if (step >= timeUnitSize.minute) {
d.setSeconds(0); d.setSeconds(0);
} else if (step >= timeUnitSize.hour) { }
if (step >= timeUnitSize.hour) {
d.setMinutes(0); d.setMinutes(0);
} else if (step >= timeUnitSize.day) { }
if (step >= timeUnitSize.day) {
d.setHours(0); d.setHours(0);
} else if (step >= timeUnitSize.day * 4) { }
if (step >= timeUnitSize.day * 4) {
d.setDate(1); d.setDate(1);
} else if (step >= timeUnitSize.month * 2) { }
if (step >= timeUnitSize.month * 2) {
d.setMonth(floorInBase(d.getMonth(), 3)); d.setMonth(floorInBase(d.getMonth(), 3));
} else if (step >= timeUnitSize.quarter * 2) { }
if (step >= timeUnitSize.quarter * 2) {
d.setMonth(floorInBase(d.getMonth(), 6)); d.setMonth(floorInBase(d.getMonth(), 6));
} else if (step >= timeUnitSize.year) { }
if (step >= timeUnitSize.year) {
d.setMonth(0); d.setMonth(0);
} }
......
index.html
...@@ -16,7 +16,6 @@ ...@@ -16,7 +16,6 @@
<link rel="stylesheet" href="common/css/animate.min.css"> <link rel="stylesheet" href="common/css/animate.min.css">
<link rel="stylesheet" href="common/css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="common/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="common/css/font-awesome.min.css"> <link rel="stylesheet" href="common/css/font-awesome.min.css">
<link rel="stylesheet" href="common/css/main.css">
<link rel="stylesheet" href="common/css/timepicker.css"> <link rel="stylesheet" href="common/css/timepicker.css">
<!-- project dependency libs --> <!-- project dependency libs -->
...@@ -26,13 +25,15 @@ ...@@ -26,13 +25,15 @@
<script src="config.js"></script> <script src="config.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<style>
</style>
</head> </head>
<body ng-controller="DashCtrl" ng-cloak> <body ng-controller="DashCtrl" ng-cloak>
<div ng-repeat='alert in global_alert' class="alert alert-{{alert.severity}} span12" style="position: fixed;top:2px;opacity:0.9;z-index:8000"> <div ng-repeat='alert in global_alert' class="alert-{{alert.severity}} dashboard-notice" ng-show="$last">
<button type="button" class="close" ng-click="clear_alert(alert)">&times;</button> <button type="button" class="close" ng-click="clear_alert(alert)" style="padding-right:50px">&times;</button>
<strong>{{alert.title}}</strong> <span ng-bind-html-unsafe='alert.text'></span> <div class='pull-right small'> {{$index + 1}} alert(s) </div> <strong>{{alert.title}}</strong> <span ng-bind-html-unsafe='alert.text'></span> <div style="padding-right:10px" class='pull-right small'> {{$index + 1}} alert(s) </div>
</div> </div>
<div class="navbar navbar-static-top"> <div class="navbar navbar-static-top">
<div class="navbar-inner"> <div class="navbar-inner">
......
js/directives.js
...@@ -7,11 +7,15 @@ angular.module('kibana.directives', []) ...@@ -7,11 +7,15 @@ angular.module('kibana.directives', [])
return { return {
restrict: 'E', restrict: 'E',
link: function(scope, elem, attrs) { link: function(scope, elem, attrs) {
var template = '<img src="common/img/load.gif" class="panel-loading" ng-show="panelMeta.loading == true">'+ var template = '<i class="icon-spinner small icon-spin icon-large panel-loading" '+
'ng-show="panelMeta.loading == true && !panel.title"></i>'+
' <span class="editlink panelextra pointer" style="right:15px;top:0px" ' + ' <span class="editlink panelextra pointer" style="right:15px;top:0px" ' +
'bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+ 'bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+
'<span class="small">{{panel.type}}</span> <i class="icon-cog pointer"></i> '+ '<span class="small">{{panel.type}}</span> <i class="icon-cog pointer"></i> '+
'</span><h4>{{panel.title}}</h4>'; '</span><h4>'+
'{{panel.title}} '+
'<i class="icon-spinner smaller icon-spin icon-large" ng-show="panelMeta.loading == true && panel.title"></i>'+
'</h4>';
elem.prepend($compile(angular.element(template))(scope)); elem.prepend($compile(angular.element(template))(scope));
} }
}; };
......
package.json
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
"devDependencies": { "devDependencies": {
"grunt": "~0.4.0", "grunt": "~0.4.0",
"grunt-contrib": "~0.7.0", "grunt-contrib": "~0.7.0",
"grunt-contrib-jshint": "~0.6.0" "grunt-contrib-jshint": "~0.6.0",
"assemble-less": "~0.4.8"
}, },
"license": "Apache License" "license": "Apache License"
} }
panels/histogram/module.js
...@@ -165,6 +165,7 @@ angular.module('kibana.histogram', []) ...@@ -165,6 +165,7 @@ angular.module('kibana.histogram', [])
data = []; data = [];
if(filterSrv.idsByType('time').length > 0) { if(filterSrv.idsByType('time').length > 0) {
data = [[_range.from.getTime(), null],[_range.to.getTime(), null]]; data = [[_range.from.getTime(), null],[_range.to.getTime(), null]];
//data = [];
} }
hits = 0; hits = 0;
} else { } else {
...@@ -313,7 +314,7 @@ angular.module('kibana.histogram', []) ...@@ -313,7 +314,7 @@ angular.module('kibana.histogram', [])
lineWidth: scope.panel.linewidth, lineWidth: scope.panel.linewidth,
steps: false steps: false
}, },
bars: { show: scope.panel.bars, fill: 1, barWidth: barwidth/1.8 }, bars: { show: scope.panel.bars, fill: 1, barWidth: barwidth/1.8, zero: false },
points: { show: scope.panel.points, fill: 1, fillColor: false, radius: 5}, points: { show: scope.panel.points, fill: 1, fillColor: false, radius: 5},
shadowSize: 1 shadowSize: 1
}, },
...@@ -321,22 +322,21 @@ angular.module('kibana.histogram', []) ...@@ -321,22 +322,21 @@ angular.module('kibana.histogram', [])
show: scope.panel['y-axis'], show: scope.panel['y-axis'],
min: 0, min: 0,
max: scope.panel.percentage && scope.panel.stack ? 100 : null, max: scope.panel.percentage && scope.panel.stack ? 100 : null,
color: "#c8c8c8"
}, },
xaxis: { xaxis: {
timezone: scope.panel.timezone, timezone: scope.panel.timezone,
show: scope.panel['x-axis'], show: scope.panel['x-axis'],
mode: "time", mode: "time",
min: scope.range.from.getTime(),
max: scope.range.to.getTime(),
timeformat: time_format(scope.panel.interval), timeformat: time_format(scope.panel.interval),
label: "Datetime", label: "Datetime",
color: "#c8c8c8",
}, },
grid: { grid: {
backgroundColor: null, backgroundColor: null,
borderWidth: 0, borderWidth: 0,
borderColor: '#eee',
color: "#eee",
hoverable: true, hoverable: true,
color: '#c8c8c8'
} }
}; };
......
panels/table/editor.html
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</div> </div>
<div class="span8"> <div class="span8">
<h6>Columns <small>Click to remove</small></h6> <h6>Columns <small>Click to remove</small></h6>
<span style="margin-left:3px" ng-click="toggle_field(field)" ng-repeat="field in $parent.panel.fields" class="label remove pointer">{{field}} </span> <span style="margin-left:3px" ng-click="toggle_field(field)" ng-repeat="field in $parent.panel.fields" class="label pointer remove">{{field}} </span>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
......
partials/inspector.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div> <div>
<h5>Last Elasticsearch Query</h5> <h5>Last Elasticsearch Query</h5>
<pre>curl -XGET '{{config.elasticsearch}}/{{dashboard.indices|stringify}}/_search?pretty' -d '{{inspector}}' <pre>curl -XGET '{{config.elasticsearch}}/{{dashboard.indices|stringify}}/_search?pretty' -d '{{inspector}}'
</pre>" </pre>
</div> </div>
</div> </div>
......
vendor/bootstrap/less/overrides.less
...@@ -190,3 +190,16 @@ ...@@ -190,3 +190,16 @@
.faded { .faded {
opacity: 0.2; opacity: 0.2;
} }
div.flot-text {
color: @textColor !important;
}
.dashboard-notice {
z-index:8000;
margin-left:0px;
padding:3px 0px 3px 0px;
width:100%;
color: @textColor;
padding-left:20px;
}
\ No newline at end of file
vendor/bootstrap/less/variables.light.less
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: @white; @bodyBackground: #ffffff;
@textColor: @grayDark; @textColor: @grayDark;
......
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