{% extends "base.html" %}

{% block content %}

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

            var refresh = function() {
                $.get("{{ url_prefix }}/rbd_iscsi_data", function(data) {
                    _.extend(content_data, data);
                    $('.inlinesparkline').sparkline();
                    setTimeout(refresh, 5000);
                });
            };

            console.log(content_data);

            rivets.formatters.relative_date = function(date_str) {
                if (!date_str) {
                    return "unknown";
                }
                return moment(date_str * 1000).fromNow();
            }

            rivets.formatters.sparkline_data = function(time_series) {
                result = "";
                for (var i = 1; i < time_series.length; ++i) {
                    var delta_v = time_series[i][1] - time_series[i - 1][1];
                    var delta_t = time_series[i][0] - time_series[i - 1][0];
                    result += (delta_v / delta_t + ",");
                }
                return result;
            };

            rivets.bind($("div#content"), content_data);
            $('.inlinesparkline').sparkline();
            setTimeout(refresh, 5000);

            $('#daemons').DataTable({
                'paging'      : true,
                'pageLength'  : 5,
                'lengthChange': false,
                'info'        : false,
                'autoWidth'   : false,
                'searching'   : false
            });

            $('#images').DataTable({
                'paging'      : true,
                'pageLength'  : 10,
                'lengthChange': false,
                'searching'   : true,
                'ordering'    : true,
                'info'        : false
            });
        });
</script>


<section class="content-header">
    <h1>
        Block iSCSI
    </h1>
</section>

<section class="content">
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Daemons</h3>
        </div>
        <div class="box-body">
            <table id="daemons" class="table table-condensed">
                <thead>
                <tr>
                    <th>Hostname</th>
                    <th># Active/Optimized</th>
                    <th># Active/Non-Optimized</th>
                    <th>Version</th>
                </tr>
                </thead>
                <tbody>
                    <tr rv-each-daemon="daemons">
                        <td>{daemon.server_hostname}</td>
                        <td>{daemon.optimized_paths}</td>
                        <td>{daemon.non_optimized_paths}</td>
                        <td>{daemon.version | short_version}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Images</h3>
        </div>
        <div class="box-body">
            <table id="images" class="table table-condensed">
                <thead>
                <tr>
                    <th>Pool</th>
                    <th>Image</th>
                    <th>Active/Optimized</th>
                    <th>Active/Non-Optimized</th>
                    <th>Read Bytes</th>
                    <th>Write Bytes</th>
                    <th>Read Ops</th>
                    <th>Write Ops</th>
                    <th>A/O Since</th>
                </tr>
                </thead>
                <tbody>
                    <tr rv-each-image="images">
                        <td>{image.pool_name}</td>
                        <td>{image.name}</td>
                        <td>{image.optimized_paths}</td>
                        <td>{image.non_optimized_paths}</td>
                        <td>{image.stats.rd_bytes | dimless_binary}/s <span class="inlinesparkline" rv-html="image.stats_history.rd_bytes | sparkline_data"></span></td>
                        <td>{image.stats.wr_bytes | dimless_binary}/s <span class="inlinesparkline" rv-html="image.stats_history.wr_bytes | sparkline_data"></span></td>
                        <td>{image.stats.rd | dimless}/s</td>
                        <td>{image.stats.wr | dimless}/s</td>
                        <td>{image.optimized_since | relative_date}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>
<!-- /.content -->

{% endblock %}
