add nvfo nodes info for detail page

Change-Id: Ic4defebc27aee5d5c6ca290a225af484f41522eb
Signed-off-by: Luji7 <lu.ji3@zte.com.cn>

2 files changed, 266 insertions, 0 deletions

diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/tmNodesController.js b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/tmNodesController.js
new file mode 100644
index 00000000..7da69471
--- /dev/null
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/tmNodesController.js
@@ -0,0 +1,191 @@
+/*
+ * 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 : "tmNodesController",
+    instanceId : "",
+    $language: {
+        "sProcessing": "<img src='../component/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span>&nbsp;&nbsp;"
+        +$.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 : {
+        queryNodeInstanceUrl : "/openoapi/nslcm/v1.0/ns/"
+    },
+    $init : function() {
+        vm.$initInstanceData();
+    },
+    $initInstanceData : function() {
+        $.ajax({
+            type : "GET",
+            url : vm.$restUrl.queryNodeInstanceUrl,
+            success : function(resp) {
+                if(resp) {
+                    vm.servicesInstanceData = [
+                       resp.nsName,
+                       resp.description,
+                       resp.nsdId,
+                       resp.nsState
+                    ];
+                    var tableData = [
+                        [resp.vnfInfoId],
+                        [resp.vlInfo.vldId],
+                        [resp.vnffgInfo.vnffgInstanceId]
+                    ];
+                    vm.$initNfvNodesTab();
+                    vm.nodesList.nodesData = tableData;
+                    vm.nodesList.$initNodesTable();
+                }
+            },
+            error : function() {
+                commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");
+            }
+        });
+    },
+    servicesInstanceData: [],
+    $nodesTabId : "ict_nodes_template_table",
+    $nodesInstanceTabFields : {// table columns
+        table: [
+            {"mData": "serviceInstanceId", name: "ID","bVisible": false},
+            {"mData": "", name: "","sClass": 'details-control'},
+            {"mData": "serviceName", name: "Service Name"},
+            {"mData": "serviceDescription", name: "Service Description"},
+            {"mData": "nsdId", name: "NSD ID"},
+            {"mData":"status", name: "Status"}
+        ]
+    },
+    $initNfvNodesTab: function() {
+        var setting = {};
+        setting.language = vm.$language;
+        setting.paginate = true;
+        setting.info = true;
+        setting.columns = vm.$nodesInstanceTabFields.table;
+        setting.tableId = vm.$nodesTabId;
+        vm.$initDataTable(setting,vm.$nodesTabId + '_div', vm.servicesInstanceData);
+        $('#' + vm.$nodesTabId + '>tbody').on("click", 'td.details-control', function () {
+            var tr = $(this).closest('tr');
+            var table =  $('#' + vm.$nodesTabId).dataTable();
+            if (table.fnIsOpen(tr[0])) {
+                table.fnClose(tr[0]);
+                tr.removeClass('shown');
+            }
+            else {
+                table.fnOpen(tr[0], vm.nodesList.$format_Detail(), 'details');
+                tr.addClass('shown');
+            }
+        });
+    },
+
+    $initDataTable : function( setting, divId, tableData) {
+        //transform colomn
+        var column = setting.columns;
+        //empty table
+        $('#'+ divId).children().remove();
+        var tableId = setting.tableId;
+        var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'
+            + '<thead>'
+            +'<tr role="row" class="heading" >'
+            + '</tr>'
+            + '</thead>'
+            +'<tbody>'
+            +'</tbody>'
+            +'</table>';
+        $('#'+ divId).append(tableEleStr);
+        //$('#'+ tableId).append(' <thead><tr role="row" class="heading" ></tr></thead><tbody></tbody>');
+        var trEle = $('#'+ tableId  + ' > thead >tr');
+        //var dataTableColumn = [];
+        for ( var one in column){
+            var th = '<th>' + column[one].name + '</th>';
+            trEle.append(th);
+        }
+        var table = $("#" + tableId).dataTable({
+            //"sDom" : "tr<'row'<'col-md-6 col-sm-12'><'col-md-6 col-sm-12'pli>>", // datatable layout
+            //"sDom" : "<'row'<'col-md-12 col-sm-12'lip>r><'table-scrollable't>>",
+            "sDom": '<"top"rt><"bottom"lip>',
+            "oLanguage": setting.language,//language
+            //"bJQueryUI": true,
+            "bPaginate": setting.paginate,// page button
+            "bFilter": false,// search bar
+            "bAutoWidth":true,//automatically set colum width
+            "bLengthChange": true,// record number in each row
+            "iDisplayLength": 10,// row number in each page
+            "bSort": setting.sort ? true : false,// sort
+            "bInfo": setting.info,// Showing 1 to 10 of 23 entries 
+            "bWidth": true,
+            "bScrollCollapse": true,
+            "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button
+            "bProcessing": true,
+            "bServerSide": false,
+            "bDestroy": true,
+            "bSortCellsTop": true,
+            "aoColumns": setting.columns,
+            "aoColumnDefs": [
+                        {
+                            sDefaultContent: '',
+                            aTargets: [ '_all' ]
+                        }
+            ],
+            "aaData": tableData
+        });
+    };
+
+    //nodes list table
+    nodesList :{
+        nodesData: [],
+        $nodesTabDataId : "ict_nodes_table",
+        $nodesTabFields : {// table columns
+            table: [
+                {"mData": "id", name: "ID", "bVisible": false},
+                {"mData": "instanceId", name: "Instance Id"}
+            ]
+        },
+        $initNodesTable: function () {
+            var setting = {};
+            setting.language = vm.$language;
+            setting.paginate = true;
+            setting.info = true;
+            setting.columns = vm.nodesList.$nodesTabFields.table;
+            setting.tableId = vm.nodesList.$nodesTabDataId;
+            vm.$initDataTable(setting,vm.nodesList.$nodesTabDataId + '_div', vm.nodesList.nodesData);
+        }
+    }
+});
+
+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);
+        
+        vm.instanceId = instanceId;
+        vm.$restUrl.queryNodeInstanceUrl = commonUtil.format(vm.$restUrl.queryNodeInstanceUrl, instanceId);
+        vm.$init();
+    }
+};
+initParam();
\ No newline at end of file
diff --git a/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/lcm_detail_nfvo_nodesinfo.html b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/lcm_detail_nfvo_nodesinfo.html
new file mode 100644
index 00000000..b09ae008
--- /dev/null
+++ b/openo-portal/portal-lifecyclemgr/src/main/webapp/lifecyclemgr/lcm_detail_nfvo_nodesinfo.html
@@ -0,0 +1,75 @@
+<!--
+
+    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="tmNodesController" 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-nodes-iui-title" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+            </div>
+        </div>
+        <div class="separator-line"></div>
+        <div class="row-fluid" data-name="table_zone">
+            <div class="col-xs-12" id='ict_nodes_template_table_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/tmNodesDetailUtil.js"></script>
+        <script type="text/javascript" src="js/template/tmUtil.js"></script>
+        <script type="text/javascript" src="js/tmNodesController.js"></script>
+        <script type="text/javascript" src="js/template/topoUtil.js"></script>
+    </div>
+</body>
+</html>
\ No newline at end of file