From ee7f5450b988a35c9f16d23d36498005e57531fc Mon Sep 17 00:00:00 2001 From: 陆骥10116947 Date: Thu, 7 Sep 2017 16:35:12 +0800 Subject: add creating service dialog Change-Id: I812cddcbac94c83472ac2f702692478c9444a571 Issue-Id: USECASEUI-36 Signed-off-by: Luji7 --- .../src/main/webapp/html/lifecyclemanager.html | 229 ++++++-- .../webapp/static/fusion/js/lifecyclemanager.js | 639 +++++++++++++++++++++ 2 files changed, 808 insertions(+), 60 deletions(-) create mode 100644 usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js diff --git a/usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html b/usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html index ba4118fe..4f8874d4 100644 --- a/usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html +++ b/usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html @@ -1,4 +1,22 @@ + + @@ -47,7 +65,7 @@
- +
@@ -64,75 +82,166 @@
    • - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Service Instance IdService NameService TypeAction
    123VoLTE Use Case 1E2E ServiceDelete
    456VoLTE Use Case 2E2E ServiceDelete
    789VoLTE Use Case 3E2E ServiceDelete
    - -
    - -
    -
    - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Service Instance IdService NameService TypeAction
    123VoLTE Use Case 1E2E ServiceDelete
    456VoLTE Use Case 2E2E ServiceDelete
    789VoLTE Use Case 3E2E ServiceDelete
    + + + - - '; + } + + } else if (param.type === 'enum') { + component = '
    ' + + '' + + '
    ' + + '
    '; + } + return component; +} + +/** + * transfer the enum range to html body + * @param items the map of the range + * @returns the html string + */ +function transformToOptions(items) { + var options = ''; + var i; + for ( var key in items) { + var option = ''; + options = options + option; + } + return options; +} + +/** + * generate required identify to html string + * @param parameter the parameter object + * @returns the html string + */ +function generateRequiredLabel(parameter) { + var requiredLabel = ''; + if (parameter.required === 'true') { + requiredLabel = '*'; + } + return requiredLabel; +} + +/** + * create service + * @param sengMsgObj the parameters + * @returns + */ +function createServiceInstance(sengMsgObj) { + var defer = $.Deferred(); + var parameter = { + 'service' : { + 'name' : $('#svcName').val(), + 'description' : $('#svcDesc').val(), + 'serviceDefId' : '', //no need now, reserved + 'templateId' : $("#svcTempl").val(), + 'parameters' : sengMsgObj + } + }; + var serviceGatewayUri = '/openoapi/servicegateway/v1/services'; + $.when($.ajax({ + type : "POST", + url : serviceGatewayUri, + contentType : "application/json", + dataType : "json", + data : JSON.stringify(parameter) + })) + .then(function(response) { + return queryProgress('create service', response.service.serviceId,response.service.operationId); + }).then(function(result){ + defer.resolve(result); + }); + return defer; +} + +/** + * + * @param rowId + * @param row + * @returns + */ +function deleteService(rowId, row) { + var deleteHandle = function(result) { + if (result) { + var serviceId = row.serviceId; + var remove = function() { + $('#sai').bootstrapTable('remove', { + field : 'serviceId', + values : [ serviceId ] + }); + }; + var failFun = function(responseDesc) { + $.isLoading("hide"); + showErrorMessage("Delete service failed", responseDesc); + } + $.when(deleteServiceInstance(serviceId)) + .then(function(response) { + if (response.status === 'finished') { + remove(); + } else { + showErrorMessage('Create service failed',response); + } + }); + ; + } + }; + bootbox.confirm("Do you confirm to delete service?", deleteHandle); +} + +/** + * sent delete instance msg + * @param serviceId the service id + * @returns + */ +function deleteServiceInstance(serviceId) { + var defer = $.Deferred(); + var deleteUrl = '/openoapi/servicegateway/v1/services/' + serviceId; + $.when($.ajax({ + type : "DELETE", + url : deleteUrl, + contentType : "application/json", + dataType : "json", + data : JSON.stringify(parameter) + })) + .then(function(response) { + return queryProgress('delete service', serviceId,response.operationId); + }).then(function(result){ + defer.resolve(result); + }); + return defer; +} + +/** + * query progress of the operation + * @param operation the operation string + * @param serviceId the service id + * @param operationId the operation id + * @returns + */ +function queryProgress(operation, serviceId, operationId) { + //show the progress dialog + $( "#idProgressTitle" ).text(operation); + $( "#progressContent" ).text('status:'); + $( "#progressbar" ).attr("style","width: 0%"); + $( "#progressDialog" ).modal({backdrop:'static', keyboard:false}); + //set a timer for query operation + var defer = $.Deferred(); + var queryProgressUril = '/openoapi/servicegateway/v1/services/' + serviceId + '/operations/' + operationId; + var timerDefer = $.Deferred(); + var timeout = 3600000; + var fun = function() { + if (timeout === 0) { + timerDefer.resolve({ + status : 'error', + reason : operation + ' timeout!', + }); + return; + } + timeout = timeout - 1000; + $.when($.ajax({ + type : "GET", + url : gsoServiceUri + })) + .then(function(response) { + //update progress + $( "#progressbar" ).attr("style","width: " + response.operation.progress.toString() + "%"); + $( "#progressValue" ).text(response.operation.progress.toString() + '%'); + $( "#progressContent" ).text('status: ' + response.operation.operationContent); + if (response.operation.result == 'finished' || response.operation.result == 'error') { + timerDefer.resolve({ + status : response.operation.result , + reason : response.operation.reason + }); + } + }); + }; + var timerId = setInterval(fun, 1000); + $.when(timerDefer) + .then(function(responseDesc) { + clearInterval(timerId); + $('#progressDialog').modal('hide'); + defer.resolve({ + status : responseDesc.status, + reason : responseDesc.reason, + serviceId:serviceId + }); + + }); + return defer; +} + + +/** + * convert the input parameters to ui + * @param identify the identify of a segment + * @param createParam the create param object + * @returns the check result + */ +function convertInputsToUI(parentHost, identify, serviceParam) { + var components = ''; + // convert host to UI + if (undefined != serviceParam.domainHost && '' != serviceParam.domainHost && parentHost != serviceParam.domainHost) { + var param ={ + name:'domainHost', + type:'string', + defaultValue:getShowVal('domainHost', serviceParam.domainHost), + required:false + } + components = components + generateParamComponent(serviceParam.nodeType, identify, + param, true); + } + // convert own param to UI + for(var key in serviceParam.additionalParamForNs ){ + var param ={ + name: key, + type:'string', + defaultValue:getShowVal(key, serviceParam.additionalParamForNs[key]), + required:false + } + components = components + generateParamComponent(serviceParam.nodeType, + identify, param, true); + } + // convert segments to UI + serviceParam.segments.forEach(function(segment) { + // each segment in a field set. + components = components + '
    ' + + segment.nodeTemplateName + ''; + // the identify for segment + var segmentIdentify = '' == identify ? segment.nodeTemplateName + : identify + '_' + segment.nodeTemplateName; + // convert segment to UI + components = components + + convertInputsToUI(serviceParam.domainHost, segmentIdentify, segment); + components = components + '
    '; + }); + return components; +} + +function getShowVal(paramName, paramValue){ + if(paramName == 'domainHost'){ + return getHostNameByVal(paramValue); + } + else if(paramName == 'location'){ + return getVimNameById(paramValue); + } + else if(paramName == 'sdncontroller'){ + return getSdnControllerNameById(paramValue); + } + else{ + return paramValue; + } +} + +function getHostNameByVal(hostDomain){ + var requestUrl ="/openoapi/servicegateway/v1/domains"; + var returnObj = ''; + $.ajax({ + type : "GET", + async: false, + url : requestUrl, + contentType : "application/json", + success : function(jsonobj) { + jsonobj.forEach(function(host){ + if(host.host == hostDomain){ + returnObj = host.name; + } + }); + }, + error : function(xhr, ajaxOptions, thrownError) { + alert("Error on getting link data : " + xhr.responseText); + } + }); + return returnObj; +} + +//get the vim name by id. +function getVimNameById(vimId){ + 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){ + 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; +} + + + +/** + * show error dialog + * @param title the title + * @param result the result + * @returns + */ +function showErrorMessage(title, result) { + //show the error dialog + $( "#errorDialogTitle" ).text(title); + $( "#errorDialogReason" ).text(result.reason); + $( "#errorDialog" ).modal({backdrop:'static', keyboard:false}); +} + +/** + * generate the template to create parameters object + * + * @param templateId the template id + * @returns + */ +function queryService(serviceId) { + var uri = '/openoapi/servicegateway/v1/services/' + serviceId; + return $.ajax({ + type : "GET", + url : uri + }); +} -- cgit 1.2.3-korg