[onos-4531, onos-4532] SFC web gui implementation

Change-Id: If7a515d4f3fac9736e98570e8e78af6003c5bef8

@@ -23,4 +23,5 @@
     <artifact>mvn:${project.groupId}/onos-app-sfc-mgr/${project.version}</artifact>
     <artifact>mvn:${project.groupId}/onos-app-sfc-mgr/${project.version}</artifact>
     <artifact>mvn:${project.groupId}/onos-app-vtn-web/${project.version}</artifact>
     <artifact>mvn:${project.groupId}/onos-app-vtn-web/${project.version}</artifact>
     <artifact>mvn:${project.groupId}/onos-app-vtn-rsc/${project.version}</artifact>
     <artifact>mvn:${project.groupId}/onos-app-vtn-rsc/${project.version}</artifact>
+    <artifact>mvn:${project.groupId}/onos-app-sfc-web/${project.version}</artifact>
 </app>
 </app>

@@ -23,5 +23,6 @@
         <bundle>mvn:${project.groupId}/onos-app-sfc-mgr/${project.version}</bundle>
         <bundle>mvn:${project.groupId}/onos-app-sfc-mgr/${project.version}</bundle>
         <bundle>mvn:${project.groupId}/onos-app-vtn-web/${project.version}</bundle>
         <bundle>mvn:${project.groupId}/onos-app-vtn-web/${project.version}</bundle>
         <bundle>mvn:${project.groupId}/onos-app-vtn-rsc/${project.version}</bundle>
         <bundle>mvn:${project.groupId}/onos-app-vtn-rsc/${project.version}</bundle>
+        <bundle>mvn:${project.groupId}/onos-app-sfc-web/${project.version}</bundle>
     </feature>
     </feature>
 </features>
 </features>

@@ -43,6 +43,11 @@
         </dependency>
         </dependency>
         <dependency>
         <dependency>
             <groupId>org.onosproject</groupId>
             <groupId>org.onosproject</groupId>
+            <artifactId>onos-app-sfc-web</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.onosproject</groupId>
             <artifactId>onos-app-vtn-mgr</artifactId>
             <artifactId>onos-app-vtn-mgr</artifactId>
             <version>${project.version}</version>
             <version>${project.version}</version>
         </dependency>
         </dependency>

@@ -36,6 +36,7 @@
         <module>vtnrsc</module>
         <module>vtnrsc</module>
         <module>vtnmgr</module>
         <module>vtnmgr</module>
         <module>vtnweb</module>
         <module>vtnweb</module>
+        <module>sfcweb</module>
         <module>app</module>
         <module>app</module>
         </modules>
         </modules>
         <dependencies>
         <dependencies>

+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+  ~ Copyright 2016-present 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.
+  -->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <parent>
+        <groupId>org.onosproject</groupId>
+        <artifactId>onos-app-vtn</artifactId>
+        <version>1.6.0-SNAPSHOT</version>
+        <relativePath>../pom.xml</relativePath>
+    </parent>
+
+    <artifactId>onos-app-sfc-web</artifactId>
+    <packaging>bundle</packaging>
+
+    <description>SFC web application</description>
+
+    <properties>
+        <onos.app.name>org.onosproject.sfcweb</onos.app.name>
+        <onos.app.title>SFC web application</onos.app.title>
+        <onos.app.category>Utility</onos.app.category>
+        <onos.app.url>https://wiki.onosproject.org/display/ONOS/</onos.app.url>
+        <web.context>/onos/vtn</web.context>
+        <onos.app.readme>
+            Allows the user to visualize different types of paths between
+            network entities such as switches and hosts.
+            SF and SFF.
+        </onos.app.readme>
+    </properties>
+
+    <dependencies>
+        <dependency>
+            <groupId>javax.ws.rs</groupId>
+            <artifactId>javax.ws.rs-api</artifactId>
+            <version>2.0.1</version>
+        </dependency>
+        <dependency>
+            <groupId>org.onosproject</groupId>
+            <artifactId>onos-app-vtn-rsc</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+    </dependencies>
+
+</project>

