Skip to content

N
nexpie-grafana-theme
Commit 9d651e9d by Rashid Khan
Options

Switched to moment.js, updated color scheme

parent 8b34477b
Showing with 131 additions and 112 deletions
common/css/bootstrap.dark.min.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
common/css/main.css
......@@ -53,7 +53,7 @@
}
.odd {
background-color: #f9f9f9;
background-color: #3a3f44;
}
.nomargin {
......
common/img/load.gif
common/img/load.gif

1.97 KB | W: | H:

common/img/load.gif

723 Bytes | W: | H:

common/img/load.gif
common/img/load.gif
common/img/load.gif
common/img/load.gif
  • 2-up
  • Swipe
  • Onion skin
common/img/load_big.gif
common/img/load_big.gif

40.1 KB | W: | H:

common/img/load_big.gif

2.82 KB | W: | H:

common/img/load_big.gif
common/img/load_big.gif
common/img/load_big.gif
common/img/load_big.gif
  • 2-up
  • Swipe
  • Onion skin
common/lib/shared.js
......@@ -110,9 +110,9 @@ function add_to_query(original,field,value,negate) {
*/
function calculate_interval(from,to,size,user_interval) {
if(_.isObject(from))
from = from.getTime();
from = from.valueOf();
if(_.isObject(to))
to = to.getTime();
to = to.valueOf();
return user_interval == 0 ? round_interval((to - from)/size) : user_interval;
}
......
config.js
/*
elasticsearch: URL to your elasticsearch server
elasticsearch: URL to your elasticsearch server. You almost certainly don't
want 'http://localhost:9200' here. Even if Kibana and ES are on
the same host
kibana_index: The default ES index to use for storing Kibana specific object
such as stored dashboards
modules: Panel modules to load. In the future these will be inferred
......
dashboards/default
......@@ -30,7 +30,7 @@
],
"timespan": "6h",
"timefield": "@timestamp",
"index": "\"logstash-\"yyyy.mm.dd",
"index": "[logstash-]YYYY.MM.DD",
"defaultindex": "NOINDEX",
"index_interval": "day",
"refresh": {
......
index.html
......@@ -12,7 +12,7 @@
<title>Kibana 3</title>
<link rel="stylesheet" href="common/css/normalize.min.css">
<link rel="stylesheet" href="common/css/bootstrap.min.css">
<link rel="stylesheet" href="common/css/bootstrap.dark.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/font-awesome.min.css">
......
js/app.js
......@@ -28,9 +28,7 @@ var labjs = $LAB
.script("common/lib/angular-sanitize.min.js")
.script("common/lib/elastic.min.js")
.script("common/lib/elastic-angular-client.js")
.script("common/lib/dateformat.js")
.script("common/lib/date.js")
.script("common/lib/datepicker.js")
.script("common/lib/moment.js")
.script("common/lib/shared.js")
.script("common/lib/filesaver.js")
.script("js/services.js")
......
panels/histogram/module.js
......@@ -249,11 +249,7 @@ angular.module('kibana.histogram', [])
$scope.set_time = function(time) {
$scope.time = time;
// Should I be storing the index on the panel? It causes errors if the index
// goes away. Hmmm.
$scope.index = time.index || $scope.index
// Only calculate interval if auto_int is set, otherwise don't touch it
$scope.get_data();
}
......@@ -305,21 +301,21 @@ angular.module('kibana.histogram', [])
points: { show: scope.panel.points, fill: 1, fillColor: false, radius: 5},
shadowSize: 1
},
yaxis: { show: scope.panel['y-axis'], min: 0, color: "#000" },
yaxis: { show: scope.panel['y-axis'], min: 0, color: "#c8c8c8" },
xaxis: {
timezone: scope.panel.timezone,
show: scope.panel['x-axis'],
mode: "time",
timeformat: time_format(scope.panel.interval),
label: "Datetime",
color: "#000",
color: "#c8c8c8",
},
selection: {
mode: "x",
color: '#ccc'
},
grid: {
backgroundColor: '#fff',
backgroundColor: '#272b30',
borderWidth: 0,
borderColor: '#eee',
color: "#eee",
......@@ -359,13 +355,12 @@ angular.module('kibana.histogram', [])
position: 'absolute',
top : y + 5,
left : x + 5,
color : "#000",
border : '1px solid #000',
color : "#c8c8c8",
padding : '10px',
'font-size': '11pt',
'font-weight' : 200,
'background-color': '#FFF',
'border-radius': '10px',
'background-color': '#1f1f1f',
'border-radius': '5px',
}).appendTo("body");
}
......@@ -374,15 +369,15 @@ angular.module('kibana.histogram', [])
tt(pos.pageX, pos.pageY,
"<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:15px;width:15px;border-radius:10px;'></div> "+
item.datapoint[1].toFixed(0) + " @ " +
new Date(item.datapoint[0]).format('mm/dd HH:MM:ss'));
moment(item.datapoint[0]).format('MM/DD HH:mm:ss'));
} else {
$("#pie-tooltip").remove();
}
});
elem.bind("plotselected", function (event, ranges) {
scope.time.from = new Date(ranges.xaxis.from);
scope.time.to = new Date(ranges.xaxis.to)
scope.time.from = moment(ranges.xaxis.from);
scope.time.to = moment(ranges.xaxis.to)
eventBus.broadcast(scope.$id,scope.panel.group,'set_time',scope.time)
});
}
......
panels/hits/module.js
......@@ -181,10 +181,10 @@ angular.module('kibana.hits', [])
bars: { show: true, fill: 1, barWidth: 0.8, horizontal: false },
shadowSize: 1
},
yaxis: { show: true, min: 0, color: "#000" },
yaxis: { show: true, min: 0, color: "#c8c8c8" },
xaxis: { show: false },
grid: {
backgroundColor: '#fff',
backgroundColor: '#272b30',
borderWidth: 0,
borderColor: '#eee',
color: "#eee",
......@@ -205,6 +205,10 @@ angular.module('kibana.hits', [])
color: '#999',
label: 'The Rest'
},
stroke: {
color: '#272b30',
width: 0
},
label: {
show: scope.panel.labels,
radius: 2/3,
......@@ -243,13 +247,12 @@ angular.module('kibana.hits', [])
position: 'absolute',
top : y + 5,
left : x + 5,
color : "#000",
border : '2px solid #000',
color : "#c8c8c8",
padding : '10px',
'font-size': '11pt',
'font-weight' : 200,
'background-color': '#FFF',
'border-radius': '10px',
'background-color': '#1f1f1f',
'border-radius': '5px',
}).appendTo("body");
}
......
panels/map/module.js
......@@ -34,7 +34,7 @@ angular.module('kibana.map', [])
var _d = {
query : "*",
map : "world",
colors : ['#C8EEFF', '#0071A4'],
colors : ['#A0E2E2', '#265656'],
size : 100,
exclude : [],
spyable : true,
......@@ -143,9 +143,9 @@ angular.module('kibana.map', [])
$('.jvectormap-zoomin,.jvectormap-zoomout,.jvectormap-label').remove();
var map = elem.vectorMap({
map: scope.panel.map,
regionStyle: {initial: {fill: '#ddd'}},
regionStyle: {initial: {fill: '#8c8c8c'}},
zoomOnScroll: false,
backgroundColor: '#fff',
backgroundColor: '#272b30',
series: {
regions: [{
values: scope.data,
......@@ -157,12 +157,12 @@ angular.module('kibana.map', [])
$('.jvectormap-label').css({
"position" : "absolute",
"display" : "none",
"border" : "solid 2px #000",
"background" : "#FFF",
"font-weight" : 200,
"border-radius": "5px",
"color" : "#000",
"padding" : "5px"
'color' : "#c8c8c8",
'padding' : '10px',
'font-size': '11pt',
'font-weight' : 200,
'background-color': '#1f1f1f',
'border-radius': '5px'
})
var count = _.isUndefined(scope.data[code]) ? 0 : scope.data[code];
$('.jvectormap-label').text(label.text() + ": " + count);
......
panels/pie/module.js
......@@ -156,8 +156,8 @@ angular.module('kibana.pie', [])
var complete = results.hits.total;
var remaining = $scope.panel.query.goal - complete;
$scope.data = [
{ label : 'Complete', data : complete, color: '#86B22D' },
{ data : remaining, color: '#EEE'}]
{ label : 'Complete', data : complete, color: '#BF6730' },
{ data : remaining, color: '#e2d0c4'}]
$scope.$emit('render');
});
}
......@@ -214,9 +214,9 @@ angular.module('kibana.pie', [])
show: scope.panel.labels,
radius: 0,
formatter: function(label, series){
var font = parseInt(scope.row.height.replace('px',''))/10 + String('px')
var font = parseInt(scope.row.height.replace('px',''))/8 + String('px')
if(!(_.isUndefined(label)))
return '<div style="font-size:'+font+';font-weight:bold;text-align:center;padding:2px;color:black;">'+
return '<div style="font-size:'+font+';font-weight:bold;text-align:center;padding:2px;color:#fff;">'+
Math.round(series.percent)+'%</div>';
else
return ''
......@@ -236,7 +236,7 @@ angular.module('kibana.pie', [])
var pie = {
series: {
pie: {
innerRadius: scope.panel.donut ? 0.4 : 0,
innerRadius: scope.panel.donut ? 0.45 : 0,
tilt: scope.panel.tilt ? 0.45 : 1,
radius: 1,
show: true,
......@@ -244,11 +244,19 @@ angular.module('kibana.pie', [])
color: '#999',
label: 'The Rest'
},
label: label
label: label,
stroke: {
color: '#272b30',
width: 0
}
}
},
//grid: { hoverable: true, clickable: true },
grid: { hoverable: true, clickable: true },
grid: {
backgroundColor: '#272b30',
hoverable: true,
clickable: true
},
legend: { show: false },
colors: ['#86B22D','#BF6730','#1D7373','#BFB930','#BF3030','#77207D']
};
......@@ -264,16 +272,17 @@ angular.module('kibana.pie', [])
function piett(x, y, contents) {
var tooltip = $('#pie-tooltip').length ?
$('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
tooltip.html(contents).css({
position: 'absolute',
top : y + 10,
left : x + 10,
color : "#000",
'font-weight': 200,
'border-radius': '5px',
border : '2px solid #000',
color : "#c8c8c8",
padding : '10px',
'background-color': '#FFF',
'font-size': '11pt',
'font-weight' : 200,
'background-color': '#1f1f1f',
'border-radius': '5px',
}).appendTo("body");
}
......
panels/stringquery/module.html
......@@ -5,42 +5,42 @@
<tr><td><label><small>{{panel.label}}</small></label></td></tr>
<tr>
<td width="97%" style="padding-right:20px">
<input type="text" style="width:100%" ng-model="panel.query">
<span style="position:relative">
<i class="icon-remove-sign pointer" style="position:absolute;left:10px;top:3px" ng-show="panel.query.length > 0" ng-click="panel.query='';send_query(panel.query)"></i>
<input type="text" style="text-indent:20px;width:100%" ng-model="panel.query">
</span>
</td>
<td style="margin-left:20px" width="1%">
<button style="margin-top:0px" type="submit" class="btn btn-info" ng-click="send_query(panel.query)"><i class="icon-search"></i></button>
</td>
<td width="1%">
<button style="margin-top:0px" type="submit" class="btn btn-danger" ng-click="panel.query='';send_query(panel.query)"><i class="icon-ban-circle"></i></button>
</td>
<td width="1%">
<button style="margin-top:0px" ng-show="panel.multi" type="submit" class="btn" ng-click="add_query()"><i class="icon-plus"></i></button>
<button style="margin-top:0px" type="submit" class="btn btn-success btn-small" ng-click="send_query(panel.query)"><i class="icon-search"></i></button>
</td>
<tr>
</table>
</form>
</div>
<div class='row-fluid' ng-show="panel.multi && panel.multi_arrange == 'horizontal'">
<form class="form-inline" style="width:100%;margin:0px" >
<span ng-repeat="q in panel.query">
<span class="input-append" style="margin-bottom:0px;margin-right:5px">
<button class="btn btn-danger" type="submit" style="width:50px;margin-left:-50px;visibility:hidden"></button>
<input style="margin-bottom:5px;" type="text" ng-model="panel.query[$index]" ng-model-onblur style="width:90%">
<button class="btn btn-danger" ng-show="panel.query.length > 1" ng-click="remove_query($index);send_query(panel.query)"><i class="icon-minus"></i></button><br>
<span style="margin-bottom:0px;margin-right:5px;display:inline-block;position:relative">
<i class="icon-remove-sign pointer" style="position:absolute;left:10px;top:8px" ng-show="panel.query.length > 1" ng-click="remove_query($index);send_query(panel.query)"></i>
<input style="margin-bottom:5px; text-indent: 20px;" type="text" ng-model="panel.query[$index]" ng-model-onblur style="width:90%">
<br>
</span>
</span>
</form>
<br>
<button type="submit" class="btn btn-info" ng-click="send_query(panel.query)"><i class="icon-search"></i> Search</button>
<button type="submit" class="btn" ng-click="add_query();"><i class="icon-plus"></i> Add Query</button>
<button type="submit" class="btn" ng-click="add_query();"><i class="icon-plus"></i></button>
</div>
<div ng-show="panel.multi && panel.multi_arrange == 'vertical'">
<form>
<table class="form-horizontal">
<table class="form-horizontal" style="margin-bottom:5px;">
<tr><td class="small">Queries</td></tr>
<tr ng-repeat="q in panel.query" style="margin-bottom:10px">
<td width="99%"><input type="text" ng-model="panel.query[$index]" ng-model-onblur style="width:100%"></td>
<td width="99%">
<span style="position:relative">
<i class="icon-remove-sign pointer" style="position:absolute;left:10px;top:3px" ng-show="panel.query.length > 1" ng-click="remove_query($index);send_query(panel.query)"></i>
<input type="text" ng-model="panel.query[$index]" ng-model-onblur style="text-indent: 20px;width:100%">
</span>
</td>
<td width="1%" style="visibility:hidden"><button class="btn btn-info" type="submit"></button></td>
<td width="1%"><button class="btn btn-danger" ng-show="panel.query.length > 1" ng-click="remove_query($index);send_query(panel.query)"><i class="icon-minus"></i></button></td>
</tr>
</table>
<button type="submit" class="btn btn-info" ng-click="send_query(panel.query)"><i class="icon-search"></i> Search</button>
......
panels/timepicker/editor.html
......@@ -17,12 +17,12 @@
indices that match a specified timestamp pattern. This can be very
efficient for some data sets (eg, logs) For example, to match the
default logstash index pattern you might use
<code>"logstash-"yyyy.mm.dd</code>. The quotes around "logstash-" are
<code>[logstash-]YYYY.MM.DD</code>. The [] in "[logstash-]" are
important as they instruct Kibana not to treat those letters as a
pattern.
</p>
<p class="small">
See <a href="http://blog.stevenlevithan.com/archives/date-time-format">http://blog.stevenlevithan.com/archives/date-time-format</a>
See <a href="http://momentjs.com/docs/#/displaying/format/">http://momentjs.com/docs/#/displaying/format/</a>
for documentation on date formatting.
</p>
......@@ -33,7 +33,7 @@
<h6>Timestamp</h6><select class="input-mini" ng-model="panel.index_interval" ng-options='f for f in ["none","hour","day","week","month","year"]'></select>
</div>
<div class="span5">
<h6>Index <span ng-show="panel.index_interval != 'none'">pattern <small>Absolutes in double quotes</small></span></h6>
<h6>Index <span ng-show="panel.index_interval != 'none'">pattern <small>Absolutes in []</small></span></h6>
<input type="text" class="input-medium" ng-model="panel.index">
</div>
<div class="span4">
......
panels/timepicker/module.js
......@@ -39,6 +39,7 @@ angular.module('kibana.timepicker', [])
index : '_all',
defaultindex : "_all",
index_interval: "none",
timeformat : "",
group : "default",
refresh : {
enable : false,
......@@ -60,20 +61,20 @@ angular.module('kibana.timepicker', [])
switch($scope.panel.mode) {
case 'absolute':
$scope.time = {
from : new Date(Date.parse($scope.panel.time.from)) || time_ago($scope.panel.timespan),
to : new Date(Date.parse($scope.panel.time.to)) || new Date()
from : moment($scope.panel.time.from,'YYYY-MM-DD HH:mm:ss') || moment(time_ago($scope.panel.timespan)),
to : moment($scope.panel.time.to,'YYYY-MM-DD HH:mm:ss') || moment()
}
break;
case 'since':
$scope.time = {
from : new Date(Date.parse($scope.panel.time.from)) || time_ago($scope.panel.timespan),
to : new Date() || new Date()
from : moment($scope.panel.time.from,'YYYY-MM-DD HH:mm:ss') || moment(time_ago($scope.panel.timespan)),
to : moment()
}
break;
case 'relative':
$scope.time = {
from : time_ago($scope.panel.timespan),
to : new Date()
from : moment(time_ago($scope.panel.timespan)),
to : moment()
}
break;
}
......@@ -88,26 +89,26 @@ angular.module('kibana.timepicker', [])
// request one be sent by broadcasting a 'get_time' with its _id to its group
// This panel can handle multiple groups
eventBus.register($scope,"get_time", function(event,id) {
eventBus.broadcast($scope.$id,id,'time',$scope.time)
eventBus.broadcast($scope.$id,id,'time',unmoment($scope.time))
});
// In case some other panel broadcasts a time, set us to an absolute range
eventBus.register($scope,"set_time", function(event,time) {
$scope.panel.mode = 'absolute';
set_timepicker(time.from,time.to)
set_timepicker(moment(time.from),moment(time.to))
$scope.time_apply()
});
eventBus.register($scope,"zoom", function(event,factor) {
var _timespan = ($scope.time.to.getTime() - $scope.time.from.getTime());
var _timespan = ($scope.time.to.valueOf() - $scope.time.from.valueOf());
try {
if($scope.panel.mode != 'absolute') {
$scope.panel.mode = 'since'
set_timepicker(new Date($scope.time.to.getTime() - _timespan*factor),$scope.time.to)
set_timepicker(moment($scope.time.to.valueOf() - _timespan*factor),$scope.time.to)
} else {
var _center = $scope.time.to - _timespan/2
set_timepicker(new Date(_center - (_timespan*factor)/2),
new Date(_center + (_timespan*factor)/2))
var _center = $scope.time.to.valueOf() - _timespan/2
set_timepicker(moment(_center - (_timespan*factor)/2),
moment(_center + (_timespan*factor)/2))
}
} catch (e) {
console.log(e)
......@@ -152,16 +153,16 @@ angular.module('kibana.timepicker', [])
$scope.to_now = function() {
$scope.timepicker.to = {
time : new Date().format("HH:MM:ss"),
date : new Date().format("mm/dd/yyyy")
time : moment().format("HH:mm:ss"),
date : moment().format("MM/DD/YYYY")
}
}
$scope.set_timespan = function(timespan) {
$scope.panel.timespan = timespan;
$scope.timepicker.from = {
time : time_ago(timespan).format("HH:MM:ss"),
date : time_ago(timespan).format("mm/dd/yyyy")
time : moment(time_ago(timespan)).format("HH:mm:ss"),
date : moment(time_ago(timespan)).format("MM/DD/YYYY")
}
$scope.time_apply();
}
......@@ -172,22 +173,22 @@ angular.module('kibana.timepicker', [])
//
$scope.time_calc = function(){
// If time picker is defined (on initialization)
// If time picker is defined (usually is)
if(!(_.isUndefined($scope.timepicker))) {
var from = $scope.panel.mode === 'relative' ? time_ago($scope.panel.timespan) :
new Date(Date.parse($scope.timepicker.from.date + " " + $scope.timepicker.from.time))
var to = $scope.panel.mode !== 'absolute' ? new Date() :
new Date(Date.parse($scope.timepicker.to.date + " " + $scope.timepicker.to.time))
// Otherwise
var from = $scope.panel.mode === 'relative' ? moment(time_ago($scope.panel.timespan)) :
moment($scope.timepicker.from.date + " " + $scope.timepicker.from.time,'MM/DD/YYYY HH:mm:ss')
var to = $scope.panel.mode !== 'absolute' ? moment() :
moment($scope.timepicker.to.date + " " + $scope.timepicker.to.time,'MM/DD/YYYY HH:mm:ss')
// Otherwise (probably initialization)
} else {
var from = $scope.panel.mode === 'relative' ? time_ago($scope.panel.timespan) :
var from = $scope.panel.mode === 'relative' ? moment(time_ago($scope.panel.timespan)) :
$scope.time.from;
var to = $scope.panel.mode !== 'absolute' ? new Date() :
var to = $scope.panel.mode !== 'absolute' ? moment() :
$scope.time.to;
}
if (from.getTime() >= to.getTime())
from = new Date(to.getTime() - 1000)
if (from.valueOf() >= to.valueOf())
from = moment(to.valueOf() - 1000)
$timeout(function(){
set_timepicker(from,to)
......@@ -209,11 +210,11 @@ angular.module('kibana.timepicker', [])
if($scope.panel.index_interval !== 'none') {
indices($scope.time.from,$scope.time.to).then(function (p) {
$scope.time.index = p;
eventBus.broadcast($scope.$id,$scope.panel.group,'time',$scope.time)
eventBus.broadcast($scope.$id,$scope.panel.group,'time',unmoment($scope.time))
});
} else {
$scope.time.index = [$scope.panel.index];
eventBus.broadcast($scope.$id,$scope.panel.group,'time',$scope.time)
eventBus.broadcast($scope.$id,$scope.panel.group,'time',unmoment($scope.time))
}
// Update panel's string representation of the time object.Don't update if
......@@ -221,8 +222,8 @@ angular.module('kibana.timepicker', [])
// json for relative periods
if($scope.panel.mode !== 'relative') {
$scope.panel.time = {
from : $scope.time.from.format("mm/dd/yyyy HH:MM:ss"),
to : $scope.time.to.format("mm/dd/yyyy HH:MM:ss"),
from : $scope.time.from.format("MM/DD/YYYY HH:mm:ss"),
to : $scope.time.to.format("MM/DD/YYYY HH:mm:ss"),
index : $scope.time.index,
};
} else {
......@@ -230,16 +231,25 @@ angular.module('kibana.timepicker', [])
}
};
// Prefer to pass around Date() objects in the EventBus since interacting with
// moment objects in libraries that are expecting Date()s can be tricky
function unmoment(time) {
time = _.clone(time)
time.from = time.from.toDate()
time.to = time.to.toDate()
return time;
}
function set_timepicker(from,to) {
// Janky 0s timeout to get around $scope queue processing view issue
$scope.timepicker = {
from : {
time : from.format("HH:MM:ss"),
date : from.format("mm/dd/yyyy")
time : from.format("HH:mm:ss"),
date : from.format("MM/DD/YYYY")
},
to : {
time : to.format("HH:MM:ss"),
date : to.format("mm/dd/yyyy")
time : to.format("HH:mm:ss"),
date : to.format("MM/DD/YYYY")
}
}
}
......@@ -282,8 +292,10 @@ angular.module('kibana.timepicker', [])
// I extract the date from an object that I'm get the UTC date. Stupid js.
// I die a little inside every time I call this function.
// Update: I just read this again. I died a little more inside.
// Update2: More death.
function fake_utc(date) {
return new Date(date.getTime() + date.getTimezoneOffset() * 60000);
date = date.clone().toDate()
return moment(new Date(date.getTime() + date.getTimezoneOffset() * 60000));
}
// Create an array of date objects by a given interval
......@@ -296,19 +308,19 @@ angular.module('kibana.timepicker', [])
range.push(start.clone());
switch (interval) {
case 'hour':
start.addHours(1)
start.add('hours',1)
break
case 'day':
start.addDays(1)
start.add('days',1)
break
case 'week':
start.addWeeks(1)
start.add('weeks',1)
break
case 'month':
start.addMonths(1)
start.add('months',1)
break
case 'year':
start.addYears(1)
start.add('years',1)
break
}
}
......
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