From 8f6e16f7d9177f45d4df10d42f88366e2f033107 Mon Sep 17 00:00:00 2001 From: "qin.liang(10184303)" Date: Thu, 24 Aug 2017 10:17:44 +0800 Subject: AAI-180 Modify the VIM register portal Change-Id: Ifcc9bb1f6cb4c47ddcb534c6d4b467071e48ce84 Issue-ID: AAI-180 Signed-off-by: qin.liang(10184303) --- esr/src/main/webapp/extsys/vim/css/vim.css | 106 +++++++-- .../vim/i18n/roc-vim-iui-i18n-en-US.properties | 3 +- esr/src/main/webapp/extsys/vim/js/vimController.js | 236 ++++++++------------- esr/src/main/webapp/extsys/vim/mock-data/vim.json | 44 ++++ esr/src/main/webapp/extsys/vim/vimView.html | 137 ++++++------ 5 files changed, 303 insertions(+), 223 deletions(-) create mode 100644 esr/src/main/webapp/extsys/vim/mock-data/vim.json (limited to 'esr/src/main/webapp/extsys') diff --git a/esr/src/main/webapp/extsys/vim/css/vim.css b/esr/src/main/webapp/extsys/vim/css/vim.css index 373cd92..0998451 100644 --- a/esr/src/main/webapp/extsys/vim/css/vim.css +++ b/esr/src/main/webapp/extsys/vim/css/vim.css @@ -53,11 +53,6 @@ body { color: #fff; } -a { - font-weight: bold; - text-decoration: none; -} - p { color: #444; font-size: 14px; @@ -227,6 +222,18 @@ div[data-name="cond_zone"] div { margin-bottom: 15px; } +div[data-name="res-conds-zone"] { + display: inline; +} + +div[data-name="res-conds-zone"] select, div[data-name="res-conds-zone"] span { + /**height:33px;*/ + margin-left: 15px; + color: #5b9bd1; + border-color: #ccc; + font-weight: bold; +} + .input { width: 250px; height: 34px; @@ -304,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 { @@ -396,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; @@ -414,12 +419,18 @@ 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; +} .text-success { color: #0d638f; @@ -461,16 +472,79 @@ h3 { min-width: 30px !important; } -.refresh-status-text { - float: right; -} - -.font { +.font-bold { + font-weight: 600; margin-bottom: 15px; } - .hpanel_show { - cursor: pointer; 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; +} \ No newline at end of file diff --git a/esr/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-en-US.properties b/esr/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-en-US.properties index 8773679..de4baa3 100644 --- a/esr/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-en-US.properties +++ b/esr/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-en-US.properties @@ -30,7 +30,8 @@ com_zte_ums_eco_roc_vim_status_update_time=Status update time: com_zte_ums_eco_roc_vim_register=Register com_zte_ums_eco_roc_vim_normal=Normal com_zte_ums_eco_roc_vim_abnormal=Abnormal -com_zte_ums_eco_roc_vim_display_type=Type: +com_zte_ums_eco_roc_vim_display_type=Cloud type: +com_zte_ums_eco_roc_vim_display_version=Cloud region version: com_zte_ums_eco_roc_vim_total=Total com_zte_ums_eco_roc_vim_metric=vims com_zte_ums_eco_roc_vim_register_info=Register diff --git a/esr/src/main/webapp/extsys/vim/js/vimController.js b/esr/src/main/webapp/extsys/vim/js/vimController.js index 612a9ef..486936c 100644 --- a/esr/src/main/webapp/extsys/vim/js/vimController.js +++ b/esr/src/main/webapp/extsys/vim/js/vimController.js @@ -17,18 +17,33 @@ var vm = avalon .define({ $id: "vimController", vimInfo: [], - //vimStatusTime:$.i18n.prop('com_zte_ums_eco_roc_vim_getting_info'), - // ifSearch : 0, - // server_rtn:{ - // info_block:false, - // warning_block:false, - // rtn_info:"", - // $RTN_SUCCESS:"RTN_SUCCESS", - // $RTN_FAILED:"RTN_FAILED", - // wait : $.i18n.prop('com_zte_ums_eco_roc_vim_checking_status') - // }, executeWait: {clazz: 'alert-info', visible: true, text: $.i18n.prop('com_zte_ums_eco_roc_vim_checking_status')}, executeError: {clazz: 'alert-danger', visible: true, text: 'error'}, + currentElement: {}, + currentIndex: -1, + saveType: "add", + modalTitle: $.i18n.prop('com_zte_ums_eco_roc_vim_register'), + $blankElement: { + "cloud-owner": "ZTE", + "status": "active", + "cloud-region-id": "", + "cloud-type": "openstack", + "cloud-region-version": "v1.0", + "owner-defined-type": "", + "cloud-zone": "", + "complex-name": "", + "cloud-extra-info": "", + "auth-info-items": [ + { + "username": "", + "password": "", + "auth-url": "", + "ssl-cacert": "", + "ssl-insecure": "", + "cloud-domain": "" + } + ] + }, $Status: { success: "active", failed: "inactive", @@ -37,7 +52,7 @@ var vm = avalon }, isSave: true, action: {ADD: 'add', UPDATE: 'update'}, - $queryVimInfoUrl: '/onapapi/aai/esr/v1/vims', + $queryVimInfoUrl: 'mock-data/vim.json',//'/onapapi/aai/esr/v1/vims', $addVimInfoUrl: '/onapapi/aai/esr/v1/vims/', $updateVimInfoUrl: '/onapapi/aai/esr/v1/vims/', $delVimInfoUrl: '/onapapi/aai/esr/v1/vims/{vim_id}', @@ -45,7 +60,6 @@ var vm = avalon $.ajax({ "type": 'get', "url": vm.$queryVimInfoUrl, - //"dataType": "json", "success": function (resp, statusText, jqXHR) { if (jqXHR.status == "200") { vm.vimInfo = resp; @@ -66,124 +80,52 @@ var vm = avalon }); }, - $vimType: { - condName: $.i18n.prop("com_zte_ums_eco_roc_vim_type"), - component_type: 'select', - selectItems: [ - { - cond_value: 'vmware', - name: "vmware", - value: true - }, - { - cond_value: 'openstack', - name: "openstack", - value: true - } - ] - }, - addVim: { - titleName: $.i18n.prop("com_zte_ums_eco_roc_vim_register_info"), - vimId: "", - vimName: "", - domain: '', - domainVisable:true, - vimNameModify:false, - userName: "", - tenant: "", - password: "", - url: "", - saveType: "add", - description: "", - vimType: "openstack", - vendor: "", - version: "" - }, - $showVimTable: function (el, action) { + $showVimTable: function (index, action) { vm.isSave = false; + vm.currentIndex = index; + vm.saveType = action; if (vm.action.ADD == action) { - vm.addVim.vimId = ""; - vm.addVim.vimName = ""; - vm.addVim.vimNameModify=false; - vm.addVim.userName = ""; - vm.addVim.password = ""; - vm.addVim.url = ""; - vm.addVim.domain = ""; - vm.addVim.domainVisable = true; - vm.addVim.description = ""; - vm.addVim.tenant = ""; - vm.addVim.vendor = ""; - vm.addVim.saveType = "add"; - vm.addVim.vimType = "openstack"; - vm.addVim.titleName = $.i18n.prop("com_zte_ums_eco_roc_vim_register_info"); - + vm.modalTitle = $.i18n.prop('com_zte_ums_eco_roc_vim_register'); + vm.fillElement(vm.$blankElement, vm.currentElement); } else { - vm.addVim.vimId = el.vimId; - vm.addVim.vimName = el.name; - vm.addVim.vimNameModify=true; - vm.addVim.url = el.url; - vm.addVim.description = el.description; - vm.addVim.userName = el.userName; - vm.addVim.password = el.password; - vm.addVim.tenant = el.tenant; - vm.addVim.domain = el.domain; - vm.addVim.domainVisable=vm.$getdomainVisable(el.type); - vm.addVim.saveType = "update"; - vm.addVim.titleName = $.i18n.prop('com_zte_ums_eco_roc_vim_modify_info'); - vm.addVim.vimType = el.type; - vm.addVim.vendor = el.vendor; - vm.addVim.version = el.version; + vm.modalTitle = $.i18n.prop('com_zte_ums_eco_roc_vim_modify_info'); + vm.fillElement(vm.vimInfo[index], vm.currentElement); } - vm.executeError.visible = false; - vm.executeWait.visible = false; - $(".form-group").each(function () { - $(this).removeClass('has-success'); - $(this).removeClass('has-error'); - $(this).find(".help-block[id]").remove(); - }); + vm.$showModal(); + }, + $showModal: function () { + $(".form-group").removeClass('has-success').removeClass('has-error').find(".help-block[id]").remove(); $("#addVimDlg").modal("show"); }, - - $saveVimTable: function () { + $hideModal: function () { + $(".form-group").removeClass('has-success').removeClass('has-error').find(".help-block[id]").remove(); + $("#addVimDlg").modal("hide"); + }, + $saveVimTable: function (index) { vm.isSave = true; - success.hide(); - error.hide(); if (form.valid() == false) { vm.isSave = false; return false; } - vm.executeWait.visible = true; - vm.executeError.visible = false; - if (vm.addVim.saveType == "add") { - for( var i = 0; i < vm.vimInfo.length; i ++ ){ - if(vm.addVim.name == vm.vimInfo[i].name){ - resUtil.growl($.i18n.prop("com_zte_ums_eco_roc_vim_growl_msg_title") + ' already exists',"info"); - $('#addVimDlg').modal('hide'); - return; - } - } - vm.persistVim(); - } else if (vm.addVim.saveType == "update") { - vm.updateVim(); + var res = false; + if (vm.saveType == "add") { + res = vm.persistVim(); + } else if (vm.saveType == "update") { + res = vm.updateVim(); + } + if(res){ + vm.$hideModal(); } }, //add vim persistVim: function () { - $.ajax({ + var newElement = vm.getVIMSave(); + vm.vimInfo.push(newElement); + return true; + /*$.ajax({ type: "Post", url: vm.$addVimInfoUrl, - data: JSON.stringify({ - name: vm.addVim.vimName, - url: vm.addVim.url, - userName: vm.addVim.userName, - password: vm.addVim.password, - tenant: vm.addVim.tenant, - domain: vm.addVim.domain, - vendor: vm.addVim.vendor, - version: vm.addVim.version, - description: vm.addVim.description, - type: vm.addVim.vimType, - }), + data: JSON.stringify(vm.currentElement.$model), async: false, dataType: "json", contentType: 'application/json', @@ -211,26 +153,17 @@ var vm = avalon vm.executeWait.visible = false; vm.isSave = false; } - }); + });*/ }, //update vim updateVim: function () { - $.ajax({ + vm.fillElement(vm.getVIMSave(), vm.vimInfo[vm.currentIndex]); + return true; + /* $.ajax({ type: "Put", url: vm.$updateVimInfoUrl + vm.addVim.vimId, contentType: 'application/json', - data: JSON.stringify({ - name: vm.addVim.vimName, - userName: vm.addVim.userName, - password: vm.addVim.password, - domain: vm.addVim.domain, - version: vm.addVim.version, - description: vm.addVim.description, - url: vm.addVim.url, - tenant: vm.addVim.tenant, - type: vm.addVim.vimType, - vendor: vm.addVim.vendor, - }), + data: JSON.stringify(vm.currentElement.$model), dataType: "json", async: false, success: function (data, statusText, jqXHR) { @@ -265,12 +198,14 @@ var vm = avalon vm.executeError.text = textStatus + ":" + errorThrown; vm.executeWait.visible = false; } - }); + });*/ }, - delVim: function (el) { + delVim: function (index) { bootbox.confirm($.i18n.prop('com_zte_ums_eco_roc_vim_confirm_delete_vim_record'), function (result) { if (result) { - $.ajax({ + var id = vm.vimInfo[index]["id"]; + vm.vimInfo.splice(index, 1); + /* $.ajax({ type: "DELETE", url: vm.$delVimInfoUrl.replace('{vim_id}', el.vimId), success: function (data, statusText, jqXHR) { @@ -290,27 +225,40 @@ var vm = avalon error: function (XMLHttpRequest, textStatus, errorThrown) { resUtil.growl($.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_title') + errorThrown, "danger"); } - }); + });*/ } }); }, - gotoChartPage: function (oid, name, tenant) { - window.location.href = "vimChart.html?" + oid + "&" + name + "&" + tenant; + fillElement: function (sourceElement, targetElement) { + targetElement["cloud-owner"] = sourceElement["cloud-owner"]; + targetElement["status"] = sourceElement["status"]; + targetElement["cloud-region-id"] = sourceElement["cloud-region-id"]; + targetElement["cloud-type"] = sourceElement["cloud-type"]; + targetElement["cloud-region-version"] = sourceElement["cloud-region-version"]; + targetElement["owner-defined-type"] = sourceElement["owner-defined-type"]; + targetElement["cloud-zone"] = sourceElement["cloud-zone"]; + targetElement["complex-name"] = sourceElement["complex-name"]; + targetElement["cloud-extra-info"] = sourceElement["cloud-extra-info"]; + if(!targetElement["auth-info-items"]){ + targetElement["auth-info-items"] = [{}]; + } + targetElement["auth-info-items"][0]["username"] = sourceElement["auth-info-items"][0]["username"]; + targetElement["auth-info-items"][0]["password"] = sourceElement["auth-info-items"][0]["password"]; + targetElement["auth-info-items"][0]["auth-url"] = sourceElement["auth-info-items"][0]["auth-url"]; + targetElement["auth-info-items"][0]["ssl-cacert"] = sourceElement["auth-info-items"][0]["ssl-cacert"]; + targetElement["auth-info-items"][0]["ssl-insecure"] = sourceElement["auth-info-items"][0]["ssl-insecure"]; + targetElement["auth-info-items"][0]["cloud-domain"] = sourceElement["auth-info-items"][0]["cloud-domain"]; }, - $getdomainVisable:function(vimType){ - if ("openstack"==vimType){ - return true; - }else{ - return false; - } - + getVIMSave: function () { + var vimSave = $.extend(true, {}, vm.currentElement.$model); + vimSave["auth-info-items"] = $.extend(true, {}, vm.currentElement["auth-info-items"].$model); + return vimSave; }, - vimTypeRendered:function(){ - vm.addVim.domainVisable=vm.$getdomainVisable(vm.addVim.vimType); + gotoChartPage: function (oid, name, tenant) { + window.location.href = "vimChart.html?" + oid + "&" + name + "&" + tenant; } - - }); +vm.currentElement = $.extend(true, {}, vm.$blankElement); avalon.scan(); vm.$initTable(); diff --git a/esr/src/main/webapp/extsys/vim/mock-data/vim.json b/esr/src/main/webapp/extsys/vim/mock-data/vim.json new file mode 100644 index 0000000..d18b74f --- /dev/null +++ b/esr/src/main/webapp/extsys/vim/mock-data/vim.json @@ -0,0 +1,44 @@ +[ + { + "cloud-owner": "ZTE", + "status": "active", + "cloud-region-id": "region-one", + "cloud-type": "openstack", + "cloud-region-version": "v1.0", + "owner-defined-type": "owner-defined-type", + "cloud-zone": "cloud zone", + "complex-name": "complex name", + "cloud-extra-info": "cloud-extra-info", + "auth-info-items": [ + { + "username": "admin", + "password": "admin", + "auth-url": "http://10.74.151.13:5000/v2.0", + "ssl-cacert": "ssl-cacert", + "ssl-insecure": "ssl-insecure", + "cloud-domain": "cloud-domain" + } + ] + }, + { + "cloud-owner": "ZTE", + "status": "inactive", + "cloud-region-id": "region-one", + "cloud-type": "openstack", + "cloud-region-version": "v1.0", + "owner-defined-type": "owner-defined-type", + "cloud-zone": "cloud zone", + "complex-name": "complex name", + "cloud-extra-info": "cloud-extra-info", + "auth-info-items": [ + { + "username": "admin", + "password": "admin", + "auth-url": "http://10.74.151.13:5000/v2.0", + "ssl-cacert": "ssl-cacert", + "ssl-insecure": "ssl-insecure", + "cloud-domain": "cloud-domain" + } + ] + } +] \ No newline at end of file diff --git a/esr/src/main/webapp/extsys/vim/vimView.html b/esr/src/main/webapp/extsys/vim/vimView.html index eee55f0..ba67d45 100644 --- a/esr/src/main/webapp/extsys/vim/vimView.html +++ b/esr/src/main/webapp/extsys/vim/vimView.html @@ -24,152 +24,167 @@ - - - -