+/*
+ * Copyright 2016-present 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.sfcweb;
+
+import com.google.common.collect.ImmutableList;
+import org.apache.felix.scr.annotations.Activate;
+import org.apache.felix.scr.annotations.Component;
+import org.apache.felix.scr.annotations.Deactivate;
+import org.apache.felix.scr.annotations.Reference;
+import org.apache.felix.scr.annotations.ReferenceCardinality;
+import org.onosproject.ui.UiExtension;
+import org.onosproject.ui.UiExtensionService;
+import org.onosproject.ui.UiMessageHandlerFactory;
+import org.onosproject.ui.UiTopoOverlayFactory;
+import org.onosproject.ui.UiView;
+import org.onosproject.ui.UiViewHidden;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.util.List;
+
+/**
+ * Skeletal ONOS UI Topology-Overlay application component.
+ */
+@Component(immediate = true)
+public class SfcwebUiTopovComponent {
+
+    private static final ClassLoader CL = SfcwebUiTopovComponent.class.getClassLoader();
+    private static final String VIEW_ID = "sfcwebTopov";
+
+    private final Logger log = LoggerFactory.getLogger(getClass());
+
+    @Reference(cardinality = ReferenceCardinality.MANDATORY_UNARY)
+    protected UiExtensionService uiExtensionService;
+
+    // List of application views
+    private final List<UiView> uiViews = ImmutableList.of(
+            new UiViewHidden(VIEW_ID)
+    );
+
+    // Factory for UI message handlers
+    private final UiMessageHandlerFactory messageHandlerFactory =
+            () -> ImmutableList.of(
+                    new SfcwebUiTopovMessageHandler()
+            );
+
+    // Factory for UI topology overlays
+    private final UiTopoOverlayFactory topoOverlayFactory =
+            () -> ImmutableList.of(
+                    new SfcwebUiTopovOverlay()
+            );
+
+    // Application UI extension
+    protected UiExtension extension =
+            new UiExtension.Builder(CL, uiViews)
+                    .resourcePath(VIEW_ID)
+                    .messageHandlerFactory(messageHandlerFactory)
+                    .topoOverlayFactory(topoOverlayFactory)
+                    .build();
+
+    @Activate
+    protected void activate() {
+        uiExtensionService.register(extension);
+        log.info("Started");
+    }
+
+    @Deactivate
+    protected void deactivate() {
+        uiExtensionService.unregister(extension);
+        log.info("Stopped");
+    }
+
+}

