root
/
rabbitmq-server
mirror of https://github.com/rabbitmq/rabbitmq-server.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

This was my original vision - little sparklines. It doesn't actually work very well.

This commit is contained in:
Simon MacMullen 2014-06-24 15:46:57 +01:00
parent 8159cc5169
commit 23511a28fe
3 changed files with 58 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
deps/rabbitmq_management/priv/www/css/main.css vendored
View File

@ -166,13 +166,17 @@ p.status-error, p.warning { margin: 20px; padding: 15px; border-radius: 10px; -m
.highlight strong { font-size: 2em; display: block; color: #444; font-weight: normal; }
.highlight, .micro-highlight { float: left; }
.chart { margin: 0 20px 20px 0; float: left; }
.chart-small { width: 400px; height: 100px; }
.chart-medium { width: 600px; height: 200px; }
.chart-large { width: 800px; height: 300px; }
.chart-full { margin: 0 20px 20px 0; float: left; }
.chart-full-small { width: 400px; height: 100px; }
.chart-full-medium { width: 600px; height: 200px; }
.chart-full-large { width: 800px; height: 300px; }
.chart-legend { float: left; }
.chart-node { }
.chart-node-small { width: 130px; height: 40px; }
.chart-node-medium { width: 250px; height: 70px; }
.chart-node-large { width: 400px; height: 100px; }
.micro-highlight { min-width: 120px; font-size: 100%; text-align:center; padding:10px; background-color: #ddd; margin: 0 20px 0 0; color: #888; border-radius: 10px; -moz-border-radius: 10px; }
.micro-highlight a { font-weight: normal !important; color: #888 !important; }
.micro-highlight strong { font-size: 120%; color: #444; font-weight: normal; }

32
deps/rabbitmq_management/priv/www/js/charts.js vendored
View File

@ -4,9 +4,9 @@ function render_charts() {
});
}
var chart_colors = ['#edc240', '#afd8f8', '#cb4b4b', '#4da74d', '#9440ed', '#666666', '#aaaaaa'];
var chart_colors_full = ['#edc240', '#afd8f8', '#cb4b4b', '#4da74d', '#9440ed', '#666666', '#aaaaaa'];
var chart_chrome = {
var chart_chrome_full = {
series: { lines: { show: true } },
grid: { borderWidth: 2, borderColor: "#aaa" },
xaxis: { tickColor: "#fff", mode: "time", timezone: "browser" },
@ -14,12 +14,34 @@ var chart_chrome = {
legend: { show: false }
};
var chart_colors_node = ['#6ae26a', '#e24545'];
var chart_chrome_node = {
series: { lines: { show: true, lineWidth: 2, fill: true } },
grid: { borderWidth: 0 },
xaxis: { show: false },
yaxis: { show: false, min: 0 },
legend: { show: false }
};
function render_chart(div) {
var id = div.attr('id').substring('chart-'.length);
var rate_mode = div.hasClass('chart-rates');
var out_data = [];
var data = chart_data[id]['data'];
var fmt = chart_data[id]['fmt'];
var colors;
var chrome;
if (div.hasClass('chart-full')) {
colors = chart_colors_full;
chrome = chart_chrome_full;
}
else {
colors = chart_colors_node;
chrome = chart_chrome_node;
}
for (var name in data) {
var series = data[name];
var samples = series.samples;
@ -42,12 +64,12 @@ function render_chart(div) {
}
d.push([x, y]);
}
out_data.push({data: d, color: chart_colors[i], shadowSize: 0});
out_data.push({data: d, color: colors[i], shadowSize: 0});
}
chart_data[id] = {};
chart_chrome.yaxis.tickFormatter = fmt_y_axis(fmt);
$.plot(div, out_data, chart_chrome);
chrome.yaxis.tickFormatter = fmt_y_axis(fmt);
$.plot(div, out_data, chrome);
}
function fmt_y_axis(fmt) {

30
deps/rabbitmq_management/priv/www/js/formatters.js vendored
View File

@ -711,14 +711,25 @@ function node_stat(used_key, limit_key, suffix, stats, fmt,
var used = stats[used_key];
var limit = stats[limit_key];
if (get_pref('rate-mode-node-stats') == 'chart') {
var items = [['foo', used_key]];
return rates_chart('node-stats-' + used_key, items, stats,
fmt_bytes_obj, fmt, false)[0];
var items = [['Used', used_key], ['Limit', limit_key]];
add_fake_limit_details(used_key, limit_key, stats);
return rates_chart('node-stats', 'node-stats-' + used_key, items, stats,
fmt_bytes_obj, fmt, 'node', false)[0];
} else {
return node_stat_bar(used, limit, suffix, fmt, colour, help, invert);
}
}
function add_fake_limit_details(used_key, limit_key, stats) {
var source = stats[used_key + '_details'].samples;
var limit = stats[limit_key];
var dest = [];
for (var i in source) {
dest[i] = {sample: limit, timestamp: source[i].timestamp};
}
stats[limit_key + '_details'] = {samples: dest};
}
function node_stat_bar(used, limit, suffix, fmt, colour, help, invert) {
var width = 120;
@ -752,7 +763,8 @@ function node_stats_prefs() {
}
function rates_chart_and_legend(id, items, stats, rate_fmt, axis_fmt, chart_rates) {
var res = rates_chart(id, items, stats, rate_fmt, axis_fmt, chart_rates);
var res = rates_chart(id, id, items, stats, rate_fmt, axis_fmt, 'full',
chart_rates);
var chartHtml = res[0];
var legend = res[1];
@ -764,7 +776,7 @@ function rates_chart_and_legend(id, items, stats, rate_fmt, axis_fmt, chart_rate
html += legend[i].show ? '' : ' rate-visibility-option-hidden';
html += '" data-pref="chart-line-' + id + legend[i].key + '">';
html += legend[i].name + '</span></th><td>';
html += '<div class="colour-key" style="background: ' + chart_colors[i];
html += '<div class="colour-key" style="background: ' + chart_colors_full[i];
html += ';"></div>' + legend[i].value + '</td></tr>'
}
html += '</table></div>';
@ -772,7 +784,8 @@ function rates_chart_and_legend(id, items, stats, rate_fmt, axis_fmt, chart_rate
return legend.length > 0 ? html : '';
}
function rates_chart(id, items, stats, rate_fmt, axis_fmt, chart_rates) {
function rates_chart(type_id, id, items, stats, rate_fmt, axis_fmt,
type, chart_rates) {
function show(key) {
return get_pref('chart-line-' + id + key) === 'true';
}
@ -798,9 +811,10 @@ function rates_chart(id, items, stats, rate_fmt, axis_fmt, chart_rates) {
ix++;
}
}
var size = get_pref('chart-size-' + id);
var size = get_pref('chart-size-' + type_id);
var html = '<div id="chart-' + id +
'" class="chart chart-' + size +
'" class="chart chart-' + type + ' chart-' + type + '-' + size +
(chart_rates ? ' chart-rates' : '') + '"></div>';
return [html, legend];
}