1 {% extends "base.html" %}
6 $(document).ready(function(){
7 // Pre-populated initial data at page load
8 var content_data = {{ content_data }};
10 var refresh = function() {
11 $.get("{{ url_prefix }}/filesystem_data/" + content_data.fs_status.filesystem.id + "/", function(data) {
12 _.extend(content_data.fs_status, data);
13 setTimeout(refresh, 5000);
17 // Generate a "width: xx%" style string for use with a progress
18 // bar element showing a pool's used space.
19 rivets.formatters.pool_size_bar = function(pool){
20 var ratio = pool.used / pool.avail;
22 return "width: " + Math.round(ratio * 100).toString() + "%";
25 rivets.bind($("div#content"), content_data.fs_status);
26 setTimeout(refresh, 5000);
28 // Convert ceph-mgr's time series format (list of 2-tuples
29 // with seconds-since-epoch timestamps) into what chart.js
30 // can handle (list of objects with millisecs-since-epoch
32 var convert_timeseries = function(source_series)
35 _.each(source_series, function(dp) {
45 var delta_timeseries = function(source_series)
48 var prev = source_series[0];
50 for (i = 1; i < source_series.length; i++) {
51 var cur = source_series[i];
52 var tdelta = cur[0] - prev[0];
53 var vdelta = cur[1] - prev[1];
54 var rate = vdelta / tdelta;
68 var lhs_counter = 'mds.inodes';
69 var lhs_transform = convert_timeseries;
70 var rhs_counter = "mds_server.handle_client_request";
71 var rhs_transform = delta_timeseries;
73 var draw_chart = function() {
74 $.get("{{ url_prefix }}/mds_counters/" + content_data.fs_status.filesystem.id + "/", function(data) {
77 // Cull any chart elements that correspond to MDSs no
78 // longer present in the data
79 var existing_mds_names = {};
80 _.each(data, function(mds_data, mds_name) {
81 existing_mds_names[mds_name] = true;
84 $("#mds_charts canvas").each(function(i, e) {
85 var el_mds_name = e.id.replace("mds_chart_", "");
86 if (existing_mds_names[el_mds_name] != true) {
92 _.each(data, function(mds_data, mds_name) {
93 if (! $("#mds_chart_" + mds_name).length) {
94 // Construct new chart
95 $("#mds_charts").append(
96 $("<canvas height='64' id='mds_chart_" + mds_name + "'></canvas>")
99 var ctx = $("#mds_chart_" + mds_name);
100 var lhs_data = lhs_transform(mds_data[lhs_counter]);
101 var rhs_data = rhs_transform(mds_data[rhs_counter]);
103 var chartInstance = new Chart(ctx, {
112 borderColor: "#dd2222",
120 borderColor: "#2222dd",
128 labels:{fontColor: "#ddd"}
135 ticks: {fontColor:"#ddd"},
146 ticks: {fontColor:"#ddd"},
152 ticks: {fontColor:"#ddd"},
158 charts[mds_name] = chartInstance;
160 // Update existing chart
161 var chart = charts[mds_name];
162 var lhs_data = lhs_transform(mds_data[lhs_counter]);
163 var rhs_data = rhs_transform(mds_data[rhs_counter]);
164 chart.data.datasets[0].data = lhs_data;
165 chart.data.datasets[1].data = rhs_data;
169 // FIXME: update the visibility of axes etc
170 // when charts come and go.
174 setTimeout(draw_chart, 5000);
178 // TODO periodic refresh
185 <section class="content-header">
187 Filesystem {filesystem.name}
191 <section class="content">
192 <p style="font-size: 1.3em;">
193 <i class="fa fa-desktop"></i> Clients: <span style="font-weight:bold;">{filesystem.client_count}</span>
194 <a rv-href="filesystem.clients_url">Detail...</a>
198 <div class="col-sm-6">
200 <div class="box-header">
201 <h3 class="box-title">Ranks</h3>
203 <div class="box-body">
204 <table class="table table-condensed">
216 <tr rv-each-rank="filesystem.ranks">
218 <td>{rank.state}</td>
220 <td>{rank.activity}</td>
221 <td>{rank.dns | dimless}</td>
222 <td>{rank.inos | dimless}</td>
229 <div class="col-sm-6">
231 <div class="box-header">
232 <h3 class="box-title">Pools</h3>
234 <div class="box-body">
235 <table class="table table-condensed">
246 <tr rv-each-pool="filesystem.pools">
249 <td>{pool.used | dimless}</td>
250 <td>{pool.avail | dimless}</td>
252 <div class="progress"
253 style="width: 100px; height: 20px;">
254 <div class="progress-bar progress-bar-red"
255 rv-style="pool | pool_size_bar"></div>
267 <div class="box-header">
268 <h3 class="box-title">Standby daemons</h3>
270 <div class="box-body">
273 <tr rv-show="standbys | length">
278 <tr rv-each-standby="standbys">
279 <td>{standby.name}</td>
281 <tr class="ceph-none-found" rv-hide="standbys | length">
289 <div id="mds_charts" style="color: #ddd;">