GUI -- [ONOS-324] - making hosts invisible by default.

 - press the 'H' key to toggle host visibility.
 - minor update to 'simple' scenario events.
 - cleanup of alert usage.

Change-Id: I531417720e6b98e795c53729b0c30775b88f8fc1

@@ -10,10 +10,13 @@
       "lng": -122.4167
       "lng": -122.4167
     },
     },
     "labels": [
     "labels": [
-      "0000ffffffff0008",
-      "FF:FF:FF:FF:00:08",
+      "",
       "sw-8",
       "sw-8",
-      ""
-    ]
+      "0000ffffffff0008"
+    ],
+    "metaUi": {
+      "x": 520,
+      "y": 350
+    }
   }
   }
 }
 }

@@ -4,16 +4,19 @@
     "id": "of:0000ffffffff0003",
     "id": "of:0000ffffffff0003",
     "type": "switch",
     "type": "switch",
     "online": false,
     "online": false,
-    "labels": [
-      "0000ffffffff0003",
-      "FF:FF:FF:FF:00:03",
-      "sw-3",
-      ""
-    ],
     "location": {
     "location": {
       "type": "latlng",
       "type": "latlng",
       "lat": 40.7127,
       "lat": 40.7127,
       "lng": -74.0059
       "lng": -74.0059
+    },
+    "labels": [
+      "",
+      "sw-3",
+      "0000ffffffff0003"
+    ],
+    "metaUi": {
+      "x": 800,
+      "y": 280
     }
     }
   }
   }
 }
 }

@@ -5,10 +5,9 @@
     "type": "switch",
     "type": "switch",
     "online": true,
     "online": true,
     "labels": [
     "labels": [
-      "0000ffffffff0008",
-      "FF:FF:FF:FF:00:08",
-      "sw-8-yo",
-      ""
+      "",
+      "switch-8",
+      "0000ffffffff0008"
     ],
     ],
     "metaUi": {
     "metaUi": {
       "x": 520,
       "x": 520,

@@ -5,10 +5,9 @@
     "type": "switch",
     "type": "switch",
     "online": true,
     "online": true,
     "labels": [
     "labels": [
-      "0000ffffffff0003",
-      "FF:FF:FF:FF:00:03",
-      "sw-3-yo",
-      ""
+      "",
+      "switch-3",
+      "0000ffffffff0003"
     ],
     ],
     "metaUi": {
     "metaUi": {
       "x": 800,
       "x": 800,

@@ -143,6 +143,7 @@
         O: [toggleSummary, 'Toggle ONOS summary pane'],
         O: [toggleSummary, 'Toggle ONOS summary pane'],
         I: [toggleInstances, 'Toggle ONOS instances pane'],
         I: [toggleInstances, 'Toggle ONOS instances pane'],
         B: [toggleBg, 'Toggle background image'],
         B: [toggleBg, 'Toggle background image'],
+        H: [toggleHosts, 'Toggle host visibility'],
         L: [cycleLabels, 'Cycle Device labels'],
         L: [cycleLabels, 'Cycle Device labels'],
         P: togglePorts,
         P: togglePorts,
         U: [unpin, 'Unpin node'],
         U: [unpin, 'Unpin node'],
@@ -170,8 +171,7 @@
             ctx: null,
             ctx: null,
             params: {},
             params: {},
             evNumber: 0,
             evNumber: 0,
-            view: null,
-            debug: false
+            view: null
         },
         },
         webSock,
         webSock,
         sid = 0,
         sid = 0,
@@ -191,8 +191,10 @@
         oiShowMaster = false,
         oiShowMaster = false,
         portLabelsOn = false,
         portLabelsOn = false,
         cat7 = d3u.cat7(),
         cat7 = d3u.cat7(),
-        colorAffinity = false;
+        colorAffinity = false,
+        showHosts = false;
 
 
+    // constants
     var hoverModeAll = 1,
     var hoverModeAll = 1,
         hoverModeFlows = 2,
         hoverModeFlows = 2,
         hoverModeIntents = 3,
         hoverModeIntents = 3,
@@ -247,22 +249,9 @@
         cat7.testCard(svg);
         cat7.testCard(svg);
     }
     }
 
 
