GUI -- Re-worked ONOS Instance panel (WIP)
- added sample events, including updated addInstance event.
- cleaned up glyphs; added badges.
- fixed defect in floating panel .width(...) function.

Change-Id: I00d7ca38a1b291c4735b6dd5e39f0266549b545f
diff --git a/web/gui/src/main/webapp/glyphs.js b/web/gui/src/main/webapp/glyphs.js
index 6a01504..5e428dd 100644
--- a/web/gui/src/main/webapp/glyphs.js
+++ b/web/gui/src/main/webapp/glyphs.js
@@ -50,79 +50,78 @@
             .append('path').attr('d', birdData);
     }
 
-    var bullhornData = "M0,13c0,3.733,2.561,6.148,6.019,6.809 " +
-        "C6.013,19.873,6,19.935,6,20v8 c0,1.105,0.895,2,2,2h3 " +
-        "c1.105,0,2-0.896,2-2v-8h3V6H8C3.582,6,0,8.582,0,13z " +
-        "M18,20h3V6h-3V20z M30,0l-7,4.667v16.667L30,26 c1.105,0,2-0.895,2-2" +
-        "V2 C32,0.896,31.105,0,30,0z";
-
-    function defBullhorn(defs) {
-        defs.append('symbol')
-            .attr({
-                id: 'bullhorn',
-                viewBox: '-4 -5 40 40'
-            })
-            .append('path').attr('d', bullhornData);
-    }
-
     var glyphData = {
         unknown: "M-20 -15 a5 5 0 0 1 5 -5 h30 a5 5 0 0 1 5 5 v30 " +
-                "a5 5 0 0 1 -5 5 h-30 a5 5 0 0 1 -5 -5 z ",
-        router: "M-45 0 A45 45 0 0 1 45 0 A45 45 0 0 1 -45 0 M -35 -5 " +
-                "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 35 -5 " +
-                "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -5 -8 " +
-                "l 0 -12, -8 0, 13 -18, 13 18, -8 0, 0 12 z M -5 8 " +
-                "l 0 12, -8 0, 13 18, 13 -18, -8 0, 0 -12 z ",
-        bgpSpeaker: "M-45 -15 a45 35 0 0 1 90 0 Q45 22 0 45 Q-45 22 -45 -15 z " +
-                    "M -5 -26 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 5 2" +
-                    " l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z ",
+            "a5 5 0 0 1 -5 5 h-30 a5 5 0 0 1 -5 -5 z",
 
-        switch: "M-45 -35 a10 10 0 0 1 10 -10 h70 a 10 10 0 0 1 10 10 v70 a 10 10 0 0 1 -10 10 h -70 a 10 10 0 0 1 -10 -10 z M 5 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 5 5 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M -5 -15 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -5 19 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z",
-
-
-        Xswitch: "M-45 -35 a10 10 0 0 1 10 -10 h70 a 10 10 0 0 1 10 10 v70 " +
-                "a 10 10 0 0 1 -10 10 h -70 a 10 10 0 0 1 -10 -10 z M 5 -29 " +
-                "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 5 5 " +
-                "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M -5 -15 " +
-                "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -5 19 " +
-                "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z " ,
-        roadm: "M-45 -20 l25 -25 h40 l25 25 v40 l-25 25 h-40 l-25 -25 z " +
-                "M 3 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 3 5 " +
-                "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M -3 -15 " +
-                "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -3 19 " +
-                "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z ",
         node: "M-40 45 a5 5 0 0 1 -5 -5 v-65 a5 5 0 0 1 5 -5 h80 " +
-                "a5 5 0 0 1 5 5 v65 a5 5 0 0 1 -5 5 z M-41 -32.5 l11 -11  " +
-                "a10 3 0 0 1 10 -2 h40 a10 3 0 0 1 10 2 l11 11 z M-39 -20 " +
-                "a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z ",
+            "a5 5 0 0 1 5 5 v65 a5 5 0 0 1 -5 5 z M-41 -32.5 l11 -11  " +
+            "a10 3 0 0 1 10 -2 h40 a10 3 0 0 1 10 2 l11 11 z M-39 -20 " +
+            "a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z",
+
+        switch: "M-45 -35 a10 10 0 0 1 10 -10 h70 a 10 10 0 0 1 10 10 " +
+            "v70 a 10 10 0 0 1 -10 10 h -70 a 10 10 0 0 1 -10 -10 z " +
+            "M 5 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 5 5 " +
+            "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M -5 -15 " +
+            "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -5 19 " +
+            "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z",
+
+        roadm: "M-45 -20 l25 -25 h40 l25 25 v40 l-25 25 h-40 l-25 -25 z " +
+            "M 3 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 3 5 " +
+            "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M -3 -15 " +
+            "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -3 19 " +
+            "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z",
+
         endstation: "M-45 -40 a5 5 0 0 1 5 -5 h65 a5 5 0 0 1 5 5 v80 " +
-                "a5 5 0 0 1 -5 5 h-65 a5 5 0 0 1 -5 -5 z M32.5 -41 l11 11  " +
-                "a3 10 0 0 1 2 10 v40 a3 10 0 0 1 -2 10 l-11 11 z M-38 -36 " +
-                "a2 2 0 0 1 2 -2 h56 a2 2 0 0 1 2 2 v26 a2 2 0 0 1 -2 2 h-56 " +
-                "a2 2 0 0 1 -2 -2 z M-35 -35 h54 v10 h-54 z M-35 -22 h54 v10 " +
-                "h-54 z M-13 15 a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z "
+            "a5 5 0 0 1 -5 5 h-65 a5 5 0 0 1 -5 -5 z M32.5 -41 l11 11  " +
+            "a3 10 0 0 1 2 10 v40 a3 10 0 0 1 -2 10 l-11 11 z M-38 -36 " +
+            "a2 2 0 0 1 2 -2 h56 a2 2 0 0 1 2 2 v26 a2 2 0 0 1 -2 2 h-56 " +
+            "a2 2 0 0 1 -2 -2 z M-35 -35 h54 v10 h-54 z M-35 -22 h54 v10 " +
+            "h-54 z M-13 15 a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z",
+
+        router: "M-45 0 A45 45 0 0 1 45 0 A45 45 0 0 1 -45 0 M -35 -5 " +
+            "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 35 -5 " +
+            "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -5 -8 " +
+            "l 0 -12, -8 0, 13 -18, 13 18, -8 0, 0 12 z M -5 8 " +
+            "l 0 12, -8 0, 13 18, 13 -18, -8 0, 0 -12 z",
+
+        bgpSpeaker: "M-45 -15 a45 35 0 0 1 90 0 Q45 22 0 45 Q-45 22 -45 -15 z " +
+            "M -5 -26 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 5 2" +
+            " l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z"
     };
 
     var glyphParams = {
         viewBox: '-55 -55 110 110'
     };
 
