diff options
author | 2016-09-22 12:27:22 +0800 | |
---|---|---|
committer | 2016-09-22 12:27:22 +0800 | |
commit | 717ef92726dd5a98ade36d4cb96c8c4112ec30e3 (patch) | |
tree | 49de9bed3ee3d6330a9f7f07c3fd2e711de9284f /openo-portal/portal-lifecyclemgr/src | |
parent | efc480bb6f54e1e9434c1a7f40380558111b95b7 (diff) |
add nfvo topo for detail page
Change-Id: I3679ef9a1f89ad01f43d9fa4a0c1bb80dc304e82
Signed-off-by: Luji7 <lu.ji3@zte.com.cn>
Diffstat (limited to 'openo-portal/portal-lifecyclemgr/src')
2 files changed, 421 insertions, 0 deletions
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/tmTopoController.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/tmTopoController.js new file mode 100644 index 00000000..73d776a0 --- /dev/null +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/tmTopoController.js @@ -0,0 +1,210 @@ +/* + * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var vm = avalon.define({ + $id : "tmTopoController", + templateId : "", + nodesData: [], + $language: { + "sProcessing": "<img src='../component/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span> " + +$.i18n.prop("nfv-nso-iui-table-sProcess")+"</span>", + "sLengthMenu": $.i18n.prop("nfv-nso-iui-table-sLengthMenu"), + "sZeroRecords": $.i18n.prop("nfv-nso-iui-table-sZeroRecords"), + "sInfo": "<span class='seperator'> </span>" + $.i18n.prop("nfv-nso-iui-table-sInfo"), + "sInfoEmpty": $.i18n.prop("nfv-nso-iui-table-sInfoEmpty"), + "sGroupActions": $.i18n.prop("nfv-nso-iui-table-sGroupActions"), + "sAjaxRequestGeneralError":$.i18n.prop("nfv-nso-iui-table-sAjaxRequestGeneralError"), + "sEmptyTable": $.i18n.prop("nfv-nso-iui-table-sEmptyTable"), + "oPaginate": { + "sPrevious": $.i18n.prop("nfv-nso-iui-table-sPrevious"), + "sNext": $.i18n.prop("nfv-nso-iui-table-sNext"), + "sPage": $.i18n.prop("nfv-nso-iui-table-sPage"), + "sPageOf": $.i18n.prop("nfv-nso-iui-table-sPageOf") + } + }, + $restUrl : { + queryNodeTemplateUrl : "/openoapi/catalog/v1/servicetemplates/{0}/nodetemplates", + queryTemplateInfoUrl : "/openoapi/catalog/v1/servicetemplates" + }, + $init : function() { + vm.$initTemplateData(); + vm.$initTopoNodesData(); + }, + $initTemplateData : function() { + $.ajax({ + type : "GET", + url : vm.$restUrl.queryTemplateInfoUrl, + success : function(resp) { + if(resp) { + vm.servicesTemplateData = []; + for(var i=0; i<resp.length; i++) { + //generate node table display data + vm.servicesTemplateData.push(resp[i]); + } + //vm.$initNfvNodesTab(); + } + }, + error : function() { + commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger"); + } + }); + }, + $initTopoNodesData : function() { + $.ajax({ + type : "GET", + url : vm.$restUrl.queryNodeTemplateUrl, + success : function(resp) { + if(resp) { + vm.nodesDetail.nodesTemplateDetailData = []; + for(var i=0; i<resp.length; i++) { + //generate node table display data + var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]); + vm.nodesData.push(nodeTemplate); + } + vm.nodesDetail.nodesTemplateDetailData = resp; + //generate topology graph display data + vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.nodesData.$model); + //initialize topology data + topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model); + } + }, + error : function() { + commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger"); + } + }); + }, + topologyTab : { + topology : "topology.html", + vnfTip : $.i18n.prop("nfv-topology-iui-vnf-tip"), + btnTip : $.i18n.prop("nfv-topology-iui-btn-return-tip"), + topoTemplateData:[], + boxTopoDatas:[], + networkTopoDatas:[], + isShowNum: false, + returnBtnVisible : false, + $getColor: function(index) { + return topoUtil.getColor(index); + }, + $getCidr: function(properties){ + return topoUtil.getCidr(properties); + }, + $getCpTop: function(index, parentBoxId){ + return topoUtil.getCpTop(index, parentBoxId); + }, + $initTopology : function() { + topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model); + }, + $showTopo:function(id, name){ + vm.nodesDetail.$showDetails("block", id, name); + }, + $showVnfTopo: function(templateId) { + vm.topologyTab.returnBtnVisible = true; + vm.$restUrl.queryNodeTemplateUrl = "/openoapi/catalog/v1/servicetemplates/" + templateId + "/nodetemplates"; + vm.$init(); + }, + $returnNS: function() { + vm.topologyTab.returnBtnVisible = false; + vm.$restUrl.queryNodeTemplateUrl = "/openoapi/catalog/v1/servicetemplates/" + vm.templateId + "/nodetemplates"; + vm.$init(); + } + }, + //Nodes Details + nodesDetail : { + nodesTemplateDetailData: [], + 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) { + 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); + } + }, + 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: [ + {"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) { + 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]); + }); + } + }, +}); + +var initParam = function() { //initialize template detail params + var paramStr = window.location.search.substring(1); + if(paramStr.length > 0) { + avalon.scan(); + var params = paramStr.split("&"); + var instanceId = params[0].substring(params[0].indexOf('=') + 1); + var templateQueryUrl = '/openoapi/nslcm/v1.0/ns/' + instanceId; + $.ajax({ + type : "GET", + url : templateQueryUrl, + contentType : "application/json", + dataType : "json", + success : function(jsonResp) { + initTopo(jsonResp.nsdId) + }, + error : function(xhr, ajaxOptions, thrownError) { + alert("Error on page : " + xhr.responseText); + } + }); + } +}; + +function initTopo(templateId) { + vm.templateId = templateId; + vm.$restUrl.queryNodeTemplateUrl = commonUtil.format(vm.$restUrl.queryNodeTemplateUrl, templateId); + vm.$init(); +} + +initParam();
\ No newline at end of file diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/lcm_detail_nfvo_topology.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/lcm_detail_nfvo_topology.html new file mode 100644 index 00000000..efca2326 --- /dev/null +++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/lcm_detail_nfvo_topology.html @@ -0,0 +1,211 @@ +<!-- + + Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE) + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<html> +<head> + <head lang="en"> + <meta charset="UTF-8"> + <title></title> + <link href="../component/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" /> + <link href="../component/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> + <link href="../component/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" /> + <link href="../component/css/ZteIctIcons/style.css" rel="stylesheet"/> + <link href="../framework/css/ngict-component.css" rel="stylesheet"/> + <link href="../framework/css/plugins.css" rel="stylesheet"/> + <link href="css/platform/animate.min.css" rel="stylesheet"/> + <link href="css/datatable-sort.css" rel="stylesheet"/> + <link href="css/templateDetail.css" rel="stylesheet" /> + <link href="css/topology.css" rel="stylesheet" /> + <style type="text/css"> + .ms-controller { + visibility: hidden; + } + .ms-nodedetail { + display: none; + } + </style> + </head> +<body> + <div ms-controller="tmTopoController" class="container-fluid ms-controller"> + <div class="row"> + <div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 titlefont"> + <span id="nfv-template-topo-iui-title" name_i18n="com_zte_nfv_nsoc_i18n"></span> + </div> + </div> + <div class="separator-line"></div> + <div class="container-fluid"> + <div id="networks" style="float:left;display:inline-block"> + <div class="networksContainer"> + <div class="network" ms-repeat-network="topologyTab.networkTopoDatas"> + <div class="name" tooltip="" ms-attr-title="network.name" ms-if="network.name" + ms-click="topologyTab.$showTopo(network.id, network.name)"> + <div ms-if="topologyTab.isShowNum" ms-text="network.num" class="badge">0</div> + <span>{{network.name}}</span> + </div> + <div class="subnet" ms-repeat-subnet="network.subnets"> + <div class="line"> + <div class="vlan" ms-attr-id="subnet.id" ms-css-background-color="topologyTab.$getColor($index+$outer.$index)" ms-attr-title="subnet.name" ms-click="topologyTab.$showTopo(subnet.id, subnet.name)"> + <div ms-if="topologyTab.isShowNum" ms-text="subnet.num" class="badge">0</div> + <p>{{subnet.name}}</p> + <p class="cidr" ms-text="topologyTab.$getCidr(subnet.properties)"></p> + </div> + </div> + </div><!--end repeat network.subnets--> + </div><!--end repeat topologyTab.networkTopoDatas--> + </div> + </div> + <div id="topo" style="float:left;display:inline-block"> + <div class="row-fluid" data-name="topo_zone"> + <div class="bpContainer" ms-each-host="topologyTab.boxTopoDatas"> + <div> + <div class="box" ms-attr-id="host.id"> + <div class="piProgress" size="55"> + <div class="circle"> + <i class="gs-node-icon fa fa-desktop" ></i> + <div ms-if="topologyTab.isShowNum" ms-text="host.num" class="badge">1</div> + </div> + <div class="smallCircle" ms-repeat-cp="host.cp" ms-attr-id="cp.id" ms-title="cp.name" + ms-click="topologyTab.$showTopo(cp.id,cp.name)" ms-css-top="topologyTab.$getCpTop($index,host.id)"> + <i class="gs-cp-icon fa fa-credit-card" ></i> + </div> + </div> + <div class="head" ms-hover="boxHover" tooltip ms-attr-title="host.name" ms-text="host.name" ms-click="topologyTab.$showTopo(host.id, host.name)"> + </div> + <div class="holder"> + <div class="nest" ms-if="host.vnfdid" ms-click="topologyTab.$showVnfTopo(host.vnfdid)" + ms-attr-title="topologyTab.vnfTip"><!-- only display nested ns template --> + <div class="plus"> + <i class="fa fa-plus" style="color: #3aaeda;"></i> + </div> + </div> + <div ms-each-box="host.children" ><!-- ngRepeat: node in map track by node.name --> + <div> + <div class="box" ms-attr-id="box.id"> + <div class="piProgress" size="55"> + <div class="circle"> + <i class="gs-node-icon fa fa-cogs"></i> + <div ms-if="topologyTab.isShowNum" ms-text="box.num" class="badge">1</div> + </div> + <div class="smallCircle" ms-repeat-cp="box.cp" ms-attr-id="cp.id" ms-title="cp.name" ms-click="topologyTab.$showTopo(cp.id,cp.name)" ms-css-top="topologyTab.$getCpTop($index,box.id)"> + <i class="gs-cp-icon fa fa-credit-card" ></i> + </div> + </div> + <div class="head" ms-hover="boxHover" + tooltip="" ms-click="topologyTab.$showTopo(box.id, box.name)" ms-attr-title="box.name" ms-text="box.name"></div> + <div class="holder" > + <div ms-each-app="box.children"> + <!-- ngRepeat: node in map track by node.name --> + <div> + <div class="app" ms-attr-id="app.id" ms-click="topologyTab.$showTopo(app.id, app.name)" ms-hover="appHover"> + <div class="piProgress" size="55"> + <div class="circle" > + <i class="gs-node-icon fa fa-cog" ></i> + <div ms-if="topologyTab.isShowNum" ms-text="app.num" class="badge">1</div> + </div> + </div> + <p tooltip="" ms-attr-id="app.id" ms-attr-title="app.name" ms-text="app.name"></p> + </div> + </div> + <!-- end ngRepeat: node in map track by node.name --> + </div> + </div><!-- end ngIf: node.isApp == false --> + </div><!-- end ngRepeat: node in map track by node.name --> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <div> + <div class="coordinates"> + <svg id="svg_vl" width="100%" height="100%" fill="silver"> + <g transform="translate(0, 0)" > + </g> + </svg> + </div> + <div class="coordinates" style="z-index:3;"> + <svg id="svg_vdu" width="100%" height="100%" fill="silver"> + <g transform="translate(0, 0)" > + </g> + <defs> + <marker id="arrowhead" viewBox="0 0 20 20" refX="16" refY="10" markerUnits="userSpaceOnUse" markerWidth="16" markerHeight="12" orient="auto" fill="#7A7A7A"> + <path d="M 0 0 L 20 10 L 0 20 z"></path> + </marker> + </defs> + </svg> + </div> + </div> + </div> + + <div id="right-menu" class="ms-nodedetail" ms-css-display="nodesDetail.isShow"> + <div> + <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> + </div> + </div> + <div> + <div class="btn-group" > + <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="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="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="nodesDetail.detailIndex === 2"> + <div class="row-fluid" data-name="table_zone"> + <div id='ict_table_relationShips_div' class="nodesDetail"></div> + </div> + </div> + </div> + </div> + </div> + + <script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script> + <script type="text/javascript" src="../component/thirdparty/bootstrap/js/bootstrap.min.js"></script> + <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.js"></script> + <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.min.js"></script> + <script type="text/javascript" src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script> + + <script type="text/javascript" src="../vendor/bootstrap-growl/bootstrap-growl.min.js"></script> + <script type="text/javascript" src="../vendor/avalon/avalon.modern.js"></script> + + <script type="text/javascript" src="../framework/js/tools.js"></script> + + <script type="text/javascript" src="js/component/commonUtil.js"></script> + <script type="text/javascript" src="js/component/serverPageTable.js"></script> + <script type="text/javascript" src="js/component/loadi18n_nsoc.js"></script> + + <script type="text/javascript" src="js/template/tmDetailUtil.js"></script> + <script type="text/javascript" src="js/template/tmUtil.js"></script> + <script type="text/javascript" src="js/tmTopoController.js"></script> + <script type="text/javascript" src="js/template/topoUtil.js"></script> + </div> +</body> +</html>
\ No newline at end of file |