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 -->
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" >
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" >
2015-02-22 20:58:58 +00:00
<!-- Chartist Library -->
2015-07-10 18:28:55 +00:00
< link rel = "stylesheet" href = "//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" >
< script src = "//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js" > < / script >
2015-02-22 21:19:26 +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-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]-->
< / 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…
< p > If you have any questions about this project don't hesitate to ask < a href = "https://luzifer.io/" 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 %}
2015-02-23 01:16:40 +00:00
{% if metric.StatisticalStatus == "OK" %}
2015-02-07 18:32:44 +00:00
< div class = "row alert alert-success" >
2015-02-23 01:16:40 +00:00
{% elif metric.StatisticalStatus == "Warning" %}
2015-02-07 18:32:44 +00:00
< div class = "row alert alert-warning" >
2015-02-23 01:16:40 +00:00
{% elif metric.StatisticalStatus == "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 >
2015-07-06 23:20:50 +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 %}
{{ metric.MadMultiplier }} < abbr title = "Median Absolute Deviation" > MAD< / abbr >
above the Median ({{ metric.Median }})
< / span >
2015-02-22 20:58:58 +00:00
< div class = "ct-chart {{metric.MetricID}} .ct-double-octave" > < / div >
< script >
var data = {
// A labels array that can contain any sort of values
2015-07-10 18:28:55 +00:00
labels: [{{ metric.LabelHistory|lastNItems:"60"|join:"," }}],
2015-02-22 20:58:58 +00:00
// Our series array that contains series objects or in this case series data arrays
2015-07-10 18:28:55 +00:00
series: [[{{ metric.DataHistory|lastNItems:"60"|join:"," }}]]
2015-02-22 20:58:58 +00:00
};
2015-07-06 21:06:11 +00:00
2015-02-22 21:19:26 +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
2015-02-22 20:58:58 +00:00
new Chartist.Line('.{{metric.MetricID}}', data);
< / script >
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" >
< div class = "progress-bar progress-bar-success" style = "width: {{ metric.Meta.PercOK }}%" >
< / div >
< div class = "progress-bar progress-bar-warning" style = "width: {{ metric.Meta.PercWarn }}%" >
< / div >
< div class = "progress-bar progress-bar-danger" style = "width: {{ metric.Meta.PercCrit }}%" >
< / div >
< / div >
< / div >
< / div >
{% endfor %}
{% endif %}
< / div >
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" > < / script >
<!-- Include all compiled plugins (below), or include individual files as needed -->
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" > < / script >
< / body >
< / html >
