From: John Spray Date: Thu, 22 Jun 2017 00:34:27 +0000 (-0400) Subject: mgr/dashboard: update health display X-Git-Tag: v12.1.1~25^2 X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F16043%2Fhead;p=ceph.git mgr/dashboard: update health display This takes account of the new health format, also expands and visually cleans up the frontpage where we put the health information. Dark backgrounds make it much easier to use red/amber/green colours to grab attention. Signed-off-by: John Spray --- diff --git a/src/pybind/mgr/dashboard/base.html b/src/pybind/mgr/dashboard/base.html index 18874fb565f..efe09260e30 100644 --- a/src/pybind/mgr/dashboard/base.html +++ b/src/pybind/mgr/dashboard/base.html @@ -111,8 +111,11 @@ return format_number(n, 1024, ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']); }; - - + /* This is useful if you need to display some alternative text + * when a collection is empty using rv-hide */ + rivets.formatters.length = function(val) { + return val.length; + } rivets.bind($("#health"), toplevel_data); rivets.bind($("section.sidebar"), toplevel_data); @@ -122,22 +125,102 @@ + + + - +

- +

+ @@ -165,17 +248,19 @@

@@ -200,6 +286,7 @@

{filesystem.name}

None found

diff --git a/src/pybind/mgr/dashboard/clients.html b/src/pybind/mgr/dashboard/clients.html index 8d775cc5a10..bd5a557210b 100644 --- a/src/pybind/mgr/dashboard/clients.html +++ b/src/pybind/mgr/dashboard/clients.html @@ -24,15 +24,12 @@

- Clients + Clients of {fs_name}

Clients

diff --git a/src/pybind/mgr/dashboard/filesystem.html b/src/pybind/mgr/dashboard/filesystem.html index a8bd193c9ac..c58f1e18fd5 100644 --- a/src/pybind/mgr/dashboard/filesystem.html +++ b/src/pybind/mgr/dashboard/filesystem.html @@ -121,18 +121,18 @@ }, ] }, - options:{ - legend: { - position: 'right', - display: top_chart - } - }, options: { + legend: { + position: 'top', + display: top_chart, + labels:{fontColor: "#ddd"} + }, scales: { xAxes: [{ position: 'top', type: 'time', display: top_chart, + ticks: {fontColor:"#ddd"}, time: { displayFormats: { quarter: 'MMM YYYY' @@ -143,11 +143,13 @@ id: 'LHS', type: 'linear', position: 'left', + ticks: {fontColor:"#ddd"}, min: 0 }, { id: 'RHS', type: 'linear', position: 'right', + ticks: {fontColor:"#ddd"}, min: 0 }] } @@ -281,7 +283,7 @@ -

diff --git a/src/pybind/mgr/dashboard/health.html b/src/pybind/mgr/dashboard/health.html index de5a794f27d..70cc7f8efe7 100644 --- a/src/pybind/mgr/dashboard/health.html +++ b/src/pybind/mgr/dashboard/health.html @@ -8,14 +8,6 @@ // Pre-populated initial data at page load var content_data = {{ content_data }}; - var refresh = function() { - $.get("/health_data", function(data) { - _.extend(content_data, data); - setTimeout(refresh, 5000); - }); - }; - setTimeout(refresh, 5000); - rivets.formatters.mon_summary = function(mon_status) { var result = mon_status.monmap.mons.length.toString() + " (quorum "; result += mon_status.quorum.join(", "); @@ -24,9 +16,46 @@ return result; }; + rivets.formatters.mds_summary = function(fs_map) { + var standbys = 0; + var active = 0; + var standby_replay = 0; + $.each(fs_map.standbys, function(i, s) { + standbys += 1; + }); + + if (fs_map.standbys && !fs_map.filesystems) { + return standbys + ", no filesystems" + } else if (fs_map.filesystems.length == 0) { + return "no filesystems"; + } else { + $.each(fs_map.filesystems, function(i, fs) { + $.each(fs.mdsmap.info, function(j, mds) { + if (mds.state == "up:standby-replay") { + standby_replay += 1; + } else { + active += 1; + } + }); + }); + + return active + " active, " + (standbys + standby_replay) + " standby"; + } + }; + + rivets.formatters.mgr_summary = function(mgr_map) { + var result = ""; + result += "active: " + mgr_map.active_name; + if (mgr_map.standbys.length) { + result += ", " + mgr_map.standbys.length + " standbys"; + } + + return result; + }; + rivets.formatters.log_color = function(log_line) { if (log_line.priority == "[INF]") { - return "color: #000000"; + return ""; // Inherit } else if (log_line.priority == "[WRN]") { return "color: #FFC200"; } else if (log_line.priority == "[ERR]") { @@ -83,116 +112,262 @@ return strings.join(", "); }; - rivets.bind($("#content"), content_data); - }); - + // An extension to Chart.js to enable rendering some + // text in the middle of a doughnut + Chart.pluginService.register({ + beforeDraw: function(chart) { + if (!chart.options.center_text) { + return; + } + var width = chart.chart.width, + height = chart.chart.height, + ctx = chart.chart.ctx; + + ctx.restore(); + var fontSize = (height / 114).toFixed(2); + ctx.font = fontSize + "em sans-serif"; + ctx.fillStyle = "#ddd"; + ctx.textBaseline = "middle"; + + + var text = chart.options.center_text, + textX = Math.round((width - ctx.measureText(text).width) / 2), + textY = height / 2; + + ctx.fillText(text, textX, textY); + ctx.save(); + } + }); + + var draw_usage_charts = function() { + var raw_usage_text = Math.round(100*( + content_data.df.stats.total_used_bytes + / content_data.df.stats.total_bytes)) + "%"; + var raw_usage_canvas = $("#raw_usage_chart").get(0).getContext("2d"); + var raw_usage_chart = new Chart(raw_usage_canvas, { + type: 'doughnut', + data: { + labels:[ + "Raw Used", + "Raw Available" + ], + datasets: [ + { + 'label': null, + borderWidth: 0, + data:[ + content_data.df.stats.total_used_bytes, + content_data.df.stats.total_avail_bytes + ], + backgroundColor: ["#424d52", "#222d32"] + } + ] + }, + options: { + center_text: raw_usage_text, + responsive: false, + legend: {display: false}, + animation: {duration: 0} + } + }); + var colors = ['#3366CC','#DC3912','#FF9900','#109618','#990099', + '#3B3EAC','#0099C6','#DD4477','#66AA00','#B82E2E','#316395', + '#994499','#22AA99','#AAAA11','#6633CC','#E67300','#8B0707', + '#329262','#5574A6','#3B3EAC']; - -

- Health -

+ var pool_usage_canvas = $("#pool_usage_chart").get(0).getContext("2d"); + var pool_labels = []; + var pool_data = []; -

+ $.each(content_data.df.pools, function(i, pool) { + pool_labels.push(pool['name']); + pool_data.push(pool['stats']['bytes_used']); + }); - -

+ var pool_usage_chart = new Chart(pool_usage_canvas, { + type: 'doughnut', + data: { + labels:pool_labels, + datasets: [ + { + 'label': null, + borderWidth: 0, + data:pool_data, + backgroundColor: colors + } + ] + }, + options: { + responsive: false, + legend: {display: false}, + animation: {duration: 0} + } + }); + } -

- Overall status: {health.status} + draw_usage_charts(); + rivets.bind($("#content"), content_data); -

- {check.type}: - {check.message} -

+ var refresh = function() { + $.get("/health_data", function(data) { + _.extend(content_data, data); + draw_usage_charts(); + setTimeout(refresh, 5000); + }); + }; + setTimeout(refresh, 5000); + }); + + +

+ Health +

+ Overall status: {health.status} + +

+ {check.type}: + {check.message} +

Name	PG status	Usage	Activity
- {pool.pool_name} -	- {pool.pg_status \| pg_status} -	- {pool.stats.bytes_used.latest \| dimless} / - {pool.stats.max_avail.latest \| dimless } -	- {pool.stats.rd_bytes.rate \| dimless } rd, { - pool.stats.wr_bytes.rate \| dimless } wr -

+ {df.stats.total_objects \| dimless} +	+ +	+ +
Objects	Raw capacity ({df.stats.total_used_bytes \| dimless_binary} used)	Usage by pool