2015-02-07 18:32:44 +00:00
<!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 -->
2017-11-22 21:36:33 +00:00
< 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" />
2015-02-07 18:32:44 +00:00
2017-11-22 21:36:33 +00:00
<!-- 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 >
2015-02-22 20:58:58 +00:00
2015-02-07 18:32:44 +00:00
<!-- 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]-->
2017-11-22 21:36:33 +00:00
< 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 >
2015-02-07 18:32:44 +00:00
< / 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" >
2015-02-08 10:03:00 +00:00
< ul class = "nav navbar-nav" >
< li > < a href = "http://docs.mondash.apiary.io/" target = "_blank" > API Docs< / a > < / li >
< / ul > <!-- /.navbar - right -->
2015-02-07 18:32:44 +00:00
< 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…
2017-11-22 21:48:43 +00:00
< p > If you have any questions about this project don't hesitate to ask < a href = "https://ahlers.me/" target = "_blank" > Knut< / a > .< / p >
2015-02-07 18:32:44 +00:00
< / 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 %}
2016-03-27 18:32:53 +00:00
{% if metric.PreferredStatus == "OK" %}
2015-02-07 18:32:44 +00:00
< div class = "row alert alert-success" >
2016-03-27 18:32:53 +00:00
{% elif metric.PreferredStatus == "Warning" %}
2015-02-07 18:32:44 +00:00
< div class = "row alert alert-warning" >
2016-03-27 18:32:53 +00:00
{% elif metric.PreferredStatus == "Critical" %}
2015-02-07 18:32:44 +00:00
< 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 >
2017-11-24 17:23:32 +00:00
{% if !metric.HideValue %}
2016-03-27 19:13:36 +00:00
< 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 %}
2017-11-22 21:48:00 +00:00
< abbr title = "Median Absolute Deviation" > MAD< / abbr > : {{ metric.MadMultiplier }} above the Median ({{ metric.Median }})
2016-03-27 19:13:36 +00:00
{% endif %}
< / span >
2017-11-24 17:23:32 +00:00
{% endif %}
2016-03-27 19:13:36 +00:00
{% 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:"," }}]]
};
2015-07-06 21:06:11 +00:00
2016-03-27 19:13:36 +00:00
for (var i = 0; i < data.labels.length ; i + + ) {
data.labels[i] = timeConverter(data.labels[i]);
}
2015-07-06 21:06:11 +00:00
2016-03-27 19:13:36 +00:00
new Chartist.Line('.{{metric.MetricID}}', data);
< / script >
{% endif %}
2015-02-07 18:32:44 +00:00
< 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" >
2018-04-08 21:39:39 +00:00
{% 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" }}"
>
2015-02-07 18:32:44 +00:00
< / div >
2018-04-08 21:39:39 +00:00
{% endfor %}
2015-02-07 18:32:44 +00:00
< / div >
< / div >
< / div >
{% endfor %}
{% endif %}
< / div >
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
2017-11-22 21:36:33 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous">< / script >
2015-02-07 18:32:44 +00:00
<!-- Include all compiled plugins (below), or include individual files as needed -->
2017-11-22 21:36:33 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous">< / script >
2018-04-08 21:39:39 +00:00
< script >
$(function () {
$('[data-toggle="tooltip"]').tooltip({
container: 'body',
html: true,
});
});
< / script >
2015-02-07 18:32:44 +00:00
< / body >
< / html >
