From 39da868f96878483661c1e68a9cd2e81aee7909c Mon Sep 17 00:00:00 2001 From: nancylizi Date: Fri, 30 Sep 2016 14:09:58 +0800 Subject: 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 --- .../catalog/js/template/tmDetailController.js | 215 +++++++++++---------- .../webapp/catalog/js/template/tmDetailUtil.js | 2 +- .../catalog/js/template/tmNodesController.js | 15 +- .../src/main/webapp/catalog/templateDetail.html | 14 +- 4 files changed, 126 insertions(+), 120 deletions(-) (limited to 'openo-portal/portal-catalog') 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 fe1567cf..2401d314 100644 --- 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 @@ */ var vm = avalon.define({ $id : "tmDetailController", - templateId : "", - globalNodesData: {}, + templateId : "",//store the Id of service template which shows in Topology tab page + globalNodesData: {},//store the nodes data which shows in Topology tab page templateData : [ {href: "#topology", name: "Topology", value: true}, {href: "#nodes", name: "Nodes", value: false} @@ -71,7 +71,7 @@ var vm = avalon.define({ url: vm.$restUrl.queryNodeTemplateUrl, success: function (resp) { if (resp) { - vm.nodesTab.nodesDetail.nodesTemplateDetailData = []; + vm.nodesDetail.nodesTemplateDetailData = []; var nodesTempData = []; for (var i = 0; i < resp.length; i++) { //generate node table display data @@ -79,12 +79,11 @@ var vm = avalon.define({ nodesTempData.push(nodeTemplate); } vm.globalNodesData[vm.templateId] = nodesTempData; - vm.nodesTab.nodesDetail.nodesTemplateDetailData = resp; //generate topology graph display data - vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.globalNodesData[vm.templateId]); + vm.nodesDetail.nodesTemplateDetailData = resp; //initialize topology data + vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.globalNodesData[vm.templateId]); topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model); - //vm.nodesTab.nodesList.$initNodesTable(); } }, error: function () { @@ -114,7 +113,7 @@ var vm = avalon.define({ topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model); }, $showTopo: function (id, name) { - vm.nodesTab.nodesDetail.$showDetails("block", id, name); + vm.topologyTab.$showTopoDetails("block", id, name); }, $showVnfTopo: function (templateId) { vm.topologyTab.returnBtnVisible = true; @@ -125,7 +124,17 @@ var vm = avalon.define({ vm.topologyTab.returnBtnVisible = false; vm.$restUrl.queryNodeTemplateUrl = "/openoapi/catalog/v1/servicetemplates/" + vm.templateId + "/nodetemplates"; vm.$init(); - } + }, + $showTopoDetails: function (isShow, nodetypeid, nodetypename) { + vm.nodesDetail.isShow = isShow; + if (isShow == "block") { + vm.nodesDetail.detailTitle = nodetypename + " " + $.i18n.prop("nfv-templateDetail-nodesTab-iui-title-nodeDetail"), + $('#' + vm.nodesDetail.detailData[0].id).click(); + vm.nodesDetail.detailData[0].isActive = true; + vm.nodesDetail.$initTopoNodesDetailTable(nodetypeid); + } + }, + }, nodesTab: { servicesTemplateData: [], @@ -172,7 +181,6 @@ var vm = avalon.define({ url: "/openoapi/catalog/v1/servicetemplates/" + tempId + "/nodetemplates", success: function (resp) { if (resp) { - vm.nodesTab.nodesDetail.templatesNodesDetailData[tempId] = []; var nodesTempData = []; for (var i = 0; i < resp.length; i++) { //generate node table display data @@ -180,11 +188,7 @@ var vm = avalon.define({ nodesTempData.push(nodeTemplate); } vm.nodesTab.nodesList.nodesData[tempId] = nodesTempData; - vm.nodesTab.nodesDetail.templatesNodesDetailData[tempId] = resp; //generate topology graph display data - //vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.nodesTab.nodesList.nodesData.$model); - //initialize topology data - //topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model); vm.nodesTab.nodesList.$initNodesTable(tempId); } }, @@ -252,98 +256,110 @@ var vm = avalon.define({ return sOut; }, }, - //Nodes Details - nodesDetail: { - nodesTemplateDetailData: [], - templatesNodesDetailData:[], - detailTitle: "", - isShow: "none", - detailIndex: 0, - detailData: [ - {id: "general", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-general"), isActive: true}, + }, + //Nodes Details + nodesDetail: { + nodesTemplateDetailData: [], //used in topo tab page to show node detail + detailTitle: "", + isShow: "none", + detailIndex: 0, + detailData: [ + {id: "general", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-general"), isActive: true}, + { + id: "properties", + name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-properties"), + isActive: false + }, + { + id: "relationShips", + name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-relationShips"), + isActive: false + } + ], + $showDetails: function (isShow, nodetypeid, nodetypename,tempId) { + vm.nodesDetail.isShow = isShow; + if (isShow == "block") { + vm.nodesDetail.detailTitle = nodetypename + " " + $.i18n.prop("nfv-templateDetail-nodesTab-iui-title-nodeDetail"), + $('#' + vm.nodesDetail.detailData[0].id).click(); + vm.nodesDetail.detailData[0].isActive = true; + vm.nodesDetail.$initNodeDetailTable(nodetypeid,tempId); + } + }, + detailCondChange: function (index) { + vm.nodesDetail.detailIndex = index; + for (var i = 0; i < vm.nodesDetail.detailData.length; i++) { + vm.nodesDetail.detailData[i].isActive = false; + } + vm.nodesDetail.detailData[index].isActive = true; + }, + $tableFields : {// table columns + general: [ { - id: "properties", - name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-properties"), - isActive: false + "mData": "key", + "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"), + "bSortable": false }, { - id: "relationShips", - name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-relationShips"), - isActive: false + "mData": "value", + "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"), + "bSortable": false } ], - $showDetails: function (isShow, nodetypeid, nodetypename,tempId) { - vm.nodesTab.nodesDetail.isShow = isShow; - if (isShow == "block") { - vm.nodesTab.nodesDetail.detailTitle = nodetypename + " " + $.i18n.prop("nfv-templateDetail-nodesTab-iui-title-nodeDetail"), - $('#' + vm.nodesTab.nodesDetail.detailData[0].id).click(); - vm.nodesTab.nodesDetail.detailData[0].isActive = true; - vm.nodesTab.nodesDetail.$initNodeDetailTable(nodetypeid,tempId); + properties: [ + { + "mData": "key", + "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"), + "bSortable": false + }, + { + "mData": "value", + "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"), + "bSortable": false } - }, - detailCondChange: function (index) { - vm.nodesTab.nodesDetail.detailIndex = index; - for (var i = 0; i < vm.nodesTab.nodesDetail.detailData.length; i++) { - vm.nodesTab.nodesDetail.detailData[i].isActive = false; + ], + relationShips: [ + { + "mData": "sourceNodeName", + "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-sourceNodeName"), + "bSortable": false + }, + { + "mData": "targetNodeName", + "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-targetNodeName"), + "bSortable": false + }, + { + "mData": "type", + "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-type"), + "bSortable": false } - vm.nodesTab.nodesDetail.detailData[index].isActive = true; - }, - $tableFields : {// table columns - general: [ - { - "mData": "key", - "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"), - "bSortable": false - }, - { - "mData": "value", - "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"), - "bSortable": false - } - ], - properties: [ - { - "mData": "key", - "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"), - "bSortable": false - }, - { - "mData": "value", - "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"), - "bSortable": false - } - ], - relationShips: [ - { - "mData": "sourceNodeName", - "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-sourceNodeName"), - "bSortable": false - }, - { - "mData": "targetNodeName", - "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-targetNodeName"), - "bSortable": false - }, - { - "mData": "type", - "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-type"), - "bSortable": false - } - ] - }, - $initNodeDetailTable: function (nodetemplateid,tempId) { - var data = topoUtil.getCurrentDetailData(vm.nodesTab.nodesList.nodesData[tempId], nodetemplateid); - //initialize three tables of nodedetail - $.each(vm.nodesTab.nodesDetail.$tableFields, function (key, value) { - var setting = {}; - setting.language = vm.$language; - setting.paginate = false; - setting.info = false; - setting.columns = value; - setting.tableId = "ict_table_" + key; - serverPageTable.initTableWithData(setting, setting.tableId + '_div', data[key]); - }); - } + ] + }, + $initNodeDetailTable: function (nodetemplateid,tempId) { + var data = topoUtil.getCurrentDetailData(vm.nodesTab.nodesList.nodesData[tempId], nodetemplateid); + //initialize three tables of nodedetail + $.each(vm.nodesDetail.$tableFields, function (key, value) { + var setting = {}; + setting.language = vm.$language; + setting.paginate = false; + setting.info = false; + setting.columns = value; + setting.tableId = "ict_table_" + key; + serverPageTable.initTableWithData(setting, setting.tableId + '_div', data[key]); + }); + }, + $initTopoNodesDetailTable: function (nodetemplateid) { + var data = topoUtil.getCurrentDetailData(vm.nodesDetail.nodesTemplateDetailData.$model, nodetemplateid); + //initialize three tables of nodedetail + $.each(vm.nodesDetail.$tableFields, function (key, value) { + var setting = {}; + setting.language = vm.$language; + setting.paginate = false; + setting.info = false; + setting.columns = value; + setting.tableId = "ict_table_" + key; + serverPageTable.initTableWithData(setting, setting.tableId + '_div', data[key]); + }); } }, executionTab: { @@ -390,7 +406,7 @@ var vm = avalon.define({ $init: function () { vm.executionTab.$initEventsTable(); } - }, + } }); @@ -408,7 +424,6 @@ var initParam = function () { //initialize template detail params if (flavor) { vm.$restUrl.queryNodeTemplateUrl += "?flavor=" + flavor; } - vm.$init(); } }; 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 2cb15b4d..a3135fa2 100644 --- 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; tmDetailUtil.nameRender = function(obj) { - return '' + obj.aData.name + ''; } 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 ef63ba9f..3a0d2853 100644 --- 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 @@ */ var vm = avalon.define({ $id : "tmNodesController", - templateId : "", - globalNodesData: {}, + templateId : "", //store the Id of service template which shows in Topology tab page $language: { "sProcessing": "  " + $.i18n.prop("nfv-nso-iui-table-sProcess") + "", @@ -67,7 +66,6 @@ var vm = avalon.define({ url: "/openoapi/catalog/v1/servicetemplates/" + tempId + "/nodetemplates", success: function (resp) { if (resp) { - vm.nodesDetail.templatesNodesDetailData[tempId] = []; var nodesTempData = []; for (var i = 0; i < resp.length; i++) { //generate node table display data @@ -75,11 +73,6 @@ var vm = avalon.define({ nodesTempData.push(nodeTemplate); } vm.nodesList.nodesData[tempId] = nodesTempData; - vm.nodesDetail.templatesNodesDetailData[tempId] = resp; - //generate topology graph display data - //vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.nodesList.nodesData.$model); - //initialize topology data - //topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model); vm.nodesList.$initNodesTable(tempId); } }, @@ -126,8 +119,8 @@ var vm = avalon.define({ //nodes list table nodesList: { - nodesData: {}, - tempId:"", + nodesData: {}, //used in Nodes tab page, to store nodes data of difference service template + tempId:"", //used in Nodes tab page,to store the node's templateId $nodesTabDataId: "ict_nodes_table", $nodesTabFields: {// table columns table: [ @@ -184,8 +177,6 @@ var vm = avalon.define({ }, //Nodes Details nodesDetail : { - nodesTemplateDetailData: [], - templatesNodesDetailData:[], detailTitle: "", isShow: "none", detailIndex: 0, 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 5582a97f..0bd89197 100644 --- 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 @@ -
+
-

{{nodesTab.nodesDetail.detailTitle}}

-
+

{{nodesDetail.detailTitle}}

+
@@ -80,21 +80,21 @@
-
-
+
-
+
-
+
-- cgit 1.2.3-korg