diff options
Diffstat (limited to 'openo-portal/portal-lifecyclemgr')
10 files changed, 558 insertions, 445 deletions
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/InputData.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/InputData.html index 1d29947c..917cff16 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/InputData.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/InputData.html @@ -30,28 +30,20 @@ <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 rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- <script>
+ <script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
+
var params = new URLSearchParams(window.location.search.slice(1));
var jsonData = JSON.parse((params.get("json")));
if (jsonData != null) {
$("body").empty();
- for (var key in jsonData.inputParameters) {
- console.log("This is checker " + key);
- //$("body").empty();
- //document.getElementById("").innerHTML = "<div>Paragraph changed!</div>";
-
- //$("#mybody").html("hi");
- $("body").append('<div class="mT15 form-group" style="margin-top:35px;margin-left:25%"><label class="control-label"><span style="font-size:16px;">' + key + ':</span></label><input type="text" name="" maxlength="256" style="margin-left:10px;width:300px;" value="' + jsonData.inputParameters[key] + '" readonly disabled/></div>');
+ for(var key in jsonData.inputParameters){
+ $("body").append('<div class="mT15 form-group row" style="margin-top:35px;margin-left:25%"><div class="col-sm-6" align="right"><label class="control-label"><span style="font-size:16px;">'+ key + ':</span></label></div><div class="col-sm-6"><input type="text" name="" maxlength="256" style="margin-left:10px;width:250px;" data-toggle="tooltip" data-placement="top" title="'+ jsonData.inputParameters[key] + '" value="'+ jsonData.inputParameters[key] + '" readonly disabled/></div></div>');
}
}
- //$("body").append('<div class="mT15 form-group" style="margin-top:35px;margin-left:25%"><label class="control-label"><span style="font-size:16px;">vCpe Name :</span></label><input type="text" name="" maxlength="256" style="margin-left:10px;width:300px;" value="Sample Data" readonly disabled/></div>');
});
</script>
@@ -64,23 +56,6 @@ <body>
-
-<!-- <div class="mT15 form-group" style="margin-top:35px;margin-left:25%">
- <label class="control-label">
- <span style="font-size:16px;">vCpe Name :</span>
- </label>
-
- <input type="text" name="" maxlength="256" style="margin-left:10px;width:300px;" value="Sample Data" readonly disabled/>
-</div>
-
-<div class="mT15 form-group" style="margin-left:25%">
- <label class="control-label">
- <span style="font-size:16px;">IP Address :</span>
- </label>
- <input type="text" name="" maxlength="256" style="margin-left:10px;width:300px;" value="Sample Data" readonly disabled/>
-</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 98d7e7db..d23807f4 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/accorTables.html @@ -33,7 +33,7 @@ var serviceId = getQueryStringValue("serviceId");
console.log("serviceId : " + serviceId);
- var jsonData = loadServiceDetails("", 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);
@@ -72,6 +72,43 @@ $("#dashboard").hide();
}
+ function fnLoadTblData(el, panelType) {
+ console.log("panelType of "+el.id+" is "+panelType);
+ var current = document.querySelector('.selected');
+ if (current) {
+ current.classList.remove('selected');
+ }
+ el.classList.add('selected');
+ switch (panelType) {
+ case "sdno":
+ if(el.id == "overLink") {
+ $("#dashboard").show();
+ $("#overDiv").show();
+ $("#underDiv").hide();
+ } else if(el.id == "underLink"){
+ $("#dashboard").show();
+ $("#overDiv").hide();
+ $("#underDiv").show();
+ } else {
+ $("#dashboard").hide();
+ $("#overDiv").hide();
+ $("#underDiv").hide();
+ }
+ break;
+ case "gso":
+ $("#dashboard").hide();
+ $("#overDiv").hide();
+ $("#underDiv").hide();
+ break;
+ case "nfvo":
+ $("#dashboard").hide();
+ $("#overDiv").hide();
+ $("#underDiv").hide();
+ break;
+ }
+
+ }
+
function getQueryStringValue(key) {
var params = new URLSearchParams(window.location.search.slice(1));
return params.get(key);
@@ -81,23 +118,27 @@ var content = '';
content += '<div class="panel panel-default"><div class="panel-heading">';
content += '<h4 class="panel-title">';
- content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">';
- content += '<span id="sdnoLink">' + text + '</span></a>';
+ content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne_'+type+'" onClick="fnLoadTblData(this, \''+type+'\');">';
+ content += '<span id="sdnoLink">'+text+'</span></a>';
content += '</h4></div>';
- content += '<div id="collapseOne" class="panel-collapse collapse in">';
+ if(type == "sdno") {
+ content += '<div id="collapseOne_' + type + '" class="panel-collapse collapse in">';
+ } else {
+ content += '<div id="collapseOne_' + type + '" class="panel-collapse collapse">';
+ }
content += '<ul class="list-group">';
- if (type == "sdno") {
- content += '<li onClick="fnOver();" id="overLink" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>Overlay VPN</span>';
+ if(type == "sdno") {
+ content += '<li onClick="fnLoadTblData(this, \''+type+'\');" id="overLink" class="list-group-item selected"><span class="glyphicon glyphicon-pencil text-primary"></span><span>Overlay VPN</span>';
content += '</li>';
- content += '<li id="underLink" onClick="fnUnder();" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>Underlay VPN</span>';
+ content += '<li id="underLink" onClick="fnLoadTblData(this, \''+type+'\');" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>Underlay VPN</span>';
content += '</li>';
}
- else if (type == "gso") {
- content += '<li onClick="clZte();" id="underLink" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>OPEN-O</span></li>';
+ else if(type == "gso"){
+ 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="clZte();" id="underLink" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>ZTE</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 += '</ul></div></div>';
return content;
@@ -173,12 +214,21 @@ .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="">
<div class="row">
- <div class="col-sm-3" style="width:18%">
+ <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">
@@ -218,20 +268,20 @@ </div>
</div>
- <div class="col-sm-3" id="dashboard" style="width:82%">
+ <div class="col-sm-3" id="dashboard" style="width:82%; padding: 0;">
<div 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;">
+ <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:210px;" name="targetframe"
+ <iframe src="overlayvpn.html" style="width:100%;height:450px;" name="targetframe"
allowTransparency="true" scrolling="no" frameborder="0">
</iframe>
</div>
<div id="underDiv">
- <iframe src="underlayvpn.html" style="width:100%;height:450px;" name="targetframe"
+ <iframe src="underlayvpn.html" style="width:100%;height:500px;" name="targetframe"
allowTransparency="true" scrolling="no" frameborder="0">
</iframe>
</div>
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 83ac9957..53fa5709 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/chartTopo.html @@ -29,11 +29,11 @@ <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 type="text/javascript" src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"> </script>
- <link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
+ <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 src="https://code.highcharts.com/highcharts.js"></script>
- <script src="https://code.highcharts.com/modules/exporting.js"></script>
+ <script type="text/javascript" src="js/highcharts.js"></script>
+ <script type="text/javascript" src="js/exporting.js"></script>
<style>
body {
overflow: hidden;
@@ -96,7 +96,7 @@ var serviceId = getQueryStringValue("serviceId");
console.log("TOPO - serviceId : "+ serviceId);
- var jsonData = loadServiceDetails("", 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);
@@ -236,12 +236,9 @@ }
});
- function fnOver() {
- console.log("Clicked");
- }
- function addAccordionData(type, text){
+ function addAccordionData(paneltype, text){
var content = '';
- content += '<div class="panel panel-default"><div class="panel-heading" onClick="fnOver();">';
+ content += '<div id="panel_'+paneltype+'" class="panel panel-default" onclick="acordClick(\''+paneltype+'\');"><div class="panel-heading">';
content += '<h4 class="panel-title">';
content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">';
content += '<span id="sdnoLink">'+text+'</span></a>';
@@ -254,19 +251,29 @@ return params.get(key);
}
});
+ function acordClick(panelType) {
+ //TODO: Act according to the panelType. value may be sdno, gso or nfvo
+ console.log(panelType + " Clicked");
+ }
</script>
+
+ <style>
+hr{
+ margin:1px;
+}
+</style>
</head>
<body>
<div class="">
- <div class="row" oncli>
+ <div class="row">
<div class="col-sm-3" style="width:18%">
<div class="panel-group" id="accordion">
</div>
</div>
<div class="col-sm-3" id="dashboard" style="width:82%">
- <div id="container" style="width: 600px; height: 250px; margin: 0 auto; display: inline-block;"> </div>
+ <div id="container" style="width: 750px; height: 250px; margin: 0 auto; display: inline-block;"> </div>
</div>
</div>
</div>
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 4fabdaf7..4527e27e 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html @@ -33,7 +33,6 @@ <link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
- var url = "";
/* $('.modal-content').resizable({
minHeight: 300,
@@ -41,7 +40,7 @@ });*/
$('.modal-dialog').draggable();
$("#detailCont").show();
- var jsondata = loadGetServiceData(url);
+ var jsondata = loadGetServiceData();
$('#sai').bootstrapTable({
//Assigning data to table
data: jsondata
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/brs.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/brs.js index 5bdc6ba7..1c07026d 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/brs.js +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/brs.js @@ -13,6 +13,11 @@ * limitations under the License.
*/
+var url = "";
+$.getJSON("./conf/dataconfig.json", function (jsonData){
+ url = jsonData.url +":"+ jsonData.port + "/org.openo.sdno.brs";
+ console.log("URL = " + url);
+});
$('.siteDeleteImg').click(function () {
var data = $(this).parent().parent().parent().find('td:last').find('div:last').html();
@@ -28,7 +33,7 @@ $('.siteDeleteImg').click(function () { function deleteSite(objectId) {
- var requestUrl = "/openoapi/sdnobrs/v1/sites/" + objectId;
+ var requestUrl = url + "/openoapi/sdnobrs/v1/sites/" + objectId;
$
.ajax({
type: "DELETE",
@@ -47,7 +52,7 @@ function deleteSite(objectId) { });
}
function deleteLink(objectId) {
- var requestUrl = "/openoapi/sdnobrs/v1/topological-links/" + objectId;
+ var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links/" + objectId;
$
.ajax({
type: "DELETE",
@@ -67,7 +72,7 @@ function deleteLink(objectId) { }
function deleteNe(objectId) {
- var requestUrl = "/openoapi/sdnobrs/v1/managed-elements/" + objectId;
+ var requestUrl = url + "/openoapi/sdnobrs/v1/managed-elements/" + objectId;
$
.ajax({
type: "DELETE",
@@ -87,7 +92,7 @@ function deleteNe(objectId) { }
function deletePort(objectId) {
- var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points/" + objectId;
+ var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points/" + objectId;
$
.ajax({
type: "DELETE",
@@ -106,7 +111,7 @@ function deletePort(objectId) { });
}
function loadSiteData() {
- var requestUrl = "/openoapi/sdnobrs/v1/sites";
+ var requestUrl = url + "/openoapi/sdnobrs/v1/sites";
$
.ajax({
type: "GET",
@@ -123,7 +128,7 @@ function loadSiteData() { });
}
function loadLinkData() {
- var requestUrl = "/openoapi/sdnobrs/v1/topological-links";
+ var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links";
$
.ajax({
type: "GET",
@@ -140,7 +145,7 @@ function loadLinkData() { });
}
function loadNeData() {
- var requestUrl = "/openoapi/sdnobrs/v1/managed-elements";
+ var requestUrl = url + "/openoapi/sdnobrs/v1/managed-elements";
$
.ajax({
type: "GET",
@@ -157,7 +162,7 @@ function loadNeData() { });
}
function loadPortData() {
- var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points";
+ var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points";
$
.ajax({
type: "GET",
@@ -175,8 +180,8 @@ function loadPortData() { }
$(function () {
$('.creat-btn').click(function () {
- $('#vmAppDialog').addClass('in').css({'display': 'block'});
-
+ /*$('#vmAppDialog').addClass('in').css({'display': 'block'});*/
+ $('#vmAppDialog').modal();
});
$('.close,.button-previous').click(function () {
$('#vmAppDialog').removeClass('in').css('display', 'none');
@@ -197,12 +202,13 @@ $(function () { $('#flavorTab').css('display', 'none');
});
- $('.table tbody tr').click(function () {
+ /*$('.table tbody tr').click(function(){
$(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
- });
+ });*/
$('.table tr:odd').addClass('active');
$('#false').click(function () {
- $('#vmAppDialog').addClass('in').css({'display': 'block'});
+ /*$('#vmAppDialog').addClass('in').css({'display': 'block'});*/
+ $('#vmAppDialog').modal();
});
$('.close,.button-previous').click(function () {
$('#vmAppDialog').removeClass('in').css('display', 'none');
@@ -241,7 +247,7 @@ $(function () { var jsonobj = JSON.parse(formData);
var newJson = {"site": jsonobj};
formData = JSON.stringify(newJson);
- var requestUrl = "/openoapi/sdnobrs/v1/sites";
+ var requestUrl = url + "/openoapi/sdnobrs/v1/sites";
$
.ajax({
type: "POST",
@@ -266,7 +272,7 @@ $(function () { var jsonobj = JSON.parse(formData);
var newJson = {"managedElement": jsonobj};
formData = JSON.stringify(newJson);
- var requestUrl = "/openoapi/sdnobrs/v1/managed-elements";
+ var requestUrl = url + "/openoapi/sdnobrs/v1/managed-elements";
$
.ajax({
type: "POST",
@@ -292,7 +298,7 @@ $(function () { var jsonobj = JSON.parse(formData);
var newJson = {"logicalTerminationPoint": jsonobj};
formData = JSON.stringify(newJson);
- var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points";
+ var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points";
$
.ajax({
type: "POST",
@@ -319,7 +325,7 @@ $(function () { var jsonobj = JSON.parse(formData);
var newJson = {"topologicalLink": jsonobj};
formData = JSON.stringify(newJson);
- var requestUrl = "/openoapi/sdnobrs/v1/topological-links";
+ var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links";
$
.ajax({
type: "POST",
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/rest.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/rest.js index bc4d216a..a72cbf27 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/rest.js +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/rest.js @@ -13,10 +13,17 @@ * limitations under the License.
*/
-
+var url = "";
$(function () {
+
+ $.getJSON("./conf/dataconfig.json", function (jsonData){
+ url = jsonData.url +":"+ jsonData.port;
+ console.log("URL = " + url);
+ });
+
$('.creat-btn').click(function () {
- $('#vmAppDialog').addClass('in').css({'display': 'block'});
+ /*$('#vmAppDialog').addClass('in').css({'display': 'block'});*/
+ $('#vmAppDialog').modal();
});
$('.close,.button-previous').click(function () {
@@ -27,7 +34,7 @@ $(function () { });
$('.para').click(function () {
if ($('#serviceTemplateName').val() == '') {
- alert('Please choose the service templet！');
+ alert('Please choose the service template！');
$('#flavorTab').css('display', 'none');
} else {
$('#flavorTab').css('display', 'block');
@@ -37,13 +44,14 @@ $(function () { $('.basic').click(function () {
$('#flavorTab').css('display', 'none');
});
-
- $('.table tbody tr').click(function () {
+/*
+ $('.table tbody tr').click(function(){
$(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');
- });
+ });*/
$('.table tr:odd').addClass('active');
$('#false').click(function () {
- $('#vmAppDialog').addClass('in').css({'display': 'block'});
+ /*$('#vmAppDialog').addClass('in').css({'display': 'block'});*/
+ $('#vmAppDialog').modal();
});
$('.close,.button-previous').click(function () {
$('#vmAppDialog').removeClass('in').css('display', 'none');
@@ -83,7 +91,7 @@ $(function () { var jsonobj = JSON.parse(formData);
var newJson = {"managedElement": jsonobj};
formData = JSON.stringify(newJson);
- var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/managed-elements";
+ var requestUrl = url + "/org.openo.sdno.brs/openoapi/sdnobrs/v1/managed-elements";
$
.ajax({
type : "POST",
@@ -106,7 +114,7 @@ $(function () { })
/*******************************************Get Service**********************************************/
-function loadGetServiceData(url){
+function loadGetServiceData(){
return JSON.parse('[{"serviceId":"1111","serviceName":"siteToDC","description":"siteToDC","createTime":"xxxxxx","creator":"XXXX","serviceType":"GSO","templateName":"xxxxxx","inputParameters":{"POP-1-0-0.vFW-moc":"xxx","POP-1-0-0.vCPE-moc":"xxx"}},{"serviceId":"2222","serviceName":"siteToDC","description":"siteToDC","createTime":"xxxxxx","creator":"XXXX","serviceType":"GSO","templateName":"xxxxxx","inputParameters":{"POP-1-0-0.vFW-moc":"xxx1","POP-1-0-0.vCPE-moc":"xxx1"}}]');
// TODO authenticate the url.
@@ -127,7 +135,7 @@ function loadGetServiceData(url){ }
/*********************************************Get Service Details********************************************/
-function loadServiceDetails(url, serviceId){
+function loadServiceDetails(serviceId){
return JSON.parse('[{"id":"12345", "name":"sdno"}, {"id":"23456", "name":"gso"},{"id":"12345", "name":"nfvo"}]');
//return JSON.parse('{"sdno":[{"id":"12345", "name":"SDNO"}], "nfvo":[{"id":"12345", "name":"SDNO"}]}');
//return JSON.parse('"nfvo":[{"id":"12345", "name":"SDNO"}]}');
@@ -149,8 +157,7 @@ function loadServiceDetails(url, serviceId){ }
function anchorClick(serviceId){
- var url = "";
- var jsonData = loadServiceDetails(url, serviceId);
+ var jsonData = loadServiceDetails(serviceId);
//TODO populate the modal according to json response
return true;
}
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 735ccb8e..6a2a8bf1 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 @@ -13,9 +13,15 @@ * limitations under the License.
*/
+var url = {};
+$.getJSON("./conf/dataconfig.json", function (jsonData){
+ url.overlay = jsonData.url +":"+ jsonData.port + "/org.openo.sdno.overlayvpnservice";
+ url.underlay = jsonData.url +":"+ jsonData.port + "/org.openo.sdno.l3vpnservice";
+ console.log("URL = " + JSON.stringify(url));
+});
function loadUnderlayData() {
- var requestUrl = "http://localhost:8080/org.openo.sdno.l3vpnservice/openoapi/sdnol3vpn/v1/l3vpns";
+ var requestUrl = url.underlay + "/openoapi/sdnol3vpn/v1/l3vpns";
$
.ajax({
type: "GET",
@@ -26,12 +32,12 @@ function loadUnderlayData() { //TODO: Update the table
},
error: function (xhr, ajaxOptions, thrownError) {
- alert("Error on getting underlay data : " + xhr.responseText);
+ //alert("Error on getting underlay data : " + xhr.responseText);
}
});
}
function deleteUnderlayData(objectId) {
- var requestUrl = "http://localhost:8080/org.openo.sdno.l3vpnservice/openoapi/sdnol3vpn/v1/l3vpns/" + objectId;
+ var requestUrl = url.underlay + "/openoapi/sdnol3vpn/v1/l3vpns/" + objectId;
$
.ajax({
type: "DELETE",
@@ -47,7 +53,7 @@ function deleteUnderlayData(objectId) { });
}
function loadOverlayData() {
- var requestUrl = "http://localhost:8080/org.openo.sdno.overlayvpnservice/openoapi/sdnooverlayvpn/v1/site2dc-vpn";
+ var requestUrl = url.overlay + "/openoapi/sdnooverlayvpn/v1/site2dc-vpn";
$
.ajax({
type: "GET",
@@ -58,7 +64,7 @@ function loadOverlayData() { //TODO: Update the table
},
error: function (xhr, ajaxOptions, thrownError) {
- alert("Error on getting Overlayvpn data : " + xhr.responseText);
+ //alert("Error on getting Overlayvpn data : " + xhr.responseText);
}
});
}
@@ -85,7 +91,7 @@ $(function () { var formData = JSON.stringify($("#underlayForm").serializeObject());
alert(formData);
var jsonobj = JSON.parse(formData);
- var requestUrl = "http://localhost:8080/org.openo.sdno.l3vpnservice/openoapi/sdnol3vpn/v1/l3vpns";
+ var requestUrl = url.underlay + "/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 1c220f61..f12ec533 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 @@ -13,10 +13,15 @@ * limitations under the License.
*/
+var url = "";
+$.getJSON("./conf/dataconfig.json", function (jsonData){
+ url = jsonData.url +":"+ jsonData.port + "/org.openo.sdno.brs";
+ console.log("URL = " + url);
+});
function deleteSite(objectId) {
alert(objectId);
- var requestUrl = "/openoapi/sdnobrs/v1/sites" + objectId;
+ var requestUrl = url + "/openoapi/sdnobrs/v1/sites" + objectId;
$
.ajax({
type: "DELETE",
@@ -27,12 +32,12 @@ function deleteSite(objectId) { //TODO: Update the table
},
error: function (xhr, ajaxOptions, thrownError) {
- alert("Error on deleting site: " + xhr.responseText);
+ //alert("Error on deleting site: " + xhr.responseText);
}
});
}
function deleteLink(objectId) {
- var requestUrl = "/openoapi/sdnobrs/v1/topological-links" + objectId;
+ var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links" + objectId;
$
.ajax({
type: "DELETE",
@@ -49,7 +54,7 @@ function deleteLink(objectId) { }
function deleteNe(objectId) {
- var requestUrl = "/sdnobrs/v1/managed-elements" + objectId;
+ var requestUrl = url + "/sdnobrs/v1/managed-elements" + objectId;
$
.ajax({
type: "DELETE",
@@ -66,7 +71,7 @@ function deleteNe(objectId) { }
function deletePort(objectId) {
- var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points" + objectId;
+ var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points" + objectId;
$
.ajax({
type: "DELETE",
@@ -82,7 +87,7 @@ function deletePort(objectId) { });
}
function loadSiteData() {
- var requestUrl = "/openoapi/sdnobrs/v1/sites";
+ var requestUrl = url + "/openoapi/sdnobrs/v1/sites";
$
.ajax({
type: "GET",
@@ -98,7 +103,7 @@ function loadSiteData() { });
}
function loadLinkData() {
- var requestUrl = "/openoapi/sdnobrs/v1/topological-links";
+ var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links";
$
.ajax({
type: "GET",
@@ -114,7 +119,7 @@ function loadLinkData() { });
}
function loadNeData() {
- var requestUrl = "/sdnobrs/v1/managed-elements";
+ var requestUrl = url + "/sdnobrs/v1/managed-elements";
$
.ajax({
type: "GET",
@@ -130,7 +135,7 @@ function loadNeData() { });
}
function loadPortData() {
- var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points";
+ var requestUrl = url + "/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 896481a5..a9143ef0 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/overlayvpn.html @@ -43,169 +43,239 @@ });
$('.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>
+ });
+
+ $('#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>
<style>
- .fixed-table-container tbody td .th-inner,
- .fixed-table-container thead th .th-inner {
- line-height: 4px;
+ .dropdown-menu {
+ min-width: 10px;
}
-
- .fixed-table-pagination .pagination-info {
- display: none !important;
+ .btn {
+ padding: 4px;
}
+ .fixed-table-container tbody td .th-inner,
+ .fixed-table-container thead th .th-inner {
+ line-height: 4px;
+ }
+ .fixed-table-pagination .pagination-info {
+ display: none !important;
+ }
+ .table tbody tr:hover td,
+ .table tbody tr.odd:hover td {
+ background-color: #e6fbe0 !important;
+ }
+ table tr.openoTable_row_selected td {
+ background: #e8f8fe!important;
+ border-bottom: 1px solid #e8e8e8!important;
+ }
+ .container-fluid {
+ padding-left: 30px;
+ padding-right: 0px;
+ }
- .table tbody tr:hover td,
- .table tbody tr.odd:hover td {
- background-color: #e6fbe0 !important;
+ .clearfix {
+ display: none;
}
- table tr.openoTable_row_selected td {
- background: #e8f8fe !important;
- border-bottom: 1px solid #e8e8e8 !important;
- }
+ .page-list{
+ float:none !important;
+ display:inline-block !important;
+ margin-right: 10px;
+ vertical-align: middle;
+ margin-bottom: 25px;
- .container-fluid {
- padding-left: 30px;
- padding-right: 0px;
}
+ .pull-left{
+ float:none !important;
+ display:inline-block !important;
+ }
+
+ .pull-right{
+ float:none !important;
+ display:inline-block !important;
+ }
+
+ .fixed-table-pagination{
+ float:right;
+ }
</style>
</head>
<body id="open_base_vpn_cotentBody" class="ng-scope">
<div class="container-fluid ms-controller">
- <h3> Overlay VPN </h3>
- <div class="row-fluid" data-name="table_zone">
- <div id='ict_virtualApplication_table_div'>
- <div>
- <div class="top">
- <table id="sai" class="table table-striped" data-pagination="true" data-page-size="5"
- data-pagination-first-text="First" data-pagination-pre-text="Previous"
- data-pagination-next-text="Next" data-pagination-last-text="Last">
- <thead id="soverlayTable_thead" class="openo-table-thead" style="background:#ECECEC">
- <tr class="active">
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayName" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayName_sorticon"
- class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element">Name
+ <h3> Overlay VPN </h3>
+ <!-- <div class="row-fluid" data-name="table_zone">
+ <div id='ict_virtualApplication_table_div'>
+ <div>
+ <div class="top">
+ <table id="sai" class="table table-striped" data-pagination="true" data-page-size="5" data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">
+ <thead id="soverlayTable_thead" class="openo-table-thead" style="background:#ECECEC">
+ <tr class="active">
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayName" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="overlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element">Name
</span>
- </div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayDesc" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayDesc_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element "> Description
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayDesc" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="overlayDesc_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element "> Description
</span>
- </div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayThincCPE" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayThincCPE_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Thin CPE
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayThincCPE" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="overlayThincCPE_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Thin CPE
</span>
- </div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayPortVlanID" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayPortVlanID_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Port:Vlan ID
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayPortVlanID" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="overlayPortVlanID_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Port:Vlan ID
</span>
- </div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayDCName" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayDCName_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">DC Name
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayDCName" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="overlayDCName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">DC Name
</span>
- </div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayVPC" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayVPC_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VPC
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayVPC" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="overlayVPC_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VPC
</span>
- </div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayVPCCIDR" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="overlayVPCCIDR_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VPC CIDR
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayVPCCIDR" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="overlayVPCCIDR_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VPC CIDR
</span>
- </div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="overlayOperation" align="center" data-formatter="operateFormatter"
- data-events="operateEvents">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="portAction_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action</span>
- </div>
- </th>
- </tr>
- </thead>
- <!-- <tbody>
- <tr style="display: none;">
- <td colspan="7" style="text-align: center;">NULL</td>
- </tr>
- <tr class="odd openo-table-tr openo-table-disable-element" data-rowid="0" data-tableid="overlayTable">
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayName" data-tableid="overlayTable">
- <div class="openo-table-disable-element overflow_elip leftDataAlign">
- <a class="openo-table-disable-element hyperLinkRow" href="javascript:void(0)" id="overlayTable_0_overlayName_link">overlay1</a></div></td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayDesc" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayDesc_custom_el">overlay 101</div>
- </td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayThincCPE" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayThincCPE_custom_el">chaxuanyue</div>
- </td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayPortVlanID" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayPortVlanID_custom_el">Bangalore</div>
- </td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayDCName" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayDCName_custom_el">Bangalore</div>
- </td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayVPC" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayVPC_custom_el">Bangalore</div>
- </td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayVPCCIDR" data-tableid="overlayTable"><div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="overlayTable_0_overlayVPCCIDR_custom_el">Bangalore</div>
- </td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayOperation" data-tableid="overlayTable">
- <div class="openo-table-disable-element overflow_elip leftDataAlign openo-table-custom-el" id="overlayTable_0_overlayOperation_custom_el">
- <div>
- <img src="images/delete.png" href="javascript:void(0)" onclick="deleteoverlay('this')" opertype="overlayDelete" style="cursor: pointer" title="Delete" id="bac4ff3c-d693-4f54-86cd-25af1ea22f59" rowid="0/">
</div>
- </div>
- </td>
- </tr>
- </tbody> -->
- </table>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayOperation" align="center" data-formatter="operateFormatter" data-events="operateEvents">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="portAction_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action</span>
+ </div>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+
+ <tr>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>
+ <button class="table-btn delete-btn"></button>
+ </td>
+ </tr>
+ <tr>
+ <td>data </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>
+ <button class="table-btn delete-btn"></button>
+ </td>
+ </tr>
+ <tr>
+ <td>now </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>
+ <button class="table-btn delete-btn"></button>
+ </td>
+ </tr>
+ <tr>
+ <td>then </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>Sample </td>
+ <td>
+ <button class="table-btn delete-btn"></button>
+ </td>
+ </tr>
+ </tbody>
+
+ </table>
+ </div>
+ </div>
+ </div>
+ </div> -->
+
+ <div class="row-fluid" data-name="table_zone">
+ <div id='ict_virtualApplication_table_div'>
+ <div>
+ <div class="top">
+ <table class="table-striped table " id="sai" data-pagination="true"
+ data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">
+ <thead style="background:#ECECEC">
+ <tr>
+ <th data-field="name" data-sortable="true">Name</th>
+ <th data-field="desc" data-sortable="true">Description</th>
+ <th data-field="thinCpe" data-sortable="true">Thin CPE</th>
+ <th data-field="port" data-sortable="true">Port:Vlan ID</th>
+ <th data-field="dcName" data-sortable="true">DC Name</th>
+ <th data-field="vpc" data-sortable="true">VPC</th>
+ <th data-field="vpcCidr" data-sortable="true">VPC CIDR</th>
+ <th data-field="action" data-sortable="">Action</th>
+ </tr>
+ </thead>
+
+ </table>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
</body>
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 4db9f27f..647269d4 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/underlayvpn.html @@ -32,36 +32,64 @@ <script type="text/javascript" src="js/underlay.js"></script>
<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
<style>
- .fixed-table-container tbody td .th-inner,
- .fixed-table-container thead th .th-inner {
- line-height: 4px;
+ .dropdown-menu {
+ min-width: 10px;
}
-
- .fixed-table-pagination .pagination-info {
- display: none !important;
+ .btn {
+ padding: 4px;
}
- .table tbody tr:hover td,
- .table tbody tr.odd:hover td {
- background-color: #e6fbe0 !important;
- }
+ .fixed-table-container tbody td .th-inner,
+ .fixed-table-container thead th .th-inner {
+ line-height: 4px;
+ }
+ .fixed-table-pagination .pagination-info {
+ display: none !important;
+ }
+ .table tbody tr:hover td,
+ .table tbody tr.odd:hover td {
+ background-color: #e6fbe0 !important;
+ }
+ .delete-btn {
+ background: url(delete.png) no-repeat !important;
+ width: 16px;
+ height: 16px;
+ border: none;
+ }
+ table tr.openoTable_row_selected td {
+ background: #e8f8fe!important;
+ border-bottom: 1px solid #e8e8e8!important;
+ }
+ .container-fluid {
+ padding-left: 10px;
+ padding-right: 0px;
+ }
- .delete-btn {
- background: url(delete.png) no-repeat !important;
- width: 16px;
- height: 16px;
- border: none;
+ .clearfix {
+ display: none;
}
+ .page-list{
+ float:none !important;
+ display:inline-block !important;
+ margin-right: 10px;
+ vertical-align: middle;
+ margin-bottom: 25px;
- table tr.openoTable_row_selected td {
- background: #e8f8fe !important;
- border-bottom: 1px solid #e8e8e8 !important;
}
+ .pull-left{
+ float:none !important;
+ display:inline-block !important;
+ }
- .container-fluid {
- padding-left: 10px;
- padding-right: 0px;
- }
+ .pull-right{
+ float:none !important;
+ display:inline-block !important;
+ }
+
+ .fixed-table-pagination{
+ height:20px;
+ float:right;
+ }
</style>
<script type="text/javascript">
$(document).ready(function () {
@@ -78,202 +106,162 @@ });
$('.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);
- }
- };
+ $('#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 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
+ 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>
- $('#underlayTpDataTable').bootstrapTable(
- //Assigning data to table
- "append", JSON.parse(obj.name)
- );
- }
- </script>
- </head>
-<body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">
-<div class="container-fluid ms-controller">
- <h3>Underlay VPN</h3>
- <div class="row-fluid" data-name="table_zone">
- <div id='ict_virtualApplication_table_div'>
- <div>
- <div class="top">
- <table class="table table-striped" id="tbl_overlay" data-pagination="true" data-page-size="5"
- data-pagination-first-text="First" data-pagination-pre-text="Previous"
- data-pagination-next-text="Next" data-pagination-last-text="Last">
- <thead id="sunderlayTable_thead" class="openo-table-thead" style="background:#ECECEC">
- <tr class="active">
+</head>
+<body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">
+ <div class="container-fluid ms-controller">
+ <h3>Underlay VPN</h3>
+ <!-- <div class="row-fluid" data-name="table_zone">
+ <div id='ict_virtualApplication_table_div'>
+ <div>
+ <div class="top">
+ <table class="table table-striped" id="tbl_overlay" data-pagination="true" data-page-size="5" data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">
+ <thead id="sunderlayTable_thead" class="openo-table-thead" style="background:#ECECEC">
+ <tr class="active">
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-formatter="nameFormatter" data-field="underlayName" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayName_sorticon"
- class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element ">Name
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-formatter="nameFormatter" data-field="underlayName" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="underlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element ">Name
</span>
- </div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayTenantName" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayTenantName_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">State
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="underlayTenantName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">State
</span>
- </div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayType" data-sortable="true">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayType_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Description
- </span></div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayDescription" align="center" data-formatter="operateFormatter"
- data-events="operateEvents">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayDescription_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Description
+ </span>
+ </div>
+ </th>
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayDescription" align="center" data-formatter="operateFormatter" data-events="operateEvents">
+ <div class="openo-table-th-border"></div>
+ <div class="DataTables_sort_wrapper openo-ellipsis ">
+ <span id="underlayDescription_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action
</span>
- </div>
- </th>
- <!-- <th style="display: none;" class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayObjId_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">ID
- </span>
- </div>
- </th>
- <th style="display: none;" class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayObjData_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Data
- </span>
- </div>
- </th> -->
- </tr>
- </thead>
- <!-- <tbody>
- <tr style="display: none;">
- <td colspan="7" style="text-align: center;">NULL</td>
- </tr>
- <tr class="odd openo-table-tr openo-table-disable-element" data-rowid="0" data-tableid="underlayTable">
-
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayName" data-tableid="underlayTable">
- <div class="openo-table-disable-element overflow_elip leftDataAlign">
- <a class="underlayNameLink" href="javascript:void(0)" id="underlayTable_0_underlayName_link">underlay1</a>
- </div>
- </td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">
- <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">underlay 101</div>
- </td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayTenantName" data-tableid="underlayTable">
- <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayTenantName_custom_el">chaxuanyue</div>
- </td>
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayOperation" data-tableid="underlayTable">
- <div class="openo-table-disable-element overflow_elip leftDataAlign openo-table-custom-el" id="underlayTable_0_underlayOperation_custom_el">
- <div>
- <img src="images/delete.png" href="javascript:void(0)" onclick="deleteUnderlayData('this')" opertype="underlayDelete" style="cursor: pointer" title="Delete" id="bac4ff3c-d693-4f54-86cd-25af1ea22f59" rowid="0/">
</div>
- </div>
- </td>
- <td style="display: none;" class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">
- <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">ID12345</div>
- </td>
- <td style="display: none;" class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">
- <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">[{"tpName":"tp345","peName":"pe123","vlanId":"12344","siteCidr":"tettd","ip":"1.1.1.1"},{"tpName":"tp345","peName":"8xzxze123","vlanId":"234","siteCidr":"tettd","ip":"10.10.1.10"}]</div>
- </td>
- </tr>
- </tbody> -->
- </table>
+ </th>
+
+ </tr>
+ </thead>
+ <tbody>
+
+ <tr>
+ <td>a_data </td>
+ <td>data </td>
+ <td>Sample1 </td>
+ <td>
+ <button class="table-btn delete-btn"></button>
+ </td>
+ </tr>
+
+ <tr>
+ <td>b_data </td>
+ <td>new sample </td>
+ <td>modified </td>
+ <td>
+ <button class="table-btn delete-btn"></button>
+ </td>
+ </tr>
+
+ <tr>
+ <td>data </td>
+ <td>updated </td>
+ <td>Sample </td>
+ <td>
+ <button class="table-btn delete-btn"></button>
+ </td>
+ </tr>
+
+ <tr>
+ <td>alarm </td>
+ <td>deleted </td>
+ <td>Sample </td>
+ <td>
+ <button class="table-btn delete-btn"></button>
+ </td>
+ </tr>
+ </tbody>
+
+ </table>
+ </div>
</div>
</div>
</div>
- </div>
- <hr>
- <h3>TP Details</h3>
- <div class="row-fluid" data-name="table_zone">
- <div id='ict_virtualApplication_table_div'>
- <div>
- <div class="top">
- <table id="underlayTpDataTable" data-pagination="true" data-page-size="5"
- data-pagination-first-text="First" data-pagination-pre-text="Previous"
- data-pagination-next-text="Next" data-pagination-last-text="Last">
- <thead id="underlayTable_thead" class="openo-table-thead">
- <tr class="active">
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayName">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayName_sorticon"
- class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element ">TP Name
- </span>
- </div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayType">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayType_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">PE Name
- </span></div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayTenantName">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayTenantName_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VLAN ID
- </span></div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayTenantunderlayName">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayTenantunderlayName_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Site CIDR
- </span></div>
- </th>
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"
- data-field="underlayTenantunderlayIP">
- <div class="openo-table-th-border"></div>
- <div class="DataTables_sort_wrapper openo-ellipsis ">
- <span id="underlayTenantunderlayName_sorticon"
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">IP
- </span></div>
- </th>
- </tr>
- </thead>
- <!-- <tbody>
- </tbody> -->
- </table>
+ -->
+
+ <div class="row-fluid" data-name="table_zone">
+ <div id='ict_virtualApplication_table_div'>
+ <div>
+ <div class="top">
+ <table class="table-striped table " id="sai" data-pagination="true"
+ data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">
+ <thead style="background:#ECECEC">
+ <tr>
+ <th data-field="name" data-sortable="true">Name</th>
+ <th data-field="state" data-sortable="true">State</th>
+ <th data-field="desc" data-sortable="true">Description</th>
+ <th data-field="action" data-sortable="">Action</th>
+ </tr>
+ </thead>
+
+ </table>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
+
+<div id="tpDiv">
+ <iframe src="UnderLay_TP.html" style="width:100%;height:210px;" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0">
+ </iframe>
</div>
<div id="filterTpLogicalType_select_popupcontainer" class="openo openo-select-popup-container openo-hide"
style="width: 155px; max-height: 130px; left: 628px; top: 104px; z-index: 1761;">
|