-    function abortIfLive() {
-        if (config.useLiveData) {
-            network.view.alert("Sorry, currently using live data..");
-            return true;
-        }
-        return false;
-    }
-
-    function testDebug(msg) {
-        if (scenario.debug) {
-            scenario.view.alert(msg);
-        }
-    }
-
     function injectTestEvent(view) {
     function injectTestEvent(view) {
-        if (abortIfLive()) { return; }
+        if (config.useLiveData) { return; }
+
         var sc = scenario,
         var sc = scenario,
             evn = ++sc.evNumber,
             evn = ++sc.evNumber,
             pfx = sc.evDir + sc.ctx + sc.evPrefix + evn,
             pfx = sc.evDir + sc.ctx + sc.evPrefix + evn,
@@ -293,7 +282,6 @@
                     v.alert('non-404 error:\n\n' + frame.url + '\n\n' + err);
                     v.alert('non-404 error:\n\n' + frame.url + '\n\n' + err);
                 }
                 }
             } else {
             } else {
-                testDebug('loaded: ' + frame.url);
                 wsTrace('test', JSON.stringify(data));
                 wsTrace('test', JSON.stringify(data));
                 frame.cb(data);
                 frame.cb(data);
             }
             }
@@ -308,7 +296,7 @@
 
 
     function injectStartupEvents(view) {
     function injectStartupEvents(view) {
         var last = scenario.params.lastAuto || 0;
         var last = scenario.params.lastAuto || 0;
-        if (abortIfLive()) { return; }
+        if (config.useLiveData) { return; }
 
 
         while (scenario.evNumber < last) {
         while (scenario.evNumber < last) {
             injectTestEvent(view);
             injectTestEvent(view);
@@ -317,7 +305,13 @@
 
 
     function toggleBg() {
     function toggleBg() {
         var vis = bgImg.style('visibility');
         var vis = bgImg.style('visibility');
-        bgImg.style('visibility', (vis === 'hidden') ? 'visible' : 'hidden');
+        bgImg.style('visibility', visVal(vis === 'hidden'));
+    }
+
+    function toggleHosts() {
+        showHosts = !showHosts;
+        updateHostVisibility();
+        network.view.flash('Hosts ' + visVal(showHosts));
     }
     }
 
 
     function cycleLabels() {
     function cycleLabels() {
@@ -332,7 +326,7 @@
     }
     }
 
 
     function togglePorts(view) {
     function togglePorts(view) {
-        view.alert('togglePorts() callback')
+        //view.alert('togglePorts() callback')
     }
     }
 
 
     function unpin() {
     function unpin() {
@@ -568,7 +562,6 @@
 
 
     function logicError(msg) {
     function logicError(msg) {
         // TODO, report logic error to server, via websock, so it can be logged
         // TODO, report logic error to server, via websock, so it can be logged
-        //network.view.alert('Logic Error:\n\n' + msg);
         console.warn(msg);
         console.warn(msg);
     }
     }
 
 
@@ -822,7 +815,7 @@
     }
     }
 
 
     function unknownEvent(data) {
     function unknownEvent(data) {
-        network.view.alert('Unknown event type: "' + data.event + '"');
+        console.warn('Unknown event type: "' + data.event + '"', data);
     }
     }
 
 
     function handleServerEvent(data) {
     function handleServerEvent(data) {
@@ -833,12 +826,6 @@
     // ==============================
     // ==============================
     // Out-going messages...
     // Out-going messages...
 
 
-    function userFeedback(msg) {
-        // for now, use the alert pane as is. Maybe different alert style in
-        // the future (centered on view; dismiss button?)
-        network.view.alert(msg);
-    }
-
     function nSel() {
     function nSel() {
         return selectOrder.length;
         return selectOrder.length;
     }
     }
@@ -1221,6 +1208,10 @@
         appendBadge(svg, 12, instCfg.uiDy, 30, '#uiAttached', 'uiBadge');
         appendBadge(svg, 12, instCfg.uiDy, 30, '#uiAttached', 'uiBadge');
     }
     }
 
 
+    function visVal(b) {
+        return b ? 'visible' : 'hidden';
+    }
+
     // ==============================
     // ==============================
     // force layout modification functions
     // force layout modification functions
 
 
@@ -1319,6 +1310,10 @@
         });
         });
     }
     }
 
 
