diff options
| author |   Seshu-Kumar-M <seshu.kumar.m@huawei.com> | 2016-11-02 22:14:39 +0800 |
|---|---|---|
| committer | Seshu-Kumar-M <seshu.kumar.m@huawei.com> | 2016-11-02 22:19:21 +0800 |
| commit | cca974edc1935bab8e4329eaab3fc9a98b097692 (patch) | |
| tree | c41bac038bfbd8c514ad0b8bf03f6218aadab285 | |
| parent | 451537993654c2e792bc3a082e27ee82a303f88f (diff) | |
Issue related to the underlay VPN details loading from the Service.
Accordion loading from the GSO tabbed pane
SDNO-847
Change-Id: I10b507a49c633d4978e6e4c79ab2add600f94ba8
Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>
7 files changed, 215 insertions, 167 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 index 4b4ae9ef..cd021a49 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/TopoAccor.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/TopoAccor.html @@ -1,14 +1,14 @@ <!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>
+ <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");
@@ -22,122 +22,133 @@ var params = new URLSearchParams(window.location.search.slice(1));
return params.get(key);
}
+ function acordClick_sdno() {
+ $("#topoContObj").show();
+ $("#nfvotopoContObj").hide();
+ }
+ function acordClick_nfvo() {
+ $("#nfvotopoContObj").show();
+ $("#topoContObj").hide();
+ }
+
</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>
+ <meta charset="utf-8">
+ <title>JS Bin</title>
+ <style>
+ body {
+ overflow: hidden;
+ margin: 15px;
+ }
+ .panel-heading:hover {
+ border: 1px solid #4ac9ff;
+ color: #4ac9ff;
+ }
+
+ li:hover {
+ cursor: pointer;
+ color: #4ac9ff;
+ }
+ #accordion .glyphicon {
+ margin-right: 10px;
+ }
+
+ .panel-collapse > .list-group .list-group-item:first-child {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+ }
+
+ .panel-collapse > .list-group .list-group-item {
+ border-width: 1px 0;
+ }
+
+ .panel-collapse > .list-group {
+ margin-bottom: 0;
+ }
+
+ .panel-collapse .list-group-item {
+ border-radius: 0;
+ }
+
+ .panel-collapse .list-group .list-group {
+ margin: 0;
+ margin-top: 10px;
+ }
+
+ .panel-collapse .list-group-item li.list-group-item {
+ margin: 0 -15px;
+ border-top: 1px solid #ddd !important;
+ border-bottom: 0;
+ padding-left: 30px;
+ }
+
+ .panel-collapse .list-group-item li.list-group-item:last-child {
+ padding-bottom: 0;
+ }
+
+ .panel-collapse div.list-group div.list-group {
+ margin: 0;
+ }
+
+ .panel-collapse div.list-group .list-group a.list-group-item {
+ border-top: 1px solid #ddd !important;
+ border-bottom: 0;
+ padding-left: 30px;
+ }
+
+ .panel-collapse .list-group-item li.list-group-item {
+ border-top: 1px solid #DDD !important;
+ }
+
+ .selected {
+ /*background-color: #ddd;*/
+ color: #4ac9ff;
+ }
+ .panel-title>a {
+ display: inline-block;
+ width: 100%;
+ }
+
+ </style>
</head>
<body>
-
-<div class="container" style="margin-top:10px;">
- <div class="panel-group" id="accordion">
-
+ <div class="row">
+ <div class="col-sm-3" style="width: 18%; padding-right: 0;">
+ <div class="panel-group" id="accordion">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h4 class="panel-title">
+ <a id="sdno" style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" onClick="acordClick_sdno();">
+ SDNO
+ </a>
+ </h4>
+ </div>
+ </div>
+ </div>
<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 -->
-
-
+ <div class="panel-heading">
+ <h4 class="panel-title">
+ <a id="nfvo" style="text-decoration:none;" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" onClick="acordClick_nfvo();">
+ NFVO
+ </a>
+ </h4>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-3" style="width: 82%; padding-right: 0;">
+ <div class="panel-body" style="padding: 0">
+ <object id="topoContObj" data="chartTopo.html" width="100%" height="300" type="text/html">
+
+ </object>
+ </div>
+ <div class="panel-body" style="padding: 0">
+ <object id="nfvotopoContObj" data="lcm_detail_nfvo_topology.html" width="100%" height="300" type="text/html">
+
+ </object>
+ </div>
+ </div>
+ </div>
+
</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 cd0fd32b..826fc049 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html @@ -27,13 +27,37 @@ <script>
$(document).ready(function () {
- $("#overDiv").show();
+
+ $("#dashboard").hide();
+ $("#nfvo_dashboard").hide()
+ $("#overDiv").hide();
$("#underDiv").hide();
var serviceId = getQueryStringValue("serviceId");
+ var serviceType = getQueryStringValue("serviceType");
+
console.log("serviceId : " + serviceId);
-
- var jsonData = loadServiceDetails(serviceId);
+
+ var jsonData = [];
+ var object = {};
+ debugger;
+ if("SSAR" === serviceType)
+ {
+ object.name = "sdno"
+ jsonData[0] = object;
+ }
+ else if("NSAR" == serviceType || "NFAR" == serviceType || "NFVO" == serviceType)
+ {
+ object.name = "nfvo";
+ jsonData[0] = object;
+ }
+ else{
+ jsonData = loadServiceDetails(serviceId);
+ }
+
+
+
+ //TODO check for the
console.log("jsonData length: " + jsonData.length);
for (i = 0; i < jsonData.length; i++) {
console.log("jsonData Name: " + jsonData[i].name);
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 ab0d71f3..e9fccf60 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html @@ -32,8 +32,11 @@ <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"> </script>
<link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />
- <script type="text/javascript" src="js/highcharts.js"></script>
- <script type="text/javascript" src="js/exporting.js"></script>
+
+ <script src="js/topo/sigma/sigma.min.js"></script>
+ <script src="js/topo/sigma/sigma.renderers.edgeLabels.min.js"></script>
+
+
<style>
body {
overflow: hidden;
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 3e7d167d..2a352cd0 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html @@ -66,15 +66,17 @@ $("#inpContMod").hide();
$('#sai').bootstrapTable({}) .on('click-row.bs.table', function (e, row, $element) {
- var newURL = "accorTables.html?serviceId="+row.serviceId;
+ var newURL = "accorTables.html?serviceId="+row.serviceId + "&serviceType="+row.serviceType;
+ // var newURL = "accorTables.html?serviceId="+row.serviceId ;
console.log("URL: "+newURL);
document.getElementById("tabContainer").style.display = "none";
document.getElementById("detailConObj").setAttribute('data', newURL);
- document.getElementById("detailContMod").setAttribute('data', newURL);
+ document.getElementById("detailContDlg").setAttribute('data', newURL);
document.getElementById("tabContainer").style.display = "block";
//loadIframe("topoFrame", "chartTopo.html?serviceId="+row.serviceId);
document.getElementById("topoContObj").setAttribute('data', 'TopoAccor.html?serviceId='+row.serviceId);
+ document.getElementById("topoContDlg").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));
});
@@ -377,12 +379,12 @@ </ul>
<div id="detailContMod">
- <object data="accorTables.html" width="100%" height="300" type="text/html">
+ <object id="detailContDlg" data="accorTables.html" width="100%" height="300" type="text/html">
</object>
</div>
<div id="topoContMod" style="display:none;">
- <object data="chartTopo.html" width="100%" height="300" type="text/html">
+ <object id="topoContDlg" data="TopoAccor.html" width="100%" height="300" type="text/html">
</object>
<!--<iframe id="topoFrame" src="chartTopo.html" name="" style="width:100%; height:400px;" allowTransparency="true" scrolling="no" frameborder="0">
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/underlay.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/underlay.js index 6a2a8bf1..d7451a13 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/underlay.js +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/underlay.js @@ -21,7 +21,7 @@ $.getJSON("./conf/dataconfig.json", function (jsonData){ });
function loadUnderlayData() {
- var requestUrl = url.underlay + "/openoapi/sdnol3vpn/v1/l3vpns";
+ var requestUrl = "/openoapi/sdnol3vpn/v1/l3vpns";
$
.ajax({
type: "GET",
@@ -37,7 +37,7 @@ function loadUnderlayData() { });
}
function deleteUnderlayData(objectId) {
- var requestUrl = url.underlay + "/openoapi/sdnol3vpn/v1/l3vpns/" + objectId;
+ var requestUrl = "/openoapi/sdnol3vpn/v1/l3vpns/" + objectId;
$
.ajax({
type: "DELETE",
@@ -53,7 +53,7 @@ function deleteUnderlayData(objectId) { });
}
function loadOverlayData() {
- var requestUrl = url.overlay + "/openoapi/sdnooverlayvpn/v1/site2dc-vpn";
+ var requestUrl = "/openoapi/sdnooverlayvpn/v1/site2dc-vpn";
$
.ajax({
type: "GET",
@@ -91,7 +91,7 @@ $(function () { var formData = JSON.stringify($("#underlayForm").serializeObject());
alert(formData);
var jsonobj = JSON.parse(formData);
- var requestUrl = url.underlay + "/openoapi/sdnol3vpn/v1/l3vpns";
+ var requestUrl = "/openoapi/sdnol3vpn/v1/l3vpns";
$
.ajax({
type: "POST",
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/vpn.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/vpn.js index f898e3de..e309d3e6 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/vpn.js +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/vpn.js @@ -21,7 +21,7 @@ $.getJSON("./conf/dataconfig.json", function (jsonData){ function deleteSite(objectId) {
alert(objectId);
- var requestUrl = url + "/openoapi/sdnobrs/v1/sites" + objectId;
+ var requestUrl = "/openoapi/sdnobrs/v1/sites" + objectId;
$
.ajax({
type: "DELETE",
@@ -37,7 +37,7 @@ function deleteSite(objectId) { });
}
function deleteLink(objectId) {
- var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links" + objectId;
+ var requestUrl = "/openoapi/sdnobrs/v1/topological-links" + objectId;
$
.ajax({
type: "DELETE",
@@ -54,7 +54,7 @@ function deleteLink(objectId) { }
function deleteNe(objectId) {
- var requestUrl = url + "/sdnobrs/v1/managed-elements" + objectId;
+ var requestUrl = "/sdnobrs/v1/managed-elements" + objectId;
$
.ajax({
type: "DELETE",
@@ -71,7 +71,7 @@ function deleteNe(objectId) { }
function deletePort(objectId) {
- var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points" + objectId;
+ var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points" + objectId;
$
.ajax({
type: "DELETE",
@@ -87,7 +87,7 @@ function deletePort(objectId) { });
}
function loadSiteData() {
- var requestUrl = url + "/openoapi/sdnobrs/v1/sites";
+ var requestUrl = "/openoapi/sdnobrs/v1/sites";
$
.ajax({
type: "GET",
@@ -103,7 +103,7 @@ function loadSiteData() { });
}
function loadLinkData() {
- var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links";
+ var requestUrl = "/openoapi/sdnobrs/v1/topological-links";
$
.ajax({
type: "GET",
@@ -119,7 +119,7 @@ function loadLinkData() { });
}
function loadNeData() {
- var requestUrl = url + "/sdnobrs/v1/managed-elements";
+ var requestUrl = "/sdnobrs/v1/managed-elements";
$
.ajax({
type: "GET",
@@ -135,7 +135,7 @@ function loadNeData() { });
}
function loadPortData() {
- var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points";
+ var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points";
$
.ajax({
type: "GET",
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html index 7656f57b..d55e4319 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html @@ -42,36 +42,44 @@ //Assigning data to table
data: jsondata
});
- $('.table tbody tr').click(function () {
- $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
- });
+ $('.table tbody tr').click(function () {
+ $(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
+ });
- $('#sai').on('sort.bs.table', function () {
-
+ $('#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);
- }
- };
- </script>
+ }).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("overlayvpn - 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);
+ }
+ };
+ </script>
<style>
.dropdown-menu {
min-width: 10px;
|