GUI Fixes.

Change-Id: I5b5de2b74b65f1af613e04e226ee633ee50f695d

@@ -164,6 +164,7 @@ 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) {
+        if (installables != null) {
             for (Intent installable : installables) {
             for (Intent installable : installables) {
                 if (installable instanceof PathIntent) {
                 if (installable instanceof PathIntent) {
                     PathIntent pathIntent = (PathIntent) installable;
                     PathIntent pathIntent = (PathIntent) installable;
@@ -177,6 +178,7 @@ public class TopologyViewIntentFilter {
                     }
                     }
                 }
                 }
             }
             }
+        }
         return false;
         return false;
     }
     }
 
 

@@ -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,7 +2315,8 @@
     }
     }
 
 
     function startAntTimer() {
     function startAntTimer() {
-        var pulses = [ 5, 3, 1.2, 3 ],
+        if (!antTimer) {
+            var pulses = [5, 3, 1.2, 3],
                 pulse = 0;
                 pulse = 0;
             antTimer = setInterval(function () {
             antTimer = setInterval(function () {
                 pulse = pulse + 1;
                 pulse = pulse + 1;
@@ -2314,6 +2324,7 @@
                 d3.selectAll('.animated').style('stroke-width', pulses[pulse]);
                 d3.selectAll('.animated').style('stroke-width', pulses[pulse]);
             }, 200);
             }, 200);
         }
         }
+    }
 
 
     function stopAntTimer() {
     function stopAntTimer() {
         if (antTimer) {
         if (antTimer) {