commit e9062fc0ca20482dd808e6f0211ca35966425e05
author Simon Hunt <simon@onlab.us> Thu Dec 22 11:40:06 2016 -0800
committer Simon Hunt <simon@onlab.us> Thu Dec 22 19:48:16 2016 +0000
tree a882f0e55a15b88d0e7ae29190f4b0d417b793de
parent b1fbddbdb3fd591f7dabdee1fd7b6e1b83fa72a8

Update topo devices / hosts to new glyphs (mojo designs)

Change-Id: I8d8a5a7b01b0a13a269288bd99e971d5ca9349fc

web/gui/src/main/webapp/app/view/topo/topoD3.js

diff --git a/web/gui/src/main/webapp/app/view/topo/topoD3.js b/web/gui/src/main/webapp/app/view/topo/topoD3.js
index 5b669ce..f9fc421 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -40,6 +40,7 @@
 
     // configuration
     var devIconDim = 36,
+        devColorDim = 32,
         labelPad = 4,
         hostRadius = 14,
         badgeConfig = {
@@ -60,13 +61,32 @@
     //       the server-side UiModel code.
     // {virtual -> cord} is for the E-CORD demo at ONS 2016
     var remappedDeviceTypes = {
-        virtual: 'cord'
+        virtual: 'cord',
+
+        // for now, map to the new glyphs via this lookup.
+        // may have to find a better way to do this...
+        'switch': 'm_switch',
+        roadm: 'm_roadm',
+        otn: 'm_otn',
+        roadm_otn: 'm_roadm_otn',
+        fiber_switch: 'm_fiberSwitch',
+        microwave: 'm_microwave',
+    };
+
+    var remappedHostTypes = {
+        router: 'm_router',
+        endstation: 'm_endstation',
+        bgpSpeaker: 'm_bgpSpeaker'
     };
 
     function mapDeviceTypeToGlyph(type) {
         return remappedDeviceTypes[type] || type || 'unknown';
     }
 
+    function mapHostTypeToGlyph(type) {
+        return remappedHostTypes[type] || type || 'unknown';
+    }
+
     function badgeStatus(badge) {
         return status[badge.status] || status.i;
     }
@@ -97,7 +117,8 @@
     }
 
     function setDeviceColor(d) {
-        d.el.select('use')
+        // want to color the square rectangle (no longer the 'use' glyph)
+        d.el.selectAll('rect').filter(function (d, i) {return i === 1;})
             .style('fill', devGlyphColor(d));
     }
 
@@ -241,11 +262,12 @@
         var node = d3.select(this),
             glyphId = mapDeviceTypeToGlyph(d.type),
             label = trimLabel(deviceLabel(d)),
-            rect, text, glyph, labelWidth;
+            rect, crect, text, glyph, labelWidth;
 
         d.el = node;
 
         rect = node.append('rect');
+        crect = node.append('rect');
 
         text = node.append('text').text(label)
             .attr('text-anchor', 'left')
@@ -257,6 +279,7 @@
         labelWidth = label ? computeLabelWidth(node) : 0;
 
         rect.attr(iconBox(devIconDim, labelWidth));
+        crect.attr(iconBox(devColorDim, 0));
         glyph.attr(iconBox(devIconDim, 0));
 
         node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
@@ -264,13 +287,13 @@
 
     function hostEnter(d) {
         var node = d3.select(this),
-            gid = d.type || 'unknown',
+            glyphId = mapHostTypeToGlyph(d.type),
             textDy = hostRadius + 10;
 
         d.el = node;
         sus.visible(node, api.showHosts());
 
-        is.addHostIcon(node, hostRadius, gid);
+        is.addHostIcon(node, hostRadius, glyphId);
 
         node.append('text')
             .text(hostLabel)