webconsole-plugins/memoryusage/src/main/resources/templates/memoryusage.html

<script type="text/javascript">
// <![CDATA[

function renderData(/* Object[] */ files) {
    $("#plugin_table > tbody > tr").remove();
    var tbody = $("#plugin_table > tbody");
    for ( var idx in files ) {
        var dumpFile = files[idx];
        var trElement = tr( null, { id: "entry" + dumpFile.name } );
        entryInternal( trElement,  dumpFile );
        tbody.append(trElement);   
    }
}

function entryInternal( /* Element */ parent, /* Object */ dumpFile ) {
    var name = dumpFile.name;
    var date = new Date(dumpFile.date).toLocaleString();
    var size = dumpFile.size.toLocaleString();

    var titleElement = createElement ("a", null, {
        href: window.location.pathname + "/" + name
    });
    titleElement.appendChild(text(name));

    var zipDL = createElement ("a", null, {
        href: window.location.pathname + "/" + name + ".zip"
    });
    zipDL.appendChild(text("(zipped)"));

    var liElement = createElement( "li", "dynhover ui-state-default ui-corner-all", {
        title: "${dump.remove}"
    });
    var ulElement = createElement( "ul", "icons ui-widget", null, [
        liElement
    ]);
    
    parent.appendChild( td( null, null, [ titleElement, text(" "), zipDL ] ) );
    parent.appendChild( td( null, null, [ text( date ) ] ) );
    parent.appendChild( td( null, null, [ text( size ) ] ) );
    parent.appendChild( td( null, null, [ ulElement ] ) );
    
    $(liElement)
        .html('<span class="ui-icon ui-icon-trash"></span>')
        .click(function() {
            $.post(window.location.pathname + "/" + name,
                { "X-Request-Method": "DELETE" },
                function(data) {
                    Xalert( data, "${dump.remove}" );
                    window.location = window.location;
                }
            );
        });
}

function renderOverall(/* Object */ overall) {
    var tbody = $("#overview > tbody");
    for ( var idx in overall ) {
        var trElement = tr( null, null, [
            td( null, null, [ text( idx ) ] ),
            td( null, null, [ text( overall[idx] ) ] )
        ]);
        tbody.append(trElement);   
    }
}

function renderPools(/* Object[] */ pools) {
    var tbody = $("#pools > tbody").empty();
    for ( var idx = 0; idx < pools.length; idx++ ) {
        var pool = pools[idx];
        var trElement = tr( null, null, [
            td( null, null, [ text( pool.name ) ] ),
            td( null, null, [ text( pool.score ) ] ),
            td( null, null, [ text( pool.used ) ] ),
            td( null, null, [ text( pool.committed ) ] ),
            td( null, null, [ text( pool.max ) ] ),
            td( null, null, [ text( pool.init ) ] ),
            td( null, null, [ text( pool.type ) ] ),
        ]);

        // append to body (unless last row append to tfoot)        
        if (idx < pools.length - 1) {
            tbody.append(trElement);
        } else {
            $("#pools > tfoot").empty().append(trElement);
        }   
    }
}

var __files__ = ${__files__};
var __status__ = ${__status__};
var __overall__ = ${__overall__};
var __pools__ = ${__pools__};

$(document).ready(function() {

    $(".statline").html("${dump.statline}".msgFormat(__status__.files, __status__.total));

    renderOverall(__overall__);
    renderPools(__pools__);
    renderData(__files__);

    // check for cookie
    var cv = $.cookies.get("webconsole.memusage");
    var lo = (cv ? cv.split(",") : [1,0]);
    var poolsTable = $("#pools").tablesorter({
        headers: {
            1: { sorter:"digit" },
            2: { sorter:"digit" },
            3: { sorter:"digit" },
            4: { sorter:"digit" },
            5: { sorter:"digit" },
        },
        // textExtraction:mixedLinksExtraction,
        sortList: cv ? [lo] : false
    }).bind("sortEnd", function() {
        poolsTable.eq(0).attr("config");
        $.cookies.set("webconsole.memusage", poolsTable.sortList.toString());
    });
        
    $("#dumpButton")
        .click(function() {
            $.post(window.location.pathname,
                { "command": "dump" },
                function(data) {
                    Xalert( data, "${dump.dump}" );
                    window.location = window.location;
                }
            );
        });
        
    $("#gcButton")
        .click(function() {
            $.post(window.location.pathname,
                { "command": "gc" },
                function(data) {
                    Xalert( data, "${dump.gc}" );
                    window.location = window.location;
                }
            );
        });
});



// ]]>
</script>

<!-- status line -->
<p class="statline">&nbsp;</p>

<!-- top header -->
<div class="ui-widget-header ui-corner-top buttonGroup">
    <button type="button" id="dumpButton">${dump.dump}</button>
    <button type="button" id="gcButton">${dump.gc}</button>
</div>


<table id="overview" class="nicetable">
    <thead>
        <tr>
            <th colspan="2">${dump.overview}</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>${dump.threshold}</td>
            <td>
                <form method="post" action="">
                    <input type="hidden" name="command" value="threshold" />
                    <input type="text" name="threshold" value="${__threshold__}" />
                    <input type="submit" name="submit" value="${dump.threshold.set}" />
                </form>
            </td>
        </tr>
        <tr>
            <td>${dump.interval}</td>
            <td>
                <form method="post" action="">
                    <input type="hidden" name="command" value="interval" />
                    <input type="text" name="interval" value="${__interval__}" />
                    <input type="submit" name="submit" value="${dump.interval.set}" />
                </form>
            </td>
        </tr>
    </tbody>
</table>

<p>&nbsp;</p>

<table id="pools" class="tablesorter nicetable noauto">
    <thead>
        <tr>
            <th class="col_pool_name">${dump.pools.name}</th>
            <th class="col_pool_score">${dump.pools.score}</th>
            <th class="col_pool_used">${dump.pools.used}</th>
            <th class="col_pool_committed">${dump.pools.committed}</th>
            <th class="col_pool_max">${dump.pools.max}</th>
            <th class="col_pool_init">${dump.pools.init}</th>
            <th class="col_pool_type">${dump.pools.type}</th>
        </tr>
    </thead>
    <tbody>
        <tr><td colspan="7">&nbsp;</td></tr>
    </tbody>
    <tfoot class="ui-widget-header">
        <tr><td colspan="4">&nbsp;</td></tr>
    </tfoot>
</table>

<p>&nbsp;</p>

<table id="plugin_table" class="nicetable">
    <thead>
        <tr>
            <th>${dump.name}</th>
            <th>${dump.date}</th>
            <th>${dump.size}</th>
            <th>${dump.action}</th>
        </tr>
    </thead>
    <tbody>
        <tr><td colspan="4">&nbsp;</td></tr>
    </tbody>
</table>