+    function showHostVis(el) {
+        el.style('visibility', visVal(showHosts));
+    }
+
     var widthRatio = 1.4,
     var widthRatio = 1.4,
         linkScale = d3.scale.linear()
         linkScale = d3.scale.linear()
             .domain([1, 12])
             .domain([1, 12])
@@ -1350,6 +1345,9 @@
             // provide ref to element selection from backing data....
             // provide ref to element selection from backing data....
             d.el = link;
             d.el = link;
             restyleLinkElement(d);
             restyleLinkElement(d);
+            if (d.type() === 'hostLink') {
+                showHostVis(link);
+            }
         });
         });
 
 
         // operate on both existing and new links, if necessary
         // operate on both existing and new links, if necessary
@@ -1663,6 +1661,12 @@
         updateHostLabel(hostData);
         updateHostLabel(hostData);
     }
     }
 
 
+    function updateHostVisibility() {
+        var v = visVal(showHosts);
+        nodeG.selectAll('.host').style('visibility', v);
+        linkG.selectAll('.hostLink').style('visibility', v);
+    }
+
     function nodeMouseOver(d) {
     function nodeMouseOver(d) {
         hovered = d;
         hovered = d;
         requestTrafficForMode();
         requestTrafficForMode();
@@ -1692,7 +1696,6 @@
 
 
         // operate on existing nodes...
         // operate on existing nodes...
         node.filter('.device').each(function (d) {
         node.filter('.device').each(function (d) {
-            //var node = d3.select(this);
             var node = d.el;
             var node = d.el;
             node.classed('online', d.online);
             node.classed('online', d.online);
             updateDeviceLabel(d);
             updateDeviceLabel(d);
@@ -1747,13 +1750,12 @@
 
 
             // provide ref to element from backing data....
             // provide ref to element from backing data....
             d.el = node;
             d.el = node;
+            showHostVis(node);
 
 
             node.append('circle').attr('r', r);
             node.append('circle').attr('r', r);
-
             if (iid) {
             if (iid) {
                 addHostIcon(node, r, iid);
                 addHostIcon(node, r, iid);
             }
             }
-
             node.append('text')
             node.append('text')
                 .text(hostLabel)
                 .text(hostLabel)
                 .attr('dy', textDy)
                 .attr('dy', textDy)
@@ -2014,9 +2016,9 @@
             if (webSock.ws) {
             if (webSock.ws) {
                 webSock.ws.send(message);
                 webSock.ws.send(message);
             } else if (config.useLiveData) {
             } else if (config.useLiveData) {
-                network.view.alert('no web socket open\n\n' + message);
+                console.warn('no web socket open', message);
             } else {
             } else {
-                console.log('WS Send: ' + JSON.stringify(message));
+                console.log('WS Send: ', message);
             }
             }
         }
         }
 
 
@@ -2607,7 +2609,7 @@
     }
     }
 
 
     function showBg() {
     function showBg() {
-        return config.options.showBackground ? 'visible' : 'hidden';
+        return visVal(config.options.showBackground);
     }
     }
 
 
     function loadStaticMap() {
     function loadStaticMap() {