From 2cd8c5c64c5814bdc68868d66c30a664f759152d Mon Sep 17 00:00:00 2001 From: John Spray Date: Wed, 21 Jun 2017 20:34:27 -0400 Subject: [PATCH] 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 --- src/pybind/mgr/dashboard/base.html | 107 +++++- src/pybind/mgr/dashboard/clients.html | 5 +- src/pybind/mgr/dashboard/filesystem.html | 16 +- src/pybind/mgr/dashboard/health.html | 341 +++++++++++++----- src/pybind/mgr/dashboard/module.py | 41 ++- src/pybind/mgr/dashboard/static/logo-mini.png | Bin 0 -> 1811 bytes src/pybind/mgr/dashboard/types.py | 7 + 7 files changed, 394 insertions(+), 123 deletions(-) create mode 100644 src/pybind/mgr/dashboard/static/logo-mini.png diff --git a/src/pybind/mgr/dashboard/base.html b/src/pybind/mgr/dashboard/base.html index 18874fb565f06..efe09260e30d0 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 8d775cc5a10ca..bd5a557210bca 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 a8bd193c9ac9c..c58f1e18fd57c 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 de5a794f27dc5..70cc7f8efe727 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