Modify the bug "Can not show the node detail from topology page tab", Optimize codes.

Issue-id:TOSCA-94

Change-Id: Ie891b5b729697088599fd1c2dec0b3416b0fb3b4
Signed-off-by: nancylizi <li.zi30@zte.com.cn>

diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailController.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailController.js
index fe1567c..2401d31 100644 (file)
--- a/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailController.js
+++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailController.js
@@ -15,8 +15,8 @@
  */\r
 var vm = avalon.define({\r
     $id : "tmDetailController",\r
-    templateId : "",\r
-    globalNodesData: {},\r
+    templateId : "",//store the Id of service template which shows in Topology tab page\r
+    globalNodesData: {},//store the nodes data which shows in Topology tab page\r
     templateData : [\r
         {href: "#topology", name: "Topology", value: true},\r
         {href: "#nodes", name: "Nodes", value: false}\r
@@ -71,7 +71,7 @@ var vm = avalon.define({
             url: vm.$restUrl.queryNodeTemplateUrl,\r
             success: function (resp) {\r
                 if (resp) {\r
-                    vm.nodesTab.nodesDetail.nodesTemplateDetailData = [];\r
+                    vm.nodesDetail.nodesTemplateDetailData = [];\r
                     var nodesTempData = [];\r
                     for (var i = 0; i < resp.length; i++) {\r
                         //generate node table display data\r
@@ -79,12 +79,11 @@ var vm = avalon.define({
                         nodesTempData.push(nodeTemplate);\r
                     }\r
                     vm.globalNodesData[vm.templateId] = nodesTempData;\r
-                    vm.nodesTab.nodesDetail.nodesTemplateDetailData = resp;\r
                     //generate topology graph display data\r
-                    vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.globalNodesData[vm.templateId]);\r
+                    vm.nodesDetail.nodesTemplateDetailData = resp;\r
                     //initialize topology data\r
+                    vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.globalNodesData[vm.templateId]);\r
                     topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);\r
-                    //vm.nodesTab.nodesList.$initNodesTable();\r
                 }\r
             },\r
             error: function () {\r
@@ -114,7 +113,7 @@ var vm = avalon.define({
             topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);\r
         },\r
         $showTopo: function (id, name) {\r
-            vm.nodesTab.nodesDetail.$showDetails("block", id, name);\r
+            vm.topologyTab.$showTopoDetails("block", id, name);\r
         },\r
         $showVnfTopo: function (templateId) {\r
             vm.topologyTab.returnBtnVisible = true;\r
@@ -125,7 +124,17 @@ var vm = avalon.define({
             vm.topologyTab.returnBtnVisible = false;\r
             vm.$restUrl.queryNodeTemplateUrl = "/openoapi/catalog/v1/servicetemplates/" + vm.templateId + "/nodetemplates";\r
             vm.$init();\r
-        }\r
+        },\r
+        $showTopoDetails: function (isShow, nodetypeid, nodetypename) {\r
+            vm.nodesDetail.isShow = isShow;\r
+            if (isShow == "block") {\r
+                vm.nodesDetail.detailTitle = nodetypename + " " + $.i18n.prop("nfv-templateDetail-nodesTab-iui-title-nodeDetail"),\r
+                    $('#' + vm.nodesDetail.detailData[0].id).click();\r
+                vm.nodesDetail.detailData[0].isActive = true;\r
+                vm.nodesDetail.$initTopoNodesDetailTable(nodetypeid);\r
+            }\r
+        },\r
+\r
     },\r
     nodesTab: {\r
         servicesTemplateData: [],\r
@@ -172,7 +181,6 @@ var vm = avalon.define({
                 url: "/openoapi/catalog/v1/servicetemplates/" + tempId + "/nodetemplates",\r
                 success: function (resp) {\r
                     if (resp) {\r
-                        vm.nodesTab.nodesDetail.templatesNodesDetailData[tempId] = [];\r
                         var nodesTempData = [];\r
                         for (var i = 0; i < resp.length; i++) {\r
                             //generate node table display data\r
@@ -180,11 +188,7 @@ var vm = avalon.define({
                             nodesTempData.push(nodeTemplate);\r
                         }\r
                         vm.nodesTab.nodesList.nodesData[tempId] = nodesTempData;\r
-                        vm.nodesTab.nodesDetail.templatesNodesDetailData[tempId] = resp;\r
                         //generate topology graph display data\r
-                        //vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.nodesTab.nodesList.nodesData.$model);\r
-                        //initialize topology data\r
-                        //topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);\r
                         vm.nodesTab.nodesList.$initNodesTable(tempId);\r
                     }\r
                 },\r
@@ -252,98 +256,110 @@ var vm = avalon.define({
                 return sOut;\r
             },\r
         },\r
-        //Nodes Details\r
-        nodesDetail: {\r
-            nodesTemplateDetailData: [],\r
-            templatesNodesDetailData:[],\r
-            detailTitle: "",\r
-            isShow: "none",\r
-            detailIndex: 0,\r
-            detailData: [\r
-                {id: "general", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-general"), isActive: true},\r
+    },\r
+    //Nodes Details\r
+    nodesDetail: {\r
+        nodesTemplateDetailData: [], //used in topo tab page to show node detail\r
+        detailTitle: "",\r
+        isShow: "none",\r
+        detailIndex: 0,\r
+        detailData: [\r
+            {id: "general", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-general"), isActive: true},\r
+            {\r
+                id: "properties",\r
+                name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-properties"),\r
+                isActive: false\r
+            },\r
+            {\r
+                id: "relationShips",\r
+                name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-relationShips"),\r
+                isActive: false\r
+            }\r
+        ],\r
+        $showDetails: function (isShow, nodetypeid, nodetypename,tempId) {\r
+            vm.nodesDetail.isShow = isShow;\r
+            if (isShow == "block") {\r
+                vm.nodesDetail.detailTitle = nodetypename + " " + $.i18n.prop("nfv-templateDetail-nodesTab-iui-title-nodeDetail"),\r
+                    $('#' + vm.nodesDetail.detailData[0].id).click();\r
+                vm.nodesDetail.detailData[0].isActive = true;\r
+                vm.nodesDetail.$initNodeDetailTable(nodetypeid,tempId);\r
+            }\r
+        },\r
+        detailCondChange: function (index) {\r
+            vm.nodesDetail.detailIndex = index;\r
+            for (var i = 0; i < vm.nodesDetail.detailData.length; i++) {\r
+                vm.nodesDetail.detailData[i].isActive = false;\r
+            }\r
+            vm.nodesDetail.detailData[index].isActive = true;\r
+        },\r
+        $tableFields : {// table columns\r
+            general: [\r
                 {\r
-                    id: "properties",\r
-                    name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-properties"),\r
-                    isActive: false\r
+                    "mData": "key",\r
+                    "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"),\r
+                    "bSortable": false\r
                 },\r
                 {\r
-                    id: "relationShips",\r
-                    name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-relationShips"),\r
-                    isActive: false\r
+                    "mData": "value",\r
+                    "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"),\r
+                    "bSortable": false\r
                 }\r
             ],\r
-            $showDetails: function (isShow, nodetypeid, nodetypename,tempId) {\r
-                vm.nodesTab.nodesDetail.isShow = isShow;\r
-                if (isShow == "block") {\r
-                    vm.nodesTab.nodesDetail.detailTitle = nodetypename + " " + $.i18n.prop("nfv-templateDetail-nodesTab-iui-title-nodeDetail"),\r
-                        $('#' + vm.nodesTab.nodesDetail.detailData[0].id).click();\r
-                    vm.nodesTab.nodesDetail.detailData[0].isActive = true;\r
-                    vm.nodesTab.nodesDetail.$initNodeDetailTable(nodetypeid,tempId);\r
+            properties: [\r
+                {\r
+                    "mData": "key",\r
+                    "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"),\r
+                    "bSortable": false\r
+                },\r
+                {\r
+                    "mData": "value",\r
+                    "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"),\r
+                    "bSortable": false\r
                 }\r
-            },\r
-            detailCondChange: function (index) {\r
-                vm.nodesTab.nodesDetail.detailIndex = index;\r
-                for (var i = 0; i < vm.nodesTab.nodesDetail.detailData.length; i++) {\r
-                    vm.nodesTab.nodesDetail.detailData[i].isActive = false;\r
+            ],\r
+            relationShips: [\r
+                {\r
+                    "mData": "sourceNodeName",\r
+                    "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-sourceNodeName"),\r
+                    "bSortable": false\r
+                },\r
+                {\r
+                    "mData": "targetNodeName",\r
+                    "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-targetNodeName"),\r
+                    "bSortable": false\r
+                },\r
+                {\r
+                    "mData": "type",\r
+                    "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-type"),\r
+                    "bSortable": false\r
                 }\r
-                vm.nodesTab.nodesDetail.detailData[index].isActive = true;\r
-            },\r
-            $tableFields : {// table columns\r
-                general: [\r
-                    {\r
-                        "mData": "key",\r
-                        "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"),\r
-                        "bSortable": false\r
-                    },\r
-                    {\r
-                        "mData": "value",\r
-                        "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"),\r
-                        "bSortable": false\r
-                    }\r
-                ],\r
-                properties: [\r
-                    {\r
-                        "mData": "key",\r
-                        "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"),\r
-                        "bSortable": false\r
-                    },\r
-                    {\r
-                        "mData": "value",\r
-                        "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"),\r
-                        "bSortable": false\r
-                    }\r
-                ],\r
-                relationShips: [\r
-                    {\r
-                        "mData": "sourceNodeName",\r
-                        "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-sourceNodeName"),\r
-                        "bSortable": false\r
-                    },\r
-                    {\r
-                        "mData": "targetNodeName",\r
-                        "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-targetNodeName"),\r
-                        "bSortable": false\r
-                    },\r
-                    {\r
-                        "mData": "type",\r
-                        "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-type"),\r
-                        "bSortable": false\r
-                    }\r
-                ]\r
-            },\r
-            $initNodeDetailTable: function (nodetemplateid,tempId) {\r
-                var data = topoUtil.getCurrentDetailData(vm.nodesTab.nodesList.nodesData[tempId], nodetemplateid);\r
-                //initialize three tables of nodedetail\r
-                $.each(vm.nodesTab.nodesDetail.$tableFields, function (key, value) {\r
-                    var setting = {};\r
-                    setting.language = vm.$language;\r
-                    setting.paginate = false;\r
-                    setting.info = false;\r
-                    setting.columns = value;\r
-                    setting.tableId = "ict_table_" + key;\r
-                    serverPageTable.initTableWithData(setting, setting.tableId + '_div', data[key]);\r
-                });\r
-            }\r
+            ]\r
+        },\r
+        $initNodeDetailTable: function (nodetemplateid,tempId) {\r
+            var data = topoUtil.getCurrentDetailData(vm.nodesTab.nodesList.nodesData[tempId], nodetemplateid);\r
+            //initialize three tables of nodedetail\r
+            $.each(vm.nodesDetail.$tableFields, function (key, value) {\r
+                var setting = {};\r
+                setting.language = vm.$language;\r
+                setting.paginate = false;\r
+                setting.info = false;\r
+                setting.columns = value;\r
+                setting.tableId = "ict_table_" + key;\r
+                serverPageTable.initTableWithData(setting, setting.tableId + '_div', data[key]);\r
+            });\r
+        },\r
+        $initTopoNodesDetailTable: function (nodetemplateid) {\r
+            var data = topoUtil.getCurrentDetailData(vm.nodesDetail.nodesTemplateDetailData.$model, nodetemplateid);\r
+            //initialize three tables of nodedetail\r
+            $.each(vm.nodesDetail.$tableFields, function (key, value) {\r
+                var setting = {};\r
+                setting.language = vm.$language;\r
+                setting.paginate = false;\r
+                setting.info = false;\r
+                setting.columns = value;\r
+                setting.tableId = "ict_table_" + key;\r
+                serverPageTable.initTableWithData(setting, setting.tableId + '_div', data[key]);\r
+            });\r
         }\r
     },\r
     executionTab: {\r
@@ -390,7 +406,7 @@ var vm = avalon.define({
         $init: function () {\r
             vm.executionTab.$initEventsTable();\r
         }\r
-    },\r
+    }\r
 \r
 });\r
 \r
