Munin contributed plugins

static/img/

static/css/bootstrap.min.css

static/js/bootstrap.min.js

static/js/jquery.min.js

static/js/lazysizes.min.js

static/js/typeahead.bundle.min.js

# MunCollapsible

#

# Makefile for the MunCollapsible template.

# HTTP Fetch program to use.  Called as $(HTTP_FETCH) <output_file> <input_url>

#

# Swap the comments to use curl instead.

HTTP_FETCH = wget -nv -O

#HTTP_FETCH = curl -s -w "%{http_code} - %{filename_effective} - %{size_download} bytes\n" -o

# The versions of the external libraries to use.

BOOTSTRAP_VERSION = 4.4.1

JQUERY_VERSION    = 3.4.1.slim

TYPEAHEAD_VERSION = latest

FAVICON_FILES  := android-chrome-144x144.png android-chrome-192x192.png android-chrome-36x36.png android-chrome-48x48.png android-chrome-72x72.png android-chrome-96x96.png apple-touch-icon-114x114.png apple-touch-icon-120x120.png apple-touch-icon-144x144.png apple-touch-icon-152x152.png apple-touch-icon-180x180.png apple-touch-icon-57x57.png apple-touch-icon-60x60.png apple-touch-icon-72x72.png apple-touch-icon-76x76.png apple-touch-icon-precomposed.png apple-touch-icon.png browserconfig.xml favicon-16x16.png favicon-194x194.png favicon-32x32.png favicon-96x96.png favicon.ico manifest.json mstile-144x144.png mstile-150x150.png mstile-310x150.png mstile-310x310.png mstile-70x70.png

FAVICON_BASEURL = https://raw.githubusercontent.com/munin-monitoring/munin/master/web/static/img/favicons/

LOGO_URL = https://raw.githubusercontent.com/munin-monitoring/munin/master/web/static/img/logo-h.png

BOOTSTRAP_CSS_URL = https://stackpath.bootstrapcdn.com/bootstrap/$(BOOTSTRAP_VERSION)/css/bootstrap.min.css

BOOTSTRAP_JS_URL  = https://stackpath.bootstrapcdn.com/bootstrap/$(BOOTSTRAP_VERSION)/js/bootstrap.bundle.min.js

JQUERY_JS_URL     = https://code.jquery.com/jquery-$(JQUERY_VERSION).min.js

TYPEAHEAD_JS_URL  = https://twitter.github.io/typeahead.js/releases/$(TYPEAHEAD_VERSION)/typeahead.bundle.js

LAZYSIZES_URL     = http://afarkas.github.io/lazysizes/lazysizes.min.js

CWD := $(abspath $(patsubst %/,%,$(dir $(abspath $(lastword $(MAKEFILE_LIST))))))

main:

	@echo $(CWD)

	@echo Downloading External Libraries...

	$(HTTP_FETCH) $(CWD)/static/css/bootstrap.min.css $(BOOTSTRAP_CSS_URL)

	$(HTTP_FETCH) $(CWD)/static/js/bootstrap.min.js $(BOOTSTRAP_JS_URL)

	$(HTTP_FETCH) $(CWD)/static/js/jquery.min.js $(JQUERY_JS_URL)

	$(HTTP_FETCH) $(CWD)/static/js/typeahead.bundle.min.js $(TYPEAHEAD_JS_URL)

	$(HTTP_FETCH) $(CWD)/static/js/lazysizes.min.js $(LAZYSIZES_URL)

	@echo Downloading Logo...

	@mkdir -p $(CWD)/static/img

	$(HTTP_FETCH) $(CWD)/static/img/logo-munin.png $(LOGO_URL)

	@echo Downloading Favicon Files...

	@mkdir -p $(CWD)/static/img/favicon

	@for file in ${FAVICON_FILES}; do \

		eval $(HTTP_FETCH) $(CWD)/static/img/favicon/$${file} $(FAVICON_BASEURL)$${file}; \

	done

# MunCollapse

