BH svrmon

by Matt Anderson

HTML

<link rel="stylesheet" href="https://static.beyondhosting.net/css/bootstrap.css">
<link rel="stylesheet" href="https://static.beyondhosting.net/css/whmcs.css">
<script src="http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js"></script>
<link rel="stylesheet" href="https://static.beyondhosting.net/css/bh2.css">
<div class="pageContent whmcscontainer">
    <div class="page-header">
    <div class="styled_title"><h1>Monitoring Service <small>This page allows you to configure and view monitoring details</small></h1></div>
</div>
    <div class="statusBarWrapper">
        <div class="monitoringStatusBar row-fluid">
            <div class="span2">
                <h3>Up</h3>
                <p class="badge badge-success">10</p>
            </div>
            <div class="span2">
                <h3>Down</h3>
                <p class="badge badge-important">1</p>
            </div>
            <div class="span2">
                <h3>Paused</h3>
                <p class="badge">0</p>
            </div>
            <div class="span2">
                <h3>Alerts</h3>
                <p class="badge badge-warning">0</p>
            </div>
            <div class="span2">
                <h3>Uptime</h3>
                <p class="badge badge-success">99.99%</p>
            </div>
            <div class="span2">
                <h3>Average Latency</h3>
                <p class="badge">60.32ms</p>
            </div>
        </div>
    </div>
     <h1>Service Status <small>Last 24 hours</small></h1>

    <table class="table table-striped table-framed statusList">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" />
                </th>
                <th>Status</th>
                <th>Name</th>
                <th>Uptime</th>
                <th>Latency</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox"...

CSS

body, .whmcscontainer {
    min-width: 0;
    width: auto;
}
.pageContent {
    background: white;
    padding: 15px;
}

/**
    Global Status Indicators
*/
.statusBarWrapper {
    padding: 0 0 10px;
    border-bottom: 1px solid #ddd;
    margin: 0 0 15px;
}
.monitoringStatusBar {
}
.monitoringStatusBar .span2 {
    text-align: center;
}
.monitoringStatusBar h3 {
    font-size: 16px;
    margin: 10px;
    color: #454545;
    line-height: 18px;
}
.monitoringStatusBar p {
/*    font-style: oblique;*/
    font-size: 12px !important;
    font-weight: normal;
    line-height: 18px;
}

.monitoringStatusBar p:not(.badge) {
    color: #999;
}

/**
    Monitoring Service List
*/
 td.name div:last-child {
    color: #aaa;
    font-style: oblique;
    font-size: 12px;
}
table.statusList td:last-child {
    text-align: right;
}
table.statusList .downtimeSparkLine, table.statusList .latencySparkLine {
    width: 100%;
    line-height: 0;
}
div.downtimeSparkLine ~ p,
div.latencySparkLine ~ p{
    font-size: 11px;
    font-style: oblique;
    color: #999;
    margin: 4px 0 0 0;
    padding: 0;
    line-height: 14px;
}

JavaScript

$(function () {
    $("#spl1").sparkline([
    100, 100, 100, 100, 0, 0, 100, 100, 100, 100, 100, 100, 100, 100, 0, 0, 100, 100, 100, 100, 0, 0, 100, 100], {
        type: 'bar',
        height: '15px',
        width: '150px',
        zeroAxis: true,
        barColor: '#46A546'
    });

    $("#spl2").sparkline([32, 28, 16, 32, 50, 68, 70, 32, 80, 20, 11, 56, 43, 19, 75, 46, 20, 28, 30, 48, 20, 34, 45, 56], {
        type : 'line',
        width: '150px',
        lineColor: '#007fff',
        fillColor: '#afe0ff'
   });

});