@@ -408,7 +424,6 @@ var initParam = function () { //initialize template detail params
         if (flavor) {\r
             vm.$restUrl.queryNodeTemplateUrl += "?flavor=" + flavor;\r
         }\r
-\r
         vm.$init();\r
     }\r
 };\r

diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailUtil.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailUtil.js
index 2cb15b4..a3135fa 100644 (file)
--- a/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailUtil.js
+++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmDetailUtil.js
@@ -17,7 +17,7 @@ var tmDetailUtil = {};
 tmDetailUtil.timer = null;\r
 \r
 tmDetailUtil.nameRender = function(obj) {\r
-    return '<a href="#" onclick="vm.nodesTab.nodesDetail.$showDetails('\r
+    return '<a href="#" onclick="vm.nodesDetail.$showDetails('\r
     + '\'block\',\'' + obj.aData.id + '\', \'' + obj.aData.name + '\',\'' + vm.nodesTab.nodesList.tempId + '\')">' + obj.aData.name + '</a>';\r
 }\r
 \r

diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmNodesController.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmNodesController.js
index ef63ba9..3a0d285 100644 (file)
--- a/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmNodesController.js
+++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/template/tmNodesController.js
@@ -15,8 +15,7 @@
  */\r
 var vm = avalon.define({\r
     $id : "tmNodesController",\r
-    templateId : "",\r
-    globalNodesData: {},\r
+    templateId : "", //store the Id of service template which shows in Topology tab page\r
     $language: {\r
         "sProcessing": "<img src='../common/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span>&nbsp;&nbsp;"\r
         + $.i18n.prop("nfv-nso-iui-table-sProcess") + "</span>",\r
@@ -67,7 +66,6 @@ var vm = avalon.define({
             url: "/openoapi/catalog/v1/servicetemplates/" + tempId + "/nodetemplates",\r
             success: function (resp) {\r
                 if (resp) {\r
-                    vm.nodesDetail.templatesNodesDetailData[tempId] = [];\r
                     var nodesTempData = [];\r
                     for (var i = 0; i < resp.length; i++) {\r
                         //generate node table display data\r
@@ -75,11 +73,6 @@ var vm = avalon.define({
                         nodesTempData.push(nodeTemplate);\r
                     }\r
                     vm.nodesList.nodesData[tempId] = nodesTempData;\r
-                    vm.nodesDetail.templatesNodesDetailData[tempId] = resp;\r
-                    //generate topology graph display data\r
-                    //vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.nodesList.nodesData.$model);\r
-                    //initialize topology data\r
-                    //topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);\r
                     vm.nodesList.$initNodesTable(tempId);\r
                 }\r
             },\r
@@ -126,8 +119,8 @@ var vm = avalon.define({
 \r
     //nodes list table\r
     nodesList: {\r
-        nodesData: {},\r
-        tempId:"",\r
+        nodesData: {}, //used in Nodes tab page, to store nodes data of difference service template\r
+        tempId:"", //used in Nodes tab page,to store the node's templateId\r
         $nodesTabDataId: "ict_nodes_table",\r
         $nodesTabFields: {// table columns\r
             table: [\r
@@ -184,8 +177,6 @@ var vm = avalon.define({
     },\r
     //Nodes Details\r
     nodesDetail : {\r
-        nodesTemplateDetailData: [],\r
-        templatesNodesDetailData:[],\r
         detailTitle: "",\r
         isShow: "none",\r
         detailIndex: 0,\r

diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/templateDetail.html b/openo-portal/portal-catalog/src/main/webapp/catalog/templateDetail.html
index 5582a97..0bd8919 100644 (file)
--- a/openo-portal/portal-catalog/src/main/webapp/catalog/templateDetail.html
+++ b/openo-portal/portal-catalog/src/main/webapp/catalog/templateDetail.html
@@ -69,10 +69,10 @@
                        </div>                  \r
                </div>\r
                \r
-               <div id="right-menu" class="ms-nodedetail" ms-css-display="nodesTab.nodesDetail.isShow">\r
+               <div id="right-menu" class="ms-nodedetail" ms-css-display="nodesDetail.isShow">\r
                        <div>\r
-                               <div class="title"><h4>{{nodesTab.nodesDetail.detailTitle}}</h4>\r
-                                       <div class="rigth right-button-pointer" ms-click="nodesTab.nodesDetail.$showDetails('none')">\r
+                               <div class="title"><h4>{{nodesDetail.detailTitle}}</h4>\r
+                                       <div class="rigth right-button-pointer" ms-click="nodesDetail.$showDetails('none')">\r
                                        <button type="button" class="btn btn-default">\r
                                                <span id="nfv-templateDetail-nodesTab-iui-btn-close" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
                                        </button>\r
@@ -80,21 +80,21 @@
                                </div>\r
                                <div>\r
                                        <div class="btn-group" >\r
-                                               <button type="button" class="btn btn-default" ms-repeat="nodesTab.nodesDetail.detailData" ms-click="nodesTab.nodesDetail.detailCondChange($index)" ms-attr-id="el.id"\r
+                                               <button type="button" class="btn btn-default" ms-repeat="nodesDetail.detailData" ms-click="nodesDetail.detailCondChange($index)" ms-attr-id="el.id"\r
                                                ms-class="active: el.isActive">{{el.name}}\r
                                                </button>\r
                                        </div>\r
-                                       <div ms-if="nodesTab.nodesDetail.detailIndex === 0">\r
+                                       <div ms-if="nodesDetail.detailIndex === 0">\r
                                                <div class="row-fluid" data-name="table_zone">\r
                                                        <div id='ict_table_general_div' class="nodesDetail"></div>\r
                                                </div>\r
                                        </div>\r
-                                       <div ms-if="nodesTab.nodesDetail.detailIndex === 1">\r
+                                       <div ms-if="nodesDetail.detailIndex === 1">\r
                                                <div class="row-fluid" data-name="table_zone">\r
                                                        <div id='ict_table_properties_div' class="nodesDetail"></div>\r
                                                </div>\r
                                        </div>\r
-                                       <div ms-if="nodesTab.nodesDetail.detailIndex === 2">\r
+                                       <div ms-if="nodesDetail.detailIndex === 2">\r
                                                <div class="row-fluid" data-name="table_zone">\r
                                                        <div id='ict_table_relationShips_div' class="nodesDetail"></div>\r
                                                </div>\r