+/*
+ * Copyright 2016-present 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.sfcweb;
+
+import org.onlab.osgi.DefaultServiceDirectory;
+import org.onlab.osgi.ServiceDirectory;
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.fasterxml.jackson.databind.node.ArrayNode;
+import com.google.common.collect.ImmutableSet;
+
+import org.onlab.packet.MacAddress;
+import org.onosproject.net.Device;
+import org.onosproject.net.Element;
+import org.onosproject.net.Link;
+import org.onosproject.net.device.DeviceService;
+import org.onosproject.net.host.HostService;
+import org.onosproject.net.link.LinkService;
+import org.onosproject.ui.topo.HostHighlight;
+import org.onosproject.ui.RequestHandler;
+import org.onosproject.ui.UiConnection;
+import org.onosproject.ui.UiMessageHandler;
+import org.onosproject.ui.topo.Highlights;
+import org.onosproject.ui.topo.NodeBadge;
+import org.onosproject.ui.topo.TopoJson;
+import org.onosproject.ui.topo.DeviceHighlight;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.onosproject.vtnrsc.PortChain;
+import org.onosproject.vtnrsc.portchain.PortChainService;
+import org.onosproject.vtnrsc.portpair.PortPairService;
+import org.onosproject.vtnrsc.PortChainId;
+import org.onosproject.net.DeviceId;
+import org.onosproject.net.Host;
+import org.onosproject.net.HostId;
+import org.onosproject.vtnrsc.PortPair;
+import org.onosproject.vtnrsc.PortPairId;
+import org.onosproject.vtnrsc.VirtualPortId;
+import org.onosproject.vtnrsc.service.VtnRscService;
+import org.onosproject.vtnrsc.virtualport.VirtualPortService;
+import org.onosproject.vtnrsc.portpairgroup.PortPairGroupService;
+import org.onosproject.vtnrsc.PortPairGroupId;
+import org.onosproject.vtnrsc.PortPairGroup;
+
+import java.util.Collection;
+import java.util.Timer;
+import java.util.TimerTask;
+import java.util.List;
+import java.util.ListIterator;
+
+/**
+ * SFC web gui topology-overlay message handler.
+ */
+public class SfcwebUiTopovMessageHandler extends UiMessageHandler {
+
+    private static final String SAMPLE_TOPOV_DISPLAY_START = "sfcwebTopovDisplayStart";
+    private static final String SAMPLE_TOPOV_DISPLAY_SFC = "showSfcInfo";
+    private static final String SAMPLE_TOPOV_DISPLAY_STOP = "sfcTopovClear";
+    private static final String CONFIG_SFP_MSG = "configSfpMessage";
+
+    private static final String ID = "id";
+    private static final String MODE = "mode";
+    private static final String SFC_ID   = "SFC";
+
+    private static final long UPDATE_PERIOD_MS = 1000;
+
+    private static final Link[] EMPTY_LINK_SET = new Link[0];
+
+    private enum Mode { IDLE, MOUSE, LINK }
+
+    private final Logger log = LoggerFactory.getLogger(getClass());
+
+    private DeviceService deviceService;
+    private HostService hostService;
+    private LinkService linkService;
+
+    private final Timer timer = new Timer("sfcweb-overlay");
+    private TimerTask demoTask = null;
+    private Mode currentMode = Mode.IDLE;
+    private Element elementOfNote;
+    private Link[] linkSet = EMPTY_LINK_SET;
+    private int linkIndex;
+
+    private long someNumber = 1;
+    private long someIncrement = 1;
+    protected PortPairService portPairService;
+    protected VtnRscService vtnRscService;
+    protected VirtualPortService virtualPortService;
+    protected PortChainService portChainService;
+    protected PortPairGroupService portPairGroupService;
+
+    @Override
+    public void init(UiConnection connection, ServiceDirectory directory) {
+        super.init(connection, directory);
+        deviceService = directory.get(DeviceService.class);
+        hostService = directory.get(HostService.class);
+        linkService = directory.get(LinkService.class);
+        portChainService = directory.get(PortChainService.class);
+        portPairService = directory.get(PortPairService.class);
+        portPairGroupService = directory.get(PortPairGroupService.class);
+    }
+
+    @Override
+    protected Collection<RequestHandler> createRequestHandlers() {
+        return ImmutableSet.of(
+                new DisplayStartHandler(),
+                new DisplayStopHandler(),
+                new ConfigSfpMsg()
+        );
+    }
+
+    /**
+     * Handler classes.
+     */
+    private final class DisplayStartHandler extends RequestHandler {
+        public DisplayStartHandler() {
+            super(SAMPLE_TOPOV_DISPLAY_START);
+        }
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            String mode = string(payload, MODE);
+            PortChainService pcs = get(PortChainService.class);
+            Iterable<PortChain> portChains = pcs.getPortChains();
+            ObjectNode result = objectNode();
+
+            ArrayNode arrayNode = arrayNode();
+
+            for (final PortChain portChain : portChains) {
+                arrayNode.add(portChain.portChainId().value().toString());
+            }
+            result.putArray("a").addAll(arrayNode);
+
+            sendMessage(SAMPLE_TOPOV_DISPLAY_SFC, sid, result);
+        }
+    }
+
+    private final class DisplayStopHandler extends RequestHandler {
+        public DisplayStopHandler() {
+            super(SAMPLE_TOPOV_DISPLAY_STOP);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            log.debug("Stop Display");
+            clearState();
+            clearForMode();
+            cancelTask();
+        }
+    }
+
+    private final class ConfigSfpMsg extends RequestHandler {
+        public ConfigSfpMsg() {
+            super(CONFIG_SFP_MSG);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            String id = string(payload, ID);
+            ServiceDirectory serviceDirectory = new DefaultServiceDirectory();
+            vtnRscService = serviceDirectory.get(VtnRscService.class);
+            virtualPortService = serviceDirectory.get(VirtualPortService.class);
+
+            Highlights highlights = new Highlights();
+
+            PortChainId portChainId = PortChainId.of(id);
+            boolean portChainIdExist = portChainService.exists(portChainId);
+            if (!portChainIdExist) {
+                log.info("portchain id doesn't exist");
+                return;
+            }
+
+            PortChain portChain = portChainService.getPortChain(portChainId);
+
+            List<PortPairGroupId> llPortPairGroupIdList = portChain.portPairGroups();
+            ListIterator<PortPairGroupId> portPairGroupIdListIterator = llPortPairGroupIdList.listIterator();
+            while (portPairGroupIdListIterator.hasNext()) {
+                PortPairGroupId portPairGroupId = portPairGroupIdListIterator.next();
+                PortPairGroup portPairGroup = portPairGroupService.getPortPairGroup(portPairGroupId);
+                List<PortPairId> llPortPairIdList = portPairGroup.portPairs();
+                ListIterator<PortPairId> portPairListIterator = llPortPairIdList.listIterator();
+
+                while (portPairListIterator.hasNext()) {
+                    PortPairId portPairId = portPairListIterator.next();
+                    PortPair portPair = portPairService.getPortPair(portPairId);
+                    DeviceId deviceId = vtnRscService.getSfToSffMaping(VirtualPortId.portId(portPair.egress()));
+                    Device device = deviceService.getDevice(deviceId);
+                    DeviceHighlight dh = new DeviceHighlight(device.id().toString());
+                    dh.setBadge(NodeBadge.text(SFC_ID));
+
+                    MacAddress dstMacAddress = virtualPortService.getPort(VirtualPortId
+                                                        .portId(portPair.egress())).macAddress();
+                    Host host = hostService.getHost(HostId.hostId(dstMacAddress));
+                    HostHighlight hhDst = new HostHighlight(host.id().toString());
+                    hhDst.setBadge(NodeBadge.text(SFC_ID));
+
+                    MacAddress srcMacAddress = virtualPortService.getPort(VirtualPortId
+                                                        .portId(portPair.ingress())).macAddress();
+                    Host hostSrc = hostService.getHost(HostId.hostId(srcMacAddress));
+                    HostHighlight hhSrc = new HostHighlight(hostSrc.id().toString());
+                    hhSrc.setBadge(NodeBadge.text(SFC_ID));
+
+                    highlights.add(dh);
+                    highlights.add(hhSrc);
+                    highlights.add(hhDst);
+                }
+            }
+
+            sendHighlights(highlights);
+        }
+    }
+
+    private synchronized void cancelTask() {
+        if (demoTask != null) {
+            demoTask.cancel();
+            demoTask = null;
+        }
+    }
+
+    private void clearState() {
+        currentMode = Mode.IDLE;
+        elementOfNote = null;
+        linkSet = EMPTY_LINK_SET;
+    }
+
+    private void clearForMode() {
+        sendHighlights(new Highlights());
+    }
+
+    private void sendHighlights(Highlights highlights) {
+        sendMessage(TopoJson.highlightsMessage(highlights));
+    }
+
+}

