Live update message counts on the diagram

Author: Vidas P

app/assets/javascripts/diagram.js

@@ -26,12 +26,33 @@ window.updateDiagram = function(options){
       badge.css({
         left: tl.x - (badge.outerWidth()  * (2/3)),
         top:  tl.y - (badge.outerHeight() * (1/3)),
-        'background-color': badge.find('.badge').css('background-color')}).show();
+        'background-color': badge.find('.badge').css('background-color')});
     });
   });
 };
 
 window.setupDiagram = function() {
+  var setBadge = function(agent_id, count) {
+    var selector = `#b${agent_id}`;
+    if (count > 0) {
+      $(selector).show();
+      $(`${selector} span.count`).text(count);
+    } else {
+      $(selector).hide();
+    }
+  };
+  var fetchStatus = function() {
+    $.getJSON('/agents', function(json) {
+      for(const agent_status of json) {
+        let agent_id = agent_status.id;
+        let messages_count = agent_status.messages_count;
+        setBadge(agent_id, messages_count);
+      }
+    });
+    setTimeout(fetchStatus, 2000);
+  };
+  fetchStatus();
+
   let updateVisibility = (show) => {
     const $toggle = $('#show-diagram-toggle');
     const $diagram = $('.overview-diagram');

app/controllers/agents_controller.rb

@@ -15,6 +15,19 @@ def index
     end
   end
 
+  def status
+    agents = current_user.agents
+
+    statuses = agents.pluck(:id, :messages_count).map do |props|
+      {
+        id: props[0],
+        messages_count: props[1]
+      }
+    end
+
+    render json: statuses
+  end
+
   def toggle_visibility
     if show_only_enabled_agents?
       mark_all_agents_viewable

app/helpers/dot_helper.rb

@@ -200,14 +200,17 @@ def decorate_svg(xml, agents, workflow)
         node['data-agent-id'] = agent_id
 
         count = agent.messages_count
-        next unless count && count > 0
 
         overlay << Nokogiri::XML::Node.new('a', doc) { |badge|
           badge['id'] = id = 'b%d' % agent_id
           badge['class'] = 'badge'
           badge['href'] = agent_path(agent, params: { tab: 'messages', workflow_id: workflow })
           badge['title'] = "#{count} messages created"
-          badge.content = count.to_s
+
+          badge << Nokogiri::XML::Node.new('span', doc) { |lbl|
+            lbl.content = count.to_s
+            lbl['class'] = 'count'
+          }
 
           node['data-badge-id'] = id
 
@@ -216,11 +219,11 @@ def decorate_svg(xml, agents, workflow)
             label['class'] = [
               'badge',
               if agent.unavailable?
-                'badge badge-warning'
+                'badge-warning'
               elsif agent.working?
-                'badge badge-success'
+                'badge-success'
               else
-                'badge badge-danger'
+                'badge-danger'
               end
             ].join(' ')
             label['style'] = 'display: none';

config/routes.rb

@@ -9,6 +9,7 @@
     end
 
     collection do
+      get :status
       put :toggle_visibility
       get :type_details
       get :message_descriptions

spec/controllers/agents_controller_spec.rb

@@ -26,6 +26,16 @@ def valid_attributes(options = {})
     end
   end
 
+  describe 'GET status' do
+    it 'returns message counts for users agents' do
+      sign_in users(:bob)
+      get :status
+      JSON.parse(response.body).each do |status|
+        expect(status['messages_count']).to eq Agent.find(status['id']).messages_count
+      end
+    end
+  end
+
   describe 'POST handle_details_post' do
     it 'passes control to handle_details_post on the agent' do
       sign_in users(:bob)