홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Thomas Vachuska
Committed by Gerrit Code Review
8954329a 1 parent 4e729aff

Reverting the theme to light for the demo and switching icons set. 

Change-Id: Ic3f7b46ce56100aabc1b7df3370218cbfd94db0c
Expand all
Inline Side-by-side
Showing 15 changed files with 165 additions and 217 deletions
{
"hosts" : [
{ "mac": "00:00:00:00:00:01", "vlan": -1, "location": "of:0000000000000001/10", "ip": "0.0.0.0", "annotations": { "type": "bgpSpeaker" } },
{ "mac": "00:00:00:00:00:02", "vlan": -1, "location": "of:0000000000000002/10", "ip": "0.0.0.0", "annotations": { "type": "bgpSpeaker" } },
{ "mac": "00:00:00:00:00:03", "vlan": -1, "location": "of:0000000000000003/10", "ip": "0.0.0.0", "annotations": { "type": "bgpSpeaker" } },
{ "mac": "00:00:00:00:01:01", "vlan": -1, "location": "of:0000000000000005/10", "ip": "0.0.0.0", "annotations": { "type": "router" } },
{ "mac": "00:00:00:00:01:02", "vlan": -1, "location": "of:0000000000000006/10", "ip": "0.0.0.0", "annotations": { "type": "router" } },
{ "mac": "00:00:00:00:02:01", "vlan": -1, "location": "of:0000000000000007/10", "ip": "0.0.0.0", "annotations": { "type": "router" } },
{ "mac": "00:00:00:00:03:01", "vlan": -1, "location": "of:0000000000000008/10", "ip": "0.0.0.0", "annotations": { "type": "router" } },
{ "mac": "00:00:00:00:04:01", "vlan": -1, "location": "of:0000000000000009/10", "ip": "0.0.0.0", "annotations": { "type": "router" } },
{ "mac": "00:00:00:00:44:01", "vlan": -1, "location": "of:0000000000000010/10", "ip": "0.0.0.0", "annotations": { "type": "router" } }
]
}
\ No newline at end of file
......@@ -63,6 +63,7 @@ import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
import static com.google.common.base.Preconditions.checkNotNull;
import static com.google.common.base.Strings.isNullOrEmpty;
import static org.onlab.onos.cluster.ClusterEvent.Type.INSTANCE_ADDED;
import static org.onlab.onos.cluster.ClusterEvent.Type.INSTANCE_REMOVED;
import static org.onlab.onos.cluster.ControllerNode.State.ACTIVE;
......@@ -253,8 +254,10 @@ public abstract class TopologyViewMessages {
// Produces a host event message to the client.
protected ObjectNode hostMessage(HostEvent event) {
Host host = event.subject();
String hostType = host.annotations().value("type");
ObjectNode payload = mapper.createObjectNode()
.put("id", host.id().toString())
.put("type", isNullOrEmpty(hostType) ? "host" : hostType)
.put("ingress", compactLinkString(edgeLink(host, true)))
.put("egress", compactLinkString(edgeLink(host, false)));
payload.set("cp", hostConnect(mapper, host.location()));
......@@ -358,8 +361,10 @@ public abstract class TopologyViewMessages {
protected ObjectNode hostDetails(HostId hostId, long sid) {
Host host = hostService.getHost(hostId);
Annotations annot = host.annotations();
String type = annot.value("type");
return envelope("showDetails", sid,
json(hostId.toString(), "host",
json(hostId.toString(), isNullOrEmpty(type) ? "host" : type,
new Prop("Name", annot.value("name")),
new Prop("MAC", host.mac().toString()),
new Prop("IP", host.ipAddresses().toString()),
new Separator(),
......
This diff is collapsed. Click to expand it.

9.83 KB | W: | H:

800 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

8.83 KB | W: | H:

991 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

9.27 KB | W: | H:

848 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -40,14 +40,12 @@
<!-- Base library and framework stylesheets included here -->
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="onos2.css">
<link rel="stylesheet" href="onos_theme.css">
<link rel="stylesheet" href="mast2.css">
<link rel="stylesheet" href="floatPanel.css">
<!-- This is where contributed stylesheets get INJECTED -->
<!-- TODO: replace with template marker and inject refs server-side -->
<link rel="stylesheet" href="topo2.css">
<link rel="stylesheet" href="topo_theme.css">
<link rel="stylesheet" href="webSockTrace.css">
......@@ -58,7 +56,7 @@
<script src="onos2.js"></script>
</head>
<body class='theme_dark'>
<body>
<div id="frame">
<div id="mast">
<!-- NOTE: masthead injected here by mast.js -->
......
......@@ -25,11 +25,14 @@
}
#topo #map {
stroke-width: 2px;
stroke: #aaaaaa;
fill: transparent;
}
#topo svg .glyph {
fill: white;
stroke: none;
}
......@@ -65,20 +68,39 @@
#topo svg .node.device.fixed rect {
stroke-width: 1.5;
stroke: #ccc;
}
/* note: device is offline without the 'online' class */
#topo svg .node.device {
fill: #777;
}
#topo .node text {
font-weight: 100;
#topo svg .node.device.switch.online {
fill: #17f;
}
#topo svg .node.device.roadm.online {
fill: #03c;
}
/* note: device is offline without the 'online' class */
/* note: device is offline without the 'online' class */
#topo svg .node.device text {
fill: #aaa;
font: 10pt sans-serif;
}
#topo svg .node.device.online text {
fill: white;
}
/* Host Nodes */
#topo svg .node.host {
stroke: #000;
}
#topo svg .node.host text {
fill: #846;
stroke: none;
......@@ -86,11 +108,18 @@
}
svg .node.host circle {
fill: #c96;
stroke: #000;
fill: #ddd;
}
#topo svg .node.host.bgpSpeaker circle {
fill: #853;
stroke: #000;
fill: #ddd;
}
#topo svg .node.host.router circle {
stroke: #000;
fill: #ddd;
}
/* LINKS */
......@@ -105,23 +134,29 @@ svg .node.host circle {
}
#topo svg .link.primary {
stroke: #f11;
stroke-width: 6px;
}
#topo svg .link.secondary {
stroke: rgba(255,100,100,0.5);
stroke-width: 4px;
}
#topo svg .link.animated {
stroke: #f11;
stroke-width: 10px;
stroke-dasharray: 8 8
}
#topo svg .link.primary.optical {
stroke: #74f;
stroke-width: 6px;
}
#topo svg .link.secondary.optical {
stroke: rgba(128,64,255,0.5);
stroke-width: 4px;
}
#topo svg .link.animated.optical {
stroke: #74f;
stroke-width: 10px;
stroke-dasharray: 8 8
}
......@@ -177,13 +212,17 @@ svg .node.host circle {
cursor: pointer;
width: 50%;
text-align: center;
border-width: 1px;
borer-style: solid;
/* theme specific... */
border: 1px solid #ddf;
color: #99f;
}
#topo-detail .actionBtn:hover {
border-width: 1px;
border-style: solid;
/* theme specific... */
border: 1px solid #ddf;
background: #eef;
color: #77d;
}
......@@ -207,14 +246,29 @@ svg .node.host circle {
height: 80px;
margin: 4px 0;
cursor: pointer;
border-width: 2px;
border-style: solid;
/* theme-related */
color: #444;
background-color: #ccc;
border: 2px solid #aaa;
}
#topo-oibox .onosInst.online {
/* theme-related */
color: #113;
background-color: #bbf;
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 {
......
......@@ -70,17 +70,23 @@
}
},
topo: {
linkBaseColor: '#666',
linkInColor: '#66f',
linkOutColor: '#f00',
linkInWidth: 14,
linkOutColor: '#f00',
linkOutWidth: 30
},
map: {
strokeWidth: 1
},
icons: {
w: 100,
h: 100
w: 24,
h: 24,
xoff: -10,
yoff: -6
},
iconUrl: {
device: 'img/device.png',
host: 'img/host.png',
pkt: 'img/pkt.png',
opt: 'img/opt.png'
},
force: {
note_for_links: 'link.type is used to differentiate',
......@@ -330,6 +336,7 @@
var layerLookup = {
host: {
endstation: 'pkt', // default, if host event does not define type
router: 'pkt',
bgpSpeaker: 'pkt'
},
device: {
......@@ -526,7 +533,8 @@
}
el.transition()
.duration(1000)
.attr('stroke-width', linkScale(lw));
.attr('stroke-width', linkScale(lw))
.attr('stroke', config.topo.linkBaseColor);
}
// ==============================
......@@ -1227,8 +1235,8 @@
$.extend(node, xy);
}
function getIconUrl(d) {
return 'icons.svg#' + d.type;
function iconUrl(d) {
return 'img/' + d.type + '.png';
}
// returns the newly computed bounding box of the rectangle
......@@ -1270,29 +1278,6 @@
return (label && label.trim()) ? label : '.';
}
function updateDeviceIconAppearance(node, box, animate) {
var u = node.select('use');
var ubbox = u.node().getBBox();
var xoff = -ubbox.width/2 - box.width/2 - 4;
var yoff = -ubbox.height;
var iconTransform = 'translate(' + xoff + ',' + yoff + ')';
if (animate) {
node.select('use')
.transition()
.attr('transform', iconTransform);
} else {
node.select('use')
.attr('transform', iconTransform);
}
var computedStyle = window.getComputedStyle(node.node());
u.attr({
fill: computedStyle.fill,
color: computedStyle.color
});
}
function updateDeviceLabel(d) {
var label = niceLabel(deviceLabel(d)),
node = d.el,
......@@ -1310,7 +1295,10 @@
.transition()
.attr(box);
updateDeviceIconAppearance(node, box, true);
node.select('image')
.transition()
.attr('x', box.x + config.icons.xoff)
.attr('y', box.y + config.icons.yoff);
}
function updateHostLabel(d) {
......@@ -1352,6 +1340,17 @@
}
}
function addHostIcon(node, radius, iconId) {
var dim = radius * 1.5,
xlate = -dim / 2;
node.append('svg:image')
.attr('transform', translate(xlate,xlate))
.attr('xlink:href', 'img/' + iconId + '.png')
.attr('width', dim)
.attr('height', dim);
}
function updateNodes() {
node = nodeG.selectAll('.node')
.data(network.nodes, function (d) { return d.id; });
......@@ -1378,7 +1377,7 @@
// augment device nodes...
entering.filter('.device').each(function (d) {
var node = d3.select(this),
iconUrl = getIconUrl(d),
icon = iconUrl(d),
label = niceLabel(deviceLabel(d)),
box;
......@@ -1400,17 +1399,29 @@
node.select('rect')
.attr(box);
if (iconUrl) {
node.append('svg:use')
if (icon) {
var cfg = config.icons;
node.append('rect')
.attr({
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({
'xlink:href': iconUrl,
width: config.icons.w,
height: config.icons.h
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
});
}
updateDeviceIconAppearance(node, box, false);
// debug function to show the modelled x,y coordinates of nodes...
if (debug('showNodeXY')) {
node.select('rect').attr('fill-opacity', 0.5);
......@@ -1424,43 +1435,41 @@
}
});
// TODO: better place for this configuration state
var defaultHostRadius = 9,
hostRadius = {
bgpSpeaker: 14,
router: 14,
host: 14
},
hostIcon = {
bgpSpeaker: 'bgpSpeaker',
router: 'router',
host: 'host'
};
// augment host nodes...
entering.filter('.host').each(function (d) {
var node = d3.select(this),
iconUrl = getIconUrl(d);
r = hostRadius[d.type] || defaultHostRadius,
textDy = r + 10,
icon = hostIcon[d.type];
// provide ref to element from backing data....
d.el = node;
// var box = node.append('circle')
// .attr('r', r).node().getBBox();
var textYOff = 0;
var textXOff = 0;
if (iconUrl) {
var computedStyle = window.getComputedStyle(node.node());
var u = node.append('svg:use')
.attr({
'xlink:href': iconUrl,
width: config.icons.w,
height: config.icons.h,
fill: computedStyle.fill,
color: computedStyle.color
});
node.append('circle')
.attr('r', r);
var ubbox = node.select('use').node().getBBox();
u.attr('y', -ubbox.height/2);
textYOff = ubbox.height/2 + 4; // pad by 4 pixels
textXOff = ubbox.width/2;
if (icon) {
addHostIcon(node, r, icon);
}
node.append('text')
.text(hostLabel)
.attr('alignment-baseline', 'text-before-edge')
.attr('x', textXOff)
.attr('y', textYOff)
.attr('dy', textDy)
.attr('text-anchor', 'middle');
// debug function to show the modelled x,y coordinates of nodes...
......@@ -1499,9 +1508,9 @@
.style('opacity', 0);
// note, leave <g>.remove to remove this element
node.select('use')
.style('color', '#aaa')
.style('fill', '#000')
node.select('circle')
.style('stroke-fill', '#555')
.style('fill', '#888')
.style('opacity', 0.5)
.transition()
.duration(1500)
......@@ -1858,7 +1867,7 @@
function zoomPan(scale, translate) {
zoomPanContainer.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
// keep the map lines constant width while zooming
bgImg.attr("stroke-width", config.map.strokeWidth / scale + "px");
bgImg.style("stroke-width", 2.0 / scale + "px");
}
function resetZoomPan() {
......@@ -1977,27 +1986,6 @@
gly.defBullhorn(defs);
}
// create references to bring these into cache so that getBBox() works when they
// are inserted later
function preloadIcons(svg) {
var icons = [
"router",
"switch",
"roadm",
"endstation",
"bgpSpeaker"
];
var g = svg.append('g');
for (var icon in icons) {
g.append('use')
.attr({
'xlink:href': 'icons.svg#' + icon
});
}
g.style('visibility', 'hidden');
}
// ==============================
// View life-cycle callbacks
......@@ -2014,7 +2002,6 @@
setSize(svg, view);
loadGlyphs(svg);
preloadIcons(svg);
zoomPanContainer = svg.append('g').attr('id', 'zoomPanContainer');
setupZoomPan();
......@@ -2111,7 +2098,7 @@
width: config.birdDim,
height: config.birdDim,
fill: '#111'
});
})
}
function para(sel, text) {
......@@ -2226,9 +2213,7 @@
.translate(t);
bgImg = zoomPanContainer.insert("g", '#topo-G');
// pointer-events: none so that browser select tools don't pick up the map svg
bgImg.attr('id', 'map').attr('stroke-width', config.map.strokeWidth + 'px').style('pointer-events', 'none')
.selectAll('path')
bgImg.attr('id', 'map').selectAll('path')
.data(topoData.features)
.enter()
.append('path')
......
.theme_dark #topo {
background-color: #20201D;
}
.theme_dark #topo #map {
stroke: #444;
}
/* note: device is offline without the 'online' class */
.theme_dark #topo svg .node.device {
fill: #777;
}
.theme_dark #topo .host {
fill: #000;
color: white;
}
.theme_dark #topo svg .node.device.switch.online {
fill: #000;
}
.theme_dark #topo svg .node.device.roadm.online {
fill: #03c;
}
/* note: device is offline without the 'online' class */
.theme_dark #topo svg .node.device text {
fill: #aaa;
}
.theme_dark #topo svg .node.device.online {
color: white;
}
.theme_dark #topo svg .node.device.online text {
fill: currentColor;
}
.theme_dark #topo svg .glyph {
fill: white;
}
.theme_dark #topo-oibox .onosInst {
color: #444;
background-color: #ccc;
border-color: #aaa;
}
.theme_dark #topo-oibox .onosInst.online {
color: #113;
background-color: #bbf;
border-color: #555;
}
.theme_dark #topo-oibox .onosInst .onosTitle {
color: #888;
}
.theme_dark #topo svg .node.device.fixed.online rect {
stroke: #666;
}
.theme_dark #topo svg .node.host {
stroke: #000;
}
.theme_dark #topo-detail .actionBtn {
border-color: #ddf;
color: #99f;
}
.theme_dark #topo-detail .actionBtn:hover {
border-color: #ddf;
background: #eef;
color: #77d;
}
.theme_dark #topo svg .link.primary {
stroke: #f11;
}
.theme_dark #topo svg .link.secondary {
stroke: rgba(255,100,100,0.5);
}
.theme_dark #topo svg .link.animated {
stroke: #f11;
}
.theme_dark #topo svg .link.primary.optical {
stroke: #74f;
}
.theme_dark #topo svg .link.secondary.optical {
stroke: rgba(128,64,255,0.5);
}
.theme_dark #topo svg .link.animated.optical {
stroke: #74f;
}
/*.theme_dark #topo .link {
stroke: #666;
}
*/