+/*
+ * Copyright 2016-present 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.sfcweb;
+
+import org.onosproject.net.DeviceId;
+import org.onosproject.net.HostId;
+import org.onosproject.ui.UiTopoOverlay;
+import org.onosproject.ui.topo.PropertyPanel;
+
+
+/**
+ * Our sfcweb topology overlay.
+ */
+public class SfcwebUiTopovOverlay extends UiTopoOverlay {
+
+    // NOTE: this must match the ID defined in sfcwebTopov.js
+    private static final String OVERLAY_ID = "SFC-Service-overlay";
+    private static final String MY_DEVICE_TITLE = "SFF specific device details";
+    private static final String MY_HOST_TITLE = "SF specific host details";
+
+    public SfcwebUiTopovOverlay() {
+        super(OVERLAY_ID);
+    }
+
+    @Override
+    public void modifyDeviceDetails(PropertyPanel pp, DeviceId deviceId) {
+        pp.title(MY_DEVICE_TITLE);
+        pp.removeAllProps();
+        pp.addProp("SFF Device Id", deviceId.toString());
+    }
+
+    @Override
+    public void modifyHostDetails(PropertyPanel pp, HostId hostId) {
+        pp.title(MY_HOST_TITLE);
+        pp.removeAllProps();
+        pp.addProp("SF host Address", hostId.toString());
+    }
+
+}

+/*
+ * Copyright 2016-present 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.
+ */
+
+/**
+ * SFC service topology view overlay.
+ */
+package org.onosproject.sfcweb;

