Add counters on detail pages

closes https://github.com/rabbitmq/rabbitmq-server/issues/3416

5 files changed, 8 insertions, 8 deletions

diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/channel.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/channel.ejs
index 5ecd7f801e..0eae88802f 100644
--- a/deps/rabbitmq_management/priv/www/js/tmpl/channel.ejs
+++ b/deps/rabbitmq_management/priv/www/js/tmpl/channel.ejs
@@ -74,7 +74,7 @@
 </div>
 
 <div class="section">
-  <h2>Consumers</h2>
+  <h2 class="updatable" >Consumers (<%=(channel.consumer_details.length)%>) </h2>
   <div class="hider updatable">
 <%= format('consumers', {'mode': 'channel', 'consumers': channel.consumer_details}) %>
   </div>
diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/connection.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/connection.ejs
index aff8ce65d1..f107a3981c 100644
--- a/deps/rabbitmq_management/priv/www/js/tmpl/connection.ejs
+++ b/deps/rabbitmq_management/priv/www/js/tmpl/connection.ejs
@@ -76,7 +76,7 @@
 </div>
 
 <div class="section">
-  <h2>Channels</h2>
+  <h2 class="updatable" >Channels (<%=(channels.length)%>) </h2>
   <div class="hider updatable">
     <%= format('channels-list', {'channels': channels, 'mode': 'connection'}) %>
   </div>
diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/queue.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/queue.ejs
index cf5afe508e..3fda046f81 100644
--- a/deps/rabbitmq_management/priv/www/js/tmpl/queue.ejs
+++ b/deps/rabbitmq_management/priv/www/js/tmpl/queue.ejs
@@ -130,7 +130,7 @@
       </tr>
       <% if(queue.consumers) { %>
       <tr>
-        <th>Consumers</th>
+        <th>Consumers%></th>
         <td><%= fmt_string(queue.consumers) %></td>
       </tr>
       <% } else if(queue.hasOwnProperty('consumer_details')) { %>
@@ -273,7 +273,7 @@
 
 <% if(!disable_stats) { %>
 <div class="section-hidden">
-  <h2>Consumers</h2>
+  <h2 class="updatable">Consumers (<%=(queue.consumer_details.length)%>) </h2>
   <div class="hider updatable">
 <%= format('consumers', {'mode': 'queue', 'consumers': queue.consumer_details}) %>
   </div>
@@ -281,7 +281,7 @@
 <% } %>
 
 <div class="section-hidden">
-  <h2>Bindings</h2>
+  <h2 class="updatable">Bindings (<%=(bindings.length)%>) </h2>
   <div class="hider">
     <div class="bindings-wrapper">
       <%= format('bindings', {'mode': 'queue', 'bindings': bindings}) %>
diff --git a/deps/rabbitmq_stream_management/priv/www/js/stream.js b/deps/rabbitmq_stream_management/priv/www/js/stream.js
index baa9fe808a..5dfbae9943 100644
--- a/deps/rabbitmq_stream_management/priv/www/js/stream.js
+++ b/deps/rabbitmq_stream_management/priv/www/js/stream.js
@@ -20,7 +20,7 @@ dispatcher_add(function(sammy) {
         if (is_stream(queue)) {
             var publishers = extraContent['extra_stream_publishers'];
             if (publishers !== undefined) {
-                return '<div class="section-hidden"><h2>Stream publishers</h2><div class="hider updatable">' +
+                return '<div class="section-hidden"><h2 class="updatable">Stream publishers (' + Object.keys(publishers).length +')</h2><div class="hider updatable">' +
                     format('streamPublishersList', {'publishers': publishers, 'mode': 'queue'}) +
                     '</div></div>';
             } else {
diff --git a/deps/rabbitmq_stream_management/priv/www/js/tmpl/streamConnection.ejs b/deps/rabbitmq_stream_management/priv/www/js/tmpl/streamConnection.ejs
index 524ad71ebd..571293bf48 100644
--- a/deps/rabbitmq_stream_management/priv/www/js/tmpl/streamConnection.ejs
+++ b/deps/rabbitmq_stream_management/priv/www/js/tmpl/streamConnection.ejs
@@ -116,14 +116,14 @@
 <% } %>
 
 <div class="section">
-  <h2>Publishers</h2>
+  <h2 class="updatable">Publishers (<%=(publishers.length)%>) </h2>
   <div class="hider updatable">
     <%= format('streamPublishersList', {'publishers': publishers, 'mode' : 'connection'}) %>
   </div>
 </div>
 
 <div class="section">
-  <h2>Consumers</h2>
+  <h2 class="updatable" >Consumers (<%=(consumers.length)%>)</h2>
   <div class="hider updatable">
     <%= format('streamConsumersList', {'consumers': consumers}) %>
   </div>