-    function defGlyphs(defs) {
-        d3.map(glyphData).keys().forEach(function (key) {
-                defs.append('symbol')
-                    .attr({
-                        id: key,
-                        viewBox: glyphParams.viewBox
-                    })
-                    .append('path').attr('d', glyphData[key]);
+
+    var badgeData = {
+        uiAttached: "M-3-2.5 a.5 .5 0 0 1 .5-.5 h5 a.5 .5 0 0 1 .5 .5 v3 " +
+        "a.5 .5 0 0 1-.5 .5 h-5 a.5 .5 0 0 1-.5-.5 z M-2.5-2.2 " +
+        "a.3 .3 0 0 1 .3-.3 h4.4 a.3 .3 0 0 1 .3 .3 v2.4 a.3 .3 0 0 1-.3 .3 " +
+        "h-4.4 a.3 .3 0 0 1-.3-.3 z M-3 1.55 h6 l1 1.45 h-8 z"
+    };
+
+    var badgeParams = {
+        viewBox: '-5 -5 10 10'
+    };
+
+    function defStuff(defs, params, data) {
+        d3.map(data).keys().forEach(function (key) {
+            defs.append('symbol')
+                .attr({
+                    id: key,
+                    viewBox: params.viewBox
+                })
+                .append('path').attr('d', data[key]);
         });
     }
 
     // === register the functions as a library
     onos.ui.addLib('glyphs', {
         defBird: defBird,
-        defBullhorn: defBullhorn,
-        defGlyphs: defGlyphs
+        defGlyphs: function (defs) { defStuff(defs, glyphParams, glyphData); },
+        defBadges: function (defs) { defStuff(defs, badgeParams, badgeData); }
     });
 
 }(ONOS));