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(
"/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(
"/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",
156 charts[mds_name] = chartInstance;
158 // Update existing chart
159 var chart = charts[mds_name];
160 var lhs_data = lhs_transform(mds_data[lhs_counter]);
161 var rhs_data = rhs_transform(mds_data[rhs_counter]);
162 chart.data.datasets[
0].data = lhs_data;
163 chart.data.datasets[
1].data = rhs_data;
167 // FIXME: update the visibility of axes etc
168 // when charts come and go.
172 setTimeout(draw_chart,
5000);
176 // TODO periodic refresh
183 <section class=
"content-header">
185 Filesystem {filesystem.name}
189 <section class=
"content">
190 <p style=
"font-size: 1.3em;">
191 <i class=
"fa fa-desktop"></i> Clients:
<span style=
"font-weight:bold;">{filesystem.client_count}
</span>
192 <a rv-href=
"filesystem.clients_url">Detail...
</a>
196 <div class=
"col-sm-6">
198 <div class=
"box-header">
199 <h3 class=
"box-title">Ranks
</h3>
201 <div class=
"box-body">
202 <table class=
"table table-condensed">
214 <tr rv-each-rank=
"filesystem.ranks">
216 <td>{rank.state}
</td>
218 <td>{rank.activity}
</td>
219 <td>{rank.dns | dimless}
</td>
220 <td>{rank.inos | dimless}
</td>
227 <div class=
"col-sm-6">
229 <div class=
"box-header">
230 <h3 class=
"box-title">Pools
</h3>
232 <div class=
"box-body">
233 <table class=
"table table-condensed">
244 <tr rv-each-pool=
"filesystem.pools">
247 <td>{pool.used | dimless}
</td>
248 <td>{pool.avail | dimless}
</td>
250 <div class=
"progress"
251 style=
"width: 100px; height: 20px;">
252 <div class=
"progress-bar progress-bar-red"
253 rv-style=
"pool | pool_size_bar"></div>
265 <div class=
"box-header">
266 <h3 class=
"box-title">Standby daemons
</h3>
268 <div class=
"box-body">
276 <tr rv-each-standby=
"standbys">
277 <td>{standby.name}
</td>
284 <div id=
"mds_charts">