Alternative Munin 2.x templates based on Twitter Bootstrap using collapsibles.

Based on some of the work of "Munstrap" by [Jonny McCullagh](https://github.com/jonnymccullagh), [munin-monitoring/contrib](https://github.com/munin-monitoring/contrib/tree/master/templates/munstrap) repo.

#### Overview Sample Image

<a href="sample-image/sample-home.png"><img src="sample-image/sample-home.png" style="max-width: 1229px; display:block; margin-left: auto; margin-right: auto; width: 75%" /></a>

[Semi-Live Demo](https://jtsage.dev/munin-demo/) - For the purposes of this demo only, the data is static and the zoom functionality is disabled.

---

## Installation

### 1. Clone the munin-monitoring/contrib repo to a temporary location:

```

$ cd /opt

$ git clone https://github.com/munin-monitoring/contrib.git

```

### 2. Fetch the template libraries

```

$ cd /opt/contrib/templates/muncollapse/

$ make

```

### 3. Place the template in an appropriate safe place

Ubuntu shown - other distros may prefer ```/usr/local/share/munin/...```

```

$ mkdir /usr/share/munin/template

$ mkdir /usr/share/munin/template/muncollapse

```

__NOTE__: If this step fails, your munin installation may use ```/usr/local/share/munin/...``` instead!

```

$ cp -r /opt/contrib/templates/muncollapse/templates /usr/share/munin/template/muncollapse/

$ cp -r /opt/contrib/templates/muncollapse/static /usr/share/munin/template/muncollapse/

```

### 4. Edit your ```munin.conf``` file.

Typically located at ```/etc/munin.conf```

__FIND AND CHANGE:__ (near the top of the file)

```

# Where to look for the HTML templates

#

#tmpldir        /etc/munin/templates

# Where to look for the static www files

#

#staticdir /etc/munin/static

```

__TO:__

```

# Where to look for the HTML templates

#

tmpldir /usr/share/munin/template/muncollapse/templates

# Where to look for the static www files

#

staticdir /usr/share/munin/template/muncollapse/static

```

### 5. [Optional / Recommended] Clean out the old generated files.

This isn't really required, but there will likely be orphaned files.  The location of these files can be found in your ```munin.conf``` file, with the ```htmldir``` directive.

__NOTE:__ Ubuntu shown, other distributions may be in ```/var/www/munin/```

```

$ rm -rf /var/cache/munin/www/*

```

### 6. Wait Patiently

```munin-update``` will regenerate the files the next time it runs.  By default, this is on the :05 minute tick for most installations. If you do not have new files within 10 minutes, be sure to check ```munin-update.log``` and find out what went wrong.

---

## Revert to Official Munin Template

### 1. Edit your ```munin.conf``` file.

Typically located at ```/etc/munin.conf```

__FIND AND CHANGE:__ (near the top of the file - comment these lines out!)

# Where to look for the HTML templates

#

#tmpldir /usr/share/munin/template/muncollapse/templates

# Where to look for the static www files

#

#staticdir /usr/share/munin/template/muncollapse/static

### 2. [Optional / Recommended] Clean up

Remove the files from step #1 & #3 above, and repeat step #5 & #6.

---

## Samples

#### View of a group:

<a href="sample-image/sample-group.png"><img src="sample-image/sample-group.png" style="max-width: 1229px; display:block; margin-left: auto; margin-right: auto; width: 75%" /></a>

#### View of a specific node:

<a href="sample-image/sample-node.png"><img src="sample-image/sample-node.png" style="max-width: 1229px; display:block; margin-left: auto; margin-right: auto; width: 75%" /></a>

#### Zoom feature:

<a href="sample-image/sample-zoom.png"><img src="sample-image/sample-zoom.png" style="max-width: 1229px; display:block; margin-left: auto; margin-right: auto; width: 75%" /></a>

---

## Munin Compatibility

a/n: I am unsure of the compatibility with Munin 3. Most things will work from what I've read, but the navigation may be slightly funky.

---

### Browser Compatibility

For this template set, Internet Explorer support has been dropped for the dynamic zoom functions. Everything else should work across all browsers.

    border: none;

    width: 115px;

    height: 30px;

/* 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;

    }

}

	$( document ).ready( function() {

		$( ".custom-collapse" ).on( "click", function() {

			$( this ).parent().find( ".collapse" ).collapse( "toggle" );

		} );

		$( ".custom-collapse-all" ).on( "click", function() {

			if ( $( this ).hasClass( "all-hide" ) ) {

				$( this ).parent().parent().find( ".collapse" ).collapse( "hide" );

				$( this ).parent().parent().find( ".collapse" ).collapse( "show" );

		} );

	} );

	$( document ).ready( function () {

		window.gsets    = {

		$( ".graph-click" ).on( "click", function() {

			var gset      = $( this ).data( "gset" ),

				newState  = ! gsets[ gset ];

			gsets[ gset ] = newState;

				.toggleClass( "btn-outline-success btn-outline-secondary" )

				.find( ".gset-state" )

				.text( ( newState ? "Shown" : "Hidden" ) );

			$( ".graph-" + gset ).toggleClass( "d-none" );

		} );

		$( ".tab-click" ).on( "click", function() {

			var theCollapse = $( "#" + $( this ).data( "target" ) + "_coll" );

			if ( theCollapse.hasClass( "show" ) ) {

				theCollapse.trigger( "shown.bs.collapse" );

				// Close all and open the one we want

				$( ".card-collapse.collapse" ).collapse( "hide" );

				theCollapse.collapse( "show" );

		} );

		$( ".collapse" ).on( "shown.bs.collapse", function( e ) {

				$( document ).scrollTop( $( this ).closest( ".card" ).offset().top );

		} );

			$( location.hash + "_coll" + ".collapse" ).collapse( "show" );

		$( window ).on( "hashchange", function( e ) {

			$( ".tab-click[data-target='" + newPlace + "']" ).trigger( "click" );

		if ( $( ".card-collapse.collapse" ).length < 2 ) { $( ".card-collapse.collapse" ).collapse( "show" ); }

		$( ".close-all-tabs" ).on( "click", function() { $( ".card-collapse.collapse" ).collapse( "hide" ); return false; } );

		$( ".open-all-tabs"  ).on( "click", function() { $( ".card-collapse.collapse" ).collapse( "show" ); return false; } );

			<!-- <TMPL_VAR NAME="ZOOMDAY"> -->

	<div class="modal-dialog modal-xl">

						<img alt="Zoom Image - Requires munin-cgi-graph" id="zoom_image" class="no-refresh d-block mx-auto"/>

						<div id="image-overlay" style="position: absolute; top: 33px; left: 0; background-color: rgba(3, 50, 109, 0.3); width: 2px; height: 400px; display:none; pointer-events: none;"></div>

				<div class="row mt-3">

									<input type="text" class="form-control form-control-sm" name="plugin_name" id="plugin_name">

									<input type="text" class="form-control form-control-sm" name="start_iso8601" id="start_iso8601">

									<input type="text" class="form-control form-control-sm" name="stop_iso8601" id="stop_iso8601">

									<input type="text" class="form-control form-control-sm" name="start_epoch" id="start_epoch">

									<input type="text" class="form-control form-control-sm" name="stop_epoch" id="stop_epoch">

									<input type="text" class="form-control form-control-sm" name="lower_limit" id="lower_limit">

									<input type="text" class="form-control form-control-sm" name="upper_limit" id="upper_limit">

									<div class="input-group input-group-sm">

									<div class="input-group input-group-sm">

										<button type="button" class="btn btn-outline-primary" name="btnReset">&#8634; Reset to Initial</button>

										<button type="button" class="btn btn-outline-info" name="btnShowDay">&#9201; Show Today</button>

										<button type="button" class="btn btn-outline-info" name="btnShowWeek">&#9201; Show Week</button>

										<button type="button" class="btn btn-outline-info" name="btnShowMonth">&#9201; Show Month</button>

										<button type="button" class="btn btn-outline-info" name="btnShowYear">&#9201; Show Year</button>

									</div>

									<div class="btn-group w-100 mx-3 mt-2">

										<button type="button" class="btn btn-outline-danger w-100" data-dismiss="modal">&times; Close</button>

									<button type="submit" class="d-none">Hidden Submit Button - "onsubmit" needs this to exist.</button>

								<p>Zooming is very easy, it's done in 3 clicks ( regular clicks, no drag &amp; drop ):</p>

									<li>Click inside shaded area to zoom, outside to cancel.</li>

								<p><em>Shortcut:</em> To just set a new start of zoom, click before your start point for your second click.</p>

								<p class="mb-1">You can use the interactive form too.</p>

<script src="<TMPL_VAR NAME='R_PATH'>/static/js/dynazoom.js"></script>

	$( ".img-zoom" ).click(function(){

		var query = $(this).attr( "data-href" );

		var form  = document.getElementById( "zoom_form" );

		var image = document.getElementById( "zoom_image" );

		$( "#zoom" ).modal( "show" );

<TMPL_INCLUDE NAME="partial/footer.tmpl" />

	$( document ).ready( function (){

		$( ".tab-click" ).on( "click", function() {

			var theCollapse = $( "#" + $( this ).data( "target" ) + "_coll" );

			if ( theCollapse.hasClass( "show" ) ) {

				theCollapse.trigger( "shown.bs.collapse" );

				// Close all, and open the one we want

				$( ".card-collapse.collapse" ).collapse("hide" );

				theCollapse.collapse( "show" );

		$( ".collapse" ).on( "shown.bs.collapse", function( e ) {

				$( document ).scrollTop( $( this ).closest( ".card" ).offset().top );

		if ( $( ".card-collapse.collapse" ).length < 2 ) { $( ".card-collapse.collapse" ).collapse( "show" ); }

		$( ".close-all-tabs" ).on( "click", function() { $( ".card-collapse.collapse" ).collapse( "hide" ); return false; } );

		$( ".open-all-tabs"  ).on( "click", function() { $( ".card-collapse.collapse" ).collapse( "show" ); return false; } );

<!--

	File: partial/footer.tmpl

	Used: All views, called after partial/footer.tmpl

-->

<script>

	// Lightweight Cookie Library.

	!function(e){var n;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var t=window.Cookies,o=window.Cookies=e();o.noConflict=function(){return window.Cookies=t,o}}}(function(){function e(){for(var e=0,n={};e<arguments.length;e++){var t=arguments[e];for(var o in t)n[o]=t[o]}return n}function n(e){return e.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)}return function t(o){function r(){}function i(n,t,i){if("undefined"!=typeof document){"number"==typeof(i=e({path:"/"},r.defaults,i)).expires&&(i.expires=new Date(1*new Date+864e5*i.expires)),i.expires=i.expires?i.expires.toUTCString():"";try{var c=JSON.stringify(t);/^[\{\[]/.test(c)&&(t=c)}catch(e){}t=o.write?o.write(t,n):encodeURIComponent(String(t)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),n=encodeURIComponent(String(n)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var f="";for(var u in i)i[u]&&(f+="; "+u,!0!==i[u]&&(f+="="+i[u].split(";")[0]));return document.cookie=n+"="+t+f}}function c(e,t){if("undefined"!=typeof document){for(var r={},i=document.cookie?document.cookie.split("; "):[],c=0;c<i.length;c++){var f=i[c].split("="),u=f.slice(1).join("=");t||'"'!==u.charAt(0)||(u=u.slice(1,-1));try{var a=n(f[0]);if(u=(o.read||o)(u,a)||n(u),t)try{u=JSON.parse(u)}catch(e){}if(r[a]=u,e===a)break}catch(e){}}return e?r[e]:r}}return r.set=i,r.get=function(e){return c(e,!1)},r.getJSON=function(e){return c(e,!0)},r.remove=function(n,t){i(n,"",e(t,{expires:-1}))},r.defaults={},r.withConverter=t,r}(function(){})});

</script>

</body>

</html>

			with <a href="https://github.com/munin-monitoring/contrib/tree/master/templates/muncollapse/">MunCollapse</a> template.

<script src="<TMPL_VAR NAME='R_PATH' />/static/js/lazysizes.min.js" async></script>

<!DOCTYPE html>

<html lang="en">

<!--

	File: partial/head.tmpl

	Used: All views, called before anything else

-->

	<head>

		<title>

			<TMPL_IF NAME="NAME"><TMPL_VAR ESCAPE="HTML" NAME="NAME"> (</TMPL_IF>Munin<TMPL_LOOP NAME="PATH"><TMPL_IF NAME="pathname"> :: <TMPL_VAR ESCAPE="HTML" NAME="pathname"></TMPL_IF></TMPL_LOOP><TMPL_IF NAME="NAME">)</TMPL_IF>

		</title>

		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<meta name="description" content="">

		<meta name="author" content="Auto-generated by Munin">

		<link rel="apple-touch-icon" sizes="57x57" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/apple-touch-icon-57x57.png">

		<link rel="apple-touch-icon" sizes="60x60" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/apple-touch-icon-60x60.png">

		<link rel="apple-touch-icon" sizes="72x72" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/apple-touch-icon-72x72.png">

		<link rel="apple-touch-icon" sizes="76x76" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/apple-touch-icon-76x76.png">

		<link rel="apple-touch-icon" sizes="114x114" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/apple-touch-icon-114x114.png">

		<link rel="apple-touch-icon" sizes="120x120" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/apple-touch-icon-120x120.png">

		<link rel="apple-touch-icon" sizes="144x144" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/apple-touch-icon-144x144.png">

		<link rel="apple-touch-icon" sizes="152x152" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/apple-touch-icon-152x152.png">

		<link rel="apple-touch-icon" sizes="180x180" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/apple-touch-icon-180x180.png">

		<link rel="icon" type="image/png" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/favicon-32x32.png" sizes="32x32">

		<link rel="icon" type="image/png" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/favicon-194x194.png" sizes="194x194">

		<link rel="icon" type="image/png" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/favicon-96x96.png" sizes="96x96">

		<link rel="icon" type="image/png" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/android-chrome-192x192.png" sizes="192x192">

		<link rel="icon" type="image/png" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/favicon-16x16.png" sizes="16x16">

		<link rel="manifest" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/manifest.json" crossorigin="use-credentials">

		<link rel="shortcut icon" href="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/favicon.ico">

		<meta name="msapplication-TileColor" content="#00a300">

		<meta name="msapplication-TileImage" content="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/mstile-144x144.png">

		<meta name="msapplication-config" content="<TMPL_VAR NAME='R_PATH' />/static/img/favicon/browserconfig.xml">

		<meta name="theme-color" content="#076202">

		<link href="<TMPL_VAR NAME='R_PATH' />/static/css/bootstrap.min.css" rel="stylesheet" />

		<link href="<TMPL_VAR NAME='R_PATH' />/static/css/style-munstrap.css" rel="stylesheet" />

		<script src="<TMPL_VAR NAME='R_PATH' />/static/js/jquery.min.js"></script>

		<script src="<TMPL_VAR NAME='R_PATH' />/static/js/bootstrap.min.js"></script>

		<script src="<TMPL_VAR NAME='R_PATH' />/static/js/typeahead.bundle.min.js"></script>

		<TMPL_INCLUDE NAME="search_and_reload.tmpl">

	</head>

	<body>

		<nav class="navbar navbar-expand-lg navbar-light bg-light mb-3">

			<a class="navbar-brand" href="<TMPL_VAR NAME='R_PATH' />"><span class="munin-icon"></span></a>

			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

				<span class="navbar-toggler-icon"></span>

			</button>

			<div class="collapse navbar-collapse" id="navbarSupportedContent">

				<ul class="navbar-nav mr-auto">

					<li class="nav-item">

						<a class="nav-link" href="<TMPL_VAR NAME='R_PATH' />">Home</a>

					</li>

					<li class="nav-item dropdown">

						<a class="nav-link dropdown-toggle" href="#" id="navbarProblems" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

							Problems

						</a>

						<div class="dropdown-menu" aria-labelledby="navbarProblems">

							<a class="dropdown-item" href="<TMPL_VAR NAME='R_PATH' />/problems.html#critical"><span class="badge alert-danger mr-2"><TMPL_VAR NAME="NCRITICAL"></span>Critical</a>

							<a class="dropdown-item" href="<TMPL_VAR NAME='R_PATH' />/problems.html#warnings"><span class="badge alert-warning mr-2"><TMPL_VAR NAME="NWARNING"></span>Warning</a>

							<a class="dropdown-item" href="<TMPL_VAR NAME='R_PATH' />/problems.html#unknowns"><span class="badge alert-info mr-2"><TMPL_VAR NAME="NUNKNOWN"></span>Unknown</a>

						</div>

					</li>

					<li class="nav-item dropdown">

						<a class="nav-link dropdown-toggle" href="#" id="navbarGroups" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

							Groups

						</a>

						<div class="dropdown-menu" aria-labelledby="navbarGroups">

							<TMPL_LOOP NAME="ROOTGROUPS">

								<a class="dropdown-item" href="<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URL'>"><TMPL_VAR NAME="NAME"></a>

							</TMPL_LOOP>

						</div>

					</li>

					<li class="nav-item dropdown">

						<a class="nav-link dropdown-toggle" href="#" id="navbarHosts" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

							Hosts

						</a>

						<div class="dropdown-menu" aria-labelledby="navbarHosts">

							<TMPL_LOOP NAME="ROOTGROUPS">

								<TMPL_LOOP NAME="GROUPS">

									<TMPL_IF NAME="NCATEGORIES">

										<a class="dropdown-item" href="<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URL'>"><TMPL_VAR ESCAPE="HTML" NAME="NAME"></a>

									</TMPL_IF>

								</TMPL_LOOP>

							</TMPL_LOOP>

						</div>

					</li>

					<li class="nav-item dropdown">

						<a class="nav-link dropdown-toggle" href="#" id="navbarCats" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

							Categories

						</a>

						<div class="dropdown-menu" aria-labelledby="navbarCats">

								<TMPL_LOOP NAME="GLOBALCATS">

									<a class="dropdown-item" href="<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URLDAY'>"><TMPL_VAR NAME="NAME"> - Day</a>

									<a class="dropdown-item" href="<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URLWEEK'>"><TMPL_VAR NAME="NAME"> - Week</a>

									<a class="dropdown-item" href="<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URLMONTH'>"><TMPL_VAR NAME="NAME"> - Month</a>

									<a class="dropdown-item" href="<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URLYEAR'>"><TMPL_VAR NAME="NAME"> - Year</a>

									<TMPL_IF NAME="__first__"><div class="dropdown-divider"></div></TMPL_IF>

									<TMPL_IF NAME="__inner__"><div class="dropdown-divider"></div></TMPL_IF>

								</TMPL_LOOP>

						</div>

					</li>

				</ul>

				<form id="formy1" class="form-inline my-2 my-lg-0 w-25">

					<input class="form-control mr-sm-2 w-100" type="text" id="findthehost" placeholder="Host or Service" aria-label="Search">

				</form>

			</div>

		</nav>

	<div class="container">

		<TMPL_INCLUDE NAME="logo_navigation.tmpl">

			<div class="custom-control custom-switch ml-auto mr-0">

				<input type="checkbox" class="custom-control-input" id="autorefimg">

				<label class="custom-control-label" for="autorefimg">Auto-refresh Images</label>

			</div>

				<li class="breadcrumb-item"><a href="<TMPL_VAR NAME='R_PATH' />">Home</a></li>

	<TMPL_INCLUDE NAME="bottom_navigation.tmpl" />

</TMPL_IF>

<TMPL_IF NAME="COMPARISON-DAY">

	<h2 class="mb-3">Comparison: by day</h2>

	<TMPL_INCLUDE NAME="compare_navigation.tmpl" />

</TMPL_IF>

<TMPL_IF NAME="COMPARISON-WEEK">

	<h2 class="mb-3">Comparison: by week</h2>

	<TMPL_INCLUDE NAME="compare_navigation.tmpl" />

</TMPL_IF>

<TMPL_IF NAME="COMPARISON-MONTH">

	<h2 class="mb-3">Comparison: by month</h2>

	<TMPL_INCLUDE NAME="compare_navigation.tmpl" />

</TMPL_IF>

<TMPL_IF NAME="COMPARISON-YEAR">

	<h2 class="mb-3">Comparison: by year</h2>

	<TMPL_INCLUDE NAME="compare_navigation.tmpl" />

		<!--

			File: partial/search_and_reload.tmpl

			Used: All views, generates the search functionality, and the auto-reload stuff.

		-->

		<script>

			// $('img').each(function(){ if (this.src.length > 0) {

			//         console.log(this.src);

			// 	} });

			// This is used to build the navigation quick search - there is no backend, so we have to do 

			// it all client side.

			//

			// As a curious side note, commenting out the template loops and whatnot allows vscode to parse

			// the javascript - so please note that the commented out TMPL directives STILL FUNCTION.

			var gen_basegroups = {

				// <TMPL_LOOP NAME="ROOTGROUPS">

					"<TMPL_VAR NAME='NAME' />" : {

						"baseurl" :  "<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URL'>",

						"compare" : {

							// <TMPL_IF NAME="COMPARE">

								"Day"   : "<TMPL_VAR NAME='R_PATH' />/<TMPL_LOOP NAME='PATH' /><TMPL_IF NAME='pathname'><TMPL_VAR ESCAPE='URL' NAME='PATHNAME' />/</TMPL_IF></TMPL_LOOP>comparison-day.html",

								"Week"  : "<TMPL_VAR NAME='R_PATH' />/<TMPL_LOOP NAME='PATH' /><TMPL_IF NAME='pathname'><TMPL_VAR ESCAPE='URL' NAME='PATHNAME' />/</TMPL_IF></TMPL_LOOP>comparison-week.html",

								"Month" : "<TMPL_VAR NAME='R_PATH' />/<TMPL_LOOP NAME='PATH' /><TMPL_IF NAME='pathname'><TMPL_VAR ESCAPE='URL' NAME='PATHNAME' />/</TMPL_IF></TMPL_LOOP>comparison-month.html",

								"Year"  : "<TMPL_VAR NAME='R_PATH' />/<TMPL_LOOP NAME='PATH' /><TMPL_IF NAME='pathname'><TMPL_VAR ESCAPE='URL' NAME='PATHNAME' />/</TMPL_IF></TMPL_LOOP>comparison-year.html"

							// </TMPL_IF>

						}

					},

				// </TMPL_LOOP>

			};

			var gen_hosts = {

				// <TMPL_LOOP NAME="ROOTGROUPS">

					// <TMPL_LOOP NAME="GROUPS">

						// <TMPL_IF NAME="NCATEGORIES">

							"<TMPL_VAR ESCAPE='HTML' NAME='NAME' />" : {

								"baseurl" : "<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URL'>",

								"services" : {

								// <TMPL_LOOP NAME="CATEGORIES">

									"<TMPL_VAR ESCAPE='HTML' NAME='NAME' />" : "<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URL' />",

								// </TMPL_LOOP>

								}

							},

						// </TMPL_IF>

					// </TMPL_LOOP>

				// </TMPL_LOOP>

			};

			var gen_cats = {

				// <TMPL_LOOP NAME="GLOBALCATS">

					"Category :: <TMPL_VAR NAME='NAME'> :: Day" : {

						"baseurl" : "<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URLDAY'>"

					},

					"Category :: <TMPL_VAR NAME='NAME'> :: Week" : {

						"baseurl" : "<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URLWEEK'>"

					},

					"Category :: <TMPL_VAR NAME='NAME'> :: Month" : {

						"baseurl" : "<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URLMONTH'>"

					},

					"Category :: <TMPL_VAR NAME='NAME'> :: Year" : {

						"baseurl" : "<TMPL_VAR NAME='R_PATH' />/<TMPL_VAR NAME='URLYEAR'>"

					},

				// </TMPL_LOOP>

			};

			function absolute(p,o){var t=p.split("/"),n=o.split("/");t.pop();for(var r=0;r<n.length;r++)"."!=n[r]&&(".."==n[r]?t.pop():t.push(n[r]));return t.join("/")}

			var navMap = [];

			$.each( gen_cats, function( name, obby ) {

				navMap.push( { "name" : name, "link" : absolute( location.href, obby.baseurl ) } );

			});

			$.each( gen_hosts, function( name, obby ) {

				var host_name = name;

				navMap.push( { "name" : "Host :: " + name, "link" : absolute( location.href, obby.baseurl ) } );

				$.each( obby.services, function( svcname, url ) {

					navMap.push( { "name" : "Service :: " + host_name + " :: " + svcname, "link" : absolute( location.href, url ) } );

				});

			});

			$.each( gen_basegroups, function( name, obby ) {

				var host_name = name;

				navMap.push( { "name" : "Host :: " + name, "link" : absolute( location.href, obby.baseurl ) } );

				$.each( obby.compare, function( svcname, url ) {

					navMap.push( { "name" : "Compare :: " + host_name + " :: " + svcname, "link" : absolute(location.href, url) } );

				});

			});

			var navMapB = new Bloodhound({

				datumTokenizer: function ( d ) { return Bloodhound.tokenizers.whitespace( d.name ); },

				queryTokenizer: Bloodhound.tokenizers.whitespace,

				identify: function ( obj ) { return obj.link; },

				local: navMap

			});

			$(document).ready(function(){

				$( "#findthehost" ).typeahead({

					hint      : true,

					highlight : true,

					minLength : 2,

				},

				{

					name      : "navMap",

					limit     : 10,

					display   : "link",

					source    : navMapB,

					templates : {

						suggestion : function ( data ) {

							return "<div>" + data.name + "</div>";

						}

					}

				}

				);

				$( "#findthehost" ).on( "typeahead:select", function() { $( "#formy1" ).submit(); } );

				$( "#formy1" ).on( "submit", function() {

					inputVal = $( "#findthehost" ).val();

					if ( inputVal.substring( 0, 4 ) == "http" ) {

						window.location.href = inputVal;

					} else {

						$( "#findthehost" ).typeahead( "val", "" );

					}

					return false;

				});

			});

			function autoRefImages() {

				$( "img" ).each(function () {

					if ( this.src.length > 0 && (! $( this ).hasClass( "no-refresh" )) ) {

						var thisURL = new URL( this.src );

						thisURL.searchParams.set( "tt", new Date().getTime() );

						this.src = thisURL.href;

					}

				});

			}

			$( document ).ready( function() {

				if ( Cookies.get( "autorefreshimg" ) == 0 ) {

					$( "#autorefimg" ).prop( "checked", false );

				} else {

					$( "#autorefimg" ).prop( "checked", true);

					Cookies.set("autorefreshimg", "1", { expires: 60 });

					window.autoreftimeout = setInterval( autoRefImages, 300000 );

				}

				$( "#autorefimg" ).on( "change", function() {

					Cookies.set( "autorefreshimg", "0", { expires: 60 } )

					clearInterval( window.autoreftimeout );

					if ( $( "#autorefimg" ).is( ":checked" ) ) {

						Cookies.set( "autorefreshimg", "1", { expires: 60 } );

						window.autoreftimeout = setInterval( autoRefImages, 300000 );

					}

				});

			})

		</script>