From 88c9e674d224e7f3ab4a01ab3d812e9e0137b074 Mon Sep 17 00:00:00 2001 From: "qin.liang(10184303)" Date: Thu, 17 Aug 2017 19:17:52 +0800 Subject: AAI-65 Realize the EMS register portal Change-Id: I8e7e7db97f46ee99ec05832882a90701f2f02551 Issue-ID: AAI-65 Signed-off-by: qin.liang(10184303) --- esr/src/main/webapp/extsys/ems/css/ems.css | 81 +++- esr/src/main/webapp/extsys/ems/emsView.html | 390 ++++++++++++------- .../ems/i18n/nfv-nso-iui-i18n-en-US.properties | 74 ++-- .../ems/i18n/nfv-nso-iui-i18n-zh-CN.properties | 75 ++-- esr/src/main/webapp/extsys/ems/js/ems-validate.js | 12 +- esr/src/main/webapp/extsys/ems/js/emsController.js | 424 ++++++++++++--------- esr/src/main/webapp/extsys/ems/js/emsUtil.js | 78 ---- esr/src/main/webapp/extsys/ems/js/loadi18n_nsoc.js | 2 +- esr/src/main/webapp/extsys/ems/mock-data/ems.json | 66 ++++ 9 files changed, 721 insertions(+), 481 deletions(-) delete mode 100644 esr/src/main/webapp/extsys/ems/js/emsUtil.js create mode 100644 esr/src/main/webapp/extsys/ems/mock-data/ems.json (limited to 'esr/src') diff --git a/esr/src/main/webapp/extsys/ems/css/ems.css b/esr/src/main/webapp/extsys/ems/css/ems.css index 9dd1e5f..6838e7e 100644 --- a/esr/src/main/webapp/extsys/ems/css/ems.css +++ b/esr/src/main/webapp/extsys/ems/css/ems.css @@ -311,12 +311,10 @@ input[name="daterange"] { } td.details-control { - background: url('../images/details_open.png') no-repeat center center; cursor: pointer; } tr.shown td.details-control { - background: url('../images/details_close.png') no-repeat center center; } .details table td { @@ -403,10 +401,10 @@ input.pagination-panel-input { animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; + -webkit-animation-delay: 0.1s; } .hpanel { - background-color: none; border: none; box-shadow: none; margin-bottom: 25px; @@ -421,13 +419,15 @@ input.pagination-panel-input { } .h-200 { - min-height: 220px; + min-height: 120px; } .m-t-xl { margin-top: 40px; } - +.card-name{ + text-align: center; +} .m-t-xl div { margin-bottom: 15px; } @@ -476,11 +476,78 @@ h3 { font-weight: 600; margin-bottom: 15px; } - .hpanel_show { background-color: #f7f9fa; } - .vnfm-padding { padding-left: 0; +} +.step-content{ + margin-top: 20px; +} +.px-ui-steps{ + height: 36px; +} +.px-ui-horizon-ul-horizon{ + display: flex; + box-orient: horizontal; + margin: 0; + padding: 0; +} +.px-ui-steps-li{ + list-style: none; + position: relative; + width: 386px; + height: 24px; + line-height: 24px; + float: left; + margin-right: 0; +} +.px-ui-menuitem-div-passive{ + position: absolute; + top: 50%; + left: 50%; + min-width: 120px; + -webkit-transform: translate(-50%,-50%); + -moz-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + -o-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); +} +.step-active div:first-child span:last-child{ + color: #4d5761; +} +.step-active div:last-child, .step-active div:first-child span:first-child{ + background: #33bcff; +} +.px-ui-steps-number-passive{ + width: 24px; + height: 24px; + border-radius: 50%; + display: inline-block; + margin-right: 10px; + float: left; + color: #fff; + text-align: center; + background: #ddd; +} +.px-ui-steps-title-passive{ + white-space: nowrap; +} +.px-ui-steps-title-active{ + color: #4d5761; +} +.px-ui-steps-title-passive{ + color: #7c868d; +} + +.px-ui-underline-passive{ + width: 100%; + height: 2px; + margin-top: 35px; + position: absolute; + background: #ddd; +} +#btnPreStep, #btnSave{ + display: none; } \ No newline at end of file diff --git a/esr/src/main/webapp/extsys/ems/emsView.html b/esr/src/main/webapp/extsys/ems/emsView.html index 3e5216a..56a364e 100644 --- a/esr/src/main/webapp/extsys/ems/emsView.html +++ b/esr/src/main/webapp/extsys/ems/emsView.html @@ -23,145 +23,256 @@ - - - +
-
-
-
-
+
+
- - + +
-

-
：
-
URL：
+

+
- - +
@@ -210,9 +314,8 @@
- - + +
@@ -234,7 +337,6 @@ - \ No newline at end of file diff --git a/esr/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-en-US.properties b/esr/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-en-US.properties index 6d10a1d..f39749a 100644 --- a/esr/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-en-US.properties +++ b/esr/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-en-US.properties @@ -14,42 +14,42 @@ # limitations under the License. # -//vnfm -nfv-vnfm-iui-title=VNFM Manage -nfv-vnfm-iui-message-title=vnfm info -nfv-vnfm-iui-message-query-fail=Query vnfm failed. -nfv-vnfm-iui-message-save-success=Save successfully. -nfv-vnfm-iui-message-save-fail=Save failed. -nfv-vnfm-iui-message-vnfm-already-exists=vnfm already exists. -nfv-vnfm-iui-message-update-success=Update successfully. -nfv-vnfm-iui-message-update-fail=Update failed. -nfv-vnfm-iui-message-delete-confirm=Do you want to delete the current vnfm? -nfv-vnfm-iui-message-delete-success=Vnfm deleted successfully. -nfv-vnfm-iui-message-delete-fail=Vnfm deleted failed. +//ems +nfv-ems-iui-title=EMS Manage +nfv-ems-iui-message-title=Ems info +nfv-ems-iui-message-query-fail=Query ems failed. +nfv-ems-iui-message-save-success=Save successfully. +nfv-ems-iui-message-save-fail=Save failed. +nfv-ems-iui-message-ems-already-exists=Ems already exists. +nfv-ems-iui-message-update-success=Update successfully. +nfv-ems-iui-message-update-fail=Update failed. +nfv-ems-iui-message-delete-confirm=Do you want to delete the current ems? +nfv-ems-iui-message-delete-success=Ems deleted successfully. +nfv-ems-iui-message-delete-fail=Ems deleted failed. -nfv-vnfm-iui-test-update=Modify vnfm info -nfv-vnfm-iui-text-register=Register vnfm info -nfv-vnfm-iui-text-name=Name -nfv-vnfm-iui-text-type=type -nfv-vnfm-iui-text-version=version -nfv-vnfm-iui-text-certificateUrl=certificate URL -nfv-vnfm-iui-text-vendor=Vendor -nfv-vnfm-iui-text-userName=Username -nfv-vnfm-iui-text-password=Password -nfv-vnfm-iui-text_description=Description -nfv-vnfm-iui-text-cancelBtn=cancel -nfv-vnfm-iui-text-saveBtn=save -nfv-vnfm-iui-text-registerBtn=Register -nfv-vnfm-iui-text-status-normal=Normal -nfv-vnfm-iui-text-status-fail=Alarm -nfv-vnfm-iui-text-total=Total -nfv-vnfm-iui-text-total-vnfm= of vnfm +nfv-ems-iui-text-update=Modify ems info +nfv-ems-iui-text-register=Register ems info +nfv-ems-iui-text-name=Name +nfv-ems-iui-text-type=type +nfv-ems-iui-text-version=version +nfv-ems-iui-text-certificateUrl=certificate URL +nfv-ems-iui-text-vendor=Vendor +nfv-ems-iui-text-userName=Username +nfv-ems-iui-text-password=Password +nfv-ems-iui-text_description=Description +nfv-ems-iui-text-cancelBtn=cancel +nfv-ems-iui-text-saveBtn=save +nfv-ems-iui-text-registerBtn=Register +nfv-ems-iui-text-status-normal=Normal +nfv-ems-iui-text-status-fail=Abnormal +nfv-ems-iui-text-total=Total +nfv-ems-iui-text-total-ems= of ems -nfv-vnfm-iui-validate-name=Please enter a name -nfv-vnfm-iui-validate-type=Please enter the vnfm type -nfv-vnfm-iui-validate-version=Please enter version -nfv-vnfm-iui-validate-vendor=Please enter vendor -nfv-vnfm-iui-validate-vim=Please select a VIM -nfv-vnfm-iui-validate-url-required=Please enter the URL -nfv-vnfm-iui-validate-url=Please enter the right URL -nfv-vnfm-iui-text-url-tip=Example: http://10.0.0.1 \ No newline at end of file +nfv-ems-iui-validate-name=Please enter a name +nfv-ems-iui-validate-type=Please enter the ems type +nfv-ems-iui-validate-version=Please enter version +nfv-ems-iui-validate-vendor=Please enter vendor +nfv-ems-iui-validate-ems=Please select a EMS +nfv-ems-iui-validate-url-required=Please enter the URL +nfv-ems-iui-validate-url=Please enter the right URL +nfv-ems-iui-text-url-tip=Example: http://10.0.0.1 diff --git a/esr/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-zh-CN.properties b/esr/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-zh-CN.properties index 6adad99..e6bdacd 100644 --- a/esr/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-zh-CN.properties +++ b/esr/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-zh-CN.properties @@ -14,42 +14,41 @@ # limitations under the License. # -//vnfm -nfv-vnfm-iui-title=VNFM管理 -nfv-vnfm-iui-message-title=vnfm信息 -nfv-vnfm-iui-message-query-fail=查询vnfm失败。 -nfv-vnfm-iui-message-save-success=保存成功。 -nfv-vnfm-iui-message-save-fail=保存失败。 -nfv-vnfm-iui-message-vnfm-already-exists=vnfm 已经存在 -nfv-vnfm-iui-message-update-success=修改成功。 -nfv-vnfm-iui-message-update-fail=修改失败。 -nfv-vnfm-iui-message-delete-confirm=确定删除所选vnfm信息？ -nfv-vnfm-iui-message-delete-success=删除成功 -nfv-vnfm-iui-message-delete-fail=删除失败 +//ems +nfv-ems-iui-title=EMS管理 +nfv-ems-iui-message-title=EMS信息 +nfv-ems-iui-message-query-fail=查询EMS失败。 +nfv-ems-iui-message-save-success=保存成功。 +nfv-ems-iui-message-save-fail=保存失败。 +nfv-ems-iui-message-ems-already-exists=EMS已经存在 +nfv-ems-iui-message-update-success=修改成功。 +nfv-ems-iui-message-update-fail=修改失败。 +nfv-ems-iui-message-delete-confirm=确定删除所选ems信息？ +nfv-ems-iui-message-delete-success=删除成功 +nfv-ems-iui-message-delete-fail=删除失败 +nfv-ems-iui-text-update=修改EMS信息 +nfv-ems-iui-text-register=注册EMS信息 +nfv-ems-iui-text-name=名称 +nfv-ems-iui-text-type=类型 +nfv-ems-iui-text-version=版本 +nfv-ems-iui-text-certificateUrl=认证url +nfv-ems-iui-text_description=描述 +nfv-ems-iui-text-vendor=厂商 +nfv-ems-iui-text-userName=接入用户 +nfv-ems-iui-text-password=接入密码 +nfv-ems-iui-text-cancelBtn=取消 +nfv-ems-iui-text-saveBtn=保存 +nfv-ems-iui-text-registerBtn=注册EMS +nfv-ems-iui-text-status-normal=正常 +nfv-ems-iui-text-status-fail=报警 +nfv-ems-iui-text-total=共 +nfv-ems-iui-text-total-ems=EMS -nfv-vnfm-iui-test-update=修改vnfm信息 -nfv-vnfm-iui-text-register=注册vnfm信息 -nfv-vnfm-iui-text-name=名称 -nfv-vnfm-iui-text-type=类型 -nfv-vnfm-iui-text-version=版本 -nfv-vnfm-iui-text-certificateUrl=认证url -nfv-vnfm-iui-text_description=描述 -nfv-vnfm-iui-text-vendor=厂商 -nfv-vnfm-iui-text-userName=接入用户 -nfv-vnfm-iui-text-password=接入密码 -nfv-vnfm-iui-text-cancelBtn=取消 -nfv-vnfm-iui-text-saveBtn=保存 -nfv-vnfm-iui-text-registerBtn=注册vnfm -nfv-vnfm-iui-text-status-normal=正常 -nfv-vnfm-iui-text-status-fail=报警 -nfv-vnfm-iui-text-total=共 -nfv-vnfm-iui-text-total-vnfm= vnfm - -nfv-vnfm-iui-validate-name=请输入名称 -nfv-vnfm-iui-validate-type=请输入vnfm类型 -nfv-vnfm-iui-validate-version=请输入版本号 -nfv-vnfm-iui-validate-vendor=请输入厂商 -nfv-vnfm-iui-validate-vim=请选择VIM -nfv-vnfm-iui-validate-url-required=请输入URL -nfv-vnfm-iui-validate-url=请输入正确的URL -nfv-vnfm-iui-text-url-tip=例如：http://10.0.0.1 \ No newline at end of file +nfv-ems-iui-validate-name=请输入名称 +nfv-ems-iui-validate-type=请输入EMS类型 +nfv-ems-iui-validate-version=请输入版本号 +nfv-ems-iui-validate-vendor=请输入厂商 +nfv-ems-iui-validate-vim=请选择EMS +nfv-ems-iui-validate-url-required=请输入URL +nfv-ems-iui-validate-url=请输入正确的URL +nfv-ems-iui-text-url-tip=例如：http://10.0.0.1 \ No newline at end of file diff --git a/esr/src/main/webapp/extsys/ems/js/ems-validate.js b/esr/src/main/webapp/extsys/ems/js/ems-validate.js index 627d6d5..7cca638 100644 --- a/esr/src/main/webapp/extsys/ems/js/ems-validate.js +++ b/esr/src/main/webapp/extsys/ems/js/ems-validate.js @@ -47,20 +47,20 @@ $(function () { }, messages: { name: { - required: $.i18n.prop("nfv-vnfm-iui-validate-name") + required: $.i18n.prop("nfv-ems-iui-validate-name") }, type: { - required: $.i18n.prop("nfv-vnfm-iui-validate-type") + required: $.i18n.prop("nfv-ems-iui-validate-type") }, version: { - required: $.i18n.prop("nfv-vnfm-iui-validate-version") + required: $.i18n.prop("nfv-ems-iui-validate-version") }, vendor: { - required: $.i18n.prop("nfv-vnfm-iui-validate-vendor") + required: $.i18n.prop("nfv-ems-iui-validate-vendor") }, url: { - required: $.i18n.prop("nfv-vnfm-iui-validate-url-required"), - url: $.i18n.prop("nfv-vnfm-iui-validate-url") + required: $.i18n.prop("nfv-ems-iui-validate-url-required"), + url: $.i18n.prop("nfv-ems-iui-validate-url") } }, errorPlacement: function (error, element) { // render error placement for each input type diff --git a/esr/src/main/webapp/extsys/ems/js/emsController.js b/esr/src/main/webapp/extsys/ems/js/emsController.js index 567af53..b615b62 100644 --- a/esr/src/main/webapp/extsys/ems/js/emsController.js +++ b/esr/src/main/webapp/extsys/ems/js/emsController.js @@ -14,12 +14,45 @@ * limitations under the License. */ -var vm = avalon - .define({ +var vm = avalon.define({ $id: "emsController", emsInfo: [], - //mocSelectItems : [], + currentElement: {}, + $emsList: [], + $newElement: { + "emsId": "", + "status": "active", + "emsName": "", + "version": "v1.0", + "vendor": "ZTE", + "description": "ems description", + "resource": { + "ftptype": "ftp", + "ip": "", + "port": "", + "user": "root", + "password": "", + "remotepath": "/opt/Gcp/data/", + "passive": true + }, + "performance": { + "ftptype": "ftp", + "ip": "", + "port": "", + "user": "root", + "password": "", + "remotepath": "", + "passive": true + }, + "alarm": { + "ip": "", + "port": 2000, + "user": "root", + "password": "" + } + }, vimSelectItems: [], + saveType: "add", server_rtn: { info_block: false, warning_block: false, @@ -27,15 +60,23 @@ var vm = avalon $RTN_SUCCESS: "RTN_SUCCESS", $RTN_FAILED: "RTN_FAILED" }, - $Status: { + modalTitle: $.i18n.prop("nfv-ems-iui-text-register"), + urlTip: "", + currentStep: 1, + status: { success: "active", failed: "inactive" }, + $format: { + "ipv4": /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/, + "port": /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/, + "url": /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/ + }, $restUrl: { - queryEmsInfoUrl: '/onapapi/aai/esr/v1/emss', - addEmsInfoUrl: '/onapapi/aai/esr/v1/emss', - updateEmsInfoUrl: '/onapapi/aai/esr/v1/emss/', - delEmsInfoUrl: '/onapapi/aai/esr/v1/emss/', + 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/', queryMocUrl: '', queryVimUrl: '/onapapi/aai/esr/v1/vims' }, @@ -50,196 +91,239 @@ var vm = avalon $.ajax({ "type": 'GET', "url": vm.$restUrl.queryEmsInfoUrl, - //"dataType": "json", + "dataType": "json", "success": function (resp) { - for (var i = 0; i < resp.length; i++) { - resp[i].status = vm.$Status.success; - } vm.emsInfo = resp; + vm.$emsList = $.extend(true, [], resp) ; }, error: function (XMLHttpRequest, textStatus, errorThrown) { bootbox.alert($.i18n.prop("nfv-ems-iui-message-query-fail") + "：" + textStatus + ":" + errorThrown); return; }, complete: function () { - emsUtil.tooltipEmsStatus(); + $("[data-toggle='tooltip']").tooltip(); } }); }, - - $initVim: function () { - $.ajax({ - type: 'get', - url: vm.$restUrl.queryVimUrl, - dataType: 'json', - success: function (resp) { - if (resp) { - vm.vimSelectItems = resp; - } - vm.vimSelectItems.push({"vimId": "", "name": ""}); - } - }); + $nextStep: function () { + if(vm.currentStep == 1 && !vm.validate("resource")){ + return false; + } else if(vm.currentStep == 2 && !vm.validate("performance")){ + return false; + } + vm.currentStep ++; + vm.showStep(); }, - addEms: { - title: $.i18n.prop("nfv-ems-iui-text-register"), - emsId: "", - name: "", - type: "", - //moc : "", - nameReadonly : false, - vimId: "", - //vimVisiable : false, - vendor: "", - version: "", - description: "", - certificateUrl: "", - url: "", - urlTip: $.i18n.prop("nfv-ems-iui-text-url-tip"), - userName: "", - password: "", - saveType: "add", - status: "" - }, - $showEmsTable: function () { - vm.addEms.title = $.i18n.prop("nfv-ems-iui-text-register"), - vm.addEms.emsId = ""; - vm.addEms.name = ""; - vm.addEms.type = ""; - vm.addEms.nameReadonly = false; - vm.addEms.vimId = ""; - vm.addEms.vendor = ""; - vm.addEms.version = ""; - vm.addEms.description = ""; - vm.addEms.certificateUrl = ""; - vm.addEms.url = ""; - vm.addEms.userName = ""; - vm.addEms.password = ""; - vm.addEms.saveType = "add"; - vm.server_rtn.warning_block = false; - vm.server_rtn.info_block = false; - vm.$initVim(); - $(".form-group").each(function () { - $(this).removeClass('has-success'); - $(this).removeClass('has-error'); - $(this).find(".help-block[id]").remove(); - }); + $preStep: function () { + if(vm.currentStep == 2 && !vm.validate("resource")){ + return false; + } else if(vm.currentStep == 3 && !vm.validate("alarm")){ + return false; + } + vm.currentStep --; + vm.showStep(); + }, + showStep: function () { + var show = function (filter) { + $(".px-ui-steps ul li.step-active").removeClass("step-active"); + $("#step-" + filter).addClass("step-active"); + $(".step-content form").hide(); + $("#form_" + filter).show(); + }; + switch (vm.currentStep){ + case 1: + show("resource"); + $("#btnSave, #btnPreStep").hide(); + $("#btnNextStep").show(); + break; + case 2: + show("performance"); + $("#btnSave").hide(); + $("#btnNextStep, #btnPreStep").show(); + break; + case 3: + show("alarm"); + $("#btnNextStep").hide(); + $("#btnSave, #btnPreStep").show(); + break; + } + }, + $registerEMS: function () { + vm.currentElement = $.extend(true, {}, vm.$newElement); + vm.currentIndex = -1; + vm.saveType = "add"; + vm.modalTitle = $.i18n.prop("nfv-ems-iui-text-register"); + vm.$showTable(); + }, + $showTable: function () { + vm.currentStep = 1; + vm.showStep(); + $(".form-group").removeClass('has-success').removeClass('has-error'); $("#addEmsDlg").modal("show"); }, - // $getMocName : function(mocId) { - // var items = vm.mocSelectItems; - // for(var i=0;i