Merge codes to the new client framework
authorc00149107 <chenchuanyu@huawei.com>
Mon, 27 Feb 2017 06:56:20 +0000 (14:56 +0800)
committerc00149107 <chenchuanyu@huawei.com>
Mon, 27 Feb 2017 06:56:20 +0000 (14:56 +0800)
Merge codes to the new client framework

Change-Id: Ie17f634790578bdfb6549d8cea4ffee5343532d9
Issue-ID:GSO-232
Signed-off-by: c00149107 <chenchuanyu@huawei.com>
lifecyclemgr/src/main/webapp/lifecyclemgr/index.html
lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html

index d695eac..ad6a359 100644 (file)
@@ -11,7 +11,6 @@
     <link rel="stylesheet" href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
     <link href="css/open-ostyle.css" rel="stylesheet"/>
     <link href="css/style.css" rel="stylesheet"/>
-
     <script src="js/angular.min.js"></script>
     <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
        <script src="js/angular-ui-router.min.js"></script>
@@ -22,6 +21,7 @@
     <script src="js/app.js"></script>
     <script src="js/DataService.js"></script>
     <script src="js/mustache.js"></script>
+    <script src="js/bootbox.min.js"></script>
 </head>
 
 <body ng-app="lcApp" onload="loadTemplate()">
