GUI -- Detail pane now uses Glyphs for selected item (no longer png)
- deadwood removal.
Change-Id: I804a0334b48f2e261fa108e43d23d3257d8a143d
diff --git a/web/gui/src/main/webapp/floatPanel.css b/web/gui/src/main/webapp/floatPanel.css
index 1c5a815..bacf29e 100644
--- a/web/gui/src/main/webapp/floatPanel.css
+++ b/web/gui/src/main/webapp/floatPanel.css
@@ -33,6 +33,9 @@
padding: 10px;
color: black;
font-size: 10pt;
+
+ -moz-border-radius: 6px;
+ border-radius: 6px;
box-shadow: 2px 2px 16px #777;
}
diff --git a/web/gui/src/main/webapp/topo2.css b/web/gui/src/main/webapp/topo2.css
index c2deffc..a75b1ab 100644
--- a/web/gui/src/main/webapp/topo2.css
+++ b/web/gui/src/main/webapp/topo2.css
@@ -174,16 +174,26 @@
/* gets base CSS from .fpanel in floatPanel.css */
}
-#topo-detail h2 {
- margin: 8px 4px;
- color: black;
- vertical-align: middle;
+#topo-detail svg {
+ display: inline-block;
+ width: 42px;
+ height: 42px;
}
-#topo-detail h2 img {
- height: 32px;
- padding-right: 8px;
- vertical-align: middle;
+#topo-detail svg .glyphIcon {
+ fill: black;
+ stroke: none;
+ fill-rule: evenodd;
+}
+
+#topo-detail h2 {
+ position: absolute;
+ /*display: inline-block;*/
+ /*vertical-align: bottom;*/
+ margin: 0px 4px;
+ top: 20px;
+ left: 50px;
+ color: black;
}
#topo-detail p, table {
@@ -284,10 +294,6 @@
fill-rule: evenodd;
}
-/*#topo-oibox .onosInst img {*/
- /*opacity: 0.5;*/
- /*padding: 3px;*/
-/*}*/
#topo-oibox .onosInst.online img {
opacity: 1.0;
@@ -316,7 +322,7 @@
opacity: 0.2;
}
-/* Web Socket Closed Mask (starts hidden) */
+/* Death Mask (starts hidden) */
#topo-mask {
display: none;
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index c273f81..58c1167 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -18,6 +18,7 @@
ONOS network topology viewer - version 1.1
@author Simon Hunt
+ @author Thomas Vachuska
*/
(function (onos) {
@@ -25,8 +26,7 @@
// shorter names for library APIs
var d3u = onos.lib.d3util,
- gly = onos.lib.glyphs,
- trace;
+ gly = onos.lib.glyphs;
// configuration data
var config = {
@@ -887,9 +887,22 @@
});
}
+ // TODO: these should be moved out to utility module.
function stripPx(s) {
return s.replace(/px$/,'');
}
+
+ function appendGlyph(svg, ox, oy, dim, iid) {
+ svg.append('use').attr({
+ class: 'glyphIcon',
+ transform: translate(ox,oy),
+ 'xlink:href': iid,
+ width: dim,
+ height: dim
+
+ });
+ }
+
// ==============================
// onos instance panel functions
@@ -918,25 +931,13 @@
height: h
});
var dim = 30;
- svg.append('use').attr({
- class: 'glyphIcon',
- transform: translate(2,2),
- 'xlink:href': '#node',
- width: dim,
- height: dim
-
- });
-
- //$('<img src="img/node.png">').appendTo(el);
- //img = el.select('img')
- // .attr({
- // width: 30
- // });
+ appendGlyph(svg, 2, 2, 30, '#node');
$('<div>').attr('class', 'onosTitle').text(d.id).appendTo(el);
// is the UI attached to this instance?
// TODO: need uiAttached boolean in instance data
+ // TODO: use SVG glyph, not png..
//if (d.uiAttached) {
if (i === 0) {
$('<img src="img/ui.png">').attr('class','ui').appendTo(el);
@@ -1043,8 +1044,7 @@
}
function createLink(link) {
- var lnk = linkEndPoints(link.src, link.dst),
- type = link.type;
+ var lnk = linkEndPoints(link.src, link.dst);
if (!lnk) {
return null;
@@ -1223,18 +1223,7 @@
dy = p.y2 - p.y1,
xMid = dx/2 + p.x1,
yMid = dy/2 + p.y1;
- //length = Math.sqrt(dx*dx + dy*dy),
- //rads = Math.asin(dy/length),
- //degs = rads / (Math.PI*2) * 360;
-
return translate(xMid, yMid);
-
- // TODO: consider making label parallel to line
- //return [
- // translate(xMid, yMid),
- // rotate(degs),
- // translate(0, 8)
- //].join('');
}
function createDeviceNode(device) {
@@ -1437,19 +1426,13 @@
host.select('text').text(label);
}
+ // TODO: should be using updateNodes() to do the upates!
function updateDeviceState(nodeData) {
nodeData.el.classed('online', nodeData.online);
updateDeviceLabel(nodeData);
// TODO: review what else might need to be updated
}
- function updateLinkState(linkData) {
- updateLinkWidth(linkData);
- linkData.el.classed('inactive', !linkData.online);
- // TODO: review what else might need to be updated
- // update label, if showing
- }
-
function updateHostState(hostData) {
updateHostLabel(hostData);
// TODO: review what else might need to be updated
@@ -1569,7 +1552,6 @@
addHostIcon(node, r, iid);
}
-
node.append('text')
.text(hostLabel)
.attr('dy', textDy)
@@ -1659,34 +1641,8 @@
height: cfg.dim
});
-/*
- if (icon) {
- node.append('rect')
- .attr({
- class: 'iconUnderlay',
- x: box.x + config.icons.xoff,
- y: box.y + config.icons.yoff,
- width: cfg.w,
- height: cfg.h,
- rx: 4
- }).style({
- stroke: '#000',
- fill: '#ddd'
- });
- node.append('svg:image')
- .attr({
- x: box.x + config.icons.xoff + 2,
- y: box.y + config.icons.yoff + 2,
- width: cfg.w - 4,
- height: cfg.h - 4,
- 'xlink:href': icon
- });
- }
-*/
}
-
-
function find(key, array) {
for (var idx = 0, n = array.length; idx < n; idx++) {
if (array[idx].key === key) {
@@ -1990,12 +1946,15 @@
function populateDetails(data) {
detailPane.empty();
+ var svg = detailPane.append('svg'),
+ iid = iconGlyphUrl(data);
+
var title = detailPane.append("h2"),
table = detailPane.append("table"),
tbody = table.append("tbody");
- $('<img src="img/' + data.type + '.png">').appendTo(title);
- $('<span>').attr('class', 'icon').text(data.id).appendTo(title);
+ appendGlyph(svg, 0, 0, 40, iid);
+ title.text(data.id);
data.propOrder.forEach(function(p) {
if (p === '-') {
@@ -2120,8 +2079,6 @@
}
showInstances = mkTogBtn('Show Instances', toggleInst);
- //doPanZoom = mkTogBtn('Pan/Zoom', togglePanZoom);
- //showTrafficOnHover = mkTogBtn('Show traffic on hover', toggleTrafficHover);
}
function instShown() {
@@ -2138,10 +2095,6 @@
function panZoom() {
return false;
- //return doPanZoom.classed('active');
- }
- function togglePanZoom() {
- doPanZoom.classed('active', !panZoom());
}
function trafficHover() {
@@ -2152,10 +2105,6 @@
return hoverModes[hoverMode] === 'flows';
}
- function toggleTrafficHover() {
- showTrafficOnHover.classed('active', !trafficHover());
- }
-
function loadGlyphs(svg) {
var defs = svg.append('defs');
gly.defBird(defs);
@@ -2305,13 +2254,6 @@
// Load map data asynchronously; complete startup after that..
loadGeoJsonData();
-
- //var dashIdx = 0;
- //antTimer = setInterval(function () {
- // // TODO: figure out how to choose Src-->Dst and Dst-->Src, per link
- // dashIdx = dashIdx === 0 ? 14 : dashIdx - 2;
- // d3.selectAll('.animated').style('stroke-dashoffset', dashIdx);
- //}, 35);
}
function startAntTimer() {
@@ -2338,7 +2280,7 @@
}
// TODO: move these to config/state portion of script
- var geoJsonUrl = 'json/map/continental_us.json', // TODO: Paul
+ var geoJsonUrl = 'json/map/continental_us.json',
geoJson;
function loadGeoJsonData() {