diff options
author | 2017-09-07 16:35:12 +0800 | |
---|---|---|
committer | 2017-09-07 16:35:23 +0800 | |
commit | ee7f5450b988a35c9f16d23d36498005e57531fc (patch) | |
tree | 197c41ffcc3baba27a5582495c2a15f4a08dac75 /usecaseui-lcm/src/main/webapp/static/fusion | |
parent | 10d5b11472f25b015d1d9b0abdea8e359595e16d (diff) |
add creating service dialog
Change-Id: I812cddcbac94c83472ac2f702692478c9444a571
Issue-Id: USECASEUI-36
Signed-off-by: Luji7 <lu.ji3@zte.com.cn>
Diffstat (limited to 'usecaseui-lcm/src/main/webapp/static/fusion')
-rw-r--r-- | usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js | 639 |
1 files changed, 639 insertions, 0 deletions
diff --git a/usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js b/usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js new file mode 100644 index 00000000..aa26bb04 --- /dev/null +++ b/usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js @@ -0,0 +1,639 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +var templateParameters = { + changed : true, + // the create params used for ui + paramJsonObj : {} +}; + +var lcmHandler = function() { + this._addOwnEvents(); +}; + +lcmHandler.prototype = { + _addOwnEvents : function() { + $('#createService').click(function() { + console.log("create service..."); + $('#createServiceDialog').modal(); + }); + $('#startToCreateService').click(this.okAction); + }, + okAction : function() { + if (!checkInputs('create', templateParameters.paramJsonObj)) { + return; + } + var sengMsgObj = collectCreateParamfromUI('', 'create', templateParameters.paramJsonObj); + var gatewayService = '/openoapi/servicegateway/v1/services'; + $.when(createServiceInstance(sengMsgObj)) + .then(function(response) { + if (response.status === 'finished') { + $.when(queryService()).then(function(serviceInstance){ + $('#sai').bootstrapTable("append", serviceInstance); + }); + $('#vmAppDialog').removeClass('in').css('display','none'); + } else { + showErrorMessage('Create service failed',response); + } + }); + } +}; + +function hideBasic() { + $("#basicInfoTab").hide(); + initParameterTab(); + $("#templateParameterTab").show(); +} + +function showBasic() { + $("#basicInfoTab").show(); + $("#templateParameterTab").hide(); +} + +function serviceTemplateChanged() { + templateParameters.changed = true; +} + +/** + * init parameter tab + * @returns + */ +function initParameterTab() { + // Service template was not changed. Do not re-initiate the parameter tab. + if (!templateParameters.changed) { + return; + } + var templateId = $("#svcTempl").val(); + if ('select' === templateId) { + document.getElementById("templateParameterTab").innerHTML = ''; + return; + } + $.when(fetchCreateParameters(templateId)) + .then(function(createParam) { + // set the create param object + templateParameters.paramJsonObj = createParam.parameters; + // convert the create param to UI. + var components = convertCreateParamsToUI('create', createParam.parameters); + document.getElementById("templateParameterTab").innerHTML = components; + templateParameters.changed = false; + }); +} + +/** + * generate the template to create parameters object + * + * @param templateId + * the template id + * @returns + */ +function fetchCreateParameters(templateId) { + //return $.getJSON("./conf/queryCreateParams.json"); + var uri = '/openoapi/servicegateway/v1/createparameters/' + templateId; + return $.ajax({ + type : "GET", + url : uri + }); +} + +/** + * convert the template params obj to html UI string + * + * @param identify the object identify, it should be '' when called + * @return the html component string + */ +function convertCreateParamsToUI(identify, createParam) { + var components = ''; + // convert host to UI + if (undefined != createParam.domainHost && 'enum' === createParam.domainHost.type) { + components = components + + generateParamComponent(createParam.nodeType, identify, + createParam.domainHost, false); + } + // convert own param to UI + createParam.additionalParamForNs + .forEach(function(param) { + components = components + + generateParamComponent(createParam.nodeType, + identify, param, false); + }); + // convert segments to UI + createParam.segments.forEach(function(segment) { + // each segment in a field set. + components = components + '<fieldset style="margin-left:25px;"><legend>' + + segment.nodeTemplateName + '</legend>'; + // the identify for segment + var segmentIdentify = '' == identify ? segment.nodeTemplateName + : identify + '_' + segment.nodeTemplateName; + // convert segment to UI + components = components + + convertCreateParamsToUI(segmentIdentify, segment); + components = components + '</fieldset>'; + }); + return components; +} + + +/** + * for each required parameter it could not be empty + * @param identify the identify of a segment + * @param createParam the create param object + * @returns the check result + */ +function checkInputs(identify, createParam) { + //check domain host + if (undefined != createParam.domainHost && 'enum' === createParam.domainHost.type) { + var value = collectParamValue(identify, createParam.domainHost); + if ('select' == value) { + var name = getParamLabel(createParam.nodeType, createParam.domainHost); + alert( name + ' is required.') + return false; + } + } + // check parameters + for(var i= 0; i < createParam.additionalParamForNs.length; i++){ + var param = createParam.additionalParamForNs[i]; + var value = collectParamValue(identify, param); + if(param.required && ('' === value || ('enum' == param.type && 'select' == value))){ + // the param resource key is nodeType.paramName + var name = getParamLabel(createParam.nodeType, param); + alert(name + ' is required.') + return false; + } + } + // get segments param value from UI + var segmentcheckResult = true; + for(var i= 0; i < createParam.segments.length; i++){ + var segment = createParam.segments[i]; + // the identify for segment + var segmentIdentify = '' == identify ? segment.nodeTemplateName + : identify + '_' + segment.nodeTemplateName; + segmentcheckResult = checkInputs(segmentIdentify, segment); + if (!segmentcheckResult) { + break; + } + } + return segmentcheckResult; +} + + +/** + * convert the template params obj to html UI string + * + * @param identify the object identify, it should be different every time + * @return the html component string + */ +function collectCreateParamfromUI(parentHost,identify, createParam) { + // the create params used for create msg + var paramSentObj = { + domainHost:'', + nodeTemplateName:'', + nodeType:'', + segments:[], + additionalParamForNs:{} + }; + // get the domain value + if (undefined != createParam.domainHost && 'enum' === createParam.domainHost.type) { + var domain = collectParamValue(identify, createParam.domainHost); + paramSentObj.domainHost = collectParamValue(identify, createParam.domainHost) + } + //if parent domainHost is not '' and local domain host is'', it should be setted as parent + if('' != parentHost && '' == paramSentObj.domainHost){ + paramSentObj.domainHost = parentHost; + } + paramSentObj.nodeTemplateName = createParam.nodeTemplateName; + paramSentObj.nodeType = createParam.nodeType; + + // get own param value from UI + createParam.additionalParamForNs.forEach(function(param) { + paramSentObj.additionalParamForNs[param.name] = collectParamValue(identify, param); + }); + // get segments param value from UI + createParam.segments.forEach(function(segment) { + // the identify for segment + var segmentIdentify = '' == identify ? segment.nodeTemplateName + : identify + '_' + segment.nodeTemplateName; + var segmentObj = collectCreateParamfromUI(paramSentObj.domainHost, segmentIdentify, segment); + paramSentObj.segments.push(segmentObj); + }); + return paramSentObj; +} + +/** + * get a param value + * @param identify the identify of a segment + * @param param the param object + * @returns the value of the param + */ +function collectParamValue(identify, param) { + var value = $('#' + getParamId(identify, param)).val(); + return value; +} + +/** + * get the param id in ui + * @param identify + * @param param + * @returns + */ +function getParamId(identify, param) { + return '' ===identify ? param.name : identify + '_' + param.name; +} + +/** + * get the resource string of a param. + * @param nodeType node type + * @param param param object + * @returns resource string + */ +function getParamLabel(nodeType, param) { + var name = $.i18n.prop(nodeType + '.' + param.name); + if (name.length === 0 || name.slice(0, 1) === '[') { + name = param.name; + } + return name; +} +/** + * convert combox component + * + * @param inputPara + * @param items + * @param stringReadOnly + * @returns + */ +function generateParamComponent(nodeType, identify, param, strReadOnly) { + // the param resource key is nodeType.paramName + var name = getParamLabel(nodeType, param); + var id = getParamId(identify,param); + var component = ''; + if (param.type === 'string') { + component = '<div class="mT15 form-group" style="margin-left:0px;">' + + '<label class="col-sm-5 control-label">' + + '<span>' + name + '</span>' + generateRequiredLabel(param) + + '</label>' + + '<div class="col-sm-5"><input type="text" id="' + id + + '" name="parameter description" class="form-control" placeholder="' + + name + '" value="' + param.defaultValue; + if(strReadOnly){ + component = component + '" readonly="' + strReadOnly + '"/>'+ '</div></div>'; + }else{ + component = component + '"/>'+ '</div></div>'; + } + + } else if (param.type === 'enum') { + component = '<div class="form-group" style="margin-left:0px;margin-bottom:5px;">' + + '<label class="col-sm-5 control-label">' + + '<span>' + name + '</span>' + + '<span class="required">*</span>' + + '</label>' + + '<div class="col-sm-5">' + + '<select class="form-control" style ="padding-top: 0px;padding-bottom: 0px;"' + + ' id="' + id + '" name="' + param.name + '" value="' + param.defaultValue + + '">' + + this.transformToOptions(param.range) + + '</select></div></div>'; + } + 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 = '<option value="select">--select--</option>'; + var i; + for ( var key in items) { + var option = '<option value="' + key + '">' + items[key] + '</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 = '<span class="required">*</span>'; + } + 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 + '<div class="mT15 form-group"><fieldset style="margin-left:25px;"><legend>' + + segment.nodeTemplateName + '</legend>'; + // 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 + '</fieldset></div>'; + }); + 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 + }); +} |