mirror of
https://github.com/Luzifer/mondash.git
synced 2024-12-23 04:21:18 +00:00
Knut Ahlers
600f2f8448
Instead of just showing three bars with different colors which is quite useless overall now segments of the progress bar are generated according to the state of the check at the corresponding point of time. The effect is the viewer can see how recently the status was triggered instead just seeing a percentage. Signed-off-by: Knut Ahlers <knut@ahlers.me>
179 lines
8 KiB
HTML
179 lines
8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>MonDash - Dashboard</title>
|
|
|
|
<!-- Bootstrap -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
|
|
integrity="sha256-916EbMg70RQy9LHiGkXzG8hSg9EdNy97GazNG/aiY1w=" crossorigin="anonymous" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css"
|
|
integrity="sha256-ZT4HPpdCOt2lvDkXokHuhJfdOKSPFLzeAJik5U/Q+l4=" crossorigin="anonymous" />
|
|
|
|
<!-- Chartist -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css"
|
|
integrity="sha256-Te9+aTaL9j0U5PzLhtAHt+SXlgIT8KT9VkyOZn68hak=" crossorigin="anonymous" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.js"
|
|
integrity="sha256-UzffRueYhyZDw8Cj39UCnnggvBfa1fPcDQ0auvCbvCc=" crossorigin="anonymous"></script>
|
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
<script>
|
|
function timeConverter(UNIX_timestamp){
|
|
var a = new Date(UNIX_timestamp*1000);
|
|
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
|
var year = a.getFullYear();
|
|
var month = months[a.getMonth()];
|
|
var date = a.getDate();
|
|
var hour = a.getHours();
|
|
var min = a.getMinutes();
|
|
var sec = a.getSeconds();
|
|
var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec ;
|
|
return time;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-default">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="/">MonDash</a>
|
|
</div><!-- /.navbar-header -->
|
|
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
<ul class="nav navbar-nav">
|
|
<li><a href="http://docs.mondash.apiary.io/" target="_blank">API Docs</a></li>
|
|
</ul><!-- /.navbar-right -->
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="/create">Get your own dashboard</a></li>
|
|
</ul><!-- /.navbar-right -->
|
|
</div><!-- /.navbar-collapse -->
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
{% if dashid == "welcome" %}
|
|
<div class="row">
|
|
<div class="jumbotron text-center">
|
|
<h1>Welcome to MonDash!</h1>
|
|
<p>You're currently seeing a demo dashboard updated with random numbers below. To get started read the <a href="http://docs.mondash.apiary.io/" target="_blank">API documentation</a> and create your own dashboard by clicking the button in the upper right hand corner…
|
|
<p>If you have any questions about this project don't hesitate to ask <a href="https://ahlers.me/" target="_blank">Knut</a>.</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if metrics|length == 0 and dashid != "welcome" %}
|
|
<div class="row">
|
|
<div class="col-md-6 col-md-offset-3 text-center">
|
|
<p>Welcome to your new dashboard. Your API-key is:</p>
|
|
<pre>{{ apikey }}</pre>
|
|
<p>After you sent your first metric you can reach your dashboard here:</p>
|
|
<a href="{{ baseurl }}/{{ dashid }}">{{ baseurl }}/{{ dashid }}</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
{% for metric in metrics %}
|
|
{% if metric.PreferredStatus == "OK" %}
|
|
<div class="row alert alert-success">
|
|
{% elif metric.PreferredStatus == "Warning" %}
|
|
<div class="row alert alert-warning">
|
|
{% elif metric.PreferredStatus == "Critical" %}
|
|
<div class="row alert alert-danger">
|
|
{% else %}
|
|
<div class="row alert alert-info">
|
|
{% endif %}
|
|
<div class="col-md-9">
|
|
<h4>{{ metric.Title }}</h4>
|
|
<p>{{ metric.Description }}</p>
|
|
{% if !metric.HideValue %}
|
|
<span>
|
|
{% if metric.Status == "OK" %}
|
|
<span class="label label-success">Current Value: {{ metric.Value }}</span>
|
|
{% elif metric.Status == "Warning" %}
|
|
<span class="label label-warning">Current Value: {{ metric.Value }}</span>
|
|
{% elif metric.Status == "Critical" %}
|
|
<span class="label label-danger">Current Value: {{ metric.Value }}</span>
|
|
{% else %}
|
|
<span class="label label-info">Current Value: {{ metric.Value }}</span>
|
|
{% endif %}
|
|
{% if !metric.HideMAD %}
|
|
<abbr title="Median Absolute Deviation">MAD</abbr>: {{ metric.MadMultiplier }} above the Median ({{ metric.Median }})
|
|
{% endif %}
|
|
</span>
|
|
{% endif %}
|
|
{% if !metric.HideMAD %}
|
|
<div class="ct-chart {{metric.MetricID}} .ct-double-octave"></div>
|
|
<script>
|
|
var data = {
|
|
// A labels array that can contain any sort of values
|
|
labels: [{{ metric.LabelHistory|lastNItems:"60"|join:"," }}],
|
|
// Our series array that contains series objects or in this case series data arrays
|
|
series: [[{{ metric.DataHistory|lastNItems:"60"|join:"," }}]]
|
|
};
|
|
|
|
for (var i = 0; i < data.labels.length; i++) {
|
|
data.labels[i] = timeConverter(data.labels[i]);
|
|
}
|
|
|
|
new Chartist.Line('.{{metric.MetricID}}', data);
|
|
</script>
|
|
{% endif %}
|
|
<small>
|
|
Updated {{ metric.Meta.LastUpdate|naturaltime}}
|
|
{% if metric.Status != "OK" %}
|
|
/ Last ok {{ metric.Meta.LastOK|naturaltime }}
|
|
{% endif %}
|
|
</small>
|
|
</div>
|
|
<div class="col-md-3 hidden-xs">
|
|
<div class="progress">
|
|
{% for seg in metric.GetHistoryBar %}
|
|
<div class="progress-bar
|
|
{% if seg.Status == "OK" %}progress-bar-success
|
|
{% elif seg.Status == "Warning" %}progress-bar-warning
|
|
{% elif seg.Status == "Critical" %}progress-bar-danger
|
|
{% else %}progress-bar-info
|
|
{% endif %}"
|
|
style="width: {{ seg.Percentage * 100 }}%"
|
|
data-toggle="tooltip" data-placement="bottom"
|
|
title="Start: {{ seg.Start|time:"2006-01-02 15:04:05" }}<br>End: {{ seg.End|time:"2006-01-02 15:04:05" }}"
|
|
>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
|
|
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"
|
|
integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
|
|
<script>
|
|
$(function () {
|
|
$('[data-toggle="tooltip"]').tooltip({
|
|
container: 'body',
|
|
html: true,
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|