pub/fnordmetric.js in fnordmetric-0.5.5 vs pub/fnordmetric.js in fnordmetric-0.5.6
- old
+ new
@@ -1,7 +1,7 @@
var FnordMetric = (function(){
-
+
var canvasElem = false;
var currentNamespace = false;
var currentView = false;
var currentWidgetUID=23;
@@ -31,11 +31,11 @@
return '1 day';
} else {
return parseInt(range/(3600*24)) + ' days';
}
}
-
+
function formatTimeSince(time){
var now = new Date().getTime()/1000;
var since = now - time;
return formatTimeRange(since);
}
@@ -55,17 +55,17 @@
return formatTimeRange(offset) + ' ago';
}
}
function formatValue(value){
- if(value < 10){
- return value.toFixed(2);
- } else if(value > 1000){
- return (value/1000.0).toFixed(1) + "k";
+ if(value < 10){
+ return value.toFixed(2);
+ } else if(value > 1000){
+ return (value/1000.0).toFixed(1) + "k";
} else {
- return value.toFixed(0);
- }
+ return value.toFixed(0);
+ }
}
function getNextWidgetUID(){
return (currentWidgetUID += 1);
}
@@ -93,12 +93,12 @@
$('<div></div>')
.attr('class', 'button mr')
.attr('rel', k)
.append(
$('<span></span>').html(opts.gauges[k].title)
- ).click(function(){
- loadGauge($(this).attr('rel'));
+ ).click(function(){
+ loadGauge($(this).attr('rel'));
}
)
);
if(first){
first = false;
@@ -114,19 +114,19 @@
loadGauge(false, true);
}, secs*1000);
$('body').bind('fm_dashboard_close', function(){
window.clearInterval(autoupdate_interval);
- });
+ });
}
};
-
+
function loadGauge(gkey, silent){
if(!gkey){ gkey = current_gauge; }
current_gauge = gkey;
if(!silent){ $('.toplist_inner', opts.elem).addClass('loading'); }
- var _url = '/' + currentNamespace + '/gauge/' + gkey;
+ var _url = FnordMetric.p + '/' + currentNamespace + '/gauge/' + gkey;
$.get(_url, function(_resp){
var resp = JSON.parse(_resp);
renderGauge(gkey, resp);
})
}
@@ -145,52 +145,52 @@
}
return {
- render: render
+ render: render
};
};
var numbersWidget = function(){
-
+
function render(opts){
opts.elem.append(
$('<div class="headbar small"></div>').html(opts.title)
).css({
'marginBottom': 20,
'overflow': 'hidden'
});
for(k in opts.gauges){
- var gtick = parseInt(opts.gauges[k].tick);
+ var gtick = parseInt(opts.gauges[k].tick);
var gtitle = opts.gauges[k].title;
var container = $('<div></div>')
.addClass('numbers_container')
.addClass('size_'+opts.offsets.length)
- .attr('rel', k)
+ .attr('rel', k)
.append(
$('<div></div>')
.addClass('title')
.html(gtitle)
);
-
+
$(opts.offsets).each(function(n, offset){
var _off, _nextoff, _sum;
if (offset[0]=="s"){
_off = 0;
_sum = _nextoff = (gtick * parseInt(offset.slice(1)));
} else {
_sum = 0;
_off = offset*gtick;
- _nextoff = gtick;
- }
+ _nextoff = gtick;
+ }
container.append(
$('<div></div>')
.addClass('number')
.attr('rel', k)
.attr('data-offset', _off)
@@ -216,36 +216,36 @@
updateValues(opts);
}, secs*1000);
$('body').bind('fm_dashboard_close', function(){
window.clearInterval(autoupdate_interval);
- });
+ });
}
};
updateValues(opts);
-
+
}
function updateValues(opts){
var values = $('.number', $(opts.elem));
var values_pending = values.length;
values.each(function(){
var _sum = parseInt($(this).attr('data-sum'));
var num = this;
var at = parseInt(new Date().getTime()/1000);
- var url = '/' + currentNamespace + '/gauge/' + $(this).attr('rel');
+ var url = FnordMetric.p + '/' + currentNamespace + '/gauge/' + $(this).attr('rel');
if(_sum > 0){
url += '?at='+(at-_sum)+'-'+at+'&sum=true';
} else {
at -= parseInt($(this).attr('data-offset'));
url += '?at='+at;
}
-
- $.get(url, function(_resp){
+
+ $.get(url, function(_resp){
var resp = JSON.parse(_resp);
for(_k in resp){
$(num).attr('data', (resp[_k]||0));
}
if((values_pending -= 1)==0){
@@ -259,75 +259,75 @@
var still_running = false;
$('.number', $(opts.elem)).each(function(){
var target_val = parseFloat($(this).attr('data'));
var current_val = parseFloat($(this).attr('data-current'));
if(!current_val){ current_val=0; }
- var diff = (target_val-current_val)/diff_factor;
+ var diff = (target_val-current_val)/diff_factor;
if(diff < 1){ diff=1; }
- if(target_val > current_val){
+ if(target_val > current_val){
still_running = true;
var new_val = current_val+diff;
if(new_val > target_val){ new_val = target_val; }
$(this).attr('data-current', new_val);
$('.value', this).html(formatValue(new_val));
}
});
- if(still_running){
+ if(still_running){
(function(df){
window.setTimeout(function(){ updateDisplay(opts, df); }, 30);
})(diff_factor);
}
}
return {
- render: render
+ render: render
};
};
var timelineWidget = function(){
-
+
function render(opts){
-
+
var widget_uid = getNextWidgetUID();
var chart=false;
var max_y=0;
function redrawWithRange(first_time, silent){
if(!silent){ $(opts.elem).css('opacity', 0.5); }
- redrawDatepicker();
- var _query = '?at='+opts.start_timestamp+'-'+opts.end_timestamp;
+ redrawDatepicker();
+ var _query = '?at='+opts.start_timestamp+'-'+opts.end_timestamp;
//chart.series = [];
max_y=0;
//metrics_completed = 0;
$(opts.gauges).each(function(i,gauge){
$.ajax({
- url: '/'+currentNamespace+'/gauge/'+gauge+_query,
+ url: FnordMetric.p + '/' + currentNamespace +'/gauge/'+gauge+_query,
success: redrawGauge(first_time, gauge)
- });
+ });
});
}
function redrawGauge(first_time, gauge){
- return (function(json){
+ return (function(json){
var raw_data = JSON.parse(json);
var series_data = [];
- for(p in raw_data){
- series_data.push([parseInt(p)*1000, raw_data[p]||0]);
+ for(p in raw_data){
+ series_data.push([parseInt(p)*1000, raw_data[p]||0]);
max_y = Math.max(max_y, raw_data[p]);
}
-
- if(!first_time){
- chart.get('series-'+gauge).setData(series_data);
+
+ if(!first_time){
+ chart.get('series-'+gauge).setData(series_data);
} else {
chart.addSeries({
- name: opts.gauge_titles[gauge],
- data: series_data,
- id: 'series-'+gauge
- });
- }
+ name: opts.gauge_titles[gauge],
+ data: series_data,
+ id: 'series-'+gauge
+ });
+ }
chart.yAxis[0].setExtremes(0,max_y);
chart.redraw();
// shown on the *first* gauge load
@@ -335,23 +335,23 @@
});
}
function redrawDatepicker(){
$('.datepicker', opts.elem).html(
- Highcharts.dateFormat('%d.%m.%y %H:%M', parseInt(opts.start_timestamp)*1000) +
+ Highcharts.dateFormat('%d.%m.%y %H:%M', parseInt(opts.start_timestamp)*1000) +
' ‐ ' +
- Highcharts.dateFormat('%d.%m.%y %H:%M', parseInt(opts.end_timestamp)*1000)
+ Highcharts.dateFormat('%d.%m.%y %H:%M', parseInt(opts.end_timestamp)*1000)
);
}
function moveRange(direction){
v = opts.tick*direction*8;
opts.start_timestamp += v;
opts.end_timestamp += v;
redrawWithRange();
}
-
+
function drawLayout(){
$(opts.elem).append( $('<div></div>').attr('class', 'headbar').append(
$('<div></div>').attr('class', 'button mr').append($('<span></span>').html('refresh')).click(
function(){ redrawWithRange(); }
)
@@ -365,35 +365,35 @@
$('<div></div>').attr('class', 'button').append($('<span></span>').html('←')).click(
function(){ moveRange(-1); }
)
).append(
$('<h2></h2>').html(opts.title)
- ) ).append(
+ ) ).append(
$('<div></div>').attr('id', 'container-'+widget_uid).css({
height: 256,
marginBottom: 20,
overflow: 'hidden'
})
);
}
function drawChart(){
- chart = new Highcharts.Chart({
- chart: {
- renderTo: 'container-'+widget_uid,
- defaultSeriesType: opts.plot_style,
- height: 270
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container-'+widget_uid,
+ defaultSeriesType: opts.plot_style,
+ height: 270
},
series: [],
title: { text: '' },
- xAxis: {
+ xAxis: {
type: 'datetime',
- tickInterval: opts.tick * 1000,
- title: (opts.x_title||''),
- labels: { step: 2 }
+ tickInterval: opts.tick * 1000,
+ title: (opts.x_title||''),
+ labels: { step: 2 }
},
- yAxis: {
+ yAxis: {
title: (opts.y_title||''),
min: 0,
max: 1000
},
legend: {
@@ -435,45 +435,45 @@
redrawWithRange(false, true);
}, secs*1000);
$('body').bind('fm_dashboard_close', function(){
window.clearInterval(autoupdate_interval);
- });
+ });
}
};
}
return {
- render: render
+ render: render
};
};
var barsWidget = function(){
-
+
function render(opts){
-
+
var widget_uid = getNextWidgetUID();
var chart=false;
var max_y=0;
function redraw(first_time, silent){
if(!silent){ $(opts.elem).css('opacity', 0.5); }
max_y=0;
$(opts.gauges).each(function(i,gauge){
$.ajax({
- url: '/'+currentNamespace+'/gauge/'+gauge,
+ url: FnordMetric.p + '/' + currentNamespace +'/gauge/'+gauge,
success: redrawGauge(first_time, gauge)
- });
+ });
});
}
function redrawGauge(first_time, gauge){
- return (function(json){
+ return (function(json){
var raw_data = JSON.parse(json);
var series_data = [];
var series_type;
var label_data = [];
@@ -485,32 +485,32 @@
if(opts.order_by == 'field'){
raw_data.values.sort(function(a,b){
if(a[0] == b[0]){
return 0;
- }else if(a[0] > b[0]){
+ }else if(a[0] > b[0]){
return 1;
} else {
return -1;
}
});
}
-
- for(p in raw_data.values){
- label_data.push(raw_data.values[p][0]||'?');
- series_data.push(parseInt(raw_data.values[p][1]||0));
+
+ for(p in raw_data.values){
+ label_data.push(raw_data.values[p][0]||'?');
+ series_data.push(parseInt(raw_data.values[p][1]||0));
//max_y = Math.max(max_y, raw_data[p]);
}
-
- chart = new Highcharts.Chart({
- chart: {
- renderTo: 'container-'+widget_uid,
- defaultSeriesType: series_type,
- height: 270
+
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container-'+widget_uid,
+ defaultSeriesType: series_type,
+ height: 270
},
title: { text: '' },
- xAxis: {
+ xAxis: {
categories: label_data
},
yAxis: {
title: { text: '' }
},
@@ -538,19 +538,19 @@
//chart.redraw();
$(opts.elem).css('opacity', 1);
});
}
-
+
function drawLayout(){
$(opts.elem).append( $('<div></div>').attr('class', 'headbar').append(
$('<div></div>').attr('class', 'button mr').append($('<span></span>').html('refresh')).click(
function(){ redraw(); }
)
).append(
$('<h2></h2>').html(opts.title)
- ) ).append(
+ ) ).append(
$('<div></div>').attr('id', 'container-'+widget_uid).css({
height: 256,
marginBottom: 20,
overflow: 'hidden'
})
@@ -558,73 +558,73 @@
}
drawLayout();
redraw(true);
- if(opts.autoupdate){
+ if(opts.autoupdate){
var autoupdate_interval = window.setInterval(function(){
redraw(false, true);
}, opts.autoupdate*1000);
$('body').bind('fm_dashboard_close', function(){
window.clearInterval(autoupdate_interval);
- });
+ });
}
}
return {
- render: render
+ render: render
};
};
var pieWidget = function(){
-
+
function render(opts){
-
+
var widget_uid = getNextWidgetUID();
var chart=false;
function redraw(first_time, silent){
if(!silent){ $(opts.elem).css('opacity', 0.5); }
var gauge_values = {};
var gauges_left = opts.gauges.length;
var at = parseInt(new Date().getTime()/1000);
$(opts.gauges).each(function(i,gauge){
$.ajax({
- url: '/'+currentNamespace+'/gauge/'+gauge+'?at='+at,
+ url: FnordMetric.p + '/' + currentNamespace+'/gauge/'+gauge+'?at='+at,
success: function(_resp){
var resp = JSON.parse(_resp);
gauges_left -= 1;
- for(_tk in resp){
+ for(_tk in resp){
gauge_values[gauge] = parseInt(resp[_tk]||0);
}
if(gauges_left==0){
redrawChart(first_time, gauge_values);
}
}
- });
+ });
});
}
- function redrawChart(first_time, gauge_values){
-
+ function redrawChart(first_time, gauge_values){
+
var series_data = [];
-
+
for(_gkey in gauge_values){
series_data.push([
opts.gauge_titles[_gkey],
gauge_values[_gkey]
]);
- }
-
- chart = new Highcharts.Chart({
- chart: {
- renderTo: 'container-'+widget_uid,
- defaultSeriesType: 'pie',
+ }
+
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container-'+widget_uid,
+ defaultSeriesType: 'pie',
height: 270,
spacingTop: 5,
spacingBottom: 30
},
credits: {
@@ -662,45 +662,45 @@
});
//chart.redraw();
$(opts.elem).css('opacity', 1);
}
-
+
function drawLayout(){
$(opts.elem).append( $('<div></div>').attr('class', 'headbar small').append(
$('<span></span>').html(opts.title)
- ) ).append(
+ ) ).append(
$('<div></div>').attr('id', 'container-'+widget_uid).css({
height: 270
})
);
}
drawLayout();
redraw(true);
- if(opts.autoupdate){
+ if(opts.autoupdate){
var autoupdate_interval = window.setInterval(function(){
redraw(false, true);
}, opts.autoupdate*1000);
$('body').bind('fm_dashboard_close', function(){
window.clearInterval(autoupdate_interval);
- });
+ });
}
}
return {
- render: render
+ render: render
};
};
var sessionView = (function(){
-
+
var listElem = $('<ul class="session_list"></ul>');
var feedInnerElem = $('<ul class="feed_inner"></ul>');
var typeListElem = $('<ul class="event_type_list"></ul>');
var filterElem = $('<div class="events_sidebar"></div>').html(
$('<div class="headbar small"></div>').html('Event Types')
@@ -743,20 +743,20 @@
}
function doSessionPoll(){
return (function(){
$.ajax({
- url: '/'+currentNamespace+'/sessions',
+ url: FnordMetric.p + '/' + currentNamespace+'/sessions',
success: callbackSessionPoll()
});
});
};
function loadEventHistory(event_type){
feedInnerElem.html('');
$.ajax({
- url: '/'+currentNamespace+'/events?type='+event_type,
+ url: FnordMetric.p + '/' + currentNamespace+'/events?type='+event_type,
success: function(_data, _status){
var data = JSON.parse(_data).events;
for(var n=data.length; n >= 0; n--){
if(data[n]){ renderEvent(data[n]); }
}
@@ -765,36 +765,38 @@
}
function callbackSessionPoll(){
return (function(_data, _status){
$.each(JSON.parse(_data).sessions, function(i,v){
- updateSession(v);
+ updateSession(v);
});
sortSessions();
});
};
function loadEventTypes(){
$.ajax({
- url: '/'+currentNamespace+'/event_types',
+ url: FnordMetric.p + '/' + currentNamespace+'/event_types',
success: function(_data){
var data = JSON.parse(_data);
$(data.types).each(function(i,v){
- if(v.slice(0,5)!='_set_'){ addEventType(v,v); }
+ if((v.length > 0) && (v.slice(0,5)!='_set_')){
+ addEventType(v,v);
+ }
});
}
});
};
function addEventType(type, display){
typeListElem.append(
$('<li class="event_type"></li>').append(
$('<span class="history"></span>').html('history')
- .click(function(){
+ .click(function(){
$('.event_type_list .event_type input').attr('checked', false);
$('input', $(this).parent()).attr('checked', true);
- updateEventFilter(); loadEventHistory(type);
+ updateEventFilter(); loadEventHistory(type);
})
).append(
$('<input type="checkbox" />').attr('checked', true)
.click(function(){ updateEventFilter(); })
).append(
@@ -812,13 +814,13 @@
});
eventsFilter = _unchecked_types;
}
function doEventsPoll(){
- return (function(){
+ return (function(){
$.ajax({
- url: '/'+currentNamespace+'/events?since='+eventsPolledUntil,
+ url: FnordMetric.p + '/' + currentNamespace+'/events?since='+eventsPolledUntil,
success: callbackEventsPoll()
});
});
};
@@ -826,19 +828,19 @@
return (function(_data, _status){
var data = JSON.parse(_data)
var events = data.events;
var timout = 1000;
var maxevents = 200;
- if(events.length > 0){
- timeout = 200;
+ if(events.length > 0){
+ timeout = 200;
eventsPolledUntil = parseInt(events[0]._time)-1;
}
for(var n=events.length-1; n >= 0; n--){
var v = events[n];
if(eventsFilter.indexOf(v._type) == -1){
if(parseInt(v._time)<=eventsPolledUntil){
- renderEvent(v);
+ renderEvent(v);
}
}
};
var elems = $("p", feedInnerElem);
for(var n=maxevents; n < elems.length; n++){
@@ -872,25 +874,25 @@
}
if(session_name){
$('.name', session_elem).html(session_name);
}
-
+
$('.time', session_elem).html(session_time);
} else {
-
+
var session_picture = $('<img width="18" />');
- if(!session_name){
+ if(!session_name){
session_name = session_data["session_key"].substr(0,15)
};
- if(session_data["_picture"]){
+ if(session_data["_picture"]){
session_picture.attr('src', session_data["_picture"]);
};
-
+
listElem.append(
$('<li class="session"></li>').append(
$('<div class="picture"></div>').html(session_picture)
).append(
$('<span class="name"></span>').html(session_name)
@@ -907,11 +909,11 @@
var event_message = $('<span class="message"></span>');
var event_props = $('<span class="properties"></span>');
var event_picture = $('<div class="picture"></picture>');
var event_type = event_data._type;
-
+
if(!event_type){ return true; }
if(event_data._message){
event_message.html(event_data._message);
} else if(event_type=="_pageview"){
@@ -921,19 +923,19 @@
} else {
event_message.html(event_type);
}
event_time.html(formatTimeOfDay(event_data._time));
-
+
if(event_data._session_key && event_data._session_key.length > 0){
if(session_data=sessionData[event_data._session_key]){
- if(session_data._name){
+ if(session_data._name){
event_props.append(
$('<strong></strong>').html(session_data._name)
);
}
- if(session_data._picture){
+ if(session_data._picture){
event_picture.append(
$('<img width="40" />').attr('src', session_data._picture)
)
}
}
@@ -957,21 +959,21 @@
resize: resize,
close: close
};
});
-
+
var dashboardView = (function(dashboard_name){
var widgets = [];
var viewport = null;
function load(_viewport){
viewport = _viewport.html('');
$.ajax({
- url: '/'+currentNamespace+'/dashboard/'+dashboard_name,
+ url: FnordMetric.p + '/' + currentNamespace+'/dashboard/'+dashboard_name,
success: function(resp, status){
var conf = JSON.parse(resp);
renderWidgets(conf.widgets);
}
});
@@ -1005,21 +1007,21 @@
if(!wwperc){ wwperc = 100; }
var wwidth = viewport.width() * (wwperc/100.0);
if(wwperc==100){
widgets[wkey].elem.addClass('full_width');
} else { wwidth -= 1; }
- widget.elem.width(wwidth);
+ widget.elem.width(wwidth);
}
function resize(){
for(wkey in widgets){
- resizeWidget(wkey);
+ resizeWidget(wkey);
};
};
function close(){
- $('body').trigger('fm_dashboard_close');
+ $('body').trigger('fm_dashboard_close');
};
return {
load: load,
resize: resize,
@@ -1027,11 +1029,11 @@
};
});
- function renderDashboard(_dash){
+ function renderDashboard(_dash){
loadView(dashboardView(_dash));
};
function renderSessionView(){
loadView(sessionView());
@@ -1045,22 +1047,25 @@
resizeView();
};
function resizeView(){
currentView.resize(
- canvasElem.innerWidth(),
+ canvasElem.innerWidth(),
canvasElem.innerHeight()
);
};
function init(_namespace, _canvasElem){
+ if (FnordMetric.p == ''){
+ FnordMetric.p = '/';
+ }
canvasElem = _canvasElem;
currentNamespace = _namespace;
loadView(sessionView());
};
return {
- p: '/fnordmetric/',
+ p: '/fnordmetric/',
renderDashboard: renderDashboard,
renderSessionView: renderSessionView,
resizeView: resizeView,
init: init
};