<!DOCTYPE html>\r
<html>\r
<head>\r
- <link href="css/bootstrap.min.css" rel="stylesheet" />\r
- \r
- <link href="css/bootstrap-table.min.css" rel="stylesheet" />\r
-\r
- <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>\r
- <script type="text/javascript" src="js/bootstrap.min.js"></script>\r
- <script type="text/javascript" src="js/rest.js"></script>\r
- <script type="text/javascript" src="js/bootstrap-table.min.js"></script>\r
+ <link href="css/bootstrap.min.css" rel="stylesheet" />\r
+\r
+ <link href="css/bootstrap-table.min.css" rel="stylesheet" />\r
+\r
+ <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>\r
+ <script type="text/javascript" src="js/bootstrap.min.js"></script>\r
+ <script type="text/javascript" src="js/rest.js"></script>\r
+ <script type="text/javascript" src="js/bootstrap-table.min.js"></script>\r
<script>\r
$(document).ready(function () {\r
var serviceId = getQueryStringValue("serviceId");\r
var params = new URLSearchParams(window.location.search.slice(1));\r
return params.get(key);\r
}\r
+ function acordClick_sdno() {\r
+ $("#topoContObj").show();\r
+ $("#nfvotopoContObj").hide();\r
+ }\r
+ function acordClick_nfvo() {\r
+ $("#nfvotopoContObj").show();\r
+ $("#topoContObj").hide();\r
+ }\r
+\r
</script>\r
- <meta charset="utf-8">\r
- <title>JS Bin</title>\r
- <style>\r
- \r
-.panel-group .panel-heading + .panel-collapse > .panel-body {\r
- border: 1px solid #ddd;\r
-}\r
-.panel-group,\r
-.panel-group .panel,\r
-.panel-group .panel-heading,\r
-.panel-group .panel-heading a,\r
-.panel-group .panel-title,\r
-.panel-group .panel-title a,\r
-.panel-group .panel-body,\r
-.panel-group .panel-group .panel-heading + .panel-collapse > .panel-body {\r
- border-radius: 2px;\r
- border: 0;\r
-}\r
-.panel-group .panel-heading {\r
- padding: 0;\r
-}\r
-.panel-group .panel-heading a {\r
- display: block;\r
- background: #428bca;\r
- color: #ffffff;\r
- padding: 15px;\r
- text-decoration: none;\r
- position: relative;\r
-}\r
-\r
-.panel-group .panel-heading a:hover {\r
- border: 1px solid #4AC9FF;\r
- \r
-}\r
-\r
- \r
-.panel-group .panel-heading a.collapsed {\r
- background: #eeeeee;\r
- color: inherit;\r
-}\r
-.panel-group .panel-heading a:after {\r
- content: '-';\r
- position: absolute;\r
- right: 20px;\r
- top:5px;\r
- font-size:30px;\r
-}\r
-.panel-group .panel-heading a.collapsed:after {\r
- content: '+';\r
-}\r
-.panel-group .panel-collapse {\r
- margin-top: 5px !important;\r
-}\r
-.panel-group .panel-body {\r
- background: #ffffff;\r
- padding: 15px;\r
-}\r
-.panel-group .panel {\r
- background-color: transparent;\r
-}\r
-.panel-group .panel-body p:last-child,\r
-.panel-group .panel-body ul:last-child,\r
-.panel-group .panel-body ol:last-child {\r
- margin-bottom: 0;\r
-}\r
-\r
- </style>\r
+ <meta charset="utf-8">\r
+ <title>JS Bin</title>\r
+ <style>\r
+ body {\r
+ overflow: hidden;\r
+ margin: 15px;\r
+ }\r
+ .panel-heading:hover {\r
+ border: 1px solid #4ac9ff;\r
+ color: #4ac9ff;\r
+ }\r
+\r
+ li:hover {\r
+ cursor: pointer;\r
+ color: #4ac9ff;\r
+ }\r
+ #accordion .glyphicon {\r
+ margin-right: 10px;\r
+ }\r
+\r
+ .panel-collapse > .list-group .list-group-item:first-child {\r
+ border-top-right-radius: 0;\r
+ border-top-left-radius: 0;\r
+ }\r
+\r
+ .panel-collapse > .list-group .list-group-item {\r
+ border-width: 1px 0;\r
+ }\r
+\r
+ .panel-collapse > .list-group {\r
+ margin-bottom: 0;\r
+ }\r
+\r
+ .panel-collapse .list-group-item {\r
+ border-radius: 0;\r
+ }\r
+\r
+ .panel-collapse .list-group .list-group {\r
+ margin: 0;\r
+ margin-top: 10px;\r
+ }\r
+\r
+ .panel-collapse .list-group-item li.list-group-item {\r
+ margin: 0 -15px;\r
+ border-top: 1px solid #ddd !important;\r
+ border-bottom: 0;\r
+ padding-left: 30px;\r
+ }\r
+\r
+ .panel-collapse .list-group-item li.list-group-item:last-child {\r
+ padding-bottom: 0;\r
+ }\r
+\r
+ .panel-collapse div.list-group div.list-group {\r
+ margin: 0;\r
+ }\r
+\r
+ .panel-collapse div.list-group .list-group a.list-group-item {\r
+ border-top: 1px solid #ddd !important;\r
+ border-bottom: 0;\r
+ padding-left: 30px;\r
+ }\r
+\r
+ .panel-collapse .list-group-item li.list-group-item {\r
+ border-top: 1px solid #DDD !important;\r
+ }\r
+\r
+ .selected {\r
+ /*background-color: #ddd;*/\r
+ color: #4ac9ff;\r
+ }\r
+ .panel-title>a {\r
+ display: inline-block;\r
+ width: 100%;\r
+ }\r
+\r
+ </style>\r
</head>\r
<body>\r
- \r
-<div class="container" style="margin-top:10px;">\r
\r
- <div class="panel-group" id="accordion">\r
- \r
+ <div class="row">\r
+ <div class="col-sm-3" style="width: 18%; padding-right: 0;">\r
+ <div class="panel-group" id="accordion">\r
+ <div class="panel panel-default">\r
+ <div class="panel-heading">\r
+ <h4 class="panel-title">\r
+ <a id="sdno" style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" onClick="acordClick_sdno();">\r
+ SDNO\r
+ </a>\r
+ </h4>\r
+ </div>\r
+ </div>\r
+ </div>\r
<div class="panel panel-default">\r
- <div class="panel-heading">\r
- <h4 class="panel-title">\r
- <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">\r
- SDNO\r
- </a>\r
- </h4>\r
- </div><!--/.panel-heading -->\r
- <div id="collapseOne" class="panel-collapse collapse in">\r
- <div class="panel-body">\r
- <!--iframe src="chartTopo.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">\r
- </iframe>-->\r
- <object id="topoContObj" data="chartTopo.html" width="100%" height="300" type="text/html">\r
-\r
- </object>\r
- </div><!--/.panel-body -->\r
- </div><!--/.panel-collapse -->\r
- </div><!-- /.panel -->\r
-\r
- \r
- <div class="panel panel-default">\r
- <div class="panel-heading">\r
- <h4 class="panel-title">\r
- <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">\r
- NFVO\r
- </a>\r
- </h4>\r
- </div><!--/.panel-heading -->\r
- <div id="collapseThree" class="panel-collapse collapse">\r
- <div class="panel-body">\r
- <object id="nfvotopoContObj" data="lcm_detail_nfvo_topology.html" width="100%" height="300" type="text/html">\r
-\r
- </object>\r
- </div><!--/.panel-body -->\r
- </div><!--/.panel-collapse -->\r
- </div><!-- /.panel -->\r
- </div><!-- /.panel-group -->\r
-\r
-</div><!-- /.container --> \r
- \r
- \r
+ <div class="panel-heading">\r
+ <h4 class="panel-title">\r
+ <a id="nfvo" style="text-decoration:none;" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" onClick="acordClick_nfvo();">\r
+ NFVO\r
+ </a>\r
+ </h4>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div class="col-sm-3" style="width: 82%; padding-right: 0;">\r
+ <div class="panel-body" style="padding: 0">\r
+ <object id="topoContObj" data="chartTopo.html" width="100%" height="300" type="text/html">\r
+\r
+ </object>\r
+ </div>\r
+ <div class="panel-body" style="padding: 0">\r
+ <object id="nfvotopoContObj" data="lcm_detail_nfvo_topology.html" width="100%" height="300" type="text/html">\r
+\r
+ </object>\r
+ </div>\r
+ </div>\r
+ </div>\r
+\r
\r
</body>\r
</html>
\ No newline at end of file
\r
<script>\r
$(document).ready(function () {\r
- $("#overDiv").show();\r
+ \r
+ $("#dashboard").hide();\r
+ $("#nfvo_dashboard").hide()\r
+ $("#overDiv").hide();\r
$("#underDiv").hide();\r
\r
var serviceId = getQueryStringValue("serviceId");\r
+ var serviceType = getQueryStringValue("serviceType");\r
+ \r
console.log("serviceId : " + serviceId);\r
-\r
- var jsonData = loadServiceDetails(serviceId);\r
+ \r
+ var jsonData = [];\r
+ var object = {};\r
+ debugger;\r
+ if("SSAR" === serviceType)\r
+ {\r
+ object.name = "sdno"\r
+ jsonData[0] = object;\r
+ }\r
+ else if("NSAR" == serviceType || "NFAR" == serviceType || "NFVO" == serviceType)\r
+ {\r
+ object.name = "nfvo";\r
+ jsonData[0] = object;\r
+ }\r
+ else{\r
+ jsonData = loadServiceDetails(serviceId);\r
+ }\r
+ \r
+ \r
+ \r
+ //TODO check for the \r
console.log("jsonData length: " + jsonData.length);\r
for (i = 0; i < jsonData.length; i++) {\r
console.log("jsonData Name: " + jsonData[i].name);\r
<script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"> </script>\r
<link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />\r
\r
- <script type="text/javascript" src="js/highcharts.js"></script>\r
- <script type="text/javascript" src="js/exporting.js"></script>\r
+\r
+ <script src="js/topo/sigma/sigma.min.js"></script>\r
+ <script src="js/topo/sigma/sigma.renderers.edgeLabels.min.js"></script>\r
+\r
+\r
<style>\r
body {\r
overflow: hidden;\r
$("#inpContMod").hide();\r
\r
$('#sai').bootstrapTable({}) .on('click-row.bs.table', function (e, row, $element) {\r
- var newURL = "accorTables.html?serviceId="+row.serviceId;\r
+ var newURL = "accorTables.html?serviceId="+row.serviceId + "&serviceType="+row.serviceType;\r
+ // var newURL = "accorTables.html?serviceId="+row.serviceId ;\r
console.log("URL: "+newURL);\r
document.getElementById("tabContainer").style.display = "none";\r
document.getElementById("detailConObj").setAttribute('data', newURL);\r
- document.getElementById("detailContMod").setAttribute('data', newURL);\r
+ document.getElementById("detailContDlg").setAttribute('data', newURL);\r
document.getElementById("tabContainer").style.display = "block";\r
\r
//loadIframe("topoFrame", "chartTopo.html?serviceId="+row.serviceId);\r
document.getElementById("topoContObj").setAttribute('data', 'TopoAccor.html?serviceId='+row.serviceId);\r
+ document.getElementById("topoContDlg").setAttribute('data', 'TopoAccor.html?serviceId='+row.serviceId);\r
document.getElementById('inputcontent').setAttribute('data', 'InputData.html?json='+ JSON.stringify(row));\r
document.getElementById('inputcontentDlg').setAttribute('data', 'InputData.html?json='+ JSON.stringify(row));\r
});\r
</ul>\r
\r
<div id="detailContMod">\r
- <object data="accorTables.html" width="100%" height="300" type="text/html">\r
+ <object id="detailContDlg" data="accorTables.html" width="100%" height="300" type="text/html">\r
\r
</object>\r
</div>\r
<div id="topoContMod" style="display:none;">\r
- <object data="chartTopo.html" width="100%" height="300" type="text/html">\r
+ <object id="topoContDlg" data="TopoAccor.html" width="100%" height="300" type="text/html">\r
\r
</object>\r
<!--<iframe id="topoFrame" src="chartTopo.html" name="" style="width:100%; height:400px;" allowTransparency="true" scrolling="no" frameborder="0">\r
});\r
\r
function loadUnderlayData() {\r
- var requestUrl = url.underlay + "/openoapi/sdnol3vpn/v1/l3vpns";\r
+ var requestUrl = "/openoapi/sdnol3vpn/v1/l3vpns";\r
$\r
.ajax({\r
type: "GET",\r
});\r
}\r
function deleteUnderlayData(objectId) {\r
- var requestUrl = url.underlay + "/openoapi/sdnol3vpn/v1/l3vpns/" + objectId;\r
+ var requestUrl = "/openoapi/sdnol3vpn/v1/l3vpns/" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
});\r
}\r
function loadOverlayData() {\r
- var requestUrl = url.overlay + "/openoapi/sdnooverlayvpn/v1/site2dc-vpn";\r
+ var requestUrl = "/openoapi/sdnooverlayvpn/v1/site2dc-vpn";\r
$\r
.ajax({\r
type: "GET",\r
var formData = JSON.stringify($("#underlayForm").serializeObject());\r
alert(formData);\r
var jsonobj = JSON.parse(formData);\r
- var requestUrl = url.underlay + "/openoapi/sdnol3vpn/v1/l3vpns";\r
+ var requestUrl = "/openoapi/sdnol3vpn/v1/l3vpns";\r
$\r
.ajax({\r
type: "POST",\r
\r
function deleteSite(objectId) {\r
alert(objectId);\r
- var requestUrl = url + "/openoapi/sdnobrs/v1/sites" + objectId;\r
+ var requestUrl = "/openoapi/sdnobrs/v1/sites" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
});\r
}\r
function deleteLink(objectId) {\r
- var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links" + objectId;\r
+ var requestUrl = "/openoapi/sdnobrs/v1/topological-links" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
}\r
\r
function deleteNe(objectId) {\r
- var requestUrl = url + "/sdnobrs/v1/managed-elements" + objectId;\r
+ var requestUrl = "/sdnobrs/v1/managed-elements" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
}\r
\r
function deletePort(objectId) {\r
- var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points" + objectId;\r
+ var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
});\r
}\r
function loadSiteData() {\r
- var requestUrl = url + "/openoapi/sdnobrs/v1/sites";\r
+ var requestUrl = "/openoapi/sdnobrs/v1/sites";\r
$\r
.ajax({\r
type: "GET",\r
});\r
}\r
function loadLinkData() {\r
- var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links";\r
+ var requestUrl = "/openoapi/sdnobrs/v1/topological-links";\r
$\r
.ajax({\r
type: "GET",\r
});\r
}\r
function loadNeData() {\r
- var requestUrl = url + "/sdnobrs/v1/managed-elements";\r
+ var requestUrl = "/sdnobrs/v1/managed-elements";\r
$\r
.ajax({\r
type: "GET",\r
});\r
}\r
function loadPortData() {\r
- var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points";\r
+ var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points";\r
$\r
.ajax({\r
type: "GET",\r
//Assigning data to table\r
data: jsondata\r
});\r
- $('.table tbody tr').click(function () {\r
- $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
- });\r
+ $('.table tbody tr').click(function () {\r
+ $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
+ });\r
\r
- $('#sai').on('sort.bs.table', function () {\r
- \r
+ $('#sai').on('sort.bs.table', function () {\r
\r
- }).on('click-row.bs.table', function () {\r
- \r
- \r
- $('.table tbody tr').click(function() {\r
- \r
- $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
- });\r
- \r
- });\r
- });\r
\r
- function operateFormatter(value, row, index) {\r
- return [\r
- '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'\r
- ].join('');\r
- }\r
- window.operateEvents = {\r
- 'click .siteDeleteImg': function(e, value, row, index) {\r
- // TO DO ajex call for delete\r
- console.log(value, row, index);\r
- }\r
- };\r
- </script>\r
+ }).on('click-row.bs.table', function () {\r
+\r
+\r
+ $('.table tbody tr').click(function() {\r
+\r
+ $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
+ });\r
+\r
+ });\r
+\r
+ var serviceId = getQueryStringValue("serviceId");\r
+ console.log("overlayvpn - serviceId : " + serviceId);\r
+ });\r
+\r
+ function getQueryStringValue (key) {\r
+ var params = new URLSearchParams(window.location.search.slice(1));\r
+ return params.get(key);\r
+ }\r
+\r
+ function operateFormatter(value, row, index) {\r
+ return [\r
+ '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'\r
+ ].join('');\r
+ }\r
+ window.operateEvents = {\r
+ 'click .siteDeleteImg': function(e, value, row, index) {\r
+ // TO DO ajex call for delete\r
+ console.log(value, row, index);\r
+ }\r
+ };\r
+ </script>\r
<style>\r
.dropdown-menu {\r
min-width: 10px;\r
Code Review / vnfsdk / refrepo.git / commitdiff