Coding up ONOS GUI tutorial app.
Base table + dialog view
Base overlay
Change-Id: I1bac7dfc8ab916e9dce0df9b0be6a41be07433d7
diff --git a/onos-byon-gui/src/main/java/org/onosproject/byon/gui/NetworkOverlayMessageHandler.java b/onos-byon-gui/src/main/java/org/onosproject/byon/gui/NetworkOverlayMessageHandler.java
new file mode 100644
index 0000000..c0d2154
--- /dev/null
+++ b/onos-byon-gui/src/main/java/org/onosproject/byon/gui/NetworkOverlayMessageHandler.java
@@ -0,0 +1,100 @@
+/*
+ * Copyright 2014-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.byon.gui;
+
+import com.fasterxml.jackson.databind.node.ArrayNode;
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.google.common.base.Strings;
+import com.google.common.collect.ImmutableSet;
+import org.onlab.osgi.ServiceDirectory;
+import org.onos.byon.NetworkService;
+import org.onosproject.net.Device;
+import org.onosproject.net.DeviceId;
+import org.onosproject.net.Host;
+import org.onosproject.net.HostId;
+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.RequestHandler;
+import org.onosproject.ui.UiConnection;
+import org.onosproject.ui.UiMessageHandler;
+import org.onosproject.ui.topo.DeviceHighlight;
+import org.onosproject.ui.topo.Highlights;
+import org.onosproject.ui.topo.NodeBadge;
+import org.onosproject.ui.topo.TopoJson;
+
+import java.util.Collection;
+import java.util.HashSet;
+import java.util.Set;
+import java.util.TimerTask;
+
+/**
+ * Message handler for Network topology overlay events.
+ */
+public class NetworkOverlayMessageHandler extends UiMessageHandler {
+
+ private static final String BYON_FETCH_NETWORKS_REQ = "byonFetchNetworksRequest";
+ private static final String BYON_FETCH_NETWORKS_RESP = "byonFetchNetworksResponse";
+
+ private static final String NETWORKS = "networks";
+
+ private NetworkService networkService;
+ private HostService hostService1;
+
+ @Override
+ public void init(UiConnection connection, ServiceDirectory directory) {
+ super.init(connection, directory);
+ networkService = directory.get(NetworkService.class);
+ hostService1 = get(HostService.class);
+ }
+
+ @Override
+ protected Collection<RequestHandler> createRequestHandlers() {
+ return ImmutableSet.of(
+ new FetchNetworksHandler()
+ );
+ }
+
+ // === -------------------------
+ // === Handler classes
+
+ private class FetchNetworksHandler extends RequestHandler {
+ public FetchNetworksHandler() {
+ super(BYON_FETCH_NETWORKS_REQ);
+ }
+
+ @Override
+ public void process(long sid, ObjectNode payload) {
+ ObjectNode rootNode = objectNode();
+ ArrayNode networks = arrayNode();
+ rootNode.set(NETWORKS, networks);
+
+ for (String name : networkService.getNetworks()) {
+ networks.add(networkData(name));
+ }
+ sendMessage(BYON_FETCH_NETWORKS_RESP, 0, rootNode);
+ }
+
+ private ObjectNode networkData(String name) {
+ return objectNode()
+ .put("name", name)
+ .put("hostCount", networkService.getHosts(name).size());
+ }
+
+ }
+}
diff --git a/onos-byon-gui/src/main/java/org/onosproject/byon/gui/NetworkTableViewMessageHandler.java b/onos-byon-gui/src/main/java/org/onosproject/byon/gui/NetworkTableViewMessageHandler.java
new file mode 100644
index 0000000..31f17cf
--- /dev/null
+++ b/onos-byon-gui/src/main/java/org/onosproject/byon/gui/NetworkTableViewMessageHandler.java
@@ -0,0 +1,130 @@
+/*
+ * Copyright 2014-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.byon.gui;
+
+import com.fasterxml.jackson.databind.node.ArrayNode;
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.google.common.collect.ImmutableSet;
+import org.onos.byon.NetworkService;
+import org.onosproject.net.Host;
+import org.onosproject.net.HostId;
+import org.onosproject.net.host.HostService;
+import org.onosproject.ui.RequestHandler;
+import org.onosproject.ui.UiMessageHandler;
+import org.onosproject.ui.table.TableModel;
+import org.onosproject.ui.table.TableRequestHandler;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.util.ArrayList;
+import java.util.Collection;
+import java.util.List;
+
+/**
+ * Message handler for UI Ref table-view.
+ */
+public class NetworkTableViewMessageHandler extends UiMessageHandler {
+
+ private static final String BYON_NETWORKS_DATA_REQ = "byonNetworkDataRequest";
+ private static final String BYON_NETWORKS_DATA_RESP = "byonNetworkDataResponse";
+ private static final String BYON_NETWORKS = "byonNetworks";
+
+ private static final String BYON_NETWORKS_DETAIL_REQ = "byonNetworkDetailsRequest";
+ private static final String BYON_NETWORKS_DETAIL_RESP = "byonNetworkDetailsResponse";
+ private static final String DETAILS = "details";
+
+ private static final String ID = "id";
+ private static final String HOST_COUNT = "hostCount";
+
+ private static final String[] COLUMN_IDS = {ID, HOST_COUNT};
+
+ private final Logger log = LoggerFactory.getLogger(getClass());
+
+
+ @Override
+ protected Collection<RequestHandler> createRequestHandlers() {
+ return ImmutableSet.of(
+ new ByonNetworkDataRequestHandler(),
+ new ByonNetworkDetailRequestHandler()
+ );
+ }
+
+ // handler for table view data requests
+ private final class ByonNetworkDataRequestHandler extends TableRequestHandler {
+
+ private ByonNetworkDataRequestHandler() {
+ super(BYON_NETWORKS_DATA_REQ, BYON_NETWORKS_DATA_RESP, BYON_NETWORKS);
+ }
+
+ @Override
+ protected String[] getColumnIds() {
+ return COLUMN_IDS;
+ }
+
+ @Override
+ protected void populateTable(TableModel tm, ObjectNode payload) {
+ NetworkService service = get(NetworkService.class);
+ for (String name: service.getNetworks()) {
+ int hostCount = service.getHosts(name).size();
+ populateRow(tm.addRow(), name, hostCount);
+ }
+ }
+
+ private void populateRow(TableModel.Row row, String name, int hostCount) {
+ row.cell(ID, name)
+ .cell(HOST_COUNT, hostCount);
+ }
+ }
+
+ // handler for table view item details requests
+ private final class ByonNetworkDetailRequestHandler extends RequestHandler {
+
+ public static final String HOSTS = "hosts";
+
+ private ByonNetworkDetailRequestHandler() {
+ super(BYON_NETWORKS_DETAIL_REQ);
+ }
+
+ @Override
+ public void process(long sid, ObjectNode payload) {
+ String name = string(payload, ID, "(none)");
+
+ NetworkService networkService = get(NetworkService.class);
+ HostService hostService = get(HostService.class);
+ ObjectNode rootNode = objectNode();
+ ObjectNode data = objectNode();
+ rootNode.set(DETAILS, data);
+
+ ArrayNode hosts = arrayNode();
+ data.set(HOSTS, hosts);
+ data.put(ID, name);
+
+ for (HostId hostId : networkService.getHosts(name)) {
+ hosts.add(hostData(hostService.getHost(hostId)));
+ }
+ sendMessage(BYON_NETWORKS_DETAIL_RESP, 0, rootNode);
+ }
+
+ private ObjectNode hostData(Host host) {
+ return objectNode()
+ .put("mac", host.mac().toString())
+ .put("ip", host.ipAddresses().toString())
+ .put("loc", host.location().toString());
+ }
+ }
+
+}
diff --git a/onos-byon-gui/src/main/java/org/onosproject/byon/gui/NetworkTopoOverlay.java b/onos-byon-gui/src/main/java/org/onosproject/byon/gui/NetworkTopoOverlay.java
new file mode 100644
index 0000000..42b582f
--- /dev/null
+++ b/onos-byon-gui/src/main/java/org/onosproject/byon/gui/NetworkTopoOverlay.java
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2014-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.byon.gui;
+
+import org.onosproject.ui.UiTopoOverlay;
+
+/**
+ * Network Topology Overlay hooks.
+ */
+public class NetworkTopoOverlay extends UiTopoOverlay {
+ // NOTE: this must match the ID defined in uiRefTopov.js
+ private static final String OVERLAY_ID = "byon-overlay";
+
+// private static final String MY_TITLE = "My App Rocks!";
+// private static final String MY_VERSION = "Beta-1.0.0042";
+// private static final String MY_DEVICE_TITLE = "I changed the title";
+//
+// private static final ButtonId FOO_BUTTON = new ButtonId("foo");
+// private static final ButtonId BAR_BUTTON = new ButtonId("bar");
+
+ public NetworkTopoOverlay() {
+ super(OVERLAY_ID);
+ }
+
+/*
+ @Override
+ public void modifySummary(PropertyPanel pp) {
+ pp.title(MY_TITLE)
+ .typeId(TopoConstants.Glyphs.CROWN)
+ .removeProps(
+ TOPOLOGY_SSCS,
+ INTENTS,
+ TUNNELS,
+ FLOWS,
+ VERSION
+ )
+ .addProp(VERSION, MY_VERSION);
+ }
+
+ @Override
+ public void modifyDeviceDetails(PropertyPanel pp, DeviceId deviceId) {
+ pp.title(MY_DEVICE_TITLE);
+ pp.removeProps(LATITUDE, LONGITUDE);
+
+ pp.addButton(FOO_BUTTON)
+ .addButton(BAR_BUTTON);
+
+ pp.removeButtons(TopoConstants.CoreButtons.SHOW_PORT_VIEW)
+ .removeButtons(TopoConstants.CoreButtons.SHOW_GROUP_VIEW);
+ }
+*/
+
+}
diff --git a/onos-byon-gui/src/main/java/org/onosproject/byon/gui/NetworkUiComponent.java b/onos-byon-gui/src/main/java/org/onosproject/byon/gui/NetworkUiComponent.java
new file mode 100644
index 0000000..9c939a1
--- /dev/null
+++ b/onos-byon-gui/src/main/java/org/onosproject/byon/gui/NetworkUiComponent.java
@@ -0,0 +1,97 @@
+/*
+ * Copyright 2014-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.byon.gui;
+
+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;
+
+/**
+ * BYON GUI component. When activated, registers a {@link UiExtension} with
+ * the {@link UiExtensionService}, so that new content is injected into the
+ * ONOS Web UI. This example injects one new view as well as providing a
+ * topology view overlay.
+ */
+@Component(immediate = true)
+public class NetworkUiComponent {
+
+ private static final ClassLoader CL = NetworkUiComponent.class.getClassLoader();
+
+ // There should be matching directory names under ~/resources/app/view/
+ private static final String TABLE_VIEW_ID = "byonNetworks";
+ private static final String TOPOV_VIEW_ID = "byonTopov";
+
+ // Text to appear in the UI navigation pane
+ private static final String TABLE_VIEW_TEXT = "BYON Networks";
+
+ 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 UiView(UiView.Category.OTHER, TABLE_VIEW_ID, TABLE_VIEW_TEXT),
+ new UiViewHidden(TOPOV_VIEW_ID)
+ );
+
+ // Factory for message handlers
+ private final UiMessageHandlerFactory messageHandlerFactory =
+ () -> ImmutableList.of(
+ new NetworkTableViewMessageHandler(),
+ new NetworkOverlayMessageHandler()
+ );
+
+ // Factory for topology overlays
+ private final UiTopoOverlayFactory topoOverlayFactory =
+ () -> ImmutableList.of(
+ new NetworkTopoOverlay()
+ );
+
+ // Build our UI extension definition
+ private UiExtension extension =
+ new UiExtension.Builder(CL, uiViews)
+ .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");
+ }
+
+}
diff --git a/onos-byon-gui/src/main/resources/app/view/byonNetworks/byonNetworks.css b/onos-byon-gui/src/main/resources/app/view/byonNetworks/byonNetworks.css
new file mode 100644
index 0000000..4657ebe
--- /dev/null
+++ b/onos-byon-gui/src/main/resources/app/view/byonNetworks/byonNetworks.css
@@ -0,0 +1,35 @@
+/* css for UI Reference App table view */
+
+#ov-byon-networks h2 {
+ display: inline-block;
+}
+
+/* Panel Styling */
+#ov-byon-networks-item-details-panel.floatpanel {
+ position: absolute;
+ top: 115px;
+}
+
+.light #ov-byon-networks-item-details-panel.floatpanel {
+ background-color: rgb(229, 234, 237);
+}
+.dark #ov-byon-networks-item-details-panel.floatpanel {
+ background-color: #3A4042;
+}
+
+#ov-byon-networks-item-details-panel h3 {
+ margin: 0;
+ font-size: large;
+}
+
+#ov-byon-networks-item-details-panel h4 {
+ margin: 0;
+}
+
+#ov-byon-networks-item-details-panel td {
+ padding: 5px;
+}
+#ov-byon-networks-item-details-panel td.label {
+ font-style: italic;
+ opacity: 0.8;
+}
diff --git a/onos-byon-gui/src/main/resources/app/view/byonNetworks/byonNetworks.html b/onos-byon-gui/src/main/resources/app/view/byonNetworks/byonNetworks.html
new file mode 100644
index 0000000..dc21076
--- /dev/null
+++ b/onos-byon-gui/src/main/resources/app/view/byonNetworks/byonNetworks.html
@@ -0,0 +1,44 @@
+<!-- partial HTML -->
+<div id="ov-byon-networks">
+ <div class="tabular-header">
+ <h2>Items ({{tableData.length}} total)</h2>
+ <div class="ctrl-btns">
+ <div class="refresh" ng-class="{active: autoRefresh}"
+ icon icon-id="refresh" icon-size="36"
+ tooltip tt-msg="autoRefreshTip"
+ ng-click="toggleRefresh()"></div>
+ </div>
+ </div>
+
+ <div class="summary-list" onos-table-resize>
+
+ <div class="table-header" onos-sortable-header>
+ <table>
+ <tr>
+ <td colId="id" sortable>Item ID </td>
+ <td colId="hostCount" sortable>Host Count </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="table-body">
+ <table>
+ <tr ng-if="!tableData.length" class="no-data">
+ <td colspan="2">
+ No Items found
+ </td>
+ </tr>
+
+ <tr ng-repeat="network in tableData track by $index"
+ ng-click="selectCallback($event, network)"
+ ng-class="{selected: network.id === selId}">
+ <td>{{network.id}}</td>
+ <td>{{network.hostCount}}</td>
+ </tr>
+ </table>
+ </div>
+
+ </div>
+
+ <ov-byon-networks-details-panel></ov-byon-networks-details-panel>
+</div>
diff --git a/onos-byon-gui/src/main/resources/app/view/byonNetworks/byonNetworks.js b/onos-byon-gui/src/main/resources/app/view/byonNetworks/byonNetworks.js
new file mode 100644
index 0000000..e38fd8c
--- /dev/null
+++ b/onos-byon-gui/src/main/resources/app/view/byonNetworks/byonNetworks.js
@@ -0,0 +1,146 @@
+// js for UI Reference App table view
+(function () {
+ 'use strict';
+
+ // injected refs
+ var $log, $scope, fs, wss;
+
+ // constants
+ var detailsReq = 'byonNetworkDetailsRequest',
+ detailsResp = 'byonNetworkDetailsResponse',
+ pName = 'ov-byon-networks-details-panel',
+
+ propOrder = ['id', 'hostCount'],
+ friendlyProps = ['Network', 'Host Count'];
+
+
+ function addProp(tbody, index, value) {
+ var tr = tbody.append('tr');
+
+ function addCell(cls, txt) {
+ tr.append('td').attr('class', cls).html(txt);
+ }
+
+ addCell('label', friendlyProps[index] + ' :');
+ addCell('value', value);
+ }
+
+ function addHost(tbody, host) {
+ var tr = tbody.append('tr');
+ tr.append('td').html(host.mac)
+ .append('td').html(host.ip)
+ .append('td').html(host.loc);
+ }
+
+ function populatePanel(panel) {
+ var title = panel.append('h3'),
+ tbody = panel.append('table').append('tbody');
+
+ title.text('Network ' + $scope.panelDetails.id);
+ $scope.panelDetails.hosts.forEach(function (host, i) {
+ addHost(tbody, host);
+ });
+ }
+
+ function respDetailsCb(data) {
+ $scope.panelDetails = data.details;
+ $scope.$apply();
+ }
+
+ angular.module('ovByonNetworks', [])
+ .controller('OvByonNetworksCtrl',
+ ['$log', '$scope', 'TableBuilderService',
+ 'FnService', 'WebSocketService',
+
+ function (_$log_, _$scope_, tbs, _fs_, _wss_) {
+ $log = _$log_;
+ $scope = _$scope_;
+ fs = _fs_;
+ wss = _wss_;
+
+ var handlers = {};
+ $scope.panelDetails = {};
+
+ // details response handler
+ handlers[detailsResp] = respDetailsCb;
+ wss.bindHandlers(handlers);
+
+ // custom selection callback
+ function selCb($event, row) {
+ if ($scope.selId) {
+ wss.sendEvent(detailsReq, {id: row.id});
+ } else {
+ $scope.hidePanel();
+ }
+ $log.debug('Got a click on:', row);
+ }
+
+ // TableBuilderService creating a table for us
+ tbs.buildTable({
+ scope: $scope,
+ tag: 'byonNetwork',
+ selCb: selCb
+ });
+
+ // cleanup
+ $scope.$on('$destroy', function () {
+ wss.unbindHandlers(handlers);
+ $log.log('OvByonNetworksCtrl has been destroyed');
+ });
+
+ $log.log('OvByonNetworksCtrl has been created');
+ }])
+
+ .directive('ovByonNetworksDetailsPanel', ['PanelService', 'KeyService',
+ function (ps, ks) {
+ return {
+ restrict: 'E',
+ link: function (scope, element, attrs) {
+ // insert details panel with PanelService
+ // create the panel
+ var panel = ps.createPanel(pName, {
+ width: 200,
+ margin: 20,
+ hideMargin: 0
+ });
+ panel.hide();
+ scope.hidePanel = function () {
+ panel.hide();
+ };
+
+ function closePanel() {
+ if (panel.isVisible()) {
+ $scope.selId = null;
+ panel.hide();
+ return true;
+ }
+ return false;
+ }
+
+ // create key bindings to handle panel
+ ks.keyBindings({
+ esc: [closePanel, 'Close the details panel'],
+ _helpFormat: ['esc']
+ });
+ ks.gestureNotes([
+ ['click', 'Select a row to show item details']
+ ]);
+
+ // update the panel's contents when the data is changed
+ scope.$watch('panelDetails', function () {
+ if (!fs.isEmptyObject(scope.panelDetails)) {
+ panel.empty();
+ populatePanel(panel);
+ panel.show();
+ }
+ });
+
+ // cleanup on destroyed scope
+ scope.$on('$destroy', function () {
+ ks.unbindKeys();
+ ps.destroyPanel(pName);
+ });
+ }
+ };
+ }]);
+}());
diff --git a/onos-byon-gui/src/main/resources/app/view/byonTopov/byonTopov.css b/onos-byon-gui/src/main/resources/app/view/byonTopov/byonTopov.css
new file mode 100644
index 0000000..2c4e8a5
--- /dev/null
+++ b/onos-byon-gui/src/main/resources/app/view/byonTopov/byonTopov.css
@@ -0,0 +1,7 @@
+/* css for UI Reference App topology overlay */
+
+#topo-p-dialog .my-content-class div p {
+ color: #373;
+ font-size: 9pt;
+ padding-left: 12px;
+}
diff --git a/onos-byon-gui/src/main/resources/app/view/byonTopov/byonTopov.html b/onos-byon-gui/src/main/resources/app/view/byonTopov/byonTopov.html
new file mode 100644
index 0000000..03421d4
--- /dev/null
+++ b/onos-byon-gui/src/main/resources/app/view/byonTopov/byonTopov.html
@@ -0,0 +1,20 @@
+<!--
+ ~ Copyright 2014-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.
+ -->
+
+<!-- partial HTML -->
+<div id="ov-byon-topov">
+ <p>This is a hidden view .. just a placeholder to house the javascript</p>
+</div>
diff --git a/onos-byon-gui/src/main/resources/app/view/byonTopov/byonTopovOverlay.js b/onos-byon-gui/src/main/resources/app/view/byonTopov/byonTopovOverlay.js
new file mode 100644
index 0000000..341a322
--- /dev/null
+++ b/onos-byon-gui/src/main/resources/app/view/byonTopov/byonTopovOverlay.js
@@ -0,0 +1,81 @@
+/*
+ * Copyright 2014-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.
+ */
+
+// UI Reference App - topology overlay - client side
+//
+// This is the glue that binds our business logic (in uiRefTopovDemo.js)
+// to the overlay framework.
+
+(function () {
+ 'use strict';
+
+ // injected refs
+ var $log, tov, byon;
+
+ // internal state should be kept in the service module (not here)
+
+ // our overlay definition
+ var overlay = {
+ // NOTE: this must match the ID defined in ByonTopoOverlay
+ overlayId: 'byon-overlay',
+ glyphId: 'topo',
+ tooltip: 'Virtual Networks Overlay',
+
+ activate: function () {
+ $log.debug("BYON topology overlay ACTIVATED");
+ byon.start();
+ },
+ deactivate: function () {
+ $log.debug("BYON topology overlay DEACTIVATED");
+ byon.stop();
+ },
+
+ // Key bindings for traffic overlay buttons
+ // NOTE: fully qual. button ID is derived from overlay-id and key-name
+ keyBindings: {
+ G: {
+ cb: function () { byon.openNetworkList(); },
+ tt: 'Open Networks list',
+ gid: 'details'
+ },
+
+ _keyOrder: [
+ 'G'
+ ]
+ },
+
+ hooks: {
+ // hook for handling escape key
+ // Must return true to consume ESC, false otherwise.
+ escape: function () {
+ // Must return true to consume ESC, false otherwise.
+ return byon.handleEscape();
+ }
+ }
+ };
+
+ // invoke code to register with the overlay service
+ angular.module('ovByonTopov')
+ .run(['$log', 'TopoOverlayService', 'ByonTopovService',
+
+ function (_$log_, _tov_, _demo_) {
+ $log = _$log_;
+ tov = _tov_;
+ byon = _demo_;
+ tov.register(overlay);
+ }]);
+
+}());
diff --git a/onos-byon-gui/src/main/resources/app/view/byonTopov/byonTopovService.js b/onos-byon-gui/src/main/resources/app/view/byonTopov/byonTopovService.js
new file mode 100644
index 0000000..3b6723c
--- /dev/null
+++ b/onos-byon-gui/src/main/resources/app/view/byonTopov/byonTopovService.js
@@ -0,0 +1,124 @@
+/*
+ * Copyright 2014-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.
+ */
+
+/*
+ Sample Demo module. This contains the "business logic" for the topology
+ overlay that we are implementing.
+ */
+
+(function () {
+ 'use strict';
+
+ // injected refs
+ var $log, fs, flash, wss, tss, tds;
+
+ // constants
+ var dataRequest = 'byonFetchNetworksRequest',
+ dataResponse = 'byonFetchNetworksResponse';
+
+ // internal state
+ var networks,
+ handlers = {};
+
+
+ // === ---------------------------
+ // === Helper functions
+
+ function sendDisplayStop() {
+ wss.sendEvent(displayStop);
+ }
+
+ function createListContent() {
+ var content = tds.createDiv('my-content-class'),
+ items;
+ items = content.append('div');
+ networks.forEach(function (d) {
+ items.append('p').text(d.name + ' (' + d.hostCount + ')');
+ });
+ return content;
+ }
+
+ function dClose() {
+ $log.debug('Dialog OK button pressed');
+ }
+
+ function processResponse(data) {
+ networks = data.networks;
+ tds.openDialog()
+ .setTitle('Virtual Networks')
+ .addContent(createListContent())
+ .addButton('Close', dClose);
+ }
+
+ function registerHandlers() {
+ handlers[dataResponse] = processResponse;
+ wss.bindHandlers(handlers);
+ }
+
+ function unregisterHandlers() {
+ wss.unbindHandlers(handlers);
+ }
+
+ // === ---------------------------
+ // === Main API functions
+
+ // this example dialog invoked from the toolbar
+ function start() {
+ $log.debug('BYON start');
+ registerHandlers();
+ openNetworkList();
+ }
+
+ // this example dialog invoked from the toolbar
+ function stop() {
+ $log.debug('BYON stop');
+ unregisterHandlers();
+ }
+
+ function openNetworkList() {
+ wss.sendEvent(dataRequest);
+ }
+
+ function handleEscape() {
+ // TODO: close the dialog
+ $log.debug("BYON escape");
+ return false;
+ }
+
+ // === ---------------------------
+ // === Module Factory Definition
+
+ angular.module('ovByonTopov', [])
+ .factory('ByonTopovService',
+ ['$log', 'FnService', 'FlashService', 'WebSocketService',
+ 'TopoSelectService', 'TopoDialogService',
+
+ function (_$log_, _fs_, _flash_, _wss_, _tss_, _tds_) {
+ $log = _$log_;
+ fs = _fs_;
+ flash = _flash_;
+ wss = _wss_;
+ tss = _tss_;
+ tds = _tds_;
+
+ return {
+ start: start,
+ stop: stop,
+ openNetworkList: openNetworkList,
+ handleEscape: handleEscape
+ };
+ }]);
+}());
diff --git a/onos-byon-gui/src/main/resources/css.html b/onos-byon-gui/src/main/resources/css.html
new file mode 100644
index 0000000..e9c28cd
--- /dev/null
+++ b/onos-byon-gui/src/main/resources/css.html
@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="app/view/byonNetworks/byonNetworks.css">
+<link rel="stylesheet" href="app/view/byonTopov/byonTopov.css">
diff --git a/onos-byon-gui/src/main/resources/js.html b/onos-byon-gui/src/main/resources/js.html
new file mode 100644
index 0000000..2d74ecf
--- /dev/null
+++ b/onos-byon-gui/src/main/resources/js.html
@@ -0,0 +1,3 @@
+<script src="app/view/byonNetworks/byonNetworks.js"></script>
+<script src="app/view/byonTopov/byonTopovService.js"></script>
+<script src="app/view/byonTopov/byonTopovOverlay.js"></script>