AAI-180 Modify the VIM register portal

Change-Id: Ifcc9bb1f6cb4c47ddcb534c6d4b467071e48ce84
Issue-ID: AAI-180
Signed-off-by: qin.liang(10184303) <qin.liang13@zte.com.cn>

5 files changed, 303 insertions, 223 deletions

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 @@
     <link href="../../thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
     <link href="../../thirdparty/uniform/css/uniform.default.css" rel="stylesheet"/>
     <link href="../../thirdparty/css/ngict-component.css" rel="stylesheet" type="text/css">
-    <link href="../../thirdparty/css/ZteIctIcons/style.css" rel="stylesheet" type="text/css">
     <link href="css/vim.css" rel="stylesheet" type="text/css"/>
     <link href="css/skill.css" rel="stylesheet" type="text/css"/>
     <link href="../../thirdparty/animate/animate.min.css" rel="stylesheet" type="text/css"/>
-
-
     <style>
         .ms-controller {
             visibility: hidden
         }
     </style>
-
 </head>
 <body>
 <div class="ms-controller container-fluid" ms-controller="vimController">
 
     <div id="addVimDlg" class="modal  fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
-         aria-hidden="true">
+         aria-hidden="true" data-backdrop="static">
         <div class="modal-dialog">
             <div class="modal-content Changepasswd">
                 <div class="content">
                     <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <h4 id="myModalLabel" ms-text="addVim.titleName"></h4>
+                        <h4 id="myModalLabel">{{ modalTitle }}</h4>
                     </div>
                     <!-- modal body begin-->
                     <div class="modal-body">
-                        <div class="alert alert-info" ms-visible="executeWait.visible">{{executeWait.text}}</div>
-                        <div class="alert alert-danger " ms-visible="executeError.visible">{{executeError.text}}</div>
+                        <!--<div class="alert alert-info" ms-visible="executeWait.visible">{{executeWait.text}}</div>
+                        <div class="alert alert-danger " ms-visible="executeError.visible">{{executeError.text}}</div>-->
 
                         <form class="form-horizontal" id="vim_form" role="form">
-                            <input type="hidden" ms-duplex="addVim.vimId" name="vimId" class="form-control"/>
                             <div class="form-group">
                                 <label class="control-label col-sm-3">
-                                    <span id_i18n="com_zte_ums_eco_roc_vim_name"
-                                          name_i18n="com_zte_conductor_ui_i18n"></span>
+                                    <span>cloud-owner</span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['cloud-owner']" name="cloudOwner" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>cloud-region-id</span>
                                     <span class="required" aria-required="true">*</span>
                                 </label>
                                 <div class="col-sm-7">
-                                    <input type="text" ms-duplex="addVim.vimName" name="vimName" class="form-control" ms-readonly="addVim.vimNameReadonly"/>
+                                    <input type="text" ms-duplex="currentElement['cloud-region-id']" name="cloudRegionId" class="form-control"/>
                                     <span class="help-block"></span>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label class="control-label col-sm-3">
-                                    <span id_i18n="com_zte_ums_eco_roc_vim_type"
-                                          name_i18n="com_zte_conductor_ui_i18n"></span>
+                                    <span>cloud-type</span>
                                     <span class="required" aria-required="true">*</span>
                                 </label>
                                 <div class="col-sm-7">
-                                    <select id="vimTypeSelect" ms-each="$vimType.selectItems"
-                                            ms-duplex="addVim.vimType" data-duplex-changed="vimTypeRendered">
-                                        <option ms-attr-value='el.cond_value'>{{el.name}}</option>
+                                    <select ms-duplex="currentElement['cloud-type']">
+                                        <option value='openstack'>openstack</option>
                                     </select>
                                     <span class="help-block"></span>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label class="control-label col-sm-3">
-                                    <span id_i18n="com_zte_ums_eco_roc_vim_auth_url"
-                                          name_i18n="com_zte_conductor_ui_i18n"></span>
+                                    <span>cloud-region-version</span>
                                     <span class="required" aria-required="true">*</span>
                                 </label>
                                 <div class="col-sm-7">
-                                    <input type="text" ms-duplex="addVim.url" placeholder="http://xx.xx.xx.xx:5000/v2.0"
-                                           name="url" class="form-control"/>
+                                    <input type="text" ms-duplex="currentElement['cloud-region-version']" name="cloudRegionVersion" class="form-control"/>
                                     <span class="help-block"></span>
                                 </div>
 
                             </div>
                             <div class="form-group">
                                 <label class="control-label col-sm-3">
-                                    <span id_i18n="com_zte_ums_eco_roc_vim_username"
-                                          name_i18n="com_zte_conductor_ui_i18n"></span>
+                                    <span>owner-defined-type</span>
                                     <span class="required" aria-required="true">*</span>
                                 </label>
                                 <div class="col-sm-7">
