{% extends "base.html" %}

{% block content %}

<script>
        $(document).ready(function(){
            // Pre-populated initial data at page load
            var content_data = {{ content_data }};

            var hexdigits = function(v) {
                var i = Math.floor(v * 255);
                if (Math.floor(i) < 0x10) {
                    return "0" + Math.floor(i).toString(16);
                } else {
                    return Math.floor(i).toString(16);
                }
            };

            var hexcolor = function(r, g, b) {
                return "#" + hexdigits(r) + hexdigits(g) + hexdigits(b);
            };

            var last = {};

            var render = function(element, counter) {
                var data = content_data.osd_histogram.osd[counter];
                var hist_table = $(element);
                hist_table.empty();

                var sum = 0.0;
                var max = 0.0;
                $.each(data.values, function(i, row) {
                    $.each(row, function(j, col) {
                        var val;
                        if (!last[counter]) {
                            val = col;
                        } else {
                            val = col - last[counter][i][j];
                        }
                        sum += val;
                        max = Math.max(max, val);
                    });
                });


                $.each(data.values, function(i, row) {
                    var tr = $("<tr style='height: 10px;'></tr>").appendTo(hist_table);
                    $.each(row, function(j, col) {
                        var td = $("<td style='width: 10px; height: 10px;'></td>").appendTo(tr);
                        var val;
                        if (!last[counter]) {
                            val = col;
                        } else {
                            val = col - last[counter][i][j];
                        }


                        var g;
                        if (max) {
                            g = (val / max);
                        } else {
                            g = 0.0;
                        }
                        var r = 1.0 - g;
                        var b = 0.0;

                        td.css("background-color", hexcolor(r, g, b));
                    });
                });

                last[counter] = data.values;
            };

            var post_load = function() {
                content_data.osd_metadata_list = [];
                content_data.osd_list = [];
                _.each(content_data.osd_metadata, function(v, k) {
                    content_data.osd_metadata_list.push({
                        key: k,
                        value: v
                    });
                });
                _.each(content_data.osd, function(v, k) {
                    content_data.osd_list.push({
                        key: k,
                        value: v
                    });
                });
                render("#heatmap_write",
                        "op_w_latency_in_bytes_histogram");
                render("#heatmap_read",
                        "op_r_latency_out_bytes_histogram");
            };

            rivets.bind($("div#content"), content_data);
            post_load();

            var refresh = function() {
                $.get("{{ url_prefix }}/osd/perf_data/" + content_data.osd.osd  + "/", function(data) {
                    _.extend(content_data.osd_histogram, data.osd_histogram);
                    _.extend(content_data.osd, data.osd);
                    _.extend(content_data.osd_metadata, data.osd_metadata);

                    post_load();
                    setTimeout(refresh, 3000);
                });
            };

            // Wait 1s to load irrespective of normal frequency,
            // to promptly load our first delta
            setTimeout(refresh, 1000);
        });
</script>


<section class="content-header">
    <h1>
        osd.{osd.osd}
    </h1>
</section>

<section class="content">

    <table>
        <tr>
            <td>
                <h3>Writes</h3>
                <table id="heatmap_write">
                </table>
            </td><td>&nbsp;</td><td>
                <h3>Reads</h3>
                <table id="heatmap_read">
                </table>
            </td>
        </tr>
    </table>

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Attributes (OSD map)</h3>
    </div>
    <div class="box-body">
        <table>
            <thead>
            <tr>
                <th>Key</th>
                <th>Value</th>
            </tr>
            </thead>
            <tbody>
            <tr rv-each-item="osd_list">
                <td>{item.key}</td>
                <td>{item.value}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Metadata</h3>
    </div>
    <div class="box-body">
        <table>
            <thead>
            <tr>
                <th>Key</th>
                <th>Value</th>
            </tr>
            </thead>
            <tbody>
            <tr rv-each-meta_item="osd_metadata_list">
                <td>{meta_item.key}</td>
                <td>{meta_item.value}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>


</section>
<!-- /.content -->

{% endblock %}