Change the coding on the new sg framework
[vnfsdk/refrepo.git] / portal-lifecyclemgr / src / main / webapp / lifecyclemgr / js / gsolcm.js
index da93f85..0976d01 100644 (file)
@@ -1,5 +1,5 @@
 /*\r
- * Copyright 2016 ZTE Corporation.\r
+ * Copyright 2016-2017 ZTE Corporation.\r
  *\r
  * Licensed under the Apache License, Version 2.0 (the "License");\r
  * you may not use this file except in compliance with the License.\r
  * limitations under the License.\r
  */\r
 var templateParameters = {\r
-    changed: true,\r
-    parameters: [],\r
-    vimInfos: []\r
+       changed : true,\r
+       // the create params used for ui\r
+       paramJsonObj : {}\r
 };\r
 \r
-var lcmHandler = function () {\r
-    this._addOwnEvents();\r
-    jQuery.i18n.properties({\r
-        language:'en-US',\r
-        name:'lcm-template-parameters-i18n',\r
-        path:'i18n/',\r
-        mode:'map'\r
-    });\r
+var lcmHandler = function() {\r
+       this._addOwnEvents();\r
+       jQuery.i18n.properties({\r
+               language : 'en-US',\r
+               name : 'lcm-template-parameters-i18n',\r
+               path : 'i18n/',\r
+               mode : 'map'\r
+       });\r
 };\r
 \r
 lcmHandler.prototype = {\r
-    _addOwnEvents: function () {\r
-        $('#createNS').click(this.okAction);\r
-    },\r
-    okAction: function () {\r
-       if(!checkLocation(templateParameters.parameters)) {\r
-               alert('Location must be selected in Template Parameters');\r
-               return;\r
-       }\r
-        $.isLoading({ text: "Creating service..." });\r
-        var serviceInstance = {\r
-            serviceTemplateId: $("#svcTempl").val(),\r
-            serviceName: $('#svcName').val(),\r
-            description: $('#svcDesc').val(),\r
-            inputParameters: collectServiceParameters(templateParameters.parameters)\r
-        };\r
-        var gatewayService = '/openoapi/servicegateway/v1/services';\r
-        $.when(\r
-            fetchServiceTemplateBy(serviceInstance.serviceTemplateId)\r
-        ).then(\r
-            function(template) {\r
-                serviceInstance.templateName = template.name;\r
-                serviceInstance.serviceType = template.serviceType;\r
-                return createNetworkServiceInstance(template, serviceInstance, gatewayService);\r
-            }\r
-        ).then(\r
-            function(response) {\r
-                $.isLoading('hide');\r
-                if(response.status === 'success') {\r
-                    updateTable(response.instance);\r
-                    $('#vmAppDialog').removeClass('in').css('display', 'none');\r
-                } else {\r
-                    showErrorMessage('Create service failed', response.errorResult);\r
-                }\r
-            }\r
-        );\r
-    }\r
-};\r
-\r
-function showErrorMessage(title, result) {\r
-    var info = '<br/>' + '<h5>' + title + '</h5><hr/>';\r
-    info = info + '<h6>Status: ' + result.status + '</h6><p/>';\r
-    info = info + '<h6>Description: </h6>';\r
-    if(result.statusDescription.forEach === undefined) {\r
-        info = info + '<h6>' + result.statusDescription + '</h6><p/>';\r
-    } else {\r
-        result.statusDescription.forEach(function(message) {\r
-            info = info + '<h6>' + message + '</h6><p/>';\r
-        });    \r
-    }\r
-    info = info + '<h6>Error code: '+ result.errorCode + '</h6>';\r
-    $.bootstrapGrowl(info, {\r
-        type: 'danger',\r
-        align: 'center',\r
-        width: "auto",\r
-        delay: 10000,\r
-        allow_dismiss: true\r
-    });\r
-}\r
-\r
-function checkLocation(parameters) {\r
-       var checkPass = true;\r
-       var i = 0;\r
-       for(i = 0; i < parameters.length; i++) {\r
-               if(parameters[i].type === 'location') {\r
-                       var value = $('#' + parameters[i].id).val();\r
-                       if(value === undefined || value === 'select') {\r
-                               checkPass = false;\r
-                       }\r
+       _addOwnEvents : function() {\r
+               $('#createNS').click(this.okAction);\r
+       },\r
+       okAction : function() {\r
+               if (!checkInputs('create', templateParameters.paramJsonObj)) {\r
+                       return;\r
                }\r
+               var sengMsgObj = collectCreateParamfromUI('', 'create', templateParameters.paramJsonObj);\r
+               var gatewayService = '/openoapi/servicegateway/v1/services';\r
+               $.when(createServiceInstance(sengMsgObj))\r
+               .then(function(response) {\r
+                       if (response.status === 'finished') {\r
+                               $.when(queryService()).then(function(serviceInstance){                                  \r
+                                   $('#sai').bootstrapTable("append", serviceInstance);\r
+                               });\r
+                               $('#vmAppDialog').removeClass('in').css('display','none');\r
+                       } else {\r
+                               showErrorMessage('Create service failed',response);\r
+                       }\r
+               });\r
        }\r
-       return checkPass;\r
-}\r
+};\r
 \r
+/**\r
+ * init parameter tab\r
+ * @returns\r
+ */\r
 function initParameterTab() {\r
        // Service template was not changed. Do not re-initiate the parameter tab.\r
-    if (!templateParameters.changed) {\r
-        return;\r
-    }\r
-    var templateId = $("#svcTempl").val();\r
-    if ('select' === templateId) {\r
-        document.getElementById("templateParameterTab").innerHTML = '';\r
-        return;\r
-    }\r
-       $.when(\r
-               fetchServiceTemplateBy(templateId)\r
-       ).then(\r
-           function(template) {\r
-               if(template.serviceType === 'GSO') {\r
-                       return fetchGsoTemplateInputParameters(templateId, template);\r
-               } else if(template.serviceType === 'NFVO') {\r
-                       return fetchNfvoTemplateInputParameters(templateId, template);\r
-               } else if(template.serviceType === 'SDNO') {\r
-                       return fetchSdnoTemplateInputParameters(templateId, template);\r
-               }\r
-           }\r
-       ).then(\r
-           function(parameters) {\r
-               var components = transformToComponents(parameters);\r
-               document.getElementById("templateParameterTab").innerHTML = components;\r
-           }\r
-       );\r
-}\r
-\r
-function fetchServiceTemplateBy(templateId) {\r
-    var defer = $.Deferred();\r
-    var serviceTemplateUri = '/openoapi/catalog/v1/servicetemplates/' + templateId;\r
-    var template = {};\r
-    $.when(\r
-        $.ajax({\r
-            type: "GET",\r
-            url: serviceTemplateUri,\r
-            contentType: "application/json"\r
-        })\r
-    ).then(\r
-        function(response) {\r
-            template.name = response.templateName;\r
-            template.gsarId = response.csarId;\r
-            template.id = response.id;\r
-            template.nodeType = '';\r
-            return fetchCsar(template.gsarId);\r
-        }\r
-    ).then(\r
-        function(response) {\r
-            if(response.type === 'GSAR') {\r
-                template.serviceType = 'GSO';\r
-            } else if(response.type === 'NSAR' || response.type === 'NFAR') {\r
-                template.serviceType = 'NFVO';\r
-            } else if(response.type === 'SSAR') {\r
-                template.serviceType = "SDNO";\r
-            }\r
-            defer.resolve(template)\r
-        }\r
-    );\r
-    return defer;\r
-}\r
-\r
-function fetchCsar(csarId) {\r
-       var queryCsarUri = '/openoapi/catalog/v1/csars/' + csarId;\r
-       return $.ajax({\r
-               type: "GET",\r
-               url: queryCsarUri,\r
-               contentType: "application/json"\r
+       if (!templateParameters.changed) {\r
+               return;\r
+       }\r
+       var templateId = $("#svcTempl").val();\r
+       if ('select' === templateId) {\r
+               document.getElementById("templateParameterTab").innerHTML = '';\r
+               return;\r
+       }\r
+       $.when(fetchCreateParameters(templateId))\r
+       .then(function(createParam) {\r
+               // set the create param object\r
+               templateParameters.paramJsonObj = createParam.parameters;\r
+               // convert the create param to UI.\r
+               var components = convertCreateParamsToUI('create', createParam.parameters);\r
+               document.getElementById("templateParameterTab").innerHTML = components;\r
+               templateParameters.changed = false;\r
        });\r
 }\r
 \r
-function fetchGsoTemplateInputParameters(templateId, template) {\r
-       var defer = $.Deferred();\r
-    $.when(\r
-        fetchTemplateParameterDefinitions(templateId),\r
-        fetchGsoNestingTemplateParameters(templateId),\r
-        fetchVimInfo(),\r
-        fetchSdnController()\r
-    ).then(\r
-        function (templateParameterResponse, nestingTempatesParas, vimInfoResponse, sdnControllersResponse) {\r
-            var inputs = templateParameterResponse[0].inputs.map(function(input) {\r
-                input.showName = input.name;\r
-                if(template.nodeType === null || template.nodeType === undefined || template.nodeType.length === 0) {\r
-                    input.i18nKey = input.name;    \r
-                } else {\r
-                    input.i18nKey = template.nodeType + '.' +input.name;    \r
-                }\r
-                return input;\r
-            });\r
-               var inputParas = concat(inputs, nestingTempatesParas);\r
-               var vims = translateToVimInfo(vimInfoResponse[0]);\r
-            var sdnControllers = translateToSdnControllers(sdnControllersResponse[0]);\r
-            templateParameters = translateToTemplateParameters(inputParas, vims, sdnControllers);\r
-            defer.resolve(templateParameters);\r
-        }\r
-    );\r
-    return defer;\r
-}\r
-\r
-function fetchGsoNestingTemplateParameters(templateId) {\r
-       var defer = $.Deferred();\r
-       $.when(\r
-               fetchNodeTemplates(templateId)\r
-       ).then(\r
-           function(nodeTemplates) {\r
-               var count = nodeTemplates.length;\r
-               if(count ===0) {\r
-                       defer.resolve([]);\r
-                       return;\r
-               }\r
-               var nestingParasAggregatation = aggregate(count, function(nestingParas) {\r
-                       defer.resolve(nestingParas);\r
-               });\r
-               nodeTemplates.forEach(function(nodeTemplate) {\r
-                       var nestingNodeUri = '/openoapi/catalog/v1/servicetemplates/nesting?nodeTypeIds=' + nodeTemplate.type;\r
-                       $.when(\r
-                               $.ajax({\r
-                                       type: "GET",\r
-                                       url: nestingNodeUri\r
-                               })\r
-                       ).then(\r
-                           function(serviceTemplates) {\r
-                               var nodeAggregatation = aggregate(serviceTemplates.length, function(oneNodeParameters) {\r
-                                       nestingParasAggregatation.notify(oneNodeParameters);\r
-                               });\r
-                               serviceTemplates.forEach(function(serviceTemplate) {\r
-                            if(serviceTemplate === null || serviceTemplate === undefined || serviceTemplate.inputs === undefined || serviceTemplate.csarId === undefined)\r
-                            {\r
-                                nodeAggregatation.notify([]);\r
-                                return;\r
-                            }\r
-                                       var inputs = serviceTemplate.inputs.map(function(input) {\r
-                                input.showName = input.name;\r
-                                               input.name = nodeTemplate.type + '.' + input.name;\r
-                                input.i18nKey = nodeTemplate.type + '.' + input.name;\r
-                                               return input;\r
-                                       });\r
-                                       $.when(\r
-                                               fetchCsar(serviceTemplate.csarId)\r
-                                       ).then(\r
-                                           function(response) {\r
-                                               if(response.type === 'NSAR' || response.type === 'NFAR') {\r
-                                                       inputs.push({\r
-                                                               name: nodeTemplate.type + '.location',\r
-                                                               type: 'location',\r
-                                                               description: nodeTemplate.name + ' Location',\r
-                                                               required: 'true',\r
-                                            showName: nodeTemplate.name + ' Location',\r
-                                            i18nKey: nodeTemplate.name + ' Location'\r
-                                                       });\r
-                                        inputs.push({\r
-                                            name: nodeTemplate.type + '.sdncontroller',\r
-                                            type: 'sdncontroller',\r
-                                            description: nodeTemplate.name + ' SDN Controller',\r
-                                            required: 'true',\r
-                                            showName: nodeTemplate.name + ' SDN Controller',\r
-                                            i18nKey: nodeTemplate.name + ' SDN Controller'\r
-                                        });\r
-                                    }\r
-                                               nodeAggregatation.notify(inputs);\r
-                                           }\r
-                                       );\r
-                               });\r
-                           }\r
-                       );\r
-               });\r
-           }\r
-       );\r
-       return defer;\r
-}\r
-\r
-function fetchNodeTemplates(templateId) {\r
-       var nodeTemplateUri = '/openoapi/catalog/v1/servicetemplates/'+ templateId +'/nodetemplates';\r
+/**\r
+ * generate the template to create parameters object\r
+ * \r
+ * @param templateId\r
+ *            the template id\r
+ * @returns\r
+ */\r
+function fetchCreateParameters(templateId) {\r
+       //return $.getJSON("./conf/queryCreateParams.json");\r
+       var uri = '/openoapi/servicegateway/v1/createparameters/' + templateId;\r
        return $.ajax({\r
-               type: "GET",\r
-               url: nodeTemplateUri\r
+               type : "GET",\r
+               url : uri\r
        });\r
 }\r
 \r
-function aggregate(n, deferFun) {\r
-       var aggregation = $.Deferred();\r
-       var count = n;\r
-       var result = [];\r
-       aggregation.progress(function(array) {\r
-               pushAll(result, array);\r
-               count--;\r
-               if(count === 0) {\r
-                       deferFun(result);\r
-               }\r
+/**\r
+ * convert the template params obj to html UI string\r
+ * \r
+ * @param identify the object identify, it should be '' when called\r
+ * @return the html component string\r
+ */\r
+function convertCreateParamsToUI(identify, createParam) {\r
+       var components = '';\r
+       // convert host to UI\r
+       if (undefined !=  createParam.domainHost && 'enum' === createParam.domainHost.type) {\r
+               components = components\r
+                               + generateParamComponent(createParam.nodeType, identify,\r
+                                               createParam.domainHost, false);\r
+       }\r
+       // convert own param to UI\r
+       createParam.additionalParamForNs\r
+                       .forEach(function(param) {\r
+                               components = components\r
+                                               + generateParamComponent(createParam.nodeType,\r
+                                                               identify, param, false);\r
+                       });\r
+       // convert segments to UI\r
+       createParam.segments.forEach(function(segment) {\r
+               // each segment in a field set.\r
+               components = components + '<fieldset style="margin-left:25px;"><legend>'\r
+                               + segment.nodeTemplateName + '</legend>';\r
+               // the identify for segment\r
+               var segmentIdentify = '' == identify ? segment.nodeTemplateName\r
+                               : identify + '_' + segment.nodeTemplateName;\r
+               // convert segment to UI\r
+               components = components\r
+                               + convertCreateParamsToUI(segmentIdentify, segment);\r
+               components = components + '</fieldset>';\r
        });\r
-       return aggregation;\r
-}\r
-\r
-function concat(array1, array2) {\r
-       var result = [];\r
-       pushAll(result, array1);\r
-       pushAll(result, array2);\r
-       return result;\r
-}\r
-\r
-function pushAll(acc, array) {\r
-       var result = acc;\r
-       array.forEach(function(element) {\r
-               result.push(element)\r
-       })\r
-       return result;\r
-}\r
-\r
-function translateToTemplateParameters(inputs, vims, controllers) {\r
-    var inputParameters = [];\r
-    var i;\r
-    for (i = 0; i < inputs.length; i += 1) {\r
-        inputParameters[i] = {\r
-            name: inputs[i].name,\r
-            type: inputs[i].type,\r
-            description: inputs[i].description,\r
-            defaultValue: inputs[i].defaultValue,\r
-            required: inputs[i].required,\r
-            id: 'parameters_' + i,\r
-            value: inputs[i].defaultValue || '',\r
-            showName: inputs[i].showName\r
-        };\r
-    }\r
-    return {changed: false, parameters: inputParameters, vimInfos: vims, sdnControllers: controllers};\r
-}\r
-\r
-function fetchNfvoTemplateInputParameters(templateId, template) {\r
-       var defer = $.Deferred();\r
-       $.when(\r
-               fetchTemplateParameterDefinitions(templateId),\r
-               fetchVimInfo(),\r
-        fetchSdnController()\r
-       ).then(\r
-           function (templateParameterResponse, vimInfoResponse, sdnControllerResponse) {\r
-               var vims = translateToVimInfo(vimInfoResponse[0]);\r
-            var sdnControllers = translateToSdnControllers(sdnControllerResponse[0]);\r
-               var inputParas = templateParameterResponse[0].inputs;\r
-            inputParas = inputParas.map(function(input) {\r
-                input.showName = input.name;\r
-                input.i18nKey = template.nodeType + '.' + input.name;\r
-                return input;\r
-            });\r
-               inputParas.push({\r
-                       name: 'location',\r
-                       type: 'location',\r
-                       description: 'Location',\r
-                       required: 'true',\r
-                showName: 'Location',\r
-                i18nKey: 'Location'\r
-               });\r
-            inputParas.push({\r
-                name: 'sdncontroller',\r
-                type: 'sdncontroller',\r
-                description: 'SDN Controller',\r
-                required: 'true',\r
-                showName: 'SDN Controller',\r
-                i18nKey: 'SDN Controller'\r
-            });\r
-               templateParameters = translateToTemplateParameters(inputParas, vims, sdnControllers);\r
-            defer.resolve(templateParameters); \r
-           }\r
-       );\r
-       return defer;\r
+       return components;\r
 }\r
 \r
-function fetchSdnoTemplateInputParameters(templateId, template) {\r
-       var defer = $.Deferred();\r
-       $.when(\r
-               fetchTemplateParameterDefinitions(templateId)\r
-       ).then(\r
-           function (templateParameterResponse) {\r
-            var inputs = templateParameterResponse.inputs.map(function(input) {\r
-                input.showName = input.name;\r
-                input.i18nKey = template.nodeType + '.' + input.name;\r
-                return input;\r
-            })\r
-               templateParameters = translateToTemplateParameters(inputs, [], []);\r
-            defer.resolve(templateParameters); \r
-           }\r
-       );\r
-       return defer;\r
-}\r
 \r
-function fetchTemplateParameterDefinitions(templateId) {\r
-    var queryParametersUri = '/openoapi/catalog/v1/servicetemplates/' + templateId + '/parameters';\r
-    return $.ajax({\r
-        type: "GET",\r
-        url: queryParametersUri\r
-    });\r
+/**\r
+ * for each required parameter it could not be empty\r
+ * @param identify the identify of a segment\r
+ * @param createParam the create param object \r
+ * @returns the check result\r
+ */\r
+function checkInputs(identify, createParam) {\r
+       //check domain host\r
+       if (undefined !=  createParam.domainHost && 'enum' === createParam.domainHost.type) {\r
+               var value = collectParamValue(identify, createParam.domainHost);\r
+               if ('select' == value) {\r
+                       var name = getParamLabel(createParam.nodeType, createParam.domainHost);\r
+                       alert( name + ' is required.')\r
+                       return false;\r
+               }\r
+       }\r
+       // check parameters\r
+       for(var i= 0; i < createParam.additionalParamForNs.length; i++){        \r
+               var param = createParam.additionalParamForNs[i];\r
+               var value = collectParamValue(identify, param);\r
+               if(param.required && ('' === value || ('enum' == param.type && 'select' == value))){\r
+                       // the param resource key is nodeType.paramName\r
+                       var name = getParamLabel(createParam.nodeType, param);\r
+                       alert(name + ' is required.')\r
+                       return false;\r
+               }\r
+       }\r
+       // get segments param value from UI\r
+       var segmentcheckResult = true;\r
+       for(var i= 0; i < createParam.segments.length; i++){\r
+               var segment = createParam.segments[i];\r
+               // the identify for segment\r
+               var segmentIdentify = '' == identify ? segment.nodeTemplateName\r
+                               : identify + '_' + segment.nodeTemplateName;\r
+               segmentcheckResult = checkInputs(segmentIdentify, segment);\r
+               if (!segmentcheckResult) {\r
+                       break;\r
+               }\r
+       }\r
+    return segmentcheckResult;\r
 }\r
 \r
-function fetchVimInfo() {\r
-    var vimQueryUri = '/openoapi/extsys/v1/vims';\r
-    return $.ajax({\r
-        type: "GET",\r
-        url: vimQueryUri\r
-    });\r
-}\r
 \r
-function fetchSdnController() {\r
-    var sdnControllerUri = '/openoapi/extsys/v1/sdncontrollers';\r
-    return $.ajax({\r
-        type: "GET",\r
-        url: sdnControllerUri\r
-    });\r
-}\r
+/**\r
+ * convert the template params obj to html UI string\r
+ * \r
+ * @param identify the object identify, it should be different every time\r
+ * @return the html component string\r
+ */\r
+function collectCreateParamfromUI(parentHost,identify, createParam) {\r
+       // the create params used for create msg\r
+       var paramSentObj = {\r
+                       domainHost:'',\r
+                       nodeTemplateName:'',\r
+                       nodeType:'',\r
+                       segments:[],\r
+                       additionalParamForNs:{}\r
+       };  \r
+       // get the domain value\r
+       if (undefined !=  createParam.domainHost && 'enum' === createParam.domainHost.type) {\r
+               var domain = collectParamValue(identify, createParam.domainHost);\r
+               paramSentObj.domainHost = collectParamValue(identify, createParam.domainHost)\r
+       }\r
+       //if parent domainHost is not '' and local domain host is'', it should be setted as parent\r
+       if('' != parentHost && '' == paramSentObj.domainHost){\r
+               paramSentObj.domainHost = parentHost;\r
+       }\r
+       paramSentObj.nodeTemplateName = createParam.nodeTemplateName;\r
+       paramSentObj.nodeType = createParam.nodeType;\r
 \r
-function translateToVimInfo(vims) {\r
-       return vims.map(function (vim) {\r
-               return {\r
-                       optionId: vim.vimId,\r
-                       optionName: vim.name\r
-               };\r
+       // get own param value from UI\r
+       createParam.additionalParamForNs.forEach(function(param) {\r
+               paramSentObj.additionalParamForNs[param.name] = collectParamValue(identify, param);\r
        });\r
-}\r
-\r
-function translateToSdnControllers(controllers) {\r
-    return controllers.map(function(controller) {\r
-        return {\r
-            optionId: controller.sdnControllerId,\r
-            optionName: controller.name\r
-        };\r
-    });\r
-}\r
-\r
-function transformToComponents(templateParas) {\r
-       var inputs = templateParas.parameters;\r
-       var vimInfos = templateParas.vimInfos;\r
-    var sdnControllers = templateParas.sdnControllers;\r
-       var components = '';\r
-       inputs.forEach(function (inputPara) {\r
-               if(inputPara.type === 'location') {\r
-                       components = components + generateComboxComponent(inputPara, vimInfos);\r
-               } else if(inputPara.type === 'sdncontroller') {\r
-            components = components + generateComboxComponent(inputPara, sdnControllers);\r
-        } else {\r
-                       components = components + generateComponent(inputPara);\r
-               }\r
+       // get segments param value from UI\r
+       createParam.segments.forEach(function(segment) {\r
+               // the identify for segment\r
+               var segmentIdentify = '' == identify ? segment.nodeTemplateName\r
+                               : identify + '_' + segment.nodeTemplateName;\r
+               var segmentObj = collectCreateParamfromUI(paramSentObj.domainHost, segmentIdentify, segment);\r
+               paramSentObj.segments.push(segmentObj);\r
        });\r
-       return components;\r
+       return paramSentObj;\r
 }\r
 \r
-function generateComboxComponent(inputPara, items) {\r
-    var component = '<div class="form-group" style="margin-left:25px;margin-bottom:15px;">' +\r
-        '<label class="col-sm-3 control-label">' +\r
-        '<span>'+ inputPara.showName +'</span>' +\r
-        '<span class="required">*</span>' +\r
-        '</label>' +\r
-        '<div class="col-sm-7">' +\r
-        '<select class="form-control" style ="padding-top: 0px;padding-bottom: 0px;"' +\r
-        ' id="' + inputPara.id + '" name="'+ inputPara.name +'">' +\r
-        transformToOptions(items) +\r
-        '</select></div></div>';\r
-    return component;\r
+/**\r
+ * get a param value\r
+ * @param identify the identify of a segment\r
+ * @param param the param object \r
+ * @returns the value of the param\r
+ */\r
+function collectParamValue(identify, param) {\r
+       var value = $('#' + getParamId(identify, param)).val();\r
+       return value;\r
 }\r
 \r
-function transformToOptions(items) {\r
-    var options = '<option value="select">--select--</option>';\r
-    var i;\r
-    for (i = 0; i < items.length; i += 1) {\r
-        var option = '<option value="' + items[i].optionId + '">' + items[i].optionName + '</option>';\r
-        options = options + option;\r
-    }\r
-    return options;\r
+/**\r
+ * get the param id in ui\r
+ * @param identify\r
+ * @param param\r
+ * @returns\r
+ */\r
+function getParamId(identify, param) {\r
+       return '' ===identify ? param.name : identify + '_' + param.name;\r
 }\r
 \r
-function generateComponent(inputPara) {\r
-       var component = '<div class="mT15 form-group" style="margin-left:25px;">' +\r
-            '<label class="col-sm-3 control-label">' +\r
-            '<span>' + showName(inputPara) + '</span>' + generateRequiredLabel(inputPara) +\r
-            '</label>' +\r
-            '<div class="col-sm-7">' +\r
-            '<input type="text" id="' + inputPara.id + '" name="parameter description" class="form-control" placeholder="' +\r
-            showName(inputPara) + '" value="' + inputPara.value + '" />' +\r
-            '</div></div>';\r
-    return component;\r
+/**\r
+ * get the resource string of a param.\r
+ * @param nodeType node type\r
+ * @param param param object\r
+ * @returns resource string\r
+ */\r
+function getParamLabel(nodeType, param) {\r
+       var name = $.i18n.prop(nodeType + '.' + param.name);\r
+       if (name.length === 0 || name.slice(0, 1) === '[') {\r
+               name = param.name;\r
+       }\r
+       return name;\r
+}\r
+/**\r
+ * convert combox component\r
+ * \r
+ * @param inputPara\r
+ * @param items\r
+ * @param stringReadOnly\r
+ * @returns\r
+ */\r
+function generateParamComponent(nodeType, identify, param, strReadOnly) {\r
+       // the param resource key is nodeType.paramName\r
+       var name = getParamLabel(nodeType, param);\r
+       var id = getParamId(identify,param);\r
+       var component = '';\r
+       if (param.type === 'string') {\r
+               component = '<div class="mT15 form-group" style="margin-left:0px;">'\r
+                               + '<label class="col-sm-5 control-label">'\r
+                               + '<span>' + name + '</span>' + generateRequiredLabel(param)\r
+                               + '</label>' \r
+                               + '<div class="col-sm-5"><input type="text" id="' + id \r
+                               + '" name="parameter description" class="form-control" placeholder="'\r
+                               + name + '" value="' + param.defaultValue;\r
+               if(strReadOnly){\r
+                       component = component + '" readonly="' + strReadOnly + '"/>'+ '</div></div>';\r
+               }else{\r
+                       component = component + '"/>'+ '</div></div>';\r
+               }\r
+                               \r
+       } else if (param.type === 'enum') {\r
+               component = '<div class="form-group" style="margin-left:0px;margin-bottom:5px;">'\r
+                               + '<label class="col-sm-5 control-label">'\r
+                               + '<span>' + name + '</span>'\r
+                               + '<span class="required">*</span>'\r
+                               + '</label>'\r
+                               + '<div class="col-sm-5">'\r
+                               + '<select class="form-control" style ="padding-top: 0px;padding-bottom: 0px;"'\r
+                               + ' id="' + id + '" name="' + param.name + '" value="' + param.defaultValue \r
+                               + '">'\r
+                               + this.transformToOptions(param.range)\r
+                               + '</select></div></div>';\r
+       }\r
+       return component;\r
 }\r
 \r
-function showName(inputPara) {\r
-    var name = $.i18n.prop(inputPara.name)\r
-    if(name.length === 0 || name.slice(0, 1) === '[') {\r
-        name = inputPara.showName;\r
-    }\r
-    return name;\r
+/**\r
+ * transfer the enum range to html body\r
+ * @param items the map of the range\r
+ * @returns the html string\r
+ */\r
+function transformToOptions(items) {\r
+       var options = '<option value="select">--select--</option>';\r
+       var i;\r
+       for ( var key in items) {\r
+               var option = '<option value="' + key + '">' + items[key] + '</option>';\r
+               options = options + option;\r
+       }\r
+       return options;\r
 }\r
 \r
+/**\r
+ * generate required identify to html string\r
+ * @param parameter the parameter object\r
+ * @returns the html string \r
+ */\r
 function generateRequiredLabel(parameter) {\r
-    var requiredLabel = '';\r
-    if (parameter.required === 'true') {\r
-        requiredLabel = '<span class="required">*</span>';\r
-    }\r
-    return requiredLabel;\r
+       var requiredLabel = '';\r
+       if (parameter.required === 'true') {\r
+               requiredLabel = '<span class="required">*</span>';\r
+       }\r
+       return requiredLabel;\r
 }\r
 \r
-function createNetworkServiceInstance(template, serviceInstance, gatewayService) {\r
-    if (template.serviceType === 'GSO') {\r
-        return createGsoServiceInstance(gatewayService, serviceInstance, template);\r
-    } else if (template.serviceType === 'NFVO') {\r
-        return createNfvoServiceInstance(gatewayService, serviceInstance, template);\r
-    } else if (template.serviceType === 'SDNO') {\r
-        return createSdnoServiceInstance(gatewayService, serviceInstance);\r
-    }\r
+/**\r
+ * create service\r
+ * @param sengMsgObj the parameters\r
+ * @returns \r
+ */\r
+function createServiceInstance(sengMsgObj) {\r
+       var defer = $.Deferred();\r
+       var parameter = {\r
+               'service' : {\r
+                       'name' :  $('#svcName').val(),\r
+                       'description' : $('#svcDesc').val(),\r
+                       'serviceDefId' : '', //no need now, reserved\r
+                       'templateId' :  $("#svcTempl").val(),\r
+                       'parameters' : sengMsgObj\r
+               }\r
+       };\r
+       var serviceGatewayUri = '/openoapi/servicegateway/v1/services';\r
+       $.when($.ajax({\r
+               type : "POST",\r
+               url : serviceGatewayUri,\r
+               contentType : "application/json",\r
+               dataType : "json",\r
+               data : JSON.stringify(parameter)\r
+       }))\r
+       .then(function(response) {\r
+               return queryProgress('create service', response.service.serviceId,response.service.operationId);\r
+       }).then(function(result){\r
+               defer.resolve(result);\r
+       });\r
+       return defer;\r
 }\r
 \r
-function createGsoServiceInstance(gatewayService, serviceInstance, serviceTemplate) {\r
-    var defer = $.Deferred();\r
-    var gsoLcmUri = '/openoapi/gso/v1/services';\r
-    var parameter = {\r
-       'service': {\r
-               'name': serviceInstance.serviceName,\r
-               'description': serviceInstance.description,\r
-               'serviceDefId': serviceTemplate.gsarId,\r
-               'templateId': serviceInstance.serviceTemplateId,\r
-               'templateName': serviceTemplate.name,\r
-               'gatewayUri': gsoLcmUri,\r
-               'parameters': serviceInstance.inputParameters\r
+/**\r
+ * \r
+ * @param rowId\r
+ * @param row\r
+ * @returns\r
+ */\r
+function deleteService(rowId, row) {\r
+       var deleteHandle = function(result) {\r
+               if (result) {\r
+                       var serviceId = row.serviceId;\r
+                       var remove = function() {\r
+                               $('#sai').bootstrapTable('remove', {\r
+                                       field : 'serviceId',\r
+                                       values : [ serviceId ]\r
+                               });\r
+                       };\r
+                       var failFun = function(responseDesc) {\r
+                               $.isLoading("hide");\r
+                               showErrorMessage("Delete service failed", responseDesc);\r
+                       }\r
+                       $.when(deleteServiceInstance(serviceId))\r
+                       .then(function(response) {\r
+                               if (response.status === 'finished') {\r
+                                       remove();\r
+                               } else {\r
+                                       showErrorMessage('Create service failed',response);\r
+                               }\r
+                       });\r
+                       ;\r
        }\r
-    };\r
-    $.when($.ajax({\r
-        type: "POST",\r
-        url: gatewayService,\r
-        contentType: "application/json",\r
-        dataType: "json",\r
-        data: JSON.stringify(parameter)\r
-    })).then(function(response) {\r
-        if(response.result.status === 'success') {\r
-            serviceInstance.serviceId = response.serviceId;\r
-            var gsoServiceUri = '/openoapi/gso/v1/services/' + response.serviceId;\r
-            var timerDefer = $.Deferred();\r
-            var timeout = 3600000;\r
-            var fun = function() {\r
-                if(timeout === 0) {\r
-                    timerDefer.resolve({\r
-                        status: 'fail', \r
-                        statusDescription: 'Operation is timeout!', \r
-                        errorCode: ''\r
-                    });\r
-                    return;\r
-                }\r
-                timeout = timeout - 1000;\r
-                $.when(\r
-                    $.ajax({\r
-                        type: "GET",\r
-                        url: gsoServiceUri\r
-                    })\r
-                ).then(\r
-                    function(response) {\r
-                        if(response.result === 'success' || response.result === 'failed') {\r
-                            timerDefer.resolve(response);\r
-                        }\r
-                    }\r
-                );\r
-            };\r
-            var timerId = setInterval(fun, 1000);\r
-            $.when(timerDefer).then(\r
-                function(responseDesc) {\r
-                    clearInterval(timerId);\r
-                    if(responseDesc.result === 'success') {\r
-                        defer.resolve({status: 'success', instance: serviceInstance});\r
-                    } else {\r
-                        defer.resolve({\r
-                            status: 'fail', \r
-                            errorResult: {\r
-                                status: responseDesc.result, \r
-                                statusDescription: 'fail to create the service', \r
-                                errorCode: ''\r
-                            }});\r
-                    }\r
-                }\r
-             );\r
-        } else {\r
-            defer.resolve({status: 'fail', errorResult: {status:'fail', statusDescription: 'fail to create the service', errorCode: ''}});\r
-        }\r
-    });\r
-    return defer;\r
-}\r
-\r
-function createNfvoServiceInstance(gatewayService, serviceInstance, template) {\r
-    var nfvoLcmUri = '/openoapi/nslcm/v1';\r
-    serviceInstance.nsdId = template.id;\r
-    return createServiceInstance(gatewayService, nfvoLcmUri, serviceInstance);\r
-}\r
-\r
-function createSdnoServiceInstance(gatewayService, serviceInstance) {\r
-    var sdnoLcmUri = '/openoapi/sdnonslcm/v1';\r
-    serviceInstance.nsdId = serviceInstance.serviceTemplateId;\r
-    return createServiceInstance(gatewayService, sdnoLcmUri, serviceInstance);\r
-}\r
-\r
-function createServiceInstance(gatewayService, lcmUri, serviceInstance) {\r
-    var nsUri = lcmUri + '/ns';\r
-    var defer = $.Deferred();\r
-    var sParameter = {\r
-        'nsdId': serviceInstance.nsdId,\r
-        'nsName': serviceInstance.serviceName,\r
-        'description': serviceInstance.description,\r
-        'gatewayUri': nsUri\r
-    };\r
-    $.when($.ajax({\r
-        type: "POST",\r
-        url: gatewayService,\r
-        contentType: "application/json",\r
-        dataType: "json",\r
-        data: JSON.stringify(sParameter)\r
-    })).then(function(response) {\r
-        if(response.result.status === 'success') {\r
-            var nsInstanceId = response.serviceId;\r
-            serviceInstance.serviceId = nsInstanceId;\r
-            var initNsUrl = nsUri + '/' + nsInstanceId + '/instantiate';\r
-            var parameter = {\r
-                'gatewayUri': initNsUrl,\r
-                'nsInstanceId': nsInstanceId,\r
-                'additionalParamForNs': serviceInstance.inputParameters\r
-            };\r
-            return $.ajax({\r
-                type: "POST",\r
-                url: gatewayService,\r
-                contentType: "application/json",\r
-                dataType: "json",\r
-                data: JSON.stringify(parameter)\r
-            });\r
-        } else {\r
-            return response;\r
-        }\r
-    }).then(function(response) {\r
-        if(response.result.status === 'success') {\r
-            var jobId = response.serviceId;\r
-            var jobStatusUri = lcmUri + '/jobs/' + jobId;\r
-            var timerDefer = $.Deferred();\r
-            var timeout = 3600000;\r
-            var fun = function() {\r
-                if(timeout === 0) {\r
-                    timerDefer.resolve({\r
-                        status: 'fail', \r
-                        statusDescription: 'Operation is timeout!', \r
-                        errorCode: ''\r
-                    });\r
-                    return;\r
-                }\r
-                timeout = timeout - 1000;\r
-                $.when(\r
-                    $.ajax({\r
-                        type: "GET",\r
-                        url: jobStatusUri\r
-                    })\r
-                ).then(\r
-                    function(jobResponse) {\r
-                        var responseDesc = jobResponse.responseDescriptor;\r
-                        if(responseDesc.status === 'finished' || responseDesc.status === 'error') {\r
-                            timerDefer.resolve(responseDesc);\r
-                        }\r
-                    }\r
-                );\r
-            };\r
-            var timerId = setInterval(fun, 1000);\r
-            $.when(timerDefer).then(\r
-                function(responseDesc) {\r
-                    clearInterval(timerId);\r
-                    if(responseDesc.status === 'finished') {\r
-                        defer.resolve({status: 'success', instance: serviceInstance});\r
-                    } else {\r
-                        defer.resolve({\r
-                            status: 'fail', \r
-                            errorResult: {\r
-                                status: responseDesc.status, \r
-                                statusDescription: responseDesc.statusDescription, \r
-                                errorCode: responseDesc.errorCode\r
-                            }});\r
-                    }\r
-                }\r
-             );\r
-        } else {\r
-            defer.resolve({status: 'fail', errorResult: response.result});\r
-        }\r
-    });\r
-    return defer;\r
+       };\r
+       bootbox.confirm("Do you confirm to delete service?", deleteHandle);\r
 }\r
 \r
-\r
-function collectServiceParameters(parameters) {\r
-    var serviceParameters = {};\r
-    var i;\r
-    for (i = 0; i < parameters.length; i += 1) {\r
-       var value = $('#' + parameters[i].id).val();\r
-        serviceParameters[parameters[i].name] = value;\r
-    }\r
-    return serviceParameters;\r
+/**\r
+ * sent delete instance msg\r
+ * @param serviceId the service id\r
+ * @returns\r
+ */\r
+function deleteServiceInstance(serviceId) {\r
+       var defer = $.Deferred();\r
+       var deleteUrl = '/openoapi/servicegateway/v1/services/' + serviceId;\r
+       $.when($.ajax({\r
+               type : "DELETE",\r
+               url : deleteUrl,\r
+               contentType : "application/json",\r
+               dataType : "json",\r
+               data : JSON.stringify(parameter)\r
+       }))\r
+       .then(function(response) {\r
+               return queryProgress('delete service', serviceId,response.operationId);\r
+       }).then(function(result){\r
+               defer.resolve(result);\r
+       });\r
+       return defer;\r
 }\r
 \r
-function updateTable(serviceInstance) {\r
-    serviceInstance.createTime = formatDate(new Date());\r
-    $('#sai').bootstrapTable("append", serviceInstance);\r
-}\r
+/**\r
+ * query progress of the operation \r
+ * @param operation the operation string\r
+ * @param serviceId the service id\r
+ * @param operationId the operation id\r
+ * @returns\r
+ */\r
+function queryProgress(operation, serviceId, operationId) {\r
+       //show the progress dialog\r
+       $( "#idProgressTitle" ).text(operation);\r
+       $( "#progressContent" ).text('status:');                        \r
+       $( "#progressbar" ).attr("style","width: 0%");\r
+       $( "#progressDialog" ).modal({backdrop:'static', keyboard:false});      \r
+       //set a timer for query operation\r
+       var defer = $.Deferred();\r
+       var queryProgressUril = '/openoapi/servicegateway/v1/services/' + serviceId + '/operations/' + operationId;\r
+       var timerDefer = $.Deferred();\r
+       var timeout = 3600000;\r
+       var fun = function() {\r
+               if (timeout === 0) {\r
+                       timerDefer.resolve({\r
+                               status : 'error',\r
+                               reason : operation + ' timeout!',\r
+                       });\r
+                       return;\r
+               }\r
+               timeout = timeout - 1000;\r
+               $.when($.ajax({\r
+                       type : "GET",\r
+                       url : gsoServiceUri\r
+               }))\r
+               .then(function(response) {\r
+                       //update progress\r
+                       $( "#progressbar" ).attr("style","width: " + response.operation.progress.toString() + "%");\r
+                       $( "#progressValue" ).text(response.operation.progress.toString() + '%');\r
+                       $( "#progressContent" ).text('status: ' + response.operation.operationContent);                 \r
+                       if (response.operation.result == 'finished' || response.operation.result == 'error') {\r
+                               timerDefer.resolve({\r
+                                       status : response.operation.result ,\r
+                                       reason : response.operation.reason\r
+                               });\r
+                       }\r
+               });\r
+       };\r
+       var timerId = setInterval(fun, 1000);\r
+       $.when(timerDefer)\r
+       .then(function(responseDesc) {\r
+               clearInterval(timerId);\r
+               $('#progressDialog').modal('hide');\r
+               defer.resolve({\r
+                       status : responseDesc.status,\r
+                       reason : responseDesc.reason,\r
+                       serviceId:serviceId\r
+               });\r
 \r
-function formatDate(date) {\r
-    var year = date.getFullYear();\r
-    var month = date.getMonth() + 1;\r
-    var day = date.getDate();\r
-    var hh = date.getHours();\r
-    var mm = date.getMinutes();\r
-    var ss = date.getSeconds();\r
-    return year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;\r
+       });\r
+       return defer; \r
 }\r
 \r
-function deleteNe(rowId, row) {\r
-    var deleteHandle = function(result) {\r
-        if(result) {\r
-            $.isLoading({ text: "Deleting service..." });\r
-            var instanceId = row.serviceId;\r
-            var serviceType = row.serviceType;\r
-            var gatewayService = '/openoapi/servicegateway/v1/services/' + instanceId + '/terminate';\r
-            var remove = function () {\r
-                $.isLoading( "hide" );\r
-                $('#sai').bootstrapTable('remove', {field: 'serviceId', values: [instanceId]});\r
-            };\r
-            var failFun = function(responseDesc) {\r
-                $.isLoading( "hide" );\r
-                showErrorMessage("Delete service failed", responseDesc);\r
-            }\r
-            if(serviceType === 'GSO') {\r
-                deleteGsoServiceInstance(gatewayService, instanceId, remove, failFun);\r
-            } else if (serviceType === 'NFVO') {\r
-                var nfvoLcmUri = '/openoapi/nslcm/v1';\r
-                deleteNonGsoServiceInstance(gatewayService, nfvoLcmUri, instanceId, remove, failFun);\r
-            } else if (serviceType === 'SDNO') {\r
-                var sdnoLcmUri = '/openoapi/sdnonslcm/v1';\r
-                deleteNonGsoServiceInstance(gatewayService, sdnoLcmUri, instanceId, remove, failFun);\r
-            }\r
-        }\r
-    };\r
-    bootbox.confirm("Do you confirm to delete service?", deleteHandle);\r
-}\r
 \r
-function deleteGsoServiceInstance(gatewayService, instanceId, remove, failFun) {\r
-    var gsoLcmUri = '/openoapi/gso/v1/services';\r
-    $.when(\r
-        deleteNetworkServiceInstance(gatewayService, gsoLcmUri, instanceId)\r
-    ).then(\r
-        function(response) {\r
-            var gsoServiceUri = '/openoapi/gso/v1/services/toposequence/' + instanceId;\r
-            var timerDefer = $.Deferred();\r
-            var timeout = 3600000;\r
-            var fun = function() {\r
-                if(timeout === 0) {\r
-                    timerDefer.resolve({\r
-                        status: 'fail', \r
-                        statusDescription: 'Operation is timeout!', \r
-                        errorCode: ''\r
-                    });\r
-                    return;\r
-                }\r
-                timeout = timeout - 1000;\r
-                $.when(\r
-                    $.ajax({\r
-                        type: "GET",\r
-                        url: gsoServiceUri\r
-                    })\r
-                ).then(\r
-                    function(response) {\r
-                        if(response.length == 0) {\r
-                            timerDefer.resolve({status:'success', statusDescription: 'success to delete the service', errorCode: ''});\r
-                        }\r
-                    }\r
-                );\r
-            };\r
-            var timerId = setInterval(fun, 1000);\r
-            $.when(timerDefer).then(\r
-                function(responseDesc) {\r
-                    clearInterval(timerId);\r
-                    remove();\r
-                    if(responseDesc.status != 'success'){\r
-                       failFun({status: "fail", statusDescription: "delete service failed.", errorCode: "500"});\r
-                    }              \r
-                }\r
-             );           \r
-        }\r
-    );\r
+/**\r
+ * convert the input parameters to ui\r
+ * @param identify the identify of a segment\r
+ * @param createParam the create param object \r
+ * @returns the check result\r
+ */\r
+function convertInputsToUI(parentHost, identify, serviceParam) {\r
+       var components = '';\r
+       // convert host to UI\r
+       if (undefined !=  serviceParam.domainHost && '' != serviceParam.domainHost && parentHost != serviceParam.domainHost) {\r
+               var param ={\r
+                   name:'domainHost',\r
+                       type:'string',\r
+               defaultValue:getShowVal('domainHost', serviceParam.domainHost),\r
+               required:false          \r
+               }\r
+               components = components + generateParamComponent(serviceParam.nodeType, identify,\r
+                               param, true);\r
+       }\r
+       // convert own param to UI\r
+       for(var key in serviceParam.additionalParamForNs ){\r
+               var param ={\r
+                           name: key,\r
+                               type:'string',\r
+                       defaultValue:getShowVal(key, serviceParam.additionalParamForNs[key]),\r
+                       required:false          \r
+                       }\r
+               components = components + generateParamComponent(serviceParam.nodeType,\r
+                                               identify, param, true);\r
+       }\r
+       // convert segments to UI\r
+       serviceParam.segments.forEach(function(segment) {\r
+               // each segment in a field set.\r
+               components = components + '<div class="mT15 form-group"><fieldset style="margin-left:25px;"><legend>'\r
+                               + segment.nodeTemplateName + '</legend>';\r
+               // the identify for segment\r
+               var segmentIdentify = '' == identify ? segment.nodeTemplateName\r
+                               : identify + '_' + segment.nodeTemplateName;\r
+               // convert segment to UI\r
+               components = components\r
+                               + convertInputsToUI(serviceParam.domainHost, segmentIdentify, segment);\r
+               components = components + '</fieldset></div>';\r
+       });\r
+       return components;\r
 }\r
 \r
-function deleteNonGsoServiceInstance(gatewayService, lcmUri, instanceId, remove, failFun) {\r
-    var nsUri = lcmUri + '/ns';\r
-    $.when(\r
-        terminateNetworkServiceInstance(gatewayService, nsUri, instanceId)\r
-    ).then(\r
-        function(response) {                \r
-            var jobId = response.jobId;\r
-            var jobStatusUri = lcmUri + '/jobs/' + jobId;\r
-            var timerDefer = $.Deferred();\r
-            var timeout = 3600000;\r
-            var fun = function() {\r
-                if(timeout === 0) {\r
-                    timerDefer.resolve({\r
-                        status: 'fail', \r
-                        statusDescription: 'Operation is timeout!', \r
-                        errorCode: ''\r
-                    });\r
-                    return;\r
-                }\r
-                timeout = timeout - 1000;\r
-                $.when(\r
-                    $.ajax({\r
-                        type: "GET",\r
-                        url: jobStatusUri\r
-                    })\r
-                ).then(\r
-                    function(jobResponse) {\r
-                        var responseDesc = jobResponse.responseDescriptor;\r
-                        if(responseDesc.status === 'finished' || responseDesc.status === 'error') {\r
-                            timerDefer.resolve(responseDesc);\r
-                        }\r
-                    }\r
-                );\r
-            };\r
-            var timerId = setInterval(fun, 1000);\r
-            $.when(timerDefer).then(\r
-                function(responseDesc) {\r
-                    clearInterval(timerId);\r
-                    if(responseDesc.status === 'finished') {\r
-                        $.when(\r
-                            deleteNetworkServiceInstance(gatewayService, nsUri, instanceId)\r
-                        ).then(\r
-                            function(nsResponse) {\r
-                                if(nsResponse.status === 'success') {\r
-                                    remove();\r
-                                } else {\r
-                                    failFun(nsResponse);\r
-                                }\r
-                            }\r
-                        ).fail(function() {\r
-                            failFun({status: "fail", statusDescription: "delete service failed.", errorCode: "500"});\r
-                        });\r
-                    } else {\r
-                        failFun(responseDesc);\r
-                    }\r
-                }\r
-            );\r
-        }\r
-    ).fail(function() {\r
-        failFun({status: "fail", statusDescription: "delete service failed.", errorCode: "500"});\r
-    });\r
+function getShowVal(paramName, paramValue){\r
+       if(paramName == 'domainHost'){\r
+               return getHostNameByVal(paramValue);\r
+       }\r
+       else if(paramName == 'location'){\r
+               return getVimNameById(paramValue);\r
+       }\r
+       else if(paramName == 'sdncontroller'){\r
+               return getSdnControllerNameById(paramValue);\r
+       }\r
+       else{\r
+               return paramValue;\r
+       }\r
 }\r
 \r
-function deleteNetworkServiceInstance(gatewayService, nsUri, instanceId) {\r
-    var instanceUri = nsUri + '/' + instanceId;\r
-    var parameter = {\r
-        'operation': "DELETE",\r
-        'gatewayUri': instanceUri\r
-    };\r
-    return $.ajax({\r
-        type: "POST",\r
-        url: gatewayService,\r
-        contentType: "application/json",\r
-        dataType: "json",\r
-        data: JSON.stringify(parameter)\r
-    });\r
+function getHostNameByVal(hostDomain){\r
+     var requestUrl ="/openoapi/servicegateway/v1/domains";\r
+         var returnObj = '';\r
+         $.ajax({\r
+                 type : "GET",\r
+                 async: false,\r
+                 url : requestUrl,\r
+                 contentType : "application/json",\r
+                 success : function(jsonobj) {\r
+                       jsonobj.forEach(function(host){\r
+                               if(host.host == hostDomain){\r
+                               returnObj = host.name;\r
+                               }\r
+                       });\r
+                 },\r
+                 error : function(xhr, ajaxOptions, thrownError) {\r
+                     alert("Error on getting link data : " + xhr.responseText);\r
+                 }\r
+             });\r
+         return returnObj;\r
+}\r
+\r
+//get the vim name by id.\r
+function getVimNameById(vimId){\r
+  var requestUrl ="/openoapi/extsys/v1/vims/" + vimId;\r
+  var returnObj;\r
+  $\r
+      .ajax({\r
+          type : "GET",\r
+          async: false,\r
+          url : requestUrl,\r
+          contentType : "application/json",\r
+          success : function(jsonobj) {\r
+              // TODO return according to the json data received.\r
+               returnObj = jsonobj;\r
+          },\r
+          error : function(xhr, ajaxOptions, thrownError) {\r
+              alert("Error on getting link data : " + xhr.responseText);\r
+          }\r
+      });\r
+  return returnObj;\r
+}\r
+\r
+//get the sdn controller name by id.\r
+function getSdnControllerNameById(sdnControllerId){\r
+  var requestUrl ="/openoapi/extsys/v1/sdncontrollers/" + sdnControllerId;\r
+  var returnObj;\r
+  $\r
+      .ajax({\r
+          type : "GET",\r
+          async: false,\r
+          url : requestUrl,\r
+          contentType : "application/json",\r
+          success : function(jsonobj) {\r
+              // TODO return according to the json data received.\r
+               returnObj = jsonobj;\r
+          },\r
+          error : function(xhr, ajaxOptions, thrownError) {\r
+              alert("Error on getting link data : " + xhr.responseText);\r
+          }\r
+      });\r
+  return returnObj;\r
+}\r
+\r
+\r
+\r
+/**\r
+ * show error dialog\r
+ * @param title the title \r
+ * @param result the result\r
+ * @returns\r
+ */\r
+function showErrorMessage(title, result) {\r
+       //show the error dialog\r
+       $( "#errorDialogTitle" ).text(title);\r
+       $( "#errorDialogReason" ).text(result.reason);                  \r
+       $( "#errorDialog" ).modal({backdrop:'static', keyboard:false}); \r
 }\r
 \r
-function terminateNetworkServiceInstance(gatewayService, nsUri, instanceId) {\r
-    var instanceUri = nsUri + '/' + instanceId;\r
-    var nsTerminateUri = instanceUri + '/terminate';\r
-    var terminateParameter = {\r
-        'nsInstanceId': instanceId,\r
-        'terminationType': "graceful",\r
-        'gracefulTerminationTimeout': "60",\r
-        'operation': "POST",\r
-        'gatewayUri': nsTerminateUri\r
-    };\r
-    return $.ajax({\r
-        type: "POST",\r
-        url: gatewayService,\r
-        contentType: "application/json",\r
-        dataType: "json",\r
-        data: JSON.stringify(terminateParameter)\r
-    });\r
+/**\r
+ * generate the template to create parameters object\r
+ * \r
+ * @param templateId the template id\r
+ * @returns\r
+ */\r
+function queryService(serviceId) {\r
+       var uri = '/openoapi/servicegateway/v1/services/' + serviceId;\r
+       return $.ajax({\r
+               type : "GET",\r
+               url : uri\r
+       });\r
 }\r