From 928ff2eb017b4cfe2a9d775688493fdcbed5c008 Mon Sep 17 00:00:00 2001
From: seshukm <seshu.kumar.m@huawei.com>
Date: Fri, 20 Jan 2017 17:46:34 +0530
Subject: Client code change form GSO-GUI to OPEN-O GUI

code restructured for the OPEN-O CLient.

Issue-Id : CLIENT-11

Change-Id: Ib2846320c5522ca373ba7b1c12e3caa9443e5ea1
Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
---
 .../main/webapp/catalog/js/component/commonUtil.js | 128 +++++
 .../webapp/catalog/js/component/loadi18n_nsoc.js   |  38 ++
 .../webapp/catalog/js/component/serverPageTable.js | 490 ++++++++++++++++
 .../main/webapp/catalog/js/package/pmController.js | 346 ++++++++++++
 .../src/main/webapp/catalog/js/package/pmUtil.js   | 221 ++++++++
 .../webapp/catalog/js/template/tmController.js     | 100 ++++
 .../catalog/js/template/tmDetailController.js      | 430 ++++++++++++++
 .../webapp/catalog/js/template/tmDetailUtil.js     |  72 +++
 .../catalog/js/template/tmNodesController.js       | 289 ++++++++++
 .../catalog/js/template/tmNodesDetailUtil.js       |  23 +
 .../webapp/catalog/js/template/tmTopoController.js | 199 +++++++
 .../src/main/webapp/catalog/js/template/tmUtil.js  |  42 ++
 .../main/webapp/catalog/js/template/topoUtil.js    | 618 +++++++++++++++++++++
 13 files changed, 2996 insertions(+)
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/component/commonUtil.js
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/component/loadi18n_nsoc.js
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/component/serverPageTable.js
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/package/pmController.js
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/package/pmUtil.js
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/template/tmController.js
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/template/tmDetailController.js
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/template/tmDetailUtil.js
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/template/tmNodesController.js
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/template/tmNodesDetailUtil.js
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/template/tmTopoController.js
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/template/tmUtil.js
 create mode 100644 portal-catalog/src/main/webapp/catalog/js/template/topoUtil.js

(limited to 'portal-catalog/src/main/webapp/catalog/js')