-                                    <input type="text" ms-duplex="addVim.userName" name="userName"
-                                           class="form-control"/>
+                                    <input type="text" ms-duplex="currentElement['owner-defined-type']" name="ownerDefinedType" class="form-control"/>
                                     <span class="help-block"></span>
                                 </div>
                             </div>
-
                             <div class="form-group">
                                 <label class="control-label col-sm-3">
-                                    <span id_i18n="com_zte_ums_eco_roc_vim_password"
-                                          name_i18n="com_zte_conductor_ui_i18n"></span>
+                                    <span>cloud-zone</span>
                                     <span class="required" aria-required="true">*</span>
                                 </label>
                                 <div class="col-sm-7">
-                                    <input type="password" ms-duplex="addVim.password" name="password"
-                                           class="form-control"/>
+                                    <input type="text" ms-duplex="currentElement['cloud-zone']" name="cloudZone" class="form-control"/>
                                     <span class="help-block"></span>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label class="control-label col-sm-3">
-                                    <span id_i18n="com_zte_ums_eco_roc_vim_tenant"
-                                          name_i18n="com_zte_conductor_ui_i18n"></span>
+                                    <span>complex-name</span>
                                     <span class="required" aria-required="true">*</span>
                                 </label>
                                 <div class="col-sm-7">
-                                    <input type="text" ms-duplex="addVim.tenant" name="tenant" class="form-control"/>
+                                    <input type="text" ms-duplex="currentElement['complex-name']" name="complexName" class="form-control"/>
                                     <span class="help-block"></span>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label class="control-label col-sm-3">
-                                    <span id_i18n="com_zte_ums_eco_roc_vim_version"
-                                          name_i18n="com_zte_conductor_ui_i18n"></span>
+                                    <span>cloud-extra-info</span>
                                     <span class="required" aria-required="true">*</span>
                                 </label>
                                 <div class="col-sm-7">
-                                    <input type="text" ms-duplex="addVim.version" name="version" class="form-control"/>
+                                    <input type="text" ms-duplex="currentElement['cloud-extra-info']" name="cloudExtraInfo" class="form-control"/>
                                     <span class="help-block"></span>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label class="control-label col-sm-3">
-                                    <span id_i18n="com_zte_ums_eco_roc_vim_vendor"
-                                          name_i18n="com_zte_conductor_ui_i18n"></span>
+                                    <span>username</span>
                                     <span class="required" aria-required="true">*</span>
                                 </label>
                                 <div class="col-sm-7">
-                                    <input type="text" ms-duplex="addVim.vendor" name="vendor" class="form-control"/>
+                                    <input type="text" ms-duplex="currentElement['auth-info-items'][0].username" name="username" class="form-control"/>
                                     <span class="help-block"></span>
                                 </div>
                             </div>
-                            <div class="form-group" ms-visible="addVim.domainVisable">
+                            <div class="form-group">
                                 <label class="control-label col-sm-3">
-                                    <span id_i18n="com_zte_ums_eco_roc_vim_domain"
-                                          name_i18n="com_zte_conductor_ui_i18n"></span>
+                                    <span>password</span>
                                 </label>
                                 <div class="col-sm-7">
-                                    <input type="text" ms-duplex="addVim.domain" name="domain" class="form-control"/>
+                                    <input type="password" ms-duplex="currentElement['auth-info-items'][0].password" name="password" class="form-control"/>
                                     <span class="help-block"></span>
                                 </div>
                             </div>                           
                             <div class="form-group">
                                 <label class="control-label col-sm-3">
-                                    <span id_i18n="com_zte_ums_eco_roc_vim_description"
-                                          name_i18n="com_zte_conductor_ui_i18n"></span>                                   
+                                    <span>auth-url</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['auth-info-items'][0]['auth-url']" name="authUrl" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>ssl-cacert</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['auth-info-items'][0]['ssl-cacert']" name="sslCacert" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>ssl-insecure</span>
                                 </label>
                                 <div class="col-sm-7">
-                                    <textarea class="form-control" rows="3" ms-duplex="addVim.description"
-                                              name="description"></textarea>
+                                    <input type="text" ms-duplex="currentElement['auth-info-items'][0]['ssl-insecure']" name="sslInsecure" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>cloud-domain</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['auth-info-items'][0]['cloud-domain']" name="cloudDomain" class="form-control"/>
                                     <span class="help-block"></span>
                                 </div>
                             </div>
@@ -180,7 +195,7 @@
                         <button class="btn" data-dismiss="modal" aria-hidden="true"><span
                                 id_i18n="com_zte_ums_eco_roc_vim_cancel" name_i18n="com_zte_conductor_ui_i18n"></span>
                         </button>
