Fully live update diagram badges

Author: Vidas P

app/assets/javascripts/diagram.js

@@ -25,24 +25,32 @@ window.updateDiagram = function(options){
       const badge = $(this);
       badge.css({
         left: tl.x - (badge.outerWidth()  * (2/3)),
-        top:  tl.y - (badge.outerHeight() * (1/3)),
-        'background-color': badge.find('.badge').css('background-color')});
+        top:  tl.y - (badge.outerHeight() * (1/3))
+      });
     });
   });
 };
 
 window.updateDiagramStatus = function(json) {
-  var setBadge = function(agent_id, count) {
+  var setBadge = function(agent_id, count, working) {
     var selector = `#b${agent_id}`;
     if (count > 0) {
       $(selector).show();
-      $(`${selector} span.count`).text(count);
+      $(`${selector}`).text(count);
+      $(`${selector}`).attr('title', `${count} messages created`);
+      if (working) {
+        $(`${selector}`).removeClass('badge-danger');
+        $(`${selector}`).addClass('badge-success');
+      } else {
+        $(`${selector}`).removeClass('badge-success');
+        $(`${selector}`).addClass('badge-danger');
+      };
     } else {
       $(selector).hide();
     }
   };
   for(const agent of json) {
-    setBadge(agent.id, agent.messages_count);
+    setBadge(agent.id, agent.messages_count, agent.working);
   }
 }
 

app/assets/stylesheets/diagram.scss

@@ -35,6 +35,12 @@
         color: white !important;
         z-index: 2;
       }
+      .badge-danger {
+        background-color: $danger;
+      };
+      .badge-success {
+        background-color: $success;
+      };
     }
   }
 }

app/helpers/dot_helper.rb

@@ -204,30 +204,11 @@ def decorate_svg(xml, agents, workflow)
         overlay << Nokogiri::XML::Node.new('a', doc) { |badge|
           badge['id'] = id = 'b%d' % agent_id
           badge['class'] = 'badge'
+          badge['style'] = 'display: none'
           badge['href'] = agent_path(agent, params: { tab: 'messages', workflow_id: workflow })
-          badge['title'] = "#{count} messages created"
-
-          badge << Nokogiri::XML::Node.new('span', doc) { |lbl|
-            lbl.content = count.to_s
-            lbl['class'] = 'count'
-          }
+          badge.content = count.to_s
 
           node['data-badge-id'] = id
-
-          badge << Nokogiri::XML::Node.new('span', doc) { |label|
-            # a dummy label only to obtain the background color
-            label['class'] = [
-              'badge',
-              if agent.unavailable?
-                'badge-warning'
-              elsif agent.working?
-                'badge-success'
-              else
-                'badge-danger'
-              end
-            ].join(' ')
-            label['style'] = 'display: none';
-          }
         }
       }
       # See also: app/assets/diagram.js