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>

3 files changed, 76 insertions, 0 deletions

diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
index 8251458f..2a33517d 100644
--- 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 3fceb57a..c7d7b3db 100644
--- 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",

                 controller : "inputDataCtrl"

             })

+            .state("home.lcTabs.detailInfo.nfvoDetail", {

+                url : "/nfvoDetailInfo",

+                templateUrl: "templates/nfvoDetail.html",

+                controller: "nfvoDetailCtrl"

+            })

 

             .state("home.lcTabs.detailInfo.vpnManager", {

                 url : "/vpnManager",

@@ -683,6 +688,47 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 

     })

 

+    .controller('nfvoDetailCtrl', function($scope, $stateParams, $compile, DataService) {

+        console.log("nfvoDetailCtrl --> $stateParams.id:: " + $stateParams.id);

+        //$scope.currentId = $stateParams.id;

+

+        var jsonData = DataService.loadNfvoServiceDetails($stateParams.id);

+        var table_tpl = $(modelTemplate).filter('#table').html();

+        var vnfData = fetchDataForVnf(jsonData);

+        $('#vnfInfoTable').html(Mustache.to_html(table_tpl, vnfData));

+

+        var vlData = fetchDataForVl(jsonData);

+        $('#vlInfoTable').html(Mustache.to_html(table_tpl, vlData));

+

+        var vnffgData = fetchDataForVnffg(jsonData);

+        $('#vnffgInfoTable').html(Mustache.to_html(table_tpl, vnffgData));

+

+        function fetchDataForVnf(jsonData) {

+            var header = ["Vnf instance Name"];

+            var rowData = jsonData.vnfInfoId.map(function (vnfInfo) {

+                return {"values": [vnfInfo.vnfInstanceName]}

+            });

+            return {"itemHeader": header,"rowitem": rowData,"striped": false,"border": true,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""}

+        }

+

+        function fetchDataForVl(jsonData) {

+            var header = ["Network Resource Name","Link Port Resource Name"];

+            var rowData = jsonData.vlInfo.map(function (vl) {

+                return {"values": [vl.networkResource.resourceName, vl.linkPortResource.resourceName]}

+            });

+            return {"itemHeader": header,"rowitem": rowData,"striped": false,"border": true,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""}

+        }

+

+        function fetchDataForVnffg(jsonData) {

+            var header = ["vnfInstanceId of vnffg instance","vlInstanceId of vnffg instance","cpInstanceId of vnffg instance", "nfpInstanceId of vnffg instance"];

+            var rowData = jsonData.vnffgInfo.map(function (vnffg) {

+                return {"values": [vnffg.vnfId, vnffg.virtualLinkId, vnffg.cpId, vnffg.nfp]}

+            });

+            return {"itemHeader": header,"rowitem": rowData,"striped": false,"border": true,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""}

+        }

+

+    })

+

 

 var modelTemplate = "";

 function loadTemplate() {

diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/nfvoDetail.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/nfvoDetail.html
new file mode 100644
index 00000000..20813ef8
--- /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