--- /dev/null
+<!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
+ <script>\r
+ $(document).ready(function () {\r
+ var serviceId = getQueryStringValue("serviceId");\r
+ console.log("TOPOAccor - serviceId : " + serviceId);\r
+\r
+ $("#topoContObj").attr('data', 'chartTopo.html?serviceId='+serviceId);\r
+ $("#nfvotopoContObj").attr('data', 'lcm_detail_nfvo_topology.html?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
+ </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
+</head>\r
+<body>\r
+ \r
+<div class="container" style="margin-top:10px;">\r
+\r
+ <div class="panel-group" id="accordion">\r
+ \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
+\r
+</body>\r
+</html>
\ No newline at end of file
\r
}\r
}\r
+\r
+ $("#overlayContObj").attr('data', 'overlayvpn.html?serviceId='+serviceId);\r
+ $("#underlayContObj").attr('data', 'underlayvpn.html?serviceId='+serviceId);\r
+\r
+ $("#nfvoContObj").attr('data', 'lcm_detail_nfvo_nodesinfo.html?serviceId='+serviceId);\r
});\r
\r
function fnOver() {\r
el.classList.add('selected');\r
switch (panelType) {\r
case "sdno":\r
+ $("#nfvo_dashboard").hide();\r
if(el.id == "overLink") {\r
$("#dashboard").show();\r
$("#overDiv").show();\r
break;\r
case "gso":\r
$("#dashboard").hide();\r
+ $("#nfvo_dashboard").hide();\r
$("#overDiv").hide();\r
$("#underDiv").hide();\r
break;\r
case "nfvo":\r
$("#dashboard").hide();\r
+ $("#nfvo_dashboard").show();\r
$("#overDiv").hide();\r
$("#underDiv").hide();\r
break;\r
content += '<li onClick="fnLoadTblData(this, \''+type+'\');" id="linkgso" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>OPEN-O</span></li>';\r
}\r
else if(type == "nfvo"){\r
- content += '<li onClick="fnLoadTblData(this, \''+type+'\');" id="linknfvo" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>ZTE</span></li>';\r
+ //content += '<li onClick="fnLoadTblData(this, \''+type+'\');" id="linknfvo" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>ZTE</span></li>';\r
}\r
content += '</ul></div></div>';\r
return content;\r
\r
</div>\r
</div>\r
- <div class="col-sm-3" id="dashboard" style="width:82%; padding: 0;">\r
- <div class="panel panel-default">\r
+ <div class="col-sm-3" style="width:82%; padding: 0;">\r
+ <div id="dashboard" class="panel panel-default">\r
<div class="panel-heading">\r
<h3 class="panel-title">SDNO-VPN Manager</h3>\r
</div>\r
<div class="panel-body" style="height: 250px; overflow: auto; padding: 0; background-color: #fafafa">\r
\r
<div id="overDiv">\r
- <iframe src="overlayvpn.html" style="width:100%;height:450px;" name="targetframe"\r
+ <!--<iframe src="overlayvpn.html" style="width:100%;height:450px;" name="targetframe"\r
allowTransparency="true" scrolling="no" frameborder="0">\r
- </iframe>\r
+ </iframe>-->\r
+ <object id="overlayContObj" data="overlayvpn.html" width="100%" height="450px" type="text/html">\r
+\r
+ </object>\r
</div>\r
<div id="underDiv">\r
- <iframe src="underlayvpn.html" style="width:100%;height:500px;" name="targetframe"\r
+ <!--<iframe src="underlayvpn.html" style="width:100%;height:500px;" name="targetframe"\r
allowTransparency="true" scrolling="no" frameborder="0">\r
- </iframe>\r
+ </iframe>-->\r
+ <object id="underlayContObj" data="underlayvpn.html" width="100%" height="450px" type="text/html">\r
+\r
+ </object>\r
+ </div>\r
+ </div>\r
+ </br>\r
+ </div>\r
+\r
+ <div id="nfvo_dashboard" class="panel panel-default">\r
+ <div class="panel-heading">\r
+ <h3 class="panel-title">NFVO</h3>\r
+ </div>\r
+ <div class="panel-body" style="height: 250px; overflow: auto; padding: 0; background-color: #fafafa">\r
+ <div id="nodesInfo">\r
+ <object id="nfvoContObj" data="lcm_detail_nfvo_nodesinfo.html" width="100%" height="450px" type="text/html">\r
+\r
+ </object>\r
</div>\r
</div>\r
</br>\r
</div>\r
+\r
</div>\r
</div>\r
</div>\r
var serviceId = getQueryStringValue("serviceId");\r
console.log("TOPO - serviceId : "+ serviceId);\r
\r
- var jsonData = loadServiceDetails(serviceId);\r
- console.log("jsonData length: "+jsonData.length);\r
- for(i = 0; i < jsonData.length; i++) {\r
- console.log("jsonData Name: "+jsonData[i].name);\r
- if(jsonData[i].name == "sdno") {\r
- //$("#sdnoLink").text(jsonData[i].name.toUpperCase());\r
- console.log("Adding Accordian to SDNO");\r
- $("#accordion").append(addAccordionData("sdno", jsonData[i].name.toUpperCase()));\r
- }\r
- else if(jsonData[i].name == "gso") {\r
- console.log("Adding Accordian to GSO");\r
- $("#accordion").append(addAccordionData("gso", jsonData[i].name.toUpperCase()));\r
- }\r
- else if(jsonData[i].name == "nfvo") {\r
- console.log("Adding Accordian to NFVO");\r
- $("#accordion").append(addAccordionData("nfvo", jsonData[i].name.toUpperCase()));\r
- }\r
- else {\r
-\r
- }\r
- }\r
+ \r
\r
$('#container').highcharts({\r
chart: {\r
ren.path(rightArrow)\r
.attr({\r
'stroke-width': 1,\r
- stroke: colors[3]\r
+ stroke: colors[1]\r
})\r
.translate(95, 95)\r
.add();\r
ren.path(rightArrow)\r
.attr({\r
'stroke-width': 1,\r
- stroke: colors[3]\r
+ stroke: colors[1]\r
})\r
.translate(300, 95)\r
.add();\r
ren.path(rightArrow)\r
.attr({\r
'stroke-width': 1,\r
- stroke: colors[3]\r
+ stroke: colors[1]\r
})\r
.translate(500, 95)\r
.add();\r
document.getElementById("tabContainer").style.display = "block";\r
\r
//loadIframe("topoFrame", "chartTopo.html?serviceId="+row.serviceId);\r
- document.getElementById("topoCont").setAttribute('data', 'chartTopo.html?serviceId='+row.serviceId);\r
+ document.getElementById("topoContObj").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
<div id="topoCont" style="display:none;">\r
<!--<iframe src="chartTopo.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">\r
</iframe>-->\r
- <object data="chartTopo.html" width="100%" height="300" type="text/html">\r
+ <!--<object data="chartTopo.html" width="100%" height="300" type="text/html">\r
+\r
+ </object>-->\r
+ <object id="topoContObj" data="TopoAccor.html" width="100%" height="300" type="text/html">\r
\r
</object>\r
</div>\r
//Assigning data to table\r
data: {}\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
-\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
- /* function nameFormatter(value, row) {\r
- jsonForTP = row.json.data;\r
- var name=JSON.stringify(row.json.data);\r
- var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='"+ name + "' data-events='operateEventsU'>" + value + "</a>";\r
- return temp;\r
- }*/\r
- function getMethod(obj) {\r
- //Update the lower table here\r
- $('#underlayTpDataTable').bootstrapTable(\r
- //Assigning data to table\r
- "append", JSON.parse(obj.name)\r
- );\r
- }\r
- </script>\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
+\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("underlayvpn - serviceId : " + serviceId);\r
+\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
+ /* function nameFormatter(value, row) {\r
+ jsonForTP = row.json.data;\r
+ var name=JSON.stringify(row.json.data);\r
+ var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='"+ name + "' data-events='operateEventsU'>" + value + "</a>";\r
+ return temp;\r
+ }*/\r
+ function getMethod(obj) {\r
+ //Update the lower table here\r
+ $('#underlayTpDataTable').bootstrapTable(\r
+ //Assigning data to table\r
+ "append", JSON.parse(obj.name)\r
+ );\r
+ }\r
+ </script>\r
\r
</head>\r
\r
Code Review / vnfsdk / refrepo.git / commitdiff