<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <br> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Monitor de Procesos</h3> <span class="pull-right"> <!-- Tabs --> <ul class="nav panel-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Jobs</a></li> <li><a href="#tab2" data-toggle="tab">Steps</a></li> <li><a href="#tab3" data-toggle="tab">Jobs/Steps</a></li> <li><a href="#tab4" data-toggle="tab">Otros</a></li> </ul> </span> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <table class="table"> <thead> <tr> <th>Proceso</th> <th>Estado</th> </tr> </thead> <tbody> <tr class="success"> <td>Backup de Configuracion de Instancias</td> <td><div class="circuloR"></div></td> </tr> <tr class="danger"> <td>DatabaseBackup - TODAS_LAS_BASES - LOG - SOLO_PARA_ALERTA</td> <td><div class="circuloR"></div></td> </tr> <tr class="info"> <td>DatabaseIndexOptimize - KILL REINDEX_DATABASES_CON_SYNC_A_BRASIL</td> <td><div class="circuloV"></div></td> </tr> <tr class="info"> <td>DatabaseIndexOptimize - REINDEX_DATABASES_CON_SYNC_A_BRASIL</td> <td><div class="circuloV"></div></td> </tr> </tbody> </table> </div> <div class="tab-pane" id="tab2"> <table class="table"> <thead> <tr> <th>Proceso</th> <th>Estado</th> </tr> </thead> <tbody> <tr class="success"> <td>Backup de Configuracion de Instancias</td> <td><div class="circuloR"></div></td> </tr> <tr class="danger"> <td>DatabaseBackup - TODAS_LAS_BASES - LOG - SOLO_PARA_ALERTA</td> <td><div class="circuloR"></div></td> </tr> </tbody> </table> </div> <div class="tab-pane" id="tab3"> <table class="table"> <thead> <tr> <th>Proceso</th> <th>Estado</th> </tr> </thead> <tbody> <tr class="success"> <td>Backup de Configuracion de Instancias</td> <td><div class="circuloR"></div></td> </tr> <tr class="danger"> <td>DatabaseBackup - TODAS_LAS_BASES - LOG - SOLO_PARA_ALERTA</td> <td><div class="circuloR"></div></td> </tr> <tr class="info"> <td>DatabaseIndexOptimize - KILL REINDEX_DATABASES_CON_SYNC_A_BRASIL</td> <td><div class="circuloV"></div></td> </tr> <tr class="info"> <td>DatabaseIndexOptimize - REINDEX_DATABASES_CON_SYNC_A_BRASIL</td> <td><div class="circuloV"></div></td> </tr> </tbody> </table> </div> <div class="tab-pane" id="tab4"> <table class="table"> <thead> <tr> <th>Proceso</th> <th>Estado</th> </tr> </thead> <tbody> <tr class="success"> <td>Backup de Configuracion de Instancias</td> <td><div class="circuloR"></div></td> </tr> <tr class="danger"> <td>DatabaseBackup - TODAS_LAS_BASES - LOG - SOLO_PARA_ALERTA</td> <td><div class="circuloR"></div></td> </tr> <tr class="info"> <td>DatabaseIndexOptimize - KILL REINDEX_DATABASES_CON_SYNC_A_BRASIL</td> <td><div class="circuloV"></div></td> </tr> <tr class="info"> <td>DatabaseIndexOptimize - REINDEX_DATABASES_CON_SYNC_A_BRASIL</td> <td><div class="circuloV"></div></td> </tr> <tr class="info"> <td>SDATATR_PROCESO AUTOMATICO DE COBROS INDIVIDUAL PARA CORRER A MANO</td> <td><div class="circuloV"></div></td> </tr> <tr class="info"> <td>SDATATR_ProcesoAutomaticoBoletoPreAcuerdo</td> <td><div class="circuloV"></div></td> </tr> <tr class="info"> <td>SDATATRN temporal ZZ_ACANTEROS_sProc_Boletas_ProcesoNocturno_EnvioMail_Batch</td> <td><div class="circuloV"></div></td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div>

/*Panel tabs*/ .panel-tabs { position: relative; bottom: 30px; clear:both; border-bottom: 1px solid transparent; } .panel-tabs > li { float: left; margin-bottom: -1px; } .panel-tabs > li > a { margin-right: 2px; margin-top: 4px; line-height: .85; border: 1px solid transparent; border-radius: 4px 4px 0 0; color: #ffffff; } .panel-tabs > li > a:hover { border-color: transparent; color: #ffffff; background-color: transparent; } .panel-tabs > li.active > a, .panel-tabs > li.active > a:hover, .panel-tabs > li.active > a:focus { color: #fff; cursor: default; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: rgba(255,255,255, .23); border-bottom-color: transparent; } .circuloV {width: 20px;height: 20px;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;background: #22FF00;} .circuloR {width: 20px;height: 20px;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;background: #FF0000;}