mirror of
https://github.com/munin-monitoring/contrib.git
synced 2025-08-03 22:58:20 +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"
229 lines
9.9 KiB
Cheetah
229 lines
9.9 KiB
Cheetah
<TMPL_INCLUDE NAME="partial/head.tmpl" />
|
|
<!--
|
|
File: munin-serviceview.tmpl
|
|
|
|
Used: Individual Service view, top level template
|
|
-->
|
|
<div class="clearfix"></div>
|
|
|
|
<TMPL_LOOP NAME="SERVICES">
|
|
<!-- Alerts -->
|
|
<TMPL_IF NAME="STATE_UNKNOWN">
|
|
<div class="alert service-alert alert-info"><strong>Note:</strong> This service is in UNKNOWN state, because something bad happened. Please check your network, the munin-node, and the plugin.</div>
|
|
</TMPL_IF>
|
|
<TMPL_IF NAME="STATE_CRITICAL">
|
|
<div class="alert service-alert alert-danger"><strong>Note:</strong> 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.</div>
|
|
</TMPL_IF>
|
|
<TMPL_IF NAME="STATE_WARNING">
|
|
<div class="alert service-alert alert-warning"><strong>Note:</strong> 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.</div>
|
|
</TMPL_IF>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<!-- <TMPL_VAR NAME="ZOOMDAY"> -->
|
|
<img data-href="<TMPL_VAR NAME='ZOOMDAY' />" src="<TMPL_VAR NAME='IMGDAY' />"
|
|
alt="daily graph"
|
|
class="img-fluid img-zoom i<TMPL_IF NAME='STATE_WARNING'> warn</TMPL_IF><TMPL_IF NAME='STATE_CRITICAL'> crit</TMPL_IF>"
|
|
<TMPL_IF NAME="IMGDAYWIDTH" />width="<TMPL_VAR NAME='IMGDAYWIDTH' />" </TMPL_IF>
|
|
<TMPL_IF NAME="IMGDAYHEIGHT" />height="<TMPL_VAR NAME='IMGDAYHEIGHT' />"</TMPL_IF>/>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<img data-href="<TMPL_VAR NAME='ZOOMWEEK'>" src="<TMPL_VAR NAME='IMGWEEK'>"
|
|
alt="weekly graph"
|
|
class="img-fluid img-zoom i<TMPL_IF NAME='STATE_WARNING'> warn</TMPL_IF><TMPL_IF NAME='STATE_CRITICAL'> crit</TMPL_IF>"
|
|
<TMPL_IF NAME="IMGWEEKWIDTH" />width="<TMPL_VAR NAME='IMGWEEKWIDTH' />" </TMPL_IF>
|
|
<TMPL_IF NAME="IMGWEEKHEIGHT" />height="<TMPL_VAR NAME='IMGWEEKHEIGHT' />"</TMPL_IF>/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<img data-href="<TMPL_VAR NAME='ZOOMMONTH'>" src="<TMPL_VAR NAME='IMGMONTH'>"
|
|
alt="monthly graph"
|
|
class="img-fluid img-zoom i<TMPL_IF NAME='STATE_WARNING'> warn</TMPL_IF><TMPL_IF NAME='STATE_CRITICAL'> crit</TMPL_IF>"
|
|
<TMPL_IF NAME="IMGMONTHWIDTH" />width="<TMPL_VAR NAME='IMGMONTHWIDTH' />" </TMPL_IF>
|
|
<TMPL_IF NAME="IMGMONTHHEIGHT" />height="<TMPL_VAR NAME='IMGMONTHHEIGHT' />"</TMPL_IF>/>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<img data-href="<TMPL_VAR NAME='ZOOMYEAR'>" src="<TMPL_VAR NAME='IMGYEAR'>"
|
|
alt="yearly graph"
|
|
class="img-fluid img-zoom i<TMPL_IF NAME='STATE_WARNING'> warn</TMPL_IF><TMPL_IF NAME='STATE_CRITICAL'> crit</TMPL_IF>"
|
|
<TMPL_IF NAME="IMGYEARWIDTH" />width="<TMPL_VAR NAME='IMGYEARWIDTH' />" </TMPL_IF>
|
|
<TMPL_IF NAME="IMGYEARHEIGHT" />height="<TMPL_VAR NAME='IMGYEARHEIGHT' />"</TMPL_IF>/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- .sum graphs. One of the least used features of munin? -->
|
|
<TMPL_IF NAME="IMGWEEKSUM">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<img src="<TMPL_VAR NAME='IMGWEEKSUM' />"
|
|
alt="summed weekly graph"
|
|
<TMPL_IF NAME="IMGWEEKSUMWIDTH">width="<TMPL_VAR NAME='IMGWEEKSUMWIDTH' />" </TMPL_IF>
|
|
<TMPL_IF NAME="IMGWEEKSUMHEIGHT">height="<TMPL_VAR NAME='IMGWEEKSUMHEIGHT' />"</TMPL_IF>/>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<img src="<TMPL_VAR NAME='IMGWEEKSUM' />"
|
|
alt="summed weekly graph"
|
|
<TMPL_IF NAME="IMGWEEKSUMWIDTH">width="<TMPL_VAR NAME='IMGWEEKSUMWIDTH' />" </TMPL_IF>
|
|
<TMPL_IF NAME="IMGWEEKSUMHEIGHT">height="<TMPL_VAR NAME='IMGWEEKSUMHEIGHT' />"</TMPL_IF>/>
|
|
</div>
|
|
</div>
|
|
</TMPL_IF>
|
|
|
|
<h2 class="mt-4"><small>Graph information</small></h2>
|
|
|
|
<TMPL_LOOP NAME="GRAPHINFO">
|
|
<p class="text-muted"><TMPL_VAR NAME="INFO"></p>
|
|
</TMPL_LOOP>
|
|
|
|
<table class="table table-hover table-condensed">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-md-2">Field</th>
|
|
<th class="col-md-2">Internal name</th>
|
|
<th class="col-md-1">Type</th>
|
|
<th class="col-md-1">Warning</th>
|
|
<th class="col-md-1">Critical</th>
|
|
<th class="col-md-5">Info</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<TMPL_LOOP NAME="FIELDINFO">
|
|
<tr<TMPL_IF NAME="STATE_CRITICAL"> class="table-danger"<TMPL_ELSE><TMPL_IF NAME="STATE_WARNING"> class="table-warning"</TMPL_IF></TMPL_IF>>
|
|
<td><TMPL_VAR ESCAPE="HTML" NAME="LABEL" /></td>
|
|
<td><TMPL_VAR ESCAPE="HTML" NAME="FIELD" /></td>
|
|
<td><TMPL_VAR NAME="TYPE" /></td>
|
|
<td class="text-warning"><TMPL_VAR NAME="WARN" /></td>
|
|
<td class="text-danger"><TMPL_VAR NAME="CRIT" /></td>
|
|
<td class="text-muted"><TMPL_VAR ESCAPE="HTML" NAME="INFO" /></td>
|
|
</tr>
|
|
<TMPL_IF NAME="EXTINFO">
|
|
<tr>
|
|
<td class='wrap' colspan="6" align='left' valign='top'>
|
|
This field has the following extra information: <TMPL_VAR ESCAPE="HTML" NAME="EXTINFO" />
|
|
</td>
|
|
</tr>
|
|
</TMPL_IF>
|
|
</TMPL_LOOP>
|
|
</tbody>
|
|
</table>
|
|
</TMPL_LOOP>
|
|
|
|
<div id="zoom" class="modal fade">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-12">
|
|
<form class="form-horizontal" role="form" name="zoom_form" id="zoom_form">
|
|
<div class="form-group row">
|
|
<label for="plugin_name" class="col-sm-2 control-label">Plugin Name</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control form-control-sm" name="plugin_name" id="plugin_name">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="start_iso8601" class="col-sm-2 control-label">Time Start/Stop</label>
|
|
<div class="col-sm-5">
|
|
<input type="text" class="form-control form-control-sm" name="start_iso8601" id="start_iso8601">
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<input type="text" class="form-control form-control-sm" name="stop_iso8601" id="stop_iso8601">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="start_epoch" class="col-sm-2 control-label">Epoch Start/Stop</label>
|
|
<div class="col-sm-5">
|
|
<input type="text" class="form-control form-control-sm" name="start_epoch" id="start_epoch">
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<input type="text" class="form-control form-control-sm" name="stop_epoch" id="stop_epoch">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="lower_limit" class="col-sm-2 control-label">Limit Low/High</label>
|
|
<div class="col-sm-5">
|
|
<input type="text" class="form-control form-control-sm" name="lower_limit" id="lower_limit">
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<input type="text" class="form-control form-control-sm" name="upper_limit" id="upper_limit">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="size_x" class="col-sm-2 control-label">Width/Height</label>
|
|
<div class="col-sm-5">
|
|
<div class="input-group input-group-sm">
|
|
<input type="text" class="form-control" name="size_x" id="size_x">
|
|
<span class="input-group-append"><span class="input-group-text">px</span></span>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<div class="input-group input-group-sm">
|
|
<input type="text" class="form-control" name="size_y" id="size_y">
|
|
<span class="input-group-append"><span class="input-group-text">px</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<input type=hidden name="cgiurl_graph"/>
|
|
<div class="btn-group w-100 mx-3">
|
|
<button type="button" class="btn btn-outline-primary" name="btnReset">↺ Reset to Initial</button>
|
|
<button type="button" class="btn btn-outline-info" name="btnShowDay">⏱ Show Today</button>
|
|
<button type="button" class="btn btn-outline-info" name="btnShowWeek">⏱ Show Week</button>
|
|
<button type="button" class="btn btn-outline-info" name="btnShowMonth">⏱ Show Month</button>
|
|
<button type="button" class="btn btn-outline-info" name="btnShowYear">⏱ 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">× Close</button>
|
|
</div>
|
|
<button type="submit" class="d-none">Hidden Submit Button - "onsubmit" needs this to exist.</button>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="alert alert-info">
|
|
<p>Zooming is very easy, it's done in 3 clicks ( regular clicks, no drag & drop ):</p>
|
|
<ol>
|
|
<li>Click to define the start of zoom.</li>
|
|
<li>Click to define the ending of zoom.</li>
|
|
<li>Click inside shaded area to zoom, outside to cancel.</li>
|
|
</ol>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<TMPL_INCLUDE NAME="partial/footer_pre.tmpl" />
|
|
|
|
|
|
<script src="<TMPL_VAR NAME='R_PATH'>/static/js/dynazoom.js"></script>
|
|
<script type="text/javascript">
|
|
//Zoom modal opening
|
|
$( ".img-zoom" ).click(function(){
|
|
var query = $(this).attr( "data-href" );
|
|
var form = document.getElementById( "zoom_form" );
|
|
var image = document.getElementById( "zoom_image" );
|
|
|
|
refreshZoom(query, form, image);
|
|
$( "#zoom" ).modal( "show" );
|
|
});
|
|
</script>
|
|
|
|
<TMPL_INCLUDE NAME="partial/footer.tmpl" />
|