Changes for the GSO LCM create
authorSeshu-Kumar-M <seshu.kumar.m@huawei.com>
Fri, 24 Feb 2017 02:18:56 +0000 (07:48 +0530)
committerSeshu-Kumar-M <seshu.kumar.m@huawei.com>
Fri, 24 Feb 2017 02:18:56 +0000 (07:48 +0530)
IssueId : CLIENT-33

Change-Id: Ie9846d20b29aa2646752f6d5dd8270cb121458e4
Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>
lifecyclemgr/src/main/webapp/lifecyclemgr/css/style.css
lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html

index 8e011fa..e551d23 100644 (file)
     text-align: left;\r
 }\r
 \r
-.selected-row {\r
-    background-color:black;\r
-    color:red;\r
-    font-weight:bold;\r
+/* Table row selection */\r
+.table-striped>tbody>tr.selected-row>td {\r
+    background-color:#e8f8fe;\r
+}\r
+\r
+#base, #templateParameters{\r
+    margin-top:25px;\r
+}\r
+\r
+.nav>li>a:hover, .nav>li>a:focus {\r
+    text-decoration: none;\r
+    background-color: #eee;\r
+}\r
+\r
+select {\r
+    padding: 0 !important;\r
 }
\ No newline at end of file
index fa92de2..fd3e3d9 100644 (file)
@@ -1,23 +1,23 @@
 app.factory("DataService", function($http, $log){
     var lcData = null;
     return {
-        getAllData: function (value) {
-            //var value = $scope.param;
-            return $http({
-                url: 'http://localhost:8080/POC_NodeToServletPorting_Server/?widgetType=' + value,
-                headers: {'Content-Type': 'application/json'},
-                method: 'GET'
-            }).then(function (response) {
-                //$log.info(response.data);
-                return response.data;
-            })
-        },
+        loadGetServiceData : function() {
 
-        getLCData : function() {
+            //load main Table
             return $http({
-                url: 'http://localhost:4000/api/getLCData',
+                url: '/openoapi/inventory/v1/services',
+                //url: 'http://localhost:5000/api/getLCData',
                 method: 'GET',
                 headers: {'Content-Type': 'application/json'}
+
+                /*url: '/openoapi/inventory/v1/services',
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                data: JSON.stringify({'sort': [],
+                 'pagination': 0,
+                 'pagesize': 10000,
+                 'condition': {},
+                 'serviceId': ""})*/
             }).then(function(response){
                 //$log.info(response);
                 lcData = response.data.lcData;
@@ -40,7 +40,7 @@ app.factory("DataService", function($http, $log){
         },
         getOverlayData : function() {
             return $http({
-                url: 'http://localhost:4000/api/getOverlayVPNData',
+                url: 'http://localhost:5000/api/getOverlayVPNData',
                 method: 'GET',
                 headers: {'Content-Type': 'application/json'}
             }).then(function(response){
@@ -50,7 +50,7 @@ app.factory("DataService", function($http, $log){
         },
         getUnderlayData : function() {
             return $http({
-                url: 'http://localhost:4000/api/getUnderlayVPNData',
+                url: 'http://localhost:5000/api/getUnderlayVPNData',
                 method: 'GET',
                 headers: {'Content-Type': 'application/json'}
             }).then(function(response){
@@ -62,41 +62,52 @@ app.factory("DataService", function($http, $log){
             return JSON.parse('[{"id":"12345", "name":"sdno"}, {"id":"23456", "name":"gso"},{"id":"12345", "name":"nfvo"}]');
         },
 
-
-        addProvinceData : function(provinceDetail) {
+        generateTemplatesComponent : function() {
+            //dropdown data
             return $http({
-                url: 'http://localhost:3000/api/addProvinceData',
-                method: 'POST',
-                data: provinceDetail,
-                headers: {'Content-Type': 'application/json '}
+                url: '/openoapi/catalog/v1/servicetemplates',
+                //url: 'http://localhost:5000/api/getTemplateData',
+                method: 'GET',
+                headers: {'Content-Type': 'application/json'}
             }).then(function(response){
-                console.log("Response : ");
-                $log.info(response.data);
-                return response.data;
+                //$log.info(response);
+                return response.data.templateData;
             });
         },
-        deleteProvinceData : function(idList) {
+       
+       fetchCreateParameters : function(templateId) {
+            //For Template parameters tab in popup
             return $http({
-                url: 'http://localhost:3000/api/deleteProvinceData',
-                method: 'POST',
-                data: {'idList':idList},
+                url: '/openoapi/catalog/v1/servicetemplates/'+templateId,
+               // url: 'http://localhost:5000/api/getTemplateParameter',
+                method: 'GET',
                 headers: {'Content-Type': 'application/json'}
             }).then(function(response){
-                console.log("Successfully Deleted..");
-                $log.info(response);
+                //$log.info(response);
                 return response.data;
             });
         },
-        editProvinceData : function(provinceDetail) {
+
+        createServiceInstance : function(lifecycleData, sengMsgObj) {
+            ///For submit of OK button
+            var parameter = {
+                'service' : {
+                    'name' :  lifecycleData.name,
+                    'description' : lifecycleData.desc,
+                    'serviceDefId' : '', //no need now, reserved
+                    'templateId' :  lifecycleData.optSelect,
+                    'parameters' : sengMsgObj
+                }
+            };
             return $http({
-                url: 'http://localhost:3000/api/editProvinceData',
+                url: '/openoapi/servicegateway/v1/services',
+                //url: 'http://localhost:5000/api/getTemplateData',
                 method: 'POST',
-                data: provinceDetail,
-                headers: {'Content-Type': 'application/json'}
+                headers: {'Content-Type': 'application/json'},
+                data : JSON.stringify(parameter)
             }).then(function(response){
-                console.log("Successfully Edited...");
-                $log.info(response);
-                return response.data;
+                //$log.info(response);
+                return response.data.templateData;
             });
         }
     }
index d38c0b9..7293f0d 100644 (file)
@@ -45,9 +45,12 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
         //$locationProvider.html5Mode(true).hashPrefix('!');\r
         $stateProvider\r
             .state("home", {\r
+\r
                 url: "/home",\r
+\r
                 templateUrl : "templates/home.html",\r
                 controller : "homeCtrl"\r
+\r
             })\r
             .state("home.lcTabs", {\r
                 url: "/lcTabs/:id",\r
@@ -90,10 +93,11 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 \r
     })\r
 \r
-    .controller('homeCtrl', function($scope, $compile, $state, DataService, NgTableParams) {\r
+    .controller('homeCtrl', function($scope, $compile, $state, $log, DataService, NgTableParams) {\r
         $scope.param="lctableData";\r
+\r
         $scope.init = function() {\r
-            DataService.getLCData()\r
+            DataService.loadGetServiceData()\r
                 .then(function (data) {\r
                     if (data) {\r
                         $scope.tableData = data.lcData;\r
@@ -107,6 +111,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                     $scope.error = "Error ! " + reason;\r
                 });\r
         };\r
+\r
         //loadTableData();\r
         $scope.callLcTab = function(id) {\r
             /*console.log("Call ME as hi" + id);\r
@@ -181,6 +186,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             }\r
 \r
 \r
+\r
             var text = $(modelTemplate).filter('#textfield').html();\r
             var number = $(modelTemplate).filter('#numeric').html();\r
             var dropDown = $(modelTemplate).filter('#simpleDropdownTmpl').html();\r
@@ -192,7 +198,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             $('#myModal .templateName').html($compile(Mustache.to_html(text, TempNameText.ErrMsg))($scope));\r
 \r
             //var creatorText = {"ErrMsg" :     {"textboxErr" : "Creator is required.", "modalVar":"lifecycleData.creator", "placeholder":"Creator"}};\r
-            $scope.data = {\r
+            /*$scope.data = {\r
                 "dropSimple_data": {\r
                     "title": "--Select--",\r
                     "items": [\r
@@ -200,7 +206,23 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                     ]\r
                 }\r
             }\r
-            $('#myModal .serviceTemplate').html($compile(Mustache.to_html(dropDown, $scope.data.dropSimple_data))($scope));\r
+            $('#myModal #plainDropDown').html($compile(Mustache.to_html(dropDown, $scope.data.dropSimple_data))($scope));*/\r
+\r
+            DataService.generateTemplatesComponent()\r
+                .then(function (tmplatesResponse) {\r
+                    console.log("Data Template :: ");\r
+                    $log.info(tmplatesResponse);\r
+                   // var templatesInfo = translateToTemplatesInfo(tmplatesResponse);\r
+                  //  document.getElementById("svcTempl").innerHTML = templatesInfo;\r
+                    $scope.optionsValue = tmplatesResponse;\r
+                    //$scope.someOptions = [{serviceTemplateId:"1",templateName:"1.1"}, {serviceTemplateId:"2",templateName:"1.2"}];\r
+                    // $scope.someOptions = [{"serviceTemplateId": '1', "templateName": "1.1"},{"serviceTemplateId": '2', "templateName": "1.2"}]\r
+                    // console.log(":: " + JSON.stringify($scope.optionsValue));\r
+                }, function (reason) {\r
+                    $scope.error = "Error ! " + reason;\r
+                });\r
+\r
+\r
 \r
             //$('#myModal .creator').html($compile(Mustache.to_html(text, creatorText.ErrMsg))($scope));\r
 \r
@@ -213,6 +235,24 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             $('#myModal #footerBtns').append($compile(modelDelete_html)($scope));\r
         }\r
 \r
+\r
+        /**\r
+         * generate templates html string\r
+         * @param templates\r
+         * @returns\r
+         */\r
+        function translateToTemplatesInfo(templates) {\r
+            var options = '<option value="select">--select--</option>';\r
+            var i;\r
+            for (i = 0; i < templates.length; i += 1) {\r
+                var option = '<option value="' + templates[i].serviceTemplateId + '">' + templates[i].templateName\r
+                    + '</option>';\r
+                options = options + option;\r
+            }\r
+\r
+            return options;\r
+        }\r
+\r
         $scope.validatetextbox = function (value){\r
             if($scope.lifecycleData.service_name) {\r
                 $scope.textboxErr = false;\r
@@ -229,6 +269,29 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 $scope.checkboxes.items[data.id]\r
             });\r
         };\r
+        $scope.test = function(id) {\r
+            $state.go('home.lcTabs.detailInfo', {'id': id});\r
+\r
+        }\r
+\r
+        $scope.templateParam = function() {\r
+            //$scope.lifecycleData.optSelect = 1.2;\r
+            //$log.info($scope.lifecycleData);\r
+\r
+            DataService.fetchCreateParameters($scope.lifecycleData.optSelect)\r
+                .then(function (tmplatesParamResponse) {\r
+                    console.log("Data Param Template :: ");\r
+                    $log.info(tmplatesParamResponse);\r
+                    $scope.paramJsonObj= tmplatesParamResponse.templateName;\r
+\r
+                }, function (reason) {\r
+                    $scope.error = "Error ! " + reason;\r
+                });\r
+\r
+        }\r
+\r
+\r
+\r
 \r
         $scope.showAddModal = function() {\r
             console.log("Showing Modal to Add data");\r
@@ -265,6 +328,61 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             });\r
         }\r
 \r
+        $scope.saveData = function() {\r
+            //TODO\r
+            var sengMsgObj = {};//collectCreateParamfromUI('', 'create', $scope.templateParameters.paramJsonObj);\r
+            //createServiceInstance(sengMsgObj)\r
+            DataService.createServiceInstance(lifecycleData, sengMsgObj)\r
+                .then(function (response) {\r
+                    $log.info(response);\r
+                    //TODO\r
+                }, function (reason) {\r
+                    $scope.error = "Error ! " + reason;\r
+                });\r
+        }\r
+\r
+        /**\r
+         * convert the template params obj to html UI string\r
+         *\r
+         * @param identify the object identify, it should be different every time\r
+         * @return the html component string\r
+         */\r
+        function collectCreateParamfromUI(parentHost,identify, createParam) {\r
+            // the create params used for create msg\r
+            var paramSentObj = {\r
+                domainHost:'',\r
+                nodeTemplateName:'',\r
+                nodeType:'',\r
+                segments:[],\r
+                additionalParamForNs:{}\r
+            };\r
+            // get the domain value\r
+            if (undefined !=  createParam.domainHost && 'enum' === createParam.domainHost.type) {\r
+                var domain = collectParamValue(identify, createParam.domainHost);\r
+                paramSentObj.domainHost = collectParamValue(identify, createParam.domainHost)\r
+            }\r
+            //if parent domainHost is not '' and local domain host is'', it should be setted as parent\r
+            if('' != parentHost && '' == paramSentObj.domainHost){\r
+                paramSentObj.domainHost = parentHost;\r
+            }\r
+            paramSentObj.nodeTemplateName = createParam.nodeTemplateName;\r
+            paramSentObj.nodeType = createParam.nodeType;\r
+\r
+            // get own param value from UI\r
+            createParam.additionalParamForNs.forEach(function(param) {\r
+                paramSentObj.additionalParamForNs[param.name] = collectParamValue(identify, param);\r
+            });\r
+            // get segments param value from UI\r
+            createParam.segments.forEach(function(segment) {\r
+                // the identify for segment\r
+                var segmentIdentify = '' == identify ? segment.nodeTemplateName\r
+                    : identify + '_' + segment.nodeTemplateName;\r
+                var segmentObj = collectCreateParamfromUI(paramSentObj.domainHost, segmentIdentify, segment);\r
+                paramSentObj.segments.push(segmentObj);\r
+            });\r
+            return paramSentObj;\r
+        }\r
+\r
 \r
     })\r
 \r
@@ -272,7 +390,9 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
         //console.log("$stateParams.id:: " + $stateParams.id);\r
         //$state.transitionTo("home.lcTabs({id: "+$stateParams.id+"})");\r
 \r
+\r
         $state.go('home.lcTabs.detailInfo', {'id': $stateParams.id});\r
+\r
     })\r
 \r
     .controller('detailInfoCtrl', function($scope, $stateParams, $compile, DataService) {\r
@@ -287,22 +407,23 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             if (jsonData[i].name == "sdno") {\r
                 //$("#sdnoLink").text(jsonData[i].name.toUpperCase());\r
                 //console.log("Adding Accordian to SDNO");\r
-                $(".accordion").append($compile(addAccordionData("sdno", jsonData[i].name.toUpperCase()))($scope));\r
+                $(".accordion").append($compile(addAccordionData("sdno", jsonData[i].name.toUpperCase(), $stateParams.id))($scope));\r
             }\r
             else if (jsonData[i].name == "gso") {\r
                 //console.log("Adding Accordian to GSO");\r
-                $(".accordion").append($compile(addAccordionData("gso", jsonData[i].name.toUpperCase()))($scope));\r
+                $(".accordion").append($compile(addAccordionData("gso", jsonData[i].name.toUpperCase(), $stateParams.id))($scope));\r
             }\r
             else if (jsonData[i].name == "nfvo") {\r
                 //console.log("Adding Accordian to NFVO");\r
-                $(".accordion").append($compile(addAccordionData("nfvo", jsonData[i].name.toUpperCase()))($scope));\r
+                $(".accordion").append($compile(addAccordionData("nfvo", jsonData[i].name.toUpperCase(), $stateParams.id))($scope));\r
             }\r
             else {\r
 \r
             }\r
         }\r
 \r
-        function addAccordionData(type, text) {\r
+        function addAccordionData(type, text, id) {\r
+            console.log("id:"+id);\r
             var content = '';\r
             content += '<div class="panel panel-default"><div class="panel-heading">';\r
             content += '<h6 class="panel-title">';\r
@@ -317,9 +438,9 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             content += '<ul class="list-group nomargin">';\r
 \r
             if(type == "sdno") {\r
-                content += '<li id="overLink" class="list-group-item selected textAlign"><span class="glyphicon glyphicon-pencil text-primary pencilimg"></span><a ui-sref=".overlayVPN" ui-sref-active="link_active_DetailInfo">Overlay VPN</a>';\r
+                content += '<li id="overLink" class="list-group-item selected textAlign"><span class="glyphicon glyphicon-pencil text-primary pencilimg"></span><a ui-sref=".overlayVPN" ui-sref-active="link_active_DetailInfo" href="#/home/lcTabs/'+id+'/detailInfo/overlayVPN">Overlay VPN</a>';\r
                 content += '</li>';\r
-                content += '<li id="underLink" class="list-group-item textAlign"><span class="glyphicon glyphicon-pencil text-primary pencilimg"></span><a ui-sref=".underlayVPN" ui-sref-active="link_active_DetailInfo">Underlay VPN</a>';\r
+                content += '<li id="underLink" class="list-group-item textAlign"><span class="glyphicon glyphicon-pencil text-primary pencilimg"></span><a ui-sref=".underlayVPN" ui-sref-active="link_active_DetailInfo" href="#/home/lcTabs/'+id+'/detailInfo/underlayVPN">Underlay VPN</a>';\r
                 content += '</li>';\r
             }\r
             else if(type == "gso"){\r
index c9ef1bc..6496561 100644 (file)
@@ -7,13 +7,15 @@
     <br>
     <div class="panel panel-default">
     <table ng-table="tableParams" class="table table table-striped table-hover table-bordered lctable" show-filter="true">
-        <tr ng-repeat="lcData in $data" ng-class="{'selected-row':$index == selectedRow}" ui-sref=".lcTabs({id: lcData.id})" ui-sref-opts="{reload: true}"><!--ng-click="setClickedRow($index, lcData.id)" -->
+        <tr ng-repeat="lcData in $data" ui-sref=".lcTabs({id: lcData.id})" ui-sref-active="selected-row" ui-sref-opts="{reload: true}"><!--target="_self" ng-click="setClickedRow($index, lcData.id)" -->
             <td header="'ng-table/headers/checkbox.html'">
                 <input type="checkbox" ng-model="checkboxes.items[lcData.id]" />
             </td>
             <td  title="'Service Name'" filter="{ name: 'text'}" sortable="'name'">
-                <!--<a  class="srvname" ng-click="callModal(lcData.id)">{{lcData.name}}</a></td>-->
-                <a data-toggle="modal" href="#popupModal" class="srvname">{{lcData.name}}</a></td><!-- ui-sref=".modal1"-->
+                <!--<a data-toggle="modal" class="srvname" ng-click="callModal(lcData.id)">{{lcData.name}}</a>-->
+                <a data-toggle="modal" ng-click="test(lcData.id)" href="#popupModal" class="srvname">{{lcData.name}}</a>
+                <!--<a data-toggle="modal" ng-href="#popupModal" class="srvname">{{lcData.name}}</a>--><!-- ui-sref=".modal1"-->
+            </td>
             <td title="'Template Name'" filter="{ template: 'text'}" sortable="'template'">
                 {{lcData.template}}</td>
             <td title="'Create time'" filter="{ createtime: 'text'}" sortable="'createtime'">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h5 class="modal-title titlestyle">Create</h5>
             </div>
-            <form name="lcForm" method="post"><!-- ng-submit="saveData(province.id)"-->
-                <div class="modal-body">
+            <div class="modal-body">
+                <ul class="nav nav-tabs">
+                    <li class="active col-md-6 col-sm-6 col-xs-6 nopadding "><a data-toggle="tab" data-target="#base" class="nomargin">Base</a></li>
+                    <li class="col-md-6 col-sm-6 col-xs-6 nopadding"><a data-toggle="tab" data-target="#templateParameters" class="nomargin" ng-click="templateParam()">Template Parameters</a></li>
+                </ul>
+                <div class="tab-content">
+                    <div id="base" class="tab-pane fade in active">
+                        <div class="form-group row">
+                            <label class="col-xs-4 col-form-label labelstyle">Service Name</label>
+                            <div class="col-xs-8 serviceName" >
+                                <!--<input class="form-control" ng-model="province.service_name" type="text" value="" placeholder="Service Name"  ng-blur="validatetextbox(province.service_name)" required><br>-->
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-xs-4 col-form-label labelstyle">Template Name</label>
+                            <div class="col-xs-8 templateName" >
+                                <!--<input class="form-control" ng-model="province.ip" type="ipv4" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" value="" placeholder="IP Address" id="ipaddress" required><br>-->
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-xs-4 col-form-label labelstyle">Service Template</label>
+                            <div id="plainDropDown" class="col-xs-8 port">
+                                <!--<input class="form-control" ng-model="province.port" type="number" value="" placeholder="Port" id="port"  required>-->
+                                <!--<select id="svcTempl" class="form-control" ng-modal="lifecycleData.optSelect" ng-options="item.serviceTemplateId as item.templateName for item in someOptions">
 
-                    <div class="form-group row">
-                        <label class="col-xs-4 col-form-label labelstyle">Service Name</label>
-                        <div class="col-xs-8 serviceName" >
-                            <!--<input class="form-control" ng-model="province.service_name" type="text" value="" placeholder="Service Name"  ng-blur="validatetextbox(province.service_name)" required><br>-->
+                                </select>-->
+                                <select id="svcTempl" class="form-control" ng-model="lifecycleData.optSelect" ng-options="item.templateName for item in optionsValue"></select>
+                            </div>
                         </div>
                     </div>
-                    <div class="form-group row">
-                        <label class="col-xs-4 col-form-label labelstyle">Template Name</label>
-                        <div class="col-xs-8 templateName" >
-                            <!--<input class="form-control" ng-model="province.ip" type="ipv4" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" value="" placeholder="IP Address" id="ipaddress" required><br>-->
+                    <div id="templateParameters" class="tab-pane fade">
+                        <div class="form-group row">
+                            <label class="col-xs-4 col-form-label labelstyle">Template version</label>
+                            <div  class="col-xs-8" > {{paramJsonObj}}</div>
                         </div>
-                    </div>
-                    <div class="form-group row">
-                        <label class="col-xs-4 col-form-label labelstyle">Service Template</label>
-                        <div class="col-xs-8 port serviceTemplate">
-                            <!--<input class="form-control" ng-model="province.port" type="number" value="" placeholder="Port" id="port"  required>-->
 
-                        </div>
                     </div>
                 </div>
-
                 <div id="footerBtns" class="modal-footer"></div>
-            </form>
+            </div>
         </div>
-
-
     </div>
 </div>
\ No newline at end of file