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;">