GUI Fixes.

Change-Id: I5b5de2b74b65f1af613e04e226ee633ee50f695d

@@ -164,16 +164,18 @@ public class TopologyViewIntentFilter {
 
 
     // Indicates whether the specified intent involves the given device.
     // Indicates whether the specified intent involves the given device.
     private boolean isIntentRelevantToDevice(List<Intent> installables, Device device) {
     private boolean isIntentRelevantToDevice(List<Intent> installables, Device device) {
-        for (Intent installable : installables) {
-            if (installable instanceof PathIntent) {
-                PathIntent pathIntent = (PathIntent) installable;
-                if (pathContainsDevice(pathIntent.path().links(), device.id())) {
-                    return true;
-                }
-            } else if (installable instanceof LinkCollectionIntent) {
-                LinkCollectionIntent linksIntent = (LinkCollectionIntent) installable;
-                if (pathContainsDevice(linksIntent.links(), device.id())) {
-                    return true;
+        if (installables != null) {
+            for (Intent installable : installables) {
+                if (installable instanceof PathIntent) {
+                    PathIntent pathIntent = (PathIntent) installable;
+                    if (pathContainsDevice(pathIntent.path().links(), device.id())) {
+                        return true;
+                    }
+                } else if (installable instanceof LinkCollectionIntent) {
+                    LinkCollectionIntent linksIntent = (LinkCollectionIntent) installable;
+                    if (pathContainsDevice(linksIntent.links(), device.id())) {
+                        return true;
+                    }
                 }
                 }
             }
             }
         }
         }

@@ -124,7 +124,6 @@ svg .node.host circle {
 
 
 #topo svg .link {
 #topo svg .link {
     opacity: .7;
     opacity: .7;
-    stroke-width: 1.2px;
 }
 }
 
 
 #topo svg .link.inactive {
 #topo svg .link.inactive {
@@ -210,15 +209,17 @@ svg .node.host circle {
     text-align: center;
     text-align: center;
 
 
     /* theme specific... */
     /* theme specific... */
-    border: 1px solid #ddf;
-    color: #99f;
+    border: 2px solid #ddd;
+    border-radius: 4px;
+    color: #eee;
+    background: #888;
 }
 }
 
 
 #topo-detail .actionBtn:hover {
 #topo-detail .actionBtn:hover {
     /* theme specific... */
     /* theme specific... */
-    border: 1px solid #ddf;
-    background: #eef;
-    color: #77d;
+    border: 2px solid #ddd;
+    color: #eee;
+    background: #444;
 }
 }
 
 
 
 

@@ -741,21 +741,15 @@
 
 
     function showTraffic(data) {
     function showTraffic(data) {
         evTrace(data);
         evTrace(data);
-        var paths = data.payload.paths;
+        var paths = data.payload.paths,
+            hasTraffic = false;
 
 
         // Revert any links hilighted previously.
         // Revert any links hilighted previously.
-        link.attr('stroke-width', null)
-            .style('stroke-width', null)
+        link.style('stroke-width', null)
             .classed('primary secondary animated optical', false);
             .classed('primary secondary animated optical', false);
         // Remove all previous labels.
         // Remove all previous labels.
         removeLinkLabels();
         removeLinkLabels();
 
 
-        if (paths.length && !antTimer) {
-            startAntTimer();
-        } else if (!paths.length && antTimer) {
-            stopAntTimer();
-        }
-
         // Now hilight all links in the paths payload, and attach
         // Now hilight all links in the paths payload, and attach
         //  labels to them, if they are defined.
         //  labels to them, if they are defined.
         paths.forEach(function (p) {
         paths.forEach(function (p) {
@@ -763,15 +757,23 @@
                 i,
                 i,
                 ldata;
                 ldata;
 
 
+            hasTraffic = hasTraffic || p.traffic;
             for (i=0; i<n; i++) {
             for (i=0; i<n; i++) {
                 ldata = findLinkById(p.links[i]);
                 ldata = findLinkById(p.links[i]);
-                if (ldata) {
+                if (ldata && ldata.el) {
                     ldata.el.classed(p.class, true);
                     ldata.el.classed(p.class, true);
                     ldata.label = p.labels[i];
                     ldata.label = p.labels[i];
                 }
                 }
             }
             }
         });
         });
+
         updateLinks();
         updateLinks();
+
+        if (hasTraffic && !antTimer) {
+            startAntTimer();
+        } else if (!hasTraffic && antTimer) {
+            stopAntTimer();
+        }
     }
     }
 
 
     // ...............................
     // ...............................
