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

+/*
+ * 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();
+    }
+}

@@ -35,7 +35,7 @@ public class PropertyPanel {
     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 @@ public class PropertyPanel {
      * @return the button list
      */
     // TODO: consider protecting this?
-    public List<Button> buttons() {
+    public List<ButtonDescriptor> buttons() {
         return buttons;
     }
 
@@ -216,14 +216,14 @@ public class PropertyPanel {
      * @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 @@ public class PropertyPanel {
     }
 
     /**
-     * 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 @@ public class PropertyPanel {
         }
     }
 
-    /**
-     * 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;
-        }
-    }
 }

@@ -79,6 +79,8 @@ public final class TopoConstants {
      * 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 final class TopoConstants {
         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);
+    }
+
 }

+/*
+ * 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());
+    }
+
+}

@@ -25,9 +25,7 @@ import java.util.HashMap;
 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 @@ public class PropertyPanelTest {
     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 @@ public class PropertyPanelTest {
         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 @@ public class PropertyPanelTest {
         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 @@ public class PropertyPanelTest {
     }
 
     @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 @@ public class PropertyPanelTest {
         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);
+    }
 }

@@ -72,6 +72,7 @@ import org.onosproject.net.topology.TopologyService;
 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_ADDED;
 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 @@ public abstract class TopologyViewMessageHandlerBase extends UiMessageHandler {
 
         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 @@ public abstract class TopologyViewMessageHandlerBase extends UiMessageHandler {
             .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 @@ public abstract class TopologyViewMessageHandlerBase extends UiMessageHandler {
         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();

@@ -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);
-                    };
-
-                if (btn) {
-                    addFn({
-                        id: current.mkId(bid),
-                        gid: current.mkGid(btn.gid),
-                        cb: funcWrap,
-                        tt: btn.tt
-                    });
-                }
-            });
-        }
+    var coreButtonPath = {
+        showDeviceView: 'device',
+        showFlowView: 'flow',
+        showPortView: 'port',
+        showGroupView: 'group'
+    };
+
+    // 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,

@@ -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 = {

@@ -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();
     }