mirror of
https://github.com/munin-monitoring/contrib.git
synced 2025-07-25 18:38:30 +00:00
- Add "muncollapse" template (the template formerly known as munstrap4).
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"
This commit is contained in:
JTSage
parent
bc2dc914b3
commit
12ded312fc
45 changed files with 852 additions and 1147 deletions
239
templates/muncollapse/static/js/dynazoom.js
Normal file
239
templates/muncollapse/static/js/dynazoom.js
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
/* 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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue