- terms of the Eclipse Public License v1.0 which accompanies this distribution,
- and is available at http://www.eclipse.org/legal/epl-v10.html
--%>
-<%@ page import="java.net.URL" %>
-<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<%@ page import="java.net.URL"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Bootstrap CSS - 1 -->
- <link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
+<!-- Bootstrap CSS - 1 -->
+<link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
- <!-- Core CSS - 2 -->
- <link rel="stylesheet/less" type="text/css" href="/css/one.less">
+<!-- Core CSS - 2 -->
+<link rel="stylesheet/less" type="text/css" href="/css/one.less">
-<c:set var="version" value="Version 0.1" scope="application"/>
-<c:set var="name" value="OpenDaylight" scope="application"/>
+<c:set var="version" value="Version 0.1" scope="application" />
+<c:set var="name" value="OpenDaylight" scope="application" />
-<%
- String filePath = "/WEB-INF/jsp/custommain.jsp";
+<%
+ String filePath = "/WEB-INF/jsp/custommain.jsp";
URL fileURL = pageContext.getServletContext().getResource(filePath);
- if(fileURL!=null) {
+ if (fileURL != null) {
%>
- <jsp:include page="<%=filePath%>" flush="true"/>
-<% } %>
-
- <title>${name}</title>
- <!-- jQuery - 1 -->
- <script src="/js/jquery-1.9.1.min.js"></script>
-
- <!-- Bootstrap JS - 2 -->
- <script src="/js/bootstrap.min.js"></script>
-
- <!-- LESS - 3 -->
- <script type="text/javascript">
- less = {
- env: "production"
- };
- </script>
- <script src="/js/less-1.3.3.min.js"></script>
-
- <!-- Topology - 4 -->
- <script src="/js/jit.js"></script>
+<jsp:include page="<%=filePath%>" flush="true" />
+<%
+ }
+%>
+
+<title>${name}</title>
+<!-- jQuery - 1 -->
+<script src="/js/jquery-1.9.1.min.js"></script>
+
+<!-- Bootstrap JS - 2 -->
+<script src="/js/bootstrap.min.js"></script>
+
+<!-- LESS - 3 -->
+<script type="text/javascript">
+ less = {
+ env : "production"
+ };
+</script>
+<script src="/js/less-1.3.3.min.js"></script>
+
+<!-- Topology - 4 -->
+<script src="/js/jit.js"></script>
</head>
<body>
-<!-- #menu -->
-<div id="menu" class="navbar navbar-fixed-top">
- <div class="navbar-inner row-fluid">
- <div class="span10">
- <a class="brand" href="/" title="${version}">${name}</a>
- <ul class="nav nav-tabs">
- </ul>
- </div>
- <div class="span2">
- <div id="toolbar" class="btn-group">
- <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
- <div class="icon-user"></div> ${username}
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu">
- <li><a href="#admin" id="admin" data-role="${role}"><div class="icon-users"></div> Users</a></li>
- <li><a href="#save" id="save"><div class="icon-save"></div> Save</a></li>
- <li><a href="#logout" id="logout"><div class="icon-logout"></div> Logout</a></li>
- </ul>
- </div>
- </div>
- </div>
-</div><!-- END #menu -->
-
-<!-- #footer -->
-<div id="footer" class="navbar navbar-fixed-bottom">
- <div class="navbar-inner row-fluid">
- <div class="alert hide" id="alert">
- <button type="button" class="close">×</button>
- <p></p>
- </div>
- </div>
-</div><!-- END #footer -->
-
-<!-- #main -->
-<div id="main">
-
-<!-- #left -->
-<div id="left">
-
- <!-- #left-top -->
- <div id="left-top">
-
- <div class="dash">
- <ul class="nav nav-tabs">
- </ul>
- <div class="dashlet row-fluid">
- </div>
- </div>
-
- </div><!-- END #left-top -->
-
- <!-- #left-bottom -->
- <div id="left-bottom">
-
- <div class="dash">
- <ul class="nav nav-tabs">
- </ul>
- <div class="dashlet row-fluid">
- </div>
- </div>
-
- </div><!-- END #left-bottom -->
-
-</div><!-- END #left -->
-
-<!-- #right -->
-<div id="right">
-
- <!-- #right-top -->
- <div id="right-top">
-
- <div class="dash">
- <div id="topology"></div>
- </div>
-
- </div><!-- END #right-top -->
-
- <!-- #right-bottom -->
- <div id="right-bottom">
-
- <div class="dash">
- <ul class="nav nav-tabs">
- </ul>
- <div class="dashlet row-fluid">
- </div>
- </div>
-
- </div><!-- END #right-bottom -->
-
-</div><!-- END #right -->
-
-</div><!-- END #main -->
-
-<!-- modal -->
-<div id="modal" class="modal hide fade">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h3></h3>
- </div>
- <div class="modal-body"></div>
- <div class="modal-footer"></div>
-</div>
-<!-- END modal -->
-
-<!-- Core JS - 6 -->
-<script src="/js/one.js"></script>
-
-<!-- Topology JS - 7 -->
-<script src="/js/one-topology.js"></script>
+ <!-- #menu -->
+ <div id="menu" class="navbar navbar-fixed-top">
+ <div class="navbar-inner row-fluid">
+ <div class="span10">
+ <a class="brand" href="/" title="${version}">${name}</a>
+ <ul class="nav nav-tabs">
+ </ul>
+ </div>
+ <div class="span2">
+ <div id="toolbar" class="btn-group">
+ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+ <div class="icon-user"></div> ${username} <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <li><a href="#admin" id="admin" data-role="${role}"><div
+ class="icon-users"></div> Users</a></li>
+ <li><a href="#save" id="save"><div class="icon-save"></div>
+ Save</a></li>
+ <li><a href="#logout" id="logout"><div
+ class="icon-logout"></div> Logout</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- END #menu -->
+
+ <!-- #footer -->
+ <div id="footer" class="navbar navbar-fixed-bottom">
+ <div class="navbar-inner row-fluid">
+ <div class="alert hide" id="alert">
+ <button type="button" class="close">×</button>
+ <p></p>
+ </div>
+ </div>
+ </div>
+ <!-- END #footer -->
+
+ <!-- #main -->
+ <div id="main">
+
+ <!-- #left -->
+ <div id="left">
+
+ <!-- #left-top -->
+ <div id="left-top">
+
+ <div class="dash">
+ <ul class="nav nav-tabs">
+ </ul>
+ <div class="dashlet row-fluid"></div>
+ </div>
+
+ </div>
+ <!-- END #left-top -->
+
+ <!-- #left-bottom -->
+ <div id="left-bottom">
+
+ <div class="dash">
+ <ul class="nav nav-tabs">
+ </ul>
+ <div class="dashlet row-fluid"></div>
+ </div>
+
+ </div>
+ <!-- END #left-bottom -->
+
+ </div>
+ <!-- END #left -->
+
+ <!-- #right -->
+ <div id="right">
+
+ <!-- #right-top -->
+ <div id="right-top">
+
+ <div class="dash">
+ <div id="topology"></div>
+ </div>
+
+ </div>
+ <!-- END #right-top -->
+
+ <!-- #right-bottom -->
+ <div id="right-bottom">
+
+ <div class="dash">
+ <ul class="nav nav-tabs">
+ </ul>
+ <div class="dashlet row-fluid"></div>
+ </div>
+
+ </div>
+ <!-- END #right-bottom -->
+
+ </div>
+ <!-- END #right -->
+
+ </div>
+ <!-- END #main -->
+
+ <!-- modal -->
+ <div id="modal" class="modal hide fade">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal"
+ aria-hidden="true">×</button>
+ <h3></h3>
+ </div>
+ <div class="modal-body"></div>
+ <div class="modal-footer"></div>
+ </div>
+ <!-- END modal -->
+
+ <!-- Lib JS - 6 -->
+ <script src="/js/lib.js"></script>
+ <%
+ String jsPath = "/WEB-INF/jsp/customjs.jsp";
+ URL jsURL = pageContext.getServletContext().getResource(jsPath);
+ if (jsURL != null) {
+ %>
+ <jsp:include page="<%=jsPath%>" flush="true" />
+ <%
+ } else {
+ %>
+ <!-- Core JS - 7 -->
+ <script src="/js/open.js"></script>
+
+ <!-- Topology JS - 8 -->
+ <script src="/js/open-topology.js"></script>
+ <%
+ }
+ %>
</body>
--- /dev/null
+// global
+var one = {
+ // global variables
+ global : {
+ remoteAddress : "/"
+ },
+ role : null
+}
+
+// one ui library
+one.lib = {};
+
+// registry
+one.lib.registry = {};
+
+/** DASHLET */
+one.lib.dashlet = {
+ empty : function($dashlet) {
+ $dashlet.empty();
+ },
+ append : function($dashlet, $content) {
+ $dashlet.append($content);
+ },
+ header : function(header) {
+ var $h4 = $(document.createElement('h4'));
+ $h4.text(header);
+ return $h4;
+ },
+ list : function(list) {
+ var $ul = $(document.createElement('ul'));
+ $(list).each(function(index, value) {
+ var $li = $(document.createElement('li'));
+ $li.append(value);
+ $ul.append($li);
+ });
+ return $ul;
+ },
+ button : {
+ config : function(name, id, type, size) {
+ var button = {};
+ button['name'] = name;
+ button['id'] = id;
+ button['type'] = type;
+ button['size'] = size;
+ return button;
+ },
+ single : function(name, id, type, size) {
+ var buttonList = [];
+ var button = one.lib.dashlet.button.config(name, id, type, size);
+ buttonList.push(button);
+ return buttonList;
+ },
+ button : function(buttonList) {
+ var $buttonGroup = $(document.createElement('div'));
+ $buttonGroup.addClass("btn-group");
+ $(buttonList).each(function(index, value) {
+ var $button = $(document.createElement('button'));
+ $button.text(value.name);
+ $button.addClass('btn');
+ $button.addClass(value['type']);
+ $button.addClass(value['size']);
+ if (!(typeof value.id === 'undefined')) {
+ $button.attr('id', value.id);
+ }
+ $buttonGroup.append($button);
+ });
+ return $buttonGroup;
+ }
+ },
+ table : {
+ table : function(classes, id) {
+ var $table = $(document.createElement('table'));
+ $table.addClass("table");
+ $(classes).each(function(index, value) {
+ $table.addClass(value);
+ });
+ if (!(typeof id === 'undefined'))
+ $table.attr("id", id);
+ return $table;
+ },
+ header : function(headers) {
+ var $thead = $(document.createElement('thead'));
+ var $tr = $(document.createElement('tr'));
+ $(headers).each(function(index, value) {
+ $th = $(document.createElement('th'));
+ $th.append(value);
+ $tr.append($th);
+ });
+ $thead.append($tr);
+ return $thead;
+ },
+ body : function(body, thead) {
+ var $tbody = $(document.createElement('tbody'));
+ // if empty
+ if (body.length == 0 && !(typeof thead === 'undefined')) {
+ var $tr = $(document.createElement('tr'));
+ var $td = $(document.createElement('td'));
+ $td.attr("colspan", thead.length);
+ $td.text("No data available");
+ $td.addClass("empty");
+ $tr.append($td);
+ $tbody.append($tr);
+ return $tbody;
+ }
+ // else, populate as usual
+ $(body).each(function(index, value) {
+ var $tr = $(document.createElement('tr'));
+ // data-id
+ if (value['id'] != undefined) {
+ $tr.attr('data-id', value['id']);
+ }
+ // add classes
+ $(value["type"]).each(function(index, value) {
+ $tr.addClass(value);
+ });
+ // add entries
+ $(value["entry"]).each(function(index, value) {
+ var $td = $(document.createElement('td'));
+ $td.append(value);
+ $tr.append($td);
+ });
+ $tbody.append($tr);
+ });
+ return $tbody;
+ }
+ },
+ description : function(description, horizontal) {
+ var $dl = $(document.createElement('dl'));
+ if (horizontal == true) {
+ $dl.addClass("dl-horizontal");
+ }
+ $(description).each(function(index, value) {
+ var $dt = $(document.createElement('dt'));
+ $dt.text(value.dt);
+ var $dd = $(document.createElement('dd'));
+ $dd.text(value.dd);
+ $dl.append($dt).append($dd);
+ });
+ return $dl;
+ }
+}
+
+/** MODAL */
+one.lib.modal = {
+ // clone default modal
+ clone : function(id) {
+ var $clone = $("#modal").clone(true);
+ $clone.attr("id", id);
+ return $clone;
+ },
+ // populate modal
+ populate : function($modal, header, $body, footer) {
+ var $h3 = $modal.find("h3");
+ $h3.text(header);
+
+ var $modalBody = $modal.find(".modal-body");
+ $modalBody.append($body);
+
+ $(footer).each(function(index, value) {
+ $modal.find(".modal-footer").append(value);
+ });
+ },
+ // clone and populate modal
+ spawn : function(id, header, $body, footer) {
+ var $modal = one.lib.modal.clone(id);
+ one.lib.modal.populate($modal, header, $body, footer);
+ return $modal;
+ },
+ // empty modal
+ empty : function($modal) {
+ $modal.find("h3").empty();
+ $modal.find(".modal-body").empty();
+ $modal.find(".modal-footer").empty();
+ },
+ // injection
+ inject : {
+ body : function($modal, $body) {
+ $modal.find(".modal-body").empty();
+ $modal.find(".modal-body").append($body);
+ }
+ }
+}
+
+/** FORM */
+one.lib.form = {
+ // create select-option form element
+ select : {
+ create : function(options, multiple) {
+ // assert - auto assign
+ if (options == undefined)
+ options = {};
+
+ var $select = $(document.createElement('select'));
+ if (multiple == true) {
+ $select.attr("multiple", "multiple");
+ }
+ var optionArray = one.lib.form.select.options(options);
+ $(optionArray).each(function(index, value) {
+ $select.append(value);
+ });
+ return $select;
+ },
+ options : function(options) {
+ var result = [];
+ $.each(options, function(key, value) {
+ var $option = $(document.createElement('option'));
+ $option.attr("value", key);
+ $option.text(value);
+ result.push($option);
+ });
+ return result;
+ },
+ empty : function($select) {
+ $select.empty();
+ },
+ inject : function($select, options) {
+ $select.empty();
+ var options = one.lib.form.select.options(options);
+ $select.append(options);
+ },
+ prepend : function($select, options) {
+ var options = one.lib.form.select.options(options);
+ $select.prepend(options);
+ },
+ bubble : function($select, bubble) {
+ $($select.find("option")).each(function(index, value) {
+ if ($(value).attr("value") == bubble) {
+ var option = $(value);
+ $(value).remove();
+ $select.prepend(option);
+ return;
+ }
+ });
+ }
+ },
+ // create legend form element
+ legend : function(name) {
+ var $legend = $(document.createElement('legend'));
+ $legend.text(name);
+ return $legend;
+ },
+ // create label form element
+ label : function(name) {
+ var $label = $(document.createElement('label'));
+ $label.text(name);
+ return $label;
+ },
+ // create help block form element
+ help : function(help) {
+ var $help = $(document.createElement('span'));
+ $help.text(help);
+ $help.addClass("help-block");
+ return $help;
+ },
+ // create generic text input
+ input : function(placeholder) {
+ var $input = $(document.createElement('input'));
+ $input.attr('type', 'text');
+ $input.attr('placeholder', placeholder);
+ return $input;
+ }
+}
+
+/** NAV */
+one.lib.nav = {
+ unfocus : function($nav) {
+ $($nav.find("li")).each(function(index, value) {
+ $(value).removeClass("active");
+ });
+ }
+}
+
+/** ALERT */
+one.lib.alert = function(alert) {
+ $("#alert p").text(alert);
+ $("#alert").hide();
+ $("#alert").slideToggle();
+ clearTimeout(one.lib.registry.alert);
+ one.lib.registry.alert = setTimeout(function() {
+ $("#alert").slideUp();
+ }, 8000);
+}
\ No newline at end of file
+++ /dev/null
-/** COMMON **/
-var labelType, useGradients, nativeTextSupport, animate;
-
-(function() {
- var ua = navigator.userAgent,
- iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
- typeOfCanvas = typeof HTMLCanvasElement,
- nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
- textSupport = nativeCanvasSupport
- && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
- //I'm setting this based on the fact that ExCanvas provides text support for IE
- //and that as of today iPhone/iPad current text support is lame
- labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
- nativeTextSupport = labelType == 'Native';
- useGradients = nativeCanvasSupport;
- animate = !(iStuff || !nativeCanvasSupport);
-})();
-
-/** TOPOLOGY **/
-one.topology = {};
-
-one.topology.option = {
- navigation : function(enable, panning, zooming) {
- var option = {};
- option["enable"] = enable;
- option["panning"] = panning;
- option["zooming"] = zooming;
- return option;
- },
- node : function(overridable, color, height, dim) {
- var option = {};
- option["overridable"] = overridable;
- option["color"] = color;
- option["height"] = height;
- option["dim"] = dim;
- return option;
- },
- edge : function(overridable, color, lineWidth, epsilon) {
- var option = {};
- option["overridable"] = overridable;
- option["color"] = color;
- option["lineWidth"] = lineWidth;
- if (epsilon != undefined)
- option["epsilon"] = epsilon;
- return option;
- },
- label : function(style, node) {
- var marginTop, minWidth;
- if (node.data["$type"] == "swtch") {
- marginTop = "42px";
- minWidth = "65px";
- } else if (node.data["$type"] == "host") {
- marginTop = "48px";
- minWidth = "";
- } else if (node.data["$type"].indexOf("monitor") == 0) {
- marginTop = "52px";
- minWidth = "";
- }
- style.marginTop = marginTop;
- style.minWidth = minWidth;
- style.background = "rgba(68,68,68,0.7)";
- style.borderRadius = "4px";
- style.color = "#fff";
- style.cursor = "default";
- }
-};
-
-one.topology.init = function(json) {
- if (json.length == 0) {
- $div = $(document.createElement('div'));
- $img = $(document.createElement('div'));
- $img.css('height', '128px');
- $img.css('width', '128px');
- $img.css('background-image', 'url(/img/topology_view_1033_128.png)');
- $img.css('clear', 'both');
- $img.css('margin', '0 auto');
- $p = $(document.createElement('p'));
- $p.addClass('text-center');
- $p.addClass('text-info');
- $p.css('width', '100%');
- $p.css('padding', '10px 0');
- $p.css('cursor', 'default');
- $p.append('No Network Elements Connected');
- $div.css('position', 'absolute');
- $div.css('top', '25%');
- $div.css('margin', '0 auto');
- $div.css('width', '100%');
- $div.css('text-align', 'center');
- $div.append($img).append($p);
- $("#topology").append($div);
- return false;
- }
- one.topology.graph = new $jit.MultiTopology({
- injectInto: 'topology',
- Navigation: one.topology.option.navigation(true, 'avoid nodes', 10),
- Node: one.topology.option.node(true, '#444', 25, 27),
- Edge: one.topology.option.edge(true, '23A4FF', 1.5),
- Tips: {
- enable: true,
- type: 'Native',
- onShow: function(tip, node) {
- if (node.name != undefined)
- tip.innerHTML = "";
- //tipsOnShow(tip, node);
- }
- },
- Events: {
- enable: true,
- type: 'Native',
- onMouseEnter: function(node, eventInfo, e) {
- // if node
- if (node.id != undefined) {
- one.topology.graph.canvas.getElement().style.cursor = 'move';
- } else if (eventInfo.edge != undefined &&
- eventInfo.edge.nodeTo.data["$type"] == "swtch" &&
- eventInfo.edge.nodeFrom.data["$type"] == "swtch") {
- one.topology.graph.canvas.getElement().style.cursor = 'pointer';
- }
- },
- onMouseLeave: function(node, eventInfo, e) {
- one.topology.graph.canvas.getElement().style.cursor = '';
- },
- //Update node positions when dragged
- onDragMove: function(node, eventInfo, e) {
- var pos = eventInfo.getPos();
- node.pos.setc(pos.x, pos.y);
- one.topology.graph.plot();
- one.topology.graph.canvas.getElement().style.cursor = 'crosshair';
- },
- //Implement the same handler for touchscreens
- onTouchMove: function(node, eventInfo, e) {
- $jit.util.event.stop(e); //stop default touchmove event
- this.onDragMove(node, eventInfo, e);
- },
- onDragEnd: function(node, eventInfo, e) {
- var ps = eventInfo.getPos();
- var did = node.id;
- var data = {};
- data['x'] = ps.x;
- data['y'] = ps.y;
- $.post('/controller/web/topology/node/' + did, data);
- },
- onClick: function(node, eventInfo, e) {
- if(one.f.topology === undefined) {
- return false;
- } else {
- one.f.topology.Events.onClick(node, eventInfo);
- }
- }
- },
- iterations: 200,
- levelDistance: 130,
- onCreateLabel: function(domElement, node){
- var nameContainer = document.createElement('span'),
- closeButton = document.createElement('span'),
- style = nameContainer.style;
- nameContainer.className = 'name';
- var nodeDesc = node.data["$desc"];
- if (nodeDesc == "None" || nodeDesc == "" || nodeDesc == "undefined" || nodeDesc == undefined) {
- nameContainer.innerHTML = "<small>"+node.name+"</small>";
- } else {
- nameContainer.innerHTML = nodeDesc;
- }
- domElement.appendChild(nameContainer);
- style.fontSize = "1.0em";
- style.color = "#000";
- style.fontWeight = "bold";
- style.width = "100%";
- style.padding = "1.5px 4px";
- style.display = "block";
-
- one.topology.option.label(style, node);
- },
- onPlaceLabel: function(domElement, node){
- var style = domElement.style;
- var left = parseInt(style.left);
- var top = parseInt(style.top);
- var w = domElement.offsetWidth;
- style.left = (left - w / 2) + 'px';
- style.top = (top - 15) + 'px';
- style.display = '';
- style.minWidth = "28px";
- style.width = "auto";
- style.height = "28px";
- style.textAlign = "center";
- }
- });
-
- one.topology.graph.loadJSON(json);
- // compute positions incrementally and animate.
- one.topology.graph.computeIncremental({
- iter: 40,
- property: 'end',
- onStep: function(perc){
- console.log(perc + '% loaded');
- },
- onComplete: function(){
- for (var idx in one.topology.graph.graph.nodes) {
- var node = one.topology.graph.graph.nodes[idx];
- if(node.getData("x") && node.getData("y")) {
- var x = node.getData("x");
- var y = node.getData("y");
- node.setPos(new $jit.Complex(x, y), "end");
- }
- }
- console.log('done');
- one.topology.graph.animate({
- modes: ['linear'],
- transition: $jit.Trans.Elastic.easeOut,
- duration: 0
- });
- }
- });
- one.topology.graph.canvas.setZoom(0.8,0.8);
-}
-
-one.topology.update = function() {
- $('#topology').empty();
- $.getJSON(one.global.remoteAddress+"controller/web/topology/visual.json", function(data) {
- one.topology.init(data);
- });
-}
-
-/** INIT */
-$.getJSON(one.global.remoteAddress+"controller/web/topology/visual.json", function(data) {
- one.topology.init(data);
-});
+++ /dev/null
-// global
-var one = {
- // global variables
- global : {
- remoteAddress : "/"
- },
- role : null
-}
-
-// one ui library
-one.lib = {};
-
-// registry
-one.lib.registry = {};
-
-/** DASHLET */
-one.lib.dashlet = {
- empty : function($dashlet) {
- $dashlet.empty();
- },
- append : function($dashlet, $content) {
- $dashlet.append($content);
- },
- header : function(header) {
- var $h4 = $(document.createElement('h4'));
- $h4.text(header);
- return $h4;
- },
- list : function(list) {
- var $ul = $(document.createElement('ul'));
- $(list).each(function(index, value) {
- var $li = $(document.createElement('li'));
- $li.append(value);
- $ul.append($li);
- });
- return $ul;
- },
- button : {
- config : function(name, id, type, size) {
- var button = {};
- button['name'] = name;
- button['id'] = id;
- button['type'] = type;
- button['size'] = size;
- return button;
- },
- single : function(name, id, type, size) {
- var buttonList = [];
- var button = one.lib.dashlet.button.config(name, id, type, size);
- buttonList.push(button);
- return buttonList;
- },
- button : function(buttonList) {
- var $buttonGroup = $(document.createElement('div'));
- $buttonGroup.addClass("btn-group");
- $(buttonList).each(function(index, value) {
- var $button = $(document.createElement('button'));
- $button.text(value.name);
- $button.addClass('btn');
- $button.addClass(value['type']);
- $button.addClass(value['size']);
- if(!(typeof value.id === 'undefined')) {
- $button.attr('id', value.id);
- }
- $buttonGroup.append($button);
- });
- return $buttonGroup;
- }
- },
- table : {
- table : function(classes, id) {
- var $table = $(document.createElement('table'));
- $table.addClass("table");
- $(classes).each(function(index, value) {
- $table.addClass(value);
- });
- if (!(typeof id === 'undefined'))
- $table.attr("id", id);
- return $table;
- },
- header : function(headers) {
- var $thead = $(document.createElement('thead'));
- var $tr = $(document.createElement('tr'));
- $(headers).each(function(index, value) {
- $th = $(document.createElement('th'));
- $th.append(value);
- $tr.append($th);
- });
- $thead.append($tr);
- return $thead;
- },
- body : function(body, thead) {
- var $tbody = $(document.createElement('tbody'));
- // if empty
- if (body.length == 0 && !(typeof thead === 'undefined')) {
- var $tr = $(document.createElement('tr'));
- var $td = $(document.createElement('td'));
- $td.attr("colspan", thead.length);
- $td.text("No data available");
- $td.addClass("empty");
- $tr.append($td);
- $tbody.append($tr);
- return $tbody;
- }
- // else, populate as usual
- $(body).each(function(index, value) {
- var $tr = $(document.createElement('tr'));
- // data-id
- if(value['id'] != undefined) {
- $tr.attr('data-id', value['id']);
- }
- // add classes
- $(value["type"]).each(function(index, value) {
- $tr.addClass(value);
- });
- // add entries
- $(value["entry"]).each(function(index, value) {
- var $td = $(document.createElement('td'));
- $td.append(value);
- $tr.append($td);
- });
- $tbody.append($tr);
- });
- return $tbody;
- }
- },
- description : function(description, horizontal) {
- var $dl = $(document.createElement('dl'));
- if(horizontal == true) {
- $dl.addClass("dl-horizontal");
- }
- $(description).each(function(index, value) {
- var $dt = $(document.createElement('dt'));
- $dt.text(value.dt);
- var $dd = $(document.createElement('dd'));
- $dd.text(value.dd);
- $dl.append($dt).append($dd);
- });
- return $dl;
- }
-}
-
-/** MODAL */
-one.lib.modal = {
- // clone default modal
- clone : function(id) {
- var $clone = $("#modal").clone(true);
- $clone.attr("id", id);
- return $clone;
- },
- // populate modal
- populate : function($modal, header, $body, footer) {
- var $h3 = $modal.find("h3");
- $h3.text(header);
-
- var $modalBody = $modal.find(".modal-body");
- $modalBody.append($body);
-
- $(footer).each(function(index, value) {
- $modal.find(".modal-footer").append(value);
- });
- },
- // clone and populate modal
- spawn : function(id, header, $body, footer) {
- var $modal = one.lib.modal.clone(id);
- one.lib.modal.populate($modal, header, $body, footer);
- return $modal;
- },
- // empty modal
- empty : function($modal) {
- $modal.find("h3").empty();
- $modal.find(".modal-body").empty();
- $modal.find(".modal-footer").empty();
- },
- // injection
- inject : {
- body : function($modal, $body) {
- $modal.find(".modal-body").empty();
- $modal.find(".modal-body").append($body);
- }
- }
-}
-
-/** FORM */
-one.lib.form = {
- // create select-option form element
- select : {
- create : function(options, multiple) {
- // assert - auto assign
- if(options == undefined) options = {};
-
- var $select = $(document.createElement('select'));
- if (multiple == true) {
- $select.attr("multiple", "multiple");
- }
- var optionArray = one.lib.form.select.options(options);
- $(optionArray).each(function(index, value) {
- $select.append(value);
- });
- return $select;
- },
- options : function(options) {
- var result = [];
- $.each(options, function(key, value) {
- var $option = $(document.createElement('option'));
- $option.attr("value", key);
- $option.text(value);
- result.push($option);
- });
- return result;
- },
- empty : function($select) {
- $select.empty();
- },
- inject : function($select, options) {
- $select.empty();
- var options = one.lib.form.select.options(options);
- $select.append(options);
- },
- prepend : function($select, options) {
- var options = one.lib.form.select.options(options);
- $select.prepend(options);
- },
- bubble : function($select, bubble) {
- $($select.find("option")).each(function(index, value) {
- if( $(value).attr("value") == bubble ) {
- var option = $(value);
- $(value).remove();
- $select.prepend(option);
- return;
- }
- });
- }
- },
- // create legend form element
- legend : function(name) {
- var $legend = $(document.createElement('legend'));
- $legend.text(name);
- return $legend;
- },
- // create label form element
- label : function(name) {
- var $label = $(document.createElement('label'));
- $label.text(name);
- return $label;
- },
- // create help block form element
- help : function(help) {
- var $help = $(document.createElement('span'));
- $help.text(help);
- $help.addClass("help-block");
- return $help;
- },
- // create generic text input
- input : function(placeholder) {
- var $input = $(document.createElement('input'));
- $input.attr('type', 'text');
- $input.attr('placeholder', placeholder);
- return $input;
- }
-}
-
-/** NAV */
-one.lib.nav = {
- unfocus : function($nav) {
- $($nav.find("li")).each(function(index, value) {
- $(value).removeClass("active");
- });
- }
-}
-
-/** ALERT */
-one.lib.alert = function(alert) {
- $("#alert p").text(alert);
- $("#alert").hide();
- $("#alert").slideToggle();
- clearTimeout(one.lib.registry.alert);
- one.lib.registry.alert = setTimeout(function() {
- $("#alert").slideUp();
- }, 8000);
-}
-
-/*
- INITIALIZATION
- executable JS code starts here
-*/
-//OpenDaylight root page
-one.main = {};
-
-one.main.constants = {
- address : {
- menu : "/web.json",
- prefix : "/controller/web",
- save : "/save"
- }
-}
-
-one.main.menu = {
- load : function() {
- one.main.menu.ajax(function(data) {
- // reparse the ajax data
- var result = one.main.menu.data.menu(data);
- // transform into list to append to menu
- var $div = one.main.menu.menu(result);
- // append to menu
- $("#menu .nav").append($div.children());
- // binding all menu items
- var $menu = $("#menu .nav a");
- $menu.click(function() {
- var href = $(this).attr('href').substring(1);
- one.main.page.load(href);
- var $li = $(this).parent();
- // reset all other active
- $menu.each(function(index, value) {
- $(value).parent().removeClass('active');
- });
- $li.addClass('active');
- });
- // reset or go to first menu item by default
- var currentLocation = location.hash;
- if (data[currentLocation.substring(1)] == undefined) {
- $($menu[0]).click();
- } else {
- $menu.each(function(index, value) {
- var menuLocation = $(value).attr('href');
- if (currentLocation == menuLocation) {
- $($menu[index]).click();
- return;
- }
- });
- }
- });
- },
- menu : function(result) {
- var $div = $(document.createElement('div'));
- $(result).each(function(index, value) {
- if( value != undefined) {
- var $li = $(document.createElement('li'));
- var $a = $(document.createElement('a'));
- $a.text(value['name']);
- $a.attr('href', '#'+value['id']);
- $li.append($a);
- $div.append($li);
- }
- });
- return $div;
- },
- ajax : function(successCallback) {
- $.getJSON(one.main.constants.address.menu, function(data) {
- successCallback(data);
- });
- },
- data : {
- menu : function(data) {
- var result = [];
- $.each(data, function(key, value) {
- var order = value['order'];
- if (order >= 0) {
- var name = value['name'];
- var entry = {
- 'name' : name,
- 'id' : key
- };
- result[order] = entry;
- }
- });
- return result;
- }
- }
-}
-
-one.main.page = {
- load : function(page) {
- if (one.f !== undefined && one.f.cleanUp !== undefined) {
- one.f.cleanUp();
- }
- // clear page related
- delete one.f;
- $('.dashlet', '#main').empty();
- $('.nav', '#main').empty();
- // fetch page's js
- $.getScript(one.main.constants.address.prefix+"/"+page+"/js/page.js");
-
- $.ajaxSetup({
- data : {
- 'x-page-url' : page
- }
- });
- },
- dashlet : function($nav, dashlet) {
- var $li = $(document.createElement('li'));
- var $a = $(document.createElement('a'));
- $a.text(dashlet.name);
- $a.attr('id', dashlet.id);
- $a.attr('href', '#');
- $li.append($a);
- $nav.append($li);
- }
-}
-
-one.main.admin = {
- id : {
- modal : {
- main : "one_main_admin_id_modal_main",
- close : "one_main_admin_id_modal_close",
- user : "one_main_admin_id_modal_user",
- add : {
- user : "one_main_admin_id_modal_add_user",
- close : "one_main_admin_id_modal_add_close",
- form : {
- name : "one_main_admin_id_modal_add_form_name",
- role : "one_main_admin_id_modal_add_form_role",
- password : "one_main_admin_id_modal_add_form_password"
- }
- },
- remove : {
- user : "one_main_admin_id_modal_remove_user",
- close : "one_main_admin_id_modal_remove_close"
- }
- },
- add : {
- user : "one_main_admin_id_add_user"
- }
- },
- address : {
- root : "/admin",
- users : "/users"
- },
- modal : {
- initialize : function(callback) {
- var h3 = "Welcome "+$('#admin').text();
- var footer = one.main.admin.modal.footer();
- var $modal = one.lib.modal.spawn(one.main.admin.id.modal.main, h3, '', footer);
-
- // close binding
- $('#'+one.main.admin.id.modal.close, $modal).click(function() {
- $modal.modal('hide');
- });
-
- // body inject
- one.main.admin.ajax.users(function($body) {
- one.lib.modal.inject.body($modal, $body);
- });
-
- // modal show callback
- callback($modal);
- },
- footer : function() {
- var footer = [];
-
- var closeButton = one.lib.dashlet.button.single("Close", one.main.admin.id.modal.close, "", "");
- var $closeButton = one.lib.dashlet.button.button(closeButton);
- footer.push($closeButton);
-
- return footer;
- }
- },
- ajax : {
- users : function(callback) {
- $.getJSON(one.main.admin.address.root+one.main.admin.address.users, function(data) {
- var body = one.main.admin.data.users(data);
- var $body = one.main.admin.body.users(body);
- callback($body);
- });
- }
- },
- data : {
- users : function(data) {
- var body = [];
- $(data).each(function(index, value) {
- var tr = {};
- var entry = [];
- entry.push(value['user']);
- entry.push(value['role']);
- tr['entry'] = entry;
- tr['id'] = value['user'];
- body.push(tr);
- });
- return body;
- }
- },
- body : {
- users : function(body) {
- var $div = $(document.createElement('div'));
- var $h5 = $(document.createElement('h5'));
- $h5.append("Manage Users");
- var attributes = ["table-striped", "table-bordered", "table-hover", "table-cursor"];
- var $table = one.lib.dashlet.table.table(attributes);
- var headers = ["User", "Role"];
- var $thead = one.lib.dashlet.table.header(headers);
- var $tbody = one.lib.dashlet.table.body(body);
- $table.append($thead).append($tbody);
-
- // bind table
- if (one.role < 2) {
- $table.find('tr').click(function() {
- var id = $(this).data('id');
- one.main.admin.remove.modal.initialize(id);
- });
- }
-
- // append to div
- $div.append($h5).append($table);
-
- if (one.role < 2) {
- var addUserButton = one.lib.dashlet.button.single("Add User", one.main.admin.id.add.user, "btn-primary", "btn-mini");
- var $addUserButton = one.lib.dashlet.button.button(addUserButton);
- $div.append($addUserButton);
-
- // add user binding
- $addUserButton.click(function() {
- one.main.admin.add.modal.initialize();
- });
- }
-
- return $div;
- }
- },
- remove : {
- modal : {
- initialize : function(id) {
- var h3 = "Remove User";
- var footer = one.main.admin.remove.footer();
- var $body = one.main.admin.remove.body();
- var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user, h3, $body, footer);
-
- // close binding
- $('#'+one.main.admin.id.modal.remove.close, $modal).click(function() {
- $modal.modal('hide');
- });
-
- // remove binding
- $('#'+one.main.admin.id.modal.remove.user, $modal).click(function() {
- one.main.admin.remove.modal.ajax(id, function(result) {
- if (result == 'Success') {
- $modal.modal('hide');
- // body inject
- var $admin = $('#'+one.main.admin.id.modal.main);
- one.main.admin.ajax.users(function($body) {
- one.lib.modal.inject.body($admin, $body);
- });
- } else alert("Failed to remove user: "+result);
- });
- });
-
- $modal.modal();
- },
- ajax : function(id, callback) {
- $.post(one.main.admin.address.root+one.main.admin.address.users+'/'+id, function(data) {
- callback(data);
- });
- },
- },
-
- footer : function() {
- var footer = [];
-
- var removeButton = one.lib.dashlet.button.single("Remove User", one.main.admin.id.modal.remove.user, "btn-danger", "");
- var $removeButton = one.lib.dashlet.button.button(removeButton);
- footer.push($removeButton);
-
- var closeButton = one.lib.dashlet.button.single("Close", one.main.admin.id.modal.remove.close, "", "");
- var $closeButton = one.lib.dashlet.button.button(closeButton);
- footer.push($closeButton);
-
- return footer;
- },
- body : function() {
- var $p = $(document.createElement('p'));
- $p.append("Remove user?");
- return $p;
- },
- },
- add : {
- modal : {
- initialize : function() {
- var h3 = "Add User";
- var footer = one.main.admin.add.footer();
- var $body = one.main.admin.add.body();
- var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user, h3, $body, footer);
-
- // close binding
- $('#'+one.main.admin.id.modal.add.close, $modal).click(function() {
- $modal.modal('hide');
- });
-
- // add binding
- $('#'+one.main.admin.id.modal.add.user, $modal).click(function() {
- one.main.admin.add.modal.add($modal, function(result) {
- if(result == 'Success') {
- $modal.modal('hide');
- // body inject
- var $admin = $('#'+one.main.admin.id.modal.main);
- one.main.admin.ajax.users(function($body) {
- one.lib.modal.inject.body($admin, $body);
- });
- } else alert("Failed to add user: "+result);
- });
- });
-
- $modal.modal();
- },
- add : function($modal, callback) {
- var user = {};
- user['user'] = $modal.find('#'+one.main.admin.id.modal.add.form.name).val();
- user['password'] = $modal.find('#'+one.main.admin.id.modal.add.form.password).val();
- user['role'] = $modal.find('#'+one.main.admin.id.modal.add.form.role).find('option:selected').attr('value');
-
- var resource = {};
- resource['json'] = JSON.stringify(user);
- resource['action'] = 'add'
-
- one.main.admin.add.modal.ajax(resource, callback);
- },
- ajax : function(data, callback) {
- $.post(one.main.admin.address.root+one.main.admin.address.users, data, function(data) {
- callback(data);
- });
- }
- },
- body : function() {
- var $form = $(document.createElement('form'));
- var $fieldset = $(document.createElement('fieldset'));
- // user
- var $label = one.lib.form.label('Username');
- var $input = one.lib.form.input('Username');
- $input.attr('id', one.main.admin.id.modal.add.form.name);
- $fieldset.append($label).append($input);
- // password
- var $label = one.lib.form.label('Password');
- var $input = one.lib.form.input('Password');
- $input.attr('id', one.main.admin.id.modal.add.form.password);
- $input.attr('type', 'password');
- $fieldset.append($label).append($input);
- // roles
- var $label = one.lib.form.label('Roles');
- var options = {
- "Network-Admin" : "Network Administrator",
- "Network-Operator" : "Network Operator"
- };
- var $select = one.lib.form.select.create(options);
- $select.attr('id', one.main.admin.id.modal.add.form.role);
- $fieldset.append($label).append($select);
- $form.append($fieldset);
- return $form;
- },
- footer : function() {
- var footer = [];
-
- var addButton = one.lib.dashlet.button.single("Add User", one.main.admin.id.modal.add.user, "btn-primary", "");
- var $addButton = one.lib.dashlet.button.button(addButton);
- footer.push($addButton);
-
- var closeButton = one.lib.dashlet.button.single("Close", one.main.admin.id.modal.add.close, "", "");
- var $closeButton = one.lib.dashlet.button.button(closeButton);
- footer.push($closeButton);
-
- return footer;
- }
- }
-}
-
-one.main.dashlet = {
- left : {
- top : $("#left-top .dashlet"),
- bottom : $("#left-bottom .dashlet")
- },
- right : {
- bottom : $("#right-bottom .dashlet")
- }
-}
-
-/** BOOTSTRAP */
-$(".modal").on('hidden', function() {
- $(this).remove();
-});
-
-$("#alert .close").click(function() {
- $("#alert").hide();
-});
-
-/** INIT */
-
-// parse role
-one.role = $('#admin').data('role');
-
-// user admin
-$("#admin").click(function() {
- one.main.admin.modal.initialize(function($modal) {
- $modal.modal();
- });
-});
-
-// save
-$("#save").click(function() {
- $.post(one.main.constants.address.save, function(data) {
- if (data == "Success") {
- one.lib.alert("Configuration Saved");
- } else {
- one.lib.alert("Unable to save configuration: "+data);
- }
- });
-});
-
-// logout
-$("#logout").click(function() {
- location.href = "/logout";
-});
-
-$.ajaxSetup({
- complete : function(xhr,textStatus) {
- var mime = xhr.getResponseHeader('Content-Type');
- if (mime.substring(0, 9) == 'text/html') {
- location.href = '/';
- }
- }
-});
-
-/** MAIN PAGE LOAD */
-one.main.menu.load();
\ No newline at end of file
--- /dev/null
+/** COMMON * */
+var labelType, useGradients, nativeTextSupport, animate;
+
+(function() {
+ var ua = navigator.userAgent, iStuff = ua.match(/iPhone/i)
+ || ua.match(/iPad/i), typeOfCanvas = typeof HTMLCanvasElement, nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), textSupport = nativeCanvasSupport
+ && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
+ // I'm setting this based on the fact that ExCanvas provides text support
+ // for IE
+ // and that as of today iPhone/iPad current text support is lame
+ labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native'
+ : 'HTML';
+ nativeTextSupport = labelType == 'Native';
+ useGradients = nativeCanvasSupport;
+ animate = !(iStuff || !nativeCanvasSupport);
+})();
+
+/** TOPOLOGY * */
+one.topology = {};
+
+one.topology.option = {
+ navigation : function(enable, panning, zooming) {
+ var option = {};
+ option["enable"] = enable;
+ option["panning"] = panning;
+ option["zooming"] = zooming;
+ return option;
+ },
+ node : function(overridable, color, height, dim) {
+ var option = {};
+ option["overridable"] = overridable;
+ option["color"] = color;
+ option["height"] = height;
+ option["dim"] = dim;
+ return option;
+ },
+ edge : function(overridable, color, lineWidth, epsilon) {
+ var option = {};
+ option["overridable"] = overridable;
+ option["color"] = color;
+ option["lineWidth"] = lineWidth;
+ if (epsilon != undefined)
+ option["epsilon"] = epsilon;
+ return option;
+ },
+ label : function(style, node) {
+ var marginTop, minWidth;
+ if (node.data["$type"] == "swtch") {
+ marginTop = "42px";
+ minWidth = "65px";
+ } else if (node.data["$type"] == "host") {
+ marginTop = "48px";
+ minWidth = "";
+ } else if (node.data["$type"].indexOf("monitor") == 0) {
+ marginTop = "52px";
+ minWidth = "";
+ }
+ style.marginTop = marginTop;
+ style.minWidth = minWidth;
+ style.background = "rgba(68,68,68,0.7)";
+ style.borderRadius = "4px";
+ style.color = "#fff";
+ style.cursor = "default";
+ }
+};
+
+one.topology.init = function(json) {
+ if (json.length == 0) {
+ $div = $(document.createElement('div'));
+ $img = $(document.createElement('div'));
+ $img.css('height', '128px');
+ $img.css('width', '128px');
+ $img.css('background-image', 'url(/img/topology_view_1033_128.png)');
+ $img.css('clear', 'both');
+ $img.css('margin', '0 auto');
+ $p = $(document.createElement('p'));
+ $p.addClass('text-center');
+ $p.addClass('text-info');
+ $p.css('width', '100%');
+ $p.css('padding', '10px 0');
+ $p.css('cursor', 'default');
+ $p.append('No Network Elements Connected');
+ $div.css('position', 'absolute');
+ $div.css('top', '25%');
+ $div.css('margin', '0 auto');
+ $div.css('width', '100%');
+ $div.css('text-align', 'center');
+ $div.append($img).append($p);
+ $("#topology").append($div);
+ return false;
+ }
+ one.topology.graph = new $jit.MultiTopology(
+ {
+ injectInto : 'topology',
+ Navigation : one.topology.option.navigation(true,
+ 'avoid nodes', 10),
+ Node : one.topology.option.node(true, '#444', 25, 27),
+ Edge : one.topology.option.edge(true, '23A4FF', 1.5),
+ Tips : {
+ enable : true,
+ type : 'Native',
+ onShow : function(tip, node) {
+ if (node.name != undefined)
+ tip.innerHTML = "";
+ // tipsOnShow(tip, node);
+ }
+ },
+ Events : {
+ enable : true,
+ type : 'Native',
+ onMouseEnter : function(node, eventInfo, e) {
+ // if node
+ if (node.id != undefined) {
+ one.topology.graph.canvas.getElement().style.cursor = 'move';
+ } else if (eventInfo.edge != undefined
+ && eventInfo.edge.nodeTo.data["$type"] == "swtch"
+ && eventInfo.edge.nodeFrom.data["$type"] == "swtch") {
+ one.topology.graph.canvas.getElement().style.cursor = 'pointer';
+ }
+ },
+ onMouseLeave : function(node, eventInfo, e) {
+ one.topology.graph.canvas.getElement().style.cursor = '';
+ },
+ // Update node positions when dragged
+ onDragMove : function(node, eventInfo, e) {
+ var pos = eventInfo.getPos();
+ node.pos.setc(pos.x, pos.y);
+ one.topology.graph.plot();
+ one.topology.graph.canvas.getElement().style.cursor = 'crosshair';
+ },
+ // Implement the same handler for touchscreens
+ onTouchMove : function(node, eventInfo, e) {
+ $jit.util.event.stop(e); // stop default touchmove
+ // event
+ this.onDragMove(node, eventInfo, e);
+ },
+ onDragEnd : function(node, eventInfo, e) {
+ var ps = eventInfo.getPos();
+ var did = node.id;
+ var data = {};
+ data['x'] = ps.x;
+ data['y'] = ps.y;
+ $.post('/controller/web/topology/node/' + did, data);
+ },
+ onClick : function(node, eventInfo, e) {
+ if (one.f.topology === undefined) {
+ return false;
+ } else {
+ one.f.topology.Events.onClick(node, eventInfo);
+ }
+ }
+ },
+ iterations : 200,
+ levelDistance : 130,
+ onCreateLabel : function(domElement, node) {
+ var nameContainer = document.createElement('span'), closeButton = document
+ .createElement('span'), style = nameContainer.style;
+ nameContainer.className = 'name';
+ var nodeDesc = node.data["$desc"];
+ if (nodeDesc == "None" || nodeDesc == ""
+ || nodeDesc == "undefined" || nodeDesc == undefined) {
+ nameContainer.innerHTML = "<small>" + node.name
+ + "</small>";
+ } else {
+ nameContainer.innerHTML = nodeDesc;
+ }
+ domElement.appendChild(nameContainer);
+ style.fontSize = "1.0em";
+ style.color = "#000";
+ style.fontWeight = "bold";
+ style.width = "100%";
+ style.padding = "1.5px 4px";
+ style.display = "block";
+
+ one.topology.option.label(style, node);
+ },
+ onPlaceLabel : function(domElement, node) {
+ var style = domElement.style;
+ var left = parseInt(style.left);
+ var top = parseInt(style.top);
+ var w = domElement.offsetWidth;
+ style.left = (left - w / 2) + 'px';
+ style.top = (top - 15) + 'px';
+ style.display = '';
+ style.minWidth = "28px";
+ style.width = "auto";
+ style.height = "28px";
+ style.textAlign = "center";
+ }
+ });
+
+ one.topology.graph.loadJSON(json);
+ // compute positions incrementally and animate.
+ one.topology.graph.computeIncremental({
+ iter : 40,
+ property : 'end',
+ onStep : function(perc) {
+ console.log(perc + '% loaded');
+ },
+ onComplete : function() {
+ for ( var idx in one.topology.graph.graph.nodes) {
+ var node = one.topology.graph.graph.nodes[idx];
+ if (node.getData("x") && node.getData("y")) {
+ var x = node.getData("x");
+ var y = node.getData("y");
+ node.setPos(new $jit.Complex(x, y), "end");
+ }
+ }
+ console.log('done');
+ one.topology.graph.animate({
+ modes : [ 'linear' ],
+ transition : $jit.Trans.Elastic.easeOut,
+ duration : 0
+ });
+ }
+ });
+ one.topology.graph.canvas.setZoom(0.8, 0.8);
+}
+
+one.topology.update = function() {
+ $('#topology').empty();
+ $.getJSON(one.global.remoteAddress + "controller/web/topology/visual.json",
+ function(data) {
+ one.topology.init(data);
+ });
+}
+
+/** INIT */
+$.getJSON(one.global.remoteAddress + "controller/web/topology/visual.json",
+ function(data) {
+ one.topology.init(data);
+ });
--- /dev/null
+one.main = {};
+
+one.main.constants = {
+ address : {
+ menu : "/web.json",
+ prefix : "/controller/web",
+ save : "/save"
+ }
+}
+
+one.main.menu = {
+ load : function() {
+ one.main.menu.ajax(function(data) {
+ // reparse the ajax data
+ var result = one.main.menu.data.menu(data);
+ // transform into list to append to menu
+ var $div = one.main.menu.menu(result);
+ // append to menu
+ $("#menu .nav").append($div.children());
+ // binding all menu items
+ var $menu = $("#menu .nav a");
+ $menu.click(function() {
+ var href = $(this).attr('href').substring(1);
+ one.main.page.load(href);
+ var $li = $(this).parent();
+ // reset all other active
+ $menu.each(function(index, value) {
+ $(value).parent().removeClass('active');
+ });
+ $li.addClass('active');
+ });
+ // reset or go to first menu item by default
+ var currentLocation = location.hash;
+ if (data[currentLocation.substring(1)] == undefined) {
+ $($menu[0]).click();
+ } else {
+ $menu.each(function(index, value) {
+ var menuLocation = $(value).attr('href');
+ if (currentLocation == menuLocation) {
+ $($menu[index]).click();
+ return;
+ }
+ });
+ }
+ });
+ },
+ menu : function(result) {
+ var $div = $(document.createElement('div'));
+ $(result).each(function(index, value) {
+ if (value != undefined) {
+ var $li = $(document.createElement('li'));
+ var $a = $(document.createElement('a'));
+ $a.text(value['name']);
+ $a.attr('href', '#' + value['id']);
+ $li.append($a);
+ $div.append($li);
+ }
+ });
+ return $div;
+ },
+ ajax : function(successCallback) {
+ $.getJSON(one.main.constants.address.menu, function(data) {
+ successCallback(data);
+ });
+ },
+ data : {
+ menu : function(data) {
+ var result = [];
+ $.each(data, function(key, value) {
+ var order = value['order'];
+ if (order >= 0) {
+ var name = value['name'];
+ var entry = {
+ 'name' : name,
+ 'id' : key
+ };
+ result[order] = entry;
+ }
+ });
+ return result;
+ }
+ }
+}
+
+one.main.page = {
+ load : function(page) {
+ if (one.f !== undefined && one.f.cleanUp !== undefined) {
+ one.f.cleanUp();
+ }
+ // clear page related
+ delete one.f;
+ $('.dashlet', '#main').empty();
+ $('.nav', '#main').empty();
+ // fetch page's js
+ $.getScript(one.main.constants.address.prefix + "/" + page
+ + "/js/page.js");
+
+ $.ajaxSetup({
+ data : {
+ 'x-page-url' : page
+ }
+ });
+ },
+ dashlet : function($nav, dashlet) {
+ var $li = $(document.createElement('li'));
+ var $a = $(document.createElement('a'));
+ $a.text(dashlet.name);
+ $a.attr('id', dashlet.id);
+ $a.attr('href', '#');
+ $li.append($a);
+ $nav.append($li);
+ }
+}
+
+one.main.admin = {
+ id : {
+ modal : {
+ main : "one_main_admin_id_modal_main",
+ close : "one_main_admin_id_modal_close",
+ user : "one_main_admin_id_modal_user",
+ add : {
+ user : "one_main_admin_id_modal_add_user",
+ close : "one_main_admin_id_modal_add_close",
+ form : {
+ name : "one_main_admin_id_modal_add_form_name",
+ role : "one_main_admin_id_modal_add_form_role",
+ password : "one_main_admin_id_modal_add_form_password"
+ }
+ },
+ remove : {
+ user : "one_main_admin_id_modal_remove_user",
+ close : "one_main_admin_id_modal_remove_close"
+ }
+ },
+ add : {
+ user : "one_main_admin_id_add_user"
+ }
+ },
+ address : {
+ root : "/admin",
+ users : "/users"
+ },
+ modal : {
+ initialize : function(callback) {
+ var h3 = "Welcome " + $('#admin').text();
+ var footer = one.main.admin.modal.footer();
+ var $modal = one.lib.modal.spawn(one.main.admin.id.modal.main, h3,
+ '', footer);
+
+ // close binding
+ $('#' + one.main.admin.id.modal.close, $modal).click(function() {
+ $modal.modal('hide');
+ });
+
+ // body inject
+ one.main.admin.ajax.users(function($body) {
+ one.lib.modal.inject.body($modal, $body);
+ });
+
+ // modal show callback
+ callback($modal);
+ },
+ footer : function() {
+ var footer = [];
+
+ var closeButton = one.lib.dashlet.button.single("Close",
+ one.main.admin.id.modal.close, "", "");
+ var $closeButton = one.lib.dashlet.button.button(closeButton);
+ footer.push($closeButton);
+
+ return footer;
+ }
+ },
+ ajax : {
+ users : function(callback) {
+ $.getJSON(one.main.admin.address.root
+ + one.main.admin.address.users, function(data) {
+ var body = one.main.admin.data.users(data);
+ var $body = one.main.admin.body.users(body);
+ callback($body);
+ });
+ }
+ },
+ data : {
+ users : function(data) {
+ var body = [];
+ $(data).each(function(index, value) {
+ var tr = {};
+ var entry = [];
+ entry.push(value['user']);
+ entry.push(value['role']);
+ tr['entry'] = entry;
+ tr['id'] = value['user'];
+ body.push(tr);
+ });
+ return body;
+ }
+ },
+ body : {
+ users : function(body) {
+ var $div = $(document.createElement('div'));
+ var $h5 = $(document.createElement('h5'));
+ $h5.append("Manage Users");
+ var attributes = [ "table-striped", "table-bordered",
+ "table-hover", "table-cursor" ];
+ var $table = one.lib.dashlet.table.table(attributes);
+ var headers = [ "User", "Role" ];
+ var $thead = one.lib.dashlet.table.header(headers);
+ var $tbody = one.lib.dashlet.table.body(body);
+ $table.append($thead).append($tbody);
+
+ // bind table
+ if (one.role < 2) {
+ $table.find('tr').click(function() {
+ var id = $(this).data('id');
+ one.main.admin.remove.modal.initialize(id);
+ });
+ }
+
+ // append to div
+ $div.append($h5).append($table);
+
+ if (one.role < 2) {
+ var addUserButton = one.lib.dashlet.button.single("Add User",
+ one.main.admin.id.add.user, "btn-primary", "btn-mini");
+ var $addUserButton = one.lib.dashlet.button
+ .button(addUserButton);
+ $div.append($addUserButton);
+
+ // add user binding
+ $addUserButton.click(function() {
+ one.main.admin.add.modal.initialize();
+ });
+ }
+
+ return $div;
+ }
+ },
+ remove : {
+ modal : {
+ initialize : function(id) {
+ var h3 = "Remove User";
+ var footer = one.main.admin.remove.footer();
+ var $body = one.main.admin.remove.body();
+ var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user,
+ h3, $body, footer);
+
+ // close binding
+ $('#' + one.main.admin.id.modal.remove.close, $modal).click(
+ function() {
+ $modal.modal('hide');
+ });
+
+ // remove binding
+ $('#' + one.main.admin.id.modal.remove.user, $modal)
+ .click(
+ function() {
+ one.main.admin.remove.modal
+ .ajax(
+ id,
+ function(result) {
+ if (result == 'Success') {
+ $modal
+ .modal('hide');
+ // body inject
+ var $admin = $('#'
+ + one.main.admin.id.modal.main);
+ one.main.admin.ajax
+ .users(function($body) {
+ one.lib.modal.inject
+ .body(
+ $admin,
+ $body);
+ });
+ } else
+ alert("Failed to remove user: "
+ + result);
+ });
+ });
+
+ $modal.modal();
+ },
+ ajax : function(id, callback) {
+ $.post(one.main.admin.address.root
+ + one.main.admin.address.users + '/' + id,
+ function(data) {
+ callback(data);
+ });
+ },
+ },
+
+ footer : function() {
+ var footer = [];
+
+ var removeButton = one.lib.dashlet.button.single("Remove User",
+ one.main.admin.id.modal.remove.user, "btn-danger", "");
+ var $removeButton = one.lib.dashlet.button.button(removeButton);
+ footer.push($removeButton);
+
+ var closeButton = one.lib.dashlet.button.single("Close",
+ one.main.admin.id.modal.remove.close, "", "");
+ var $closeButton = one.lib.dashlet.button.button(closeButton);
+ footer.push($closeButton);
+
+ return footer;
+ },
+ body : function() {
+ var $p = $(document.createElement('p'));
+ $p.append("Remove user?");
+ return $p;
+ },
+ },
+ add : {
+ modal : {
+ initialize : function() {
+ var h3 = "Add User";
+ var footer = one.main.admin.add.footer();
+ var $body = one.main.admin.add.body();
+ var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user,
+ h3, $body, footer);
+
+ // close binding
+ $('#' + one.main.admin.id.modal.add.close, $modal).click(
+ function() {
+ $modal.modal('hide');
+ });
+
+ // add binding
+ $('#' + one.main.admin.id.modal.add.user, $modal)
+ .click(
+ function() {
+ one.main.admin.add.modal
+ .add(
+ $modal,
+ function(result) {
+ if (result == 'Success') {
+ $modal
+ .modal('hide');
+ // body inject
+ var $admin = $('#'
+ + one.main.admin.id.modal.main);
+ one.main.admin.ajax
+ .users(function($body) {
+ one.lib.modal.inject
+ .body(
+ $admin,
+ $body);
+ });
+ } else
+ alert("Failed to add user: "
+ + result);
+ });
+ });
+
+ $modal.modal();
+ },
+ add : function($modal, callback) {
+ var user = {};
+ user['user'] = $modal.find(
+ '#' + one.main.admin.id.modal.add.form.name).val();
+ user['password'] = $modal.find(
+ '#' + one.main.admin.id.modal.add.form.password).val();
+ user['role'] = $modal.find(
+ '#' + one.main.admin.id.modal.add.form.role).find(
+ 'option:selected').attr('value');
+
+ var resource = {};
+ resource['json'] = JSON.stringify(user);
+ resource['action'] = 'add'
+
+ one.main.admin.add.modal.ajax(resource, callback);
+ },
+ ajax : function(data, callback) {
+ $.post(one.main.admin.address.root
+ + one.main.admin.address.users, data, function(data) {
+ callback(data);
+ });
+ }
+ },
+ body : function() {
+ var $form = $(document.createElement('form'));
+ var $fieldset = $(document.createElement('fieldset'));
+ // user
+ var $label = one.lib.form.label('Username');
+ var $input = one.lib.form.input('Username');
+ $input.attr('id', one.main.admin.id.modal.add.form.name);
+ $fieldset.append($label).append($input);
+ // password
+ var $label = one.lib.form.label('Password');
+ var $input = one.lib.form.input('Password');
+ $input.attr('id', one.main.admin.id.modal.add.form.password);
+ $input.attr('type', 'password');
+ $fieldset.append($label).append($input);
+ // roles
+ var $label = one.lib.form.label('Roles');
+ var options = {
+ "Network-Admin" : "Network Administrator",
+ "Network-Operator" : "Network Operator"
+ };
+ var $select = one.lib.form.select.create(options);
+ $select.attr('id', one.main.admin.id.modal.add.form.role);
+ $fieldset.append($label).append($select);
+ $form.append($fieldset);
+ return $form;
+ },
+ footer : function() {
+ var footer = [];
+
+ var addButton = one.lib.dashlet.button.single("Add User",
+ one.main.admin.id.modal.add.user, "btn-primary", "");
+ var $addButton = one.lib.dashlet.button.button(addButton);
+ footer.push($addButton);
+
+ var closeButton = one.lib.dashlet.button.single("Close",
+ one.main.admin.id.modal.add.close, "", "");
+ var $closeButton = one.lib.dashlet.button.button(closeButton);
+ footer.push($closeButton);
+
+ return footer;
+ }
+ }
+}
+
+one.main.dashlet = {
+ left : {
+ top : $("#left-top .dashlet"),
+ bottom : $("#left-bottom .dashlet")
+ },
+ right : {
+ bottom : $("#right-bottom .dashlet")
+ }
+}
+
+/** BOOTSTRAP */
+$(".modal").on('hidden', function() {
+ $(this).remove();
+});
+
+$("#alert .close").click(function() {
+ $("#alert").hide();
+});
+
+/** INIT */
+
+// parse role
+one.role = $('#admin').data('role');
+
+// user admin
+$("#admin").click(function() {
+ one.main.admin.modal.initialize(function($modal) {
+ $modal.modal();
+ });
+});
+
+// save
+$("#save").click(function() {
+ $.post(one.main.constants.address.save, function(data) {
+ if (data == "Success") {
+ one.lib.alert("Configuration Saved");
+ } else {
+ one.lib.alert("Unable to save configuration: " + data);
+ }
+ });
+});
+
+// logout
+$("#logout").click(function() {
+ location.href = "/logout";
+});
+
+$.ajaxSetup({
+ complete : function(xhr, textStatus) {
+ var mime = xhr.getResponseHeader('Content-Type');
+ if (mime.substring(0, 9) == 'text/html') {
+ location.href = '/';
+ }
+ }
+});
+
+/** MAIN PAGE LOAD */
+one.main.menu.load();
\ No newline at end of file