+/* css for sfcweb app topology overlay  */

+<!-- partial HTML -->
+<div id="ov-sfcweb-topov">
+    <p>This is a hidden view .. just a placeholder to house the javascript</p>
+</div>

+/*
+ * Copyright 2016-present 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.
+ */
+
+/*
+ sfc web gui overlay implementation.
+ */
+
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, fs, flash, wss, tds, ds, handlerMap = {};
+
+    // constants
+    var displayStart     = 'sfcwebTopovDisplayStart',
+        showSfcInf       = 'showSfcInfo',
+        clearMessage     = 'sfcTopovClear',
+        configSfpMessage = 'configSfpMessage' ;
+
+    // internal state
+    var currentMode = null;
+
+    // === Main API functions
+
+    function start() {
+        handlerMap[showSfcInf] = showSfcInformation;
+        wss.bindHandlers(handlerMap);
+        wss.sendEvent(displayStart);
+    }
+
+    function dOk() {
+        var sfcId = null;
+        sfcId = d3.select('#sfp-value').property("value");
+
+        if (sfcId) {
+            console.log(sfcId);
+        }
+
+       $log.debug('Dialog OK button clicked');
+
+       wss.sendEvent(configSfpMessage, {
+            id: sfcId
+        });
+
+        flash.flash('SFP ID query:');
+    }
+
+    function dClose() {
+        $log.debug('Dialog Close button clicked (or Esc pressed)');
+    }
+
+    function createUserText() {
+        var content = ds.createDiv();
+        var form = content.append('form');
+        var p = form.append('p');
+
+        p.append('input').attr({
+            id: 'sfp-value',
+            type: 'string',
+            name: 'sfp-value-name'
+        });
+        p.append('span').text('ID');
+        p.append('br');
+
+        return content;
+    }
+
+    function configSfp() {
+        tds.openDialog()
+        .setTitle('SFP ID User Input')
+        .addContent(createUserText())
+        .addOk(dOk, 'OK')
+        .addCancel(dClose, 'Close')
+        .bindKeys();
+    }
+
+    function showSfcInformation(data) {
+        console.log(data);
+        wss.unbindHandlers(handlerMap);
+
+        // Get the modal
+        var modal = document.getElementById('myModal');
+
+        // Get the button that opens the modal
+        var btn = document.getElementById("myBtn");
+
+        // Get the <span> element that closes the modal
+        var span = document.getElementsByClassName("close")[0];
+
+        modal.style.display = "block";
+
+        var tBody = document.getElementById('sfc-info-body');
+
+        var tdString = '' ;
+
+        for (var i = 0; i < data.a.length; i++) {
+            tdString += '<tr> <td>'+ data.a[i] +'</td></tr>';
+        }
+
+        tBody.innerHTML = tdString;
+
+        // When the user clicks on <span> (x), close the modal
+        span.onclick = function() {
+            modal.style.display = "none";
+        }
+
+        // When the user clicks anywhere outside of the modal, close it
+        window.onclick = function(event) {
+            if (event.target == modal) {
+                modal.style.display = "none";
+            }
+        }
+
+    }
+
+    function clear() {
+        wss.sendEvent(clearMessage);
+        flash.flash('Cleared SFC overlay');
+    }
+
+    // === ---------------------------
+    // === Module Factory Definition
+    angular.module('ovSfcwebTopov', [])
+        .factory('SfcwebTopovDemoService',
+        ['$log', 'FnService', 'FlashService', 'WebSocketService', 'TopoDialogService', 'DialogService',
+        function (_$log_, _fs_, _flash_, _wss_, _tds_, _ds_) {
+            $log = _$log_;
+            fs = _fs_;
+            flash = _flash_;
+            wss = _wss_;
+            tds = _tds_;
+            ds = _ds_;
+            return {
+                start: start,
+                showSfcInformation: showSfcInformation,
+                clear: clear,
+                configSfp: configSfp
+            };
+        }]);
+
+}());

