GUI -- Reduced size of onos-logo to be 41x38 pixels.

- cleaned up ONOS instances a little: added icon; centered text; UI-attached icon shown.

Change-Id: If6d1adf4866c33f1c40baf3e37bebbe4e705ea80

@@ -204,20 +204,19 @@
 }
 }
 
 
 #topo-oibox .onosInst {
 #topo-oibox .onosInst {
-    margin: 6px 0;
-    padding: 3px;
+    position: relative;
     width: 80%;
     width: 80%;
     left: 10%;
     left: 10%;
-    height: 40px;
+    height: 80px;
+    margin: 4px 0;
     cursor: pointer;
     cursor: pointer;
 
 
     /* theme-related */
     /* theme-related */
     color: #444;
     color: #444;
     background-color: #ccc;
     background-color: #ccc;
-    border: 2px dashed #aaa;
+    border: 2px solid #aaa;
 }
 }
 
 
-
 #topo-oibox .onosInst.online {
 #topo-oibox .onosInst.online {
     /* theme-related */
     /* theme-related */
     color: #113;
     color: #113;
@@ -225,6 +224,34 @@
     border: 2px solid #555;
     border: 2px solid #555;
 }
 }
 
 
+#topo-oibox .onosInst .onosTitle {
+    text-align: center;
+    font-size: 11pt;
+    margin-top: 6px;
+    color: #888;
+}
+
+#topo-oibox .onosInst.online .onosTitle {
+    color: black;
+}
+
+#topo-oibox .onosInst img {
+    opacity: 0.5;
+}
+
+#topo-oibox .onosInst.online img {
+    opacity: 1.0;
+}
+
+#topo-oibox .onosInst img.ui {
+    opacity: 1;
+    position: absolute;
+    top: 3px;
+    right: 3px;
+    width: 20px;
+    height: 20px;
+}
+
 #topo-oibox .onosInst.mastership {
 #topo-oibox .onosInst.mastership {
     opacity: 0.3;
     opacity: 0.3;
 }
 }

@@ -696,8 +696,31 @@
             .append('div')
             .append('div')
             .attr('class', 'onosInst')
             .attr('class', 'onosInst')
             .classed('online', function (d) { return d.online; })
             .classed('online', function (d) { return d.online; })
-            .on('click', clickInst)
-            .text(function (d) { return d.id; });
+            .on('click', clickInst);
+
+        entering.each(function (d, i) {
+            var el = d3.select(this),
+                img;
+
+            $('<img src="img/host.png">').appendTo(el);
+            img = el.select('img')
+                .attr({
+                    width: 40,
+                    top: -10,
+                    left: -10
+                })
+                .style({
+                });
+
+            $('<div>').attr('class', 'onosTitle').text(d.id).appendTo(el);
+
+            // is the UI attached to this instance?
+            // TODO: need uiAttached boolean in instance data
+            //if (d.uiAttached) {
+            if (i === 0) {
+                $('<img src="img/ui.png">').attr('class','ui').appendTo(el);
+            }
+        });
 
 
         // operate on existing + new onoses here
         // operate on existing + new onoses here