GUI -- store ref to node/link selection in backing data.

- tweaking force-layout parameters; now host-to-host intent path is highlighted.
- injectTestEvent() now uses recursion to look for appropriate json files.
- implemented updateHost() event.
- some refactoring cleanup in topo2.js

Change-Id: I888f05032d3c9df6470bd4d2f399f61efb9dbd46

@@ -7,7 +7,8 @@
     "labels": [
     "labels": [
       "0000ffffffff0008",
       "0000ffffffff0008",
       "FF:FF:FF:FF:00:08",
       "FF:FF:FF:FF:00:08",
-      "sw-8"
+      "sw-8",
+      ""
     ],
     ],
     "metaUi": {
     "metaUi": {
       "x": 400,
       "x": 400,

@@ -7,7 +7,8 @@
     "labels": [
     "labels": [
       "0000ffffffff0003",
       "0000ffffffff0003",
       "FF:FF:FF:FF:00:03",
       "FF:FF:FF:FF:00:03",
-      "sw-3"
+      "sw-3",
+      ""
     ],
     ],
     "metaUi": {
     "metaUi": {
       "x": 800,
       "x": 800,

 {
 {
   "event": "addLink",
   "event": "addLink",
   "payload": {
   "payload": {
+    "id": "of:0000ffffffff0003/21-of:0000ffffffff0008/20",
+    "type": "direct",
+    "linkWidth": 2,
     "src": "of:0000ffffffff0003",
     "src": "of:0000ffffffff0003",
     "srcPort": "21",
     "srcPort": "21",
     "dst": "of:0000ffffffff0008",
     "dst": "of:0000ffffffff0008",
     "dstPort": "20",
     "dstPort": "20",
-    "type": "infra",
-    "linkWidth": 2,
     "props" : {
     "props" : {
       "BW": "70 G"
       "BW": "70 G"
     }
     }

 {
 {
   "event": "addHost",
   "event": "addHost",
   "payload": {
   "payload": {
-    "id": "00:00:00:00:00:03/-1",
+    "id": "0E:2A:69:30:13:86/-1",
+    "ingress": "0E:2A:69:30:13:86/-1/0-of:0000ffffffff0003/2",
+    "egress": "of:0000ffffffff0003/2-0E:2A:69:30:13:86/-1/0",
     "cp": {
     "cp": {
       "device": "of:0000ffffffff0003",
       "device": "of:0000ffffffff0003",
-      "port": 1
+      "port": 2
     },
     },
     "labels": [
     "labels": [
-      "10.0.0.3",
-      "00:00:00:00:00:03"
+      "unknown",
+      "0E:2A:69:30:13:86"
     ],
     ],
-    "metaUi": {
-    }
+    "props": {}
   }
   }
 }
 }

 {
 {
   "event": "addHost",
   "event": "addHost",
   "payload": {
   "payload": {
-    "id": "00:00:00:00:00:08/-1",
+    "id": "A6:96:E5:03:52:5F/-1",
+    "ingress": "A6:96:E5:03:52:5F/-1/0-of:0000ffffffff0008/1",
+    "egress": "of:0000ffffffff0008/1-A6:96:E5:03:52:5F/-1/0",
     "cp": {
     "cp": {
       "device": "of:0000ffffffff0008",
       "device": "of:0000ffffffff0008",
       "port": 1
       "port": 1
     },
     },
     "labels": [
     "labels": [
-      "10.0.0.8",
-      "00:00:00:00:00:08"
+      "unknown",
+      "A6:96:E5:03:52:5F"
     ],
     ],
-    "metaUi": {
-    }
+    "props": {}
   }
   }
 }
 }

+{
+  "event": "updateHost",
+  "payload": {
+    "id": "0E:2A:69:30:13:86/-1",
+    "ingress": "0E:2A:69:30:13:86/-1/0-of:0000ffffffff0003/2",
+    "egress": "of:0000ffffffff0003/2-0E:2A:69:30:13:86/-1/0",
+    "cp": {
+      "device": "of:0000ffffffff0003",
+      "port": 2
+    },
+    "labels": [
+      "10.0.0.13",
+      "0E:2A:69:30:13:86"
+    ],
+    "props": {}
+  }
+}

+{
+  "event": "updateHost",
+  "payload": {
+    "id": "A6:96:E5:03:52:5F/-1",
+    "ingress": "A6:96:E5:03:52:5F/-1/0-of:0000ffffffff0008/1",
+    "egress": "of:0000ffffffff0008/1-A6:96:E5:03:52:5F/-1/0",
+    "cp": {
+      "device": "of:0000ffffffff0008",
+      "port": 1
+    },
+    "labels": [
+      "10.0.0.17",
+      "A6:96:E5:03:52:5F"
+    ],
+    "props": {}
+  }
+}

+{
+  "event": "doUiThing",
+  "payload": {
+    "id": "xyyzy"
+  }
+}

 {
 {
   "comments": [
   "comments": [
-    "Add two devices and one link (auto), and two hosts."
+    "Add two devices and one link (auto), and two hosts.",
+    "Then update the two hosts (with IP address labels)."
   ],
   ],
   "title": "Simple Startup Scenario",
   "title": "Simple Startup Scenario",
   "params": {
   "params": {

@@ -53,13 +53,18 @@
     fill: #846;
     fill: #846;
 }
 }
 
 
-#topo svg .node text {
-    stroke: none;
+#topo svg .node.device text {
     fill: white;
     fill: white;
     font: 10pt sans-serif;
     font: 10pt sans-serif;
     pointer-events: none;
     pointer-events: none;
 }
 }
 
 
+#topo svg .node.host text {
+    fill: #846;
+    font: 9pt sans-serif;
+    pointer-events: none;
+}
+
 #topo svg .node.selected rect,
 #topo svg .node.selected rect,
 #topo svg .node.selected circle {
 #topo svg .node.selected circle {
     filter: url(#blue-glow);
     filter: url(#blue-glow);
@@ -73,7 +78,7 @@
 
 
 #topo svg .link.showPath {
 #topo svg .link.showPath {
     stroke: #f00;
     stroke: #f00;
-    stroke-width: 4px;
+    stroke-width: 6px;
 }
 }
 
 
 /* for debugging */
 /* for debugging */