Draw a chart for queue lengths as well.

deps/rabbitmq_management/priv/www/js/charts.js

@@ -5,6 +5,9 @@ function render_charts() {
 }
 
 function render_chart(div) {
+    var id = div.attr('id').substring('chart-'.length);
+    var rate_mode = div.hasClass('chart-rates');
+
     var chrome = {
         series: { lines: { show: true } },
         grid:   { borderWidth: 2, borderColor: "#aaa" },
@@ -13,22 +16,35 @@ function render_chart(div) {
         legend: { position: 'se', backgroundOpacity: 0.5 }
     };
 
-    var data = [];
+    var out_data = [];
-    for (var name in chart_data) {
+    for (var name in chart_data[id]) {
-        var samples = chart_data[name].samples;
+        var data = chart_data[id][name];
+        var samples = data.samples;
         var d = [];
         for (var i = 1; i < samples.length; i++) {
             var x = samples[i].timestamp;
-            var y = (samples[i - 1].sample - samples[i].sample) * 1000 /
+            var y;
-                (samples[i - 1].timestamp - samples[i].timestamp);
+            if (rate_mode) {
+                y = (samples[i - 1].sample - samples[i].sample) * 1000 /
+                    (samples[i - 1].timestamp - samples[i].timestamp);
+            }
+            else {
+                y = samples[i].sample;
+            }
             d.push([x, y]);
         }
-        data.push({label: name + " (" + chart_data[name].rate + " msg/s)",
+        var suffix;
-                   data: d});
+        if (rate_mode) {
+            suffix = " (" + data.rate + " msg/s)";
+        }
+        else {
+            suffix = " (" + samples[0].sample + " msg)";
+        }
+        out_data.push({label: name + suffix, data: d});
     }
-    chart_data = {};
+    chart_data[id] = {};
 
-    $.plot(div, data, chrome);
+    $.plot(div, out_data, chrome);
 }
 
 function update_rate_options(sammy) {

deps/rabbitmq_management/priv/www/js/formatters.js

@@ -536,29 +536,40 @@ function _link_to(name, url) {
     return '<a href="' + url + '">' + name + '</a>';
 }
 
-function message_rates(stats) {
+function message_rates(id, stats) {
+    var items = [['Publish', 'publish'], ['Confirm', 'confirm'],
+                 ['Publish (In)', 'publish_in'],
+                 ['Publish (Out)', 'publish_out'],
+                 ['Deliver', 'deliver'],
+                 ['Redelivered', 'redeliver'],
+                 ['Acknowledge', 'ack'],
+                 ['Get', 'get'], ['Deliver (noack)', 'deliver_no_ack'],
+                 ['Get (noack)', 'get_no_ack'],
+                 ['Return', 'return_unroutable']];
+    return rates_chart_or_text(id, stats, items, 'rates');
+}
+
+function queue_lengths(id, stats) {
+    var items = [['Ready', 'messages_ready'],
+                 ['Unacknowledged', 'messages_unacknowledged'],
+                 ['Total', 'messages']];
+    return rates_chart_or_text(id, stats, items, 'counts');
+}
+
+function rates_chart_or_text(id, stats, items, rates_counts) {
     var res = '';
 
     if (keys(stats).length > 0) {
-        var items = [['Publish', 'publish'], ['Confirm', 'confirm'],
-                     ['Publish (In)', 'publish_in'],
-                     ['Publish (Out)', 'publish_out'],
-                     ['Deliver', 'deliver'],
-                     ['Redelivered', 'redeliver'],
-                     ['Acknowledge', 'ack'],
-                     ['Get', 'get'], ['Deliver (noack)', 'deliver_no_ack'],
-                     ['Get (noack)', 'get_no_ack'],
-                     ['Return', 'return_unroutable']];
         var res;
         var mode = get_pref('rate-mode');
         if (mode == 'chart') {
-            res = message_rates_chart(items, stats);
+            res = rates_chart(id, items, stats, rates_counts);
         }
         else {
-            res = message_rates_text(items, stats, mode);
+            res = rates_text(items, stats, mode);
         }
         if (res == "") {
-            res = '<p>Waiting for message rates...</p>';
+            res = '<p>Waiting for data...</p>';
         }
     }
     else {
@@ -568,21 +579,23 @@ function message_rates(stats) {
     return res + '<p class="rate-options-p"><span class="rate-options">[Options...]</span></p>';
 }
 
-function message_rates_chart(items, stats) {
+function rates_chart(id, items, stats, rates_counts) {
     var size = get_pref('chart-size');
     var show = false;
+    chart_data[id] = {};
     for (var i in items) {
         var name = items[i][0];
         var key = items[i][1] + '_details';
         if (key in stats) {
-            chart_data[name] = stats[key];
+            chart_data[id][name] = stats[key];
             show = true;
         }
     }
-    return show ? '<div class="chart chart-' + size + '"></div>' : '';
+    return show ? '<div id="chart-' + id + '" class="chart chart-' + size +
+        ' chart-' + rates_counts + '"></div>' : '';
 }
 
-function message_rates_text(items, stats, mode) {
+function rates_text(items, stats, mode) {
     var res = '';
     for (var i in items) {
         var name = items[i][0];
@@ -598,19 +611,6 @@ function message_rates_text(items, stats, mode) {
     return res;
 }
 
-function queue_length(stats, name, key) {
-    var rateMsg = '&nbsp;';
-    var detail = stats[key + '_details']
-    if (detail != undefined) {
-        var rate = detail.rate;
-        if (rate > 0)      rateMsg = '+' + fmt_rate_num(rate)  + ' msg/s';
-        else if (rate < 0) rateMsg = '-' + fmt_rate_num(-rate) + ' msg/s';
-    }
-
-    return '<div class="highlight">' + name +
-        '<strong>' + stats[key] + '</strong>' + rateMsg + '</div>';
-}
-
 function maybe_truncate(items) {
     var maximum = 500;
     var str = '';

deps/rabbitmq_management/priv/www/js/tmpl/channel.ejs

@@ -6,7 +6,7 @@
 <% if (statistics_level == 'fine') { %>
     <h3>Message rates</h3>
     <div class="box">
-      <%= message_rates(channel.message_stats) %>
+      <%= message_rates('cr', channel.message_stats) %>
     </div>
 <% } %>
 

deps/rabbitmq_management/priv/www/js/tmpl/exchange.ejs

@@ -5,7 +5,7 @@
 <% if (statistics_level == 'fine') { %>
     <h3>Message rates</h3>
     <div class="box">
-      <%= message_rates(exchange.message_stats) %>
+      <%= message_rates('xr', exchange.message_stats) %>
     </div>
 <% } %>
 

deps/rabbitmq_management/priv/www/js/tmpl/overview.ejs

@@ -6,14 +6,12 @@
 <% if (overview.statistics_db_node != 'not_running') { %>
   <h3>Queued messages <span class="help" id="queued-messages"></span></h3>
   <div class="box">
-    <%= queue_length(overview.queue_totals, 'Ready', 'messages_ready') %>
+    <%= queue_lengths('ol', overview.queue_totals) %>
-    <%= queue_length(overview.queue_totals, 'Unacknowledged', 'messages_unacknowledged') %>
-    <%= queue_length(overview.queue_totals, 'Total', 'messages') %>
   </div>
 <% if (statistics_level == 'fine') { %>
   <h3>Message rates <span class="help" id="message-rates"></span></h3>
   <div class="box">
-    <%= message_rates(overview.message_stats) %>
+    <%= message_rates('or', overview.message_stats) %>
   </div>
 <% } %>
 <% } else { %>

deps/rabbitmq_management/priv/www/js/tmpl/queue.ejs

@@ -5,14 +5,12 @@
   <div class="hider updatable">
     <h3>Messages</h3>
     <div class="box">
-      <%= queue_length(queue, 'Ready', 'messages_ready') %>
+      <%= queue_lengths('ql', queue) %>
-      <%= queue_length(queue, 'Unacknowledged', 'messages_unacknowledged') %>
-      <%= queue_length(queue, 'Total', 'messages') %>
     </div>
 <% if (statistics_level == 'fine') { %>
     <h3>Message rates</h3>
     <div class="box">
-      <%= message_rates(queue.message_stats) %>
+      <%= message_rates('qr', queue.message_stats) %>
     </div>
 <% } %>