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 var unhealthy = false;
85 var scrubbing = false;
86 $.each(pg_status, function(state, count) {
87 if (state ==
"active+clean") {
89 } else if (state ==
"active+clean+scrubbing"
90 || state ==
"active+clean+scrubbing+deep") {
98 return
"color: #FFC200";
99 } else if (scrubbing) {
100 return
"color: #0000bb";
102 return
"color: #00bb00";
106 rivets.formatters.pg_status = function(pg_status) {
108 $.each(pg_status, function(state, count) {
109 strings.push(count +
" " + state);
112 return strings.join(
", ");
115 // An extension to Chart.js to enable rendering some
116 // text in the middle of a doughnut
117 Chart.pluginService.register({
118 beforeDraw: function(chart) {
119 if (!chart.options.center_text) {
122 var width = chart.chart.width,
123 height = chart.chart.height,
124 ctx = chart.chart.ctx;
127 var fontSize = (height /
114).toFixed(
2);
128 ctx.font = fontSize +
"em sans-serif";
129 ctx.fillStyle =
"#ddd";
130 ctx.textBaseline =
"middle";
133 var text = chart.options.center_text,
134 textX = Math.round((width - ctx.measureText(text).width) /
2),
137 ctx.fillText(text, textX, textY);
142 var draw_usage_charts = function() {
143 var raw_usage_text = Math.round(
100*(
144 content_data.df.stats.total_used_bytes
145 / content_data.df.stats.total_bytes)) +
"%";
146 var raw_usage_canvas = $(
"#raw_usage_chart").get(
0).getContext(
"2d");
147 var raw_usage_chart = new Chart(raw_usage_canvas, {
159 content_data.df.stats.total_used_bytes,
160 content_data.df.stats.total_avail_bytes
162 backgroundColor: [
"#424d52",
"#222d32"]
167 center_text: raw_usage_text,
169 legend: {display: false},
170 animation: {duration:
0}
174 var colors = ['#
3366CC','#DC3912','#FF9900','#
109618','#
990099',
175 '#
3B3EAC','#
0099C6','#DD4477','#
66AA00','#B82E2E','#
316395',
176 '#
994499','#
22AA99','#AAAA11','#
6633CC','#E67300','#
8B0707',
177 '#
329262','#
5574A6','#
3B3EAC'];
179 var pool_usage_canvas = $(
"#pool_usage_chart").get(
0).getContext(
"2d");
180 var pool_labels = [];
183 $.each(content_data.df.pools, function(i, pool) {
184 pool_labels.push(pool['name']);
185 pool_data.push(pool['stats']['bytes_used']);
188 var pool_usage_chart = new Chart(pool_usage_canvas, {
197 backgroundColor: colors
203 legend: {display: false},
204 animation: {duration:
0}
210 rivets.bind($(
"#content"), content_data);
212 var refresh = function() {
213 $.get(
"/health_data", function(data) {
214 _.extend(content_data, data);
216 setTimeout(refresh,
5000);
219 setTimeout(refresh,
5000);
223 <!-- Main content -->
224 <section class=
"content">
226 <div class=
"col-sm-6">
228 <div class=
"box-header">
231 <div class=
"box-body">
232 Overall status:
<span
233 rv-style=
"health.status | health_color">{health.status}
</span>
236 <li rv-each-check=
"health.checks">
237 <span rv-style=
"check.severity | health_color">{check.type}
</span>:
244 <div class=
"col-sm-3">
245 <div class=
"info-box">
246 <span class=
"info-box-icon bg-grey"><i
247 class=
"fa fa-database"></i></span>
249 <div class=
"info-box-content">
250 <span class=
"info-box-text">Monitors
</span>
251 <span class=
"info-box-number">{mon_status | mon_summary}
</span>
254 <div class=
"info-box">
255 <span class=
"info-box-icon bg-grey"><i
256 class=
"fa fa-hdd-o"></i></span>
258 <div class=
"info-box-content">
259 <span class=
"info-box-text">OSDs
</span>
260 <span class=
"info-box-number">{osd_map | osd_summary}
</span>
265 <div class=
"col-sm-3">
266 <div class=
"info-box">
267 <span class=
"info-box-icon bg-grey"><i
268 class=
"fa fa-folder"></i></span>
270 <div class=
"info-box-content">
271 <span class=
"info-box-text">Metadata servers
</span>
272 <span class=
"info-box-number">{fs_map | mds_summary}
</span>
275 <div class=
"info-box">
276 <span class=
"info-box-icon bg-grey"><i
277 class=
"fa fa-cog"></i></span>
279 <div class=
"info-box-content">
280 <span class=
"info-box-text">Manager daemons
</span>
281 <span class=
"info-box-number">{mgr_map | mgr_summary}
</span>
289 <div class=
"col-sm-6">
291 <div class=
"box-header">
294 <div class=
"box-body" style=
"text-align:center;">
295 <table class=
"ceph-chartbox">
298 <span style=
"font-size: 45px;">{df.stats.total_objects | dimless}
</span>
301 <canvas id=
"raw_usage_chart"
302 style=
"height:120px; width:120px;"></canvas>
305 <canvas id=
"pool_usage_chart"
306 style=
"height:120px; width: 120px;"></canvas>
311 <td>Raw capacity
<br>({df.stats.total_used_bytes | dimless_binary} used)
</td>
312 <td>Usage by pool
</td>
320 <div class=
"col-sm-6">
322 <div class=
"box-header">
325 <div class=
"box-body">
326 <table class=
"table table-condensed">
334 <tr rv-each-pool=
"pools">
335 <td style=
"text-align: right;">
338 <td rv-style=
"pool.pg_status | pg_status_style">
339 {pool.pg_status | pg_status}
342 {pool.stats.bytes_used.latest | dimless} /
343 {pool.stats.max_avail.latest | dimless }
346 {pool.stats.rd_bytes.rate | dimless } rd, {
347 pool.stats.wr_bytes.rate | dimless } wr
358 <div class=
"box-body">
359 <ul class=
"nav nav-tabs">
360 <li class=
"active"><a data-toggle=
"tab" href=
"#clog">Cluster log
</a></li>
361 <li><a data-toggle=
"tab" href=
"#audit_log">Audit log
</a></li>
363 <div class=
"tab-content ceph-log">
364 <div id=
"clog" class=
"tab-pane fade in active">
366 <span rv-each-line=
"clog">
367 { line.stamp }
{line.priority}
368 <span rv-style=
"line | log_color">
375 <div id=
"audit_log" class=
"tab-pane fade in">
377 <span rv-each-line=
"audit_log">
378 { line.stamp }
{line.priority}
379 <span rv-style=
"line | log_color">
380 <span style=
"font-weight: bold;">