index fd3e3d9..c31a748 100644 (file)
@@ -1,11 +1,19 @@
 app.factory("DataService", function($http, $log){
     var lcData = null;
+    var createParamJsonObj = {
+        templateId:'',
+        parameters: {}
+    };
+    
     return {
+        getCreateParamJsonObj: function(){
+            return createParamJsonObj;
+        },
         loadGetServiceData : function() {
 
             //load main Table
             return $http({
-                url: '/openoapi/inventory/v1/services',
+                url: '/openoapi/servicegateway/v1/services',
                 //url: 'http://localhost:5000/api/getLCData',
                 method: 'GET',
                 headers: {'Content-Type': 'application/json'}
@@ -20,8 +28,8 @@ app.factory("DataService", function($http, $log){
                  'serviceId': ""})*/
             }).then(function(response){
                 //$log.info(response);
-                lcData = response.data.lcData;
-                return response.data;
+                lcData = response;
+                return response;
             });
         },
         getSavedLCData : function(id){
@@ -71,44 +79,664 @@ app.factory("DataService", function($http, $log){
                 headers: {'Content-Type': 'application/json'}
             }).then(function(response){
                 //$log.info(response);
-                return response.data.templateData;
+                return response.data;
             });
         },
        
-       fetchCreateParameters : function(templateId) {
-            //For Template parameters tab in popup
-            return $http({
-                url: '/openoapi/catalog/v1/servicetemplates/'+templateId,
-               // url: 'http://localhost:5000/api/getTemplateParameter',
-                method: 'GET',
-                headers: {'Content-Type': 'application/json'}
-            }).then(function(response){
-                //$log.info(response);
-                return response.data;
+        generateCreateParameters : function(template) {
+            // For Template parameters tab in popup
+            return $.when(fetchCreateParameters(template.serviceTemplateId))
+            .then(function(createParam) {
+                // set the create param object
+                createParamJsonObj = createParam;
+                // convert the create param to UI.
+                return convertCreateParamsToUI('create', createParam.parameters);
+
             });
         },
 
-        createServiceInstance : function(lifecycleData, sengMsgObj) {
-            ///For submit of OK button
-            var parameter = {
-                'service' : {
-                    'name' :  lifecycleData.name,
-                    'description' : lifecycleData.desc,
-                    'serviceDefId' : '', //no need now, reserved
-                    'templateId' :  lifecycleData.optSelect,
-                    'parameters' : sengMsgObj
-                }
-            };
-            return $http({
-                url: '/openoapi/servicegateway/v1/services',
-                //url: 'http://localhost:5000/api/getTemplateData',
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                data : JSON.stringify(parameter)
-            }).then(function(response){
-                //$log.info(response);
-                return response.data.templateData;
+        createService : function(serviceBaseInfo) {
+            if (!checkInputs('create', createParamJsonObj.parameters)) {
+                return {status:'checkfailed'};
+            }
+            var sengMsgObj = collectCreateParamfromUI('', 'create', createParamJsonObj.parameters);
+            var gatewayService = '/openoapi/servicegateway/v1/services';
+            return createServiceInstance(serviceBaseInfo, sengMsgObj);            
+        },
+        
+        deleteService : function(serviceId) {
+            return deleteServiceInstance(serviceId);    
+        }   
+    }
+});
+
+/**
+ * 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,
+        error : function(xhr, ajaxOptions, thrownError) {
+            showErrorMessage("Generate parameters failed.", xhr.responseText);
+        } 
+    });
+}
+
+/**
+ * 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 locationConstraints to UI
+    if(undefined != createParam.nsParameters.locationConstraints){
+        createParam.nsParameters.locationConstraints.forEach(function(param) {
+            components = components
+                    + generateParamComponent(createParam.nodeType,
+                            identify, param.locationConstraints.vimId, false);
+        });
+    }
+    
+    // convert own param to UI
+    createParam.nsParameters.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 location constraints
+    if(undefined != createParam.nsParameters.locationConstraints){
+        for(var i= 0; i < createParam.nsParameters.locationConstraints.length; i++){    
+            var param = createParam.nsParameters.locationConstraints[i].locationConstraints.vimId;
+            var value = collectParamValue(identify, param);
+            if('true' === 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;
+            }
         }
     }
-});
\ No newline at end of file
+
+    // check parameters
+    for(var i= 0; i < createParam.nsParameters.additionalParamForNs.length; i++){    
+        var param = createParam.nsParameters.additionalParamForNs[i];
+        var value = collectParamValue(identify, param);
+        if('true' === 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:[],
+            nsParameters:{}
+    };  
+    // 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 location constraints
+    if(undefined != createParam.nsParameters.locationConstraints){
+        paramSentObj.nsParameters['locationConstraints'] = [];
+        createParam.nsParameters.locationConstraints.forEach(function(param) {
+            var locationConstraints = {};
+            locationConstraints['vnfProfileId'] = param.vnfProfileId;
+            locationConstraints['locationConstraints'] = {};
+            locationConstraints.locationConstraints['vimId'] = collectParamValue(identify, param.locationConstraints.vimId);
+            paramSentObj.nsParameters.locationConstraints.push(locationConstraints);
+        });
+    }
+
+    paramSentObj.nsParameters['additionalParamForNs'] = {};
+    // get own param value from UI
+    createParam.nsParameters.additionalParamForNs.forEach(function(param) {
+        paramSentObj.nsParameters.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);
+    var name = 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(serviceBaseInfo, sengMsgObj) {
+    var defer = $.Deferred();
+    var parameter = {
+        'service' : {
+            'name' :  serviceBaseInfo.name,
+            'description' : serviceBaseInfo.description,
+            'serviceDefId' : '', //no need now, reserved
+            'templateId' :  serviceBaseInfo.templateId,
+            'parameters' : sengMsgObj
+        }
+    };
+    var serviceGatewayUri = '/openoapi/servicegateway/v1/services';
+    $.when($.ajax({
+        type : "POST",
+        url : serviceGatewayUri,
+        contentType : "application/json",
+        dataType : "json",
+        data : JSON.stringify(parameter),
+        error : function(xhr, ajaxOptions, thrownError) {
+            showErrorMessage("Create service failed.", xhr.responseText);
+        }
+    }))
+    .then(function(response) {
+        return queryProgress('create service', response.service.serviceId,response.service.operationId);
+    }).then(function(result){
+        defer.resolve(result);
+    });
+    return defer;
+}
+
+/**
+ * sent delete instance msg
+ * @param serviceId the service id
+ * @returns
+ */
+function deleteServiceInstance(serviceId) {
+    var defer = $.Deferred();
+    var deleteUrl = '/openoapi/servicegateway/v1/services/' + serviceId;
+    var parameter = {};
+    $.when($.ajax({
+        type : "DELETE",
+        url : deleteUrl,
+        contentType : "application/json",
+        dataType : "json",
+        data : JSON.stringify(parameter),
+        error : function(xhr, ajaxOptions, thrownError) {
+            showErrorMessage("Delete service failed.", xhr.responseText);
+        }        
+    }))
+    .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 : queryProgressUril,
+            error : function(xhr, ajaxOptions, thrownError) {
+                showErrorMessage("Query progress failed.", xhr.responseText);
+            } 
+        }))
+        .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 location constraints to UI
+    if(undefined != serviceParam.nsParameters.locationConstraints){        
+        serviceParam.nsParameters.locationConstraints.forEach(function(param) {
+            var showValue = getShowVal('location', param.locationConstraints.vimId)
+            var param ={
+                    name: param.vnfProfileId + '_Location',
+                    type:'string',
+                    defaultValue:showValue,
+                    required:false            
+                }
+            components = components + generateParamComponent(serviceParam.nodeType,
+                            identify, param, true);
+        });
+    }
+
+    // convert own param to UI
+    for(var key in serviceParam.nsParameters.additionalParamForNs ){
+        var param ={
+                name: key,
+                type:'string',
+                defaultValue:getShowVal(key, serviceParam.nsParameters.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) {
+                 showErrorMessage("Query host failed.", 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.name;
+          },
+          error : function(xhr, ajaxOptions, thrownError) {
+              showErrorMessage("Query vims failed.", 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.name;
+          },
+          error : function(xhr, ajaxOptions, thrownError) {
+              showErrorMessage("Query sdn controllers failed.", 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);
+    if(undefined != result.reason){
+        $( "#errorDialogReason" ).text(result.reason);     
+    }
+    else{
+        $( "#errorDialogReason" ).text(result);     
+    }
+    $( "#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,
+        error : function(xhr, ajaxOptions, thrownError) {
+            showErrorMessage("Query service failed.", xhr.responseText);
+        } 
+    });
+}
+
+function queryServiceData(){
+    var returnVal = [];
+    var requestUrl = "/openoapi/servicegateway/v1/services";
+    $
+        .ajax({
+            type : "GET",
+            url : requestUrl,
+            async: false,
+            contentType : "application/json",
+            success : function(jsonobj) {
+                // TODO return according to the json data received.
+                returnVal =  jsonobj;
+            },
+            error : function(xhr, ajaxOptions, thrownError) {
+                showErrorMessage("Query services fail",xhr.responseText);
+            }
+        });
+    return returnVal;
+}
\ No newline at end of file
index 7293f0d..8a4d1e3 100644 (file)
@@ -100,8 +100,8 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             DataService.loadGetServiceData()\r
                 .then(function (data) {\r
                     if (data) {\r
-                        $scope.tableData = data.lcData;\r
-                        var tableData = data.lcData;\r
+                        $scope.tableData = data.data;\r
+                        var tableData = data.data;\r
                         loadTableData();\r
                     }\r
                     else {\r
@@ -191,11 +191,11 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             var number = $(modelTemplate).filter('#numeric').html();\r
             var dropDown = $(modelTemplate).filter('#simpleDropdownTmpl').html();\r
 \r
-            var dataText = {"ErrMsg" :     {"textboxErr" : "Service name is required.", "modalVar":"lifecycleData.name", "placeholder":"Service Name"}};\r
+            var dataText = {"ErrMsg" :     {"textboxErr" : "Service name is required.", "modalVar":"lifecycleData.serviceName", "placeholder":"Service Name"}};\r
             $('#myModal .serviceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));\r
 \r
-            var TempNameText = {"ErrMsg" :     {"textboxErr" : "Template name is required.", "modalVar":"lifecycleData.template", "placeholder":"Template Name"}};\r
-            $('#myModal .templateName').html($compile(Mustache.to_html(text, TempNameText.ErrMsg))($scope));\r
+            var serviceDescriptionText = {"ErrMsg" :     {"textboxErr" : "Description is required.", "modalVar":"lifecycleData.description", "placeholder":"Descritpion"}};\r
+            $('#myModal .serviceDescription').html($compile(Mustache.to_html(text, serviceDescriptionText.ErrMsg))($scope));\r
 \r
             //var creatorText = {"ErrMsg" :     {"textboxErr" : "Creator is required.", "modalVar":"lifecycleData.creator", "placeholder":"Creator"}};\r
             /*$scope.data = {\r
@@ -275,15 +275,18 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
         }\r
 \r
         $scope.templateParam = function() {\r
-            //$scope.lifecycleData.optSelect = 1.2;\r
-            //$log.info($scope.lifecycleData);\r
-\r
-            DataService.fetchCreateParameters($scope.lifecycleData.optSelect)\r
+            \r
+            var template = $scope.lifecycleData.optSelect;\r
+            var lastSelTempCreateParam = DataService.getCreateParamJsonObj();\r
+            //if the template not changed, no need to update the page.\r
+            if(lastSelTempCreateParam.templateId == template.serviceTemplateId){\r
+                return;\r
+            }\r
+            $.when(DataService.generateCreateParameters(template))\r
                 .then(function (tmplatesParamResponse) {\r
                     console.log("Data Param Template :: ");\r
                     $log.info(tmplatesParamResponse);\r
-                    $scope.paramJsonObj= tmplatesParamResponse.templateName;\r
-\r
+                    document.getElementById("templateParameters").innerHTML = tmplatesParamResponse;\r
                 }, function (reason) {\r
                     $scope.error = "Error ! " + reason;\r
                 });\r
@@ -329,61 +332,58 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
         }\r
 \r
         $scope.saveData = function() {\r
-            //TODO\r
-            var sengMsgObj = {};//collectCreateParamfromUI('', 'create', $scope.templateParameters.paramJsonObj);\r
-            //createServiceInstance(sengMsgObj)\r
-            DataService.createServiceInstance(lifecycleData, sengMsgObj)\r
+            //collect service  base info\r
+            var serviceBaseInfo = {\r
+                 'name' :  $scope.lifecycleData.serviceName,\r
+                 'description' : $scope.lifecycleData.description,\r
+                 'templateId' :  $scope.lifecycleData.optSelect.serviceTemplateId,\r
+            };\r
+            //send message\r
+            $.when(DataService.createService(serviceBaseInfo))\r
                 .then(function (response) {\r
                     $log.info(response);\r
-                    //TODO\r
-                }, function (reason) {\r
-                    $scope.error = "Error ! " + reason;\r
+                    if(response.sataus === 'checkfailed'){\r
+                        return;\r
+                    }else if (response.status === 'finished') {\r
+                        $.when(queryService(response.serviceId)).then(function(serviceInstance){  \r
+                            $scope.tableData.push(serviceInstance);\r
+                            $scope.$apply();\r
+                            $scope.tableParams.reload();\r
+                            $('#myModal').modal('hide');\r
+                        });\r
+                    } else{\r
+                        showErrorMessage('Create service failed',response);\r
+                    }\r
                 });\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
+        $scope.deleteIndividualData = function(id){\r
+            var deleteHandle = function(result) {\r
+                if (result) {\r
+                    var remove = function() {\r
+                        var pos = 0;\r
+                        for(var i= 0; i < $scope.tableData.length; i++){    \r
+                            if($scope.tableData[i].serviceId === id){\r
+                                pos = i;\r
+                                break;\r
+                            }\r
+                        }\r
+                        $scope.tableData.splice(pos, 1);\r
+                        $scope.$apply();\r
+                        $scope.tableParams.reload();\r
+                    };\r
+                    $.when(DataService.deleteService(id))\r
+                    .then(function(response) {\r
+                        if (response.status === 'finished') {\r
+                            remove();\r
+                        } else {\r
+                            showErrorMessage('Delete service failed',response);\r
+                        }\r
+                    });\r
+                }\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
-            // get own param value from UI\r
-            createParam.additionalParamForNs.forEach(function(param) {\r
-                paramSentObj.additionalParamForNs[param.name] = collectParamValue(identify, param);\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 paramSentObj;\r
+            bootbox.confirm("Do you confirm to delete service?", deleteHandle);     \r
         }\r
 \r
-\r
     })\r
 \r
     .controller('lcTabsCtrl', function($scope, $state, $stateParams) {\r
index 6496561..f901ab6 100644 (file)
@@ -7,25 +7,25 @@
     <br>
     <div class="panel panel-default">
     <table ng-table="tableParams" class="table table table-striped table-hover table-bordered lctable" show-filter="true">
-        <tr ng-repeat="lcData in $data" ui-sref=".lcTabs({id: lcData.id})" ui-sref-active="selected-row" ui-sref-opts="{reload: true}"><!--target="_self" ng-click="setClickedRow($index, lcData.id)" -->
+        <tr ng-repeat="lcData in $data" ui-sref=".lcTabs({id: lcData.serviceId})" ui-sref-active="selected-row" ui-sref-opts="{reload: true}"><!--target="_self" ng-click="setClickedRow($index, lcData.id)" -->
             <td header="'ng-table/headers/checkbox.html'">
-                <input type="checkbox" ng-model="checkboxes.items[lcData.id]" />
+                <input type="checkbox" ng-model="checkboxes.items[lcData.serviceId]" />
             </td>
             <td  title="'Service Name'" filter="{ name: 'text'}" sortable="'name'">
                 <!--<a data-toggle="modal" class="srvname" ng-click="callModal(lcData.id)">{{lcData.name}}</a>-->
-                <a data-toggle="modal" ng-click="test(lcData.id)" href="#popupModal" class="srvname">{{lcData.name}}</a>
+                <a data-toggle="modal" ng-click="test(lcData.id)" href="#popupModal" class="srvname">{{lcData.serviceName}}</a>
                 <!--<a data-toggle="modal" ng-href="#popupModal" class="srvname">{{lcData.name}}</a>--><!-- ui-sref=".modal1"-->
             </td>
             <td title="'Template Name'" filter="{ template: 'text'}" sortable="'template'">
-                {{lcData.template}}</td>
+                {{lcData.templateName}}</td>
             <td title="'Create time'" filter="{ createtime: 'text'}" sortable="'createtime'">
-                {{lcData.createtime}}</td>
+                {{lcData.createTime}}</td>
             <td title="'Creator'" filter="{ creator: 'text'}" sortable="'creator'">
                 {{lcData.creator}}</td>
             <td title="'Action'">
                 <!--<img src="../images/delete.png" ng-click="editData(lcData.id)" style="cursor: pointer"></img>-->
-                <span class="pull-right glyphicon glyphicon-edit" ng-click="editData(lcData.id)" style="cursor: pointer;margin: 0 5px"></span>
-                <span class="pull-right glyphicon glyphicon-trash" ng-click="deleteIndividualData(lcData.id)" style="cursor: pointer;margin: 0 5px"></span>
+                <span class="pull-right glyphicon glyphicon-edit" ng-click="editData(lcData.serviceId)" style="cursor: pointer;margin: 0 5px"></span>
+                <span class="pull-right glyphicon glyphicon-trash" ng-click="deleteIndividualData(lcData.serviceId)" style="cursor: pointer;margin: 0 5px"></span>
             </td>
         </tr>
     </table>
@@ -66,8 +66,8 @@
                             </div>
                         </div>
                         <div class="form-group row">
-                            <label class="col-xs-4 col-form-label labelstyle">Template Name</label>
-                            <div class="col-xs-8 templateName" >
+                            <label class="col-xs-4 col-form-label labelstyle">Service Description</label>
+                            <div class="col-xs-8 serviceDescription" >
                                 <!--<input class="form-control" ng-model="province.ip" type="ipv4" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" value="" placeholder="IP Address" id="ipaddress" required><br>-->
                             </div>
                         </div>
                         </div>
                     </div>
                     <div id="templateParameters" class="tab-pane fade">
-                        <div class="form-group row">
-                            <label class="col-xs-4 col-form-label labelstyle">Template version</label>
-                            <div  class="col-xs-8" > {{paramJsonObj}}</div>
-                        </div>
 
                     </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+<div class="modal fade" id="progressDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header" style="margin-left:10px;margin-bottom:5px;">
+                <h4 class="modal-title" id="idProgressTitle" style="text-align:center;"></h4>
+            </div>
+            <div class="modal-body" style="margin-left:10px;margin-bottom:5px;margin-right:10px;">
+                <div class="progress">
+                    <div id="progressbar" class="progress-bar" role="progressbar" style="width: 10%;">
+                        <span id ="progressValue">0%</span>       
+                    </div>
+                </div>
+               <div id="progressContent"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal fade" id="errorDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" 
+                        aria-hidden="true">¡Á
+                </button>
+                <h4 class="modal-title" id="errorDialogTitle"  style="text-align:center;"></h4>
+            </div>
+            <div class="modal-body" id = "errorDialogReason" style="margin-left:20px;margin-bottom:5px;margin-right:10px;"></div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
+            </div>
+        </div>
+    </div>
+</div>