]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | {% extends "base.html" %} |
2 | ||
3 | {% block content %} | |
4 | ||
5 | <script> | |
6 | $(document).ready(function(){ | |
7 | // Pre-populated initial data at page load | |
8 | var content_data = {{ content_data }}; | |
9 | ||
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); | |
14 | }); | |
15 | }; | |
16 | ||
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; | |
21 | ||
22 | return "width: " + Math.round(ratio * 100).toString() + "%"; | |
23 | }; | |
24 | ||
25 | rivets.bind($("div#content"), content_data.fs_status); | |
26 | setTimeout(refresh, 5000); | |
27 | ||
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 | |
31 | // timestamps) | |
32 | var convert_timeseries = function(source_series) | |
33 | { | |
34 | var data = []; | |
35 | _.each(source_series, function(dp) { | |
36 | data.push({ | |
37 | x: dp[0] * 1000, | |
38 | y: dp[1] | |
39 | }); | |
40 | }); | |
41 | ||
42 | return data; | |
43 | }; | |
44 | ||
45 | var delta_timeseries = function(source_series) | |
46 | { | |
47 | var i; | |
48 | var prev = source_series[0]; | |
49 | var result = []; | |
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; | |
55 | ||
56 | result.push({ | |
57 | x: cur[0] * 1000, | |
58 | y: rate | |
59 | }); | |
60 | ||
61 | prev = cur; | |
62 | } | |
63 | return result; | |
64 | }; | |
65 | ||
66 | var charts = {}; | |
67 | ||
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; | |
72 | ||
73 | var draw_chart = function() { | |
74 | $.get("/mds_counters/" + content_data.fs_status.filesystem.id + "/", function(data) { | |
75 | var top_chart = true; | |
76 | ||
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; | |
82 | }); | |
83 | ||
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) { | |
87 | e.remove(); | |
88 | } | |
89 | }); | |
90 | ||
91 | ||
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>") | |
97 | ); | |
98 | ||
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]); | |
102 | ||
103 | var chartInstance = new Chart(ctx, { | |
104 | type: 'line', | |
105 | data: { | |
106 | datasets: [ | |
107 | { | |
108 | label: lhs_counter, | |
109 | yAxisID: 'LHS', | |
110 | data: lhs_data, | |
111 | tension: 0.1, | |
112 | borderColor: "#dd2222", | |
113 | ||
114 | }, | |
115 | { | |
116 | label: rhs_counter, | |
117 | yAxisID: 'RHS', | |
118 | data: rhs_data, | |
119 | tension: 0.1, | |
120 | borderColor: "#2222dd", | |
121 | }, | |
122 | ] | |
123 | }, | |
31f18b77 | 124 | options: { |
224ce89b WB |
125 | legend: { |
126 | position: 'top', | |
127 | display: top_chart, | |
128 | labels:{fontColor: "#ddd"} | |
129 | }, | |
31f18b77 FG |
130 | scales: { |
131 | xAxes: [{ | |
132 | position: 'top', | |
133 | type: 'time', | |
134 | display: top_chart, | |
224ce89b | 135 | ticks: {fontColor:"#ddd"}, |
31f18b77 FG |
136 | time: { |
137 | displayFormats: { | |
138 | quarter: 'MMM YYYY' | |
139 | } | |
140 | } | |
141 | }], | |
142 | yAxes: [{ | |
143 | id: 'LHS', | |
144 | type: 'linear', | |
145 | position: 'left', | |
224ce89b | 146 | ticks: {fontColor:"#ddd"}, |
31f18b77 FG |
147 | min: 0 |
148 | }, { | |
149 | id: 'RHS', | |
150 | type: 'linear', | |
151 | position: 'right', | |
224ce89b | 152 | ticks: {fontColor:"#ddd"}, |
31f18b77 FG |
153 | min: 0 |
154 | }] | |
155 | } | |
156 | } | |
157 | }); | |
158 | charts[mds_name] = chartInstance; | |
159 | } else { | |
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; | |
166 | chart.update(0); | |
167 | }; | |
168 | ||
169 | // FIXME: update the visibility of axes etc | |
170 | // when charts come and go. | |
171 | top_chart = false; | |
172 | }); | |
173 | ||
174 | setTimeout(draw_chart, 5000); | |
175 | }); | |
176 | }; | |
177 | ||
178 | // TODO periodic refresh | |
179 | draw_chart(); | |
180 | ||
181 | }); | |
182 | </script> | |
183 | ||
184 | ||
185 | <section class="content-header"> | |
186 | <h1> | |
187 | Filesystem {filesystem.name} | |
188 | </h1> | |
189 | </section> | |
190 | ||
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> | |
195 | </p> | |
196 | ||
197 | <div class="row"> | |
198 | <div class="col-sm-6"> | |
199 | <div class="box"> | |
200 | <div class="box-header"> | |
201 | <h3 class="box-title">Ranks</h3> | |
202 | </div> | |
203 | <div class="box-body"> | |
204 | <table class="table table-condensed"> | |
205 | <thead> | |
206 | <tr> | |
207 | <th>Rank</th> | |
208 | <th>State</th> | |
209 | <th>Daemon</th> | |
210 | <th>Activity</th> | |
211 | <th>Dentries</th> | |
212 | <th>Inodes</th> | |
213 | </tr> | |
214 | </thead> | |
215 | <tbody> | |
216 | <tr rv-each-rank="filesystem.ranks"> | |
217 | <td>{rank.rank}</td> | |
218 | <td>{rank.state}</td> | |
219 | <td>{rank.mds}</td> | |
220 | <td>{rank.activity}</td> | |
221 | <td>{rank.dns | dimless}</td> | |
222 | <td>{rank.inos | dimless}</td> | |
223 | </tr> | |
224 | </tbody> | |
225 | </table> | |
226 | </div> | |
227 | </div> | |
228 | </div> | |
229 | <div class="col-sm-6"> | |
230 | <div class="box"> | |
231 | <div class="box-header"> | |
232 | <h3 class="box-title">Pools</h3> | |
233 | </div> | |
234 | <div class="box-body"> | |
235 | <table class="table table-condensed"> | |
236 | <thead> | |
237 | <tr> | |
238 | <th>Pool</th> | |
239 | <th>Type</th> | |
240 | <th>Used</th> | |
241 | <th>Avail</th> | |
242 | <th></th> | |
243 | </tr> | |
244 | </thead> | |
245 | <tbody> | |
246 | <tr rv-each-pool="filesystem.pools"> | |
247 | <td>{pool.pool}</td> | |
248 | <td>{pool.type}</td> | |
249 | <td>{pool.used | dimless}</td> | |
250 | <td>{pool.avail | dimless}</td> | |
251 | <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> | |
256 | </div> | |
257 | </td> | |
258 | </tr> | |
259 | </tbody> | |
260 | </table> | |
261 | </div> | |
262 | </div> | |
263 | </div> | |
264 | ||
265 | </div> | |
266 | <div class="box"> | |
267 | <div class="box-header"> | |
268 | <h3 class="box-title">Standby daemons</h3> | |
269 | </div> | |
270 | <div class="box-body"> | |
271 | <table> | |
272 | <thead> | |
273 | <tr> | |
274 | <th>Daemon</th> | |
275 | </tr> | |
276 | </thead> | |
277 | <tbody> | |
278 | <tr rv-each-standby="standbys"> | |
279 | <td>{standby.name}</td> | |
280 | </tr> | |
281 | </tbody> | |
282 | </table> | |
283 | </div> | |
284 | </div> | |
285 | ||
224ce89b | 286 | <div id="mds_charts" style="color: #ddd;"> |
31f18b77 FG |
287 | </div> |
288 | ||
289 | </section> | |
290 | <!-- /.content --> | |
291 | ||
292 | {% endblock %} |