diff options
| -rw-r--r-- | portal/src/main/webapp/extsys/ems/css/ems.css | 8 | ||||
| -rw-r--r-- | portal/src/main/webapp/extsys/ems/emsView.html | 54 | ||||
| -rw-r--r-- | portal/src/main/webapp/extsys/ems/js/commonUtil.js | 2 | ||||
| -rw-r--r-- | portal/src/main/webapp/extsys/ems/js/emsController.js | 149 | ||||
| -rw-r--r-- | portal/src/main/webapp/extsys/ems/mock-data/ems.json | 2 |
5 files changed, 120 insertions, 95 deletions
diff --git a/portal/src/main/webapp/extsys/ems/css/ems.css b/portal/src/main/webapp/extsys/ems/css/ems.css index 6838e7e..d175c88 100644 --- a/portal/src/main/webapp/extsys/ems/css/ems.css +++ b/portal/src/main/webapp/extsys/ems/css/ems.css @@ -458,6 +458,9 @@ h3 { margin-top: 10px; margin-bottom: 40px; font-weight: 200; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .blue-font { @@ -550,4 +553,9 @@ h3 { } #btnPreStep, #btnSave{ display: none; +} +.md-text-overflow { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; }
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/ems/emsView.html b/portal/src/main/webapp/extsys/ems/emsView.html index 56a364e..7cf0176 100644 --- a/portal/src/main/webapp/extsys/ems/emsView.html +++ b/portal/src/main/webapp/extsys/ems/emsView.html @@ -41,21 +41,21 @@ <div class="modal-body"> <div class="px-ui-steps"> <ul class="px-ui-horizon-ul-horizon" role="tablist"> - <li class="px-ui-steps-li step-active" id="step-resource"> + <li class="px-ui-steps-li step-active" id="step-resourceAddr"> <div class="px-ui-menuitem-div-passive"> <span class="px-ui-steps-number-passive">1</span> <span class="px-ui-steps-title-passive">Resource</span> </div> <div class="px-ui-underline-passive"></div> </li> - <li class="px-ui-steps-li" id="step-performance"> + <li class="px-ui-steps-li" id="step-performanceAddr"> <div class="px-ui-menuitem-div-passive"> <span class="px-ui-steps-number-passive">2</span> <span class="px-ui-steps-title-passive">Performance</span> </div> <div class="px-ui-underline-passive"></div> </li> - <li class="px-ui-steps-li" id="step-alarm"> + <li class="px-ui-steps-li" id="step-alarmAddr"> <div class="px-ui-menuitem-div-passive"> <span class="px-ui-steps-number-passive">3</span> <span class="px-ui-steps-title-passive">Alarm</span> @@ -65,14 +65,14 @@ </ul> </div> <div class="step-content"> - <form class="form-horizontal" id="form_resource" role="form"> + <form class="form-horizontal" id="form_resourceAddr" role="form"> <div class="form-group"> <label class="control-label col-sm-3"> <span>Name</span> <span class="required" aria-required="true">*</span> </label> <div class="col-sm-7"> - <input type="text" ms-duplex="currentElement.emsName" name="emsName" class="form-control"/> + <input type="text" ms-duplex="currentElement.name" name="name" class="form-control"/> <span class="help-block"></span> </div> </div> @@ -82,7 +82,7 @@ <span class="required" aria-required="true">*</span> </label> <div class="col-sm-7"> - <select ms-duplex="currentElement.resource.ftptype" name="ftptype" class="form-control"> + <select ms-duplex="currentElement.resourceAddr.ftptype" name="ftptype" class="form-control"> <option value="ftp">ftp</option> <option value="sftp">sftp</option> </select> @@ -95,7 +95,7 @@ <span class="required" aria-required="true">*</span> </label> <div class="col-sm-7"> - <input type="text" ms-duplex="currentElement.resource.ip" name="ip" class="form-control"/> + <input type="text" ms-duplex="currentElement.resourceAddr.ip" name="ip" class="form-control"/> <span class="help-block"></span> </div> </div> @@ -105,7 +105,7 @@ <span class="required" aria-required="true">*</span> </label> <div class="col-sm-7"> - <input type="text" ms-duplex="currentElement.resource.port" name="port" class="form-control"/> + <input type="text" ms-duplex="currentElement.resourceAddr.port" name="port" class="form-control"/> <span class="help-block"></span> </div> </div> @@ -115,7 +115,7 @@ <span class="required" aria-required="true">*</span> </label> <div class="col-sm-7"> - <input type="text" ms-duplex="currentElement.resource.user" name="user" class="form-control" ms-attr-placeholder="urlTip"/> + <input type="text" ms-duplex="currentElement.resourceAddr.user" name="user" class="form-control" ms-attr-placeholder="urlTip"/> <span class="help-block"></span> </div> </div> @@ -124,7 +124,7 @@ <span>Password</span> </label> <div class="col-sm-7"> - <input type="password" class="form-control" rows="3" ms-duplex="currentElement.resource.password" name="password"/> + <input type="password" class="form-control" rows="3" ms-duplex="currentElement.resourceAddr.password" name="password"/> <span class="help-block"></span> </div> </div> @@ -133,7 +133,7 @@ <span>Remotepath</span> </label> <div class="col-sm-7"> - <input class="form-control" rows="3" ms-duplex="currentElement.resource.remotepath" name="remotepath"/> + <input class="form-control" rows="3" ms-duplex="currentElement.resourceAddr.remotepath" name="remotepath"/> <span class="help-block"></span> </div> </div> @@ -142,7 +142,7 @@ <span>Passive</span> </label> <div class="col-sm-7"> - <select class="form-control" rows="3" ms-duplex="currentElement.resource.passive" name="passive"> + <select class="form-control" rows="3" ms-duplex="currentElement.resourceAddr.passive" name="passive"> <option value="true">true</option> <option value="false">false</option> </select> @@ -150,14 +150,14 @@ </div> </div> </form> - <form class="form-horizontal" id="form_performance" role="form" hidden> + <form class="form-horizontal" id="form_performanceAddr" role="form" hidden> <div class="form-group"> <label class="control-label col-sm-3"> <span>Ftptype</span> <span class="required" aria-required="true">*</span> </label> <div class="col-sm-7"> - <select ms-duplex="currentElement.performance.ftptype" name="type" class="form-control"> + <select ms-duplex="currentElement.performanceAddr.ftptype" name="type" class="form-control"> <option value="ftp">ftp</option> <option value="sftp">sftp</option> </select> @@ -170,7 +170,7 @@ <span class="required" aria-required="true">*</span> </label> <div class="col-sm-7"> - <input type="text" ms-duplex="currentElement.performance.ip" name="ip" class="form-control"/> + <input type="text" ms-duplex="currentElement.performanceAddr.ip" name="ip" class="form-control"/> <span class="help-block"></span> </div> </div> @@ -180,7 +180,7 @@ <span class="required" aria-required="true">*</span> </label> <div class="col-sm-7"> - <input type="text" ms-duplex="currentElement.performance.port" name="port" class="form-control"/> + <input type="text" ms-duplex="currentElement.performanceAddr.port" name="port" class="form-control"/> <span class="help-block"></span> </div> </div> @@ -190,7 +190,7 @@ <span class="required" aria-required="true">*</span> </label> <div class="col-sm-7"> - <input type="text" ms-duplex="currentElement.performance.user" name="user" class="form-control" ms-attr-placeholder="urlTip"/> + <input type="text" ms-duplex="currentElement.performanceAddr.user" name="user" class="form-control" ms-attr-placeholder="urlTip"/> <span class="help-block"></span> </div> </div> @@ -199,7 +199,7 @@ <span>Password</span> </label> <div class="col-sm-7"> - <input type="password" class="form-control" rows="3" ms-duplex="currentElement.performance.password" name="password"/> + <input type="password" class="form-control" rows="3" ms-duplex="currentElement.performanceAddr.password" name="password"/> <span class="help-block"></span> </div> </div> @@ -208,7 +208,7 @@ <span>Remotepath</span> </label> <div class="col-sm-7"> - <input class="form-control" rows="3" ms-duplex="currentElement.performance.remotepath" name="remotepath"/> + <input class="form-control" rows="3" ms-duplex="currentElement.performanceAddr.remotepath" name="remotepath"/> <span class="help-block"></span> </div> </div> @@ -217,7 +217,7 @@ <span>Passive</span> </label> <div class="col-sm-7"> - <select class="form-control" rows="3" ms-duplex="currentElement.performance.passive" name="passive"> + <select class="form-control" rows="3" ms-duplex="currentElement.performanceAddr.passive" name="passive"> <option value="true">true</option> <option value="false">false</option> </select> @@ -225,14 +225,14 @@ </div> </div> </form> - <form class="form-horizontal" id="form_alarm" role="form" hidden> + <form class="form-horizontal" id="form_alarmAddr" role="form" hidden> <div class="form-group"> <label class="control-label col-sm-3"> <span>IP</span> <span class="required" aria-required="true">*</span> </label> <div class="col-sm-7"> - <input type="text" ms-duplex="currentElement.alarm.ip" name="ip" class="form-control"/> + <input type="text" ms-duplex="currentElement.alarmAddr.ip" name="ip" class="form-control"/> <span class="help-block"></span> </div> </div> @@ -242,7 +242,7 @@ <span class="required" aria-required="true">*</span> </label> <div class="col-sm-7"> - <input type="text" ms-duplex="currentElement.alarm.port" name="port" class="form-control"/> + <input type="text" ms-duplex="currentElement.alarmAddr.port" name="port" class="form-control"/> <span class="help-block"></span> </div> </div> @@ -252,7 +252,7 @@ <span class="required" aria-required="true">*</span> </label> <div class="col-sm-7"> - <input type="text" ms-duplex="currentElement.alarm.user" name="user" class="form-control" ms-attr-placeholder="urlTip"/> + <input type="text" ms-duplex="currentElement.alarmAddr.user" name="user" class="form-control" ms-attr-placeholder="urlTip"/> <span class="help-block"></span> </div> </div> @@ -261,7 +261,7 @@ <span>Password</span> </label> <div class="col-sm-7"> - <input type="password" class="form-control" rows="3" ms-duplex="currentElement.alarm.password" name="password"/> + <input type="password" class="form-control" rows="3" ms-duplex="currentElement.alarmAddr.password" name="password"/> <span class="help-block"></span> </div> </div> @@ -298,8 +298,8 @@ <i class="fa fa-server fa-5x color_cloud"></i> </div> <div class="m-t-xl"> - <h3 ms-text="el.emsName"></h3> - <!--<div class="card-name"><span ms-text="el.emsName"></span></div>--> + <h3 class="md-text-overflow" ms-attr-title="'name:' + el.name" ms-text="'name:' + el.name"></h3> + <!--<div class="card-name"><span ms-text="el.name"></span></div>--> </div> </div> <div class="panel-footer"> diff --git a/portal/src/main/webapp/extsys/ems/js/commonUtil.js b/portal/src/main/webapp/extsys/ems/js/commonUtil.js index 44a72f3..6a55212 100644 --- a/portal/src/main/webapp/extsys/ems/js/commonUtil.js +++ b/portal/src/main/webapp/extsys/ems/js/commonUtil.js @@ -53,7 +53,7 @@ commonUtil.parseDate = function (dateObj, format) { commonUtil.showMessage = function (message, type) { $.growl({ icon: "fa fa-envelope-o fa-lg", - title: " " + $.i18n.prop("nfv-nso-iui-common-tip"), + title: " Tip:", message: message }, { type: type diff --git a/portal/src/main/webapp/extsys/ems/js/emsController.js b/portal/src/main/webapp/extsys/ems/js/emsController.js index b615b62..1e8ee2c 100644 --- a/portal/src/main/webapp/extsys/ems/js/emsController.js +++ b/portal/src/main/webapp/extsys/ems/js/emsController.js @@ -21,12 +21,10 @@ var vm = avalon.define({ $emsList: [], $newElement: { "emsId": "", - "status": "active", - "emsName": "", + "name": "", "version": "v1.0", "vendor": "ZTE", - "description": "ems description", - "resource": { + "resourceAddr": { "ftptype": "ftp", "ip": "", "port": "", @@ -35,7 +33,7 @@ var vm = avalon.define({ "remotepath": "/opt/Gcp/data/", "passive": true }, - "performance": { + "performanceAddr": { "ftptype": "ftp", "ip": "", "port": "", @@ -44,7 +42,7 @@ var vm = avalon.define({ "remotepath": "", "passive": true }, - "alarm": { + "alarmAddr": { "ip": "", "port": 2000, "user": "root", @@ -73,10 +71,10 @@ var vm = avalon.define({ "url": /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/ }, $restUrl: { - queryEmsInfoUrl: "/esrui/extsys/ems/mock-data/ems.json",//'/onapapi/aai/esr/v1/ems', - addVnfmInfoUrl: '/onapapi/aai/esr/v1/ems', - updateVnfmInfoUrl: '/onapapi/aai/esr/v1/ems/', - delVnfmInfoUrl: '/onapapi/aai/esr/v1/ems/', + queryEmsInfoUrl: "/api/aai-esr-server/v1/emses", + addVnfmInfoUrl: '/api/aai-esr-server/v1/emses', + updateVnfmInfoUrl: '/api/aai-esr-server/v1/emses/{emsId}', + delVnfmInfoUrl: '/api/aai-esr-server/v1/emses/{emsId}', queryMocUrl: '', queryVimUrl: '/onapapi/aai/esr/v1/vims' }, @@ -106,18 +104,18 @@ var vm = avalon.define({ }); }, $nextStep: function () { - if(vm.currentStep == 1 && !vm.validate("resource")){ + if(vm.currentStep == 1 && !vm.validate("resourceAddr")){ return false; - } else if(vm.currentStep == 2 && !vm.validate("performance")){ + } else if(vm.currentStep == 2 && !vm.validate("performanceAddr")){ return false; } vm.currentStep ++; vm.showStep(); }, $preStep: function () { - if(vm.currentStep == 2 && !vm.validate("resource")){ + if(vm.currentStep == 2 && !vm.validate("resourceAddr")){ return false; - } else if(vm.currentStep == 3 && !vm.validate("alarm")){ + } else if(vm.currentStep == 3 && !vm.validate("alarmAddr")){ return false; } vm.currentStep --; @@ -132,17 +130,17 @@ var vm = avalon.define({ }; switch (vm.currentStep){ case 1: - show("resource"); + show("resourceAddr"); $("#btnSave, #btnPreStep").hide(); $("#btnNextStep").show(); break; case 2: - show("performance"); + show("performanceAddr"); $("#btnSave").hide(); $("#btnNextStep, #btnPreStep").show(); break; case 3: - show("alarm"); + show("alarmAddr"); $("#btnNextStep").hide(); $("#btnSave, #btnPreStep").show(); break; @@ -163,13 +161,15 @@ var vm = avalon.define({ }, dismiss: function () { if(vm.currentIndex !== -1){ - vm.currentElement.emsName = vm.$emsList[vm.currentIndex].emsName; + vm.currentElement.name = vm.$emsList[vm.currentIndex].name; } $("#addEmsDlg").modal("hide"); }, $saveEMS: function () { var form = $('#vnfm_form'); - //TODO valiate + if(!vm.validate("alarmAddr")){ + return; + } vm.server_rtn.info_block = true; vm.server_rtn.warning_block = false; @@ -187,22 +187,23 @@ var vm = avalon.define({ updateEMS: function (index) { vm.saveType = "update"; vm.currentIndex = index; - vm.currentElement = vm.emsInfo[index]; + vm.fillElement(vm.emsInfo[vm.currentIndex], vm.currentElement); vm.$showTable(); }, delEMS: function (id, index) { bootbox.confirm($.i18n.prop("nfv-ems-iui-message-delete-confirm"), function (result) { if (result) { - vm.emsInfo.splice(index, 1); - vm.$emsList.splice(index, 1); - console.log(vm.emsInfo[index]); - /* $.ajax({ + var currentElementId = vm.emsInfo[index]["emsId"]; + var url = vm.$restUrl.delVnfmInfoUrl.replace("{emsId}", currentElementId); + $.ajax({ type: "DELETE", - url: vm.$restUrl.delVnfmInfoUrl + id, + url: url, dataType: "json", success: function (data, statusText, jqXHR) { if (jqXHR.status == "204") { - + vm.emsInfo.splice(index, 1); + vm.$emsList.splice(index, 1); + console.log(vm.emsInfo[index]); commonUtil.showMessage($.i18n.prop("nfv-ems-iui-message-delete-success"), "success"); } else { commonUtil.showMessage($.i18n.prop("nfv-ems-iui-message-delete-fail"), "warning"); @@ -211,7 +212,7 @@ var vm = avalon.define({ error: function () { commonUtil.showMessage($.i18n.prop("nfv-ems-iui-message-delete-fail"), "warning"); } - });*/ + }); } }); }, @@ -236,91 +237,107 @@ var vm = avalon.define({ }, postEMS: function () { var emsSave = vm.getEMSSave(); - if(!vm.validate("alarm")){ - return false; - } emsSave.emsId = Math.floor(Math.random() * 100000) / 100000; - vm.emsInfo.push(emsSave); - vm.$emsList.push(emsSave); - console.log(emsSave); - return true; - /*$.ajax({ + var res = false; + $.ajax({ type: "POST", url: vm.$restUrl.addVnfmInfoUrl, - data: JSON.stringify(vm.currentElement), + data: JSON.stringify(emsSave), dataType: "json", contentType: "application/json", - success: function (data) { + success: function (data, statusText, jqXHR) { vm.server_rtn.info_block = false; vm.server_rtn.warning_block = false; - if (data) { - vm.vnfmInfo = []; - vm.$initTable(); + if (jqXHR.status === 200) { + vm.emsInfo.push(emsSave); + vm.$emsList.push(emsSave); + res = true; + // vm.$initTable(); $('#addEmsDlg').modal('hide'); commonUtil.showMessage(vm.$htmlText.saveSuccess, "success"); } else { + res = false; vm.server_rtn.warning_block = true; vm.server_rtn.rtn_info = vm.$htmlText.saveFail; commonUtil.showMessage(vm.$htmlText.saveFail, "failed"); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { + res = false; vm.server_rtn.warning_block = true; vm.server_rtn.rtn_info = textStatus + ":" + errorThrown; vm.server_rtn.info_block = false; } - });*/ + }); + return res; }, putEMS: function () { - console.log(vm.getEMSSave()); - if(!vm.validate("alarm")){ - return false; - } - return true; - /* $.ajax({ + var currentElement = vm.getEMSSave(); + var res = false; + var url = vm.$restUrl.updateVnfmInfoUrl.replace("{emsId}", currentElement.emsId); + $.ajax({ type: "PUT", - url: vm.$restUrl.updateVnfmInfoUrl + vm.currentElement.emsId, - data: JSON.stringify(vm.currentElement), + url: url, + data: JSON.stringify(currentElement), dataType: "json", contentType: "application/json", success: function (data) { vm.server_rtn.info_block = false; vm.server_rtn.warning_block = false; if (data) { - for (var i = 0; i < vm.vnfmInfo.length; i++) { - if (vm.vnfmInfo[i].vnfmId == vm.addVnfm.vnfmId) { - vm.vnfmInfo[i].name = vm.addVnfm.name; - vm.vnfmInfo[i].vimId = $("#vimId").val(); - vm.vnfmInfo[i].vendor = vm.addVnfm.vendor; - vm.vnfmInfo[i].version = vm.addVnfm.version; - vm.vnfmInfo[i].certificateUrl = vm.addVnfm.certificateUrl; - vm.vnfmInfo[i].description = vm.addVnfm.description; - vm.vnfmInfo[i].url = vm.addVnfm.url; - vm.vnfmInfo[i].userName = vm.addVnfm.userName; - vm.vnfmInfo[i].password = vm.addVnfm.password; - } - } + vm.fillElement(currentElement, vm.emsInfo[vm.currentIndex]); + res = true; $('#addEmsDlg').modal('hide'); commonUtil.showMessage(vm.$htmlText.updateSuccess, "success"); } else { + res = false; vm.server_rtn.warning_block = true; vm.server_rtn.rtn_info = vm.$htmlText.updateFail; commonUtil.showMessage(vm.$htmlText.updateFail, "failed"); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { + res = false; vm.server_rtn.warning_block = true; vm.server_rtn.rtn_info = textStatus + ":" + errorThrown; vm.server_rtn.info_block = false; } - });*/ + }); + return res; + }, + fillElement: function (sourceElement, targetElement) { + targetElement["emsId"] = sourceElement["emsId"]; + targetElement["name"] = sourceElement["name"]; + targetElement["version"] = sourceElement["version"]; + targetElement["vendor"] = sourceElement["vendor"]; + targetElement["resourceAddr"]["ftptype"] = sourceElement["resourceAddr"]["ftptype"]; + targetElement["resourceAddr"]["ip"] = sourceElement["resourceAddr"]["ip"]; + targetElement["resourceAddr"]["port"] = sourceElement["resourceAddr"]["port"]; + targetElement["resourceAddr"]["user"] = sourceElement["resourceAddr"]["user"]; + targetElement["resourceAddr"]["password"] = sourceElement["resourceAddr"]["password"]; + targetElement["resourceAddr"]["remotepath"] = sourceElement["resourceAddr"]["remotepath"]; + targetElement["resourceAddr"]["passive"] = sourceElement["resourceAddr"]["passive"]; + + targetElement["performanceAddr"]["ftptype"] = sourceElement["performanceAddr"]["ftptype"]; + targetElement["performanceAddr"]["ip"] = sourceElement["performanceAddr"]["ip"]; + targetElement["performanceAddr"]["port"] = sourceElement["performanceAddr"]["port"]; + targetElement["performanceAddr"]["user"] = sourceElement["performanceAddr"]["user"]; + targetElement["performanceAddr"]["password"] = sourceElement["performanceAddr"]["password"]; + targetElement["performanceAddr"]["remotepath"] = sourceElement["performanceAddr"]["remotepath"]; + targetElement["performanceAddr"]["passive"] = sourceElement["performanceAddr"]["passive"]; + + targetElement["alarmAddr"]["ip"] = sourceElement["alarmAddr"]["ip"]; + targetElement["alarmAddr"]["port"] = sourceElement["alarmAddr"]["port"]; + targetElement["alarmAddr"]["user"] = sourceElement["alarmAddr"]["user"]; + targetElement["alarmAddr"]["password"] = sourceElement["alarmAddr"]["password"]; + }, getEMSSave: function () { var emsSave = $.extend(true, {}, vm.currentElement.$model); - emsSave.alarm = vm.currentElement.alarm.$model; - emsSave.resource = vm.currentElement.resource.$model; - emsSave.performance = vm.currentElement.performance.$model; + emsSave.alarmAddr = vm.currentElement.alarmAddr.$model; + emsSave.resourceAddr = vm.currentElement.resourceAddr.$model; + emsSave.performanceAddr = vm.currentElement.performanceAddr.$model; return emsSave; } }); diff --git a/portal/src/main/webapp/extsys/ems/mock-data/ems.json b/portal/src/main/webapp/extsys/ems/mock-data/ems.json index d02e57e..ff7f56e 100644 --- a/portal/src/main/webapp/extsys/ems/mock-data/ems.json +++ b/portal/src/main/webapp/extsys/ems/mock-data/ems.json @@ -38,7 +38,7 @@ "version": "v1.0",
"vendor": "ZTE",
"description": "ems description",
- "resouce": {
+ "resource": {
"ftptype": "sftp",
"ip": "10.44.55.15",
"port": "2100",
|