@@ -1736,14 +1738,17 @@
 
 
         linkLabel.each(function (d) {
         linkLabel.each(function (d) {
             var el = d3.select(this);
             var el = d3.select(this);
-            var lnk = findLinkById(d.key),
-                parms = {
+            var lnk = findLinkById(d.key);
+
+            if (lnk) {
+                var parms = {
                     x1: lnk.source.x,
                     x1: lnk.source.x,
                     y1: lnk.source.y,
                     y1: lnk.source.y,
                     x2: lnk.target.x,
                     x2: lnk.target.x,
                     y2: lnk.target.y
                     y2: lnk.target.y
                 };
                 };
-            el.attr('transform', transformLabel(parms));
+                el.attr('transform', transformLabel(parms));
+            }
         });
         });
     }
     }
 
 
@@ -1973,7 +1978,7 @@
             table = detailPane.append("table"),
             table = detailPane.append("table"),
             tbody = table.append("tbody");
             tbody = table.append("tbody");
 
 
-        title.text('Multi-Select...');
+        title.text('Selected Nodes');
 
 
         selectOrder.forEach(function (d, i) {
         selectOrder.forEach(function (d, i) {
             addProp(tbody, i+1, d);
             addProp(tbody, i+1, d);
@@ -2000,22 +2005,26 @@
             }
             }
         });
         });
 
 
-        addSingleSelectActions();
+        addSingleSelectActions(data);
     }
     }
 
 
-    function addSingleSelectActions() {
+    function addSingleSelectActions(data) {
         detailPane.append('hr');
         detailPane.append('hr');
         // always want to allow 'show traffic'
         // always want to allow 'show traffic'
-        addAction(detailPane, 'Show Traffic', showTrafficAction);
+        addAction(detailPane, 'Show Related Traffic', showTrafficAction);
+
+        if (data.type === 'switch') {
+            addAction(detailPane, 'Show Device Flows', showDeviceLinkFlowsAction);
+        }
     }
     }
 
 
     function addMultiSelectActions() {
     function addMultiSelectActions() {
         detailPane.append('hr');
         detailPane.append('hr');
         // always want to allow 'show traffic'
         // always want to allow 'show traffic'
-        addAction(detailPane, 'Show Traffic', showTrafficAction);
+        addAction(detailPane, 'Show Related Traffic', showTrafficAction);
         // if exactly two hosts are selected, also want 'add host intent'
         // if exactly two hosts are selected, also want 'add host intent'
         if (nSel() === 2 && allSelectionsClass('host')) {
         if (nSel() === 2 && allSelectionsClass('host')) {
-            addAction(detailPane, 'Add Host Intent', addIntentAction);
+            addAction(detailPane, 'Add Host-to-Host Intent', addIntentAction);
         }
         }
     }
     }
 
 
@@ -2306,13 +2315,15 @@
     }
     }
 
 
     function startAntTimer() {
     function startAntTimer() {
-        var pulses = [ 5, 3, 1.2, 3 ],
-            pulse  = 0;
-        antTimer = setInterval(function () {
-            pulse = pulse + 1;
-            pulse = pulse === pulses.length ? 0 : pulse;
-            d3.selectAll('.animated').style('stroke-width', pulses[pulse]);
-        }, 200);
+        if (!antTimer) {
+            var pulses = [5, 3, 1.2, 3],
+                pulse = 0;
+            antTimer = setInterval(function () {
+                pulse = pulse + 1;
+                pulse = pulse === pulses.length ? 0 : pulse;
+                d3.selectAll('.animated').style('stroke-width', pulses[pulse]);
+            }, 200);
+        }
     }
     }
 
 
     function stopAntTimer() {
     function stopAntTimer() {