diff options
Diffstat (limited to 'openo-portal/portal-lifecyclemgr/src')
6 files changed, 229 insertions, 50 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 917cff16..b5a2d98c 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/InputData.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/InputData.html @@ -40,7 +40,25 @@ if (jsonData != null) {
$("body").empty();
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>');
+ var name = key;
+ if(name.includes('.'))
+ {
+ name = key.substring(key.lastIndexOf('.')+1,key.length);
+ }
+ var paramValue = jsonData.inputParameters[key];
+ if(name.indexOf('location') != -1) {
+ var vimObj = getVimNameById(paramValue);
+ if(vimObj != undefined){
+ paramValue = vimObj.name;
+ }
+ }
+ else if(name.indexOf('sdncontroller') != -1){
+ var sdnControllerObj = getSdnControllerNameById(paramValue);
+ if(sdnControllerObj != undefined){
+ paramValue = sdnControllerObj.name;
+ }
+ }
+ $("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;">'+ name + ':</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="'+ paramValue + '" value="'+ paramValue + '" readonly disabled/></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 7fbc77d3..b7357c52 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/gsolcmmain.html @@ -15,6 +15,7 @@ limitations under the License.
-->
+
<!DOCTYPE html>
<html lang="en">
<head>
@@ -28,19 +29,23 @@ <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="js/gsolcm.js"></script>
+ <script type="text/javascript" src="../common/thirdparty/bootbox/bootbox.min.js"></script>
+ <script type="text/javascript" src="js/jquery.isloading.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"></script>
<link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/bootstrap-table-filter-control.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
- /* $('.modal-content').resizable({
-
- minHeight: 300,
- minWidth: 300
- });*/
+ new lcmHandler();
+
$('.modal-dialog').draggable();
$("#detailCont").show();
var jsondata = loadGetServiceData();
+
+ $.each(jsondata,function(k,v){
+ jsondata[k].createTime= new Date(jsondata[k].createTime).toUTCString();
+ });
+
$('#sai').bootstrapTable({
//Assigning data to table
data: jsondata
@@ -68,10 +73,10 @@ //loadIframe("topoFrame", "chartTopo.html?serviceId="+row.serviceId);
document.getElementById("topoCont").setAttribute('data', 'chartTopo.html?serviceId='+row.serviceId);
- document.getElementById('inputcontent').setAttribute('data', 'inputData.html?json='+ JSON.stringify(row));
- document.getElementById('inputcontentDlg').setAttribute('data', 'inputData.html?json='+ JSON.stringify(row));
+ document.getElementById('inputcontent').setAttribute('data', 'InputData.html?json='+ JSON.stringify(row));
+ document.getElementById('inputcontentDlg').setAttribute('data', 'InputData.html?json='+ JSON.stringify(row));
});
- new lcmHandler();
+
});
function operateFormatter(value, row, index) {
@@ -210,6 +215,30 @@ .clearfix {
display: none;
}
+ .isloading-wrapper.isloading-right{
+ margin-left:10px;
+ }
+ .isloading-overlay{
+ position:relative;
+ text-align:center;
+ }
+ .isloading-overlay .isloading-wrapper{
+ background: url("images/loading.gif") 90% 50% no-repeat #FFFFFF;
+ padding:15px 30px;
+ -webkit-border-radius:7px;
+ -webkit-background-clip:padding-box;
+ -moz-border-radius:7px;
+ -moz-background-clip:padding;
+ border-radius:7px;
+ background-clip:padding-box;
+ display:inline-block;
+ margin:0 auto;
+ top:10%;
+ z-index:9000;
+ }
+ .icon-refresh{
+ background: url("images/loading.gif") 50% 50% no-repeat;
+ }
</style>
</head>
<body id="open_base_site_cotentBody" class="cotentBody ng-scope">
@@ -358,11 +387,11 @@ </iframe>-->
</div>
<div id="inpContMod" style="display:none;">
- <object id="inputcontentDlg" data="inputData.html" width="100%" height="300"
+ <object id="inputcontentDlg" data="InputData.html" width="100%" height="300"
type="text/html">
</object>
- <!--<iframe src="inputData.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">
+ <!--<iframe src="InputData.html" name="" style="width:100%" allowTransparency="true" scrolling="no" frameborder="0">
</iframe>
</iframe>-->
</div>
@@ -431,7 +460,7 @@ </object>
</div>
<div id="inpCont" style="display:none;">
- <object id="inputcontent" src="inputData.html" width="100%" height="300" type="text/html">
+ <object id="inputcontent" src="InputData.html" width="100%" height="300" type="text/html">
</object>
</div>
</div>
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/images/loading.gif b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/images/loading.gif Binary files differnew file mode 100644 index 00000000..5e28c953 --- /dev/null +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/images/loading.gif diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/gsolcm.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/gsolcm.js index 57643c8c..9105d5d6 100644 --- a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/gsolcm.js +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/gsolcm.js @@ -32,6 +32,7 @@ lcmHandler.prototype = { alert('Location must be selected in Template Parameters'); return; } + $.isLoading({ text: "Creating service..." }); var serviceInstance = { serviceTemplateId: $("#svcTempl").val(), serviceName: $('#svcName').val(), @@ -50,6 +51,7 @@ lcmHandler.prototype = { ).then( function(serviceInstance) { updateTable(serviceInstance); + $.isLoading('hide'); $('#vmAppDialog').removeClass('in').css('display', 'none'); } ); @@ -146,12 +148,14 @@ function fetchGsoTemplateInputParameters(templateId) { $.when( fetchTemplateParameterDefinitions(templateId), fetchGsoNestingTemplateParameters(templateId), - fetchVimInfo() + fetchVimInfo(), + fetchSdnController() ).then( - function (templateParameterResponse, nestingTempatesParas, vimInfoResponse) { + function (templateParameterResponse, nestingTempatesParas, vimInfoResponse, sdnControllersResponse) { var inputParas = concat(templateParameterResponse[0].inputs, nestingTempatesParas); var vims = translateToVimInfo(vimInfoResponse[0]); - templateParameters = translateToTemplateParameters(inputParas, vims); + var sdnControllers = translateToSdnControllers(sdnControllersResponse[0]); + templateParameters = translateToTemplateParameters(inputParas, vims, sdnControllers); defer.resolve(templateParameters); } ); @@ -205,7 +209,13 @@ function fetchGsoNestingTemplateParameters(templateId) { description: nodeTemplate.name + ' Location', required: 'true' }); - } + inputs.push({ + name: nodeTemplate.type + '.sdncontroller', + type: 'sdncontroller', + description: nodeTemplate.name + ' SDN Controller', + required: 'true' + }); + } nodeAggregatation.notify(inputs); } ); @@ -255,7 +265,7 @@ function pushAll(acc, array) { return result; } -function translateToTemplateParameters(inputs, vims) { +function translateToTemplateParameters(inputs, vims, controllers) { var inputParameters = []; var i; for (i = 0; i < inputs.length; i += 1) { @@ -269,17 +279,19 @@ function translateToTemplateParameters(inputs, vims) { value: inputs[i].defaultValue || '' }; } - return {changed: false, parameters: inputParameters, vimInfos: vims}; + return {changed: false, parameters: inputParameters, vimInfos: vims, sdnControllers: controllers}; } function fetchNfvoTemplateInputParameters(templateId) { var defer = $.Deferred(); $.when( fetchTemplateParameterDefinitions(templateId), - fetchVimInfo() + fetchVimInfo(), + fetchSdnController() ).then( - function (templateParameterResponse, vimInfoResponse) { + function (templateParameterResponse, vimInfoResponse, sdnControllerResponse) { var vims = translateToVimInfo(vimInfoResponse[0]); + var sdnControllers = translateToSdnControllers(sdnControllerResponse[0]); var inputParas = templateParameterResponse[0].inputs; inputParas.push({ name: 'location', @@ -287,7 +299,13 @@ function fetchNfvoTemplateInputParameters(templateId) { description: 'Location', required: 'true' }); - templateParameters = translateToTemplateParameters(inputParas, vims); + inputParas.push({ + name: 'sdncontroller', + type: 'sdncontroller', + description: 'SDN Controller', + required: 'true' + }); + templateParameters = translateToTemplateParameters(inputParas, vims, sdnControllers); defer.resolve(templateParameters); } ); @@ -300,7 +318,7 @@ function fetchSdnoTemplateInputParameters(templateId) { fetchTemplateParameterDefinitions(templateId) ).then( function (templateParameterResponse) { - templateParameters = translateToTemplateParameters(templateParameterResponse.inputs, []); + templateParameters = translateToTemplateParameters(templateParameterResponse.inputs, [], []); defer.resolve(templateParameters); } ); @@ -323,48 +341,68 @@ function fetchVimInfo() { }); } +function fetchSdnController() { + var sdnControllerUri = '/openoapi/extsys/v1/sdncontrollers'; + return $.ajax({ + type: "GET", + url: sdnControllerUri + }); +} + function translateToVimInfo(vims) { return vims.map(function (vim) { return { - vimId: vim.vimId, - vimName: vim.name + optionId: vim.vimId, + optionName: vim.name }; }); } +function translateToSdnControllers(controllers) { + return controllers.map(function(controller) { + return { + optionId: controller.sdnControllerId, + optionName: controller.name + }; + }); +} + function transformToComponents(templateParas) { var inputs = templateParas.parameters; var vimInfos = templateParas.vimInfos; + var sdnControllers = templateParas.sdnControllers; var components = ''; inputs.forEach(function (inputPara) { if(inputPara.type === 'location') { - components = components + generateLocationComponent(inputPara, vimInfos); - } else { + components = components + generateComboxComponent(inputPara, vimInfos); + } else if(inputPara.type === 'sdncontroller') { + components = components + generateComboxComponent(inputPara, sdnControllers); + } else { components = components + generateComponent(inputPara); } }); return components; } -function generateLocationComponent(inputPara, vimInfos) { +function generateComboxComponent(inputPara, items) { var component = '<div class="form-group" style="margin-left:25px;margin-bottom:15px;">' + '<label class="col-sm-3 control-label">' + - '<span>'+ inputPara.description +'</span>' + + '<span>'+ inputPara.name +'</span>' + '<span class="required">*</span>' + '</label>' + '<div class="col-sm-7">' + '<select class="form-control" style ="padding-top: 0px;padding-bottom: 0px;"' + - ' id="' + inputPara.id + '" name="vim_location">' + - transformToOptions(vimInfos) + + ' id="' + inputPara.id + '" name="'+ inputPara.name +'">' + + transformToOptions(items) + '</select></div></div>'; return component; } -function transformToOptions(vims) { +function transformToOptions(items) { var options = '<option value="select">--select--</option>'; var i; - for (i = 0; i < vims.length; i += 1) { - var option = '<option value="' + vims[i].vimId + '">' + vims[i].vimName + '</option>'; + for (i = 0; i < items.length; i += 1) { + var option = '<option value="' + items[i].optionId + '">' + items[i].optionName + '</option>'; options = options + option; } return options; @@ -373,11 +411,11 @@ function transformToOptions(vims) { function generateComponent(inputPara) { var component = '<div class="mT15 form-group" style="margin-left:25px;">' + '<label class="col-sm-3 control-label">' + - '<span>' + inputPara.description + '</span>' + generateRequiredLabel(inputPara) + + '<span>' + inputPara.name + '</span>' + generateRequiredLabel(inputPara) + '</label>' + '<div class="col-sm-7">' + '<input type="text" id="' + inputPara.id + '" name="parameter description" class="form-control" placeholder="' + - inputPara.description + '" value="' + inputPara.value + '" />' + + inputPara.name + '" value="' + inputPara.value + '" />' + '</div></div>'; return component; } @@ -502,21 +540,28 @@ function formatDate(date) { } function deleteNe(rowId, row) { - var instanceId = row.serviceId; - var serviceType = row.serviceType; - var gatewayService = '/openoapi/servicegateway/v1/services/' + instanceId + '/terminate'; - var remove = function () { - $('#sai').bootstrapTable('remove', {field: 'serviceId', values: [instanceId]}); + var deleteHandle = function(result) { + if(result) { + $.isLoading({ text: "Deleting service..." }); + var instanceId = row.serviceId; + var serviceType = row.serviceType; + var gatewayService = '/openoapi/servicegateway/v1/services/' + instanceId + '/terminate'; + var remove = function () { + $.isLoading( "hide" ); + $('#sai').bootstrapTable('remove', {field: 'serviceId', values: [instanceId]}); + }; + if(serviceType === 'GSO') { + deleteGsoServiceInstance(gatewayService, instanceId, remove); + } else if (serviceType === 'NFVO') { + var nfvoNsUri = '/openoapi/nslcm/v1/ns'; + deleteNonGsoServiceInstance(gatewayService, nfvoNsUri, instanceId, remove); + } else if (serviceType === 'SDNO') { + var sdnoNsUri = '/openoapi/sdnonslcm/v1/ns'; + deleteNonGsoServiceInstance(gatewayService, sdnoNsUri, instanceId, remove); + } + } }; - if(serviceType === 'GSO') { - deleteGsoServiceInstance(gatewayService, instanceId, remove) - } else if (serviceType === 'NFVO') { - var nfvoNsUri = '/openoapi/nslcm/v1/ns'; - deleteNonGsoServiceInstance(gatewayService, nfvoNsUri, instanceId, remove); - } else if (serviceType === 'SDNO') { - var sdnoNsUri = '/openoapi/sdnonslcm/v1/ns'; - deleteNonGsoServiceInstance(gatewayService, sdnoNsUri, instanceId, remove); - } + bootbox.confirm("Do you confirm to delete service?", deleteHandle); } function deleteGsoServiceInstance(gatewayService, instanceId, remove) { diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/jquery.isloading.min.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/jquery.isloading.min.js new file mode 100644 index 00000000..87573765 --- /dev/null +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/jquery.isloading.min.js @@ -0,0 +1,39 @@ +/** +* Loading plugin for jQuery +* version: v1.0.6 +* +* Small helper to give the user a visual feedback that something is happening +* when fetching/posting data +* +* USAGE: +* - global overlay: $.isLoading(); +* - use javascript: $( selector ).isLoading(); +* - On non-form elements: $("div").isLoading({ text: "Loading", position:'inside'}); +* - remove the loading element: $( selector ).isLoading( "hide" ); +* +* @author Laurent Blanes <laurent.blanes@gmail.com> +* --- +* Copyright 2013, Laurent Blanes ( https://github.com/hekigan/is-loading ) +* +* The MIT License (MIT) +* +* Copyright (c) 2013 Laurent Blanes +* +* Permission is hereby granted, free of charge, to any person obtaining a copy +* of this software and associated documentation files (the "Software"), to deal +* in the Software without restriction, including without limitation the rights +* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +* copies of the Software, and to permit persons to whom the Software is +* furnished to do so, subject to the following conditions: +* +* The above copyright notice and this permission notice shall be included in +* all copies or substantial portions of the Software. +* +* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +* THE SOFTWARE. +*/!function(e,t){function i(t,i){this.element=t,this.options=e.extend({},n,i),this._defaults=n,this._name=o,this._loader=null,this.init()}function s(){e[o]||(e.isLoading=function(t){e("body").isLoading(t)})}var o="isLoading",n={position:"right",text:"","class":"glyphicon glyphicon-refresh",transparency:.5,tpl:'<span class="isloading-wrapper %wrapper%">%text%<i class="%class% glyphicon-spin"></i></span>',disableSource:!0,disableOthers:[]};i.prototype={init:function(){e(this.element).is("body")&&(this.options.position="overlay"),this.show()},show:function(){var i=this,s=i.options.tpl.replace("%wrapper%"," isloading-show isloading-"+i.options.position);switch(s=s.replace("%class%",i.options["class"]),s=s.replace("%text%",""!==i.options.text?i.options.text+" ":""),i._loader=e(s),e(i.element).is("input, textarea")&&!0===i.options.disableSource?e(i.element).attr("disabled","disabled"):!0===i.options.disableSource&&e(i.element).addClass("disabled"),i.options.position){case"inside":e(i.element).html(i._loader);break;case"overlay":var o=null;if(e(i.element).is("body"))o=e('<div class="isloading-overlay" style="position:fixed; left:0; top:0; z-index: 10000; background: rgba(0,0,0,'+i.options.transparency+"); width: 100%; height: "+e(t).height()+'px;" />'),e("body").prepend(o),e(t).on("resize",function(){o.height(e(t).height()+"px"),i._loader.css({top:e(t).height()/2-i._loader.outerHeight()/2+"px"})});else{var n=e(i.element).css("position"),a={},l=e(i.element).outerHeight()+"px",r="100%";a="relative"===n||"absolute"===n?{top:0,left:0}:e(i.element).position(),o=e('<div class="isloading-overlay" style="position:absolute; top: '+a.top+"px; left: "+a.left+"px; z-index: 10000; background: rgba(0,0,0,"+i.options.transparency+"); width: "+r+"; height: "+l+';" />'),e(i.element).prepend(o),e(t).on("resize",function(){o.height(e(i.element).outerHeight()+"px"),i._loader.css({top:o.outerHeight()/2-i._loader.outerHeight()/2+"px"})})}o.html(i._loader),i._loader.css({top:o.outerHeight()/2-i._loader.outerHeight()/2+"px"});break;default:e(i.element).after(i._loader)}i.disableOthers()},hide:function(){"overlay"===this.options.position?e(this.element).find(".isloading-overlay").first().remove():(e(this._loader).remove(),e(this.element).text(e(this.element).attr("data-isloading-label"))),e(this.element).removeAttr("disabled").removeClass("disabled"),this.enableOthers()},disableOthers:function(){e.each(this.options.disableOthers,function(t,i){var s=e(i);s.is("button, input, textarea")?s.attr("disabled","disabled"):s.addClass("disabled")})},enableOthers:function(){e.each(this.options.disableOthers,function(t,i){var s=e(i);s.is("button, input, textarea")?s.removeAttr("disabled"):s.removeClass("disabled")})}},e.fn[o]=function(t){return this.each(function(){if(t&&"hide"!==t||!e.data(this,"plugin_"+o))e.data(this,"plugin_"+o,new i(this,t));else{var s=e.data(this,"plugin_"+o);"hide"===t?s.hide():s.show()}})},s()}(jQuery,window,document); 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 7590bdf7..ddeabf7e 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 @@ -174,7 +174,7 @@ function loadGetServiceData(){ var parameter = {
'sort': [],
'pagination': 0,
- 'pagesize': 25,
+ 'pagesize': 10000,
'condition': {},
'serviceId': ""
};
@@ -220,6 +220,54 @@ function loadServiceDetails(serviceId){ return returnObj;
}
+//get the vim name by id.
+function getVimNameById(vimId){
+
+ // TODO re-confirm the latest url.
+ var requestUrl ="/openoapi/extsys/v1/vims/" + vimId;
+ var returnObj;
+ $
+ .ajax({
+ type : "GET",
+ async: false,
+ url : requestUrl,
+ contentType : "application/json",
+ success : function(jsonobj) {
+ // TODO return according to the json data received.
+ returnObj = jsonobj;
+ },
+ error : function(xhr, ajaxOptions, thrownError) {
+ alert("Error on getting link data : " + xhr.responseText);
+ }
+ });
+ return returnObj;
+}
+
+// get the sdn controller name by id.
+function getSdnControllerNameById(sdnControllerId){
+
+ // TODO re-confirm the latest url.
+ var requestUrl ="/openoapi/extsys/v1/sdncontrollers/" + sdnControllerId;
+ var returnObj;
+ $
+ .ajax({
+ type : "GET",
+ async: false,
+ url : requestUrl,
+ contentType : "application/json",
+ success : function(jsonobj) {
+ // TODO return according to the json data received.
+ returnObj = jsonobj;
+ },
+ error : function(xhr, ajaxOptions, thrownError) {
+ alert("Error on getting link data : " + xhr.responseText);
+ }
+ });
+ return returnObj;
+}
+
+
+
function anchorClick(serviceId){
var jsonData = loadServiceDetails(serviceId);
//TODO populate the modal according to json response
|
