--- /dev/null
+{\r
+ "url": "http://localhost",\r
+ "port": "8080"\r
+}
\ No newline at end of file
* limitations under the License.\r
*/\r
\r
+var url = "";\r
+$.getJSON("./conf/dataconfig.json", function (jsonData){\r
+ url = jsonData.url +":"+ jsonData.port;\r
+ console.log("URL = " + url);\r
+});\r
+\r
$('.siteDeleteImg').click(\r
function () {\r
var data = $(this).parent().parent().parent().find('td:last').find(\r
});\r
\r
function deleteController(objectId) {\r
- var requestUrl = "/openoapi/extsys/v1/sdncontrollers/" + objectId;\r
+ var requestUrl = url + "/openoapi/extsys/v1/sdncontrollers/" + objectId;\r
$.ajax({\r
type: "DELETE",\r
url: requestUrl,\r
}\r
\r
function loadControllerData() {\r
- var requestUrl = "/openoapi/extsys/v1/sdncontrollers";\r
+ var requestUrl = url + "/openoapi/extsys/v1/sdncontrollers";\r
$.ajax({\r
type: "GET",\r
url: requestUrl,\r
"topologicalController": jsonobj\r
};\r
formData = JSON.stringify(newJson);\r
- var requestUrl = "/openoapi/extsys/v1/sdncontrollers";\r
+ var requestUrl = url + "/openoapi/extsys/v1/sdncontrollers";\r
$.ajax({\r
type: "POST",\r
url: requestUrl,\r
<script type="text/javascript" src="js/bootstrap.min.js"></script>\r
<script type="text/javascript" src="js/rest.js"></script>\r
<script type="text/javascript" src="js/bootstrap-table.min.js"></script>\r
- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">\r
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>\r
- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>\r
- <script>\r
+ <script>\r
$(document).ready(function () {\r
$('[data-toggle="tooltip"]').tooltip();\r
+\r
var params = new URLSearchParams(window.location.search.slice(1));\r
\r
var jsonData = JSON.parse((params.get("json")));\r
if (jsonData != null) {\r
$("body").empty();\r
- for (var key in jsonData.inputParameters) {\r
- console.log("This is checker " + key);\r
- //$("body").empty();\r
- //document.getElementById("").innerHTML = "<div>Paragraph changed!</div>";\r
-\r
- //$("#mybody").html("hi");\r
- $("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>');\r
+ for(var key in jsonData.inputParameters){\r
+ $("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>');\r
}\r
}\r
\r
- //$("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>');\r
});\r
</script>\r
\r
\r
<body>\r
\r
-\r
-<!-- <div class="mT15 form-group" style="margin-top:35px;margin-left:25%">\r
- <label class="control-label">\r
- <span style="font-size:16px;">vCpe Name :</span>\r
- </label>\r
-\r
- <input type="text" name="" maxlength="256" style="margin-left:10px;width:300px;" value="Sample Data" readonly disabled/>\r
-</div>\r
-\r
-<div class="mT15 form-group" style="margin-left:25%">\r
- <label class="control-label">\r
- <span style="font-size:16px;">IP Address :</span>\r
- </label>\r
- <input type="text" name="" maxlength="256" style="margin-left:10px;width:300px;" value="Sample Data" readonly disabled/>\r
-</div> -->\r
-\r
-\r
</body>\r
\r
</html>
\ No newline at end of file
var serviceId = getQueryStringValue("serviceId");\r
console.log("serviceId : " + serviceId);\r
\r
- var jsonData = loadServiceDetails("", serviceId);\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
$("#dashboard").hide();\r
}\r
\r
+ function fnLoadTblData(el, panelType) {\r
+ console.log("panelType of "+el.id+" is "+panelType);\r
+ var current = document.querySelector('.selected');\r
+ if (current) {\r
+ current.classList.remove('selected');\r
+ }\r
+ el.classList.add('selected');\r
+ switch (panelType) {\r
+ case "sdno":\r
+ if(el.id == "overLink") {\r
+ $("#dashboard").show();\r
+ $("#overDiv").show();\r
+ $("#underDiv").hide();\r
+ } else if(el.id == "underLink"){\r
+ $("#dashboard").show();\r
+ $("#overDiv").hide();\r
+ $("#underDiv").show();\r
+ } else {\r
+ $("#dashboard").hide();\r
+ $("#overDiv").hide();\r
+ $("#underDiv").hide();\r
+ }\r
+ break;\r
+ case "gso":\r
+ $("#dashboard").hide();\r
+ $("#overDiv").hide();\r
+ $("#underDiv").hide();\r
+ break;\r
+ case "nfvo":\r
+ $("#dashboard").hide();\r
+ $("#overDiv").hide();\r
+ $("#underDiv").hide();\r
+ break;\r
+ }\r
+\r
+ }\r
+\r
function getQueryStringValue(key) {\r
var params = new URLSearchParams(window.location.search.slice(1));\r
return params.get(key);\r
var content = '';\r
content += '<div class="panel panel-default"><div class="panel-heading">';\r
content += '<h4 class="panel-title">';\r
- content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">';\r
- content += '<span id="sdnoLink">' + text + '</span></a>';\r
+ content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne_'+type+'" onClick="fnLoadTblData(this, \''+type+'\');">';\r
+ content += '<span id="sdnoLink">'+text+'</span></a>';\r
content += '</h4></div>';\r
- content += '<div id="collapseOne" class="panel-collapse collapse in">';\r
+ if(type == "sdno") {\r
+ content += '<div id="collapseOne_' + type + '" class="panel-collapse collapse in">';\r
+ } else {\r
+ content += '<div id="collapseOne_' + type + '" class="panel-collapse collapse">';\r
+ }\r
content += '<ul class="list-group">';\r
\r
- if (type == "sdno") {\r
- content += '<li onClick="fnOver();" id="overLink" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>Overlay VPN</span>';\r
+ if(type == "sdno") {\r
+ 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>';\r
content += '</li>';\r
- content += '<li id="underLink" onClick="fnUnder();" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>Underlay VPN</span>';\r
+ content += '<li id="underLink" onClick="fnLoadTblData(this, \''+type+'\');" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>Underlay VPN</span>';\r
content += '</li>';\r
}\r
- else if (type == "gso") {\r
- content += '<li onClick="clZte();" id="underLink" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>OPEN-O</span></li>';\r
+ else if(type == "gso"){\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="clZte();" id="underLink" class="list-group-item"><span class="glyphicon glyphicon-pencil text-primary"></span><span>ZTE</span></li>';\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
}\r
content += '</ul></div></div>';\r
return content;\r
.panel-collapse .list-group-item li.list-group-item {\r
border-top: 1px solid #DDD !important;\r
}\r
+\r
+ .selected {\r
+ /*background-color: #ddd;*/\r
+ color: #4ac9ff;\r
+ }\r
+ .panel-title>a {\r
+ display: inline-block;\r
+ width: 100%;\r
+ }\r
</style>\r
</head>\r
</body>\r
<div class="">\r
<div class="row">\r
- <div class="col-sm-3" style="width:18%">\r
+ <div class="col-sm-3" style="width:18%; padding-right: 0;">\r
<div class="panel-group" id="accordion">\r
<!--<div class="panel panel-default">\r
<div class="panel-heading">\r
\r
</div>\r
</div>\r
- <div class="col-sm-3" id="dashboard" style="width:82%">\r
+ <div class="col-sm-3" id="dashboard" style="width:82%; padding: 0;">\r
<div 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;">\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:210px;" name="targetframe"\r
+ <iframe src="overlayvpn.html" style="width:100%;height:450px;" name="targetframe"\r
allowTransparency="true" scrolling="no" frameborder="0">\r
</iframe>\r
</div>\r
<div id="underDiv">\r
- <iframe src="underlayvpn.html" style="width:100%;height:450px;" name="targetframe"\r
+ <iframe src="underlayvpn.html" style="width:100%;height:500px;" name="targetframe"\r
allowTransparency="true" scrolling="no" frameborder="0">\r
</iframe>\r
</div>\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 type="text/javascript" src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"> </script>\r
- <link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />\r
+ <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"> </script>\r
+ <link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />\r
\r
- <script src="https://code.highcharts.com/highcharts.js"></script>\r
- <script src="https://code.highcharts.com/modules/exporting.js"></script>\r
+ <script type="text/javascript" src="js/highcharts.js"></script>\r
+ <script type="text/javascript" src="js/exporting.js"></script>\r
<style>\r
body {\r
overflow: hidden;\r
var serviceId = getQueryStringValue("serviceId");\r
console.log("TOPO - serviceId : "+ serviceId);\r
\r
- var jsonData = loadServiceDetails("", serviceId);\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
}\r
\r
});\r
- function fnOver() {\r
- console.log("Clicked");\r
- }\r
- function addAccordionData(type, text){\r
+ function addAccordionData(paneltype, text){\r
var content = '';\r
- content += '<div class="panel panel-default"><div class="panel-heading" onClick="fnOver();">';\r
+ content += '<div id="panel_'+paneltype+'" class="panel panel-default" onclick="acordClick(\''+paneltype+'\');"><div class="panel-heading">';\r
content += '<h4 class="panel-title">';\r
content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">';\r
content += '<span id="sdnoLink">'+text+'</span></a>';\r
return params.get(key);\r
}\r
});\r
+ function acordClick(panelType) {\r
+ //TODO: Act according to the panelType. value may be sdno, gso or nfvo\r
+ console.log(panelType + " Clicked");\r
+ }\r
</script>\r
+\r
+ <style>\r
+hr{\r
+ margin:1px;\r
+}\r
+</style>\r
</head>\r
\r
\r
<body>\r
<div class="">\r
- <div class="row" oncli>\r
+ <div class="row">\r
<div class="col-sm-3" style="width:18%">\r
<div class="panel-group" id="accordion">\r
</div>\r
</div>\r
<div class="col-sm-3" id="dashboard" style="width:82%">\r
- <div id="container" style="width: 600px; height: 250px; margin: 0 auto; display: inline-block;"> </div>\r
+ <div id="container" style="width: 750px; height: 250px; margin: 0 auto; display: inline-block;"> </div>\r
</div>\r
</div>\r
</div>\r
<link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />\r
<script type="text/javascript">\r
$(document).ready(function () {\r
- var url = "";\r
/* $('.modal-content').resizable({\r
\r
minHeight: 300,\r
});*/\r
$('.modal-dialog').draggable();\r
$("#detailCont").show();\r
- var jsondata = loadGetServiceData(url);\r
+ var jsondata = loadGetServiceData();\r
$('#sai').bootstrapTable({\r
//Assigning data to table\r
data: jsondata\r
* limitations under the License.\r
*/\r
\r
+var url = "";\r
+$.getJSON("./conf/dataconfig.json", function (jsonData){\r
+ url = jsonData.url +":"+ jsonData.port + "/org.openo.sdno.brs";\r
+ console.log("URL = " + url);\r
+});\r
\r
$('.siteDeleteImg').click(function () {\r
var data = $(this).parent().parent().parent().find('td:last').find('div:last').html();\r
\r
\r
function deleteSite(objectId) {\r
- var requestUrl = "/openoapi/sdnobrs/v1/sites/" + objectId;\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/sites/" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
});\r
}\r
function deleteLink(objectId) {\r
- var requestUrl = "/openoapi/sdnobrs/v1/topological-links/" + objectId;\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links/" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
}\r
\r
function deleteNe(objectId) {\r
- var requestUrl = "/openoapi/sdnobrs/v1/managed-elements/" + objectId;\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/managed-elements/" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
}\r
\r
function deletePort(objectId) {\r
- var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points/" + objectId;\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points/" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
});\r
}\r
function loadSiteData() {\r
- var requestUrl = "/openoapi/sdnobrs/v1/sites";\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/sites";\r
$\r
.ajax({\r
type: "GET",\r
});\r
}\r
function loadLinkData() {\r
- var requestUrl = "/openoapi/sdnobrs/v1/topological-links";\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links";\r
$\r
.ajax({\r
type: "GET",\r
});\r
}\r
function loadNeData() {\r
- var requestUrl = "/openoapi/sdnobrs/v1/managed-elements";\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/managed-elements";\r
$\r
.ajax({\r
type: "GET",\r
});\r
}\r
function loadPortData() {\r
- var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points";\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points";\r
$\r
.ajax({\r
type: "GET",\r
}\r
$(function () {\r
$('.creat-btn').click(function () {\r
- $('#vmAppDialog').addClass('in').css({'display': 'block'});\r
-\r
+ /*$('#vmAppDialog').addClass('in').css({'display': 'block'});*/\r
+ $('#vmAppDialog').modal();\r
});\r
$('.close,.button-previous').click(function () {\r
$('#vmAppDialog').removeClass('in').css('display', 'none');\r
$('#flavorTab').css('display', 'none');\r
});\r
\r
- $('.table tbody tr').click(function () {\r
+ /*$('.table tbody tr').click(function(){\r
$(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
- });\r
+ });*/\r
$('.table tr:odd').addClass('active');\r
$('#false').click(function () {\r
- $('#vmAppDialog').addClass('in').css({'display': 'block'});\r
+ /*$('#vmAppDialog').addClass('in').css({'display': 'block'});*/\r
+ $('#vmAppDialog').modal();\r
});\r
$('.close,.button-previous').click(function () {\r
$('#vmAppDialog').removeClass('in').css('display', 'none');\r
var jsonobj = JSON.parse(formData);\r
var newJson = {"site": jsonobj};\r
formData = JSON.stringify(newJson);\r
- var requestUrl = "/openoapi/sdnobrs/v1/sites";\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/sites";\r
$\r
.ajax({\r
type: "POST",\r
var jsonobj = JSON.parse(formData);\r
var newJson = {"managedElement": jsonobj};\r
formData = JSON.stringify(newJson);\r
- var requestUrl = "/openoapi/sdnobrs/v1/managed-elements";\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/managed-elements";\r
$\r
.ajax({\r
type: "POST",\r
var jsonobj = JSON.parse(formData);\r
var newJson = {"logicalTerminationPoint": jsonobj};\r
formData = JSON.stringify(newJson);\r
- var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points";\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points";\r
$\r
.ajax({\r
type: "POST",\r
var jsonobj = JSON.parse(formData);\r
var newJson = {"topologicalLink": jsonobj};\r
formData = JSON.stringify(newJson);\r
- var requestUrl = "/openoapi/sdnobrs/v1/topological-links";\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links";\r
$\r
.ajax({\r
type: "POST",\r
* limitations under the License.\r
*/\r
\r
-\r
+var url = "";\r
$(function () {\r
+\r
+ $.getJSON("./conf/dataconfig.json", function (jsonData){\r
+ url = jsonData.url +":"+ jsonData.port;\r
+ console.log("URL = " + url);\r
+ });\r
+\r
$('.creat-btn').click(function () {\r
- $('#vmAppDialog').addClass('in').css({'display': 'block'});\r
+ /*$('#vmAppDialog').addClass('in').css({'display': 'block'});*/\r
+ $('#vmAppDialog').modal();\r
\r
});\r
$('.close,.button-previous').click(function () {\r
});\r
$('.para').click(function () {\r
if ($('#serviceTemplateName').val() == '') {\r
- alert('Please choose the service templet！');\r
+ alert('Please choose the service template！');\r
$('#flavorTab').css('display', 'none');\r
} else {\r
$('#flavorTab').css('display', 'block');\r
$('.basic').click(function () {\r
$('#flavorTab').css('display', 'none');\r
});\r
-\r
- $('.table tbody tr').click(function () {\r
+/*\r
+ $('.table tbody tr').click(function(){\r
$(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\r
- });\r
+ });*/\r
$('.table tr:odd').addClass('active');\r
$('#false').click(function () {\r
- $('#vmAppDialog').addClass('in').css({'display': 'block'});\r
+ /*$('#vmAppDialog').addClass('in').css({'display': 'block'});*/\r
+ $('#vmAppDialog').modal();\r
});\r
$('.close,.button-previous').click(function () {\r
$('#vmAppDialog').removeClass('in').css('display', 'none');\r
var jsonobj = JSON.parse(formData);\r
var newJson = {"managedElement": jsonobj};\r
formData = JSON.stringify(newJson);\r
- var requestUrl = "http://localhost:8080/org.openo.sdno.brs/openoapi/sdnobrs/v1/managed-elements";\r
+ var requestUrl = url + "/org.openo.sdno.brs/openoapi/sdnobrs/v1/managed-elements";\r
$\r
.ajax({\r
type : "POST",\r
})\r
\r
/*******************************************Get Service**********************************************/\r
-function loadGetServiceData(url){\r
+function loadGetServiceData(){\r
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"}}]');\r
\r
// TODO authenticate the url.\r
}\r
\r
/*********************************************Get Service Details********************************************/\r
-function loadServiceDetails(url, serviceId){\r
+function loadServiceDetails(serviceId){\r
return JSON.parse('[{"id":"12345", "name":"sdno"}, {"id":"23456", "name":"gso"},{"id":"12345", "name":"nfvo"}]');\r
//return JSON.parse('{"sdno":[{"id":"12345", "name":"SDNO"}], "nfvo":[{"id":"12345", "name":"SDNO"}]}');\r
//return JSON.parse('"nfvo":[{"id":"12345", "name":"SDNO"}]}');\r
}\r
\r
function anchorClick(serviceId){\r
- var url = "";\r
- var jsonData = loadServiceDetails(url, serviceId);\r
+ var jsonData = loadServiceDetails(serviceId);\r
//TODO populate the modal according to json response\r
return true;\r
}\r
* limitations under the License.\r
*/\r
\r
+var url = {};\r
+$.getJSON("./conf/dataconfig.json", function (jsonData){\r
+ url.overlay = jsonData.url +":"+ jsonData.port + "/org.openo.sdno.overlayvpnservice";\r
+ url.underlay = jsonData.url +":"+ jsonData.port + "/org.openo.sdno.l3vpnservice";\r
+ console.log("URL = " + JSON.stringify(url));\r
+});\r
\r
function loadUnderlayData() {\r
- var requestUrl = "http://localhost:8080/org.openo.sdno.l3vpnservice/openoapi/sdnol3vpn/v1/l3vpns";\r
+ var requestUrl = url.underlay + "/openoapi/sdnol3vpn/v1/l3vpns";\r
$\r
.ajax({\r
type: "GET",\r
//TODO: Update the table\r
},\r
error: function (xhr, ajaxOptions, thrownError) {\r
- alert("Error on getting underlay data : " + xhr.responseText);\r
+ //alert("Error on getting underlay data : " + xhr.responseText);\r
}\r
});\r
}\r
function deleteUnderlayData(objectId) {\r
- var requestUrl = "http://localhost:8080/org.openo.sdno.l3vpnservice/openoapi/sdnol3vpn/v1/l3vpns/" + objectId;\r
+ var requestUrl = url.underlay + "/openoapi/sdnol3vpn/v1/l3vpns/" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
});\r
}\r
function loadOverlayData() {\r
- var requestUrl = "http://localhost:8080/org.openo.sdno.overlayvpnservice/openoapi/sdnooverlayvpn/v1/site2dc-vpn";\r
+ var requestUrl = url.overlay + "/openoapi/sdnooverlayvpn/v1/site2dc-vpn";\r
$\r
.ajax({\r
type: "GET",\r
//TODO: Update the table\r
},\r
error: function (xhr, ajaxOptions, thrownError) {\r
- alert("Error on getting Overlayvpn data : " + xhr.responseText);\r
+ //alert("Error on getting Overlayvpn data : " + xhr.responseText);\r
}\r
});\r
}\r
var formData = JSON.stringify($("#underlayForm").serializeObject());\r
alert(formData);\r
var jsonobj = JSON.parse(formData);\r
- var requestUrl = "http://localhost:8080/org.openo.sdno.l3vpnservice/openoapi/sdnol3vpn/v1/l3vpns";\r
+ var requestUrl = url.underlay + "/openoapi/sdnol3vpn/v1/l3vpns";\r
$\r
.ajax({\r
type: "POST",\r
* limitations under the License.\r
*/\r
\r
+var url = "";\r
+$.getJSON("./conf/dataconfig.json", function (jsonData){\r
+ url = jsonData.url +":"+ jsonData.port + "/org.openo.sdno.brs";\r
+ console.log("URL = " + url);\r
+});\r
\r
function deleteSite(objectId) {\r
alert(objectId);\r
- var requestUrl = "/openoapi/sdnobrs/v1/sites" + objectId;\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/sites" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
//TODO: Update the table\r
},\r
error: function (xhr, ajaxOptions, thrownError) {\r
- alert("Error on deleting site: " + xhr.responseText);\r
+ //alert("Error on deleting site: " + xhr.responseText);\r
}\r
});\r
}\r
function deleteLink(objectId) {\r
- var requestUrl = "/openoapi/sdnobrs/v1/topological-links" + objectId;\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
}\r
\r
function deleteNe(objectId) {\r
- var requestUrl = "/sdnobrs/v1/managed-elements" + objectId;\r
+ var requestUrl = url + "/sdnobrs/v1/managed-elements" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
}\r
\r
function deletePort(objectId) {\r
- var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points" + objectId;\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points" + objectId;\r
$\r
.ajax({\r
type: "DELETE",\r
});\r
}\r
function loadSiteData() {\r
- var requestUrl = "/openoapi/sdnobrs/v1/sites";\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/sites";\r
$\r
.ajax({\r
type: "GET",\r
});\r
}\r
function loadLinkData() {\r
- var requestUrl = "/openoapi/sdnobrs/v1/topological-links";\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/topological-links";\r
$\r
.ajax({\r
type: "GET",\r
});\r
}\r
function loadNeData() {\r
- var requestUrl = "/sdnobrs/v1/managed-elements";\r
+ var requestUrl = url + "/sdnobrs/v1/managed-elements";\r
$\r
.ajax({\r
type: "GET",\r
});\r
}\r
function loadPortData() {\r
- var requestUrl = "/openoapi/sdnobrs/v1/logical-termination-points";\r
+ var requestUrl = url + "/openoapi/sdnobrs/v1/logical-termination-points";\r
$\r
.ajax({\r
type: "GET",\r
});\r
$('.table tbody tr').click(function () {\r
$(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\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
- }\r
- window.operateEvents = {\r
- 'click .siteDeleteImg': function (e, value, row, index) {\r
- // TO DO ajex call for delete\r
- console.log(value, row, index);\r
- }\r
- };\r
- </script>\r
+ });\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
+ </script>\r
<style>\r
- .fixed-table-container tbody td .th-inner,\r
- .fixed-table-container thead th .th-inner {\r
- line-height: 4px;\r
+ .dropdown-menu {\r
+ min-width: 10px;\r
}\r
-\r
- .fixed-table-pagination .pagination-info {\r
- display: none !important;\r
+ .btn {\r
+ padding: 4px;\r
}\r
+ .fixed-table-container tbody td .th-inner,\r
+ .fixed-table-container thead th .th-inner {\r
+ line-height: 4px;\r
+ }\r
+ .fixed-table-pagination .pagination-info {\r
+ display: none !important;\r
+ }\r
+ .table tbody tr:hover td,\r
+ .table tbody tr.odd:hover td {\r
+ background-color: #e6fbe0 !important;\r
+ }\r
+ table tr.openoTable_row_selected td {\r
+ background: #e8f8fe!important;\r
+ border-bottom: 1px solid #e8e8e8!important;\r
+ }\r
+ .container-fluid {\r
+ padding-left: 30px;\r
+ padding-right: 0px;\r
+ }\r
\r
- .table tbody tr:hover td,\r
- .table tbody tr.odd:hover td {\r
- background-color: #e6fbe0 !important;\r
+ .clearfix {\r
+ display: none;\r
}\r
\r
- table tr.openoTable_row_selected td {\r
- background: #e8f8fe !important;\r
- border-bottom: 1px solid #e8e8e8 !important;\r
- }\r
+ .page-list{\r
+ float:none !important;\r
+ display:inline-block !important;\r
+ margin-right: 10px;\r
+ vertical-align: middle;\r
+ margin-bottom: 25px;\r
\r
- .container-fluid {\r
- padding-left: 30px;\r
- padding-right: 0px;\r
}\r
+ .pull-left{\r
+ float:none !important;\r
+ display:inline-block !important;\r
+ }\r
+\r
+ .pull-right{\r
+ float:none !important;\r
+ display:inline-block !important;\r
+ }\r
+\r
+ .fixed-table-pagination{\r
+ float:right;\r
+ }\r
</style>\r
</head>\r
\r
<body id="open_base_vpn_cotentBody" class="ng-scope">\r
<div class="container-fluid ms-controller">\r
\r
- <h3> Overlay VPN </h3>\r
- <div class="row-fluid" data-name="table_zone">\r
- <div id='ict_virtualApplication_table_div'>\r
- <div>\r
- <div class="top">\r
- <table id="sai" class="table table-striped" data-pagination="true" data-page-size="5"\r
- data-pagination-first-text="First" data-pagination-pre-text="Previous"\r
- data-pagination-next-text="Next" data-pagination-last-text="Last">\r
- <thead id="soverlayTable_thead" class="openo-table-thead" style="background:#ECECEC">\r
- <tr class="active">\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="overlayName" data-sortable="true">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="overlayName_sorticon"\r
- class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element">Name\r
+ <h3> Overlay VPN </h3>\r
+ <!-- <div class="row-fluid" data-name="table_zone">\r
+ <div id='ict_virtualApplication_table_div'>\r
+ <div>\r
+ <div class="top">\r
+ <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">\r
+ <thead id="soverlayTable_thead" class="openo-table-thead" style="background:#ECECEC">\r
+ <tr class="active">\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayName" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="overlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element">Name\r
</span>\r
- </div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="overlayDesc" data-sortable="true">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="overlayDesc_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element "> Description\r
+ </div>\r
+ </th>\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayDesc" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="overlayDesc_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element "> Description\r
</span>\r
- </div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="overlayThincCPE" data-sortable="true">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="overlayThincCPE_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Thin CPE\r
+ </div>\r
+ </th>\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayThincCPE" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="overlayThincCPE_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Thin CPE\r
</span>\r
- </div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="overlayPortVlanID" data-sortable="true">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="overlayPortVlanID_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Port:Vlan ID\r
+ </div>\r
+ </th>\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayPortVlanID" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="overlayPortVlanID_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Port:Vlan ID\r
</span>\r
- </div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="overlayDCName" data-sortable="true">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="overlayDCName_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">DC Name\r
+ </div>\r
+ </th>\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayDCName" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="overlayDCName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">DC Name\r
</span>\r
- </div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="overlayVPC" data-sortable="true">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="overlayVPC_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VPC\r
+ </div>\r
+ </th>\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayVPC" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="overlayVPC_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VPC\r
</span>\r
- </div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="overlayVPCCIDR" data-sortable="true">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="overlayVPCCIDR_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VPC CIDR\r
+ </div>\r
+ </th>\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="overlayVPCCIDR" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="overlayVPCCIDR_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VPC CIDR\r
</span>\r
- </div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="overlayOperation" align="center" data-formatter="operateFormatter"\r
- data-events="operateEvents">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="portAction_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action</span>\r
- </div>\r
- </th>\r
- </tr>\r
- </thead>\r
- <!-- <tbody>\r
- <tr style="display: none;">\r
- <td colspan="7" style="text-align: center;">NULL</td>\r
- </tr>\r
- <tr class="odd openo-table-tr openo-table-disable-element" data-rowid="0" data-tableid="overlayTable">\r
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayName" data-tableid="overlayTable">\r
- <div class="openo-table-disable-element overflow_elip leftDataAlign">\r
- <a class="openo-table-disable-element hyperLinkRow" href="javascript:void(0)" id="overlayTable_0_overlayName_link">overlay1</a></div></td>\r
- <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>\r
- </td>\r
- <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>\r
- </td>\r
- <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>\r
- </td>\r
- <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>\r
- </td>\r
- <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>\r
- </td>\r
- <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>\r
- </td>\r
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="overlayOperation" data-tableid="overlayTable">\r
- <div class="openo-table-disable-element overflow_elip leftDataAlign openo-table-custom-el" id="overlayTable_0_overlayOperation_custom_el">\r
- <div>\r
- <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/">\r
</div>\r
- </div>\r
- </td>\r
- </tr>\r
- </tbody> -->\r
- </table>\r
+ </th>\r
+ <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">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="portAction_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action</span>\r
+ </div>\r
+ </th>\r
+ </tr>\r
+ </thead>\r
+ <tbody>\r
+\r
+ <tr>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>\r
+ <button class="table-btn delete-btn"></button>\r
+ </td>\r
+ </tr>\r
+ <tr>\r
+ <td>data </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>\r
+ <button class="table-btn delete-btn"></button>\r
+ </td>\r
+ </tr>\r
+ <tr>\r
+ <td>now </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>\r
+ <button class="table-btn delete-btn"></button>\r
+ </td>\r
+ </tr>\r
+ <tr>\r
+ <td>then </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>Sample </td>\r
+ <td>\r
+ <button class="table-btn delete-btn"></button>\r
+ </td>\r
+ </tr>\r
+ </tbody>\r
+\r
+ </table>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div> -->\r
+\r
+ <div class="row-fluid" data-name="table_zone">\r
+ <div id='ict_virtualApplication_table_div'>\r
+ <div>\r
+ <div class="top">\r
+ <table class="table-striped table " id="sai" data-pagination="true" \r
+ data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">\r
+ <thead style="background:#ECECEC">\r
+ <tr>\r
+ <th data-field="name" data-sortable="true">Name</th>\r
+ <th data-field="desc" data-sortable="true">Description</th>\r
+ <th data-field="thinCpe" data-sortable="true">Thin CPE</th>\r
+ <th data-field="port" data-sortable="true">Port:Vlan ID</th>\r
+ <th data-field="dcName" data-sortable="true">DC Name</th>\r
+ <th data-field="vpc" data-sortable="true">VPC</th>\r
+ <th data-field="vpcCidr" data-sortable="true">VPC CIDR</th>\r
+ <th data-field="action" data-sortable="">Action</th>\r
+ </tr>\r
+ </thead>\r
+\r
+ </table>\r
+ </div>\r
+ </div>\r
</div>\r
</div>\r
- </div>\r
- </div>\r
\r
\r
</body>\r
<script type="text/javascript" src="js/underlay.js"></script>\r
<script type="text/javascript" src="js/bootstrap-table.min.js"></script>\r
<style>\r
- .fixed-table-container tbody td .th-inner,\r
- .fixed-table-container thead th .th-inner {\r
- line-height: 4px;\r
+ .dropdown-menu {\r
+ min-width: 10px;\r
}\r
-\r
- .fixed-table-pagination .pagination-info {\r
- display: none !important;\r
+ .btn {\r
+ padding: 4px;\r
}\r
\r
- .table tbody tr:hover td,\r
- .table tbody tr.odd:hover td {\r
- background-color: #e6fbe0 !important;\r
- }\r
+ .fixed-table-container tbody td .th-inner,\r
+ .fixed-table-container thead th .th-inner {\r
+ line-height: 4px;\r
+ }\r
+ .fixed-table-pagination .pagination-info {\r
+ display: none !important;\r
+ }\r
+ .table tbody tr:hover td,\r
+ .table tbody tr.odd:hover td {\r
+ background-color: #e6fbe0 !important;\r
+ }\r
+ .delete-btn {\r
+ background: url(delete.png) no-repeat !important;\r
+ width: 16px;\r
+ height: 16px;\r
+ border: none;\r
+ }\r
+ table tr.openoTable_row_selected td {\r
+ background: #e8f8fe!important;\r
+ border-bottom: 1px solid #e8e8e8!important;\r
+ }\r
+ .container-fluid {\r
+ padding-left: 10px;\r
+ padding-right: 0px;\r
+ }\r
\r
- .delete-btn {\r
- background: url(delete.png) no-repeat !important;\r
- width: 16px;\r
- height: 16px;\r
- border: none;\r
+ .clearfix {\r
+ display: none;\r
}\r
+ .page-list{\r
+ float:none !important;\r
+ display:inline-block !important;\r
+ margin-right: 10px;\r
+ vertical-align: middle;\r
+ margin-bottom: 25px;\r
\r
- table tr.openoTable_row_selected td {\r
- background: #e8f8fe !important;\r
- border-bottom: 1px solid #e8e8e8 !important;\r
}\r
+ .pull-left{\r
+ float:none !important;\r
+ display:inline-block !important;\r
+ }\r
\r
- .container-fluid {\r
- padding-left: 10px;\r
- padding-right: 0px;\r
- }\r
+ .pull-right{\r
+ float:none !important;\r
+ display:inline-block !important;\r
+ }\r
+\r
+ .fixed-table-pagination{\r
+ height:20px;\r
+ float:right;\r
+ }\r
</style>\r
<script type="text/javascript">\r
$(document).ready(function () {\r
});\r
$('.table tbody tr').click(function () {\r
$(this).addClass('openoTable_row_selected').siblings().removeClass('openoTable_row_selected');\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
\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
+ $('#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 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
+ 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
- $('#underlayTpDataTable').bootstrapTable(\r
- //Assigning data to table\r
- "append", JSON.parse(obj.name)\r
- );\r
- }\r
- </script>\r
- </head>\r
-<body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">\r
-<div class="container-fluid ms-controller">\r
- <h3>Underlay VPN</h3>\r
- <div class="row-fluid" data-name="table_zone">\r
- <div id='ict_virtualApplication_table_div'>\r
- <div>\r
- <div class="top">\r
- <table class="table table-striped" id="tbl_overlay" data-pagination="true" data-page-size="5"\r
- data-pagination-first-text="First" data-pagination-pre-text="Previous"\r
- data-pagination-next-text="Next" data-pagination-last-text="Last">\r
- <thead id="sunderlayTable_thead" class="openo-table-thead" style="background:#ECECEC">\r
- <tr class="active">\r
+</head>\r
\r
+<body id="open_base_vpn_cotentBody" class="cotentBody ng-scope">\r
+ <div class="container-fluid ms-controller">\r
+ <h3>Underlay VPN</h3>\r
+ <!-- <div class="row-fluid" data-name="table_zone">\r
+ <div id='ict_virtualApplication_table_div'>\r
+ <div>\r
+ <div class="top">\r
+ <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">\r
+ <thead id="sunderlayTable_thead" class="openo-table-thead" style="background:#ECECEC">\r
+ <tr class="active">\r
\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-formatter="nameFormatter" data-field="underlayName" data-sortable="true">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="underlayName_sorticon"\r
- class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element ">Name\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-formatter="nameFormatter" data-field="underlayName" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="underlayName_sorticon" class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element ">Name\r
</span>\r
- </div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="underlayTenantName" data-sortable="true">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="underlayTenantName_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">State\r
+ </div>\r
+ </th>\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="underlayTenantName_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">State\r
</span>\r
- </div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="underlayType" data-sortable="true">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="underlayType_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Description\r
- </span></div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="underlayDescription" align="center" data-formatter="operateFormatter"\r
- data-events="operateEvents">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="underlayDescription_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action\r
+ </div>\r
+ </th>\r
+ <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayType" data-sortable="true">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="underlayType_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Description\r
+ </span>\r
+ </div>\r
+ </th>\r
+ <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">\r
+ <div class="openo-table-th-border"></div>\r
+ <div class="DataTables_sort_wrapper openo-ellipsis ">\r
+ <span id="underlayDescription_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Action\r
</span>\r
- </div>\r
- </th>\r
- <!-- <th style="display: none;" class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="underlayObjId_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">ID\r
- </span>\r
- </div>\r
- </th>\r
- <th style="display: none;" class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign" data-field="underlayTenantName">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="underlayObjData_sorticon" class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Data\r
- </span>\r
- </div>\r
- </th> -->\r
- </tr>\r
- </thead>\r
- <!-- <tbody>\r
- <tr style="display: none;">\r
- <td colspan="7" style="text-align: center;">NULL</td>\r
- </tr>\r
- <tr class="odd openo-table-tr openo-table-disable-element" data-rowid="0" data-tableid="underlayTable">\r
-\r
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayName" data-tableid="underlayTable">\r
- <div class="openo-table-disable-element overflow_elip leftDataAlign">\r
- <a class="underlayNameLink" href="javascript:void(0)" id="underlayTable_0_underlayName_link">underlay1</a>\r
- </div>\r
- </td>\r
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">\r
- <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">underlay 101</div>\r
- </td>\r
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayTenantName" data-tableid="underlayTable">\r
- <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayTenantName_custom_el">chaxuanyue</div>\r
- </td>\r
- <td class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayOperation" data-tableid="underlayTable">\r
- <div class="openo-table-disable-element overflow_elip leftDataAlign openo-table-custom-el" id="underlayTable_0_underlayOperation_custom_el">\r
- <div>\r
- <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/">\r
</div>\r
- </div>\r
- </td>\r
- <td style="display: none;" class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">\r
- <div class="overflow_elip leftDataAlign openo-table-custom-el openo-table-disable-element" id="underlayTable_0_underlayType_custom_el">ID12345</div>\r
- </td>\r
- <td style="display: none;" class="openo-table-disable-element openo-table-td overflow_elip leftDataAlign tableHeaderTDTopBorderColor" data-colid="underlayType" data-tableid="underlayTable">\r
- <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>\r
- </td>\r
- </tr>\r
- </tbody> -->\r
- </table>\r
+ </th>\r
+\r
+ </tr>\r
+ </thead>\r
+ <tbody>\r
+\r
+ <tr>\r
+ <td>a_data </td>\r
+ <td>data </td>\r
+ <td>Sample1 </td>\r
+ <td>\r
+ <button class="table-btn delete-btn"></button>\r
+ </td>\r
+ </tr>\r
+\r
+ <tr>\r
+ <td>b_data </td>\r
+ <td>new sample </td>\r
+ <td>modified </td>\r
+ <td>\r
+ <button class="table-btn delete-btn"></button>\r
+ </td>\r
+ </tr>\r
+\r
+ <tr>\r
+ <td>data </td>\r
+ <td>updated </td>\r
+ <td>Sample </td>\r
+ <td>\r
+ <button class="table-btn delete-btn"></button>\r
+ </td>\r
+ </tr>\r
+\r
+ <tr>\r
+ <td>alarm </td>\r
+ <td>deleted </td>\r
+ <td>Sample </td>\r
+ <td>\r
+ <button class="table-btn delete-btn"></button>\r
+ </td>\r
+ </tr>\r
+ </tbody>\r
+\r
+ </table>\r
+ </div>\r
</div>\r
</div>\r
</div>\r
- </div>\r
- <hr>\r
- <h3>TP Details</h3>\r
- <div class="row-fluid" data-name="table_zone">\r
- <div id='ict_virtualApplication_table_div'>\r
- <div>\r
- <div class="top">\r
- <table id="underlayTpDataTable" data-pagination="true" data-page-size="5"\r
- data-pagination-first-text="First" data-pagination-pre-text="Previous"\r
- data-pagination-next-text="Next" data-pagination-last-text="Last">\r
- <thead id="underlayTable_thead" class="openo-table-thead">\r
- <tr class="active">\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="underlayName">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="underlayName_sorticon"\r
- class="openo-table-th-sorticon overflow_elip openoTable_sortable leftHeaderAlign openo-table-disable-element ">TP Name\r
- </span>\r
- </div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="underlayType">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="underlayType_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">PE Name\r
- </span></div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="underlayTenantName">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="underlayTenantName_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">VLAN ID\r
- </span></div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="underlayTenantunderlayName">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="underlayTenantunderlayName_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">Site CIDR\r
- </span></div>\r
- </th>\r
- <th class="openo-table-state-default openo-table-th openo-table-disable-element leftHeaderAlign"\r
- data-field="underlayTenantunderlayIP">\r
- <div class="openo-table-th-border"></div>\r
- <div class="DataTables_sort_wrapper openo-ellipsis ">\r
- <span id="underlayTenantunderlayName_sorticon"\r
- class="openo-table-th-sorticon overflow_elip leftHeaderAlign openo-table-disable-element ">IP\r
- </span></div>\r
- </th>\r
- </tr>\r
- </thead>\r
- <!-- <tbody>\r
- </tbody> -->\r
- </table>\r
+ -->\r
+\r
+ <div class="row-fluid" data-name="table_zone">\r
+ <div id='ict_virtualApplication_table_div'>\r
+ <div>\r
+ <div class="top">\r
+ <table class="table-striped table " id="sai" data-pagination="true" \r
+ data-pagination-first-text="First" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-pagination-last-text="Last">\r
+ <thead style="background:#ECECEC">\r
+ <tr>\r
+ <th data-field="name" data-sortable="true">Name</th>\r
+ <th data-field="state" data-sortable="true">State</th>\r
+ <th data-field="desc" data-sortable="true">Description</th>\r
+ <th data-field="action" data-sortable="">Action</th>\r
+ </tr>\r
+ </thead>\r
+\r
+ </table>\r
+ </div>\r
+ </div>\r
</div>\r
</div>\r
- </div>\r
- </div>\r
+\r
+<div id="tpDiv">\r
+ <iframe src="UnderLay_TP.html" style="width:100%;height:210px;" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0">\r
+ </iframe>\r
</div>\r
<div id="filterTpLogicalType_select_popupcontainer" class="openo openo-select-popup-container openo-hide"\r
style="width: 155px; max-height: 130px; left: 628px; top: 104px; z-index: 1761;">\r
Code Review / vnfsdk / refrepo.git / commitdiff