summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorc00149107 <chenchuanyu@huawei.com>2017-02-27 14:56:20 +0800
committerc00149107 <chenchuanyu@huawei.com>2017-02-27 14:56:20 +0800
commitbcde7a18119384ad99018a6bf7b76dad5a4a42fc (patch)
tree58162dd52f6eba65d5746881da081cce1db15271
parent248e1a98954153e9d29fb256a0dc2d71682ff45e (diff)
Merge codes to the new client framework
Merge codes to the new client framework Change-Id: Ie17f634790578bdfb6549d8cea4ffee5343532d9 Issue-ID:GSO-232 Signed-off-by: c00149107 <chenchuanyu@huawei.com>
Diffstat
-rw-r--r--lifecyclemgr/src/main/webapp/lifecyclemgr/index.html2
-rw-r--r--lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js698
-rw-r--r--lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js118
-rw-r--r--lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html57
4 files changed, 766 insertions, 109 deletions
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/index.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/index.html
index d695eaca..ad6a359d 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/index.html
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/index.html
@@ -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()">
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
index fd3e3d9a..c31a7487 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
@@ -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
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
index 7293f0de..8a4d1e38 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
@@ -100,8 +100,8 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
DataService.loadGetServiceData()
.then(function (data) {
if (data) {
- $scope.tableData = data.lcData;
- var tableData = data.lcData;
+ $scope.tableData = data.data;
+ var tableData = data.data;
loadTableData();
}
else {
@@ -191,11 +191,11 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
var number = $(modelTemplate).filter('#numeric').html();
var dropDown = $(modelTemplate).filter('#simpleDropdownTmpl').html();
- var dataText = {"ErrMsg" : {"textboxErr" : "Service name is required.", "modalVar":"lifecycleData.name", "placeholder":"Service Name"}};
+ var dataText = {"ErrMsg" : {"textboxErr" : "Service name is required.", "modalVar":"lifecycleData.serviceName", "placeholder":"Service Name"}};
$('#myModal .serviceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));
- var TempNameText = {"ErrMsg" : {"textboxErr" : "Template name is required.", "modalVar":"lifecycleData.template", "placeholder":"Template Name"}};
- $('#myModal .templateName').html($compile(Mustache.to_html(text, TempNameText.ErrMsg))($scope));
+ var serviceDescriptionText = {"ErrMsg" : {"textboxErr" : "Description is required.", "modalVar":"lifecycleData.description", "placeholder":"Descritpion"}};
+ $('#myModal .serviceDescription').html($compile(Mustache.to_html(text, serviceDescriptionText.ErrMsg))($scope));
//var creatorText = {"ErrMsg" : {"textboxErr" : "Creator is required.", "modalVar":"lifecycleData.creator", "placeholder":"Creator"}};
/*$scope.data = {
@@ -275,15 +275,18 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
}
$scope.templateParam = function() {
- //$scope.lifecycleData.optSelect = 1.2;
- //$log.info($scope.lifecycleData);
-
- DataService.fetchCreateParameters($scope.lifecycleData.optSelect)
+
+ var template = $scope.lifecycleData.optSelect;
+ var lastSelTempCreateParam = DataService.getCreateParamJsonObj();
+ //if the template not changed, no need to update the page.
+ if(lastSelTempCreateParam.templateId == template.serviceTemplateId){
+ return;
+ }
+ $.when(DataService.generateCreateParameters(template))
.then(function (tmplatesParamResponse) {
console.log("Data Param Template :: ");
$log.info(tmplatesParamResponse);
- $scope.paramJsonObj= tmplatesParamResponse.templateName;
-
+ document.getElementById("templateParameters").innerHTML = tmplatesParamResponse;
}, function (reason) {
$scope.error = "Error ! " + reason;
});
@@ -329,61 +332,58 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
}
$scope.saveData = function() {
- //TODO
- var sengMsgObj = {};//collectCreateParamfromUI('', 'create', $scope.templateParameters.paramJsonObj);
- //createServiceInstance(sengMsgObj)
- DataService.createServiceInstance(lifecycleData, sengMsgObj)
+ //collect service base info
+ var serviceBaseInfo = {
+ 'name' : $scope.lifecycleData.serviceName,
+ 'description' : $scope.lifecycleData.description,
+ 'templateId' : $scope.lifecycleData.optSelect.serviceTemplateId,
+ };
+ //send message
+ $.when(DataService.createService(serviceBaseInfo))
.then(function (response) {
$log.info(response);
- //TODO
- }, function (reason) {
- $scope.error = "Error ! " + reason;
+ if(response.sataus === 'checkfailed'){
+ return;
+ }else if (response.status === 'finished') {
+ $.when(queryService(response.serviceId)).then(function(serviceInstance){
+ $scope.tableData.push(serviceInstance);
+ $scope.$apply();
+ $scope.tableParams.reload();
+ $('#myModal').modal('hide');
+ });
+ } else{
+ showErrorMessage('Create service failed',response);
+ }
});
}
-
- /**
- * 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:{}
+ $scope.deleteIndividualData = function(id){
+ var deleteHandle = function(result) {
+ if (result) {
+ var remove = function() {
+ var pos = 0;
+ for(var i= 0; i < $scope.tableData.length; i++){
+ if($scope.tableData[i].serviceId === id){
+ pos = i;
+ break;
+ }
+ }
+ $scope.tableData.splice(pos, 1);
+ $scope.$apply();
+ $scope.tableParams.reload();
+ };
+ $.when(DataService.deleteService(id))
+ .then(function(response) {
+ if (response.status === 'finished') {
+ remove();
+ } else {
+ showErrorMessage('Delete service failed',response);
+ }
+ });
+ }
};
- // 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;
+ bootbox.confirm("Do you confirm to delete service?", deleteHandle);
}
-
})
.controller('lcTabsCtrl', function($scope, $state, $stateParams) {
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html
index 64965614..f901ab6f 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html
@@ -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>
@@ -83,10 +83,6 @@
</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>
@@ -94,4 +90,37 @@
</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>