Integration of the LCM pages to the main UI
authorseshukm <seshu.kumar.m@huawei.com>
Tue, 28 Mar 2017 13:54:58 +0000 (19:24 +0530)
committerseshukm <seshu.kumar.m@huawei.com>
Tue, 28 Mar 2017 13:54:58 +0000 (19:24 +0530)
IssueId: CLIENT-189

Change-Id: Idc9e4de73014706e970c3430081074c9d17abee9
Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
lifecyclemgr/src/main/webapp/lifecyclemgr/index.html
lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
lifecyclemgr/src/main/webapp/lifecyclemgr/templates/lctabs.html

index 5bc0451..b64eed6 100644 (file)
     <link rel="stylesheet" href="/openoui/thirdparty/css/ng-table.min.css">\r
     <link href="/openoui/lifecyclemgr/css/open-ostyle.css" rel="stylesheet"/>\r
     <link href="/openoui/lifecyclemgr/css/style.css" rel="stylesheet"/>\r
-    <script src="/openoui/thirdparty/js/angular.min.js"></script>\r
-   <!-- <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> -->\r
-       <script src="/openoui/thirdparty/js/angular-ui-router.min.js"></script>\r
-    <script src="/openoui/thirdparty/js/ng-table.min.js"></script>\r
-    <script src="/openoui/thirdparty/js/jquery_1.12.4.min.js"></script>\r
-    <script src="/openoui/thirdparty/js/jquery-ui.js"></script>\r
+   <!-- <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> -->  \r
+    <script type="text/javascript" src="/openoui/thirdparty/js/mustache.js"></script>  \r
+    <script type="text/javascript" src="/openoui/thirdparty/js/jquery_1.12.4.min.js"></script>\r
+    <script type="text/javascript" src="/openoui/thirdparty/js/jquery-ui.js"></script>\r
     <script type="text/javascript" src="/openoui/thirdparty/js/bootstrap.min.js"></script>\r
-    <script src="/openoui/lifecyclemgr/js/app.js"></script>\r
-    <script src="/openoui/lifecyclemgr/js/DataService.js"></script>\r
-    <script src="/openoui/thirdparty/js/mustache.js"></script>\r
-    <script src="/openoui/lifecyclemgr/js/bootbox.min.js"></script>\r
     <script type="text/javascript" src="/openoui/lifecyclemgr/js/jquery.i18n.properties-1.0.9.js"></script>\r
+    <script type="text/javascript" src="/openoui/thirdparty/js/angular.min.js"></script>\r
+       <script type="text/javascript" src="/openoui/thirdparty/js/angular-ui-router.min.js"></script>\r
+    <script type="text/javascript" src="/openoui/thirdparty/js/ng-table.min.js"></script>\r
+       <script type="text/javascript" src="/openoui/lifecyclemgr/js/app.js"></script>\r
+    <script type="text/javascript" src="/openoui/lifecyclemgr/js/DataService.js"></script>\r
+    <script type="text/javascript" src="/openoui/lifecyclemgr/js/bootbox.min.js"></script>\r
+\r
 </head>\r
 \r
-<body ng-app="lcApp" onload="loadTemplate()">\r
+<body  ng-app="lcApp">\r
 \r
 \r
 <div class="homecontent center lcmanager">\r
