1
0
Fork 0
mirror of https://github.com/munin-monitoring/contrib.git synced 2025-08-14 09:44:20 +00:00
Munin-Contrib/templates/munstrap/templates/munin-serviceview.tmpl
2017-01-28 01:23:48 +01:00

233 lines
No EOL
11 KiB
Cheetah

<TMPL_INCLUDE NAME="partial/head.tmpl">
<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">
<img data-href="<TMPL_VAR NAME="ZOOMDAY">" src="<TMPL_VAR NAME="IMGDAY">"
alt="daily graph"
class="img-responsive 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-responsive 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-responsive 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-responsive 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><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="danger"<TMPL_ELSE><TMPL_IF NAME="STATE_WARNING"> class="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-lg">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<img id="zoom_image" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form" name="zoom_form" id="zoom_form">
<div class="form-group">
<label for="plugin_name" class="col-sm-2 control-label">Plugin Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="plugin_name" id="plugin_name">
</div>
</div>
<div class="form-group">
<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" name="start_iso8601" id="start_iso8601">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" name="stop_iso8601" id="stop_iso8601">
</div>
</div>
<div class="form-group">
<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" name="start_epoch" id="start_epoch">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" name="stop_epoch" id="stop_epoch">
</div>
</div>
<div class="form-group">
<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" name="lower_limit" id="lower_limit">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" name="upper_limit" id="upper_limit">
</div>
</div>
<div class="form-group">
<label for="size_x" class="col-sm-2 control-label">Width/Height</label>
<div class="col-sm-5">
<div class="input-group">
<input type="text" class="form-control" name="size_x" id="size_x">
<span class="input-group-addon">px</span>
</div>
</div>
<div class="col-sm-5">
<div class="input-group">
<input type="text" class="form-control" name="size_y" id="size_y">
<span class="input-group-addon">px</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type=hidden name="cgiurl_graph"/>
<button type="submit" class="btn btn-success">Refresh</button>
<button type="button" class="btn btn-default" name="btnReset">Reset</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</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&amp;drop):</p>
<ol>
<li>Click to define the start of zoom.</li>
<li>Click to define the ending of zoom.</li>
<li>Refresh.</li>
</ol>
<p>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/formatdate.min.js"></script>
<script src="<TMPL_VAR NAME="R_PATH">/static/js/querystring.min.js"></script>
<script src="<TMPL_VAR NAME="R_PATH">/static/js/dynazoom.min.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");
form.onsubmit = function(){//Submit catching
var qs = new Querystring(query);
var src = "cgiurl_graph=" + qs.get("cgiurl_graph", "/munin-cgi/munin-cgi-graph")
+ "&plugin_name=" + form.plugin_name.value
+ "&start_epoch=" + form.start_epoch.value
+ "&stop_epoch=" + form.stop_epoch.value
+ "&rst_start_epoch=" + qs.get("start_epoch", "")
+ "&rst_stop_epoch=" + qs.get("stop_epoch", "")
+ "&lower_limit=" + form.lower_limit.value
+ "&upper_limit=" + form.upper_limit.value
+ "&size_x=" + form.size_x.value
+ "&size_y=" + form.size_y.value
;
refreshZoom(src, form, image);
return false;
};
refreshZoom(query, form, image);
$('#zoom').modal('show');
});
</script>
<TMPL_INCLUDE NAME="partial/footer.tmpl">