-                        <button class="btn btn-primary" type="submit" ms-disabled="isSave" ms-click="$saveVimTable()">
+                        <button class="btn btn-primary" type="submit" ms-attr-disabled="isSave" ms-click="$saveVimTable()">
                             <span id_i18n="com_zte_ums_eco_roc_vim_save" name_i18n="com_zte_conductor_ui_i18n"></span>
                         </button>
                     </div>
@@ -192,7 +207,7 @@
 
     <div class="row-fluid col-sm-12" data-name="cond_zone">
         <div class="col-sm-4">
-            <button class="btn white radius_l" id="app-new-btn" ms-click="$showVimTable('', 'add')">
+            <button class="btn white radius_l" id="app-new-btn" ms-click="$showVimTable(-1, 'add')">
                 <i class="ict-new"></i> <span id_i18n="com_zte_ums_eco_roc_vim_register"
                                               name_i18n="com_zte_conductor_ui_i18n"></span>
             </button>
@@ -201,7 +216,7 @@
     </div>
 
     <div class="row-fluid col-sm-12 " ms-each-el="vimInfo">
-        <div class="col-sm-4 animated-panel zoomIn" style="-webkit-animation-delay: 0.1s;">
+        <div class="col-sm-3 animated-panel zoomIn" style="-webkit-animation-delay: 0.1s;">
             <div class="hpanel stats">
 
                 <div class="panel-body h-200" ms-hover="hpanel_show">
@@ -212,20 +227,22 @@
                         <i class="fa fa-cloud  fa-5x color_cloud"></i>
                     </div>
                     <div class="m-t-xl">
-                        <h3 ms-text="el.name"></h3>
+                        <h3 ms-text="el['cloud-owner'] + ':' + el['cloud-region-id']"></h3>
+                        <div class="font">
+                            <span id_i18n="com_zte_ums_eco_roc_vim_display_type"name_i18n="com_zte_conductor_ui_i18n"></span>
+                            <span ms-text="el['cloud-type']"></span>
+                        </div>
                         <div class="font">
-                            <span id_i18n="com_zte_ums_eco_roc_vim_display_type"
-                                  name_i18n="com_zte_conductor_ui_i18n"></span>
-                            <span ms-text="el.type"></span>
+                            <span id_i18n="com_zte_ums_eco_roc_vim_display_version"name_i18n="com_zte_conductor_ui_i18n"></span>
+                            <span ms-text="el['cloud-region-version']"></span>
                         </div>
-                        <div ms-text="el.url"></div>
                     </div>
                 </div>
                 <div class="panel-footer">
                     <div class="pull-right">
-                        <a class="btn btn-default btn-sm" ms-click="$showVimTable(el, 'update')"><i
+                        <a class="btn btn-default btn-sm" ms-click="$showVimTable($index, 'update')"><i
                                 class="fa fa-pencil-square-o fa-lg"></i></a>
-                        <a class="btn btn-default btn-sm" ms-click="delVim(el)"><i class="fa fa-trash-o fa-lg"> </i></a>
+                        <a class="btn btn-default btn-sm" ms-click="delVim($index)"><i class="fa fa-trash-o fa-lg"> </i></a>
                         <!--<a class="btn btn-default btn-sm" ms-click="gotoChartPage(el.oid,el.name,el.user)"><i class="fa fa-pie-chart fa-lg"> </i></a>-->
                     </div>
                 </div>
@@ -247,16 +264,12 @@
 <script type="text/javascript" src="../../thirdparty/jquery/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" src="../../thirdparty/js/tools.js"></script>
 <script type="text/javascript" src="../../thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
-<script type="text/javascript" src="../../thirdparty/js/json2.js"></script>
 <script type="text/javascript" src="../../thirdparty/bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="../../thirdparty/jquery-validation/js/jquery.validate.js"></script>
 <script type="text/javascript" src="../../thirdparty/jquery-validation/js/additional-methods.min.js"></script>
 <script type="text/javascript" src="../../thirdparty/bootbox/bootbox.min.js"></script>
-<!--<script type="text/javascript" src="../component/thirdparty/cometd/cometd.js"></script>-->
-<!--<script type="text/javascript" src="../component/thirdparty/cometd/jquery/jquery.cometd.js"></script>-->
 <script type="text/javascript" src="i18n/loadi18nApp.js"></script>
 <script type="text/javascript" src="js/vim-validate.js"></script>
-<!--<script type="text/javascript" src="./js/client-cometd.js"></script>-->
 <script src="../../thirdparty/avalon/avalon.js"></script>
 <script type="text/javascript" src="js/vimUtil.js"></script>
 <script type="text/javascript" src="js/vimController.js"></script>