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>

4 files changed, 126 insertions, 120 deletions

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 '<a href="#" onclick="vm.nodesTab.nodesDetail.$showDetails('

+    return '<a href="#" onclick="vm.nodesDetail.$showDetails('

     + '\'block\',\'' + obj.aData.id + '\', \'' + obj.aData.name + '\',\'' + vm.nodesTab.nodesList.tempId + '\')">' + obj.aData.name + '</a>';

 }

 

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": "<img src='../common/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span>&nbsp;&nbsp;"

         + $.i18n.prop("nfv-nso-iui-table-sProcess") + "</span>",

@@ -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 @@
 			</div>			

 		</div>

 		

-		<div id="right-menu" class="ms-nodedetail" ms-css-display="nodesTab.nodesDetail.isShow">

+		<div id="right-menu" class="ms-nodedetail" ms-css-display="nodesDetail.isShow">

 			<div>

-				<div class="title"><h4>{{nodesTab.nodesDetail.detailTitle}}</h4>

-					<div class="rigth right-button-pointer" ms-click="nodesTab.nodesDetail.$showDetails('none')">

+				<div class="title"><h4>{{nodesDetail.detailTitle}}</h4>

+					<div class="rigth right-button-pointer" ms-click="nodesDetail.$showDetails('none')">

 					<button type="button" class="btn btn-default">

 						<span id="nfv-templateDetail-nodesTab-iui-btn-close" name_i18n="com_zte_nfv_nsoc_i18n"></span>

 					</button>

@@ -80,21 +80,21 @@
 				</div>

 				<div>

 					<div class="btn-group" >

-						<button type="button" class="btn btn-default" ms-repeat="nodesTab.nodesDetail.detailData" ms-click="nodesTab.nodesDetail.detailCondChange($index)" ms-attr-id="el.id"

+						<button type="button" class="btn btn-default" ms-repeat="nodesDetail.detailData" ms-click="nodesDetail.detailCondChange($index)" ms-attr-id="el.id"

 						ms-class="active: el.isActive">{{el.name}}

 						</button>

 					</div>

-					<div ms-if="nodesTab.nodesDetail.detailIndex === 0">

+					<div ms-if="nodesDetail.detailIndex === 0">

 						<div class="row-fluid" data-name="table_zone">

 							<div id='ict_table_general_div' class="nodesDetail"></div>

 						</div>

 					</div>

-					<div ms-if="nodesTab.nodesDetail.detailIndex === 1">

+					<div ms-if="nodesDetail.detailIndex === 1">

 						<div class="row-fluid" data-name="table_zone">

 							<div id='ict_table_properties_div' class="nodesDetail"></div>

 						</div>

 					</div>

-					<div ms-if="nodesTab.nodesDetail.detailIndex === 2">

+					<div ms-if="nodesDetail.detailIndex === 2">

 						<div class="row-fluid" data-name="table_zone">

 							<div id='ict_table_relationShips_div' class="nodesDetail"></div>

 						</div>