public/grafana
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #102 from rashidkpc/master

Browse Source 
Moment.js + new color scheme. NOTE: INDEX STRING FORMAT HAS CHANGED
This commit is contained in:
Rashid Khan committed 2013-05-22 11:55:57 -07:00
2 parents 3c361f9834 443d6085e8
commit 6efd85b42b
17 files changed
+7208 -114
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

common/css/bootstrap.dark.min.css
Vendored
+7069
View File
File diff suppressed because it is too large. Load diff
common/css/main.css
+1 -1
View File
@@ -53,7 +53,7 @@
}
.odd {
background-color: #f9f9f9;
background-color: #3a3f44;
}
.nomargin {
common/img/load.gif
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 723 B

common/img/load_big.gif
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

common/lib/moment.js
+6
View File
@@ -0,0 +1,6 @@
// moment.js
// version : 2.0.0
// author : Tim Wood
// license : MIT
// momentjs.com
(function(e){function O(e,t){return function(n){return j(e.call(this,n),t)}}function M(e){return function(t){return this.lang().ordinal(e.call(this,t))}}function _(){}function D(e){H(this,e)}function P(e){var t=this._data={},n=e.years||e.year||e.y||0,r=e.months||e.month||e.M||0,i=e.weeks||e.week||e.w||0,s=e.days||e.day||e.d||0,o=e.hours||e.hour||e.h||0,u=e.minutes||e.minute||e.m||0,a=e.seconds||e.second||e.s||0,f=e.milliseconds||e.millisecond||e.ms||0;this._milliseconds=f+a*1e3+u*6e4+o*36e5,this._days=s+i*7,this._months=r+n*12,t.milliseconds=f%1e3,a+=B(f/1e3),t.seconds=a%60,u+=B(a/60),t.minutes=u%60,o+=B(u/60),t.hours=o%24,s+=B(o/24),s+=i*7,t.days=s%30,r+=B(s/30),t.months=r%12,n+=B(r/12),t.years=n}function H(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e}function B(e){return e<0?Math.ceil(e):Math.floor(e)}function j(e,t){var n=e+"";while(n.length<t)n="0"+n;return n}function F(e,t,n){var r=t._milliseconds,i=t._days,s=t._months,o;r&&e._d.setTime(+e+r*n),i&&e.date(e.date()+i*n),s&&(o=e.date(),e.date(1).month(e.month()+s*n).date(Math.min(o,e.daysInMonth())))}function I(e){return Object.prototype.toString.call(e)==="[object Array]"}function q(e,t){var n=Math.min(e.length,t.length),r=Math.abs(e.length-t.length),i=0,s;for(s=0;s<n;s++)~~e[s]!==~~t[s]&&i++;return i+r}function R(e,t){return t.abbr=e,s[e]||(s[e]=new _),s[e].set(t),s[e]}function U(e){return e?(!s[e]&&o&&require("./lang/"+e),s[e]):t.fn._lang}function z(e){return e.match(/\[.*\]/)?e.replace(/^\[|\]$/g,""):e.replace(/\\/g,"")}function W(e){var t=e.match(a),n,r;for(n=0,r=t.length;n<r;n++)A[t[n]]?t[n]=A[t[n]]:t[n]=z(t[n]);return function(i){var s="";for(n=0;n<r;n++)s+=typeof t[n].call=="function"?t[n].call(i,e):t[n];return s}}function X(e,t){function r(t){return e.lang().longDateFormat(t)||t}var n=5;while(n--&&f.test(t))t=t.replace(f,r);return C[t]||(C[t]=W(t)),C[t](e)}function V(e){switch(e){case"DDDD":return p;case"YYYY":return d;case"YYYYY":return v;case"S":case"SS":case"SSS":case"DDD":return h;case"MMM":case"MMMM":case"dd":case"ddd":case"dddd":case"a":case"A":return m;case"X":return b;case"Z":case"ZZ":return g;case"T":return y;case"MM":case"DD":case"YY":case"HH":case"hh":case"mm":case"ss":case"M":case"D":case"d":case"H":case"h":case"m":case"s":return c;default:return new RegExp(e.replace("\\",""))}}function $(e,t,n){var r,i,s=n._a;switch(e){case"M":case"MM":s[1]=t==null?0:~~t-1;break;case"MMM":case"MMMM":r=U(n._l).monthsParse(t),r!=null?s[1]=r:n._isValid=!1;break;case"D":case"DD":case"DDD":case"DDDD":t!=null&&(s[2]=~~t);break;case"YY":s[0]=~~t+(~~t>68?1900:2e3);break;case"YYYY":case"YYYYY":s[0]=~~t;break;case"a":case"A":n._isPm=(t+"").toLowerCase()==="pm";break;case"H":case"HH":case"h":case"hh":s[3]=~~t;break;case"m":case"mm":s[4]=~~t;break;case"s":case"ss":s[5]=~~t;break;case"S":case"SS":case"SSS":s[6]=~~(("0."+t)*1e3);break;case"X":n._d=new Date(parseFloat(t)*1e3);break;case"Z":case"ZZ":n._useUTC=!0,r=(t+"").match(x),r&&r[1]&&(n._tzh=~~r[1]),r&&r[2]&&(n._tzm=~~r[2]),r&&r[0]==="+"&&(n._tzh=-n._tzh,n._tzm=-n._tzm)}t==null&&(n._isValid=!1)}function J(e){var t,n,r=[];if(e._d)return;for(t=0;t<7;t++)e._a[t]=r[t]=e._a[t]==null?t===2?1:0:e._a[t];r[3]+=e._tzh||0,r[4]+=e._tzm||0,n=new Date(0),e._useUTC?(n.setUTCFullYear(r[0],r[1],r[2]),n.setUTCHours(r[3],r[4],r[5],r[6])):(n.setFullYear(r[0],r[1],r[2]),n.setHours(r[3],r[4],r[5],r[6])),e._d=n}function K(e){var t=e._f.match(a),n=e._i,r,i;e._a=[];for(r=0;r<t.length;r++)i=(V(t[r]).exec(n)||[])[0],i&&(n=n.slice(n.indexOf(i)+i.length)),A[t[r]]&&$(t[r],i,e);e._isPm&&e._a[3]<12&&(e._a[3]+=12),e._isPm===!1&&e._a[3]===12&&(e._a[3]=0),J(e)}function Q(e){var t,n,r,i=99,s,o,u;while(e._f.length){t=H({},e),t._f=e._f.pop(),K(t),n=new D(t);if(n.isValid()){r=n;break}u=q(t._a,n.toArray()),u<i&&(i=u,r=n)}H(e,r)}function G(e){var t,n=e._i;if(w.exec(n)){e._f="YYYY-MM-DDT";for(t=0;t<4;t++)if(S[t][1].exec(n)){e._f+=S[t][0];break}g.exec(n)&&(e._f+=" Z"),K(e)}else e._d=new Date(n)}function Y(t){var n=t._i,r=u.exec(n);n===e?t._d=new Date:r?t._d=new Date(+r[1]):typeof n=="string"?G(t):I(n)?(t._a=n.slice(0),J(t)):t._d=n instanceof Date?new Date(+n):new Date(n)}function Z(e,t,n,r,i){return i.relativeTime(t||1,!!n,e,r)}function et(e,t,n){var i=r(Math.abs(e)/1e3),s=r(i/60),o=r(s/60),u=r(o/24),a=r(u/365),f=i<45&&["s",i]||s===1&&["m"]||s<45&&["mm",s]||o===1&&["h"]||o<22&&["hh",o]||u===1&&["d"]||u<=25&&["dd",u]||u<=45&&["M"]||u<345&&["MM",r(u/30)]||a===1&&["y"]||["yy",a];return f[2]=t,f[3]=e>0,f[4]=n,Z.apply({},f)}function tt(e,n,r){var i=r-n,s=r-e.day();return s>i&&(s-=7),s<i-7&&(s+=7),Math.ceil(t(e).add("d",s).dayOfYear()/7)}function nt(e){var n=e._i,r=e._f;return n===null||n===""?null:(typeof n=="string"&&(e._i=n=U().preparse(n)),t.isMoment(n)?(e=H({},n),e._d=new Date(+n._d)):r?I(r)?Q(e):K(e):Y(e),new D(e))}function rt(e,n){t.fn[e]=t.fn[e+"s"]=function(e){var t=this._isUTC?"UTC":"";return e!=null?(this._d["set"+t+n](e),this):this._d["get"+t+n]()}}function it(e){t.duration.fn[e]=function(){return this._data[e]}}function st(e,n){Line truncated
common/lib/shared.js
+2 -2
View File
@@ -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
+3 -1
View File
@@ -1,6 +1,8 @@
/*
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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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">
@@ -37,7 +37,7 @@
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<p class="navbar-text pull-right"><small><strong>Kibana 3</strong> <small>milestone pre-2</small></small></p>
<p class="navbar-text pull-right"><small><strong>Kibana 3</strong> <small>milestone 2</small></small></p>
<span class="brand">{{dashboards.title}}</span>
<div class="brand"><i class='icon-edit pointer' ng-show='dashboards.editable' bs-modal="'partials/dasheditor.html'"></i></div>
</div>
js/app.js
+1 -3
View File
@@ -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
+10 -15
View File
@@ -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.index = time.index || $scope.index
$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
+9 -6
View File
@@ -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
+9 -9
View File
@@ -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
+21 -12
View File
@@ -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
+18 -18
View File
@@ -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
+3 -3
View File
@@ -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
+53 -41
View File
@@ -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
}
}