1 files changed, 44 insertions, 16 deletions

diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/topo/topoD3.js b/framework/src/onos/web/gui/src/main/webapp/app/view/topo/topoD3.js
index 1f061dd6..1d2c5b10 100644
--- a/framework/src/onos/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/framework/src/onos/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -55,8 +55,23 @@
                 height: 14
             }
         },
+        badgeConfig = {
+            radius: 12,
+            yoff: 5,
+            gdelta: 10
+        },
         icfg;
 
+    var status = {
+        i: 'badgeInfo',
+        w: 'badgeWarn',
+        e: 'badgeError'
+    };
+
+    function badgeStatus(badge) {
+        return status[badge.status] || status.i;
+    }
+
     // internal state
     var deviceLabelIndex = 0,
         hostLabelIndex = 0;
@@ -186,12 +201,15 @@
     }
 
 
-    function updateDeviceLabel(d) {
+    function updateDeviceRendering(d) {
         var label = trimLabel(deviceLabel(d)),
             noLabel = !label,
             node = d.el,
             dim = icfg.device.dim,
-            box, dx, dy;
+            box, dx, dy, bsel,
+            bdg = d.badge,
+            bcr = badgeConfig.radius,
+            bcgd = badgeConfig.gdelta;
 
         node.select('text')
             .text(label)
@@ -216,23 +234,34 @@
         node.select('g.deviceIcon')
             .transition()
             .attr('transform', sus.translate(dx, dy));
-    }
 
-    function updateDeviceBadge(d) {
-        // TODO: Fix this WIP
-        var node = d.el,
-            bsel;
+        // handle badge, if defined
+        if (bdg) {
+            node.select('g.badge').remove();
 
-        if (d.badge) {
             bsel = node.append('g')
                 .classed('badge', true)
-                .attr('transform', sus.translate(-14, -14));
+                .classed(badgeStatus(bdg), true)
+                .attr('transform', sus.translate(dx + dim, dy));
 
             bsel.append('circle')
-                .attr('r', 14);
-            bsel.append('text')
-                .attr('transform', sus.translate(-5, 3))
-                .text('42');
+                .attr('r', bcr);
+
+            if (bdg.txt) {
+                bsel.append('text')
+                    .attr('dy', badgeConfig.yoff)
+                    .attr('text-anchor', 'middle')
+                    .text(bdg.txt);
+            } else if (bdg.gid) {
+                bsel.append('use')
+                    .attr({
+                        width: bcgd * 2,
+                        height: bcgd * 2,
+                        transform: sus.translate(-bcgd, -bcgd),
+                        'xlink:href': '#' + bdg.gid
+                    });
+
+            }
         }
     }
 
@@ -258,8 +287,7 @@
     function deviceExisting(d) {
         var node = d.el;
         node.classed('online', d.online);
-        updateDeviceLabel(d);
-        updateDeviceBadge(d);
+        updateDeviceRendering(d);
         api.posNode(d, true);
     }
 
@@ -574,7 +602,7 @@
                 deviceLabel: deviceLabel,
                 trimLabel: trimLabel,
 
-                updateDeviceLabel: updateDeviceLabel,
+                updateDeviceLabel: updateDeviceRendering,
                 updateHostLabel: updateHostLabel,
                 updateDeviceColors: updateDeviceColors,