add creating service dialog

Change-Id: I812cddcbac94c83472ac2f702692478c9444a571 Issue-Id: USECASEUI-36 Signed-off-by: Luji7 <lu.ji3@zte.com.cn>
author: 陆骥10116947 <lu.ji3@zte.com.cn> 2017-09-07 16:35:12 +0800
committer: 陆骥10116947 <lu.ji3@zte.com.cn> 2017-09-07 16:35:23 +0800
commit: ee7f5450b988a35c9f16d23d36498005e57531fc (patch)
tree: 197c41ffcc3baba27a5582495c2a15f4a08dac75
parent: 10d5b11472f25b015d1d9b0abdea8e359595e16d (diff)
2 files changed, 808 insertions, 60 deletions
diff --git a/usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html b/usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html
index ba4118fe..4f8874d4 100644
--- a/usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html
+++ b/usecaseui-lcm/src/main/webapp/html/lifecyclemanager.html
@@ -1,4 +1,22 @@
 <!DOCTYPE html>
+<!--
+
+    Copyright 2016-2017 ZTE Corporation.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<html>
 <head>
   <meta charset="utf-8">
   <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
@@ -47,7 +65,7 @@
           <div class="container">
             <div class="row">
               <div class="col-md-2">
-                <button class="btn btn-primary">Create Service</button>
+                <button id="createService" class="btn btn-primary">Create Service</button>
               </div>
               <div class="col-md-offset-6 col-md-2">
                 <button class="btn btn-primary">Onboard Vnf/NS Package</button>
@@ -64,75 +82,166 @@
           <li><button class="btn btn-primary">Onboard Vnf/NS Package</button></li>
           <li><button class="btn btn-primary">Delete Vnf/NS Package</button></li>
         </ul-->
-
-
-                <table class="table table-striped table-hover table-bordered">
-                  <thead>
-                    <tr>
-                      <th>Service Instance Id</th>
-                      <th>Service Name</th>
-                      <th>Service Type</th>
-                      <th>Action</th>
-                    </tr>
-                  </thead>
-                  <tbody id="bb">
-                    <tr>
-                      <td>123</td>
-                      <td>VoLTE Use Case 1</td>
-                      <td>E2E Service</td>
-                      <td><a href="#" class="btn btn-primary">Delete</a></td>
-                    </tr>
-                    <tr>
-                      <td>456</td>
-                      <td>VoLTE Use Case 2</td>
-                      <td>E2E Service</td>
-                      <td><a href="#" class="btn btn-primary">Delete</a></td>
-                    </tr>
-                    <tr>
-                      <td>789</td>
-                      <td>VoLTE Use Case 3</td>
-                      <td>E2E Service</td>
-                      <td><a href="#" class="btn btn-primary">Delete</a></td>
-                    </tr>
-                  </tbody>
-                </table>
-				  <ul class="pagination pull-right">
-                <li class="disabled"><a href="#">&laquo;</a></li>
-                <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
-                <li><a href="#">2 <span class="sr-only">(current)</span></a></li>
-                <li><a href="#">3 <span class="sr-only">(current)</span></a></li>
-                <li><a href="#">4 <span class="sr-only">(current)</span></a></li>
-                <li><a href="#">5 <span class="sr-only">(current)</span></a></li>
-                <li><a href="#">&raquo;</a></li>
-              </ul>
-              </div>
-
-            </div>
-          </div>
-        </div>
+        <table class="table table-striped table-hover table-bordered">
+          <thead>
+            <tr>
+              <th>Service Instance Id</th>
+              <th>Service Name</th>
+              <th>Service Type</th>
+              <th>Action</th>
+            </tr>
+          </thead>
+          <tbody id="bb">
+            <tr>
+              <td>123</td>
+              <td>VoLTE Use Case 1</td>
+              <td>E2E Service</td>
+              <td><a href="#" class="btn btn-primary">Delete</a></td>
+            </tr>
+            <tr>
+              <td>456</td>
+              <td>VoLTE Use Case 2</td>
+              <td>E2E Service</td>
+              <td><a href="#" class="btn btn-primary">Delete</a></td>
+            </tr>
+            <tr>
+              <td>789</td>
+              <td>VoLTE Use Case 3</td>
+              <td>E2E Service</td>
+              <td><a href="#" class="btn btn-primary">Delete</a></td>
+            </tr>
+          </tbody>
+        </table>
+        <ul class="pagination pull-right">
+          <li class="disabled"><a href="#">&laquo;</a></li>
+          <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
+          <li><a href="#">2 <span class="sr-only">(current)</span></a></li>
+          <li><a href="#">3 <span class="sr-only">(current)</span></a></li>
+          <li><a href="#">4 <span class="sr-only">(current)</span></a></li>
+          <li><a href="#">5 <span class="sr-only">(current)</span></a></li>
+          <li><a href="#">&raquo;</a></li>
+        </ul>
       </div>
