ONOS-3518: Refactored badge-rendering code.

 - augmented badges test scenario.

Change-Id: I7cef224daacfd52056440fb2ad068002f740b51f

@@ -149,6 +149,10 @@
             rx: 4
             rx: 4
         },
         },
         host: {
         host: {
+            badge: {
+                dx: 14,
+                dy: -14
+            },
             radius: {
             radius: {
                 noGlyph: 9,
                 noGlyph: 9,
                 withGlyph: 14
                 withGlyph: 14

@@ -452,7 +452,7 @@ html[data-platform='iPad'] #topo-p-detail {
 }
 }
 
 
 #ov-topo svg .node .badge.badgeInfo circle {
 #ov-topo svg .node .badge.badgeInfo circle {
-    fill: #ccf;
+    fill: #99d;
 }
 }
 
 
 #ov-topo svg .node .badge.badgeWarn circle {
 #ov-topo svg .node .badge.badgeWarn circle {
@@ -464,7 +464,7 @@ html[data-platform='iPad'] #topo-p-detail {
 }
 }
 
 
 #ov-topo svg .node .badge use {
 #ov-topo svg .node .badge use {
-    fill: white;
+    fill: white !important;
 }
 }
 
 
 #ov-topo svg .node .badge.badgeInfo use {
 #ov-topo svg .node .badge.badgeInfo use {
@@ -472,7 +472,7 @@ html[data-platform='iPad'] #topo-p-detail {
 }
 }
 
 
 #ov-topo svg .node .badge text {
 #ov-topo svg .node .badge text {
-    fill: white;
+    fill: white !important;
 }
 }
 
 
 #ov-topo svg .node .badge.badgeInfo text {
 #ov-topo svg .node .badge.badgeInfo text {

@@ -200,7 +200,6 @@
         };
         };
     }
     }
 
 
-
     function updateDeviceRendering(d) {
     function updateDeviceRendering(d) {
         var label = trimLabel(deviceLabel(d)),
         var label = trimLabel(deviceLabel(d)),
             noLabel = !label,
             noLabel = !label,
@@ -237,76 +236,50 @@
 
 
         // handle badge, if defined
         // handle badge, if defined
         if (bdg) {
         if (bdg) {
-            node.select('g.badge').remove();
-
-            bsel = node.append('g')
-                .classed('badge', true)
-                .classed(badgeStatus(bdg), true)
-                .attr('transform', sus.translate(dx + dim, dy));
-
-            bsel.append('circle')
-                .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
-                    });
-
-            }
+            renderBadge(node, bdg, { dx: dx + dim, dy: dy });
         }
         }
     }
     }
 
 
     function updateHostRendering(d) {
     function updateHostRendering(d) {
         var node = d.el,
         var node = d.el,
-            dim = icfg.host.radius.withGlyph,
-            box, dx, dy, bsel,
-            bdg = d.badge,
-            bcr = badgeConfig.radius,
-            bcgd = badgeConfig.gdelta;
-
+            bdg = d.badge;
 
 
         updateHostLabel(d);
         updateHostLabel(d);
-        
-        // TODO: fine-tune dx, dy for badge placement relative to host Circle.
-            dx = -dim/2;
-            dy = -dim/2;
 
 
         // handle badge, if defined
         // handle badge, if defined
         if (bdg) {
         if (bdg) {
-            node.select('g.badge').remove();
-
-            bsel = node.append('g')
-                .classed('badge', true)
-                .classed(badgeStatus(bdg), true)
-                .attr('transform', sus.translate(dx + dim, dy));
-
-            bsel.append('circle')
-                .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
-                    });
+            renderBadge(node, bdg, icfg.host.badge);
+        }
+    }
 
 
-            }
+    function renderBadge(node, bdg, boff) {
+        var bsel,
+            bcr = badgeConfig.radius,
+            bcgd = badgeConfig.gdelta;
+
+        node.select('g.badge').remove();
+
+        bsel = node.append('g')
+            .classed('badge', true)
+            .classed(badgeStatus(bdg), true)
+            .attr('transform', sus.translate(boff.dx, boff.dy));
+
+        bsel.append('circle')
+            .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
+                });
         }
         }
     }
     }
 
 

+{
+  "event": "addHost",
+  "payload": {
+    "id": "0E:2A:69:30:13:97/-1",
+    "ingress": "0E:2A:69:30:13:97/-1/0-of:0000000000000002/3",
+    "egress": "of:0000000000000002/3-0E:2A:69:30:13:97/-1/0",
+    "cp": {
+      "device": "of:0000000000000002",
+      "port": 3
+    },
+    "labels": [
+      "192.168.0.2",
+      "0E:2A:69:30:13:97"
+    ],
+    "metaUi": {
+      "x": 340,
+      "y": 100
+    },
+    "props": {}
+  }
+}

+{
+  "event": "addHost",
+  "payload": {
+    "id": "0E:2A:69:30:13:a8/-1",
+    "ingress": "0E:2A:69:30:13:a8/-1/0-of:0000000000000002/4",
+    "egress": "of:0000000000000002/4-0E:2A:69:30:13:a8/-1/0",
+    "cp": {
+      "device": "of:0000000000000002",
+      "port": 4
+    },
+    "labels": [
+      "192.168.0.3",
+      "0E:2A:69:30:13:a8"
+    ],
+    "metaUi": {
+      "x": 480,
+      "y": 90
+    },
+    "props": {}
+  }
+}

+{
+  "event": "showHighlights",
+  "payload": {
+    "devices": [],
+    "hosts": [
+      {
+        "id": "0E:2A:69:30:13:86/-1",
+        "badge": {
+          "status": "e",
+          "txt": "99",
+          "msg": "cadbury's flake"
+        }
+      },
+      {
+        "id": "0E:2A:69:30:13:97/-1",
+        "badge": {
+          "status": "i",
+          "gid": "xMark",
+          "msg": "x marks the spot"
+        }
+      },
+      {
+        "id": "0E:2A:69:30:13:a8/-1",
+        "badge": {
+          "status": "w",
+          "gid": "crown"
+        }
+      }
+    ],
+    "links": []
+  }
+}

+{
+  "event": "addHost",
+  "payload": {
+    "id": "0E:2A:69:30:13:86/-1",
+    "ingress": "0E:2A:69:30:13:86/-1/0-of:0000000000000001/2",
+    "egress": "of:0000000000000001/2-0E:2A:69:30:13:86/-1/0",
+    "cp": {
+      "device": "of:0000000000000001",
+      "port": 2
+    },
+    "labels": [
+      "192.168.0.1",
+      "0E:2A:69:30:13:86"
+    ],
+    "metaUi": {
+      "x": 210,
+      "y": 100
+    },
+    "props": {}
+  }
+}

 {
 {
   "comments": [
   "comments": [
-    "Demo of adding badges to devices"
+    "Demo of adding badges to devices and hosts"
   ],
   ],
   "title": "Demo adding badges",
   "title": "Demo adding badges",
   "params": {
   "params": {
-    "lastAuto": 9
+    "lastAuto": 12
   },
   },
   "description": [
   "description": [
-    "Demonstrate the device badging feature."
+    "Demonstrate the device/host badging feature."
   ]
   ]
 }
 }