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/core/api/src/main/java/org/onosproject/ui/topo/ButtonDescriptor.java b/core/api/src/main/java/org/onosproject/ui/topo/ButtonDescriptor.java
new file mode 100644
index 0000000..e797130
--- /dev/null
+++ b/core/api/src/main/java/org/onosproject/ui/topo/ButtonDescriptor.java
@@ -0,0 +1,90 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+package org.onosproject.ui.topo;
+
+/**
+ * Designates a descriptor for a button on the topology view panels.
+ */
+public class ButtonDescriptor {
+
+ private final String id;
+ private final String glyphId;
+ private final String tooltip;
+
+ /**
+ * Creates a button descriptor with the given identifier, glyph ID, and
+ * tooltip text. To reference a custom glyph defined in the overlay itself,
+ * prefix its ID with an asterisk, (e.g. {@code "*myGlyph"}). Alternatively,
+ * use one of the {@link TopoConstants.Glyphs predefined constant}.
+ *
+ * @param id identifier for the button
+ * @param glyphId identifier for the glyph
+ * @param tooltip tooltip text
+ */
+ public ButtonDescriptor(String id, String glyphId, String tooltip) {
+ this.id = id;
+ this.glyphId = glyphId;
+ this.tooltip = tooltip;
+ }
+
+ /**
+ * Returns the identifier for this button.
+ *
+ * @return identifier
+ */
+ public String id() {
+ return id;
+ }
+
+ /**
+ * Returns the glyph identifier for this button.
+ *
+ * @return glyph identifier
+ */
+ public String glyphId() {
+ return glyphId;
+ }
+
+ /**
+ * Returns the tooltip text for this button.
+ *
+ * @return tooltip text
+ */
+ public String tooltip() {
+ return tooltip;
+ }
+
+ @Override
+ public boolean equals(Object o) {
+ if (this == o) {
+ return true;
+ }
+ if (o == null || getClass() != o.getClass()) {
+ return false;
+ }
+
+ ButtonDescriptor that = (ButtonDescriptor) o;
+ return id.equals(that.id);
+
+ }
+
+ @Override
+ public int hashCode() {
+ return id.hashCode();
+ }
+}
diff --git a/core/api/src/main/java/org/onosproject/ui/topo/PropertyPanel.java b/core/api/src/main/java/org/onosproject/ui/topo/PropertyPanel.java
index 03ff2a3..43364ea 100644
--- a/core/api/src/main/java/org/onosproject/ui/topo/PropertyPanel.java
+++ b/core/api/src/main/java/org/onosproject/ui/topo/PropertyPanel.java
@@ -35,7 +35,7 @@
private String typeId;
private String id;
private List<Prop> properties = new ArrayList<>();
- private List<Button> buttons = new ArrayList<>();
+ private List<ButtonDescriptor> buttons = new ArrayList<>();
/**
* Constructs a property panel model with the given title and
@@ -181,7 +181,7 @@
* @return the button list
*/
// TODO: consider protecting this?
- public List<Button> buttons() {
+ public List<ButtonDescriptor> buttons() {
return buttons;
}
@@ -216,14 +216,14 @@
* @return self, for chaining
*/
public PropertyPanel removeProps(String... keys) {
- Set<String> keysForRemoval = Sets.newHashSet(keys);
- List<Prop> propsToKeep = new ArrayList<>();
+ Set<String> forRemoval = Sets.newHashSet(keys);
+ List<Prop> toKeep = new ArrayList<>();
for (Prop p: properties) {
- if (!keysForRemoval.contains(p.key())) {
- propsToKeep.add(p);
+ if (!forRemoval.contains(p.key())) {
+ toKeep.add(p);
}
}
- properties = propsToKeep;
+ properties = toKeep;
return this;
}
@@ -238,13 +238,41 @@
}
/**
- * Adds a button descriptor with the given identifier, to the panel data.
+ * Adds the given button descriptor to the panel data.
*
- * @param id button identifier
+ * @param button button descriptor
* @return self, for chaining
*/
- public PropertyPanel addButton(String id) {
- buttons.add(new Button(id));
+ public PropertyPanel addButton(ButtonDescriptor button) {
+ buttons.add(button);
+ return this;
+ }
+
+ /**
+ * Removes buttons with the given descriptors from the list.
+ *
+ * @param descriptors descriptors to remove
+ * @return self, for chaining
+ */
+ public PropertyPanel removeButtons(ButtonDescriptor... descriptors) {
+ Set<ButtonDescriptor> forRemoval = Sets.newHashSet(descriptors);
+ List<ButtonDescriptor> toKeep = new ArrayList<>();
+ for (ButtonDescriptor bd: buttons) {
+ if (!forRemoval.contains(bd)) {
+ toKeep.add(bd);
+ }
+ }
+ buttons = toKeep;
+ return this;
+ }
+
+ /**
+ * Removes all currently defined buttons.
+ *
+ * @return self, for chaining
+ */
+ public PropertyPanel removeAllButtons() {
+ buttons.clear();
return this;
}
@@ -322,29 +350,4 @@
}
}
- /**
- * Button descriptor. Note that these work in conjunction with
- * "buttons" defined in the JavaScript code for the overlay.
- */
- public static class Button {
- private final String id;
-
- /**
- * Constructs a button descriptor with the given identifier.
- *
- * @param id button identifier
- */
- public Button(String id) {
- this.id = id;
- }
-
- /**
- * Returns the identifier for this button.
- *
- * @return button identifier
- */
- public String id() {
- return id;
- }
- }
}
diff --git a/core/api/src/main/java/org/onosproject/ui/topo/TopoConstants.java b/core/api/src/main/java/org/onosproject/ui/topo/TopoConstants.java
index d44ba9f..a48c253 100644
--- a/core/api/src/main/java/org/onosproject/ui/topo/TopoConstants.java
+++ b/core/api/src/main/java/org/onosproject/ui/topo/TopoConstants.java
@@ -79,6 +79,8 @@
* details panels.
*/
public static final class Properties {
+ public static final String SEPARATOR = "-";
+
// summary panel
public static final String DEVICES = "Devices";
public static final String LINKS = "Links";
@@ -106,4 +108,30 @@
public static final String VLAN = "VLAN";
}
+ private static final class CoreButton extends ButtonDescriptor {
+ private CoreButton(String tag, String glyphId, boolean extra) {
+ super("show" + tag + "View",
+ glyphId,
+ "Show " + tag + " View" + (extra ? " for this Device" : ""));
+ }
+ }
+
+ /**
+ * Defines constants for core buttons that appear on the topology
+ * details panel.
+ */
+ public static final class CoreButtons {
+ public static final ButtonDescriptor SHOW_DEVICE_VIEW =
+ new CoreButton("Device", Glyphs.SWITCH, false);
+
+ public static final ButtonDescriptor SHOW_FLOW_VIEW =
+ new CoreButton("Flow", Glyphs.FLOW_TABLE, true);
+
+ public static final ButtonDescriptor SHOW_PORT_VIEW =
+ new CoreButton("Port", Glyphs.PORT_TABLE, true);
+
+ public static final ButtonDescriptor SHOW_GROUP_VIEW =
+ new CoreButton("Group", Glyphs.GROUP_TABLE, true);
+ }
+
}
diff --git a/core/api/src/test/java/org/onosproject/ui/topo/ButtonDescriptorTest.java b/core/api/src/test/java/org/onosproject/ui/topo/ButtonDescriptorTest.java
new file mode 100644
index 0000000..1f47a09
--- /dev/null
+++ b/core/api/src/test/java/org/onosproject/ui/topo/ButtonDescriptorTest.java
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+package org.onosproject.ui.topo;
+
+import org.junit.Test;
+
+import static org.junit.Assert.assertEquals;
+
+/**
+ * Unit tests for {@link ButtonDescriptor}.
+ */
+public class ButtonDescriptorTest {
+
+ private static final String ID = "my-id";
+ private static final String GID = "my-glyphId";
+ private static final String TT = "my-tewltyp";
+
+ private ButtonDescriptor bd;
+
+
+ @Test
+ public void basic() {
+ bd = new ButtonDescriptor(ID, GID, TT);
+
+ assertEquals("bad id", ID, bd.id());
+ assertEquals("bad gid", GID, bd.glyphId());
+ assertEquals("bad tt", TT, bd.tooltip());
+ }
+
+}
diff --git a/core/api/src/test/java/org/onosproject/ui/topo/PropertyPanelTest.java b/core/api/src/test/java/org/onosproject/ui/topo/PropertyPanelTest.java
index 7ca9ce5..e97c037 100644
--- a/core/api/src/test/java/org/onosproject/ui/topo/PropertyPanelTest.java
+++ b/core/api/src/test/java/org/onosproject/ui/topo/PropertyPanelTest.java
@@ -25,9 +25,7 @@
import java.util.Iterator;
import java.util.Map;
-import static org.junit.Assert.assertEquals;
-import static org.junit.Assert.assertNull;
-import static org.junit.Assert.fail;
+import static org.junit.Assert.*;
/**
* Unit tests for {@link PropertyPanel}.
@@ -43,11 +41,20 @@
private static final String KEY_A = "A";
private static final String KEY_B = "B";
private static final String KEY_C = "C";
+ private static final String SEP = "-";
private static final String KEY_Z = "Z";
private static final String VALUE_A = "Hay";
private static final String VALUE_B = "Bee";
private static final String VALUE_C = "Sea";
private static final String VALUE_Z = "Zed";
+ private static final String GID_A = "gid-A";
+ private static final String GID_B = "gid-B";
+ private static final String GID_C = "gid-C";
+ private static final String GID_Z = "gid-Z";
+ private static final String TT_A = "toolTip-A";
+ private static final String TT_B = "toolTip-B";
+ private static final String TT_C = "toolTip-C";
+ private static final String TT_Z = "toolTip-Z";
private static final Map<String, Prop> PROP_MAP = new HashMap<>();
@@ -73,6 +80,7 @@
PROP_MAP.put(KEY_B, new Prop(KEY_B, VALUE_B));
PROP_MAP.put(KEY_C, new Prop(KEY_C, VALUE_C));
PROP_MAP.put(KEY_Z, new Prop(KEY_Z, VALUE_Z));
+ PROP_MAP.put(SEP, new PropertyPanel.Separator());
}
@Test
@@ -82,6 +90,7 @@
assertEquals("wrong type", TYPE_ORIG, pp.typeId());
assertNull("id?", pp.id());
assertEquals("unexpected props", 0, pp.properties().size());
+ assertEquals("unexpected buttons", 0, pp.buttons().size());
}
@Test
@@ -141,6 +150,16 @@
}
@Test
+ public void separator() {
+ props();
+ pp.addSeparator()
+ .addProp(KEY_Z, VALUE_Z);
+
+ assertEquals("bad props", 5, pp.properties().size());
+ validateProps(KEY_A, KEY_B, KEY_C, SEP, KEY_Z);
+ }
+
+ @Test
public void removeAllProps() {
props();
assertEquals("wrong props", 3, pp.properties().size());
@@ -192,4 +211,40 @@
validateProp(KEY_B, ">byyy<");
}
+ private static final ButtonDescriptor BD_A =
+ new ButtonDescriptor(KEY_A, GID_A, TT_A);
+ private static final ButtonDescriptor BD_B =
+ new ButtonDescriptor(KEY_B, GID_B, TT_B);
+ private static final ButtonDescriptor BD_C =
+ new ButtonDescriptor(KEY_C, GID_C, TT_C);
+ private static final ButtonDescriptor BD_Z =
+ new ButtonDescriptor(KEY_Z, GID_Z, TT_Z);
+
+ private void verifyButtons(String... keys) {
+ Iterator<ButtonDescriptor> iter = pp.buttons().iterator();
+ for (String k: keys) {
+ assertEquals("wrong button", k, iter.next().id());
+ }
+ assertFalse("too many buttons", iter.hasNext());
+ }
+
+ @Test
+ public void buttons() {
+ basic();
+ pp.addButton(BD_A)
+ .addButton(BD_B);
+ assertEquals("wrong buttons", 2, pp.buttons().size());
+ verifyButtons(KEY_A, KEY_B);
+
+ pp.removeButtons(BD_B)
+ .addButton(BD_C)
+ .addButton(BD_Z);
+ assertEquals("wrong buttons", 3, pp.buttons().size());
+ verifyButtons(KEY_A, KEY_C, KEY_Z);
+
+ pp.removeAllButtons()
+ .addButton(BD_B);
+ assertEquals("wrong buttons", 1, pp.buttons().size());
+ verifyButtons(KEY_B);
+ }
}
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();
}