Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/neo64bit/python-nagios-fr…
Browse files Browse the repository at this point in the history 
…ontend
  • Loading branch information
Kristian Øllegaard committed Jan 15, 2012
2 parents 6e8239b + 8e7b790 commit 05b8123
Showing 1 changed file with 40 additions and 22 deletions.
62 changes: 40 additions & 22 deletions balbec/static/index.html
View file
Expand Up @@ -23,9 +23,13 @@
.service.code-0 { background: #3a3; border-color: #6c6; color: #fff; } .service.code-0 { background: #3a3; border-color: #6c6; color: #fff; }
.service.code-1 { background: #f33; border-color: #f66; color: #fff; box-shadow: 0px 0px 5px #f66; } .service.code-1 { background: #f33; border-color: #f66; color: #fff; box-shadow: 0px 0px 5px #f66; }
.service.code-2 { background: #ff3; border-color: #ff6; color: #222; box-shadow: 0px 0px 5px #ff6; } .service.code-2 { background: #ff3; border-color: #ff6; color: #222; box-shadow: 0px 0px 5px #ff6; }
#tooltip { position: fixed; top: 0; right: 20px; color: #999; padding: 10px 10px 5px 10px; background: #333; border: 1px solid #444; #tooltip { position: fixed; top: 0; right: 20px; color: #888; padding: 10px 10px 5px 10px; background: #333; border: 1px solid #444;
border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
#tooltip p { margin: 0; } #tooltip p { margin: 0; font-size: 12px; }
#tooltip .update { font-weight: bold; color: #aaa; }
#tooltip.warning { background: #611; border-color: #822; box-shadow: 0px 0px 15px #822; color: #ddd; }
#tooltip .loader { height: 7px; margin: 5px 0 0 0; background: #444; color: #444; overflow: hidden; }
#tooltip.warning .loader { background: #822; color: #822; }
</style> </style>
</head> </head>
<body> <body>
Expand All @@ -34,13 +38,27 @@
<p>No data available!</p> <p>No data available!</p>
</div> </div>
<div id="tooltip" class="align-right"> <div id="tooltip" class="align-right">
<p>Updated at <span class="update"></span></p> <p>Last update was <span class="updater"></span> minutes ago.</p>
<p>Refreshed <span class="refresh"></span> seconds ago</p> <div class="loader">0</div>
</div> </div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/jquery.min.js"><\/script>')</script>
<script type="text/javascript"> <script type="text/javascript">
var Dx = {};
Dx.REFRESH_RATE = 30 * 1000; // how often should the page check for updates (in milliseconds)
Dx.LOADER_RATE = 200; // loader refresh rate (in milliseconds)
Dx.MAX_TIME_DIFF = 5 * 60 * 1000; // at what time difference should a warning be displayed (in milliseconds)
Dx.content = $('#content'); // container to be replaced with content
Dx.tooltip = $('#tooltip'); // container that displays time related info
Dx.loader = $('#tooltip .loader'); // container for the loader
Dx.updater = $('#tooltip .updater'); // container for the update time
Dx.last_update = new Date(0);
$(function(){
updateData();
setInterval(updateData, Dx.REFRESH_RATE);
setInterval(increaseLoader, Dx.LOADER_RATE);
});
function parseData(data) { function parseData(data) {
var result = ''; var result = '';
$.each(data, function(map_key, map) { $.each(data, function(map_key, map) {
Expand All @@ -60,15 +78,14 @@
}); });
return result; return result;
} }
function update() { function updateData() {
var content = $('#content');
$.ajax({ $.ajax({
url: '/', url: '/',
headers: { "Accept": "application/json" }, headers: { "Accept": "application/json" },
dataType: 'json', dataType: 'json',
success: function (data) { success: function (data) {
//console.log(data); //console.log(data);
content.html(parseData(data.maps)); Dx.content.html(parseData(data.maps));
setLastUpdate(data.updated_at); setLastUpdate(data.updated_at);
resetTimer(); resetTimer();
}, },
Expand All @@ -78,30 +95,31 @@
}); });
} }
function setLastUpdate(unixtime) { function setLastUpdate(unixtime) {
var date = new Date(unixtime*1000); Dx.last_update = new Date(unixtime*1000);
var update = $('#tooltip .update'); var formatted_date = pad(Dx.last_update.getHours(), 2)+':'+pad(Dx.last_update.getMinutes(), 2)+':'+
date = pad(date.getHours(), 2)+':'+pad(date.getMinutes(), 2)+':'+pad(date.getSeconds(), 2)+', '+pad(date.getDate(), 2)+'.'+pad((date.getMonth()+1), 2)+'.'+date.getFullYear(); pad(Dx.last_update.getSeconds(), 2)+', '+pad(Dx.last_update.getDate(), 2)+'.'+
update.html(date); pad((Dx.last_update.getMonth()+1), 2)+'.'+Dx.last_update.getFullYear();
var now = new Date();
var time_diff = now - Dx.last_update;
if (time_diff > Dx.MAX_TIME_DIFF) {
Dx.tooltip.addClass('warning');
}
Dx.updater.html(Math.ceil(time_diff/1000/60)); // minutes
Dx.updater.val('title', formatted_date);
} }
function increaseTimer() { function increaseLoader() {
var timer = $('#tooltip .refresh'); if (Dx.loader.html().length < 1) Dx.loader.html(0);
if (timer.html().length < 1) timer.html(-1); Dx.loader.html(parseInt(Dx.loader.html())+1);
timer.html(parseInt(timer.html())+1); Dx.loader.css('width', Math.min(parseInt(Dx.loader.html()) * Dx.LOADER_RATE * 100 / Dx.REFRESH_RATE, 100) + '%' );
} }
function resetTimer() { function resetTimer() {
var timer = $('#tooltip .refresh'); Dx.loader.html(0);
timer.html(0);
} }
function pad(num, size) { function pad(num, size) {
var s = num+""; var s = num+"";
while (s.length < size) s = "0" + s; while (s.length < size) s = "0" + s;
return s; return s;
} }
$(function(){
update();
setInterval(update, 30 * 1000); // update every 30 seconds
setInterval(increaseTimer, 1 * 1000);
});
</script> </script>
</body> </body>
</html> </html>

0 comments on commit 05b8123

Please sign in to comment.