--- /dev/null
+{% 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_pool_data/" + content_data.pool_name + "/", function(data) {
+ content_data.images = data;
+ setTimeout(refresh, 10000);
+ });
+ };
+
+ console.log(content_data);
+
+ rivets.bind($("div#content"), content_data);
+ setTimeout(refresh, 10000);
+
+ $('#images').DataTable({
+ 'paging' : true,
+ 'pageLength' : 15,
+ 'lengthChange': false,
+ 'searching' : true,
+ 'ordering' : true,
+ 'info' : false,
+ 'autoWidth' : false
+ });
+ });
+</script>
+
+
+<section class="content-header">
+ <h1>
+ Block Pool { pool_name }
+ </h1>
+</section>
+
+<section class="content">
+ <div class="box">
+ <div class="box-header">
+ <h3 class="box-title">Images</h3>
+ </div>
+ <div class="box-body">
+ <table id="images" class="table table-bordered">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Size</th>
+ <th>Objects</th>
+ <th>Object size</th>
+ <th>Features</th>
+ <th>Parent</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr rv-each-image="images">
+ <td>{image.name}</td>
+ <td>{image.size | dimless_binary}</td>
+ <td>{image.num_objs | dimless}</td>
+ <td>{image.obj_size | dimless_binary}</td>
+ <td>{image.features_name}</td>
+ <td>{image.parent}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+
+</section>
+<!-- /.content -->
+
+{% endblock %}