show NFV-O service detail

commit gui code for showing service detail.

Issue-ID: CLIENT-45
Change-Id: I398fec812619c072e7aead4e2c1ff0399ab91a8e
Signed-off-by: Luji7 <lu.ji3@zte.com.cn>

diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
index 8251458..2a33517 100644 (file)
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
@@ -87,6 +87,9 @@ app.factory("DataService", function($http, $log){
         loadServiceDetails : function(id) {
             return JSON.parse('[{"id":"12345", "name":"sdno"}, {"id":"23456", "name":"gso"},{"id":"12345", "name":"nfvo"}]');
         },
+        loadNfvoServiceDetails : function(id) {
+            return JSON.parse('{"vnfInfoId": [{ "vnfInstanceId": "123", "vnfInstanceName": "vnf instance 1", "vnfProfileId": "321" }, { "vnfInstanceId": "123", "vnfInstanceName": "vnf instance 1", "vnfProfileId": "321" }],  "vlInfo": [{ "networkResource": {"resourceName": "network resource 1"}, "linkPortResource": { "resourceName": "link port resource 1"}}, { "networkResource": {"resourceName": "network resource 1"}, "linkPortResource": { "resourceName": "link port resource 1"}}], "vnffgInfo": [{"vnfId": "vnfid-123", "virtualLinkId": "virtual link 123", "cpId": "cp id 123", "nfp": "nfp 123"}, {"vnfId": "vnfid-123", "virtualLinkId": "virtual link 123", "cpId": "cp id 123", "nfp": "nfp 123"}]}');
+        },
 
         generateTemplatesComponent : function() {
             //dropdown data

diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
index 3fceb57..c7d7b3d 100644 (file)
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
@@ -94,6 +94,11 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 templateUrl : "templates/inputData.html",\r
                 controller : "inputDataCtrl"\r
             })\r
+            .state("home.lcTabs.detailInfo.nfvoDetail", {\r
+                url : "/nfvoDetailInfo",\r
+                templateUrl: "templates/nfvoDetail.html",\r
+                controller: "nfvoDetailCtrl"\r
+            })\r
 \r
             .state("home.lcTabs.detailInfo.vpnManager", {\r
                 url : "/vpnManager",\r
@@ -683,6 +688,47 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 \r
     })\r
 \r
+    .controller('nfvoDetailCtrl', function($scope, $stateParams, $compile, DataService) {\r
+        console.log("nfvoDetailCtrl --> $stateParams.id:: " + $stateParams.id);\r
+        //$scope.currentId = $stateParams.id;\r
+\r
+        var jsonData = DataService.loadNfvoServiceDetails($stateParams.id);\r
+        var table_tpl = $(modelTemplate).filter('#table').html();\r
+        var vnfData = fetchDataForVnf(jsonData);\r
+        $('#vnfInfoTable').html(Mustache.to_html(table_tpl, vnfData));\r
+\r
+        var vlData = fetchDataForVl(jsonData);\r
+        $('#vlInfoTable').html(Mustache.to_html(table_tpl, vlData));\r
+\r
+        var vnffgData = fetchDataForVnffg(jsonData);\r
+        $('#vnffgInfoTable').html(Mustache.to_html(table_tpl, vnffgData));\r
+\r
+        function fetchDataForVnf(jsonData) {\r
+            var header = ["Vnf instance Name"];\r
+            var rowData = jsonData.vnfInfoId.map(function (vnfInfo) {\r
+                return {"values": [vnfInfo.vnfInstanceName]}\r
+            });\r
+            return {"itemHeader": header,"rowitem": rowData,"striped": false,"border": true,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""}\r
+        }\r
+\r
+        function fetchDataForVl(jsonData) {\r
+            var header = ["Network Resource Name","Link Port Resource Name"];\r
+            var rowData = jsonData.vlInfo.map(function (vl) {\r
+                return {"values": [vl.networkResource.resourceName, vl.linkPortResource.resourceName]}\r
+            });\r
+            return {"itemHeader": header,"rowitem": rowData,"striped": false,"border": true,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""}\r
+        }\r
+\r
+        function fetchDataForVnffg(jsonData) {\r
+            var header = ["vnfInstanceId of vnffg instance","vlInstanceId of vnffg instance","cpInstanceId of vnffg instance", "nfpInstanceId of vnffg instance"];\r
+            var rowData = jsonData.vnffgInfo.map(function (vnffg) {\r
+                return {"values": [vnffg.vnfId, vnffg.virtualLinkId, vnffg.cpId, vnffg.nfp]}\r
+            });\r
+            return {"itemHeader": header,"rowitem": rowData,"striped": false,"border": true,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""}\r
+        }\r
+\r
+    })\r
+\r
 \r
 var modelTemplate = "";\r
 function loadTemplate() {\r

diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/nfvoDetail.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/nfvoDetail.html
new file mode 100644 (file)
index 0000000..20813ef
--- /dev/null
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/nfvoDetail.html
@@ -0,0 +1,27 @@
+<!--
+
+    Copyright 2016-2017 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.
+
+-->
+<div class="nfvoDetail">
+    <h5>VNF information:</h5>
+    <div id="vnfInfoTable"></div>
+    <br/>
+    <h5>VL information:</h5>
+    <div id="vlInfoTable"></div>
+    <br/>
+    <h5>VNFFG information:</h5>
+    <div id="vnffgInfoTable"></div>
+</div>
\ No newline at end of file