홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
44c440f8 1 parent 85e595e0

ONOS-4359: continued work on theming UI 

- topo view: fixed device/host badge rendering
- added "mojoColor" mock server scenario

Change-Id: I5d2da657580503abd8015875d45d2e715d44033a
Inline Side-by-side
Showing 41 changed files with 630 additions and 54 deletions
......@@ -144,31 +144,7 @@
function loadEmbeddedIcon(div, iconCls, size) {
loadIconByClass(div, iconCls, size, true);
}
// configuration for device and host icons in the topology view
var config = {
device: {
dim: 36
},
host: {
badge: {
dx: 14,
dy: -14
},
radius: {
noGlyph: 9,
withGlyph: 14
},
glyphed: {
endstation: 1,
bgpSpeaker: 1,
router: 1
}
}
};
// Adds a device glyph to the specified element.
// Returns the D3 selection of the glyph (use) element.
function addDeviceIcon(elem, glyphId, iconDim) {
......@@ -254,7 +230,6 @@
loadEmbeddedIcon: loadEmbeddedIcon,
addDeviceIcon: addDeviceIcon,
addHostIcon: addHostIcon,
iconConfig: function () { return config; },
sortIcons: sortIcons,
registerIconMapping: registerIconMapping
};
......
......@@ -226,7 +226,7 @@
stroke: #a3a596;
fill: #e0dfd6;
}
#ov-topo svg .node.host.selected circle {
#ov-topo svg .node.host.selected .hostIcon > circle {
stroke-width: 2.0;
stroke: #009fdb;
}
......
......@@ -39,24 +39,23 @@
*/
// configuration
var devIconDim = 36;
var labelPad = 4;
var badgeConfig = {
var devIconDim = 36,
labelPad = 4,
hostRadius = 14,
badgeConfig = {
radius: 12,
yoff: 5,
gdelta: 10
},
halfDevIcon = devIconDim / 2,
devBadgeOff = { dx: -halfDevIcon, dy: -halfDevIcon },
hostBadgeOff = { dx: -hostRadius, dy: -hostRadius },
status = {
i: 'badgeInfo',
w: 'badgeWarn',
e: 'badgeError'
};
// TODO: remove dependence on this
var icfg;
var status = {
i: 'badgeInfo',
w: 'badgeWarn',
e: 'badgeError'
};
// NOTE: this type of hack should go away once we have implemented
// the server-side UiModel code.
// {virtual -> cord} is for the E-CORD demo at ONS 2016
......@@ -76,7 +75,7 @@
var deviceLabelIndex = 0,
hostLabelIndex = 0;
// note: these are the device icon colors without affinity
// note: these are the device icon colors without affinity (no master)
var dColTheme = {
light: {
online: '#444444',
......@@ -160,9 +159,8 @@
.transition()
.attr(iconBox(devIconDim, labelWidth));
// TODO: verify badge placement
if (bdg) {
renderBadge(node, bdg, { dx: devIconDim, dy: 0 });
renderBadge(node, bdg, devBadgeOff);
}
}
......@@ -173,7 +171,7 @@
updateHostLabel(d);
if (bdg) {
renderBadge(node, bdg, icfg.host.badge);
renderBadge(node, bdg, hostBadgeOff);
}
}
......@@ -243,7 +241,6 @@
var node = d3.select(this),
glyphId = mapDeviceTypeToGlyph(d.type),
label = trimLabel(deviceLabel(d)),
xlate = -devIconDim/2,
rect, text, glyph, labelWidth;
d.el = node;
......@@ -253,7 +250,7 @@
text = node.append('text').text(label)
.attr('text-anchor', 'left')
.attr('y', '0.3em')
.attr('x', devIconDim / 2 + labelPad);
.attr('x', halfDevIcon + labelPad);
glyph = is.addDeviceIcon(node, glyphId, devIconDim);
......@@ -262,20 +259,18 @@
rect.attr(iconBox(devIconDim, labelWidth));
glyph.attr(iconBox(devIconDim, 0));
node.attr('transform', sus.translate(xlate, xlate));
node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
}
function hostEnter(d) {
var node = d3.select(this),
gid = d.type || 'unknown',
rad = icfg.host.radius,
r = d.type ? rad.withGlyph : rad.noGlyph,
textDy = r + 10;
textDy = hostRadius + 10;
d.el = node;
sus.visible(node, api.showHosts());
is.addHostIcon(node, r, gid);
is.addHostIcon(node, hostRadius, gid);
node.append('text')
.text(hostLabel)
......@@ -527,8 +522,6 @@
ps = _ps_;
ttbs = _ttbs_;
icfg = is.iconConfig();
function initD3(_api_) {
api = _api_;
}
......
......@@ -69,7 +69,7 @@
}
// else if we have [x,y] cached in meta data, use that...
if (x && y) {
if (x !== undefined && y !== undefined) {
node.fixed = true;
node.px = node.x = x;
node.py = node.y = y;
......
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000002",
"type": "switch",
"online": true,
"master": "onos-2",
"labels": [
"",
"sw-B",
"of:0000000000000002"
],
"metaUi": {
"x": 120,
"y": 350
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000102",
"type": "switch",
"online": false,
"master": "",
"labels": [
"",
"sw-B-0",
"of:0000000000000102"
],
"metaUi": {
"x": 120,
"y": 450
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000003",
"type": "switch",
"online": true,
"master": "onos-3",
"labels": [
"",
"sw-C",
"of:0000000000000003"
],
"metaUi": {
"x": 240,
"y": 300
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000103",
"type": "switch",
"online": false,
"master": "",
"labels": [
"",
"sw-C-0",
"of:0000000000000103"
],
"metaUi": {
"x": 240,
"y": 400
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000004",
"type": "switch",
"online": true,
"master": "onos-4",
"labels": [
"",
"sw-D",
"of:0000000000000004"
],
"metaUi": {
"x": 360,
"y": 350
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000104",
"type": "switch",
"online": false,
"master": "",
"labels": [
"",
"sw-D-0",
"of:0000000000000104"
],
"metaUi": {
"x": 360,
"y": 450
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000005",
"type": "switch",
"online": true,
"master": "onos-5",
"labels": [
"",
"sw-E",
"of:0000000000000005"
],
"metaUi": {
"x": 480,
"y": 300
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000105",
"type": "switch",
"online": false,
"master": "",
"labels": [
"",
"sw-E-0",
"of:0000000000000105"
],
"metaUi": {
"x": 480,
"y": 400
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000006",
"type": "switch",
"online": true,
"master": "onos-6",
"labels": [
"",
"sw-F",
"of:0000000000000006"
],
"metaUi": {
"x": 600,
"y": 350
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000106",
"type": "switch",
"online": false,
"master": "",
"labels": [
"",
"sw-F-0",
"of:0000000000000106"
],
"metaUi": {
"x": 600,
"y": 450
}
}
}
{
"event": "addInstance",
"payload": {
"id": "192.168.56.101",
"ip": "192.168.56.101",
"online": true,
"ready": true,
"uiAttached": true,
"switches": 4
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000007",
"type": "switch",
"online": true,
"master": "222.222.222.222",
"labels": [
"",
"sw-G",
"of:0000000000000007"
],
"metaUi": {
"x": 720,
"y": 300
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000107",
"type": "switch",
"online": false,
"master": "",
"labels": [
"",
"sw-G-0",
"of:0000000000000107"
],
"metaUi": {
"x": 720,
"y": 400
}
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000000000000001/2-of:0000000000000002/1",
"type": "direct",
"online": true,
"src": "of:0000000000000001",
"srcPort": "2",
"dst": "of:0000000000000002",
"dstPort": "1"
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000000000000002/1-of:0000000000000001/2",
"type": "direct",
"online": true,
"src": "of:0000000000000002",
"srcPort": "1",
"dst": "of:0000000000000001",
"dstPort": "2"
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000000000000002/3-of:0000000000000003/2",
"type": "direct",
"online": true,
"src": "of:0000000000000002",
"srcPort": "3",
"dst": "of:0000000000000003",
"dstPort": "2"
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000000000000003/2-of:0000000000000002/3",
"type": "direct",
"online": true,
"src": "of:0000000000000003",
"srcPort": "2",
"dst": "of:0000000000000002",
"dstPort": "3"
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000000000000003/4-of:0000000000000004/3",
"type": "direct",
"online": true,
"src": "of:0000000000000003",
"srcPort": "4",
"dst": "of:0000000000000004",
"dstPort": "3"
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000000000000004/3-of:0000000000000003/4",
"type": "direct",
"online": true,
"src": "of:0000000000000004",
"srcPort": "3",
"dst": "of:0000000000000003",
"dstPort": "4"
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000000000000004/5-of:0000000000000005/4",
"type": "direct",
"online": true,
"src": "of:0000000000000004",
"srcPort": "5",
"dst": "of:0000000000000005",
"dstPort": "4"
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000000000000005/4-of:0000000000000004/5",
"type": "direct",
"online": true,
"src": "of:0000000000000005",
"srcPort": "4",
"dst": "of:0000000000000004",
"dstPort": "5"
}
}
{
"event": "addInstance",
"payload": {
"id": "onos-2",
"ip": "192.168.56.102",
"online": true,
"ready": true,
"uiAttached": false,
"switches": 3
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000000000000005/6-of:0000000000000006/5",
"type": "direct",
"online": true,
"src": "of:0000000000000005",
"srcPort": "6",
"dst": "of:0000000000000006",
"dstPort": "5"
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000000000000006/5-of:0000000000000005/6",
"type": "direct",
"online": true,
"src": "of:0000000000000006",
"srcPort": "5",
"dst": "of:0000000000000005",
"dstPort": "6"
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000000000000006/7-of:0000000000000007/6",
"type": "direct",
"online": true,
"src": "of:0000000000000006",
"srcPort": "7",
"dst": "of:0000000000000007",
"dstPort": "6"
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000000000000007/6-of:0000000000000006/7",
"type": "direct",
"online": true,
"src": "of:0000000000000007",
"srcPort": "6",
"dst": "of:0000000000000006",
"dstPort": "7"
}
}
{
"event": "addHost",
"payload": {
"id": "0E:2A:69:30:13:01/-1",
"ingress": "0E:2A:69:30:13:01/-1/0-of:0000000000000001/95",
"egress": "of:0000000000000001/95-0E:2A:69:30:13:01/-1/0",
"cp": {
"device": "of:0000000000000001",
"port": 95
},
"labels": [
"192.168.0.1",
"0E:2A:69:30:13:01"
],
"metaUi": {
"x": -20,
"y": 230
},
"props": {}
}
}
{
"event": "addHost",
"payload": {
"id": "0E:2A:69:30:13:07/-1",
"ingress": "0E:2A:69:30:13:07/-1/0-of:0000000000000007/95",
"egress": "of:0000000000000001/95-0E:2A:69:30:13:07/-1/0",
"cp": {
"device": "of:0000000000000007",
"port": 95
},
"labels": [
"192.168.0.7",
"0E:2A:69:30:13:07"
],
"metaUi": {
"x": 740,
"y": 230
},
"props": {}
}
}
{
"event": "showHighlights",
"payload": {
"devices": [
{
"id": "of:0000000000000001",
"badge": {
"status": "i",
"gid": "xMark",
"msg": "x marks the spot"
}
},
{
"id": "of:0000000000000101",
"badge": {
"status": "w",
"gid": "crown",
"msg": "it's good to be the King"
}
},
{
"id": "of:0000000000000002",
"badge": {
"status": "e",
"gid": "chain",
"msg": "the weakest link"
}
},
{
"id": "of:0000000000000102",
"badge": {
"status": "i",
"txt": "1",
"msg": "singular sensation"
}
},
{
"id": "of:0000000000000003",
"badge": {
"status": "w",
"txt": "42",
"msg": "life, the universe, and everything!"
}
},
{
"id": "of:0000000000000103",
"badge": {
"status": "e",
"txt": "99",
"msg": "cadbury's flake"
}
}
],
"hosts": [
{
"id": "0E:2A:69:30:13:01/-1",
"badge": {
"status": "w",
"gid": "crown"
}
}
],
"links": [
{
"css": "primary",
"id": "of:0000000000000001/2-of:0000000000000002/1",
"label": "Foo!"
},
{
"css": "secondary",
"id": "of:0000000000000002/3-of:0000000000000003/2",
"label": "Bar!"
},
{
"css": "",
"id": "of:0000000000000003/4-of:0000000000000004/3",
"label": "Baz-a-ma-taz!!"
}
]
}
}
{
"event": "addInstance",
"payload": {
"id": "onos-3",
"ip": "192.168.56.103",
"online": true,
"ready": true,
"uiAttached": false,
"switches": 3
}
}
{
"event": "addInstance",
"payload": {
"id": "onos-4",
"ip": "192.168.56.104",
"online": true,
"ready": true,
"uiAttached": false,
"switches": 0
}
}
{
"event": "addInstance",
"payload": {
"id": "onos-5",
"ip": "192.168.56.105",
"online": true,
"ready": true,
"uiAttached": false,
"switches": 17
}
}
{
"event": "addInstance",
"payload": {
"id": "onos-6",
"ip": "192.168.224.126",
"online": true,
"ready": true,
"uiAttached": false,
"switches": 0
}
}
{
"event": "addInstance",
"payload": {
"id": "222.222.222.222",
"ip": "222.222.222.222",
"online": true,
"ready": true,
"uiAttached": false,
"switches": 6
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000001",
"type": "switch",
"online": true,
"master": "192.168.56.101",
"labels": [
"",
"sw-A",
"of:0000000000000001"
],
"metaUi": {
"x": 0,
"y": 300
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000000000000101",
"type": "switch",
"online": false,
"master": "",
"labels": [
"",
"sw-A-0",
"of:0000000000000101"
],
"metaUi": {
"x": 0,
"y": 400
}
}
}
{
"comments": [
"Show all possible Mojo Colors"
],
"title": "Color-Tweaking Scenario for Mojo Palette",
"params": {
"lastAuto": 35
},
"description": [
"Yee-haw! Colors galore!"
]
}