ONOS-4359: continued work on theming UI
- topo view: fixed device/host badge rendering - added "mojoColor" mock server scenario Change-Id: I5d2da657580503abd8015875d45d2e715d44033a
Showing
41 changed files
with
626 additions
and
50 deletions
| ... | @@ -145,30 +145,6 @@ | ... | @@ -145,30 +145,6 @@ |
| 145 | loadIconByClass(div, iconCls, size, true); | 145 | loadIconByClass(div, iconCls, size, true); |
| 146 | } | 146 | } |
| 147 | 147 | ||
| 148 | - | ||
| 149 | - // configuration for device and host icons in the topology view | ||
| 150 | - var config = { | ||
| 151 | - device: { | ||
| 152 | - dim: 36 | ||
| 153 | - }, | ||
| 154 | - host: { | ||
| 155 | - badge: { | ||
| 156 | - dx: 14, | ||
| 157 | - dy: -14 | ||
| 158 | - }, | ||
| 159 | - radius: { | ||
| 160 | - noGlyph: 9, | ||
| 161 | - withGlyph: 14 | ||
| 162 | - }, | ||
| 163 | - glyphed: { | ||
| 164 | - endstation: 1, | ||
| 165 | - bgpSpeaker: 1, | ||
| 166 | - router: 1 | ||
| 167 | - } | ||
| 168 | - } | ||
| 169 | - }; | ||
| 170 | - | ||
| 171 | - | ||
| 172 | // Adds a device glyph to the specified element. | 148 | // Adds a device glyph to the specified element. |
| 173 | // Returns the D3 selection of the glyph (use) element. | 149 | // Returns the D3 selection of the glyph (use) element. |
| 174 | function addDeviceIcon(elem, glyphId, iconDim) { | 150 | function addDeviceIcon(elem, glyphId, iconDim) { |
| ... | @@ -254,7 +230,6 @@ | ... | @@ -254,7 +230,6 @@ |
| 254 | loadEmbeddedIcon: loadEmbeddedIcon, | 230 | loadEmbeddedIcon: loadEmbeddedIcon, |
| 255 | addDeviceIcon: addDeviceIcon, | 231 | addDeviceIcon: addDeviceIcon, |
| 256 | addHostIcon: addHostIcon, | 232 | addHostIcon: addHostIcon, |
| 257 | - iconConfig: function () { return config; }, | ||
| 258 | sortIcons: sortIcons, | 233 | sortIcons: sortIcons, |
| 259 | registerIconMapping: registerIconMapping | 234 | registerIconMapping: registerIconMapping |
| 260 | }; | 235 | }; | ... | ... |
| ... | @@ -226,7 +226,7 @@ | ... | @@ -226,7 +226,7 @@ |
| 226 | stroke: #a3a596; | 226 | stroke: #a3a596; |
| 227 | fill: #e0dfd6; | 227 | fill: #e0dfd6; |
| 228 | } | 228 | } |
| 229 | -#ov-topo svg .node.host.selected circle { | 229 | +#ov-topo svg .node.host.selected .hostIcon > circle { |
| 230 | stroke-width: 2.0; | 230 | stroke-width: 2.0; |
| 231 | stroke: #009fdb; | 231 | stroke: #009fdb; |
| 232 | } | 232 | } | ... | ... |
| ... | @@ -39,19 +39,18 @@ | ... | @@ -39,19 +39,18 @@ |
| 39 | */ | 39 | */ |
| 40 | 40 | ||
| 41 | // configuration | 41 | // configuration |
| 42 | - var devIconDim = 36; | 42 | + var devIconDim = 36, |
| 43 | - var labelPad = 4; | 43 | + labelPad = 4, |
| 44 | - | 44 | + hostRadius = 14, |
| 45 | - var badgeConfig = { | 45 | + badgeConfig = { |
| 46 | radius: 12, | 46 | radius: 12, |
| 47 | yoff: 5, | 47 | yoff: 5, |
| 48 | gdelta: 10 | 48 | gdelta: 10 |
| 49 | - }; | 49 | + }, |
| 50 | - | 50 | + halfDevIcon = devIconDim / 2, |
| 51 | - // TODO: remove dependence on this | 51 | + devBadgeOff = { dx: -halfDevIcon, dy: -halfDevIcon }, |
| 52 | - var icfg; | 52 | + hostBadgeOff = { dx: -hostRadius, dy: -hostRadius }, |
| 53 | - | 53 | + status = { |
| 54 | - var status = { | ||
| 55 | i: 'badgeInfo', | 54 | i: 'badgeInfo', |
| 56 | w: 'badgeWarn', | 55 | w: 'badgeWarn', |
| 57 | e: 'badgeError' | 56 | e: 'badgeError' |
| ... | @@ -76,7 +75,7 @@ | ... | @@ -76,7 +75,7 @@ |
| 76 | var deviceLabelIndex = 0, | 75 | var deviceLabelIndex = 0, |
| 77 | hostLabelIndex = 0; | 76 | hostLabelIndex = 0; |
| 78 | 77 | ||
| 79 | - // note: these are the device icon colors without affinity | 78 | + // note: these are the device icon colors without affinity (no master) |
| 80 | var dColTheme = { | 79 | var dColTheme = { |
| 81 | light: { | 80 | light: { |
| 82 | online: '#444444', | 81 | online: '#444444', |
| ... | @@ -160,9 +159,8 @@ | ... | @@ -160,9 +159,8 @@ |
| 160 | .transition() | 159 | .transition() |
| 161 | .attr(iconBox(devIconDim, labelWidth)); | 160 | .attr(iconBox(devIconDim, labelWidth)); |
| 162 | 161 | ||
| 163 | - // TODO: verify badge placement | ||
| 164 | if (bdg) { | 162 | if (bdg) { |
| 165 | - renderBadge(node, bdg, { dx: devIconDim, dy: 0 }); | 163 | + renderBadge(node, bdg, devBadgeOff); |
| 166 | } | 164 | } |
| 167 | } | 165 | } |
| 168 | 166 | ||
| ... | @@ -173,7 +171,7 @@ | ... | @@ -173,7 +171,7 @@ |
| 173 | updateHostLabel(d); | 171 | updateHostLabel(d); |
| 174 | 172 | ||
| 175 | if (bdg) { | 173 | if (bdg) { |
| 176 | - renderBadge(node, bdg, icfg.host.badge); | 174 | + renderBadge(node, bdg, hostBadgeOff); |
| 177 | } | 175 | } |
| 178 | } | 176 | } |
| 179 | 177 | ||
| ... | @@ -243,7 +241,6 @@ | ... | @@ -243,7 +241,6 @@ |
| 243 | var node = d3.select(this), | 241 | var node = d3.select(this), |
| 244 | glyphId = mapDeviceTypeToGlyph(d.type), | 242 | glyphId = mapDeviceTypeToGlyph(d.type), |
| 245 | label = trimLabel(deviceLabel(d)), | 243 | label = trimLabel(deviceLabel(d)), |
| 246 | - xlate = -devIconDim/2, | ||
| 247 | rect, text, glyph, labelWidth; | 244 | rect, text, glyph, labelWidth; |
| 248 | 245 | ||
| 249 | d.el = node; | 246 | d.el = node; |
| ... | @@ -253,7 +250,7 @@ | ... | @@ -253,7 +250,7 @@ |
| 253 | text = node.append('text').text(label) | 250 | text = node.append('text').text(label) |
| 254 | .attr('text-anchor', 'left') | 251 | .attr('text-anchor', 'left') |
| 255 | .attr('y', '0.3em') | 252 | .attr('y', '0.3em') |
| 256 | - .attr('x', devIconDim / 2 + labelPad); | 253 | + .attr('x', halfDevIcon + labelPad); |
| 257 | 254 | ||
| 258 | glyph = is.addDeviceIcon(node, glyphId, devIconDim); | 255 | glyph = is.addDeviceIcon(node, glyphId, devIconDim); |
| 259 | 256 | ||
| ... | @@ -262,20 +259,18 @@ | ... | @@ -262,20 +259,18 @@ |
| 262 | rect.attr(iconBox(devIconDim, labelWidth)); | 259 | rect.attr(iconBox(devIconDim, labelWidth)); |
| 263 | glyph.attr(iconBox(devIconDim, 0)); | 260 | glyph.attr(iconBox(devIconDim, 0)); |
| 264 | 261 | ||
| 265 | - node.attr('transform', sus.translate(xlate, xlate)); | 262 | + node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon)); |
| 266 | } | 263 | } |
| 267 | 264 | ||
| 268 | function hostEnter(d) { | 265 | function hostEnter(d) { |
| 269 | var node = d3.select(this), | 266 | var node = d3.select(this), |
| 270 | gid = d.type || 'unknown', | 267 | gid = d.type || 'unknown', |
| 271 | - rad = icfg.host.radius, | 268 | + textDy = hostRadius + 10; |
| 272 | - r = d.type ? rad.withGlyph : rad.noGlyph, | ||
| 273 | - textDy = r + 10; | ||
| 274 | 269 | ||
| 275 | d.el = node; | 270 | d.el = node; |
| 276 | sus.visible(node, api.showHosts()); | 271 | sus.visible(node, api.showHosts()); |
| 277 | 272 | ||
| 278 | - is.addHostIcon(node, r, gid); | 273 | + is.addHostIcon(node, hostRadius, gid); |
| 279 | 274 | ||
| 280 | node.append('text') | 275 | node.append('text') |
| 281 | .text(hostLabel) | 276 | .text(hostLabel) |
| ... | @@ -527,8 +522,6 @@ | ... | @@ -527,8 +522,6 @@ |
| 527 | ps = _ps_; | 522 | ps = _ps_; |
| 528 | ttbs = _ttbs_; | 523 | ttbs = _ttbs_; |
| 529 | 524 | ||
| 530 | - icfg = is.iconConfig(); | ||
| 531 | - | ||
| 532 | function initD3(_api_) { | 525 | function initD3(_api_) { |
| 533 | api = _api_; | 526 | api = _api_; |
| 534 | } | 527 | } | ... | ... |
| ... | @@ -69,7 +69,7 @@ | ... | @@ -69,7 +69,7 @@ |
| 69 | } | 69 | } |
| 70 | 70 | ||
| 71 | // else if we have [x,y] cached in meta data, use that... | 71 | // else if we have [x,y] cached in meta data, use that... |
| 72 | - if (x && y) { | 72 | + if (x !== undefined && y !== undefined) { |
| 73 | node.fixed = true; | 73 | node.fixed = true; |
| 74 | node.px = node.x = x; | 74 | node.px = node.x = x; |
| 75 | node.py = node.y = y; | 75 | node.py = node.y = y; | ... | ... |
| 1 | +{ | ||
| 2 | + "event": "addHost", | ||
| 3 | + "payload": { | ||
| 4 | + "id": "0E:2A:69:30:13:01/-1", | ||
| 5 | + "ingress": "0E:2A:69:30:13:01/-1/0-of:0000000000000001/95", | ||
| 6 | + "egress": "of:0000000000000001/95-0E:2A:69:30:13:01/-1/0", | ||
| 7 | + "cp": { | ||
| 8 | + "device": "of:0000000000000001", | ||
| 9 | + "port": 95 | ||
| 10 | + }, | ||
| 11 | + "labels": [ | ||
| 12 | + "192.168.0.1", | ||
| 13 | + "0E:2A:69:30:13:01" | ||
| 14 | + ], | ||
| 15 | + "metaUi": { | ||
| 16 | + "x": -20, | ||
| 17 | + "y": 230 | ||
| 18 | + }, | ||
| 19 | + "props": {} | ||
| 20 | + } | ||
| 21 | +} |
| 1 | +{ | ||
| 2 | + "event": "addHost", | ||
| 3 | + "payload": { | ||
| 4 | + "id": "0E:2A:69:30:13:07/-1", | ||
| 5 | + "ingress": "0E:2A:69:30:13:07/-1/0-of:0000000000000007/95", | ||
| 6 | + "egress": "of:0000000000000001/95-0E:2A:69:30:13:07/-1/0", | ||
| 7 | + "cp": { | ||
| 8 | + "device": "of:0000000000000007", | ||
| 9 | + "port": 95 | ||
| 10 | + }, | ||
| 11 | + "labels": [ | ||
| 12 | + "192.168.0.7", | ||
| 13 | + "0E:2A:69:30:13:07" | ||
| 14 | + ], | ||
| 15 | + "metaUi": { | ||
| 16 | + "x": 740, | ||
| 17 | + "y": 230 | ||
| 18 | + }, | ||
| 19 | + "props": {} | ||
| 20 | + } | ||
| 21 | +} |
| 1 | +{ | ||
| 2 | + "event": "showHighlights", | ||
| 3 | + "payload": { | ||
| 4 | + "devices": [ | ||
| 5 | + { | ||
| 6 | + "id": "of:0000000000000001", | ||
| 7 | + "badge": { | ||
| 8 | + "status": "i", | ||
| 9 | + "gid": "xMark", | ||
| 10 | + "msg": "x marks the spot" | ||
| 11 | + } | ||
| 12 | + }, | ||
| 13 | + { | ||
| 14 | + "id": "of:0000000000000101", | ||
| 15 | + "badge": { | ||
| 16 | + "status": "w", | ||
| 17 | + "gid": "crown", | ||
| 18 | + "msg": "it's good to be the King" | ||
| 19 | + } | ||
| 20 | + }, | ||
| 21 | + { | ||
| 22 | + "id": "of:0000000000000002", | ||
| 23 | + "badge": { | ||
| 24 | + "status": "e", | ||
| 25 | + "gid": "chain", | ||
| 26 | + "msg": "the weakest link" | ||
| 27 | + } | ||
| 28 | + }, | ||
| 29 | + { | ||
| 30 | + "id": "of:0000000000000102", | ||
| 31 | + "badge": { | ||
| 32 | + "status": "i", | ||
| 33 | + "txt": "1", | ||
| 34 | + "msg": "singular sensation" | ||
| 35 | + } | ||
| 36 | + }, | ||
| 37 | + { | ||
| 38 | + "id": "of:0000000000000003", | ||
| 39 | + "badge": { | ||
| 40 | + "status": "w", | ||
| 41 | + "txt": "42", | ||
| 42 | + "msg": "life, the universe, and everything!" | ||
| 43 | + } | ||
| 44 | + }, | ||
| 45 | + { | ||
| 46 | + "id": "of:0000000000000103", | ||
| 47 | + "badge": { | ||
| 48 | + "status": "e", | ||
| 49 | + "txt": "99", | ||
| 50 | + "msg": "cadbury's flake" | ||
| 51 | + } | ||
| 52 | + } | ||
| 53 | + ], | ||
| 54 | + "hosts": [ | ||
| 55 | + { | ||
| 56 | + "id": "0E:2A:69:30:13:01/-1", | ||
| 57 | + "badge": { | ||
| 58 | + "status": "w", | ||
| 59 | + "gid": "crown" | ||
| 60 | + } | ||
| 61 | + } | ||
| 62 | + ], | ||
| 63 | + "links": [ | ||
| 64 | + { | ||
| 65 | + "css": "primary", | ||
| 66 | + "id": "of:0000000000000001/2-of:0000000000000002/1", | ||
| 67 | + "label": "Foo!" | ||
| 68 | + }, | ||
| 69 | + { | ||
| 70 | + "css": "secondary", | ||
| 71 | + "id": "of:0000000000000002/3-of:0000000000000003/2", | ||
| 72 | + "label": "Bar!" | ||
| 73 | + }, | ||
| 74 | + { | ||
| 75 | + "css": "", | ||
| 76 | + "id": "of:0000000000000003/4-of:0000000000000004/3", | ||
| 77 | + "label": "Baz-a-ma-taz!!" | ||
| 78 | + } | ||
| 79 | + ] | ||
| 80 | + } | ||
| 81 | +} |
-
Please register or login to post a comment