<head lang="en">\r
<meta charset="UTF-8">\r
<title></title>\r
- <link href="../component/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />\r
- <link href="../component/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />\r
- <link href="../component/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />\r
- <link href="../component/css/ZteIctIcons/style.css" rel="stylesheet"/>\r
- <link href="../framework/css/ngict-component.css" rel="stylesheet"/>\r
- <link href="../framework/css/plugins.css" rel="stylesheet"/>\r
- <link href="../vendor/jQuery-File-Upload/css/jquery.fileupload.css" rel="stylesheet" />\r
+ <link href="../common/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />\r
+ <link href="../common/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />\r
+ <link href="../common/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />\r
+ <link href="../common/cssstyle.css" rel="stylesheet"/>\r
+ <link href="../common/css/ngict-component.css" rel="stylesheet"/>\r
+ <link href="../common/css/plugins.css" rel="stylesheet"/>\r
+ <link href="../common/thirdparty/jQuery-File-Upload/css/jquery.fileupload.css" rel="stylesheet" />\r
<link href="css/fileupload.css" rel="stylesheet" />\r
<link href="css/package.css" rel="stylesheet" />\r
<style>\r
</div>\r
\r
\r
- <script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script>\r
- <script type="text/javascript" src="../component/thirdparty/bootstrap/js/bootstrap.min.js"></script>\r
- <script type="text/javascript" src="../component/thirdparty/bootbox/bootbox.min.js"></script> \r
- <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.min.js"></script>\r
- <script type="text/javascript" src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/jquery/jquery-1.10.2.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/bootstrap/js/bootstrap.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/bootbox/bootbox.min.js"></script> \r
+ <script type="text/javascript" src="../common/thirdparty/data-tables/jquery.dataTables.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>\r
\r
- <script type="text/javascript" src="../vendor/cometd/cometd.js"></script>\r
- <script type="text/javascript" src="../vendor/cometd/jquery.cometd.js"></script>\r
- <script type="text/javascript" src="../vendor/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>\r
- <script type="text/javascript" src="../vendor/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>\r
- <script type="text/javascript" src="../vendor/jQuery-File-Upload/js/jquery.fileupload.js"></script>\r
- <script type="text/javascript" src="../vendor/bootstrap-growl/bootstrap-growl.min.js"></script>\r
- <script type="text/javascript" src="../framework/js/core/hk.min.js"></script>\r
- <script src="../vendor/echarts/echarts-all.js"></script>\r
- <script type="text/javascript" src="../vendor/avalon/avalon.modern.js"></script>\r
- <script src="../vendor/avalon/avalon.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/cometd/cometd.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/cometd/jquery.cometd.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/jQuery-File-Upload/../common/thirdparty/jquery.ui.widget.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/jQuery-File-Upload/js/jquery.fileupload.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script>\r
+ <script type="text/javascript" src="../common/js/core/hk.min.js"></script>\r
+ <script src="../common/thirdparty/echarts/echarts-all.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/avalon/avalon.modern.js"></script>\r
+ <script src="../common/thirdparty/avalon/avalon.js"></script>\r
\r
- <script type="text/javascript" src="../framework/js/tools.js"></script>\r
+ <script type="text/javascript" src="../common/js/tools.js"></script>\r
\r
<script type="text/javascript" src="js/component/commonUtil.js"></script>\r
<script type="text/javascript" src="js/component/serverPageTable.js"></script>\r
nfv-package-iui-drop-zone-removeBtn=Remove\r
nfv-package-iui-drop-zone-uploadBtn=Upload\r
\r
+nfv-template-topo-iui-title=Topology\r
+nfv-template-nodes-iui-title=Nodes\r
+\r
//template table colums\r
nfv-template-iui-title=Service Template\r
nfv-template-iui-field-order=Order\r
nfv-template-iui-field-templatename=Name\r
+nfv-template-iui-field-templatename-topo=Name(Topo)\r
+nfv-template-iui-field-templatename-nodes=Name(Nodes)\r
nfv-template-iui-field-producttype=Type\r
nfv-template-iui-field-vendor=Vendor\r
nfv-template-iui-field-version=Version\r
nfv-package-iui-drop-zone-removeBtn=移除\r
nfv-package-iui-drop-zone-uploadBtn=上传\r
\r
+nfv-template-topo-iui-title=拓扑\r
+nfv-template-nodes-iui-title=节点\r
+\r
//模板管理表格字段名称定义\r
nfv-template-iui-title=模板管理\r
nfv-template-iui-field-order=序号\r
nfv-template-iui-field-templatename=名称\r
+nfv-template-iui-field-templatename-topo=名称(拓扑)\r
+nfv-template-iui-field-templatename-nodes=名称(节点)\r
nfv-template-iui-field-producttype=类型\r
nfv-template-iui-field-vendor=厂商\r
nfv-template-iui-field-version=版本\r
table: [\r
{"mData": "serviceTemplateId", name: "ID", "bVisible": false},\r
{"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename"), "fnRender" : tmUtil.nameRender},\r
- // {"mData": "producttype", name: $.i18n.prop("nfv-template-iui-field-producttype")},\r
+ //{"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename-topo"), "fnRender" : tmUtil.topoRender},\r
+ //{"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename-nodes"), "fnRender" : tmUtil.nodesRender},\r
{"mData": "vendor", name: $.i18n.prop("nfv-template-iui-field-vendor")},\r
{"mData": "version", name: $.i18n.prop("nfv-template-iui-field-version")},\r
{"mData":"csarId", name: "packageID","bVisible": false},\r
{"mData": "type", name: $.i18n.prop("nfv-template-iui-field-type")},\r
- //{"mData":"downloadUri", name: $.i18n.prop("nfv-template-iui-field-download-uri")},\r
- //{"mData": "inputs", name: $.i18n.prop("nfv-template-iui-field-inputs"), "fnRender" : tmUtil.inputsRender}\r
]\r
},\r
$language: {\r
}\r
window.open("./templateDetail.html?templateId="+templateId+"&flavor="+flavor,"_self");\r
},\r
+ $openTopoDetail : function(templateId, rowId) {\r
+ var oSelect = $("tbody tr select").eq(rowId);\r
+ var flavor = "";\r
+ if(oSelect.length) {\r
+ oSelect.find("option:selected").val();\r
+ }\r
+ window.open("./topologyDetail.html?templateId="+templateId+"&flavor="+flavor,"_self");\r
+ },\r
+ $openNodesDetail : function(templateId, rowId) {\r
+ var oSelect = $("tbody tr select").eq(rowId);\r
+ var flavor = "";\r
+ if(oSelect.length) {\r
+ oSelect.find("option:selected").val();\r
+ }\r
+ window.open("./nodesDetail.html?templateId="+templateId+"&flavor="+flavor,"_self");\r
+ }\r
});\r
avalon.scan();\r
vm.$initTable();\r
--- /dev/null
+/*\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ * http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+\r
+var vm = avalon.define({\r
+ $id : "tmNodesController",\r
+ templateId : "",\r
+ $language: {\r
+ "sProcessing": "<img src='../component/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span> "\r
+ +$.i18n.prop("nfv-nso-iui-table-sProcess")+"</span>",\r
+ "sLengthMenu": $.i18n.prop("nfv-nso-iui-table-sLengthMenu"),\r
+ "sZeroRecords": $.i18n.prop("nfv-nso-iui-table-sZeroRecords"),\r
+ "sInfo": "<span class='seperator'> </span>" + $.i18n.prop("nfv-nso-iui-table-sInfo"),\r
+ "sInfoEmpty": $.i18n.prop("nfv-nso-iui-table-sInfoEmpty"),\r
+ "sGroupActions": $.i18n.prop("nfv-nso-iui-table-sGroupActions"),\r
+ "sAjaxRequestGeneralError":$.i18n.prop("nfv-nso-iui-table-sAjaxRequestGeneralError"),\r
+ "sEmptyTable": $.i18n.prop("nfv-nso-iui-table-sEmptyTable"),\r
+ "oPaginate": {\r
+ "sPrevious": $.i18n.prop("nfv-nso-iui-table-sPrevious"),\r
+ "sNext": $.i18n.prop("nfv-nso-iui-table-sNext"),\r
+ "sPage": $.i18n.prop("nfv-nso-iui-table-sPage"),\r
+ "sPageOf": $.i18n.prop("nfv-nso-iui-table-sPageOf")\r
+ }\r
+ },\r
+ $restUrl : {\r
+ queryNodeTemplateUrl : "/openoapi/catalog/v1/servicetemplates/{0}/nodetemplates",\r
+ queryTemplateInfoUrl : "/openoapi/catalog/v1/servicetemplates"\r
+ },\r
+ $init : function() {\r
+ vm.$initTemplateData();\r
+ //vm.$initTopoNodesData();\r
+ vm.$initNodesData();\r
+ },\r
+ $initTemplateData : function() {\r
+ $.ajax({\r
+ type : "GET",\r
+ url : vm.$restUrl.queryTemplateInfoUrl,\r
+ success : function(resp) {\r
+ if(resp) {\r
+ vm.servicesTemplateData = [];\r
+ for(var i=0; i<resp.length; i++) {\r
+ //generate node table display data\r
+ vm.servicesTemplateData.push(resp[i]);\r
+ }\r
+ vm.$initNfvNodesTab();\r
+ }\r
+ },\r
+ error : function() {\r
+ commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");\r
+ }\r
+ });\r
+ },\r
+ $initNodesData : function() {\r
+ $.ajax({\r
+ type: "GET",\r
+ url: vm.$restUrl.queryNodeTemplateUrl,\r
+ success: function (resp) {\r
+ if (resp) {\r
+ vm.nodesDetail.nodesTemplateDetailData = [];\r
+ for (var i = 0; i < resp.length; i++) {\r
+ //generate node table display data\r
+ var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);\r
+ vm.nodesList.nodesData.push(nodeTemplate);\r
+ }\r
+ vm.nodesDetail.nodesTemplateDetailData = 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();\r
+ }\r
+ },\r
+ error: function () {\r
+ commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");\r
+ }\r
+ });\r
+ },\r
+ servicesTemplateData: [],\r
+ $nodesTabId : "ict_nodes_template_table",\r
+ $nodesTemplateTabFields : {// table columns\r
+ table: [\r
+ {"mData": "serviceTemplateId", name: "ID","bVisible": false},\r
+ {"mData": "", name: "","sClass": 'details-control'},\r
+ {"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename")},\r
+ {"mData": "vendor", name: $.i18n.prop("nfv-template-iui-field-vendor")},\r
+ {"mData": "version", name: $.i18n.prop("nfv-template-iui-field-version")},\r
+ {"mData":"csarid", name: "packageID","bVisible": false},\r
+ {"mData": "type", name: $.i18n.prop("nfv-template-iui-field-type")},\r
+ ]\r
+ },\r
+ $initNfvNodesTab: function() {\r
+ var setting = {};\r
+ setting.language = vm.$language;\r
+ setting.paginate = true;\r
+ setting.info = true;\r
+ setting.columns = vm.$nodesTemplateTabFields.table;\r
+ setting.restUrl = vm.$restUrl.queryTemplateInfoUrl;\r
+ setting.tableId = vm.$nodesTabId;\r
+ serverPageTable.initDataTable(setting,{},vm.$nodesTabId + '_div');\r
+ $('#' + vm.$nodesTabId + '>tbody').on("click", 'td.details-control', function () {\r
+ var tr = $(this).closest('tr');\r
+ var table = $('#' + vm.$nodesTabId).dataTable();\r
+ if (table.fnIsOpen(tr[0])) {\r
+ table.fnClose(tr[0]);\r
+ tr.removeClass('shown');\r
+ }\r
+ else {\r
+ table.fnOpen(tr[0], vm.nodesList.$format_Detail(), 'details');\r
+ tr.addClass('shown');\r
+ }\r
+ });\r
+ },\r
+\r
+ //nodes list table\r
+ nodesList :{\r
+ nodesData: [],\r
+ $nodesTabDataId : "ict_nodes_table",\r
+ $nodesTabFields : {// table columns\r
+ table: [\r
+ {"mData": "id", name: "ID", "bVisible": false},\r
+ {"mData": "name", name: $.i18n.prop("nfv-templateDetail-iui-field-nodetypename"), "bSortable": true, "fnRender" : tmNodesDetailUtil.nameRender},\r
+ {"mData": "type", name: $.i18n.prop("nfv-templateDetail-iui-field-type"), "bSortable": false},\r
+ {"mData": "containedin", name: $.i18n.prop("nfv-templateDetail-iui-field-containedin"), "bSortable": false},\r
+ {"mData": "deployedon", name: $.i18n.prop("nfv-templateDetail-iui-field-deployedon"), "bSortable": false},\r
+ {"mData": "connectedto", name: $.i18n.prop("nfv-templateDetail-iui-field-connectedto"), "bSortable": false},\r
+ {"mData": "virtuallinksto", name: $.i18n.prop("nfv-templateDetail-iui-field-virtuallinksto"), "bSortable": false}\r
+ ]\r
+ },\r
+ $initNodesTable: function () {\r
+ var setting = {};\r
+ setting.language = vm.$language;\r
+ setting.paginate = true;\r
+ setting.info = true;\r
+ setting.columns = vm.nodesList.$nodesTabFields.table;\r
+ setting.restUrl = vm.$restUrl.queryNodeTemplateUrl;\r
+ setting.tableId = vm.nodesList.$nodesTabDataId;\r
+ serverPageTable.initTableWithoutLib(setting,{},vm.nodesList.$nodesTabDataId + '_div');\r
+ },\r
+ $format_Detail: function() {\r
+ var sOut = '<div class="row-fluid" data-name="table_zone"><div class="col-xs-12" id="ict_nodes_table_div"></div></div>'\r
+ vm.$initNodesData();\r
+ return sOut;\r
+ },\r
+ },\r
+ //Nodes Details\r
+ nodesDetail : {\r
+ nodesTemplateDetailData: [],\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
+ {id: "properties", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-properties"), isActive: false},\r
+ {id: "relationShips", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-relationShips"), isActive: false}\r
+ ],\r
+ $showDetails : 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.$initNodeDetailTable(nodetypeid);\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
+ {"mData": "key", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"), "bSortable" : false},\r
+ {"mData": "value", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"), "bSortable" : false}\r
+ ],\r
+ properties: [\r
+ {"mData": "key", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"), "bSortable" : false},\r
+ {"mData": "value", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"), "bSortable" : false}\r
+ ],\r
+ relationShips: [\r
+ {"mData": "sourceNodeName", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-sourceNodeName"), "bSortable" : false},\r
+ {"mData": "targetNodeName", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-targetNodeName"), "bSortable" : false},\r
+ {"mData": "type", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-type"), "bSortable" : false}\r
+ ]\r
+ },\r
+ $initNodeDetailTable: 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
+});\r
+\r
+var initParam = function() { //initialize template detail params\r
+ var paramStr = window.location.search.substring(1);\r
+ if(paramStr.length > 0) {\r
+ var params = paramStr.split("&");\r
+ var templateId = params[0].substring(params[0].indexOf('=') + 1);\r
+ var flavor = params[1].substring(params[1].indexOf('=') + 1);\r
+ avalon.scan();\r
+\r
+ vm.templateId = templateId;\r
+ vm.$restUrl.queryNodeTemplateUrl = commonUtil.format(vm.$restUrl.queryNodeTemplateUrl, templateId);\r
+\r
+ if(flavor) {\r
+ vm.$restUrl.queryNodeTemplateUrl += "?flavor=" + flavor;\r
+ }\r
+\r
+ vm.$init();\r
+ }\r
+};\r
+initParam();
\ No newline at end of file
--- /dev/null
+/*\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ * http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+var tmNodesDetailUtil = {};\r
+tmNodesDetailUtil.timer = null;\r
+\r
+tmNodesDetailUtil.nameRender = function(obj) {\r
+ return '<a href="#" onclick="vm.nodesDetail.$showDetails('\r
+ + '\'block\',\'' + obj.aData.id + '\', \'' + obj.aData.name + '\')">' + obj.aData.name + '</a>';\r
+}\r
+\r
--- /dev/null
+/*\r
+ * Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ * http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+\r
+var vm = avalon.define({\r
+ $id : "tmTopoController",\r
+ templateId : "",\r
+ nodesData: [],\r
+ $language: {\r
+ "sProcessing": "<img src='../component/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span> "\r
+ +$.i18n.prop("nfv-nso-iui-table-sProcess")+"</span>",\r
+ "sLengthMenu": $.i18n.prop("nfv-nso-iui-table-sLengthMenu"),\r
+ "sZeroRecords": $.i18n.prop("nfv-nso-iui-table-sZeroRecords"),\r
+ "sInfo": "<span class='seperator'> </span>" + $.i18n.prop("nfv-nso-iui-table-sInfo"),\r
+ "sInfoEmpty": $.i18n.prop("nfv-nso-iui-table-sInfoEmpty"),\r
+ "sGroupActions": $.i18n.prop("nfv-nso-iui-table-sGroupActions"),\r
+ "sAjaxRequestGeneralError":$.i18n.prop("nfv-nso-iui-table-sAjaxRequestGeneralError"),\r
+ "sEmptyTable": $.i18n.prop("nfv-nso-iui-table-sEmptyTable"),\r
+ "oPaginate": {\r
+ "sPrevious": $.i18n.prop("nfv-nso-iui-table-sPrevious"),\r
+ "sNext": $.i18n.prop("nfv-nso-iui-table-sNext"),\r
+ "sPage": $.i18n.prop("nfv-nso-iui-table-sPage"),\r
+ "sPageOf": $.i18n.prop("nfv-nso-iui-table-sPageOf")\r
+ }\r
+ },\r
+ $restUrl : {\r
+ queryNodeTemplateUrl : "/openoapi/catalog/v1/servicetemplates/{0}/nodetemplates",\r
+ queryTemplateInfoUrl : "/openoapi/catalog/v1/servicetemplates"\r
+ },\r
+ $init : function() {\r
+ vm.$initTemplateData();\r
+ vm.$initTopoNodesData();\r
+ },\r
+ $initTemplateData : function() {\r
+ $.ajax({\r
+ type : "GET",\r
+ url : vm.$restUrl.queryTemplateInfoUrl,\r
+ success : function(resp) {\r
+ if(resp) {\r
+ vm.servicesTemplateData = [];\r
+ for(var i=0; i<resp.length; i++) {\r
+ //generate node table display data\r
+ vm.servicesTemplateData.push(resp[i]);\r
+ }\r
+ //vm.$initNfvNodesTab();\r
+ }\r
+ },\r
+ error : function() {\r
+ commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");\r
+ }\r
+ });\r
+ },\r
+ $initTopoNodesData : function() {\r
+ $.ajax({\r
+ type : "GET",\r
+ url : vm.$restUrl.queryNodeTemplateUrl,\r
+ success : function(resp) {\r
+ if(resp) {\r
+ vm.nodesDetail.nodesTemplateDetailData = [];\r
+ for(var i=0; i<resp.length; i++) {\r
+ //generate node table display data\r
+ var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);\r
+ vm.nodesData.push(nodeTemplate);\r
+ }\r
+ vm.nodesDetail.nodesTemplateDetailData = resp;\r
+ //generate topology graph display data\r
+ vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.nodesData.$model);\r
+ //initialize topology data\r
+ topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);\r
+ }\r
+ },\r
+ error : function() {\r
+ commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");\r
+ }\r
+ });\r
+ },\r
+ topologyTab : {\r
+ topology : "topology.html",\r
+ vnfTip : $.i18n.prop("nfv-topology-iui-vnf-tip"),\r
+ btnTip : $.i18n.prop("nfv-topology-iui-btn-return-tip"),\r
+ topoTemplateData:[],\r
+ boxTopoDatas:[],\r
+ networkTopoDatas:[],\r
+ isShowNum: false,\r
+ returnBtnVisible : false,\r
+ $getColor: function(index) {\r
+ return topoUtil.getColor(index);\r
+ },\r
+ $getCidr: function(properties){\r
+ return topoUtil.getCidr(properties);\r
+ },\r
+ $getCpTop: function(index, parentBoxId){\r
+ return topoUtil.getCpTop(index, parentBoxId);\r
+ },\r
+ $initTopology : function() {\r
+ topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);\r
+ },\r
+ $showTopo:function(id, name){\r
+ vm.nodesDetail.$showDetails("block", id, name);\r
+ },\r
+ $showVnfTopo: function(templateId) {\r
+ vm.topologyTab.returnBtnVisible = true;\r
+ vm.$restUrl.queryNodeTemplateUrl = "/openoapi/catalog/v1/servicetemplates/" + templateId + "/nodetemplates";\r
+ vm.$init();\r
+ },\r
+ $returnNS: function() {\r
+ vm.topologyTab.returnBtnVisible = false;\r
+ vm.$restUrl.queryNodeTemplateUrl = "/openoapi/catalog/v1/servicetemplates/" + vm.templateId + "/nodetemplates";\r
+ vm.$init();\r
+ }\r
+ },\r
+ //Nodes Details\r
+ nodesDetail : {\r
+ nodesTemplateDetailData: [],\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
+ {id: "properties", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-properties"), isActive: false},\r
+ {id: "relationShips", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-relationShips"), isActive: false}\r
+ ],\r
+ $showDetails : 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.$initNodeDetailTable(nodetypeid);\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
+ {"mData": "key", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"), "bSortable" : false},\r
+ {"mData": "value", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"), "bSortable" : false}\r
+ ],\r
+ properties: [\r
+ {"mData": "key", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"), "bSortable" : false},\r
+ {"mData": "value", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"), "bSortable" : false}\r
+ ],\r
+ relationShips: [\r
+ {"mData": "sourceNodeName", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-sourceNodeName"), "bSortable" : false},\r
+ {"mData": "targetNodeName", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-targetNodeName"), "bSortable" : false},\r
+ {"mData": "type", "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-type"), "bSortable" : false}\r
+ ]\r
+ },\r
+ $initNodeDetailTable: 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
+});\r
+\r
+var initParam = function() { //initialize template detail params\r
+ var paramStr = window.location.search.substring(1);\r
+ if(paramStr.length > 0) {\r
+ var params = paramStr.split("&");\r
+ var templateId = params[0].substring(params[0].indexOf('=') + 1);\r
+ var flavor = params[1].substring(params[1].indexOf('=') + 1);\r
+ avalon.scan();\r
+\r
+ vm.templateId = templateId;\r
+ vm.$restUrl.queryNodeTemplateUrl = commonUtil.format(vm.$restUrl.queryNodeTemplateUrl, templateId);\r
+\r
+ if(flavor) {\r
+ vm.$restUrl.queryNodeTemplateUrl += "?flavor=" + flavor;\r
+ }\r
+\r
+ vm.$init();\r
+ }\r
+};\r
+initParam();
\ No newline at end of file
+ '\',' + obj.iDataRow + ')">' + obj.aData.templateName + '</a>';\r
}\r
\r
-tmUtil.elasticRender = function(obj) {\r
- return null;\r
+tmUtil.topoRender = function(obj) {\r
+ return '<a href="#" onclick="vm.$openTopoDetail(\'' + obj.aData.serviceTemplateId\r
+ + '\',' + obj.iDataRow + ')">' + obj.aData.templateName + '</a>';\r
}\r
\r
+tmUtil.nodesRender = function(obj) {\r
+ return '<a href="#" onclick="vm.$openNodesDetail(\'' + obj.aData.serviceTemplateId\r
+ + '\',' + obj.iDataRow + ')">' + obj.aData.templateName + '</a>';\r
+}\r
/*tmUtil.openDetail = function(obj) {\r
if (obj) {\r
var framework;\r
--- /dev/null
+<!--\r
+\r
+ Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+\r
+ Licensed under the Apache License, Version 2.0 (the "License");\r
+ you may not use this file except in compliance with the License.\r
+ You may obtain a copy of the License at\r
+\r
+ http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+ Unless required by applicable law or agreed to in writing, software\r
+ distributed under the License is distributed on an "AS IS" BASIS,\r
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ See the License for the specific language governing permissions and\r
+ limitations under the License.\r
+\r
+-->\r
+<html>\r
+<head>\r
+ <head lang="en">\r
+ <meta charset="UTF-8">\r
+ <title></title>\r
+ <link href="../common/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />\r
+ <link href="../common/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />\r
+ <link href="../common/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />\r
+ <link href="../common/css/style.css" rel="stylesheet"/>\r
+ <link href="../common/css/ngict-component.css" rel="stylesheet"/>\r
+ <link href="../common/css/plugins.css" rel="stylesheet"/>\r
+ <link href="css/platform/animate.min.css" rel="stylesheet"/>\r
+ <link href="css/datatable-sort.css" rel="stylesheet"/>\r
+ <link href="css/templateDetail.css" rel="stylesheet" />\r
+ <link href="css/topology.css" rel="stylesheet" />\r
+ <style type="text/css">\r
+ .ms-controller {\r
+ visibility: hidden;\r
+ }\r
+ .ms-nodedetail {\r
+ display: none;\r
+ }\r
+ </style>\r
+ </head>\r
+<body>\r
+ <div ms-controller="tmNodesController" class="container-fluid ms-controller">\r
+ <div class="row">\r
+ <div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 titlefont">\r
+ <span id="nfv-template-nodes-iui-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+ </div>\r
+ </div>\r
+ <div class="separator-line"></div>\r
+ <div class="row-fluid" data-name="table_zone">\r
+ <div class="col-xs-12" id='ict_nodes_template_table_div'></div>\r
+ </div>\r
+\r
+ <div id="right-menu" class="ms-nodedetail" ms-css-display="vm.nodesDetail.isShow">\r
+ <div>\r
+ <div class="title"><h4>{{vm.nodesDetail.detailTitle}}</h4>\r
+ <div class="rigth right-button-pointer" ms-click="vm.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
+ </div>\r
+ </div>\r
+ <div>\r
+ <div class="btn-group" >\r
+ <button type="button" class="btn btn-default" ms-repeat="vm.nodesDetail.detailData" ms-click="vm.nodesDetail.detailCondChange($index)" ms-attr-id="el.id"\r
+ ms-class="active: el.isActive">{{el.name}}\r
+ </button>\r
+ </div>\r
+ <div ms-if="vm.nodesDetail.detailIndex === 0">\r
+ <div class="row-fluid" data-name="table_zone">\r
+ <div id='ict_table_general_div' class="vm.nodesDetail"></div>\r
+ </div>\r
+ </div>\r
+ <div ms-if="vm.nodesDetail.detailIndex === 1">\r
+ <div class="row-fluid" data-name="table_zone">\r
+ <div id='ict_table_properties_div' class="vm.nodesDetail"></div>\r
+ </div>\r
+ </div>\r
+ <div ms-if="vm.nodesDetail.detailIndex === 2">\r
+ <div class="row-fluid" data-name="table_zone">\r
+ <div id='ict_table_relationShips_div' class="vm.nodesDetail"></div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+\r
+ <script type="text/javascript" src="../common/thirdparty/jquery/jquery-1.10.2.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/bootstrap/js/bootstrap.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/data-tables/jquery.dataTables.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/data-tables/jquery.dataTables.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>\r
+\r
+ <script type="text/javascript" src="../common/bootstrap-growl/bootstrap-growl.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/avalon/avalon.modern.js"></script>\r
+\r
+ <script type="text/javascript" src="../common/js/tools.js"></script>\r
+\r
+ <script type="text/javascript" src="js/component/commonUtil.js"></script>\r
+ <script type="text/javascript" src="js/component/serverPageTable.js"></script>\r
+ <script type="text/javascript" src="js/component/loadi18n_nsoc.js"></script>\r
+\r
+ <script type="text/javascript" src="js/template/tmNodesDetailUtil.js"></script>\r
+ <script type="text/javascript" src="js/template/tmUtil.js"></script>\r
+ <script type="text/javascript" src="js/template/tmNodesController.js"></script>\r
+ <script type="text/javascript" src="js/template/topoUtil.js"></script>\r
+ </div>\r
+</body>\r
+</html>
\ No newline at end of file
<head lang="en">\r
<meta charset="UTF-8">\r
<title></title>\r
- <link href="../component/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />\r
- <link href="../component/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />\r
- <link href="../component/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />\r
- <link href="../component/css/ZteIctIcons/style.css" rel="stylesheet"/>\r
- <link href="../framework/css/ngict-component.css" rel="stylesheet"/>\r
- <link href="../framework/css/plugins.css" rel="stylesheet"/>\r
+ <link href="../common/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />\r
+ <link href="../common/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />\r
+ <link href="../common/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />\r
+ <link href="../common/css/style.css" rel="stylesheet"/>\r
+ <link href="../common/css/ngict-component.css" rel="stylesheet"/>\r
+ <link href="../common/css/plugins.css" rel="stylesheet"/>\r
<link href="css/template.css" rel="stylesheet" />\r
<style type="text/css">\r
.ms-controller {\r
</div>\r
</div>\r
\r
- <script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script>\r
- <script type="text/javascript" src="../component/thirdparty/bootstrap/js/bootstrap.min.js"></script>\r
- <script type="text/javascript" src="../component/thirdparty/bootbox/bootbox.min.js"></script> \r
- <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.min.js"></script>\r
- <script type="text/javascript" src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/jquery/jquery-1.10.2.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/bootstrap/js/bootstrap.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/bootbox/bootbox.min.js"></script> \r
+ <script type="text/javascript" src="../common/thirdparty/data-tables/jquery.dataTables.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>\r
\r
- <script type="text/javascript" src="../vendor/avalon/avalon.modern.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/avalon/avalon.modern.js"></script>\r
\r
- <script type="text/javascript" src="../framework/js/tools.js"></script>\r
+ <script type="text/javascript" src="../common/js/tools.js"></script>\r
\r
<script type="text/javascript" src="js/component/commonUtil.js"></script>\r
<script type="text/javascript" src="js/component/serverPageTable.js"></script>\r
<head lang="en">\r
<meta charset="UTF-8">\r
<title></title>\r
- <link href="../component/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />\r
- <link href="../component/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />\r
- <link href="../component/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />\r
- <link href="../component/css/ZteIctIcons/style.css" rel="stylesheet"/>\r
- <link href="../framework/css/ngict-component.css" rel="stylesheet"/>\r
- <link href="../framework/css/plugins.css" rel="stylesheet"/>\r
+ <link href="../common/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />\r
+ <link href="../common/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />\r
+ <link href="../common/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />\r
+ <link href="../common/cssstyle.css" rel="stylesheet"/>\r
+ <link href="../common/css/ngict-component.css" rel="stylesheet"/>\r
+ <link href="../common/css/plugins.css" rel="stylesheet"/>\r
<link href="css/platform/animate.min.css" rel="stylesheet"/>\r
<link href="css/datatable-sort.css" rel="stylesheet"/>\r
<link href="css/templateDetail.css" rel="stylesheet" />\r
</div>\r
</div>\r
\r
- <script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script>\r
- <script type="text/javascript" src="../component/thirdparty/bootstrap/js/bootstrap.min.js"></script>\r
- <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.js"></script>\r
- <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.min.js"></script>\r
- <script type="text/javascript" src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/jquery/jquery-1.10.2.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/bootstrap/js/bootstrap.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/data-tables/jquery.dataTables.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/data-tables/jquery.dataTables.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>\r
\r
- <script type="text/javascript" src="../vendor/bootstrap-growl/bootstrap-growl.min.js"></script>\r
- <script type="text/javascript" src="../vendor/avalon/avalon.modern.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/avalon/avalon.modern.js"></script>\r
\r
- <script type="text/javascript" src="../framework/js/tools.js"></script>\r
+ <script type="text/javascript" src="../common/js/tools.js"></script>\r
\r
<script type="text/javascript" src="js/component/commonUtil.js"></script>\r
<script type="text/javascript" src="js/component/serverPageTable.js"></script>\r
--- /dev/null
+<!--\r
+\r
+ Copyright (C) 2015 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+\r
+ Licensed under the Apache License, Version 2.0 (the "License");\r
+ you may not use this file except in compliance with the License.\r
+ You may obtain a copy of the License at\r
+\r
+ http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+ Unless required by applicable law or agreed to in writing, software\r
+ distributed under the License is distributed on an "AS IS" BASIS,\r
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ See the License for the specific language governing permissions and\r
+ limitations under the License.\r
+\r
+-->\r
+<html>\r
+<head>\r
+ <head lang="en">\r
+ <meta charset="UTF-8">\r
+ <title></title>\r
+ <link href="../common/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" />\r
+ <link href="../common/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" />\r
+ <link href="../common/thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet" />\r
+ <link href="../common/cssstyle.css" rel="stylesheet"/>\r
+ <link href="../common/css/ngict-component.css" rel="stylesheet"/>\r
+ <link href="../common/css/plugins.css" rel="stylesheet"/>\r
+ <link href="css/platform/animate.min.css" rel="stylesheet"/>\r
+ <link href="css/datatable-sort.css" rel="stylesheet"/>\r
+ <link href="css/templateDetail.css" rel="stylesheet" />\r
+ <link href="css/topology.css" rel="stylesheet" />\r
+ <style type="text/css">\r
+ .ms-controller {\r
+ visibility: hidden;\r
+ }\r
+ .ms-nodedetail {\r
+ display: none;\r
+ }\r
+ </style>\r
+ </head>\r
+<body>\r
+ <div ms-controller="tmTopoController" class="container-fluid ms-controller">\r
+ <div class="row">\r
+ <div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 titlefont">\r
+ <span id="nfv-template-topo-iui-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>\r
+ </div>\r
+ </div>\r
+ <div class="separator-line"></div>\r
+ <div class="container-fluid">\r
+ <div id="networks" style="float:left;display:inline-block">\r
+ <div class="networksContainer">\r
+ <div class="network" ms-repeat-network="topologyTab.networkTopoDatas">\r
+ <div class="name" tooltip="" ms-attr-title="network.name" ms-if="network.name"\r
+ ms-click="topologyTab.$showTopo(network.id, network.name)">\r
+ <div ms-if="topologyTab.isShowNum" ms-text="network.num" class="badge">0</div>\r
+ <span>{{network.name}}</span>\r
+ </div>\r
+ <div class="subnet" ms-repeat-subnet="network.subnets">\r
+ <div class="line">\r
+ <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)">\r
+ <div ms-if="topologyTab.isShowNum" ms-text="subnet.num" class="badge">0</div>\r
+ <p>{{subnet.name}}</p>\r
+ <p class="cidr" ms-text="topologyTab.$getCidr(subnet.properties)"></p>\r
+ </div>\r
+ </div>\r
+ </div><!--end repeat network.subnets-->\r
+ </div><!--end repeat topologyTab.networkTopoDatas-->\r
+ </div>\r
+ </div>\r
+ <div id="topo" style="float:left;display:inline-block">\r
+ <div class="row-fluid" data-name="topo_zone">\r
+ <div class="bpContainer" ms-each-host="topologyTab.boxTopoDatas">\r
+ <div>\r
+ <div class="box" ms-attr-id="host.id">\r
+ <div class="piProgress" size="55">\r
+ <div class="circle">\r
+ <i class="gs-node-icon fa fa-desktop" ></i>\r
+ <div ms-if="topologyTab.isShowNum" ms-text="host.num" class="badge">1</div>\r
+ </div>\r
+ <div class="smallCircle" ms-repeat-cp="host.cp" ms-attr-id="cp.id" ms-title="cp.name"\r
+ ms-click="topologyTab.$showTopo(cp.id,cp.name)" ms-css-top="topologyTab.$getCpTop($index,host.id)">\r
+ <i class="gs-cp-icon fa fa-credit-card" ></i>\r
+ </div>\r
+ </div>\r
+ <div class="head" ms-hover="boxHover" tooltip ms-attr-title="host.name" ms-text="host.name" ms-click="topologyTab.$showTopo(host.id, host.name)">\r
+ </div>\r
+ <div class="holder">\r
+ <div class="nest" ms-if="host.vnfdid" ms-click="topologyTab.$showVnfTopo(host.vnfdid)"\r
+ ms-attr-title="topologyTab.vnfTip"><!-- only display nested ns template -->\r
+ <div class="plus">\r
+ <i class="fa fa-plus" style="color: #3aaeda;"></i>\r
+ </div>\r
+ </div>\r
+ <div ms-each-box="host.children" ><!-- ngRepeat: node in map track by node.name -->\r
+ <div>\r
+ <div class="box" ms-attr-id="box.id">\r
+ <div class="piProgress" size="55">\r
+ <div class="circle">\r
+ <i class="gs-node-icon fa fa-cogs"></i>\r
+ <div ms-if="topologyTab.isShowNum" ms-text="box.num" class="badge">1</div>\r
+ </div>\r
+ <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)">\r
+ <i class="gs-cp-icon fa fa-credit-card" ></i>\r
+ </div>\r
+ </div>\r
+ <div class="head" ms-hover="boxHover"\r
+ tooltip="" ms-click="topologyTab.$showTopo(box.id, box.name)" ms-attr-title="box.name" ms-text="box.name"></div>\r
+ <div class="holder" >\r
+ <div ms-each-app="box.children">\r
+ <!-- ngRepeat: node in map track by node.name -->\r
+ <div>\r
+ <div class="app" ms-attr-id="app.id" ms-click="topologyTab.$showTopo(app.id, app.name)" ms-hover="appHover">\r
+ <div class="piProgress" size="55">\r
+ <div class="circle" >\r
+ <i class="gs-node-icon fa fa-cog" ></i>\r
+ <div ms-if="topologyTab.isShowNum" ms-text="app.num" class="badge">1</div>\r
+ </div>\r
+ </div>\r
+ <p tooltip="" ms-attr-id="app.id" ms-attr-title="app.name" ms-text="app.name"></p>\r
+ </div>\r
+ </div>\r
+ <!-- end ngRepeat: node in map track by node.name -->\r
+ </div>\r
+ </div><!-- end ngIf: node.isApp == false -->\r
+ </div><!-- end ngRepeat: node in map track by node.name -->\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div>\r
+ <div class="coordinates">\r
+ <svg id="svg_vl" width="100%" height="100%" fill="silver">\r
+ <g transform="translate(0, 0)" >\r
+ </g>\r
+ </svg>\r
+ </div>\r
+ <div class="coordinates" style="z-index:3;">\r
+ <svg id="svg_vdu" width="100%" height="100%" fill="silver">\r
+ <g transform="translate(0, 0)" >\r
+ </g>\r
+ <defs>\r
+ <marker id="arrowhead" viewBox="0 0 20 20" refX="16" refY="10" markerUnits="userSpaceOnUse" markerWidth="16" markerHeight="12" orient="auto" fill="#7A7A7A">\r
+ <path d="M 0 0 L 20 10 L 0 20 z"></path>\r
+ </marker>\r
+ </defs>\r
+ </svg>\r
+ </div>\r
+ </div>\r
+ </div>\r
+\r
+ <div id="right-menu" class="ms-nodedetail" ms-css-display="nodesDetail.isShow">\r
+ <div>\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
+ </div>\r
+ </div>\r
+ <div>\r
+ <div class="btn-group" >\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="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="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="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
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+\r
+ <script type="text/javascript" src="../common/thirdparty/jquery/jquery-1.10.2.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/bootstrap/js/bootstrap.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/data-tables/jquery.dataTables.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/data-tables/jquery.dataTables.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>\r
+\r
+ <script type="text/javascript" src="../common/thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script>\r
+ <script type="text/javascript" src="../common/thirdparty/avalon/avalon.modern.js"></script>\r
+\r
+ <script type="text/javascript" src="../common/js/tools.js"></script>\r
+\r
+ <script type="text/javascript" src="js/component/commonUtil.js"></script>\r
+ <script type="text/javascript" src="js/component/serverPageTable.js"></script>\r
+ <script type="text/javascript" src="js/component/loadi18n_nsoc.js"></script>\r
+\r
+ <script type="text/javascript" src="js/template/tmDetailUtil.js"></script>\r
+ <script type="text/javascript" src="js/template/tmUtil.js"></script>\r
+ <script type="text/javascript" src="js/template/tmTopoController.js"></script>\r
+ <script type="text/javascript" src="js/template/topoUtil.js"></script>\r
+ </div>\r
+</body>\r
+</html>
\ No newline at end of file
Code Review / vnfsdk / refrepo.git / commitdiff