+
+[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:
+
+
+#### View of a specific node:
+
+
+
+#### Zoom feature:
+
+
+
+---
+
+## 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.
diff --git a/templates/muncollapse/sample-image/sample-group.png b/templates/muncollapse/sample-image/sample-group.png
new file mode 100644
index 00000000..d37c45b2
Binary files /dev/null and b/templates/muncollapse/sample-image/sample-group.png differ
diff --git a/templates/muncollapse/sample-image/sample-home.png b/templates/muncollapse/sample-image/sample-home.png
new file mode 100644
index 00000000..7cbf22c6
Binary files /dev/null and b/templates/muncollapse/sample-image/sample-home.png differ
diff --git a/templates/muncollapse/sample-image/sample-node.png b/templates/muncollapse/sample-image/sample-node.png
new file mode 100644
index 00000000..4273aff4
Binary files /dev/null and b/templates/muncollapse/sample-image/sample-node.png differ
diff --git a/templates/muncollapse/sample-image/sample-zoom.png b/templates/muncollapse/sample-image/sample-zoom.png
new file mode 100644
index 00000000..19b857f0
Binary files /dev/null and b/templates/muncollapse/sample-image/sample-zoom.png differ
diff --git a/templates/muncollapse/static/css/style-munstrap.css b/templates/muncollapse/static/css/style-munstrap.css
new file mode 100644
index 00000000..29e6c2a3
--- /dev/null
+++ b/templates/muncollapse/static/css/style-munstrap.css
@@ -0,0 +1,197 @@
+@media (min-width: 992px) {
+ .modal-lg {
+ width: 940px !important;
+ }
+}
+
+img.i {
+ display: block;
+ margin: 10px auto;
+}
+
+img.img-zoom {
+ cursor: pointer;
+}
+
+div.service-alert {
+ margin-top: 10px;
+}
+
+img#zoom_image {
+ border: none;
+}
+
+ul.groupview, ul.groupview ul {
+ list-style-type: none;
+}
+
+.munin-icon {
+ background: url(../img/logo-munin.png) left top;
+ width: 115px;
+ height: 30px;
+ display: block;
+}
+
+
+img {
+ box-sizing: content-box;
+ border: 2px solid transparent;
+}
+
+img.warn {
+ border: 2px solid #8a6d3b;
+}
+
+img.crit {
+ border: 2px solid #a94442;
+}
+
+img.unkn {
+ border: 2px solid #ffaa00;
+}
+
+
+html {
+ position: relative;
+ min-height: 100%;
+}
+body {
+ margin-bottom: 75px; /* Margin bottom by footer height */
+}
+.footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 60px; /* Set the fixed height of the footer here */
+ line-height: 60px; /* Vertically center the text there */
+ background-color: #f5f5f5;
+}
+
+.breadcrumb-item-svc::before {
+ display: inline-block;
+ color: #6c757d;
+ content: "[";
+}
+.breadcrumb-item-svc::after {
+ display: inline-block;
+ padding-right: .5rem;
+ color: #6c757d;
+ content: "]";
+}
+
+.custom-collapse {
+ color: #6c757d;
+ font-size: 75%;
+}
+.custom-collapse::before {
+ display: inline-block;
+ color: #6c757d;
+ content: "[";
+}
+.custom-collapse::after {
+ display: inline-block;
+ padding-right: .5rem;
+ color: #6c757d;
+ content: "]";
+}
+
+.custom-collapse-all {
+ color: #6c757d;
+ font-size: 75%;
+}
+.custom-collapse-all::before {
+ display: inline-block;
+ color: #6c757d;
+ content: "[";
+}
+.custom-collapse-all::after {
+ display: inline-block;
+ padding-right: .5rem;
+ color: #6c757d;
+ content: "]";
+}
+
+.cat-list::before {
+ display: inline-block;
+ color: #6c757d;
+ content: "[ ";
+}
+.cat-list::after {
+ display: inline-block;
+ color: #6c757d;
+ content: " ]";
+}
+
+span.twitter-typeahead .tt-menu {
+ cursor: pointer;
+}
+
+span.twitter-typeahead .tt-menu {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 1000;
+ display: none;
+ float: left;
+ min-width: 160px;
+ padding: 5px 0;
+ margin: 2px 0 0;
+ font-size: 1rem;
+ color: #373a3c;
+ text-align: left;
+ list-style: none;
+ background-color: #fff;
+ background-clip: padding-box;
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ border-radius: 0.25rem;
+ overflow: hidden;
+}
+
+span.twitter-typeahead .tt-suggestion {
+ display: block;
+ width: 100%;
+ padding: 3px 20px;
+ clear: both;
+ font-weight: normal;
+ line-height: 1.5;
+ color: #373a3c;
+ text-align: inherit;
+ white-space: nowrap;
+ background: none;
+ border: 0;
+}
+
+span.twitter-typeahead .tt-suggestion:focus, .dropdown-item:hover, span.twitter-typeahead .tt-suggestion:hover {
+ color: #2b2d2f;
+ text-decoration: none;
+ background-color: #f5f5f5;
+}
+
+span.twitter-typeahead .active.tt-suggestion, span.twitter-typeahead .tt-suggestion.tt-cursor, span.twitter-typeahead .active.tt-suggestion:focus, span.twitter-typeahead .tt-suggestion.tt-cursor:focus, span.twitter-typeahead .active.tt-suggestion:hover, span.twitter-typeahead .tt-suggestion.tt-cursor:hover {
+ color: #fff;
+ text-decoration: none;
+ background-color: #0275d8;
+ outline: 0;
+}
+
+span.twitter-typeahead .disabled.tt-suggestion, span.twitter-typeahead .disabled.tt-suggestion:focus, span.twitter-typeahead .disabled.tt-suggestion:hover {
+ color: #818a91;
+}
+
+span.twitter-typeahead {
+ width: 100%;
+}
+
+.input-group span.twitter-typeahead {
+ display: block !important;
+}
+.input-group span.twitter-typeahead .tt-menu {
+ top: 2.375rem !important;
+}
+
+span.hangindent2 { padding-left: 1em; }
+span.hangindent3 { padding-left: 2em; }
+span.hangindent4 { padding-left: 3em; }
+span.hangindent5 { padding-left: 4em; }
+span.hangindent6 { padding-left: 5em; }
\ No newline at end of file
diff --git a/templates/muncollapse/static/js/dynazoom.js b/templates/muncollapse/static/js/dynazoom.js
new file mode 100644
index 00000000..15c5dbf0
--- /dev/null
+++ b/templates/muncollapse/static/js/dynazoom.js
@@ -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;
+ }
+}
diff --git a/templates/muncollapse/templates/munin-categoryview.tmpl b/templates/muncollapse/templates/munin-categoryview.tmpl
new file mode 100644
index 00000000..f4a5bcc1
--- /dev/null
+++ b/templates/muncollapse/templates/munin-categoryview.tmpl
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![<TMPL_VAR ESCAPE='HTML' NAME='LABEL' />]()
width="
+ height=" />
+
+
+ ![<TMPL_VAR ESCAPE='HTML' NAME='LABEL' />]()
width="
+ height=" />
+
+
+ ![<TMPL_VAR ESCAPE='HTML' NAME='LABEL' />]()
width="
+ height=" />
+
+
+ ![<TMPL_VAR ESCAPE='HTML' NAME='LABEL' />]()
width="
+ height=" />
+
+
+
+
+
+
+ Category ::
+ -
+
-
+ ++
+ ++ + +
+
+
+
+ Category ::
+ -
+
-
+ ++
+ ++ + +
+
+
+
+ Category ::
+ -
+
-
+ ++
+ ++ + +
+
+
+
+ Category ::
+ -
+
-
+ ++
+ ++ + +
+
+ ▶ Show All
+ ▼ Hide All
+
+
+ " data-toggle="collapse" data-target="#
+ _coll">
+
+
+
+
+There are /problems.html#warnings"> warnings
+
+
+
+
+
+
+
+ Problem Overview
+ +Critical
+
+
+
+
+Warning
+
+
+
+
+Unknown
+
+
+
+
+Note: This service is in UNKNOWN state, because something bad happened. Please check your network, the munin-node, and the plugin.
+ Note: This service is in CRITICAL state because one of the values reported is outside the allowed range. Please see further down for information about the ranges and the graph for the values.
+ Note: This service is in WARNING state because one of the values reported is outside the allowed range. Please see further down for information about the ranges and the graph for the values.
+
+
+
+
+ 
width="
+
+ 
width="
+
+
+
+
+
+ 
width="
+
+ 
width="
+
+
+
+ 
width="height=" />
+
+
+ width="height=" />
+
+ Graph information
+ +| Field | +Internal name | +Type | +Warning | +Critical | +Info | +
|---|---|---|---|---|---|
|
+ This field has the following extra information: |
+ |||||
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Zoom Image - Requires munin-cgi-graph]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Zooming is very easy, it's done in 3 clicks ( regular clicks, no drag & drop ):
+-
+
- Click to define the start of zoom. +
- Click to define the ending of zoom. +
- Click inside shaded area to zoom, outside to cancel. +
Shortcut: To just set a new start of zoom, click before your start point for your second click.
+You can use the interactive form too.
+
+
+
+
+