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
diff --git a/web/gui/src/main/webapp/img/onos-logo.png b/web/gui/src/main/webapp/img/onos-logo.png
index b8e0651..8688cd6 100644
--- a/web/gui/src/main/webapp/img/onos-logo.png
+++ b/web/gui/src/main/webapp/img/onos-logo.png
Binary files differ
diff --git a/web/gui/src/main/webapp/img/ui.png b/web/gui/src/main/webapp/img/ui.png
new file mode 100644
index 0000000..a3bab6a
--- /dev/null
+++ b/web/gui/src/main/webapp/img/ui.png
Binary files differ
diff --git a/web/gui/src/main/webapp/topo2.css b/web/gui/src/main/webapp/topo2.css
index 94e6477..438f265 100644
--- a/web/gui/src/main/webapp/topo2.css
+++ b/web/gui/src/main/webapp/topo2.css
@@ -204,20 +204,19 @@
}
#topo-oibox .onosInst {
- margin: 6px 0;
- padding: 3px;
+ position: relative;
width: 80%;
left: 10%;
- height: 40px;
+ height: 80px;
+ margin: 4px 0;
cursor: pointer;
/* theme-related */
color: #444;
background-color: #ccc;
- border: 2px dashed #aaa;
+ border: 2px solid #aaa;
}
-
#topo-oibox .onosInst.online {
/* theme-related */
color: #113;
@@ -225,6 +224,34 @@
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 {
opacity: 0.3;
}
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index 3a5bacc..f34f247 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -696,8 +696,31 @@
.append('div')
.attr('class', 'onosInst')
.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
