diff options
5 files changed, 239 insertions, 76 deletions
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/TopoAccor.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/TopoAccor.html new file mode 100644 index 00000000..4b4ae9ef --- /dev/null +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/TopoAccor.html @@ -0,0 +1,143 @@ +<!DOCTYPE html>
+<html>
+<head>
+ <link href="css/bootstrap.min.css" rel="stylesheet" />
+
+ <link href="css/bootstrap-table.min.css" rel="stylesheet" />
+
+ <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
+ <script type="text/javascript" src="js/bootstrap.min.js"></script>
+ <script type="text/javascript" src="js/rest.js"></script>
+ <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
+ <script>
+ $(document).ready(function () {
+ var serviceId = getQueryStringValue("serviceId");
+ console.log("TOPOAccor - serviceId : " + serviceId);
+
+ $("#topoContObj").attr('data', 'chartTopo.html?serviceId='+serviceId);
+ $("#nfvotopoContObj").attr('data', 'lcm_detail_nfvo_topology.html?serviceId='+serviceId);
+ });
+
+ function getQueryStringValue (key) {
+ var params = new URLSearchParams(window.location.search.slice(1));
+ return params.get(key);
+ }
+ </script>
+ <meta charset="utf-8">
+ <title>JS Bin</title>
+ <style>
+
+.panel-group .panel-heading + .panel-collapse > .panel-body {
+ border: 1px solid #ddd;
+}
+.panel-group,
+.panel-group .panel,
+.panel-group .panel-heading,
+.panel-group .panel-heading a,
+.panel-group .panel-title,
+.panel-group .panel-title a,
+.panel-group .panel-body,
+.panel-group .panel-group .panel-heading + .panel-collapse > .panel-body {
+ border-radius: 2px;
+ border: 0;
+}
+.panel-group .panel-heading {
+ padding: 0;
+}
+.panel-group .panel-heading a {
+ display: block;
+ background: #428bca;
+ color: #ffffff;
+ padding: 15px;
+ text-decoration: none;
+ position: relative;
+}
+
+.panel-group .panel-heading a:hover {
+ border: 1px solid #4AC9FF;
+
+}
+
+
+.panel-group .panel-heading a.collapsed {
+ background: #eeeeee;
+ color: inherit;
+}
+.panel-group .panel-heading a:after {
+ content: '-';
+ position: absolute;
+ right: 20px;
+ top:5px;
+ font-size:30px;
+}
+.panel-group .panel-heading a.collapsed:after {
+ content: '+';
+}
+.panel-group .panel-collapse {
+ margin-top: 5px !important;
+}
+.panel-group .panel-body {
+ background: #ffffff;
+ padding: 15px;
+}
+.panel-group .panel {
+ background-color: transparent;
+}
+.panel-group .panel-body p:last-child,
+.panel-group .panel-body ul:last-child,
+.panel-group .panel-body ol:last-child {
+ margin-bottom: 0;
+}
+
+ </style>
+</head>
+<body>
+
+<div class="container" style="margin-top:10px;">
+
+ <div class="panel-group" id="accordion">
+
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h4 class="panel-title">
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+ SDNO
+ </a>
+ </h4>
+ </div><!--/.panel-heading -->
+ <div id="collapseOne" class="panel-collapse collapse in">
+ <div class="panel-body">
+ <!--iframe src="chartTopo.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">
+ </iframe>-->
+ <object id="topoContObj" data="chartTopo.html" width="100%" height="300" type="text/html">
+
+ </object>
+ </div><!--/.panel-body -->
+ </div><!--/.panel-collapse -->
+ </div><!-- /.panel -->
+
+
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h4 class="panel-title">
+ <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+ NFVO
+ </a>
+ </h4>
+ </div><!--/.panel-heading -->
+ <div id="collapseThree" class="panel-collapse collapse">
+ <div class="panel-body">
+ <object id="nfvotopoContObj" data="lcm_detail_nfvo_topology.html" width="100%" height="300" type="text/html">
+
+ </object>
+ </div><!--/.panel-body -->
+ </div><!--/.panel-collapse -->
+ </div><!-- /.panel -->
+ </div><!-- /.panel-group -->
+
+</div><!-- /.container -->
+
+
+
+</body>
+</html>
\ No newline at end of file diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html index d23807f4..d3df215a 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html @@ -54,6 +54,11 @@ }
}
+
+ $("#overlayContObj").attr('data', 'overlayvpn.html?serviceId='+serviceId);
+ $("#underlayContObj").attr('data', 'underlayvpn.html?serviceId='+serviceId);
+
+ $("#nfvoContObj").attr('data', 'lcm_detail_nfvo_nodesinfo.html?serviceId='+serviceId);
});
function fnOver() {
@@ -81,6 +86,7 @@ el.classList.add('selected');
switch (panelType) {
case "sdno":
+ $("#nfvo_dashboard").hide();
if(el.id == "overLink") {
$("#dashboard").show();
$("#overDiv").show();
@@ -97,11 +103,13 @@ break;
case "gso":
$("#dashboard").hide();
+ $("#nfvo_dashboard").hide();
$("#overDiv").hide();
$("#underDiv").hide();
break;
case "nfvo":
$("#dashboard").hide();
+ $("#nfvo_dashboard").show();
$("#overDiv").hide();
$("#underDiv").hide();
break;
@@ -138,7 +146,7 @@ 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>';
}
else if(type == "nfvo"){
- content += '<li onClick="fnLoadTblData(this, \''+type+'\');" id="linknfvo" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>ZTE</span></li>';
+ //content += '<li onClick="fnLoadTblData(this, \''+type+'\');" id="linknfvo" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>ZTE</span></li>';
}
content += '</ul></div></div>';
return content;
@@ -268,22 +276,42 @@ </div>
</div>
- <div class="col-sm-3" id="dashboard" style="width:82%; padding: 0;">
- <div class="panel panel-default">
+ <div class="col-sm-3" style="width:82%; padding: 0;">
+ <div id="dashboard" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">SDNO-VPN Manager</h3>
</div>
<div class="panel-body" style="height: 250px; overflow: auto; padding: 0; background-color: #fafafa">
<div id="overDiv">
- <iframe src="overlayvpn.html" style="width:100%;height:450px;" name="targetframe"
+ <!--<iframe src="overlayvpn.html" style="width:100%;height:450px;" name="targetframe"
allowTransparency="true" scrolling="no" frameborder="0">
- </iframe>
+ </iframe>-->
+ <object id="overlayContObj" data="overlayvpn.html" width="100%" height="450px" type="text/html">
+
+ </object>
</div>
<div id="underDiv">
- <iframe src="underlayvpn.html" style="width:100%;height:500px;" name="targetframe"
+ <!--<iframe src="underlayvpn.html" style="width:100%;height:500px;" name="targetframe"
allowTransparency="true" scrolling="no" frameborder="0">
- </iframe>
+ </iframe>-->
+ <object id="underlayContObj" data="underlayvpn.html" width="100%" height="450px" type="text/html">
+
+ </object>
+ </div>
+ </div>
+ </br>
+ </div>
+
+ <div id="nfvo_dashboard" class="panel panel-default">
+ <div class="panel-heading">
+ <h3 class="panel-title">NFVO</h3>
+ </div>
+ <div class="panel-body" style="height: 250px; overflow: auto; padding: 0; background-color: #fafafa">
+ <div id="nodesInfo">
+ <object id="nfvoContObj" data="lcm_detail_nfvo_nodesinfo.html" width="100%" height="450px" type="text/html">
+
+ </object>
</div>
</div>
</br>
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html index 53fa5709..ab0d71f3 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html @@ -96,27 +96,7 @@ var serviceId = getQueryStringValue("serviceId");
console.log("TOPO - serviceId : "+ serviceId);
- var jsonData = loadServiceDetails(serviceId);
- console.log("jsonData length: "+jsonData.length);
- for(i = 0; i < jsonData.length; i++) {
- console.log("jsonData Name: "+jsonData[i].name);
- if(jsonData[i].name == "sdno") {
- //$("#sdnoLink").text(jsonData[i].name.toUpperCase());
- console.log("Adding Accordian to SDNO");
- $("#accordion").append(addAccordionData("sdno", jsonData[i].name.toUpperCase()));
- }
- else if(jsonData[i].name == "gso") {
- console.log("Adding Accordian to GSO");
- $("#accordion").append(addAccordionData("gso", jsonData[i].name.toUpperCase()));
- }
- else if(jsonData[i].name == "nfvo") {
- console.log("Adding Accordian to NFVO");
- $("#accordion").append(addAccordionData("nfvo", jsonData[i].name.toUpperCase()));
- }
- else {
-
- }
- }
+
$('#container').highcharts({
chart: {
@@ -149,7 +129,7 @@ ren.path(rightArrow)
.attr({
'stroke-width': 1,
- stroke: colors[3]
+ stroke: colors[1]
})
.translate(95, 95)
.add();
@@ -211,7 +191,7 @@ ren.path(rightArrow)
.attr({
'stroke-width': 1,
- stroke: colors[3]
+ stroke: colors[1]
})
.translate(300, 95)
.add();
@@ -219,7 +199,7 @@ ren.path(rightArrow)
.attr({
'stroke-width': 1,
- stroke: colors[3]
+ stroke: colors[1]
})
.translate(500, 95)
.add();
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html index b7357c52..a474be8a 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html @@ -72,7 +72,7 @@ document.getElementById("tabContainer").style.display = "block";
//loadIframe("topoFrame", "chartTopo.html?serviceId="+row.serviceId);
- document.getElementById("topoCont").setAttribute('data', 'chartTopo.html?serviceId='+row.serviceId);
+ document.getElementById("topoContObj").setAttribute('data', 'TopoAccor.html?serviceId='+row.serviceId);
document.getElementById('inputcontent').setAttribute('data', 'InputData.html?json='+ JSON.stringify(row));
document.getElementById('inputcontentDlg').setAttribute('data', 'InputData.html?json='+ JSON.stringify(row));
});
@@ -455,7 +455,10 @@ <div id="topoCont" style="display:none;">
<!--<iframe src="chartTopo.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">
</iframe>-->
- <object data="chartTopo.html" width="100%" height="300" type="text/html">
+ <!--<object data="chartTopo.html" width="100%" height="300" type="text/html">
+
+ </object>-->
+ <object id="topoContObj" data="TopoAccor.html" width="100%" height="300" type="text/html">
</object>
</div>
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html index 58c09586..6d8b545e 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html @@ -105,49 +105,58 @@ //Assigning data to table
data: {}
});
- $('.table tbody tr').click(function () {
- $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
- });
-
- $('#sai').on('sort.bs.table', function () {
-
-
- }).on('click-row.bs.table', function () {
-
-
- $('.table tbody tr').click(function() {
-
- $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
- });
-
- });
- });
-
- function operateFormatter(value, row, index) {
- return [
- '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'
- ].join('');
- }
- window.operateEvents = {
- 'click .siteDeleteImg': function(e, value, row, index) {
- // TO DO ajex call for delete
- console.log(value, row, index);
- }
- };
- /* function nameFormatter(value, row) {
- jsonForTP = row.json.data;
- var name=JSON.stringify(row.json.data);
- var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='"+ name + "' data-events='operateEventsU'>" + value + "</a>";
- return temp;
- }*/
- function getMethod(obj) {
- //Update the lower table here
- $('#underlayTpDataTable').bootstrapTable(
- //Assigning data to table
- "append", JSON.parse(obj.name)
- );
- }
- </script>
+ $('.table tbody tr').click(function () {
+ $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
+ });
+
+ $('#sai').on('sort.bs.table', function () {
+
+
+ }).on('click-row.bs.table', function () {
+
+
+ $('.table tbody tr').click(function() {
+
+ $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
+ });
+
+ });
+
+ var serviceId = getQueryStringValue("serviceId");
+ console.log("underlayvpn - serviceId : " + serviceId);
+
+ });
+
+ function getQueryStringValue (key) {
+ var params = new URLSearchParams(window.location.search.slice(1));
+ return params.get(key);
+ }
+
+ function operateFormatter(value, row, index) {
+ return [
+ '<img class="siteDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />'
+ ].join('');
+ }
+ window.operateEvents = {
+ 'click .siteDeleteImg': function(e, value, row, index) {
+ // TO DO ajex call for delete
+ console.log(value, row, index);
+ }
+ };
+ /* function nameFormatter(value, row) {
+ jsonForTP = row.json.data;
+ var name=JSON.stringify(row.json.data);
+ var temp = "<a class='underlayNameLink' onclick='getMethod(this)' name='"+ name + "' data-events='operateEventsU'>" + value + "</a>";
+ return temp;
+ }*/
+ function getMethod(obj) {
+ //Update the lower table here
+ $('#underlayTpDataTable').bootstrapTable(
+ //Assigning data to table
+ "append", JSON.parse(obj.name)
+ );
+ }
+ </script>
</head>
|