2 {% extends
"base.html" %}
7 $(document).ready(function(){
8 // Pre-populated initial data at page load
9 var content_data = {{ content_data }};
11 rivets.formatters.mon_summary = function(mon_status) {
12 var result = mon_status.monmap.mons.length.toString() +
" (quorum ";
13 result += mon_status.quorum.join(
", ");
19 rivets.formatters.mds_summary = function(fs_map) {
22 var standby_replay =
0;
23 $.each(fs_map.standbys, function(i, s) {
27 if (fs_map.standbys && !fs_map.filesystems) {
28 return standbys +
", no filesystems"
29 } else if (fs_map.filesystems.length ==
0) {
30 return
"no filesystems";
32 $.each(fs_map.filesystems, function(i, fs) {
33 $.each(fs.mdsmap.info, function(j, mds) {
34 if (mds.state ==
"up:standby-replay") {
42 return active +
" active, " + (standbys + standby_replay) +
" standby";
46 rivets.formatters.mgr_summary = function(mgr_map) {
48 result +=
"active: " + mgr_map.active_name;
49 if (mgr_map.standbys.length) {
50 result +=
", " + mgr_map.standbys.length +
" standbys";
56 rivets.formatters.log_color = function(log_line) {
57 if (log_line.priority ==
"[INF]") {
59 } else if (log_line.priority ==
"[WRN]") {
60 return
"color: #FFC200";
61 } else if (log_line.priority ==
"[ERR]") {
62 return
"color: #FF2222";
68 rivets.formatters.osd_summary = function(osd_map) {
71 $.each(osd_map.osds, function(i, osd) {
80 return osd_map.osds.length +
" (" + up_count +
" up, " + in_count +
" in)";
83 rivets.formatters.pg_status_style = function(pg_status) {
84 $.each(pg_status, function(state, count) {
85 if (state ==
"active+clean"
86 || state ==
"active+clean+scrubbing"
87 || state ==
"active+clean+scrubbing+deep") {
88 return
"color: #00bb00";
90 return
"color: #FFC200";
95 rivets.formatters.pg_status = function(pg_status) {
97 $.each(pg_status, function(state, count) {
98 strings.push(count +
" " + state);
101 return strings.join(
", ");
104 // An extension to Chart.js to enable rendering some
105 // text in the middle of a doughnut
106 Chart.pluginService.register({
107 beforeDraw: function(chart) {
108 if (!chart.options.center_text) {
111 var width = chart.chart.width,
112 height = chart.chart.height,
113 ctx = chart.chart.ctx;
116 var fontSize = (height /
114).toFixed(
2);
117 ctx.font = fontSize +
"em sans-serif";
118 ctx.fillStyle =
"#ddd";
119 ctx.textBaseline =
"middle";
122 var text = chart.options.center_text,
123 textX = Math.round((width - ctx.measureText(text).width) /
2),
126 ctx.fillText(text, textX, textY);
131 var draw_usage_charts = function() {
132 var raw_usage_text = Math.round(
100*(
133 content_data.df.stats.total_used_bytes
134 / content_data.df.stats.total_bytes)) +
"%";
135 var raw_usage_canvas = $(
"#raw_usage_chart").get(
0).getContext(
"2d");
136 var raw_usage_chart = new Chart(raw_usage_canvas, {
148 content_data.df.stats.total_used_bytes,
149 content_data.df.stats.total_avail_bytes
151 backgroundColor: [
"#424d52",
"#222d32"]
156 center_text: raw_usage_text,
158 legend: {display: false},
159 animation: {duration:
0}
163 var colors = ['#
3366CC','#DC3912','#FF9900','#
109618','#
990099',
164 '#
3B3EAC','#
0099C6','#DD4477','#
66AA00','#B82E2E','#
316395',
165 '#
994499','#
22AA99','#AAAA11','#
6633CC','#E67300','#
8B0707',
166 '#
329262','#
5574A6','#
3B3EAC'];
168 var pool_usage_canvas = $(
"#pool_usage_chart").get(
0).getContext(
"2d");
169 var pool_labels = [];
172 $.each(content_data.df.pools, function(i, pool) {
173 pool_labels.push(pool['name']);
174 pool_data.push(pool['stats']['bytes_used']);
177 var pool_usage_chart = new Chart(pool_usage_canvas, {
186 backgroundColor: colors
192 legend: {display: false},
193 animation: {duration:
0}
199 rivets.bind($(
"#content"), content_data);
201 var refresh = function() {
202 $.get(
"{{ url_prefix }}/health_data", function(data) {
203 _.extend(content_data, data);
205 setTimeout(refresh,
5000);
208 setTimeout(refresh,
5000);
212 <!-- Main content -->
213 <section class=
"content">
215 <div class=
"col-sm-6">
217 <div class=
"box-header">
220 <div class=
"box-body">
221 Overall status:
<span
222 rv-style=
"health.status | health_color">{health.status}
</span>
225 <li rv-each-check=
"health.checks">
226 <span rv-style=
"check.severity | health_color">{check.type}
</span>:
227 {check.summary.message}
233 <div class=
"col-sm-3">
234 <div class=
"info-box">
235 <span class=
"info-box-icon bg-grey"><i
236 class=
"fa fa-database"></i></span>
238 <div class=
"info-box-content">
239 <span class=
"info-box-text">Monitors
</span>
240 <span class=
"info-box-number">{mon_status | mon_summary}
</span>
243 <div class=
"info-box">
244 <span class=
"info-box-icon bg-grey"><i
245 class=
"fa fa-hdd-o"></i></span>
247 <div class=
"info-box-content">
248 <span class=
"info-box-text">OSDs
</span>
249 <span class=
"info-box-number">{osd_map | osd_summary}
</span>
254 <div class=
"col-sm-3">
255 <div class=
"info-box">
256 <span class=
"info-box-icon bg-grey"><i
257 class=
"fa fa-folder"></i></span>
259 <div class=
"info-box-content">
260 <span class=
"info-box-text">Metadata servers
</span>
261 <span class=
"info-box-number">{fs_map | mds_summary}
</span>
264 <div class=
"info-box">
265 <span class=
"info-box-icon bg-grey"><i
266 class=
"fa fa-cog"></i></span>
268 <div class=
"info-box-content">
269 <span class=
"info-box-text">Manager daemons
</span>
270 <span class=
"info-box-number">{mgr_map | mgr_summary}
</span>
278 <div class=
"col-sm-6">
280 <div class=
"box-header">
283 <div class=
"box-body" style=
"text-align:center;">
284 <table class=
"ceph-chartbox">
287 <span style=
"font-size: 45px;">{df.stats.total_objects | dimless}
</span>
290 <div style=
"height:120px; width: 120px;">
291 <canvas id=
"raw_usage_chart"></canvas>
295 <div style=
"height:120px; width: 120px;">
296 <canvas id=
"pool_usage_chart"></canvas>
302 <td>Raw capacity
<br>({df.stats.total_used_bytes | dimless_binary} used)
</td>
303 <td>Usage by pool
</td>
311 <div class=
"col-sm-6">
313 <div class=
"box-header">
316 <div class=
"box-body">
317 <table class=
"table table-condensed">
325 <tr rv-each-pool=
"pools">
326 <td style=
"text-align: right;">
329 <td rv-style=
"pool.pg_status | pg_status_style">
330 {pool.pg_status | pg_status}
333 {pool.stats.bytes_used.latest | dimless} /
334 {pool.stats.max_avail.latest | dimless }
337 {pool.stats.rd_bytes.rate | dimless } rd, {
338 pool.stats.wr_bytes.rate | dimless } wr
349 <div class=
"box-body">
350 <ul class=
"nav nav-tabs">
351 <li class=
"active"><a data-toggle=
"tab" href=
"#clog">Cluster log
</a></li>
352 <li><a data-toggle=
"tab" href=
"#audit_log">Audit log
</a></li>
354 <div class=
"tab-content ceph-log">
355 <div id=
"clog" class=
"tab-pane fade in active">
357 <span rv-each-line=
"clog">
358 { line.stamp }
{line.priority}
359 <span rv-style=
"line | log_color">
366 <div id=
"audit_log" class=
"tab-pane fade in">
368 <span rv-each-line=
"audit_log">
369 { line.stamp }
{line.priority}
370 <span rv-style=
"line | log_color">
371 <span style=
"font-weight: bold;">