{% 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("/servers_data", function(data) {
                    _.extend(content_data, data);
                    setTimeout(refresh, 5000);
                });
            };
            setTimeout(refresh, 5000);

            rivets.formatters.service_list = function(services) {
                var strings = [];
                $.each(services, function(i, svc) {
                    strings.push(svc.type + "." + svc.id);
                });
                return strings.join(", ");
            };

            rivets.formatters.short_version = function(version) {
                // Expect "ceph version 1.2.3-g9asdasd (as98d7a0s8d7)"
                var result = /ceph version\s+([^ ]+)\s+\(.+\)/.exec(version);
                if (result) {
                    // Return the "1.2.3-g9asdasd" part
                    return result[1];
                } else {
                    // Unexpected format, pass it through
                    return version;
                }
                return 
            };

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

</script>


<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        Servers
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="box">
        <div class="box-body">
            <table class="table table-bordered">
                <th>
                    Hostname
                </th>
                <th>
                    Services
                </th>
                <th>
                    Version
                </th>
                </thead>
                <tr rv-each-server="servers">
                    <td>
                        {server.hostname}
                    </td>
                    <td>
                        {server.services | service_list}
                    </td>
                    <td>
                        {server.ceph_version | short_version}
                    </td>

                </tr>
            </table>
        </div>
    </div>
</section>

{% endblock %}