diff options
author | 2016-09-30 14:09:58 +0800 | |
---|---|---|
committer | 2016-09-30 14:09:58 +0800 | |
commit | 39da868f96878483661c1e68a9cd2e81aee7909c (patch) | |
tree | 8532520d16e4660d39c79121f9bf3c4e3b94d9b3 /openo-portal/portal-catalog/src/main/webapp/catalog | |
parent | 5256104f3b8480a0ba5add221caa98784035dd28 (diff) |
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>
Diffstat (limited to 'openo-portal/portal-catalog/src/main/webapp/catalog')
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> "
+ $.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>
|