diff --git a/portal-catalog/src/main/webapp/catalog/js/component/commonUtil.js b/portal-catalog/src/main/webapp/catalog/js/component/commonUtil.js
new file mode 100644
index 00000000..5a5cdaca
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/component/commonUtil.js
@@ -0,0 +1,128 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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 commonUtil = {};
+commonUtil.arrayRemove = function( aryInstance , index ){
+    if(aryInstance == undefined || aryInstance == null){
+        return;
+    }
+    for(var i=0,n=0;i<aryInstance.length;i++) {
+        if(aryInstance[i]!=aryInstance[dx]) {
+            aryInstance[n++]=aryInstance[i];
+        }
+    }
+    aryInstance.length-=1;
+};
+
+//For the expansion of the Date, convert the Date to specify the format String
+// examples：
+// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
+// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
+commonUtil.parseDate = function( dateObj , format){
+    var o = {
+        "M+" : dateObj.getMonth()+1, //month
+        "d+" : dateObj.getDate(),    //day
+        "h+" : dateObj.getHours(),   //hour
+        "m+" : dateObj.getMinutes(), //minute
+        "s+" : dateObj.getSeconds(), //second
+        "q+" : Math.floor((dateObj.getMonth()+3)/3),  //quarter
+        "S" : dateObj.getMilliseconds() //millisecond
+    }
+    if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
+        (dateObj.getFullYear()+"").substr(4 - RegExp.$1.length));
+    for(var k in o)
+        if(new RegExp("("+ k +")").test(format))
+            format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] :
+                    ("00"+ o[k]).substr((""+ o[k]).length));
+    return format;
+};
+
+//tooltip
+commonUtil.showMessage = function(message, type) {
+    $.growl({
+        icon: "fa fa-envelope-o fa-lg",
+        title: "&nbsp;&nbsp;" + $.i18n.prop("nfv-nso-iui-common-tip"),
+        message: message
+    },{
+        type: type
+    });
+};
+
+commonUtil.registerCometdMessage = function(url, channel, callback) {
+    var cometd = new $.Cometd();
+    var cometdURL = location.protocol + "//" + location.host + url;
+    cometd.configure({
+        url : cometdURL,
+        logLevel : "info"
+    });
+    // unregister websocket transport, use long-polling transport
+    cometd.unregisterTransport('websocket');
+    // store channel object parameters(this object include channel and callback function), start from arguments[1]
+    var _args = arguments;  
+
+    cometd.addListener("/meta/handshake", function(handshake){
+        if(handshake.successful === true) {
+            cometd.batch(function() {
+                //subscribe channel
+                cometd.subscribe(channel, function(message){
+                    callback.call(this, message.data);
+                });
+            });
+        }
+    });
+    cometd.handshake();
+}
+
+commonUtil.format = function() {
+    if(arguments.length == 0) {
+        return null;
+    }
+    var str = arguments[0];
+    for(var i=0; i<arguments.length; i++) {
+        var reg = new RegExp("\\{" + (i - 1) + "\\}" , "gm");
+        str = str.replace(reg, arguments[i]);
+    }
+    return str;
+}
+
+commonUtil.get = function(url, params, callback) {
+    $.ajax({
+        type : "GET",
+        url : url,
+        //contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+        dataType : "json",
+        data : params || {},
+        success : callback
+    });
+}
+
+commonUtil.post = function(url, params, callback, contentType) {
+    $.ajax({
+        type : "POST",
+        url : url,
+        contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+        data : params || {},
+        success : callback
+    });
+}
+
+commonUtil.delete = function(url, callback, contentType) {
+    $.ajax({
+        type : "DELETE",
+        url : url,
+        contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+        success : callback
+    });
+}
\ No newline at end of file
diff --git a/portal-catalog/src/main/webapp/catalog/js/component/loadi18n_nsoc.js b/portal-catalog/src/main/webapp/catalog/js/component/loadi18n_nsoc.js
new file mode 100644
index 00000000..51d4e6c4
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/component/loadi18n_nsoc.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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.
+ */
+function loadPropertiesSideMenu(lang, fileNamePrefix, filePath){
+	jQuery.i18n.properties({
+	    language:lang,
+	    name:fileNamePrefix,
+	    path:filePath,
+	    mode:'map',
+	    callback: function() {
+	        var i18nItems = $("[name_i18n=com_zte_nfv_nsoc_i18n]");
+	        for(var i=0;i<i18nItems.length;i++) {
+	        	var $item = $(i18nItems.eq(i));
+	        	var itemId = $item.attr("id");
+	        	var itemTitle = $item.attr("title");
+	        	if(typeof(itemTitle) != "undefined") {
+	        		$item.attr("title", $.i18n.prop(itemId));
+	        	} else {
+	        		$item.text($.i18n.prop(itemId));
+	        	}
+	        }
+	    }
+	});
+}
+var lang = getLanguage();
+loadPropertiesSideMenu(lang, 'nfv-nso-iui-i18n', 'i18n/');
\ No newline at end of file
diff --git a/portal-catalog/src/main/webapp/catalog/js/component/serverPageTable.js b/portal-catalog/src/main/webapp/catalog/js/component/serverPageTable.js
new file mode 100644
index 00000000..2c076315
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/component/serverPageTable.js
@@ -0,0 +1,490 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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 serverPageTable = {};
+/* Bootstrap style full number pagination control */
+$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
+{
+    return {
+        "iStart":         oSettings._iDisplayStart,
+        "iEnd":           oSettings.fnDisplayEnd(),
+        "iLength":        oSettings._iDisplayLength,
+        "iTotal":         oSettings.fnRecordsTotal(),
+        "iFilteredTotal": oSettings.fnRecordsDisplay(),
+        "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
+        "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
+    };
+};
+
+$.extend( $.fn.dataTableExt.oPagination, {
+    "bootstrap_extended": {
+        "fnInit": function( oSettings, nPaging, fnDraw ) {
+            var oLang = oSettings.oLanguage.oPaginate;
+            var oPaging = oSettings.oInstance.fnPagingInfo();
+
+            var fnClickHandler = function ( e ) {
+                e.preventDefault();
+                if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
+                    fnDraw( oSettings );
+                }
+            };
+
+            $(nPaging).append(
+                '<div class="pagination-panel"> ' + oLang.sPage + ' ' +
+                '<a href="#" class="btn btn-sm default prev disabled" title="' + oLang.sPrevious + '"><i class="fa fa-angle-left"></i></a>' +
+                '<input type="text" class="pagination-panel-input input-mini input-inline input-sm" maxlenght="5" style="text-align:center; margin: 0 4px; border: 1px solid rgb(169, 169, 169);height: 28px;">' +
+                '<a href="#" class="btn btn-sm default next disabled" title="' + oLang.sNext + '"><i class="fa fa-angle-right"></i></a> ' +
+                oLang.sPageOf + ' <span class="pagination-panel-total"></span>' +
+                '</div>'
+            );
+
+            var els = $('a', nPaging);
+
+            $(els[0]).bind('click.DT', { action: "previous" }, fnClickHandler );
+            $(els[1]).bind('click.DT', { action: "next" }, fnClickHandler);
+
+            $('.pagination-panel-input', nPaging).bind('change.DT', function(e) {
+                var oPaging = oSettings.oInstance.fnPagingInfo();
+                e.preventDefault();
+                var page = parseInt($(this).val());
+                if (page > 0 && page < oPaging.iTotalPages) {
+                    if ( oSettings.oApi._fnPageChange(oSettings, page-1) ) {
+                        fnDraw( oSettings );
+                    }
+                } else {
+                    $(this).val(oPaging.iPage + 1);
+                }
+            });
+
+            $('.pagination-panel-input', nPaging).bind('keypress.DT', function(e) {
+                var oPaging = oSettings.oInstance.fnPagingInfo();
+                if (e.which == 13) {
+                    var page = parseInt($(this).val());
+                    if (page > 0 && page < oSettings.oInstance.fnPagingInfo().iTotalPages) {
+                        if ( oSettings.oApi._fnPageChange(oSettings, page-1) ) {
+                            fnDraw( oSettings );
+                        }
+                    } else {
+                        $(this).val(oPaging.iPage + 1);
+                    }
+                    e.preventDefault();
+                }
+            });
+        },
+
+        "fnUpdate": function ( oSettings, fnDraw ) {
+            var iListLength = 5;
+            var oPaging = oSettings.oInstance.fnPagingInfo();
+            var an = oSettings.aanFeatures.p;
+            var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
+
+            if ( oPaging.iTotalPages < iListLength) {
+                iStart = 1;
+                iEnd = oPaging.iTotalPages;
+            }
+            else if ( oPaging.iPage <= iHalf ) {
+                iStart = 1;
+                iEnd = iListLength;
+            } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
+                iStart = oPaging.iTotalPages - iListLength + 1;
+                iEnd = oPaging.iTotalPages;
+            } else {
+                iStart = oPaging.iPage - iHalf + 1;
+                iEnd = iStart + iListLength - 1;
+            }
+
+
+            for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
+                var wrapper = $(an[i]).parents(".dataTables_wrapper");
+
+                if (oPaging.iTotalPages <= 0) {
+                    $('.pagination-panel, .dataTables_length', wrapper).hide();
+                } else {
+                    $('.pagination-panel, .dataTables_length', wrapper).show();
+                }
+
+                $('.pagination-panel-total', an[i]).html(oPaging.iTotalPages);
+                $('.pagination-panel-input', an[i]).val(oPaging.iPage + 1);
+
+                // Remove the middle elements
+                $('li:gt(1)', an[i]).filter(':not(.next)').remove();
+
+                // Add the new list items and their event handlers
+                for ( j=iStart ; j<=iEnd ; j++ ) {
+                    sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
+                    $('<li '+sClass+'><a href="#">'+j+'</a></li>')
+                        .insertBefore( $('li.next:first', an[i])[0] )
+                        .bind('click', function (e) {
+                            e.preventDefault();
+                            oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
+                            fnDraw( oSettings );
+                        } );
+                }
+
+                // Add / remove disabled classes from the static elements
+                if ( oPaging.iPage === 0 ) {
+                    $('a.prev', an[i]).addClass('disabled');
+                } else {
+                    $('a.prev', an[i]).removeClass('disabled');
+                }
+
+                if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
+                    $('a.next', an[i]).addClass('disabled');
+                } else {
+                    $('a.next', an[i]).removeClass('disabled');
+                }
+            }
+        }
+    }
+} );
+
+serverPageTable.getRestPara = function( cond , tableSetting ){
+    var pageNo=tableSetting._iDisplayStart/tableSetting._iDisplayLength+1;
+    var pageSize = tableSetting._iDisplayLength;
+    var queryParameter={"pageNo":pageNo,"pageSize":tableSetting._iDisplayLength,groupId:["it.group.database=02","it.group.server=01"]},
+        newData={"data":JSON.stringify(queryParameter)};
+    //put the pageinfo in cond if there is a pageinfo 
+    var pageInfo = vm.logInfo[vm.logType].pageInfo;
+    if(pageInfo != null && serverPageTable.perpagenumber == pageSize){ 
+        cond.idEnd = pageInfo.pageStart[pageNo - 1];
+        cond.idStart = pageInfo.pageStart[pageNo];
+        if(!cond.idStart){ //the last page
+            cond.idStart = 0;
+        }
+
+    }else{
+        delete cond.idStart;
+        delete cond.idEnd;
+        vm.logInfo[vm.logType].pageInfo = null;
+        pageNo = 1;
+        tableSetting._iDisplayStart = 0;
+    }
+    var data = {
+        cond:JSON.stringify(cond),
+        perpagenumber:pageSize,
+        pageNo:pageNo,
+        needPageInfo:vm.logInfo[vm.logType].pageInfo == null
+    };
+    serverPageTable.perpagenumber = pageSize;
+    return data;
+};
+
+serverPageTable.initTableWithoutLib = function( setting ,cond , divId) {
+    //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>',
+        "sDom": '<"top"rt>',
+        "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,
+        "sAjaxSource": setting.restUrl,
+        "aoColumns": setting.columns,
+        "aoColumnDefs": [
+            {
+                sDefaultContent: '',
+                aTargets: [ '_all' ]
+            }
+        ],
+        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
+            oSettings.jqXHR = $.ajax({
+                "type": 'get',
+                "url": sSource,
+                "dataType": "json",
+                //"data":serverPageTable.getRestPara(cond,oSettings),
+                "success": function (resp) {
+                    oSettings.iDraw = oSettings.iDraw + 1;
+
+                    resp = resp || [];
+                    var data = {};
+                    data.aaData = resp;
+                    var totalCounts = resp.length;
+
+                    data.iTotalRecords = totalCounts;
+                    data.iTotalDisplayRecords = totalCounts;
+                    data.sEcho = oSettings;
+                    fnCallback(data);
+                },
+                "error": function(resp) {
+                    var data = {};
+                    data.aaData = [];
+                    var totalCounts = 0;
+
+                    data.iTotalRecords = totalCounts;
+                    data.iTotalDisplayRecords = totalCounts;
+                    data.sEcho = oSettings;
+                    fnCallback(data);
+                }
+            });
+        }
+    });
+};
+
+serverPageTable.initDataTable = function( setting ,cond , divId) {
+    //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,
+        "sAjaxSource": setting.restUrl,
+        "aoColumns": setting.columns,
+        "aoColumnDefs": [
+            {
+                sDefaultContent: '',
+                aTargets: [ '_all' ]
+            }
+        ],
+        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
+            oSettings.jqXHR = $.ajax({
+                "type": 'get',
+                "url": sSource,
+                "dataType": "json",
+                //"data":serverPageTable.getRestPara(cond,oSettings),
+                "success": function (resp) {                                       
+                    oSettings.iDraw = oSettings.iDraw + 1;
+                    
+                    resp = resp || [];
+                    var data = {};
+                    data.aaData = resp;
+                    var totalCounts = resp.length;
+                    
+                    data.iTotalRecords = totalCounts;
+                    data.iTotalDisplayRecords = totalCounts;
+                    data.sEcho = oSettings;
+                    fnCallback(data);
+                },
+                "error": function(resp) {
+                    var data = {};
+                    data.aaData = [];
+                    var totalCounts = 0;
+                    
+                    data.iTotalRecords = totalCounts;
+                    data.iTotalDisplayRecords = totalCounts;
+                    data.sEcho = oSettings;
+                    fnCallback(data);
+                }
+            });
+        }
+    });
+};
+
+serverPageTable.initTableWithData = 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);
+    var trEle = $('#'+ tableId  + ' > thead >tr');
+    for ( var one in column){
+        var th = '<th>' + column[one].name + '</th>';
+        trEle.append(th);
+    }
+    var table = $("#" + tableId).dataTable({
+        "sDom" : "<'row'<'col-md-12 col-sm-12'lip>r>>",
+        "oLanguage": setting.language,//language
+        //"bJQueryUI": true,
+        "bPaginate": setting.paginate,// page button
+        "bFilter": false,// search bar
+        "bAutoWidth":true,//automatically set the column 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": false,
+        "bServerSide": false,
+        "bDestroy": true,
+        "bSortCellsTop": true,
+        "sAjaxSource": tableData,
+        "aoColumns": setting.columns,
+        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {                    
+            oSettings.iDraw = oSettings.iDraw + 1;            
+            var resp = tableData || [];
+            var data = {};
+            data.aaData = resp;
+            var totalCounts = resp.length;
+            
+            data.iTotalRecords = totalCounts;
+            data.iTotalDisplayRecords = totalCounts;
+            data.sEcho = oSettings;
+            fnCallback(data); 
+        }
+    });
+};
+
+
+serverPageTable.initDataTableForEvent = function( setting ,cond , divId) {
+    //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);
+    var trEle = $('#'+ tableId  + ' > thead >tr');
+    for ( var one in column){
+        var th = '<th>' + column[one].name + '</th>';
+        trEle.append(th);
+    }
+    var table = $("#" + tableId).dataTable({
+        "sDom": '<"top"rt><"bottom"lip>',
+        "oLanguage": setting.language,//language
+        //"bJQueryUI": true,
+        "bPaginate": setting.paginate,// page button
+        "bFilter": false,// search bar
+        "bAutoWidth":true,//automatically set the column width
+        "bLengthChange": true,// record number in each row
+        "iDisplayLength": 10,// row number in each page
+        "bSort": setting.sort ? true : false,
+        "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,
+        "sAjaxSource": setting.restUrl,
+        "aoColumns": setting.columns,
+        "aoColumnDefs": [
+            {
+                sDefaultContent: '',
+                aTargets: [ '_all' ]
+            }
+        ],
+        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
+            oSettings.jqXHR = $.ajax({
+                "type": 'get',
+                "url": sSource,
+                "dataType": "json",
+                //"data":serverPageTable.getRestPara(cond,oSettings),
+                "success": function (resp) {                                       
+                    oSettings.iDraw = oSettings.iDraw + 1;
+                    
+                    var result = [];
+                    for(var i=0;i<resp.length;i++) {
+                        result.push(resp[i].currentStepInfo);
+                    }
+                    var data = {};
+                    data.aaData = result;
+                    var totalCounts = result.length;
+                    
+                    data.iTotalRecords = totalCounts;
+                    data.iTotalDisplayRecords = totalCounts;
+                    data.sEcho = oSettings;
+                    fnCallback(data);
+                },
+                "error": function(resp) {
+                    var data = {};
+                    data.aaData = [];
+                    var totalCounts = 0;
+                    
+                    data.iTotalRecords = totalCounts;
+                    data.iTotalDisplayRecords = totalCounts;
+                    data.sEcho = oSettings;
+                    fnCallback(data);
+                }
+            });
+        }
+    });
+};
\ No newline at end of file
diff --git a/portal-catalog/src/main/webapp/catalog/js/package/pmController.js b/portal-catalog/src/main/webapp/catalog/js/package/pmController.js
new file mode 100644
index 00000000..714d953c
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/package/pmController.js
@@ -0,0 +1,346 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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 : "pmController",
+    $tableId : "ict_package_table",
+    resource : {
+        packageInfo : [],
+        packageDetails : "",
+        vimSelectItems : []
+    },
+    csarIdSelected : "",
+	$packageTableFields : {// table columns
+		table: [
+            //{"mData":"",name:$.i18n.prop("nfv-package-iui-field-sn")},
+            {"mData": "csarId", name: "ID", "bVisible": false},
+            {"mData": "name", name: $.i18n.prop("nfv-package-iui-field-name"),"fnRender" : pmUtil.nameRender},
+            {"mData": "type", name: $.i18n.prop("nfv-package-iui-field-type")},
+            {"mData": "usageState", name: $.i18n.prop("nfv-package-iui-field-usagestate")},
+            {"mData": "processState", name: $.i18n.prop("nfv-package-iui-field-processstate")},
+            {"mData": "operationalState", name: $.i18n.prop("nfv-package-iui-field-operationalstate")},
+            {"mData": "onBoardState", name: $.i18n.prop("nfv-package-iui-field-onboardstate"), "fnRender" : pmUtil.onBoardRender},
+            {"mData": "", name: $.i18n.prop("nfv-package-iui-field-operation"), "fnRender" : pmUtil.operationRender}
+		]
+	},
+	$language: {
+        "sProcessing": "<img src='../common/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:{
+        queryPackageInfoUrl: "/openoapi/catalog/v1/csars",
+        uploadPackageUrl: "/openoapi/catalog/v1/csars",
+        gsarDelPackageUrl: "/openoapi/gso/v1/nspackages",
+        ssarDelPackageUrl: "/openoapi/catalog/v1/csars",
+        nsarDelPackageUrl: "/openoapi/nslcm/v1/nspackage",
+        nfarDelPackageUrl: "/openoapi/nslcm/v1/vnfpackage",
+        gsarOnboardUrl: "/openoapi/gso/v1/nspackages",
+        ssarOnboardUrl: "/openoapi/catalog/v1/csars",
+        nsarOnboardUrl: "/openoapi/nslcm/v1/nspackage",
+        nfarOnboardUrl: "/openoapi/nslcm/v1/vnfpackage",
+        changePackageStatusUrl : "/openoapi/catalog/v1/csars",
+        queryVimInfoUrl : "/openoapi/extsys/v1/vims"
+    },
+    $getPackageCond: function() {
+    	var cond = {};
+		return cond;
+    },
+	//$initTable: function() {
+     //   var url=vm.$restUrl.queryPackageInfoUrl;
+     //   commonUtil.get(url,null,function(resp) {
+     //       if (resp) {
+     //           vm.resource.packageInfo=resp;
+     //       }
+     //   })
+	//},
+    $initTable: function() {
+        var setting = {};
+        setting.language = vm.$language;
+        setting.paginate = true;
+        setting.info = true;
+        setting.sort = true;
+        setting.columns = vm.$packageTableFields.table;
+        setting.restUrl = vm.$restUrl.queryPackageInfoUrl;
+        setting.tableId = vm.$tableId;
+        serverPageTable.initDataTable(setting,{},vm.$tableId + '_div');
+    },
+    packageDetail : {
+        detailTitle : "",
+        isShow : "none",
+        detailIndex : 0,
+        detailData : [{
+            id : "general",
+            name : $.i18n.prop("com_zte_ums_eco_roc_rsview_info"),
+            isActive : true
+        }, {
+            id : "relationShips",
+            name : $.i18n.prop("com_zte_ums_eco_roc_rsview_relation"),
+            isActive : false
+        }
+        ],
+        $showDetails : function (isShow, csarId, name) {
+            vm.packageDetail.isShow = isShow;
+            vm.packageDetail.detailCondChange(0);
+            if (isShow == "block") {
+                vm.packageDetail.detailTitle = name + "-" + $.i18n.prop("nfv-package-iui_packageview_packageDetail"),
+                    $('#' + vm.packageDetail.detailData[0].id).click();
+                vm.packageDetail.detailData[0].isActive = true;
+                vm.packageDetail.$initPackageDetailTable(csarId);
+            }
+        },
+        detailCondChange : function (index) {
+            vm.packageDetail.detailIndex = index;
+            for (var i = 0; i < vm.packageDetail.detailData.length; i++) {
+                vm.packageDetail.detailData[i].isActive = false;
+            }
+            vm.packageDetail.detailData[index].isActive = true;
+        },
+        $initPackageDetailTable : function (csarId) {
+            var url=vm.$restUrl.queryPackageInfoUrl + "/" + csarId;
+            commonUtil.get(url,null,function(resp) {
+                if (resp) {
+                    vm.resource.packageDetails=resp;
+                }
+       })
+
+        },
+        $isRowDeletingStatus : function(name) {
+            var table = $("#" + vm.$tableId).dataTable();
+            var tableData = table.fnGetData();
+            for (var i=0; i<tableData.length; i++) {
+                if(tableData[i]["name"] == name &&
+                    tableData[i]["status"].indexOf($.i18n.prop("nfv-package-iui-status-deleting")) > -1) {
+                    return true;
+                }
+            }
+            return false;
+        },
+    },
+    selectVimDialog : {
+        currentRadioClicked : [],
+        clickedIndex : "",
+        nfarOnBoardParam : {
+            csarId : "",
+            vimIds : [],
+            labVimId : "",
+        },
+        $initData : function(csarId) {
+            var url=vm.$restUrl.queryVimInfoUrl;
+            commonUtil.get(url,null,function(resp) {
+                if (resp) {
+                    vm.resource.vimSelectItems=resp;
+                }
+            })
+            vm.selectVimDialog.nfarOnBoardParam.csarId = csarId;
+        },
+        $confirmBtnClick : function () {
+            var labVimId = "";
+            var vimIds = [];
+            var testEnvCount = 0;
+            for(var i=0; i<vm.resource.vimSelectItems.length; i++) {
+                var radioId = "testEnvRadios" + i;
+                var checkboxId = "produceEnvChecks" + i;
+                if(document.getElementById(radioId).checked) {
+                    labVimId = vm.resource.vimSelectItems[i].vimId;
+                }
+                if(document.getElementById(checkboxId).checked) {
+                    vimIds.push(vm.resource.vimSelectItems[i].vimId);
+                }
+            }
+            vm.selectVimDialog.nfarOnBoardParam.labVimId = labVimId;
+            vm.selectVimDialog.nfarOnBoardParam.vimIds = vimIds;
+            var extData = vm.selectVimDialog.nfarOnBoardParam.$model;
+            pmUtil.doNFAROnboard(extData);
+            $("#selectVimDialog").modal("hide");
+        },
+        $radioClicked : function(index) {
+            var radioId = "testEnvRadios" + index;
+            var checkboxId = "produceEnvChecks" + index;
+            if(vm.selectVimDialog.currentRadioClicked[index] && vm.selectVimDialog.clickedIndex == index) {
+                vm.selectVimDialog.currentRadioClicked[index] = false;
+                document.getElementById(radioId).checked = false;
+                document.getElementById(checkboxId).disabled = false;
+            } else {
+                for(var i=0; i<vm.resource.vimSelectItems.length; i++) {
+                    var uncheckId = "produceEnvChecks" + i;
+                    document.getElementById(uncheckId).disabled = false;
+                }
+                document.getElementById(checkboxId).checked = false;
+                document.getElementById(checkboxId).disabled = true;
+                vm.selectVimDialog.currentRadioClicked[index] = true;
+                vm.selectVimDialog.clickedIndex = index;
+            }
+        }
+    },
+
+    $delPackage : function(csarId,type) {
+        bootbox.confirm($.i18n.prop("nfv-package-iui-message-delete-confirm"), function(result){
+            var url = "";
+            if(result) {
+                if(type == "NSAR") {
+                    url = vm.$restUrl.nsarDelPackageUrl + "/" + csarId;
+                } else if(type == "NFAR") {
+                    url = vm.$restUrl.nfarDelPackageUrl + "/" + csarId;
+                } else if(type == "GSAR") {
+                    url = vm.$restUrl.gsarDelPackageUrl + "/" + csarId;
+                } else if(type == "SSAR") {
+                    url = vm.$restUrl.ssarDelPackageUrl + "/" + csarId;
+                }
+                pmUtil.delPackage(url);
+            }
+        });
+    },
+    isRowOnBoardingStatus : function(csarId) {
+        var table = $("#" + vm.$tableId).dataTable();
+        var tableData = table.fnGetData();
+        for (var i=0; i<tableData.length; i++) {
+            if(tableData[i]["name"] == name &&
+                tableData[i]["status"].indexOf($.i18n.prop("nfv-package-iui-status-onboarding")) > -1) {
+                return true;
+            }
+        }
+        return false;
+    },
+
+    onBoardPackage : function(csarId,type,onBoardState) {
+        var param = {
+            csarId : csarId
+        };
+        if(type == "NSAR") {
+            var url = vm.$restUrl.nsarOnboardUrl;
+            pmUtil.doOnBoard(url, param);
+        } else if(type == "NFAR") {
+            vm.csarIdSelected = csarId;
+            vm.showOnboardDialog(csarId);
+        } else if(type == "GSAR") {
+            var url = vm.$restUrl.gsarOnboardUrl;
+            pmUtil.doOnBoard(url, param);
+        } else if(type == "SSAR") {
+            var ssarTarOnbardState="";
+            var operationalState="";
+            if(onBoardState =="onBoarded") {
+                ssarTarOnbardState = "non-onBoarded";
+                operationalState = "Disabled";
+            } else {
+                ssarTarOnbardState = "onBoarded";
+                operationalState = "Enabled";
+            }
+            var url = vm.$restUrl.ssarOnboardUrl+"/"+csarId+"?onBoardState="+ssarTarOnbardState+"&operationalState="+operationalState;
+            pmUtil.doSSAROnboard(url);
+        }
+    },
+    showOnboardDialog : function(csarId) {
+        vm.selectVimDialog.$initData(csarId);
+        $("#selectVimDialog").modal("show");
+    },
+    $initUpload : function() {
+        $("#fileupload").fileupload({
+            url : vm.$restUrl.uploadPackageUrl,
+            dropZone: $('#dropzone'),
+            maxNumberOfFiles : 1,
+            maxChunkSize : 20000000, //20M
+            autoUpload : false,
+            add : function(e, data) {
+                $("#bar").css('width', '0%');
+                $("#persent").text('0%');
+                $("#fileName").text(data.files[0].name);
+                $("#fileremove").attr("disabled", false);
+                $("#filesubmit").attr("disabled", false);
+
+                $("#filesubmit").remove();
+                $('<button id="filesubmit" class="btn btn-default" type="button"/>').text($.i18n.prop("nfv-package-iui-drop-zone-uploadBtn"))
+                    .appendTo($(".input-group-btn")[0])
+                    .click(function () {
+                        var fileName = data.files[0].name;
+                        var existPackage = pmUtil.getExistPackageByName(fileName);
+                        if(existPackage == 0){//0:package is not exist
+                            $(".progress").addClass("active");
+                            data.submit();
+                        } else {
+                            var msg = "";
+                            if(existPackage == 1){//1:package not exist, instance reference this csar
+                                msg = $.i18n.prop("nfv-package-iui-message-upload-csar-deletionpending");
+                            }
+                            if(existPackage == 2){//2:package exist
+                                msg = $.i18n.prop("nfv-package-iui-message-upload-csar-exist");
+                            }
+
+                            bootbox.confirm(msg, function(result){
+                                if(result) {
+                                    $(".progress").addClass("active");
+                                    data.submit();
+                                }
+                            });
+                        }
+                    });
+                $("#fileremove").click(function(){
+                    $("#bar").css('width', '0%');
+                    $("#persent").text("");
+                    $("#fileName").text("");
+                    $("#filesubmit").attr("disabled", true);
+                    $("#fileremove").attr("disabled", true);
+                });
+            },
+            done : function(e, data) {
+                commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-upload-success"), 'success');
+            },
+            fail : function(e, data) {
+                commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-upload-fail"), 'danger');
+            },
+            always : function(e, data) {
+                refreshByCond();
+                $(".progress").removeClass("active");
+                $("#bar").css('width', '100%');
+                $("#persent").text('100%');
+            },
+            progressall : function(e ,data) {
+                var progress = parseInt(data.loaded / data.total * 80, 10);
+                $("#bar").css('width', progress + '%');
+                $("#persent").text(progress + '%');
+            }
+        });
+    },
+    $initCometd : function() {
+        commonUtil.registerCometdMessage("/openoapi/catalog/v1/catalognotification", "/package/delete", function(message) {
+            pmUtil.updateDeletedPackageStatus(message);
+        });
+    },
+    gotoPackageListPage:function(){
+        window.location.href="./csarPackage.html";
+        refreshByCond();
+    }
+});
+avalon.scan();
+vm.$initUpload();
+vm.$initCometd();
+$(function(){
+    vm.$initTable();
+});
+var refreshByCond = function() {
+    vm.$initTable();
+};
\ No newline at end of file
diff --git a/portal-catalog/src/main/webapp/catalog/js/package/pmUtil.js b/portal-catalog/src/main/webapp/catalog/js/package/pmUtil.js
new file mode 100644
index 00000000..db21456f
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/package/pmUtil.js
@@ -0,0 +1,221 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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 pmUtil = {};
+
+pmUtil.changeStatus = function(csarId, status) {
+	pmUtil.changeTableStatus(csarId, "activating");
+    $.ajax({
+        type : "PUT",
+        url : vm.$restUrl.changePackageStatusUrl + csarId + "?csarName="  + "&status=" + status,
+        success : function() {
+            refreshByCond();
+        },
+        error : function() {
+        	refreshByCond();
+        }
+    });
+}
+
+pmUtil.changeTableStatus = function(csarId, status) {
+	var table = $("#" + vm.$tableId).dataTable();
+	var tableData = table.fnGetData();
+	for (var i=0; i<tableData.length; i++) {
+        if(tableData[i]["csarId"] == csarId) {
+        	table.fnUpdate(status, i, 4, false, false);
+        	break;
+        }
+    }
+}
+
+//query packages exist
+//0: the package does not exist 
+//1: the package does not exist, but the instance cite this package
+//2: the package exists
+pmUtil.getExistPackageByName = function(name) {
+    var index = name.indexOf(".csar") || name.indexOf(".zip");
+    if(index > 0){
+        name = name.substring(0, index);
+    }
+    var result = $.ajax({
+        type : "GET",
+        url : vm.$restUrl.queryPackageInfoUrl + "?name=" + name,
+        async: false
+    });        
+    var data = result.responseJSON;
+    if(data != undefined && data.length == 0){
+        return 0;
+    }
+    var result = data[0];
+    if(result.deletionPending != undefined && result.deletionPending == "true"){                
+        return 1;
+    }            
+
+    return 2;
+}
+
+pmUtil.updateDeletedPackageStatus = function(message) {
+    var messageobj = JSON.parse(message);
+    if(messageobj.status == "true" || messageobj.status == "deletionPending") {
+        commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-delete-success"), "success");
+        refreshByCond();
+    } else if (messageobj.status == "Delete package from HTTP server failed!") {
+        pmUtil.changeTableStatus(messageobj.csarid, "deletefail");
+        commonUtil.showMessage($.i18n.prop("nfv-package-iui-http-delete-error"), "failed");
+    } else if (messageobj.status == "Delete template data failed!") {
+        pmUtil.changeTableStatus(messageobj.csarid, "deletefail");
+        commonUtil.showMessage($.i18n.prop("nfv-package-iui-template-delete-error"), "failed");
+    } else if (messageobj.status == "Delete package data failed!") {
+        pmUtil.changeTableStatus(messageobj.csarid, "deletefail");
+        commonUtil.showMessage($.i18n.prop("nfv-package-iui-package-delete-error"), "failed");
+    } else if (messageobj.status == "false") {
+        pmUtil.changeTableStatus(messageobj.csarid, "deletefail");
+        commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-delete-error"), "failed");
+    }
+}
+
+pmUtil.queryVimInfo = function() {
+    $.get(
+        vm.$restUrl.queryVimInfoUrl,
+        function (resp) {
+            if (resp.data) {
+                vm.selectVim.vimSelectItems = resp.data || [{
+                        vimName: "test1",
+                        oid: "123456"
+                    },
+                        {
+                            vimName: "test2",
+                            oid: "987654"
+                        }];
+            }
+        },
+        "json"
+    )
+}
+
+pmUtil.doOnBoard = function(url,param) {
+        $.ajax({
+            type : "POST",
+            url : url,
+            data : JSON.stringify(param),
+            contentType : "application/json",
+            dataType : "json",
+            success : function(resp) {
+                if(resp != "" && resp.data.status == "failed") {
+                    commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoard-error"), "failed");
+                } else {
+                    commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoarded"), "success");
+                }
+                refreshByCond();
+            },
+            error : function(resp) {
+                if(resp != "" && resp.responseText == "success") {
+                    commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoarded"), "success");
+                    refreshByCond();
+                } else {
+                    commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoard-error"), "failed");
+                }
+            }
+        });
+    }
+
+pmUtil.doNFAROnboard = function(extData) {
+    extData.csarId = vm.csarIdSelected;
+    $.ajax({
+        type : "POST",
+        url : vm.$restUrl.nfarOnboardUrl,
+        data : JSON.stringify(extData),
+        contentType : "application/json",
+        dataType : "json",
+        success : function(resp) {
+            if(resp != "" && resp.data.status == "failed") {
+                commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoard-error"), "failed");
+            } else {
+                commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoarded"), "success");
+            }
+            refreshByCond();
+        },
+        error : function(resp) {
+            commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoard-error"), "failed");
+        }
+    });
+}
+
+pmUtil.doSSAROnboard = function(url) {
+    $.ajax({
+        type : "PUT",
+        url : url,
+        contentType : "application/json",
+        success : function(resp) {
+            if(resp != "" && resp.data.status == "failed") {
+                commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoard-error"), "failed");
+            } else {
+                commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoarded"), "success");
+            }
+            refreshByCond();
+        },
+        error : function(resp) {
+            commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-onBoard-error"), "failed");
+        }
+    });
+}
+
+pmUtil.delPackage = function (url) {
+    $.ajax({
+        type : "DELETE",
+        url : url,
+        contentType : "application/json",
+        success : function(resp) {
+           
+        },
+        error : function(resp) {
+            if(resp.status == 202 || resp.responseText == "success") {
+
+            } else {
+                commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-delete-error"), "failed");
+                refreshByCond();
+            }
+        }
+    });
+}
+
+pmUtil.isRowDeletingStatus = function(csarId) {
+    var table = $("#" + vm.$tableId).dataTable();
+    var tableData = table.fnGetData();
+    for (var i=0; i<tableData.length; i++) {
+        if(tableData[i]["csarId"] == csarId && 
+           tableData[i]["status"].indexOf($.i18n.prop("nfv-package-iui-status-deleting")) > -1) {
+            return true;            
+        }
+    }
+    return false;
+}
+
+pmUtil.nameRender = function(obj) {
+    return '<a href="#" onclick="vm.packageDetail.$showDetails('
+        + '\'block\',\'' + obj.aData.csarId + '\', \'' + obj.aData.name + '\')">' + obj.aData.name + '</a>';
+}
+
+pmUtil.onBoardRender = function(obj) {
+    var attr;
+    attr = 'class="label label-info status" data-toggle="tooltip" title="nfv-package-iui-status-tip"';
+    return '<span class="label label-info status" data-toggle="tooltip" title="nfv-package-iui-status-tip" onclick="vm.onBoardPackage(\'' + obj.aData.csarId
+        + '\',\''+ obj.aData.type + '\', \''+ obj.aData.onBoardState +'\')">' + obj.aData.onBoardState + '</span>';
+}
+
+pmUtil.operationRender = function(obj) {
+    return '<a href="#" class="btn-xs grey btn-editable" onclick="vm.$delPackage(\'' + obj.aData.csarId
+        + '\',\''+ obj.aData.type + '\')">' + '<i class=\"ict-delete\"></i>' + $.i18n.prop('nfv-software-iui-action-delete') + '</a>';
+}
\ No newline at end of file
diff --git a/portal-catalog/src/main/webapp/catalog/js/template/tmController.js b/portal-catalog/src/main/webapp/catalog/js/template/tmController.js
new file mode 100644
index 00000000..4b667a4b
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/template/tmController.js
@@ -0,0 +1,100 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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.
+ */
+avalon.config({
+	interpolate: ["<!--", "-->"]
+});
+
+var vm = avalon.define({
+	$id: "tmController",
+    $tableId : "ict_template_table",
+	$templateTableFields : {// table columns
+		table: [
+            {"mData": "serviceTemplateId", name: "ID", "bVisible": false},
+            {"mData": "templateName",name: $.i18n.prop("nfv-template-iui-field-templatename"),"fnRender": tmUtil.nameRender},
+            //{"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename-topo"), "fnRender" : tmUtil.topoRender},
+            //{"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename-nodes"), "fnRender" : tmUtil.nodesRender},
+            {"mData": "vendor", name: $.i18n.prop("nfv-template-iui-field-vendor")},
+            {"mData": "version", name: $.i18n.prop("nfv-template-iui-field-version")},
+            {"mData":"csarId", name: "packageID","bVisible": false},
+            {"mData": "type", name: $.i18n.prop("nfv-template-iui-field-type")},
+		]
+	},
+    $language: {
+            "sProcessing": "<img src='../common/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 : {
+        queryTemplateInfoUrl : "/openoapi/catalog/v1/servicetemplates"
+    },
+    $getTemplateCond: function() {
+    	var cond = {};
+		return cond;
+    },
+	$initTable: function() {
+		var setting = {};
+		setting.language = vm.$language;
+        setting.paginate = true;
+        setting.info = true;
+		setting.columns = vm.$templateTableFields.table;
+		setting.restUrl = vm.$restUrl.queryTemplateInfoUrl;
+		setting.tableId = vm.$tableId;
+		serverPageTable.initDataTable(setting, vm.$getTemplateCond(),
+				vm.$tableId + '_div');
+	},
+    $openDetail : function(templateId, rowId) {
+        var oSelect = $("tbody tr select").eq(rowId);
+        var flavor = "";
+        if(oSelect.length) {
+            oSelect.find("option:selected").val();
+        }
+        window.open("./templateDetail.html?templateId="+templateId+"&flavor="+flavor,"_self");
+    },
+    $openTopoDetail : function(templateId, rowId) {
+        var oSelect = $("tbody tr select").eq(rowId);
+        var flavor = "";
+        if(oSelect.length) {
+            oSelect.find("option:selected").val();
+        }
+        window.open("./topologyDetail.html?templateId="+templateId+"&flavor="+flavor,"_self");
+    },
+    $openNodesDetail : function(templateId, rowId) {
+        var oSelect = $("tbody tr select").eq(rowId);
+        var flavor = "";
+        if(oSelect.length) {
+            oSelect.find("option:selected").val();
+        }
+        window.open("./nodesDetail.html?templateId="+templateId+"&flavor="+flavor,"_self");
+    }
+});
+avalon.scan();
+vm.$initTable();
+
+var refreshByCond = function() {
+    vm.$initTable();
+};
\ No newline at end of file
diff --git a/portal-catalog/src/main/webapp/catalog/js/template/tmDetailController.js b/portal-catalog/src/main/webapp/catalog/js/template/tmDetailController.js
new file mode 100644
index 00000000..2401d314
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/template/tmDetailController.js
@@ -0,0 +1,430 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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 : "tmDetailController",
+    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}
+    ],
+    $language: {
+        "sProcessing": "<img src='../common/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: {
+        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.nodesTab.servicesTemplateData = [];
+                    for (var i = 0; i < resp.length; i++) {
+                        //generate node table display data
+                        vm.nodesTab.servicesTemplateData.push(resp[i]);
+                    }
+                    vm.nodesTab.$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 = [];
+                    var nodesTempData = [];
+                    for (var i = 0; i < resp.length; i++) {
+                        //generate node table display data
+                        var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);
+                        nodesTempData.push(nodeTemplate);
+                    }
+                    vm.globalNodesData[vm.templateId] = nodesTempData;
+                    //generate topology graph display data
+                    vm.nodesDetail.nodesTemplateDetailData = resp;
+                    //initialize topology data
+                    vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.globalNodesData[vm.templateId]);
+                    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.topologyTab.$showTopoDetails("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();
+        },
+        $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: [],
+        $nodesTabId: "ict_nodes_template_table",
+        $nodesTemplateTabFields: {// table columns
+            table: [
+                {"mData": "serviceTemplateId", name: "ID", "bVisible": false},
+                {"mData": "", name: "", "sClass": 'details-control'},
+                {"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename")},
+                {"mData": "vendor", name: $.i18n.prop("nfv-template-iui-field-vendor")},
+                {"mData": "version", name: $.i18n.prop("nfv-template-iui-field-version")},
+                {"mData": "csarid", name: "packageID", "bVisible": false},
+                {"mData": "type", name: $.i18n.prop("nfv-template-iui-field-type")},
+            ]
+        },
+        $initNfvNodesTab: function () {
+            var setting = {};
+            setting.language = vm.$language;
+            setting.paginate = true;
+            setting.info = true;
+            //setting.sort = true;
+            setting.columns = vm.nodesTab.$nodesTemplateTabFields.table;
+            setting.restUrl = vm.$restUrl.queryTemplateInfoUrl;
+            setting.tableId = vm.nodesTab.$nodesTabId;
+            //serverPageTable.initTableWithData(setting,vm.nodesTab.$nodesTabId + '_div',vm.nodesTab.servicesTemplateData.$model);
+            serverPageTable.initDataTable(setting, {}, vm.nodesTab.$nodesTabId + '_div');
+            $('#' + vm.nodesTab.$nodesTabId + '>tbody').on("click", 'td.details-control', function () {
+                var tr = $(this).closest('tr');
+                var table = $('#' + vm.nodesTab.$nodesTabId).dataTable();
+                if (table.fnIsOpen(tr[0])) {
+                    table.fnClose(tr[0]);
+                    tr.removeClass('shown');
+                }
+                else {
+                    table.fnOpen(tr[0], vm.nodesTab.nodesList.$format_Detail(table,tr[0]), 'details');
+                    tr.addClass('shown');
+                }
+            });
+        },
+        $initNodesData: function (tempId) {
+            $.ajax({
+                type: "GET",
+                //url: vm.$restUrl.queryNodeTemplateUrl,
+                url: "/openoapi/catalog/v1/servicetemplates/" + tempId + "/nodetemplates",
+                success: function (resp) {
+                    if (resp) {
+                        var nodesTempData = [];
+                        for (var i = 0; i < resp.length; i++) {
+                            //generate node table display data
+                            var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);
+                            nodesTempData.push(nodeTemplate);
+                        }
+                        vm.nodesTab.nodesList.nodesData[tempId] = nodesTempData;
+                        //generate topology graph display data
+                        vm.nodesTab.nodesList.$initNodesTable(tempId);
+                    }
+                },
+                error: function () {
+                    commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");
+                }
+            });
+        },
+        //nodes list table
+        nodesList: {
+            nodesData: {},
+            tempId:"",
+            $nodesTabDataId: "ict_nodes_table",
+            $nodesTabFields: {// table columns
+                table: [
+                    {"mData": "id", name: "ID", "bVisible": false},
+                    {
+                        "mData": "name",
+                        name: $.i18n.prop("nfv-templateDetail-iui-field-nodetypename"),
+                        "bSortable": true,
+                        "fnRender": tmDetailUtil.nameRender
+                    },
+                    {"mData": "type", name: $.i18n.prop("nfv-templateDetail-iui-field-type"), "bSortable": false},
+                    {
+                        "mData": "containedin",
+                        name: $.i18n.prop("nfv-templateDetail-iui-field-containedin"),
+                        "bSortable": false
+                    },
+                    {
+                        "mData": "deployedon",
+                        name: $.i18n.prop("nfv-templateDetail-iui-field-deployedon"),
+                        "bSortable": false
+                    },
+                    {
+                        "mData": "connectedto",
+                        name: $.i18n.prop("nfv-templateDetail-iui-field-connectedto"),
+                        "bSortable": false
+                    },
+                    {
+                        "mData": "virtuallinksto",
+                        name: $.i18n.prop("nfv-templateDetail-iui-field-virtuallinksto"),
+                        "bSortable": false
+                    }
+                ]
+            },
+            $initNodesTable: function (tempId) {
+                var setting = {};
+                setting.language = vm.$language;
+                setting.paginate = true;
+                setting.info = true;
+                //setting.sort = true;
+                setting.columns = vm.nodesTab.nodesList.$nodesTabFields.table;
+                setting.restUrl = "/openoapi/catalog/v1/servicetemplates/" + tempId + "/nodetemplates";
+                setting.tableId = vm.nodesTab.nodesList.$nodesTabDataId + "_" + tempId;
+                //serverPageTable.initTableWithData(setting,vm.nodesTab.nodesList.$nodesTabDataId + '_div',vm.nodesTab.nodesList.nodesData.$model);
+                serverPageTable.initTableWithoutLib(setting, {}, setting.tableId + '_div');
+            },
+            $format_Detail: function (oTable, nTr) {
+                var aData = oTable.fnGetData(nTr);
+                var tempId = aData.serviceTemplateId;
+                vm.nodesTab.nodesList.tempId = tempId;
+                var tableId = "ict_nodes_table" + "_" + tempId + "_div";
+                var sOut = '<div class="row-fluid" data-name="table_zone"><div class="col-xs-12" id="'+tableId+'"></div></div>'
+                vm.nodesTab.$initNodesData(tempId);
+                return sOut;
+            },
+        },
+    },
+    //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: [
+                {
+                    "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.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: {
+        $eventsTabId: "ict_events_table",
+        $eventsTabFields: {// table columns
+            table: [
+                {"mData": "currentStepId", name: "ID", "bVisible": false},
+                {
+                    "mData": "currentStepName",
+                    name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-currentStepName")
+                },
+                {
+                    "mData": "currentStepStatus",
+                    name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-currentStepStatus")
+                },
+                {
+                    "mData": "currentStepDesc",
+                    name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-currentStepDesc")
+                },
+                {"mData": "currentTime", name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-executionTime")},
+                {"mData": "allSteps", name: "allSteps", "bVisible": false}
+            ]
+        },
+        $queryEventsInfoUrl: "/api/nsoc/appinstance/operateschedule?instanceId=",
+        $queryStepUrl: "",
+        $getEventsCond: function () {
+            var cond = {};
+            return cond;
+        },
+        $initEventsTable: function () {
+            console.log("initEventsTable ");
+            var setting = {};
+            setting.language = vm.$language;
+            setting.paginate = false;
+            setting.info = false;
+            setting.columns = vm.executionTab.$eventsTabFields.table;
+            setting.restUrl = vm.executionTab.$queryEventsInfoUrl;
+            setting.tableId = vm.executionTab.$eventsTabId;
+            serverPageTable.initDataTable(setting, vm.executionTab.$getEventsCond(),
+                vm.executionTab.$eventsTabId + '_div');
+        },
+        $operation: "",
+        steps: [],
+        $init: function () {
+            vm.executionTab.$initEventsTable();
+        }
+    }
+
+});
+
+var initParam = function () { //initialize template detail params
+    var paramStr = window.location.search.substring(1);
+    if (paramStr.length > 0) {
+        var params = paramStr.split("&");
+        var templateId = params[0].substring(params[0].indexOf('=') + 1);
+        var flavor = params[1].substring(params[1].indexOf('=') + 1);
+        avalon.scan();
+
+        vm.templateId = templateId;
+        vm.$restUrl.queryNodeTemplateUrl = commonUtil.format(vm.$restUrl.queryNodeTemplateUrl, templateId);
+
+        if (flavor) {
+            vm.$restUrl.queryNodeTemplateUrl += "?flavor=" + flavor;
+        }
+        vm.$init();
+    }
+};
+initParam();
\ No newline at end of file
diff --git a/portal-catalog/src/main/webapp/catalog/js/template/tmDetailUtil.js b/portal-catalog/src/main/webapp/catalog/js/template/tmDetailUtil.js
new file mode 100644
index 00000000..a3135fa2
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/template/tmDetailUtil.js
@@ -0,0 +1,72 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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 tmDetailUtil = {};
+tmDetailUtil.timer = null;
+
+tmDetailUtil.nameRender = function(obj) {
+    return '<a href="#" onclick="vm.nodesDetail.$showDetails('
+    + '\'block\',\'' + obj.aData.id + '\', \'' + obj.aData.name + '\',\'' + vm.nodesTab.nodesList.tempId + '\')">' + obj.aData.name + '</a>';
+}
+
+tmDetailUtil.inputsRender = function(obj) {
+	var inputs = obj.aData.inputs;
+	var result = "";
+	//if(inputs && inputs.length) {
+	//	var optionHtml = "";
+	//	for(var i=0;i<inputs.length;i++) {
+	//		optionHtml += '<option>' + inputs[i].name + '</option>';
+	//	}
+	//	result = '<select>' + optionHtml + '</select>';
+	//}
+	result = JSON.stringify(inputs);
+	return result;
+}
+
+tmDetailUtil.outputsRender = function(obj) {
+	var outputs = obj.aData.outputs;
+	var result = "";
+	//if(inputs && inputs.length) {
+	//	var optionHtml = "";
+	//	for(var i=0;i<inputs.length;i++) {
+	//		optionHtml += '<option>' + inputs[i].name + '</option>';
+	//	}
+	//	result = '<select>' + optionHtml + '</select>';
+	//}
+	result = JSON.stringify(outputs);
+	return result;
+}
+
+tmDetailUtil.initSteps = function() {
+	$.ajax({
+		type : "GET",
+		url : vm.executionTab.$queryEventsInfoUrl,
+		data : "json",
+		success : function(data) {
+			console.log("initSteps");
+			if (data) {
+				var step = $(".step");
+	            if (step.getStep().length == 0) {
+	            	vm.executionTab.steps = [{title : "start"}, {title : "install VM"}, {title : "execute"}, {title : "complete"}];
+	                step.loadStep({
+	                    size : "large",
+	                    color : "blue",
+	                    steps : vm.executionTab.steps
+	                });
+	            }
+			}
+		}
+	});
+}
diff --git a/portal-catalog/src/main/webapp/catalog/js/template/tmNodesController.js b/portal-catalog/src/main/webapp/catalog/js/template/tmNodesController.js
new file mode 100644
index 00000000..3a0d2853
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/template/tmNodesController.js
@@ -0,0 +1,289 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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",
+    templateId : "", //store the Id of service template which shows in Topology tab page
+    $language: {
+        "sProcessing": "<img src='../common/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span>&nbsp;&nbsp;"
+        + $.i18n.prop("nfv-nso-iui-table-sProcess") + "</span>",
+        "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();
+    },
+    $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");
+            }
+        });
+    },
+    $initNodesData: function (tempId) {
+        $.ajax({
+            type: "GET",
+            //url: vm.$restUrl.queryNodeTemplateUrl,
+            url: "/openoapi/catalog/v1/servicetemplates/" + tempId + "/nodetemplates",
+            success: function (resp) {
+                if (resp) {
+                    var nodesTempData = [];
+                    for (var i = 0; i < resp.length; i++) {
+                        //generate node table display data
+                        var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);
+                        nodesTempData.push(nodeTemplate);
+                    }
+                    vm.nodesList.nodesData[tempId] = nodesTempData;
+                    vm.nodesList.$initNodesTable(tempId);
+                }
+            },
+            error: function () {
+                commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");
+            }
+        });
+    },
+    servicesTemplateData: [],
+    $nodesTabId: "ict_nodes_template_table",
+    $nodesTemplateTabFields: {// table columns
+        table: [
+            {"mData": "serviceTemplateId", name: "ID","bVisible": false},
+            {"mData": "", name: "","sClass": 'details-control'},
+            {"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename")},
+            {"mData": "vendor", name: $.i18n.prop("nfv-template-iui-field-vendor")},
+            {"mData": "version", name: $.i18n.prop("nfv-template-iui-field-version")},
+            {"mData":"csarid", name: "packageID","bVisible": false},
+            {"mData": "type", name: $.i18n.prop("nfv-template-iui-field-type")},
+        ]
+    },
+    $initNfvNodesTab: function() {
+        var setting = {};
+        setting.language = vm.$language;
+        setting.paginate = true;
+        setting.info = true;
+        setting.columns = vm.$nodesTemplateTabFields.table;
+        setting.restUrl = vm.$restUrl.queryTemplateInfoUrl;
+        setting.tableId = vm.$nodesTabId;
+        serverPageTable.initDataTable(setting,{},vm.$nodesTabId + '_div');
+        $('#' + 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(table,tr[0]), 'details');
+                tr.addClass('shown');
+            }
+        });
+    },
+
+    //nodes list table
+    nodesList: {
+        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: [
+                {"mData": "id", name: "ID", "bVisible": false},
+                {
+                    "mData": "name",
+                    name: $.i18n.prop("nfv-templateDetail-iui-field-nodetypename"),
+                    "bSortable": true,
+                    "fnRender": tmNodesDetailUtil.nameRender
+                },
+                {"mData": "type", name: $.i18n.prop("nfv-templateDetail-iui-field-type"), "bSortable": false},
+                {
+                    "mData": "containedin",
+                    name: $.i18n.prop("nfv-templateDetail-iui-field-containedin"),
+                    "bSortable": false
+                },
+                {
+                    "mData": "deployedon",
+                    name: $.i18n.prop("nfv-templateDetail-iui-field-deployedon"),
+                    "bSortable": false
+                },
+                {
+                    "mData": "connectedto",
+                    name: $.i18n.prop("nfv-templateDetail-iui-field-connectedto"),
+                    "bSortable": false
+                },
+                {
+                    "mData": "virtuallinksto",
+                    name: $.i18n.prop("nfv-templateDetail-iui-field-virtuallinksto"),
+                    "bSortable": false
+                }
+            ]
+        },
+        $initNodesTable: function (tempId) {
+            var setting = {};
+            setting.language = vm.$language;
+            setting.paginate = true;
+            setting.info = true;
+            setting.columns = vm.nodesList.$nodesTabFields.table;
+            setting.restUrl = "/openoapi/catalog/v1/servicetemplates/" + tempId + "/nodetemplates";
+            setting.tableId = vm.nodesList.$nodesTabDataId + "_" + tempId;
+            //serverPageTable.initTableWithData(setting,vm.nodesList.$nodesTabDataId + '_div',vm.nodesList.nodesData.$model);
+            serverPageTable.initTableWithoutLib(setting, {}, setting.tableId + '_div');
+        },
+        $format_Detail: function (oTable, nTr) {
+            var aData = oTable.fnGetData(nTr);
+            var tempId = aData.serviceTemplateId;
+            vm.nodesList.tempId = tempId;
+            var tableId = "ict_nodes_table" + "_" + tempId + "_div";
+            var sOut = '<div class="row-fluid" data-name="table_zone"><div class="col-xs-12" id="'+tableId+'"></div></div>'
+            vm.$initNodesData(tempId);
+            return sOut;
+        },
+    },
+    //Nodes Details
+    nodesDetail : {
+        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: [
+                {
+                    "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.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]);
+            });
+        }
+    },
+});
+
+var initParam = function() { //initialize template detail params
+    var paramStr = window.location.search.substring(1);
+    if(paramStr.length > 0) {
+        var params = paramStr.split("&");
+        var templateId = params[0].substring(params[0].indexOf('=') + 1);
+        var flavor = params[1].substring(params[1].indexOf('=') + 1);
+        avalon.scan();
+
+        vm.templateId = templateId;
+        vm.$restUrl.queryNodeTemplateUrl = commonUtil.format(vm.$restUrl.queryNodeTemplateUrl, templateId);
+
+        if(flavor) {
+            vm.$restUrl.queryNodeTemplateUrl += "?flavor=" + flavor;
+        }
+
+        vm.$init();
+    }
+};
+initParam();
\ No newline at end of file
diff --git a/portal-catalog/src/main/webapp/catalog/js/template/tmNodesDetailUtil.js b/portal-catalog/src/main/webapp/catalog/js/template/tmNodesDetailUtil.js
new file mode 100644
index 00000000..caa751ed
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/template/tmNodesDetailUtil.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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 tmNodesDetailUtil = {};
+tmNodesDetailUtil.timer = null;
+
+tmNodesDetailUtil.nameRender = function(obj) {
+    return '<a href="#" onclick="vm.nodesDetail.$showDetails('
+        + '\'block\',\'' + obj.aData.id + '\', \'' + obj.aData.name + '\',\'' + vm.nodesList.tempId + '\')">' + obj.aData.name + '</a>';
+}
+
diff --git a/portal-catalog/src/main/webapp/catalog/js/template/tmTopoController.js b/portal-catalog/src/main/webapp/catalog/js/template/tmTopoController.js
new file mode 100644
index 00000000..d5977cea
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/template/tmTopoController.js
@@ -0,0 +1,199 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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='../common/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 : {
+        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) {
+        var params = paramStr.split("&");
+        var templateId = params[0].substring(params[0].indexOf('=') + 1);
+        var flavor = params[1].substring(params[1].indexOf('=') + 1);
+        avalon.scan();
+
+        vm.templateId = templateId;
+        vm.$restUrl.queryNodeTemplateUrl = commonUtil.format(vm.$restUrl.queryNodeTemplateUrl, templateId);
+
+        if(flavor) {
+            vm.$restUrl.queryNodeTemplateUrl += "?flavor=" + flavor;
+        }
+
+        vm.$init();
+    }
+};
+initParam();
\ No newline at end of file
diff --git a/portal-catalog/src/main/webapp/catalog/js/template/tmUtil.js b/portal-catalog/src/main/webapp/catalog/js/template/tmUtil.js
new file mode 100644
index 00000000..05768083
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/template/tmUtil.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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 tmUtil = {};
+
+tmUtil.nameRender = function(obj) {
+    return '<a href="#" onclick="vm.$openDetail(\'' + obj.aData.serviceTemplateId
+        + '\',' + obj.iDataRow + ')">' + obj.aData.templateName + '</a>';
+}
+
+tmUtil.topoRender = function(obj) {
+    return '<a href="#" onclick="vm.$openTopoDetail(\'' + obj.aData.serviceTemplateId
+    + '\',' + obj.iDataRow + ')">' + obj.aData.templateName + '</a>';
+}
+
+tmUtil.nodesRender = function(obj) {
+    return '<a href="#" onclick="vm.$openNodesDetail(\'' + obj.aData.serviceTemplateId
+        + '\',' + obj.iDataRow + ')">' + obj.aData.templateName + '</a>';
+}
+/*tmUtil.openDetail = function(obj) {
+    if (obj) {
+        var framework;
+        if(window.parent.ZteFrameWork){
+            framework = window.parent.ZteFrameWork;
+        }else{
+            return;
+        }
+        framework.goToURLByIDAndNewAction('eco-nsoc-templateDetail', 'initParam("' + obj.templateid + '")');
+    }
+}*/
\ No newline at end of file
diff --git a/portal-catalog/src/main/webapp/catalog/js/template/topoUtil.js b/portal-catalog/src/main/webapp/catalog/js/template/topoUtil.js
new file mode 100644
index 00000000..47bd9a5d
--- /dev/null
+++ b/portal-catalog/src/main/webapp/catalog/js/template/topoUtil.js
@@ -0,0 +1,618 @@
+/*
+ * Copyright 2016 ZTE Corporation.
+ *
+ * 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 topoUtil = {};
+topoUtil.topoDatas=[];
+topoUtil.svgOffsetWidth = 0;
+
+/**
+ * recursive generate tree structure of the topology graph data
+ * @param  {[type]} rootName [description]
+ * @param  {[type]} rootNode [description]
+ * @return {[type]}          [description]
+ */
+topoUtil.generateSortData = function(rootName,rootNode) {
+    for(var i=0;i<topoUtil.topoDatas.length;i++) {
+		if(topoUtil.topoDatas[i].containIn == rootName){
+			rootNode["children"].push(topoUtil.topoDatas[i]);	
+			var currentNum = rootNode["children"].length-1;	
+			topoUtil.generateSortData(topoUtil.topoDatas[i].id, rootNode["children"][currentNum])
+		}
+    }
+}
+
+/**
+ * generate CP data, CP is inserted into the VDU or VNF child nodes
+ * @param  {[type]} cpNode   [description]
+ * @param  {[type]} rootNode [description]
+ * @return {[type]}          [description]
+ */
+topoUtil.generateCpData = function(cpNode, rootNode) {
+    for(var i=0;i<cpNode.length;i++){
+		for(var j=0;j<rootNode.length;j++) {
+			var node = rootNode[j];
+			if(cpNode[i].virtualbindsto == node.id) {
+				rootNode[j].cp.push(cpNode[i]);
+				break;
+			}					
+		}
+    }
+}
+
+/**
+ * generate NETWORK and VL data, VL is inserted into the NETWORK child nodes
+ * @param  {[type]} rootNode [description]
+ * @return {[type]}          [description]
+ */
+topoUtil.generateNetworkData = function(vlanNode, networkNode) {
+	if(networkNode.length == 0) {
+		//no NETWORK, just VL
+		var network = {
+			subnets : vlanNode
+		}
+		networkNode.push(network);
+	} else {
+		//NETWORK and VL
+		for(var i=0;i<networkNode.length;i++) {
+			networkNode[i].subnets = [];
+			for(var j=0;j<vlanNode.length;j++){
+				var network = vlanNode[j].virtuallinksto;
+				if(network == networkNode[i].id) {
+					networkNode[i].subnets.push(vlanNode[j]);
+				}
+		    }
+		}
+	}
+}
+
+/**
+ * initialize topology graph data
+ * @param  {[type]} resp             [description]
+ * @param  {[type]} nodeInstanceData [description]
+ * @return {[type]}                  [description]
+ */
+topoUtil.initTopoData = function(resp, nodeInstanceData) {
+	if(resp && resp.length > 0) {
+		var datas = resp;
+		var boxData = [];
+		var networks = [];
+		var vlanData = [];
+		var cpData = [];
+        for(var i=0;i<datas.length;i++){       	
+        	if (datas[i]["containIn"] == "") {
+        		datas[i]["containIn"] = "--";
+        	}
+        	//add the property of children for all nodes
+            datas[i]["children"] = [];
+            datas[i]["cp"] = [];
+            //count instances number
+            if (nodeInstanceData) {
+            	datas[i]["num"] = topoUtil.getInstanceNum(datas[i], nodeInstanceData);
+            }
+            //empty currentLinkNum
+            datas[i]["currentLinkNum"] = 0; 
+            //distinguish VL, CP, NETWORK, VNF, VDU, VNFC from nodes to display topology graph
+            var type = datas[i]["type"];
+		 	if (type.toUpperCase().indexOf(".VL") > -1) {
+		 		vlanData.push(datas[i]);
+		 	} else if (type.toUpperCase().indexOf(".CP") > -1) {
+		 		cpData.push(datas[i]);
+		 	} else if(type.toUpperCase().indexOf(".NETWORK") > -1) {
+		 		networks.push(datas[i]);
+		 	} else if ((type.toUpperCase().indexOf(".VNF") > -1) || (type.toUpperCase().indexOf(".VDU") > -1) 
+		 		|| (type.toUpperCase().indexOf(".VNFC") > -1)) {
+		 		boxData.push(datas[i]);
+		 	} else {
+				boxData.push(datas[i]);
+			}
+        }
+        
+		//generate CP nodes
+		topoUtil.generateCpData(cpData, boxData);
+		//generate VNF/NS tree data
+        var rootNode = {"children":[]};
+        topoUtil.topoDatas = boxData;
+		topoUtil.generateSortData("--", rootNode);
+		vm.topologyTab.boxTopoDatas = rootNode.children;
+		//generate NETWORK and VL nodes
+		topoUtil.generateNetworkData(vlanData, networks);
+		vm.topologyTab.networkTopoDatas = networks;
+
+        //draw topology graph
+        topoUtil.topoDatas = datas;
+        setTimeout("topoUtil.generateLine()", 100);
+        //bind window object events
+        topoUtil.initWindowEvent();
+	}
+}
+
+/**
+ * get node instances number
+ * @param  {[type]} nodeTemplate     [description]
+ * @param  {[type]} nodeInstanceData [description]
+ * @return {[type]}                  [description]
+ */
+topoUtil.getInstanceNum = function(nodeTemplate, nodeInstanceData) {
+	var num = 0;
+	var id;
+	if(nodeTemplate.properties && nodeTemplate.properties.vnfdid) {
+		id = nodeTemplate.properties.vnfdid;
+	} else {
+		id = nodeTemplate.id;
+	}
+	
+	if(nodeInstanceData && nodeInstanceData.length > 0) {
+		for (var j=0;j<nodeInstanceData.length;j++) {
+			if(nodeInstanceData[j].nodeTemplateId == id) {
+				num++;
+			}
+		}
+	}
+	return num;
+}
+
+topoUtil.getLineOffset = function(index) {
+	return  index*15;
+}
+/**
+ * get node y coordinate offset, it is based on the total number of connections and the number of connections to 
+ * calculate the Y coordinate offset current connection
+ * here's the connection refers connectsto relationship between VNC and VNC
+ * @param  {[type]} node   current node object
+ * @param  {[type]} height current DOM object cliengtHeight
+ * @return {[type]}        Y coordinate offset
+ */
+topoUtil.getNodeOffset = function(node, height) {
+	var toNodeLinkNum = ++node.currentLinkNum;
+	var totalLinkNum = node.inLinks.length + node.outLinks.length;
+	totalLinkNum++;
+	return (height/totalLinkNum)*toNodeLinkNum;
+}
+/**
+ * get node object by name
+ * @param  {[type]} name node name
+ * @return {[type]}      node object data
+ */
+topoUtil.getTopoDataById = function(id) {
+	var node;
+	for(var i=0;i<topoUtil.topoDatas.length;i++) {
+		if(id == topoUtil.topoDatas[i].id) {
+			node = topoUtil.topoDatas[i];
+		}
+	}
+	return  node;
+}
+
+topoUtil.pageX = function(elem) {
+	return  elem.offsetParent ? (elem.offsetLeft + topoUtil.pageX(elem.offsetParent)) : elem.offsetLeft;
+}
+
+topoUtil.pageY = function(elem) {
+	return  elem.offsetParent ? (elem.offsetTop + topoUtil.pageY(elem.offsetParent)) : elem.offsetTop;
+}
+
+topoUtil.getHorizontalOffset = function(elem, elemArray) {
+	var horizontalOffset = 0;
+	for(var i=0;i<elemArray.length;i++) {
+		var nodeTop = topoUtil.pageY(elemArray[i]);
+		var fromTop = topoUtil.pageY(elem);
+		if(fromTop == nodeTop) {
+			horizontalOffset = topoUtil.getLineOffset(++horizontalIndex);
+		}
+	}
+	return horizontalOffset;
+}
+
+topoUtil.getParentNode = function(elem) {
+	return elem.className == "app" ? topoUtil.getParentNode(elem.offsetParent) : elem.offsetParent;
+}
+
+topoUtil.initElementSize = function() {
+	var height=$(".bpContainer").height();
+    $(".vlan").height() < height ? $(".vlan").height(height) : height;
+
+    var networkWidth = $("#networks").width();
+    var topoWidth = $("#topo").width();
+    var bodyWidth = $("body").width();
+    (networkWidth+topoWidth+50) > bodyWidth ? $("body").width(networkWidth+topoWidth+topoUtil.svgOffsetWidth+10) : $("body").width($("html").width());
+
+    var containerHeight=$(".container-fluid").height();
+    $(".coordinates").height(containerHeight).width($("body").width());
+}
+
+/**
+ * get the widest VDU or VNF node to generate connect lines
+ * @return {[type]} [description]
+ */
+topoUtil.getMaxNodeRight = function() {
+	var maxNode = {offsetWidth : 0};
+	for(var i=0;i<topoUtil.topoDatas.length;i++) {
+		var node = document.getElementById(topoUtil.topoDatas[i].id);
+		if(node && (maxNode.offsetWidth < node.offsetWidth)) {
+			maxNode = node;
+		}
+	}
+	return topoUtil.pageX(maxNode) + maxNode.offsetWidth;
+}
+
+topoUtil.initWindowEvent = function() {
+	$(window.frameElement).attr('scrolling', 'auto');
+	$('body').css('overflow', 'scroll');
+	$(window).scroll(function(){
+		$("#right-menu").css("top",$(window).scrollTop()); //vertical scroll
+		$("#right-menu").css("right",-1*$(window).scrollLeft()); //horizontal scroll
+	}).unload(function(){
+		$(window.frameElement).attr('scrolling', 'no');
+	});
+	//$(window).resize(topoUtil.generateLine);
+}
+
+/**
+ * generate topology attachment
+ * connectedto represent the connection between the VNFC and VNFC, virtuallinksto represent the connection between the VLAN and VDU
+ * @return {[type]} [description]
+ */
+topoUtil.generateLine = function() { 
+	topoUtil.initElementSize();
+	var vduPath='';
+	var vlPath='';
+	var vduIndex=0;
+	var vlIndex=0;
+	var fromNodeArray = [];
+	var horizontalIndex = 0;
+	var maxNodeParentRight = topoUtil.getMaxNodeRight();
+	for(var i=0;i<topoUtil.topoDatas.length;i++) {
+	 	//connectedto
+	 	if(topoUtil.topoDatas[i].connectedto !=""){	 		
+	 		var fromNode = document.getElementById(topoUtil.topoDatas[i].id); 
+	 		var horizontalOffset = 0;
+	 		for(var k=0;k<fromNodeArray.length;k++) {
+	 			//VNFC node in the same VDU, coordinate offset
+	 			var nodeTop = topoUtil.pageY(fromNodeArray[k]);
+	 			var fromTop = topoUtil.pageY(fromNode);
+	 			if(fromTop == nodeTop) {
+	 				horizontalOffset = topoUtil.getLineOffset(++horizontalIndex);
+	 			}
+	 		}
+	 		fromNodeArray.push(fromNode);	 		
+	 		var fromNodeParent = topoUtil.getParentNode(fromNode);
+	 		var toArray = topoUtil.topoDatas[i].connectedto.split(",");	 		
+	 		for (var j=0;j<toArray.length;j++) {	 			
+	 			var toNode = document.getElementById(toArray[j]); 
+	 			var toNodeParent = topoUtil.getParentNode(toNode);
+	 			//Computing connection point and the connection point Y coordinate offset
+	 			var fromNodeOffset = topoUtil.getNodeOffset(topoUtil.topoDatas[i], fromNode.clientHeight); 
+	 			var toNodeTopoData = topoUtil.getTopoDataById(toArray[j]);
+	 			var toNodeOffset = topoUtil.getNodeOffset(toNodeTopoData, toNode.clientHeight); 
+	 			//X coordinate offset calculation link
+	 			var xLineOffset = topoUtil.getLineOffset(++vduIndex); 
+	 			//Get the largest X coordinate offset is used to set the width of the body
+	 			topoUtil.svgOffsetWidth = Math.max(xLineOffset, topoUtil.svgOffsetWidth);
+	 				 			
+	 			var fromNodeLeft = topoUtil.pageX(fromNode);	 			
+	 			var fromNodeRight = topoUtil.pageX(fromNode) + fromNode.offsetWidth;
+	 			var fromNodeTop = topoUtil.pageY(fromNode);
+
+	 			var toNodeLeft = topoUtil.pageX(toNode);
+	 			var toNodeRight = topoUtil.pageX(toNode) + toNode.offsetWidth;
+	 			var toNodeTop = topoUtil.pageY(toNode); 			
+
+	 			var coord = '';
+	 			if(fromNodeTop == toNodeTop) {
+	 				if(fromNodeLeft < toNodeLeft) {
+	 					coord = "M"+fromNodeRight+","+(fromNodeTop+horizontalOffset+fromNodeOffset)
+							+" L"+toNodeLeft+","+(fromNodeTop+horizontalOffset+fromNodeOffset)
+	 				} else {
+	 					coord = "M"+fromNodeLeft+","+(fromNodeTop+horizontalOffset+fromNodeOffset)							
+							+" L"+toNodeRight+","+(fromNodeTop+horizontalOffset+fromNodeOffset);
+	 				}
+	 			} else {
+	 				var nodeRight = maxNodeParentRight + xLineOffset;
+				 	coord = "M"+fromNodeRight+","+(fromNodeTop+horizontalOffset+fromNodeOffset)
+							+" L"+nodeRight+","+(fromNodeTop+horizontalOffset+fromNodeOffset)
+							+" L"+nodeRight+","+(toNodeTop+toNodeOffset)
+							+" L"+toNodeRight+","+(toNodeTop+toNodeOffset);			 	
+			 	}
+			 	vduPath +='<path d="'+coord+'" marker-end="url(#arrowhead)" fill="none" stroke-dasharray="5,5" stroke="#7A7A7A" stroke-width="3px" shape-rendering="geometricPrecision"></path>';	
+	 		}
+	 	}
+
+	 	//virtuallinksto	 	
+	 	if(topoUtil.topoDatas[i].virtuallinksto !=""){
+			var fromNode = document.getElementById(topoUtil.topoDatas[i].id); 
+			var toArray = topoUtil.topoDatas[i].virtuallinksto.split(",");	 		
+	 		for (var j=0;j<toArray.length;j++) {
+	 			var toNode = document.getElementById(toArray[j]);
+	 			if(toNode) {
+	 				var yLineOffset = topoUtil.getLineOffset(j); 
+		 			var xLineOffset = topoUtil.getLineOffset(++vlIndex); 
+
+		 			var fromNodeLeft = topoUtil.pageX(fromNode);
+		 			var fromNodeTop = topoUtil.pageY(fromNode);
+
+		 			var toNodeRight = topoUtil.pageX(toNode) + toNode.offsetWidth;
+		 			var toNodeTop = topoUtil.pageY(toNode);
+
+		 			var coord = "";
+		 			if(fromNodeTop == toNodeTop) {
+		 				coord = "M"+fromNodeLeft+","+(fromNodeTop+fromNode.clientHeight/2+xLineOffset)
+							+" L"+toNodeRight+","+(fromNodeTop+fromNode.clientHeight/2+xLineOffset);
+		 			} else {
+		 				coord = "M"+fromNodeLeft+","+(fromNodeTop+fromNode.clientHeight/2+yLineOffset)
+							+" L"+toNodeRight+","+(fromNodeTop+fromNode.clientHeight/2+yLineOffset);
+		 			}
+				 	vlPath +='<path d="'+coord+'" fill="none" stroke="'+toNode.style.backgroundColor+'" stroke-width="4px"></path>';
+	 			}	 				
+	 		}
+		}
+	}
+	
+	$("#svg_vdu g").html(vduPath);
+	$("#svg_vl g").html(vlPath);
+}
+
+/**
+ * generate node table data
+ * @param  {[type]} data [description]
+ * @return {[type]}      [description]
+ */
+topoUtil.generateNodeTemplate = function(data) {
+	var nodeTemplate = {};
+	nodeTemplate.id = data.id;
+	nodeTemplate.name = data.name;
+	nodeTemplate.type = data.type;
+	nodeTemplate.parentType = data.parentType;
+	nodeTemplate.vnfdid = ""; //only nested VNF node has value
+	nodeTemplate.properties = data.properties;
+	nodeTemplate.flavors = data.flavors;	 
+	nodeTemplate.containIn = ""; //containIn relation which the front-end custom is used to display the topo relations of the graph
+	nodeTemplate.containedin = ""; //the relation between VNF and VNFC
+	nodeTemplate.deployedon = ""; //the relation between VDU and VNFC
+	nodeTemplate.connectedto = ""; //the relation between VNFC and VNFC
+	nodeTemplate.virtuallinksto = ""; //the relation between VL and CP or between VL and VDU
+	nodeTemplate.virtualbindsto = ""; //the relation between CP and VDU
+	nodeTemplate.outLinks = []; //a collection of connected nodes connectedto
+	nodeTemplate.inLinks = []; //nodes are connected connectedto relationship collection
+	nodeTemplate.currentLinkNum = 0;
+	var relationShips = data.relationShips || []; //some nodes may not have relationships
+	$.each(relationShips, function(index, obj){
+		if (obj.sourceNodeId == data.name) {
+			switch(obj.type) {
+				case "containedIn" :
+				case "tosca.relationships.nfv.ContainedIn" :
+				case "tosca.relationships.nfv.BelongTo" :
+					nodeTemplate.containedin = obj.targetNodeId;
+					break;
+				case "deployedOn" :
+				case "tosca.relationships.nfv.DeployedOn" :
+					nodeTemplate.deployedon = obj.targetNodeId;
+					break;
+				case "connectedTo" : 
+				case "tosca.relationships.nfv.ConnectsTo" :
+					nodeTemplate.connectedto += "," + obj.targetNodeId;
+					nodeTemplate.outLinks.push(obj.targetNodeId);
+					break;
+				case "virtualLinksTo" :
+				case "tosca.relationships.nfv.VirtualLinksTo" :
+					nodeTemplate.virtuallinksto += "," + obj.targetNodeId;
+					break;
+				case "virtualBindsTo" :
+				case "tosca.relationships.nfv.VirtualBindsTo" :
+					nodeTemplate.virtualbindsto += "," + obj.targetNodeId;
+					break;
+			}
+		}
+		if (obj.targetNodeId == data.name) {
+			switch(obj.type) {
+				case "connectedTo" : 
+				case "tosca.relationships.nfv.ConnectsTo" :
+					nodeTemplate.inLinks.push(obj.sourceNodeId);
+					break;
+			}
+		}
+	});
+	nodeTemplate.connectedto = nodeTemplate.connectedto.substring(1);
+	nodeTemplate.virtuallinksto = nodeTemplate.virtuallinksto.substring(1);
+	nodeTemplate.virtualbindsto = nodeTemplate.virtualbindsto.substring(1);
+
+	if(topoUtil.isVNFType(data.type)) {
+        $.each(data.properties, function(key, value) {
+            if(key == "vnfdid" && value) {
+                nodeTemplate.vnfdid = value;
+            }
+        });
+	}
+	return nodeTemplate;
+}
+
+/**
+ * generate topology data
+ * deployedon is used to display the relation between VNFC and VDU
+ * containedin is used to display the relation between VNFC and VNF
+ * transform relations between VDU and VNF, containIn is used to display the relation between VDU and VNF
+ * @param  {[type]} data [description]
+ * @return {[type]}      [description]
+ */
+topoUtil.generateTopoTemplate = function(data) {
+	for(var i=0;i<data.length;i++) {
+		if(data[i].containedin){
+			//assignment is designed to compatible with no VDU, only VNF and VNFC situations
+			data[i].containIn = data[i].containedin;
+			for(var j=0;j<data.length;j++) {
+				if(data[i].deployedon == data[j].id) {
+					data[j].containIn = data[i].containedin;
+					break;
+				}
+			}
+		}
+		//the relationship between VNFC and VDU deployedon replace with containIn
+		if(data[i].deployedon){
+			data[i].containIn = data[i].deployedon;
+		}
+	}
+	return data;	
+}
+
+/**
+ * generate nodetemplate detail
+ * @param  {[type]} data [description]
+ * @return {[type]}      [description]
+ */
+topoUtil.generateNodeTemplateDetail = function(data) {
+	var nodeTemplateDetail = {};
+	nodeTemplateDetail.properties = [];
+	var properties = data.properties;
+	for(var key in properties) {
+		var property = {};
+		property.key = key;
+		property.value = properties[key];
+		nodeTemplateDetail.properties.push(property);
+	}
+	//add flavor to nodetempalte properties
+	var flavors = data.flavors;
+	if(flavors && flavors.length) {
+		var flavor = flavors[0];
+		for(var key in flavor) {
+			var property = {};
+			property.key = key;
+			property.value = flavor[key];
+			nodeTemplateDetail.properties.push(property);
+		}
+	}
+
+	nodeTemplateDetail.relationShips = data.relationShips;	
+
+	nodeTemplateDetail.general = [];
+	var general = {};
+	general.key = "name";
+	general.value = data.name;
+	nodeTemplateDetail.general.push(general);
+	var general = {};
+	general.key = "type";
+	general.value = data.type;
+	nodeTemplateDetail.general.push(general);
+
+	return nodeTemplateDetail;
+}
+
+topoUtil.getCurrentDetailData = function(detailDatas, nodetemplateid) {
+    var data;
+    for(var i=0; i<detailDatas.length; i++) {
+        if (detailDatas[i].id == nodetemplateid) {
+            data = topoUtil.generateNodeTemplateDetail(detailDatas[i]);
+            break;
+        }
+    }
+    return data;
+}
+
+/**
+ * generate node instance detail
+ * a node template may correspond to multiple node instances, their properties are not the same
+ * @param  {[type]} data [description]
+ * @return {[type]}      [description]
+ */
+topoUtil.generateNodeInstanceDetail = function(data) {
+	var nodeInstanceDetail = [];
+	nodeInstanceDetail.properties = [];
+	nodeInstanceDetail.general = [];	
+
+	var properties = data.properties;
+	for(var i=0;i<properties.length;i++) {
+		var nodeDetail = {};
+		var name = data.name;		
+		for(var key in properties[i]) {
+			var property = {};
+			property.key = key;
+			property.value = properties[i][key];			
+			nodeDetail.properties.push(property);
+
+			if(key == "name") {
+				name = properties[i][key];
+			}
+		}
+		var general = {};
+		general.key = "name";
+		general.value = name;
+		nodeDetail.general.push(general);
+		var general = {};
+		general.key = "type";
+		general.value = data.type;
+		nodeDetail.general.push(general);
+
+		nodeDetail.relationShips = data.relationShips;
+		nodeInstanceDetail.push(nodeDetail);
+	}
+	return nodeInstanceDetail;
+}
+
+topoUtil.getCurrentNodeInstanceDetail = function(detailDatas, nodetemplateid) {
+    var data;
+    for(var i=0; i<detailDatas.length; i++) {
+        if (detailDatas[i].id == nodetemplateid) {
+            data = topoUtil.generateNodeInstanceDetail(detailDatas[i]);
+            break;
+        }
+    }
+    return data;
+}
+
+topoUtil.getCidr = function(properties) {
+	for(var key in properties) {
+        if(key == "cidr") {
+        	return properties[key];
+        }
+    }
+}
+
+topoUtil.getColor = function(index) {
+	var colors = ['#1F77B4','#FF7F0E','#2CA02C','#D62728','#9467BD','#8C564B','#4b6c8b','#550000','#dc322f','#FF6600'];
+	return colors[index%10];
+}
+
+topoUtil.getCpTop = function(index, parentBoxId) {
+    var newTop = "";
+    var height = 0;
+    if(index == 0) {
+        var circle_top = $(".circle").css("top");
+        var circle_height = $(".circle").css("height");
+        var top = circle_top.substring(0, circle_top.length-2) - 0;
+        height = circle_height.substring(0, circle_height.length-2) - 0;
+        newTop = (top+height+10);
+    } else {
+        var circle_top = $(".smallCircle").css("top");
+        var circle_height = $(".smallCircle").css("height");
+        var top = circle_top.substring(0, circle_top.length-2) - 0;
+        height = circle_height.substring(0, circle_height.length-2) - 0;
+        newTop = (top+height*(index));
+    }
+    //if the length of cp over the box which cp is virtualbindsto, set the box min-heght attribute
+    var $box = $("#" + parentBoxId);
+	var min_height = $box.css("min-height");
+	var box_min_height = min_height.substring(0, min_height.length-2) - 0;
+	var cp_height = newTop + height;
+	if(cp_height > box_min_height) {
+		$box.css("min-height", cp_height);
+	}
+
+    return newTop + "px";
+}
+
+topoUtil.isVNFType = function(type) {
+	if((type.toUpperCase().indexOf(".VNF") > -1) && (type.toUpperCase().indexOf(".VNFC") < 0)) {
+		return true;
+	}
+	return false;
+}
\ No newline at end of file
-- 
cgit 1.2.3-korg