peya-nodejs-pool/website_example/pages/admin/monitoring.html

<ul class="nav nav-tabs" id="coinTabs">
</ul>

<!-- Tab panes -->
<div class="tab-content" id="tab-content">
</div>

<script id="siblingTabTemplate" type="text/x-handlebars-template">
    <li id="coinTabs{{coin}}" role="presentation" class="{{active}}"><a href="#{{coin}}" data-coin="{{coin}}">{{coin}} {{symbol}}</a></li>
</script>

<!-- Handlebars template -->
<script id="monitoringInfo" type="text/x-handlebars-template">
    <div role="tabpanel" class="tab-pane {{active}}" id="{{coin}}">
        <div class="row">
            <div class="infos col-sm-6">
                <h3>Daemon</h3>
                  <div class="card padding-10">
                    <ul class="list-unstyled">
                         <li><strong>Last check:</strong> {{monitoringDaemon.lastCheck}}</li>
                         <li><strong>Last status:</strong>
                             <span id="daemonStatus">{{monitoringDaemon.lastStatus}}</span>
                         </li>
                         <li><strong>Last response:</strong>
                             <pre>{{monitoringDaemon.lastResponse}}</pre>
                         </li>
                         <li><strong>Last fail:</strong>
                             <span>{{monitoringDaemon.lastFail}}</span>
                         </li>
                         <li><strong>Last fail response:</strong>
                             <pre>{{monitoringDaemon.lastFailResponse}}</pre>
                         </li>
                     </ul>
                </div>
            </div>
            <div class="infos col-sm-6">
                <h3>Wallet</h3>
                <div class="card padding-10">
                    <ul class="list-unstyled">
                        <li><strong>Last check:</strong> {{monitoringWallet.lastCheck}}</li>
                        <li><strong>Last status:</strong>
                            <span id="walletStatus">{{monitoringWallet.lastStatus}}</span>
                        </li>
                        <li><strong>Last response:</strong>
                            <pre>{{monitoringWallet.lastResponse}}</pre>
                        </li>
                        <li><strong>Last fail:</strong>
                            <span>{{monitoringWallet.lastFail}}</span>
                        </li>
                        <li><strong>Last fail response:</strong>
                            <pre>{{monitoringWallet.lastFailResponse}}</span></pre>
                    </ul>
                </div>
            </div>
        </div>

        <h3>Logs</h3>

        <div class="card">
            <div class="table-responsive">
                <table class="table table-hover table-striped logList" id="logTable">
                    <thead>
                    <tr>
                        <th class="sort">Name <i class="fa fa-sort"></i></th>
                        <th class="sort">Modified <i class="fa fa-sort"></i></th>
                        <th class="sort">Size <i class="fa fa-sort"></i></th>
                    </tr>
                    </thead>
                    <tbody>
                    {{#logs}}
                    <tr>
                        <td data-sort="{{name}}"><a href="{{link}}" target="_blank">{{name}}</a></td>
                        <td data-sort="{{changed}}">{{changed}}</td>
                        <td data-sort="{{size}}">{{size}} bytes</td>
                    </tr>
                    {{/logs}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</script>

<!-- Javascript -->
<script>
function getCheckTime(timestamp) {
    return timestamp ? $.timeago(new Date(timestamp * 1000).toISOString()) : null;
}

function monitoringInfoParse(endPoint, key, data) {
    let monitoringDaemon = {
        lastCheck: getCheckTime(data['monitoring'].daemon.lastCheck) || 'never',
        lastStatus: data['monitoring'].daemon.lastStatus || '',
        lastFail: getCheckTime(data['monitoring'].daemon.lastFail) || 'never',
        lastFailResponse: data['monitoring'].daemon.lastFailResponse || ' ',
        lastResponse: data['monitoring'].daemon.lastResponse || ' '
    };

    let monitoringWallet = {
        lastCheck: getCheckTime(data['monitoring'].wallet.lastCheck) || 'never',
        lastStatus: data['monitoring'].wallet.lastStatus || '',
        lastFail: getCheckTime(data['monitoring'].wallet.lastFail) || 'never',
        lastFailResponse: data['monitoring'].wallet.lastFailResponse || ' ',
        lastResponse: data['monitoring'].wallet.lastResponse || ' '
    };
    
    let properData = {};
    if(data.hasOwnProperty('logs')) {
    properData['logs'] = []
        for(let log in data['logs']) {
        properData['logs'].push({name: log,
                     link: `${endPoint}/admin_log?file=${log}&password=${docCookies.getItem('password')}`,
                     changed: formatDate(data['logs'][log].changed),
                     size: data['logs'][log].size})
        }
    }
    properData['coin'] = key
    properData['active'] = data.active
    properData['monitoringDaemon'] = monitoringDaemon;
    properData['monitoringWallet'] = monitoringWallet;
    return properData;
}

function renderLogInfo(endPoint, key, active,  password) {


    if(!password) {
        password = prompt('Enter admin password');
    }
    
    $.ajax({
        url: `${endPoint}/admin_monitoring`,
        data: {password: password},
        dataType: 'json',
        cache: false,
        success: function(data) {
            docCookies.setItem('password', password, Infinity);
        data['active'] = active
            renderTemplate(monitoringInfoParse(endPoint, key, data), `#monitoringInfo`, `#tab-content`);
            $(`#daemonStatus${key}`).addClass(data['monitoring'].daemon.lastStatus == 'ok' ? 'text-success' : 'text-danger');
            $(`#walletStatus${key}`).addClass(data['monitoring'].wallet.lastStatus == 'ok' ? 'text-success' : 'text-danger');

            $('.logList th.sort').on('click', sortTable)
        },
        error: function(e) {
            docCookies.removeItem('password');
        }
    });
}

$(function() {
    let password = docCookies.getItem('password');

    let template = $('#siblingTabTemplate').html();
    Mustache.parse(template)
    let rendered = Mustache.render(template, {coin:lastStats.config.coin, symbol:`(${lastStats.config.symbol})`, active:'active'});
    $('#coinTabs').append(rendered)

    renderLogInfo(api, lastStats.config.coin, 'active', password);
    $('#coinTabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })

});
</script>