index ffd13ad..e5b7c8c 100644 (file)
@@ -38,8 +38,8 @@ app.factory("DataService", function($http, $log){
 \r
             //load main Table\r
             return $http({\r
-                //url: '/openoapi/servicegateway/v1/services',\r
-                url: 'http://localhost:5000/api/getLCData',\r
+                url: '/openoapi/servicegateway/v1/services',\r
+                //url: 'http://localhost:5000/api/getLCData',\r
                 method: 'GET',\r
                 headers: {'Content-Type': 'application/json'}\r
 \r
@@ -73,7 +73,8 @@ app.factory("DataService", function($http, $log){
         },\r
         getOverlayData : function() {\r
             return $http({\r
-                url: 'http://localhost:5000/api/getOverlayVPNData',\r
+                url: '/openoapi/sdnooverlayvpn/v1/site2dc-vpn',\r
+                //url: 'http://localhost:5000/api/getOverlayVPNData',\r
                 method: 'GET',\r
                 headers: {'Content-Type': 'application/json'}\r
             }).then(function(response){\r
@@ -83,7 +84,8 @@ app.factory("DataService", function($http, $log){
         },\r
         getUnderlayData : function() {\r
             return $http({\r
-                url: 'http://localhost:5000/api/getUnderlayVPNData',\r
+                url: '/openoapi/sdnol3vpn/v1/l3vpns',\r
+                //url: 'http://localhost:5000/api/getUnderlayVPNData',\r
                 method: 'GET',\r
                 headers: {'Content-Type': 'application/json'}\r
             }).then(function(response){\r
index 68c45be..6c3dac4 100644 (file)
@@ -37,6 +37,10 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 event.preventDefault();\r
             }\r
         });\r
+        $rootScope.$on('$viewContentLoaded', function() {\r
+            //call it here\r
+            loadTemplate();\r
+        });\r
     })\r
 \r
     /*.provider('modalState', function($stateProvider) {\r
@@ -134,7 +138,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 \r
     })\r
 \r
-    .controller('homeCtrl', function($scope, $compile, $state, $log, DataService, NgTableParams) {\r
+    .controller('homeCtrl', function($scope, $compile, $state, $log, $timeout, DataService, NgTableParams) {\r
         $scope.param="lctableData";\r
         $scope.init = function() {\r
             jQuery.i18n.properties({\r
@@ -147,15 +151,20 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 DataService.loadGetServiceData()\r
                     .then(function (data) {\r
                         if (data) {\r
-                            $scope.tableData = data.data.lcData;\r
-                            var tableData = data.data.lcData;\r
+                            $scope.tableData = data.data;\r
+                            var tableData = data.data;\r
                             loadTableData();\r
+                            //$timeout(loadTableData, 0);\r
                         }\r
                         else {\r
                             $scope.error = "Error!";\r
+                                                       loadTableData();\r
+                            //$timeout(loadTableData, 0);\r
                         }\r
                     }, function (reason) {\r
                         $scope.error = "Error ! " + reason;\r
+                                               loadTableData();\r
+                        //$timeout(loadTableData, 0);\r
                     });\r
                 DataService.setTableDataLoaded();\r
             }\r
@@ -205,7 +214,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 \r
         function loadTabData() {\r
             console.log("hi tab");\r
-            var tab_tpl = $(modelTemplate).filter('#tabs').html();\r
+            var tab_tpl = $(lcmModelTemplate).filter('#tabs').html();\r
             var html = Mustache.to_html(tab_tpl, $scope.lctabsData.tabData);\r
             $('#lctabArea').html(html);\r
         }\r
@@ -213,8 +222,8 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
         function loadTableData() {\r
             console.log("In loadData()");\r
 \r
-            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();\r
-            var def_iconbutton_tpl = $(modelTemplate).filter('#defaultIconButtons').html();\r
+            var def_button_tpl = $(lcmModelTemplate).filter('#defaultButtons').html();\r
+            var def_iconbutton_tpl = $(lcmModelTemplate).filter('#defaultIconButtons').html();\r
             /*var add_data = {"title":"Add", "clickAction":"showAddModal()"};*/\r
             var add_data = {"title":"Create", "type":"btn btn-default", "gType": "glyphicon-plus", "iconPosition":"left", "clickAction":"showAddModal()"};\r
             var delete_data = {"title":"Delete Selected", "clickAction":"deleteData()"};\r
@@ -250,9 +259,9 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 \r
 \r
 \r
-            var text = $(modelTemplate).filter('#textfield').html();\r
-            var number = $(modelTemplate).filter('#numeric').html();\r
-            var dropDown = $(modelTemplate).filter('#simpleDropdownTmpl').html();\r
+            var text = $(lcmModelTemplate).filter('#textfield').html();\r
+            var number = $(lcmModelTemplate).filter('#numeric').html();\r
+            var dropDown = $(lcmModelTemplate).filter('#simpleDropdownTmpl').html();\r
 \r
             var dataText = {"ErrMsg" :     {"errmsg" : "Service name is required.", "modalVar":"lifecycleData.serviceName", "placeholder":"", "errtag":"lcnameErr", "errfunc":"validatename", "required":true}};\r
     \r
@@ -590,7 +599,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
     .controller('vpnManagerCtrl', function($scope, $stateParams, $log, DataService) {\r
         console.log("vpnManagerCtrl --> $stateParams.id:: " + $stateParams.id);\r
         //$scope.rightPanelHeader = "VPN Manager";\r
-        /*var vtab_tpl = $(modelTemplate).filter('#vtabs').html();\r
+        /*var vtab_tpl = $(lcmModelTemplate).filter('#vtabs').html();\r
         var vTabData = {\r
             "items": [{\r
                 "tablabel": "Overlay VPN",\r
@@ -611,7 +620,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
         $scope.message = "Overlay VPN";\r
 \r
         $scope.init = function() {\r
-            //console.log("Overlay VPN... ng-init + " +  $rootScope.modelTemplate);\r
+            //console.log("Overlay VPN... ng-init + " +  $rootScope.lcmModelTemplate);\r
             DataService.getOverlayData()\r
                 .then(function(data){\r
                     $scope.overlayData = data.overlayData;\r
@@ -623,7 +632,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
         }\r
         function loadButtons() {\r
             //console.log("Got it : " + $scope.$parent.getTemplate("defaultButtons"));\r
-            /*var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();\r
+            /*var def_button_tpl = $(lcmModelTemplate).filter('#defaultButtons').html();\r
             console.log("template: " + def_button_tpl);\r
 \r
             var delete_data = {"title":"Delete Selected", "clickAction":"deleteData()"};\r
@@ -657,7 +666,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
         $scope.message = "Underlay VPN";\r
 \r
         $scope.init = function() {\r
-            //console.log("Underlay VPN... ng-init + " +  $rootScope.modelTemplate);\r
+            //console.log("Underlay VPN... ng-init + " +  $rootScope.lcmModelTemplate);\r
             DataService.getUnderlayData()\r
                 .then(function(data){\r
                     $scope.underlayVPN = data.underlayVPN;\r
@@ -668,7 +677,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 });\r
         }\r
         function loadButtons() {\r
-            /*var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();\r
+            /*var def_button_tpl = $(lcmModelTemplate).filter('#defaultButtons').html();\r
             //console.log("template: " + def_button_tpl);\r
 \r
             var delete_data = {"title":"Delete Selected", "clickAction":"deleteData()"};\r
@@ -713,7 +722,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
         //$scope.currentId = $stateParams.id;\r
 \r
         var jsonData = DataService.loadNfvoServiceDetails($stateParams.id);\r
-        var table_tpl = $(modelTemplate).filter('#table').html();\r
+        var table_tpl = $(lcmModelTemplate).filter('#table').html();\r
         var vnfData = fetchDataForVnf(jsonData);\r
         $('#vnfInfoTable').html(Mustache.to_html(table_tpl, vnfData));\r
 \r
@@ -750,21 +759,24 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
     })\r
 \r
 \r
-var modelTemplate = "";\r
-function loadTemplate() {\r
 \r
-    $.get('./templateContainer.html', function (template) {\r
-        modelTemplate += template;\r
+var lcmModelTemplate = "";\r
+function loadTemplate() {\r
+       //alert("sai");\r
+    $.get('/openoui/framework/template.html', function (template) {\r
+        lcmModelTemplate += template;\r
     });\r
-    $.get('./templateWidget.html', function (template) {\r
+    $.get('/openoui/framework/templateContainer.html', function (template) {\r
+        lcmModelTemplate += template;\r
+    });\r
+    $.get('/openoui/framework/templateWidget.html', function (template) {\r
         //console.log("Template is : "+template);\r
-        modelTemplate += template;\r
+        lcmModelTemplate += template;\r
     });\r
-    $.get('./templateNotification.html', function (template) {\r
-        modelTemplate += template;\r
+    $.get('/openoui/framework/templateNotification.html', function (template) {\r
+        lcmModelTemplate += template;\r
     });\r
-    $.get('./templateFunctional.html', function (template) {\r
-        modelTemplate += template;\r
+    $.get('/openoui/framework/templateFunctional.html', function (template) {\r
+        lcmModelTemplate += template;\r
     });\r
 }\r
-\r
index 72a229a..b5135ab 100644 (file)
@@ -22,9 +22,9 @@
 <div id="lctabArea" ng-init="init()">\r
 \r
     <ul class="nav nav-tabs">\r
-        <li class="col-md-4 col-sm-4 col-xs-4 nopadding detailinfo"><a ui-sref=".detailInfo" ui-sref-active="link_active" class="nomargin">Detail Info</a></li>\r
-        <li class="col-md-4 col-sm-4 col-xs-4 nopadding topo"><a  ui-sref=".topo" ui-sref-active="link_active" class="nomargin" >Topo</a></li>\r
-        <li class="col-md-4 col-sm-4 col-xs-4 nopadding inputdata"><a  ui-sref=".inputData" ui-sref-active="link_active" class="nomargin" >Input Data</a></li>\r
+        <li class="col-md-6 col-sm-6 col-xs-6 nopadding detailinfo"><a ui-sref=".detailInfo" ui-sref-active="link_active" class="nomargin">Detail Info</a></li>\r
+        <!--<li class="col-md-4 col-sm-4 col-xs-4 nopadding topo"><a  ui-sref=".topo" ui-sref-active="link_active" class="nomargin" >Topo</a></li>-->\r
+        <li class="col-md-6 col-sm-6 col-xs-6 nopadding inputdata"><a  ui-sref=".inputData" ui-sref-active="link_active" class="nomargin" >Input Data</a></li>\r
     </ul>\r
 \r
     <div class="tab-content"></div>\r
@@ -42,9 +42,9 @@
 \r
                 <div class="modal-body">\r
                     <ul class="nav nav-tabs">\r
-                        <li class="col-md-4 col-sm-4 col-xs-4 nopadding detailinfo"><a ui-sref=".detailInfo" ui-sref-active="link_active" class="nomargin">Detail Info</a></li>\r
-                        <li class="col-md-4 col-sm-4 col-xs-4 nopadding topo"><a  ui-sref=".topo" ui-sref-active="link_active" class="nomargin" >Topo</a></li>\r
-                        <li class="col-md-4 col-sm-4 col-xs-4 nopadding inputdata"><a  ui-sref=".inputData" ui-sref-active="link_active"  class="nomargin">Input Data</a></li>\r
+                        <li class="col-md-6 col-sm-6 col-xs-6 nopadding detailinfo"><a ui-sref=".detailInfo" ui-sref-active="link_active" class="nomargin">Detail Info</a></li>\r
+                        <!--<li class="col-md-4 col-sm-4 col-xs-4 nopadding topo"><a  ui-sref=".topo" ui-sref-active="link_active" class="nomargin" >Topo</a></li>-->\r
+                        <li class="col-md-6 col-sm-6 col-xs-6 nopadding inputdata"><a  ui-sref=".inputData" ui-sref-active="link_active"  class="nomargin">Input Data</a></li>\r
                     </ul>\r
 \r
                     <div class="tab-content"></div>\r