Socialtime Monitor

Monitoramento dos serviços do socialtime

by edgardleal

HTML

<table border="1">
    <thead>
        <tr class="ui-state-default">
            <th>Host</th>
            <th>Status</th>
            <th style="width : 250px">Resposta</th>
        </tr>
    </thead>
    <tbody>        
    </tbody>
</table>
        <div class="loadingBar">
            <div class="startBar"></div>
            <div class="endBar"></div>
        </div>
<div id="dummy"></div>

CSS

td, th {
    padding : 5px;
    border-radius : 3px;
    text-align : center;
}

div.loading div.startBar{
    background : black;
}

.loadingBar, .loading .endBar{
  height : 10px;
  width : 400px;
}

td div, .loadingBar {
    border-radius : 5px;
    border : solid 1px;    
}

.bar{
    background-color : red;
    height : 1px;
    border : solid 1px;
}

td div{   
    height : 20px;
    width : 250px;    
}

JavaScript

var sites = {    
    webService : {url :
                  'http://socialtime.com.br/MegaRadarSocial/get', 
              title : 'WebService'},
    imagens : {url : 'http://socialtime.com.br/imagens/50/50/1.png',
               title : 'Imagens'},
    admin : {url : 'http://socialtime.com.br/socialtime-admin/login', 
              title : 'Admin'},
    publico : {url : 'http://socialtime.com.br/socialtime-lojista/login',
               title : 'Lojista'}    
};

function setUpTable(){
   var table = $('table tbody');
    var keys = Object.keys(sites);
    for(var i in keys){
        table.append('<tr><td class="ui-state-default">' + 
                     '<a target="_black" ' +
         ' href="' + sites[keys[i]].url + '">' + 
                     sites[keys[i]].title 
                     + '</a></td><td></td><td><div></div></td></tr>');
    }
}

function setStatus(site, value){
    if(!site) return;
    var valueBar = 250 - (site.time/10);
    valueBar = valueBar < 0 ? 0: valueBar;
    var color  = '#00FF00';
    var text = 'Ok';
    if(value==-1){
        color = 'yellow';
        text = '...';
    }else
    if(!value || value == 503){
        color = 'red';
        text = 'X';
    }
    $('table tbody tr td:contains(' + site.title + ')')
    .next()
    .text(text)
    .css('background', color)
    .next()    
    .find('div').css('width', (value?valueBar:0) + 'px')
    .css('background', valueBar>=200?'#00FF00':
         (valueBar < 100?'red':'yellow'));
}

setUpTable();
var locked = false;

function check(site){
   site.time = new Date().getTime(); 
   if(!site || !site.title || !site.url) 
       throw new Error('Site inválido');
    setStatus(site, -1);
    locked = true;
    $.ajax({url : site.url,
            dataType : 'jsonp',
            crossDomain : true})
    .done(function(data){
        site.time = new Date().getTime() - site.time;
        setStatus(site, 1);
    })        
    .fail(function(jqXHR, status, error){
        site.time = new...