Site Monitor

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;    
}

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

JavaScript

var sites = {
    cartaz : {url : 'http://10.0.30.189:8081/CartazMV/', 
              title : 'CartazMV'},
    sassVerde : {url : 'http://sassverde.insinuante.vpn.br:8080/sassWeb/',
            title : 'Sass Verde'},
    
    checklistTi : {url : 'http://10.0.30.235/indados/homol/',
                   title : 'CheckListTI'},
    checklist : {url : 'http://checklist.insinuante.vpn.br/checklist/',
                 title : 'Checklist'},
    infacil : {url: 'http://infacil.insinuante.vpn.br:8080/infacil/',
               title : 'Infacil'},
    sisinvent : {url:'http://10.0.30.189:8082/SisinventMV/',
                 title : 'SisInventMV'},
    sistrans : {url : 'http://172.30.1.15:8080/sistrans/Login.do?acao=logar', title : 'Sistrans'},
    sisfrete : {url:"http://sisfrete.insinuante.vpn.br/sisfrete/Login.do?acao=logar",
                title : "SisFrete"},
    sisport : {url : 'http://sistemas.insinuante.vpn.br/sisport/',
               title : 'SisPort'},
protocolo : {url : 'http://10.0.30.189:8080/protocolo_juridico',
               title : 'Protocolo J'}    
};

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)...