+// sfcweb topology overlay - client side
+//
+// This is the glue that binds our business logic (in sfcwebTopovDemo.js)
+// to the overlay framework.
+
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, tov, pps;
+    var longPrefix = 'M15.9,19.1h-8v-13h8V19.1z M90.5,6.1H75.6v13h14.9V6.1' +
+            'z M71.9,6.1H56.9v13h14.9V6.1z M53.2,6.1H38.3v13h14.9V6.1z M34.5,' +
+            '6.1H19.6v13h14.9V6.1z M102.2,6.1h-8v13h8V6.1z' ;
+
+    // our overlay definition
+    var overlay = {
+        // NOTE: this must match the ID defined in SfcWebUiTopovOverlay
+        overlayId: 'SFC-Service-overlay',
+        glyphId: '*star4',
+        tooltip: 'SFC web service Topo Overlay',
+
+        // These glyphs get installed using the overlayId as a prefix.
+        // e.g. 'star4' is installed as 'meowster-overlay-star4'
+        // They can be referenced (from this overlay) as '*star4'
+        // That is, the '*' prefix stands in for 'meowster-overlay-'
+        glyphs: {
+            star4: {
+                vb: '0 0 8 8',
+                d: 'M1,4l2,-1l1,-2l1,2l2,1l-2,1l-1,2l-1,-2z'
+            },
+            jp: {
+                vb: '0 0 110 110',
+                d: 'M84.3,89.3L58.9,64.2l-1.4,1.4L83,90.7L84.3,89.3z M27,7.6H7.4v19.2H27V7.6z' +
+                'M59.3,47.1H39.8v19.2h19.5V47.1z M102.1,79.5H82.6v19.2h19.5V79.5z M41.7,47.6L19,25.1l-1.2,1.2l22.7,22.5L41.7,47.6z'
+            }
+        },
+        activate: function () {
+            $log.debug("SFC service topology overlay ACTIVATED");
+        },
+        deactivate: function () {
+            pps.clear();
+            $log.debug("SFC service topology overlay DEACTIVATED");
+        },
+
+        // Key bindings for traffic overlay buttons
+        // NOTE: fully qual. button ID is derived from overlay-id and key-name
+        // FIXME: find better keys for shortest paths & disjoint paths modes
+        keyBindings: {
+            4: {
+                cb: function () {
+                    pps.start();
+                },
+                tt: 'Query SFP active list information',
+                gid: 'summary'
+            },
+            5: {
+                cb: function () {
+                    pps.configSfp();
+                },
+                tt: 'Highlight SFP active list information',
+                gid: '*jp'
+            },
+
+            _keyOrder: [
+                '4' , '5'
+            ]
+        }
+
+    };
+
+    // invoke code to register with the overlay service
+    angular.module('ovSfcwebTopov')
+        .run(['$log', 'TopoOverlayService', 'SfcwebTopovDemoService',
+
+        function (_$log_, _tov_, _pps_) {
+            $log = _$log_;
+            tov = _tov_;
+            pps = _pps_;
+            tov.register(overlay);
+            $log.debug('ovSfcwebTopov run');
+        }]);
+
+}());

+<link rel="stylesheet" href="app/view/sfcwebTopov/sfcwebTopov.css">
\ No newline at end of file

+<script src="app/view/sfcwebTopov/sfcwebTopovDemo.js"></script>
+<script src="app/view/sfcwebTopov/sfcwebTopovOverlay.js"></script>
+
+<style>
+    /* The Modal (background) */
+    .modal {
+        display: none;
+        position: fixed;
+        z-index: 1;
+        padding-top: 0px;
+        left: 0px;
+        top: 0;
+        width: 37%;
+        height: 25%;
+        overflow: auto;
+        background-color: none;
+        margin: 178px 0px 0px -8px;
+    }
+
+    /* Modal Content */
+    .modal-content {
+        background-color: #fefefe;
+        margin: auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 80%;
+    }
+
+    /* The Close Button */
+    .close {
+        color: #aaaaaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+    }
+
+    .close:hover,
+    .close:focus {
+        color: #000;
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+</style>
+
+<!-- The Modal -->
+<div id="myModal" class="modal">
+
+    <!-- Modal content -->
+    <div class="modal-content">
+        <span class="close">×</span>
+            <table id='sfc-info'>
+                <thead>
+                    <td>SFP ID information</td>
+                </thead>
+                    <tbody id='sfc-info-body'>
+
+                    </tbody>
+            </table>
+    </div>
+</div>