libghc-ekg-data 0.3.1.0-1 / usr / share / ekg-0.3.1.0 / assets / monitor.js

$(document).ready(function () {
    "use strict";

    // Number formatters
    function commaify(n)
    {
        var nStr = n.toString();
        var x = nStr.split('.');
        var x1 = x[0];
        var x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
    }

    function formatSuffix(val, opt_prec) {
        if (val === null) {
            return "N/A";
        }

        var prec = opt_prec || 1;
        if (val >= 1000000000) {
            return (val / 1000000000).toFixed(prec) + " GB";
        } else if (val >= 1000000) {
            return (val / 1000000).toFixed(prec) + " MB";
        } else if (val >= 1000) {
            return (val / 1000).toFixed(prec) + " kB";
        } else {
            return val.toFixed(prec) + " B";
        }
    }

    function formatRate(val, prec) {
        if (val === null) {
            return "N/A";
        }

        return formatSuffix(val, prec) + "/s";
    }

    function formatPercent(val, opt_prec) {
        if (val === null) {
            return "N/A";
        }

        var prec = opt_prec || 1;
        return val.toFixed(prec) + " %";
    }

    // Set up polling interval control
    var updateInterval = 1000;  // ms
    $("#updateInterval").val(updateInterval).change(function () {
        updateInterval = $(this).val();
    });

    // Allow the UI to be paused
    var paused = false;
    $('#pause-ui').click(function () {
        if (paused) {
            $(this).text("Pause UI");
            paused = false;
        } else {
            $(this).text("Unpause UI");
            paused = true;
        }
    });

    // Plot formatters
    function suffixFormatter(val, axis) {
        return formatSuffix(val, axis.tickDecimals);
    }

    function suffixFormatterGeneric(val, axis) {
        if (val >= 1000000000) {
            return (val / 1000000000).toFixed(axis.tickDecimals) + " G";
        } else if (val >= 1000000) {
            return (val / 1000000).toFixed(axis.tickDecimals) + " M";
        } else if (val >= 1000) {
            return (val / 1000).toFixed(axis.tickDecimals) + " k";
        } else {
            return val.toFixed(axis.tickDecimals);
        }
    }

    function rateFormatter(val, axis) {
        return formatRate(val, axis.tickDecimals);
    }

    function percentFormatter(val, axis) {
        return formatPercent(val, axis.tickDecimals);
    }

    // Fetch data periodically and notify interested parties.
    var listeners = [];

    function subscribe(fn) {
        listeners.push(fn);
    }

    function unsubscribe(fn) {
        listeners = listeners.filter(function (el) {
            if (el !== fn) {
                return el;
            }
        });
    }

    var alertVisible = false;
    function fetchData() {
        function onDataReceived(stats) {
            if (alertVisible) {
                $(".alert-message").hide();
            }
            alertVisible = false;
            for (var i = 0; i < listeners.length; i++) {
                listeners[i](stats, stats.server_timestamp_millis);
            }
        }

        function onError() {
            $(".alert-message").show();
            alertVisible = true;
        }

        $.ajax({
            dataType: 'json',
            success: onDataReceived,
            error: onError,
            cache: false
        });

        setTimeout(fetchData, updateInterval);
    }
    fetchData();

    function addPlot(elem, series, opts) {
        var defaultOptions = {
            series: { shadowSize: 0 },  // drawing is faster without shadows
            xaxis: { mode: "time", tickSize: [10, "second"] }
        };
        var options = $.extend(true, {}, defaultOptions, opts);
        var data = new Array(series.length);
        var maxPoints = 60;
        for(var i = 0; i < series.length; i++) {
            data[i] = [];
        }

        var plot = $.plot(elem, [], options);

        var prev_stats, prev_time;
        function onDataReceived(stats, time) {
            for(var i = 0; i < series.length; i++) {
                if (data[i].length >= maxPoints) {
                    data[i] = data[i].slice(1);
                }

                data[i].push([time, series[i].fn(stats, time,
                                                 prev_stats, prev_time)]);
            }

            // zip lengends with data
            var res = [];
            for(var i = 0; i < series.length; i++)
                res.push({ label: series[i].label, data: data[i] });

            if (!paused) {
                plot.setData(res);
                plot.setupGrid();
                plot.draw();
            }
            prev_stats = stats;
            prev_time = time;
        }

        subscribe(onDataReceived);
        return onDataReceived;
    }

    function addCounter(elem, fn, formatter) {
        var prev_stats, prev_time;
        function onDataReceived(stats, time) {
            if (!paused)
                elem.text(formatter(fn(stats, time, prev_stats, prev_time)));
            prev_stats = stats;
            prev_time = time;
        }

        subscribe(onDataReceived);
    }

    function addDynamicPlot(key, button, graph_fn, label_fn) {
        function getStats(stats, time, prev_stats, prev_time) {
            return graph_fn(key, stats, time, prev_stats, prev_time);
        }

        $("#plots:last").append(
            '<div id="' + key + '-plot" class="plot-container">' +
                '<img src="cross.png" class="close-button"><h3>' + key +
                '</h3><div class="plot"></div></div>');
        var plot = $("#plots > .plot-container:last > div");
        var observer = addPlot(plot,
                [{ label: label_fn(key), fn: getStats }],
                { yaxis: { tickFormatter: suffixFormatterGeneric } });

        var plotContainer = $("#" + key + "-plot");
        var closeButton = plotContainer.find("img");
        closeButton.hide();
        closeButton.click(function () {
            plotContainer.remove();
            button.show();
            unsubscribe(observer);
        });

        plotContainer.hover(
            function () {
                closeButton.show();
            },
            function () {
                closeButton.hide();
            }
        );
    }

    function addDynamicCounters(table, group_fn, graph_fn, label_fn) {
        var counters = {};
        function onDataReceived(stats, time) {
            $.each(group_fn(stats), function (key, value) {
                var elem;
                if (key in counters) {
                    elem = counters[key];
                } else {
                    // Add UI element
                    table.find("tbody:last").append(
                        '<tr><td>' + key +
                            ' <img src="chart_line_add.png" class="graph-button"' +
                            ' width="16" height="16"' +
                            ' alt="Add graph" title="Add graph"></td>' +
                            '<td class="value">N/A</td></tr>');
                    elem = table.find("tbody > tr > td:last");
                    counters[key] = elem;

                    var button = table.find("tbody > tr:last > td:first > img");
                    button.click(function () {
                        addDynamicPlot(key, button, graph_fn, label_fn);
                        $(this).hide();
                    });
                }
                if (!paused)
                    elem.text(commaify(value));
            });
        }

        subscribe(onDataReceived);
    }

    function addDynamicLabels(table, group_fn) {
        var labels = {};
        function onDataReceived(stats, time) {
            $.each(group_fn(stats), function (key, value) {
                var elem;
                if (key in labels) {
                    elem = labels[key];
                } else {
                    // Add UI element
                    table.find("tbody:last").append(
                        '<tr><td>' + key + '</td>' +
                            '<td class="string">N/A</td></tr>');
                    elem = table.find("tbody > tr > td:last");
                    labels[key] = elem;
                }
                if (!paused)
                    elem.text(value);
            });
        }

        subscribe(onDataReceived);
    }

    function initAll() {
        // Metrics
        var current_bytes_used = function (stats) {
            return stats.gauges.current_bytes_used;
        };
        var max_bytes_used = function (stats) {
            return stats.gauges.max_bytes_used;
        };
        var max_bytes_slop = function (stats) {
            return stats.gauges.max_bytes_slop;
        };
        var current_bytes_slop = function (stats) {
            return stats.gauges.current_bytes_slop;
        };
        var productivity_wall_percent = function (stats, time, prev_stats, prev_time) {
            if (prev_stats == undefined)
                return null;
            var mutator_seconds = stats.counters.mutator_wall_seconds -
                prev_stats.counters.mutator_wall_seconds;
            var gc_seconds = stats.counters.gc_wall_seconds -
                prev_stats.counters.gc_wall_seconds;
            return 100 * mutator_seconds / (mutator_seconds + gc_seconds);
        };
        var productivity_cpu_percent = function (stats, time, prev_stats, prev_time) {
            if (prev_stats == undefined)
                return null;
            var mutator_seconds = stats.counters.mutator_cpu_seconds -
                prev_stats.counters.mutator_cpu_seconds;
            var gc_seconds = stats.counters.gc_cpu_seconds -
                prev_stats.counters.gc_cpu_seconds;
            return 100 * mutator_seconds / (mutator_seconds + gc_seconds);
        };
        var allocation_rate = function (stats, time, prev_stats, prev_time) {
            if (prev_stats == undefined)
                return null;
            return 1000 * (stats.counters.bytes_allocated -
                           prev_stats.counters.bytes_allocated) /
                (time - prev_time);
        };

        // Plots
        addPlot($("#current-bytes-used-plot > div"),
                [{ label: "residency", fn: current_bytes_used }],
                { yaxis: { tickFormatter: suffixFormatter } });
        addPlot($("#allocation-rate-plot > div"),
                [{ label: "rate", fn: allocation_rate }],
                { yaxis: { tickFormatter: rateFormatter } });
        addPlot($("#productivity-plot > div"),
                [{ label: "wall clock time", fn: productivity_wall_percent },
                 { label: "cpu time", fn: productivity_cpu_percent }],
                { yaxis: { tickDecimals: 1, tickFormatter: percentFormatter } });

        // Counters
        addCounter($("#max-bytes-used"), max_bytes_used, formatSuffix);
        addCounter($("#current-bytes-used"), current_bytes_used, formatSuffix);
        addCounter($("#max-bytes-slop"), max_bytes_slop, formatSuffix);
        addCounter($("#current-bytes-slop"), current_bytes_slop, formatSuffix);
        addCounter($("#productivity-wall"), productivity_wall_percent, formatPercent);
        addCounter($("#productivity-cpu"), productivity_cpu_percent, formatPercent);
        addCounter($("#allocation-rate"), allocation_rate, formatRate);

        addDynamicCounters($("#counter-table"), function (stats) {
            return stats.counters;
        }, function (key, stats, time, prev_stats, prev_time) {
            if (prev_stats == undefined)
                return null;
            return 1000 * (stats.counters[key] - prev_stats.counters[key]) /
                (time - prev_time);
        }, function (label) {
            return label + "/s";
        });

        addDynamicCounters($("#gauge-table"), function (stats) {
            return stats.gauges;
        }, function (key, stats, time) {
            return stats.gauges[key];
        }, function (label) {
            return label;
        });

        addDynamicLabels($("#label-table"), function (stats) {
            return stats.labels;
        });
    }

    initAll();
});