+    </div>
+  </div>
 
-    <!-- Modal -->
-    <div class="modal fade" id="confirmModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-            <h4 class="modal-title" id="myModalLabel">Are you sure you want to sign out?</h4>
-          </div>
-          <div class="modal-footer">
-            <a href="sign-in.html" class="btn btn-primary">Yes</a>
-            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
-          </div>
+  <!-- Modal -->
+  <div class="modal fade" id="confirmModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+          <h4 class="modal-title" id="myModalLabel">Are you sure you want to sign out?</h4>
+        </div>
+        <div class="modal-footer">
+          <a href="sign-in.html" class="btn btn-primary">Yes</a>
+          <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
         </div>
       </div>
     </div>
+  </div>
+
+  <div id="createServiceDialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="content">
+                <div class="modal-header" style="margin-bottom: 15px;">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
+                    </button>
+                    <h4 class="modal-title" id="myModalLabel">
+                        <span>Create</span>
+                    </h4>
+                </div>
+                <form class="form-horizontal" role="form" id="neForm">
+                    <div id="wizard">
+                        <div class="modal-body">
 
+                            <ul class="nav nav-tabs nav-justified vmapp-margin">
+                                <li class="active basic">
+                                    <a href="#basicTab" style="margin-left:1px;" onclick="showBasic();" id="basicTab"
+                                       data-toggle="tab">
+                                        <span>Base</span>
+                                    </a>
+                                </li>
+                                <li style="padding-right:2px;" class="para">
+                                    <a href="#" onclick="hideBasic();" data-toggle="tab">
+                                        <span>Template Parameters</span>
+                                    </a>
+                                </li>
 
-  </div>
+                            </ul>
+
+                            <div id="basicInfoTab">
+                                <div class="mT15 form-group" style="margin-left:25px;"
+                                     ms-class="has-error:vmAppDialog.name==''">
+                                    <label class="col-sm-3 control-label">
+                                        <span>Service Name</span>
+                                        <span class="required">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" id="svcName" name="svcName" class="form-control"
+                                               placeholder="Service Name" maxlength="256"/>
+                                    </div>
+                                </div>
+                                <div class="mT15 form-group" style="margin-left:25px;"
+                                     ms-class="has-error:vmAppDialog.name==''">
+                                    <label class="col-sm-3 control-label">
+                                        <span>Service Description</span>
+                                        <span class="required">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" id="svcDesc" name="" class="form-control"
+                                               placeholder="Service Description" maxlength="256"/>
+                                    </div>
+                                </div>
+
+                                <div class="form-group" style="margin-left:25px;margin-bottom:15px;"
+                                     ms-class="has-error:vmAppDialog.name==''">
+                                    <label class="col-sm-3 control-label">
+                                        <span>Service Template</span>
+                                        <span class="required">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <select class="form-control" style="padding-top: 0px;padding-bottom: 0px;"
+                                                id="svcTempl" name="svcTempl" onchange="serviceTemplateChanged();">
+                                            <option value="select">--select--</option>
+                                            <option value="1.1">1.1</option>
+                                            <option value="1.2">1.2</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div id="templateParameterTab">
+
+                            </div>
+
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" style="width:80px;" class="btn SDBtn" data-dismiss="modal"
+                                    aria-hidden="true" id="startToCreateService">
+                                <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>
+                            </button>
+                            <button type="button" style="width:80px;" class="btn button-previous SDBtn" data-dismiss="modal">
+                                <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>
+                            </button>
+
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
 </div>
