mirror of
https://github.com/munin-monitoring/contrib.git
synced 2025-07-21 18:41:03 +00:00
12ded312fc
Lots of changes: * Fix the README * Add a makefile to fetch bootstrap, lazyload, jquery, the munin logo, and the munin favicon * Mostly re-write dynazoom. It works very much like the stock one now, with a few extra quick buttons, and of course the bootstrap styling * Remove all minified versions of scripts / css - The includes are minimal, it was not much of cost savings * Add sample images * Rename template to "muncollapse"
239 lines
9 KiB
JavaScript
239 lines
9 KiB
JavaScript
/* MunCollapse Template DynaZoom JavaScript File
|
|
*
|
|
* Notes:
|
|
*
|
|
* - No Internet Explorer support (uses "URLSearchParams")
|
|
* - This is not even really a fork of the upstream version any more
|
|
* - Drops upstream requirement of "QueryString" include (URL.URLSearchParams)
|
|
* - Drops upstream requirement of "FormatDate" include (Date.toISOString())
|
|
*/
|
|
|
|
URLSearchParams.prototype.getDefault = function ( name, value ) {
|
|
// Overload URLSearchParams to allow "default" values.
|
|
return ( this.get( name ) === null ) ? value : this.get( name );
|
|
};
|
|
|
|
function refreshZoom( query, form, image ) {
|
|
//INIT
|
|
var qs = new URLSearchParams( query.split( "\?" )[ 1 ] );
|
|
|
|
init();
|
|
|
|
refreshImg();
|
|
|
|
var start_epoch = parseInt( qs.getDefault( "rst_start_epoch", form.start_epoch.value ), 10 );
|
|
var stop_epoch = parseInt( qs.getDefault( "rst_stop_epoch", form.stop_epoch.value ), 10 );
|
|
|
|
var highLighter = document.getElementById( "image-overlay" );
|
|
var gutterOffsetLeft = 66;
|
|
var highlightStartX = 0;
|
|
var clickCounter = 0;
|
|
var relativeStartX = 0;
|
|
var graph_shown_width;
|
|
var epoch_shown_start;
|
|
var epoch_shown_stop;
|
|
var eachPixelEpoch;
|
|
|
|
form.plugin_name.onblur = refreshImg;
|
|
form.start_iso8601.onblur = majDates;
|
|
form.stop_iso8601.onblur = majDates;
|
|
form.start_epoch.onblur = function() { refreshImg(); updateStartStop(); };
|
|
form.stop_epoch.onblur = function() { refreshImg(); updateStartStop(); };
|
|
form.lower_limit.onblur = refreshImg;
|
|
form.upper_limit.onblur = refreshImg;
|
|
form.size_x.onblur = refreshImg;
|
|
form.size_y.onblur = refreshImg;
|
|
form.btnReset.onclick = reset;
|
|
form.btnShowDay.onclick = function() { showPeriod( 1 ); };
|
|
form.btnShowWeek.onclick = function() { showPeriod( 2 ); };
|
|
form.btnShowMonth.onclick = function() { showPeriod( 3 ); };
|
|
form.btnShowYear.onclick = function() { showPeriod( 4 ); };
|
|
form.onsubmit = function() { document.activeElement.blur(); refreshImg(); return false; };
|
|
|
|
// Sets the onClick handler
|
|
image.onclick = click;
|
|
|
|
//FUNCTIONS
|
|
function init() {
|
|
form.plugin_name.value = qs.getDefault( "plugin_name", "localdomain/localhost.localdomain/if_eth0" );
|
|
form.start_epoch.value = qs.getDefault( "start_epoch", "1236561663" );
|
|
form.stop_epoch.value = qs.getDefault( "stop_epoch", "1237561663" );
|
|
form.lower_limit.value = qs.getDefault( "lower_limit", "" );
|
|
form.upper_limit.value = qs.getDefault( "upper_limit", "" );
|
|
form.size_x.value = qs.getDefault( "size_x", "" );
|
|
form.size_y.value = qs.getDefault( "size_y", "" );
|
|
|
|
updateStartStop();
|
|
}
|
|
|
|
function reset( event ) {
|
|
init();
|
|
|
|
//Can be not the initial ones in case of manual refresh
|
|
form.start_epoch.value = start_epoch;
|
|
form.stop_epoch.value = stop_epoch;
|
|
updateStartStop();
|
|
|
|
//Redraw
|
|
scale = refreshImg();
|
|
|
|
//Reset gui
|
|
clickCounter = 0;
|
|
image.onmousemove = undefined;
|
|
form.start_iso8601.disabled = false;
|
|
form.stop_iso8601.disabled = false;
|
|
form.start_epoch.disabled = false;
|
|
form.stop_epoch.disabled = false;
|
|
highLighter.style.left = "0px";
|
|
highLighter.style.width = "2px";
|
|
highLighter.style.display = "none";
|
|
|
|
document.activeElement.blur();
|
|
return false;
|
|
}
|
|
|
|
function refreshImg(event) {
|
|
image.src = qs.getDefault( "cgiurl_graph", "/munin-cgi/munin-cgi-graph" ) + "/" +
|
|
form.plugin_name.value +
|
|
"-pinpoint=" + parseInt( form.start_epoch.value, 10 ) + "," + parseInt( form.stop_epoch.value, 10 ) +
|
|
".png" + "?" +
|
|
"&lower_limit=" + form.lower_limit.value +
|
|
"&upper_limit=" + form.upper_limit.value +
|
|
"&size_x=" + form.size_x.value +
|
|
"&size_y=" + form.size_y.value;
|
|
}
|
|
|
|
function updateStartStop() {
|
|
form.start_iso8601.value = new Date( form.start_epoch.value * 1000 ).toISOString();
|
|
form.stop_iso8601.value = new Date( form.stop_epoch.value * 1000 ).toISOString();
|
|
}
|
|
|
|
function majDates( event ) {
|
|
var lowLimit = new Date(),
|
|
topLimit = new Date(),
|
|
date_parsed = null;
|
|
|
|
lowLimit.setFullYear( lowLimit.getFullYear() - 1 );
|
|
|
|
date_parsed = new Date( Date.parse( form.start_iso8601.value ) || lowLimit.getTime() );
|
|
form.start_epoch.value = Math.floor( date_parsed.getTime() / 1000 );
|
|
|
|
date_parsed = new Date( Date.parse( form.stop_iso8601.value) || topLimit.getTime() );
|
|
form.stop_epoch.value = Math.floor( date_parsed.getTime() / 1000 );
|
|
|
|
updateStartStop();
|
|
|
|
refreshImg();
|
|
}
|
|
|
|
function click( event ) {
|
|
var relativeClickX = getClickLocation( event ),
|
|
thisEpoch = null;
|
|
|
|
switch ( ( clickCounter++ ) % 3 ) {
|
|
case 0: // First click of the displayed graph
|
|
graph_shown_width = parseInt( form.size_x.value, 10) ;
|
|
epoch_shown_start = parseInt( form.start_epoch.value,10 );
|
|
epoch_shown_stop = parseInt( form.stop_epoch.value, 10 );
|
|
eachPixelEpoch = ( ( epoch_shown_stop - epoch_shown_start ) / graph_shown_width );
|
|
relativeStartX = ( relativeClickX < 0 ? 0 : relativeClickX );
|
|
|
|
form.start_iso8601.disabled = true;
|
|
form.stop_iso8601.disabled = true;
|
|
form.start_epoch.disabled = true;
|
|
form.stop_epoch.disabled = true;
|
|
|
|
highlightStartX = event.pageX;
|
|
highLighter.style.left = ( relativeStartX + gutterOffsetLeft + image.offsetLeft ) + "px";
|
|
highLighter.style.display = "block";
|
|
|
|
form.start_epoch.value = offsetEpoch( relativeClickX );
|
|
updateStartStop();
|
|
|
|
image.onmousemove = divMouseMove;
|
|
|
|
break;
|
|
case 1: // Second (end) click of the displayed graph
|
|
thisEpoch = offsetEpoch( relativeClickX );
|
|
|
|
image.onmousemove = undefined;
|
|
form.start_iso8601.disabled = false;
|
|
form.stop_iso8601.disabled = false;
|
|
form.start_epoch.disabled = false;
|
|
form.stop_epoch.disabled = false;
|
|
|
|
// For negative values, assume we want a new start point and the old end point.
|
|
// If it's not, set it.
|
|
if ( thisEpoch > form.start_epoch.value ) {
|
|
form.stop_epoch.value = thisEpoch;
|
|
} else {
|
|
form.stop_epoch.value = Math.floor( epoch_shown_stop );
|
|
highLighter.style.width = ( graph_shown_width - relativeStartX ) + "px";
|
|
}
|
|
updateStartStop();
|
|
|
|
break;
|
|
case 2: // Nevermind or Do It.
|
|
thisEpoch = offsetEpoch( relativeClickX );
|
|
|
|
if ( thisEpoch >= form.start_epoch.value && thisEpoch <= form.stop_epoch.value ) {
|
|
refreshImg();
|
|
} else {
|
|
form.start_epoch.value = epoch_shown_start;
|
|
form.stop_epoch.value = epoch_shown_stop;
|
|
updateStartStop();
|
|
}
|
|
|
|
highLighter.style.left = "0px";
|
|
highLighter.style.width = "2px";
|
|
highLighter.style.display = "none";
|
|
}
|
|
}
|
|
|
|
function divMouseMove( event ) {
|
|
var diff = event.pageX - highlightStartX,
|
|
maxDiff = graph_shown_width - relativeStartX,
|
|
relativeClickX = getClickLocation( event );
|
|
|
|
form.stop_epoch.value = offsetEpoch( relativeClickX );
|
|
updateStartStop();
|
|
|
|
highLighter.style.width = ( ( diff < 2 ) ? 2 : ( diff > maxDiff ? maxDiff : diff ) ) + "px";
|
|
}
|
|
|
|
function offsetEpoch( clickX ) {
|
|
if ( clickX < 0 ) { return Math.floor( epoch_shown_start ); }
|
|
|
|
if ( clickX > graph_shown_width ) { return Math.floor( epoch_shown_stop ); }
|
|
|
|
return Math.floor( epoch_shown_start + ( clickX * eachPixelEpoch ) );
|
|
}
|
|
|
|
function getClickLocation( event ) {
|
|
return ( event.pageX - image.getBoundingClientRect().x - gutterOffsetLeft );
|
|
}
|
|
|
|
function showPeriod( period ) {
|
|
var now = new Date(),
|
|
past = new Date();
|
|
|
|
switch (period) {
|
|
case 1:
|
|
past.setDate( past.getDate() - 1 ); break;
|
|
case 2:
|
|
past.setDate( past.getDate() - 7 ); break;
|
|
case 3:
|
|
past.setMonth( past.getMonth() - 1 ); break;
|
|
case 4:
|
|
past.setFullYear( past.getFullYear() - 1 ); break;
|
|
}
|
|
|
|
form.start_epoch.value = Math.floor( past.getTime() / 1000 );
|
|
form.stop_epoch.value = Math.floor( now.getTime() / 1000 );
|
|
|
|
updateStartStop();
|
|
refreshImg();
|
|
document.activeElement.blur();
|
|
return false;
|
|
}
|
|
}
|