ONOS-1479 -- GUI - augmenting topology view for extensibility:
- Implemented server-side topo panel button descriptors, with overlay ability to remove core buttons and add custom buttons.
Change-Id: Id9ecc4c5e2d2db942232d2156ecf3bc858c0c61f
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java b/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java
index e6b4ac4..8dbb111 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/TopologyViewMessageHandlerBase.java
@@ -72,6 +72,7 @@
import org.onosproject.ui.JsonUtils;
import org.onosproject.ui.UiConnection;
import org.onosproject.ui.UiMessageHandler;
+import org.onosproject.ui.topo.ButtonDescriptor;
import org.onosproject.ui.topo.PropertyPanel;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
@@ -107,7 +108,8 @@
import static org.onosproject.net.link.LinkEvent.Type.LINK_REMOVED;
import static org.onosproject.ui.impl.TopologyViewMessageHandlerBase.StatsType.FLOW;
import static org.onosproject.ui.impl.TopologyViewMessageHandlerBase.StatsType.PORT;
-import static org.onosproject.ui.topo.TopoConstants.*;
+import static org.onosproject.ui.topo.TopoConstants.CoreButtons;
+import static org.onosproject.ui.topo.TopoConstants.Properties;
/**
* Facility for creating messages bound for the topology viewer.
@@ -474,6 +476,7 @@
PropertyPanel pp = new PropertyPanel(title, typeId)
.id(deviceId.toString())
+
.addProp(Properties.URI, deviceId.toString())
.addProp(Properties.VENDOR, device.manufacturer())
.addProp(Properties.HW_VERSION, device.hwVersion())
@@ -481,14 +484,19 @@
.addProp(Properties.SERIAL_NUMBER, device.serialNumber())
.addProp(Properties.PROTOCOL, annot.value(AnnotationKeys.PROTOCOL))
.addSeparator()
+
.addProp(Properties.LATITUDE, annot.value(AnnotationKeys.LATITUDE))
.addProp(Properties.LONGITUDE, annot.value(AnnotationKeys.LONGITUDE))
.addSeparator()
+
.addProp(Properties.PORTS, portCount)
.addProp(Properties.FLOWS, flowCount)
- .addProp(Properties.TUNNELS, tunnelCount);
+ .addProp(Properties.TUNNELS, tunnelCount)
- // TODO: add button descriptors
+ .addButton(CoreButtons.SHOW_DEVICE_VIEW)
+ .addButton(CoreButtons.SHOW_FLOW_VIEW)
+ .addButton(CoreButtons.SHOW_PORT_VIEW)
+ .addButton(CoreButtons.SHOW_GROUP_VIEW);
return pp;
}
@@ -862,13 +870,22 @@
result.set("props", pnode);
ArrayNode buttons = arrayNode();
- for (PropertyPanel.Button b : pp.buttons()) {
- buttons.add(b.id());
+ for (ButtonDescriptor b : pp.buttons()) {
+ buttons.add(json(b));
}
result.set("buttons", buttons);
return result;
}
+ // translates the button descriptor into JSON
+ private ObjectNode json(ButtonDescriptor bdesc) {
+ return objectNode()
+ .put("id", bdesc.id())
+ .put("gid", bdesc.glyphId())
+ .put("tt", bdesc.tooltip());
+ }
+
+
// Produces canonical link key, i.e. one that will match link and its inverse.
static LinkKey canonicalLinkKey(Link link) {
String sn = link.src().elementId().toString();
diff --git a/web/gui/src/main/webapp/app/view/topo/topoOverlay.js b/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
index 9dddc9b..f2b81f5 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
@@ -30,7 +30,7 @@
var tos = 'TopoOverlayService: ';
// injected refs
- var $log, fs, gs, wss;
+ var $log, fs, gs, wss, ns;
// internal state
var overlays = {},
@@ -142,37 +142,53 @@
}
}
- // install buttons from the current overlay
- function installButtons(bids, addFn, data) {
- if (current) {
- bids.forEach(function (bid) {
- var btn = current.buttons[bid],
- funcWrap = function () {
- btn.cb(data);
- };
+ var coreButtonPath = {
+ showDeviceView: 'device',
+ showFlowView: 'flow',
+ showPortView: 'port',
+ showGroupView: 'group'
+ };
- if (btn) {
- addFn({
- id: current.mkId(bid),
- gid: current.mkGid(btn.gid),
- cb: funcWrap,
- tt: btn.tt
- });
- }
- });
- }
+ // install core buttons, and include any additional from the current overlay
+ function installButtons(buttons, addFn, data, devId) {
+
+ angular.forEach(buttons, function (btn) {
+ var path = coreButtonPath[btn.id],
+ _id,
+ _gid,
+ _cb,
+ action;
+
+ if (path) {
+ // core callback function
+ _id = btn.id;
+ _gid = btn.gid;
+ action = function () {
+ ns.navTo(path, { devId: devId });
+ };
+ } else if (current) {
+ _id = current.mkId(btn.id);
+ _gid = current.mkGid(btn.gid);
+ action = current.buttonActions[btn.id] || function () {};
+ }
+
+ _cb = function () { action(data); };
+
+ addFn({ id: _id, gid: _gid, cb: _cb, tt: btn.tt});
+ });
}
angular.module('ovTopo')
.factory('TopoOverlayService',
- ['$log', 'FnService', 'GlyphService', 'WebSocketService',
+ ['$log', 'FnService', 'GlyphService', 'WebSocketService', 'NavService',
- function (_$log_, _fs_, _gs_, _wss_) {
+ function (_$log_, _fs_, _gs_, _wss_, _ns_) {
$log = _$log_;
fs = _fs_;
gs = _gs_;
wss = _wss_;
+ ns = _ns_;
return {
register: register,
diff --git a/web/gui/src/main/webapp/app/view/topo/topoPanel.js b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
index 9869f64..7db17f0 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
@@ -272,7 +272,7 @@
.select('.actionBtns')
.append('div')
.classed('actionBtn', true);
- bns.button(btnDiv, idDet + o.id, o.gid, o.cb, o.tt);
+ bns.button(btnDiv, idDet + '-' + o.id, o.gid, o.cb, o.tt);
}
var friendlyIndex = {
diff --git a/web/gui/src/main/webapp/app/view/topo/topoSelect.js b/web/gui/src/main/webapp/app/view/topo/topoSelect.js
index c02ef51..fe2f7a1 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoSelect.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoSelect.js
@@ -229,13 +229,14 @@
// Event Handlers
function showDetails(data) {
- var buttons = fs.isA(data.buttons);
+ var buttons = fs.isA(data.buttons) || [];
// display the data for the single selected node
tps.displaySingle(data);
- // TODO: use server-side-button-descriptors to add buttons
+ tov.installButtons(buttons, tps.addAction, data, data.props['URI']);
+ // TODO: MOVE traffic buttons to the traffic overlay
// always add the 'show traffic' action
tps.addAction({
id: '-sin-rel-traf-btn',
@@ -254,49 +255,6 @@
});
}
- // TODO: for now, install overlay buttons here
- if (buttons) {
- tov.installButtons(buttons, tps.addAction, data);
- }
-
-
- // TODO: have the server return explicit class and ID of each node
- // for now, we assume the node is a device if it has a URI
- if ((data.props).hasOwnProperty('URI')) {
- tps.addAction({
- id: 'device-table-btn',
- gid: data.type,
- cb: function () {
- ns.navTo(devPath, { devId: data.props['URI'] });
- },
- tt: 'Show device view'
- });
- tps.addAction({
- id: 'flows-table-btn',
- gid: 'flowTable',
- cb: function () {
- ns.navTo(flowPath, { devId: data.props['URI'] });
- },
- tt: 'Show flow view for this device'
- });
- tps.addAction({
- id: 'ports-table-btn',
- gid: 'portTable',
- cb: function () {
- ns.navTo(portPath, { devId: data.props['URI'] });
- },
- tt: 'Show port view for this device'
- });
- tps.addAction({
- id: 'groups-table-btn',
- gid: 'groupTable',
- cb: function () {
- ns.navTo(groupPath, { devId: data.props['URI'] });
- },
- tt: 'Show group view for this device'
- });
- }
-
tps.displaySomething();
}