+
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
   <script src="js/templatemo_script.js"></script>
+  <script src="js/lifecyclemanager.js"></script>
+  <script type="text/javascript">
+        $(document).ready(function () {
+          new lcmHandler();
+        })
+  </script>
 </body>
 </html>
diff --git a/usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js b/usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js
new file mode 100644
index 00000000..aa26bb04
--- /dev/null
+++ b/usecaseui-lcm/src/main/webapp/static/fusion/js/lifecyclemanager.js
@@ -0,0 +1,639 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var templateParameters = {
+    changed : true,
+    // the create params used for ui
+    paramJsonObj : {}
+};
+
+var lcmHandler = function() {
+    this._addOwnEvents();
+};
+
+lcmHandler.prototype = {
+    _addOwnEvents : function() {
+        $('#createService').click(function() {
+          console.log("create service...");
+          $('#createServiceDialog').modal();
+        });
+        $('#startToCreateService').click(this.okAction);
+    },
+    okAction : function() {
+        if (!checkInputs('create', templateParameters.paramJsonObj)) {
+            return;
+        }
+        var sengMsgObj = collectCreateParamfromUI('', 'create', templateParameters.paramJsonObj);
+        var gatewayService = '/openoapi/servicegateway/v1/services';
+        $.when(createServiceInstance(sengMsgObj))
+        .then(function(response) {
+            if (response.status === 'finished') {
+                $.when(queryService()).then(function(serviceInstance){
+                    $('#sai').bootstrapTable("append", serviceInstance);
+                });
+                $('#vmAppDialog').removeClass('in').css('display','none');
+            } else {
+                showErrorMessage('Create service failed',response);
+            }
+        });
+    }
+};
+
+function hideBasic() {
+  $("#basicInfoTab").hide();
+  initParameterTab();
+  $("#templateParameterTab").show();
+}
+
+function showBasic() {
+  $("#basicInfoTab").show();
+  $("#templateParameterTab").hide();
+}
+
+function serviceTemplateChanged() {
+  templateParameters.changed = true;
+}
+
+/**
+ * init parameter tab
+ * @returns
+ */
+function initParameterTab() {
+    // Service template was not changed. Do not re-initiate the parameter tab.
+    if (!templateParameters.changed) {
+        return;
+    }
+    var templateId = $("#svcTempl").val();
+    if ('select' === templateId) {
+        document.getElementById("templateParameterTab").innerHTML = '';
+        return;
+    }
+    $.when(fetchCreateParameters(templateId))
+    .then(function(createParam) {
+        // set the create param object
+        templateParameters.paramJsonObj = createParam.parameters;
+        // convert the create param to UI.
+        var components = convertCreateParamsToUI('create', createParam.parameters);
+        document.getElementById("templateParameterTab").innerHTML = components;
+        templateParameters.changed = false;
+    });
+}
+
+/**
+ * generate the template to create parameters object
+ *
+ * @param templateId
+ *            the template id
+ * @returns
+ */
+function fetchCreateParameters(templateId) {
+    //return $.getJSON("./conf/queryCreateParams.json");
+    var uri = '/openoapi/servicegateway/v1/createparameters/' + templateId;
+    return $.ajax({
+        type : "GET",
+        url : uri
+    });
+}
+
+/**
+ * convert the template params obj to html UI string
+ *
+ * @param identify the object identify, it should be '' when called
+ * @return the html component string
+ */
+function convertCreateParamsToUI(identify, createParam) {
+    var components = '';
+    // convert host to UI
+    if (undefined !=  createParam.domainHost && 'enum' === createParam.domainHost.type) {
+        components = components
+                + generateParamComponent(createParam.nodeType, identify,
+                        createParam.domainHost, false);
+    }
+    // convert own param to UI
+    createParam.additionalParamForNs
+            .forEach(function(param) {
+                components = components
+                        + generateParamComponent(createParam.nodeType,
+                                identify, param, false);
+            });
+    // convert segments to UI
+    createParam.segments.forEach(function(segment) {
+        // each segment in a field set.
+        components = components + '<fieldset style="margin-left:25px;"><legend>'
+                + segment.nodeTemplateName + '</legend>';
+        // the identify for segment
+        var segmentIdentify = '' == identify ? segment.nodeTemplateName
+                : identify + '_' + segment.nodeTemplateName;
+        // convert segment to UI
+        components = components
+                + convertCreateParamsToUI(segmentIdentify, segment);
+        components = components + '</fieldset>';
+    });
+    return components;
+}
+
+
+/**
+ * for each required parameter it could not be empty
+ * @param identify the identify of a segment
+ * @param createParam the create param object
+ * @returns the check result
+ */
+function checkInputs(identify, createParam) {
+    //check domain host
+    if (undefined !=  createParam.domainHost && 'enum' === createParam.domainHost.type) {
+        var value = collectParamValue(identify, createParam.domainHost);
+        if ('select' == value) {
+            var name = getParamLabel(createParam.nodeType, createParam.domainHost);
+            alert( name + ' is required.')
+            return false;
+        }
+    }
+    // check parameters
+    for(var i= 0; i < createParam.additionalParamForNs.length; i++){
+        var param = createParam.additionalParamForNs[i];
+        var value = collectParamValue(identify, param);
+        if(param.required && ('' === value || ('enum' == param.type && 'select' == value))){
+            // the param resource key is nodeType.paramName
+            var name = getParamLabel(createParam.nodeType, param);
+            alert(name + ' is required.')
+            return false;
+        }
+    }
+    // get segments param value from UI
+    var segmentcheckResult = true;
+    for(var i= 0; i < createParam.segments.length; i++){
+        var segment = createParam.segments[i];
+        // the identify for segment
+        var segmentIdentify = '' == identify ? segment.nodeTemplateName
+                : identify + '_' + segment.nodeTemplateName;
+        segmentcheckResult = checkInputs(segmentIdentify, segment);
+        if (!segmentcheckResult) {
+            break;
+        }
+    }
+    return segmentcheckResult;
+}
+
+
+/**
+ * convert the template params obj to html UI string
+ *
+ * @param identify the object identify, it should be different every time
+ * @return the html component string
+ */
+function collectCreateParamfromUI(parentHost,identify, createParam) {
+    // the create params used for create msg
+    var paramSentObj = {
+            domainHost:'',
+            nodeTemplateName:'',
+            nodeType:'',
+            segments:[],
+            additionalParamForNs:{}
+    };
+    // get the domain value
+    if (undefined !=  createParam.domainHost && 'enum' === createParam.domainHost.type) {
+        var domain = collectParamValue(identify, createParam.domainHost);
+        paramSentObj.domainHost = collectParamValue(identify, createParam.domainHost)
+    }
+    //if parent domainHost is not '' and local domain host is'', it should be setted as parent
+    if('' != parentHost && '' == paramSentObj.domainHost){
+        paramSentObj.domainHost = parentHost;
+    }
+    paramSentObj.nodeTemplateName = createParam.nodeTemplateName;
+    paramSentObj.nodeType = createParam.nodeType;
+
+    // get own param value from UI
+    createParam.additionalParamForNs.forEach(function(param) {
+        paramSentObj.additionalParamForNs[param.name] = collectParamValue(identify, param);
+    });
+    // get segments param value from UI
+    createParam.segments.forEach(function(segment) {
+        // the identify for segment
+        var segmentIdentify = '' == identify ? segment.nodeTemplateName
+                : identify + '_' + segment.nodeTemplateName;
+        var segmentObj = collectCreateParamfromUI(paramSentObj.domainHost, segmentIdentify, segment);
+        paramSentObj.segments.push(segmentObj);
+    });
+    return paramSentObj;
+}
+
+/**
+ * get a param value
+ * @param identify the identify of a segment
+ * @param param the param object
+ * @returns the value of the param
+ */
+function collectParamValue(identify, param) {
+    var value = $('#' + getParamId(identify, param)).val();
+    return value;
+}
+
+/**
+ * get the param id in ui
+ * @param identify
+ * @param param
+ * @returns
+ */
+function getParamId(identify, param) {
+    return '' ===identify ? param.name : identify + '_' + param.name;
+}
+
+/**
+ * get the resource string of a param.
+ * @param nodeType node type
+ * @param param param object
+ * @returns resource string
+ */
+function getParamLabel(nodeType, param) {
+    var name = $.i18n.prop(nodeType + '.' + param.name);
+    if (name.length === 0 || name.slice(0, 1) === '[') {
+        name = param.name;
+    }
+    return name;
+}
+/**
+ * convert combox component
+ *
+ * @param inputPara
+ * @param items
+ * @param stringReadOnly
+ * @returns
+ */
+function generateParamComponent(nodeType, identify, param, strReadOnly) {
+    // the param resource key is nodeType.paramName
+    var name = getParamLabel(nodeType, param);
+    var id = getParamId(identify,param);
+    var component = '';
+    if (param.type === 'string') {
+        component = '<div class="mT15 form-group" style="margin-left:0px;">'
+                + '<label class="col-sm-5 control-label">'
+                + '<span>' + name + '</span>' + generateRequiredLabel(param)
+                + '</label>'
+                + '<div class="col-sm-5"><input type="text" id="' + id
+                + '" name="parameter description" class="form-control" placeholder="'
+                + name + '" value="' + param.defaultValue;
+        if(strReadOnly){
+            component = component + '" readonly="' + strReadOnly + '"/>'+ '</div></div>';
+        }else{
+            component = component + '"/>'+ '</div></div>';
+        }
+
+    } else if (param.type === 'enum') {
+        component = '<div class="form-group" style="margin-left:0px;margin-bottom:5px;">'
+                + '<label class="col-sm-5 control-label">'
+                + '<span>' + name + '</span>'
+                + '<span class="required">*</span>'
+                + '</label>'
+                + '<div class="col-sm-5">'
+                + '<select class="form-control" style ="padding-top: 0px;padding-bottom: 0px;"'
+                + ' id="' + id + '" name="' + param.name + '" value="' + param.defaultValue
+                + '">'
+                + this.transformToOptions(param.range)
+                + '</select></div></div>';
+    }
+    return component;
+}
+
+/**
+ * transfer the enum range to html body
+ * @param items the map of the range
+ * @returns the html string
+ */
+function transformToOptions(items) {
+    var options = '<option value="select">--select--</option>';
+    var i;
+    for ( var key in items) {
+        var option = '<option value="' + key + '">' + items[key] + '</option>';
+        options = options + option;
+    }
+    return options;
+}
+
+/**
+ * generate required identify to html string
+ * @param parameter the parameter object
+ * @returns the html string
+ */
+function generateRequiredLabel(parameter) {
+    var requiredLabel = '';
+    if (parameter.required === 'true') {
+        requiredLabel = '<span class="required">*</span>';
+    }
+    return requiredLabel;
+}
+
+/**
+ * create service
+ * @param sengMsgObj the parameters
+ * @returns
+ */
+function createServiceInstance(sengMsgObj) {
+    var defer = $.Deferred();
+    var parameter = {
+        'service' : {
+            'name' :  $('#svcName').val(),
+            'description' : $('#svcDesc').val(),
+            'serviceDefId' : '', //no need now, reserved
+            'templateId' :  $("#svcTempl").val(),
+            'parameters' : sengMsgObj
+        }
+    };
+    var serviceGatewayUri = '/openoapi/servicegateway/v1/services';
+    $.when($.ajax({
+        type : "POST",
+        url : serviceGatewayUri,
+        contentType : "application/json",
+        dataType : "json",
+        data : JSON.stringify(parameter)
+    }))
+    .then(function(response) {
+        return queryProgress('create service', response.service.serviceId,response.service.operationId);
+    }).then(function(result){
+        defer.resolve(result);
+    });
+    return defer;
+}
+
+/**
+ *
+ * @param rowId
+ * @param row
+ * @returns
+ */
+function deleteService(rowId, row) {
+    var deleteHandle = function(result) {
+        if (result) {
+            var serviceId = row.serviceId;
+            var remove = function() {
+                $('#sai').bootstrapTable('remove', {
+                    field : 'serviceId',
+                    values : [ serviceId ]
+                });
+            };
+            var failFun = function(responseDesc) {
+                $.isLoading("hide");
+                showErrorMessage("Delete service failed", responseDesc);
+            }
+            $.when(deleteServiceInstance(serviceId))
+            .then(function(response) {
+                if (response.status === 'finished') {
+                    remove();
+                } else {
+                    showErrorMessage('Create service failed',response);
+                }
+            });
+            ;
+        }
+    };
+    bootbox.confirm("Do you confirm to delete service?", deleteHandle);
+}
+
+/**
+ * sent delete instance msg
+ * @param serviceId the service id
+ * @returns
+ */
+function deleteServiceInstance(serviceId) {
+    var defer = $.Deferred();
+    var deleteUrl = '/openoapi/servicegateway/v1/services/' + serviceId;
+    $.when($.ajax({
+        type : "DELETE",
+        url : deleteUrl,
+        contentType : "application/json",
+        dataType : "json",
+        data : JSON.stringify(parameter)
+    }))
+    .then(function(response) {
+        return queryProgress('delete service', serviceId,response.operationId);
+    }).then(function(result){
+        defer.resolve(result);
+    });
+    return defer;
+}
+
+/**
+ * query progress of the operation
+ * @param operation the operation string
+ * @param serviceId the service id
+ * @param operationId the operation id
+ * @returns
+ */
+function queryProgress(operation, serviceId, operationId) {
+    //show the progress dialog
+    $( "#idProgressTitle" ).text(operation);
+    $( "#progressContent" ).text('status:');
+    $( "#progressbar" ).attr("style","width: 0%");
+    $( "#progressDialog" ).modal({backdrop:'static', keyboard:false});
+    //set a timer for query operation
+    var defer = $.Deferred();
+    var queryProgressUril = '/openoapi/servicegateway/v1/services/' + serviceId + '/operations/' + operationId;
+    var timerDefer = $.Deferred();
+    var timeout = 3600000;
+    var fun = function() {
+        if (timeout === 0) {
+            timerDefer.resolve({
+                status : 'error',
+                reason : operation + ' timeout!',
+            });
+            return;
+        }
+        timeout = timeout - 1000;
+        $.when($.ajax({
+            type : "GET",
+            url : gsoServiceUri
+        }))
+        .then(function(response) {
+            //update progress
+            $( "#progressbar" ).attr("style","width: " + response.operation.progress.toString() + "%");
+            $( "#progressValue" ).text(response.operation.progress.toString() + '%');
+            $( "#progressContent" ).text('status: ' + response.operation.operationContent);
+            if (response.operation.result == 'finished' || response.operation.result == 'error') {
+                timerDefer.resolve({
+                    status : response.operation.result ,
+                    reason : response.operation.reason
+                });
+            }
+        });
+    };
+    var timerId = setInterval(fun, 1000);
+    $.when(timerDefer)
+    .then(function(responseDesc) {
+        clearInterval(timerId);
+        $('#progressDialog').modal('hide');
+        defer.resolve({
+            status : responseDesc.status,
+            reason : responseDesc.reason,
+            serviceId:serviceId
+        });
+
+    });
+    return defer;
+}
+
+
+/**
+ * convert the input parameters to ui
+ * @param identify the identify of a segment
+ * @param createParam the create param object
+ * @returns the check result
+ */
+function convertInputsToUI(parentHost, identify, serviceParam) {
+    var components = '';
+    // convert host to UI
+    if (undefined !=  serviceParam.domainHost && '' != serviceParam.domainHost && parentHost != serviceParam.domainHost) {
+        var param ={
+            name:'domainHost',
+            type:'string',
+            defaultValue:getShowVal('domainHost', serviceParam.domainHost),
+            required:false
+        }
+        components = components + generateParamComponent(serviceParam.nodeType, identify,
+                param, true);
+    }
+    // convert own param to UI
+    for(var key in serviceParam.additionalParamForNs ){
+        var param ={
+                name: key,
+                type:'string',
+                defaultValue:getShowVal(key, serviceParam.additionalParamForNs[key]),
+                required:false
+            }
+        components = components + generateParamComponent(serviceParam.nodeType,
+                        identify, param, true);
+    }
+    // convert segments to UI
+    serviceParam.segments.forEach(function(segment) {
+        // each segment in a field set.
+        components = components + '<div class="mT15 form-group"><fieldset style="margin-left:25px;"><legend>'
+                + segment.nodeTemplateName + '</legend>';
+        // the identify for segment
+        var segmentIdentify = '' == identify ? segment.nodeTemplateName
+                : identify + '_' + segment.nodeTemplateName;
+        // convert segment to UI
+        components = components
+                + convertInputsToUI(serviceParam.domainHost, segmentIdentify, segment);
+        components = components + '</fieldset></div>';
+    });
+    return components;
+}
+
+function getShowVal(paramName, paramValue){
+    if(paramName == 'domainHost'){
+        return getHostNameByVal(paramValue);
+    }
+    else if(paramName == 'location'){
+        return getVimNameById(paramValue);
+    }
+    else if(paramName == 'sdncontroller'){
+        return getSdnControllerNameById(paramValue);
+    }
+    else{
+        return paramValue;
+    }
+}
+
+function getHostNameByVal(hostDomain){
+     var requestUrl ="/openoapi/servicegateway/v1/domains";
+      var returnObj = '';
+      $.ajax({
+              type : "GET",
+              async: false,
+              url : requestUrl,
+              contentType : "application/json",
+              success : function(jsonobj) {
+                jsonobj.forEach(function(host){
+                    if(host.host == hostDomain){
+                          returnObj = host.name;
+                    }
+                });
+              },
+              error : function(xhr, ajaxOptions, thrownError) {
+                  alert("Error on getting link data : " + xhr.responseText);
+              }
+          });
+      return returnObj;
+}
+
+//get the vim name by id.
+function getVimNameById(vimId){
+  var requestUrl ="/openoapi/extsys/v1/vims/" + vimId;
+  var returnObj;
+  $
+      .ajax({
+          type : "GET",
+          async: false,
+          url : requestUrl,
+          contentType : "application/json",
+          success : function(jsonobj) {
+              // TODO return according to the json data received.
+              returnObj = jsonobj;
+          },
+          error : function(xhr, ajaxOptions, thrownError) {
+              alert("Error on getting link data : " + xhr.responseText);
+          }
+      });
+  return returnObj;
+}
+
+//get the sdn controller name by id.
+function getSdnControllerNameById(sdnControllerId){
+  var requestUrl ="/openoapi/extsys/v1/sdncontrollers/" + sdnControllerId;
+  var returnObj;
+  $
+      .ajax({
+          type : "GET",
+          async: false,
+          url : requestUrl,
+          contentType : "application/json",
+          success : function(jsonobj) {
+              // TODO return according to the json data received.
+              returnObj = jsonobj;
+          },
+          error : function(xhr, ajaxOptions, thrownError) {
+              alert("Error on getting link data : " + xhr.responseText);
+          }
+      });
+  return returnObj;
+}
+
+
+
+/**
+ * show error dialog
+ * @param title the title
+ * @param result the result
+ * @returns
+ */
+function showErrorMessage(title, result) {
+    //show the error dialog
+    $( "#errorDialogTitle" ).text(title);
+    $( "#errorDialogReason" ).text(result.reason);
+    $( "#errorDialog" ).modal({backdrop:'static', keyboard:false});
+}
+
+/**
+ * generate the template to create parameters object
+ *
+ * @param templateId the template id
+ * @returns
+ */
+function queryService(serviceId) {
+    var uri = '/openoapi/servicegateway/v1/services/' + serviceId;
+    return $.ajax({
+        type : "GET",
+        url : uri
+    });
+}
author	陆骥10116947 <lu.ji3@zte.com.cn>	2017-09-07 16:35:12 +0800
committer	陆骥10116947 <lu.ji3@zte.com.cn>	2017-09-07 16:35:23 +0800
commit	ee7f5450b988a35c9f16d23d36498005e57531fc (patch)
tree	197c41ffcc3baba27a5582495c2a15f4a08dac75
parent	10d5b11472f25b015d1d9b0abdea8e359595e16d (diff)