Changes for the GSO LCM create

IssueId : CLIENT-33

Change-Id: Ie9846d20b29aa2646752f6d5dd8270cb121458e4
Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>

4 files changed, 232 insertions, 74 deletions

diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/css/style.css b/lifecyclemgr/src/main/webapp/lifecyclemgr/css/style.css
index 8e011fa6..e551d239 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/css/style.css
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/css/style.css
@@ -137,8 +137,20 @@
     text-align: left;

 }

 

-.selected-row {

-    background-color:black;

-    color:red;

-    font-weight:bold;

+/* Table row selection */

+.table-striped>tbody>tr.selected-row>td {

+    background-color:#e8f8fe;

+}

+

+#base, #templateParameters{

+    margin-top:25px;

+}

+

+.nav>li>a:hover, .nav>li>a:focus {

+    text-decoration: none;

+    background-color: #eee;

+}

+

+select {

+    padding: 0 !important;

 }
\ No newline at end of file
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
index fa92de20..fd3e3d9a 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
@@ -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;
             });
         }
     }
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
index d38c0b93..7293f0de 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
@@ -45,9 +45,12 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
         //$locationProvider.html5Mode(true).hashPrefix('!');

         $stateProvider

             .state("home", {

+

                 url: "/home",

+

                 templateUrl : "templates/home.html",

                 controller : "homeCtrl"

+

             })

             .state("home.lcTabs", {

                 url: "/lcTabs/:id",

@@ -90,10 +93,11 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 

     })

 

-    .controller('homeCtrl', function($scope, $compile, $state, DataService, NgTableParams) {

+    .controller('homeCtrl', function($scope, $compile, $state, $log, DataService, NgTableParams) {

         $scope.param="lctableData";

+

         $scope.init = function() {

-            DataService.getLCData()

+            DataService.loadGetServiceData()

                 .then(function (data) {

                     if (data) {

                         $scope.tableData = data.lcData;

@@ -107,6 +111,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                     $scope.error = "Error ! " + reason;

                 });

         };

+

         //loadTableData();

         $scope.callLcTab = function(id) {

             /*console.log("Call ME as hi" + id);

@@ -181,6 +186,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             }

 

 

+

             var text = $(modelTemplate).filter('#textfield').html();

             var number = $(modelTemplate).filter('#numeric').html();

             var dropDown = $(modelTemplate).filter('#simpleDropdownTmpl').html();

@@ -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));

 

             //var creatorText = {"ErrMsg" :     {"textboxErr" : "Creator is required.", "modalVar":"lifecycleData.creator", "placeholder":"Creator"}};

-            $scope.data = {

+            /*$scope.data = {

                 "dropSimple_data": {

                     "title": "--Select--",

                     "items": [

@@ -200,7 +206,23 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                     ]

                 }

             }

-            $('#myModal .serviceTemplate').html($compile(Mustache.to_html(dropDown, $scope.data.dropSimple_data))($scope));

+            $('#myModal #plainDropDown').html($compile(Mustache.to_html(dropDown, $scope.data.dropSimple_data))($scope));*/

+

+            DataService.generateTemplatesComponent()

+                .then(function (tmplatesResponse) {

+                    console.log("Data Template :: ");

+                    $log.info(tmplatesResponse);

+                   // var templatesInfo = translateToTemplatesInfo(tmplatesResponse);

+                  //  document.getElementById("svcTempl").innerHTML = templatesInfo;

+                    $scope.optionsValue = tmplatesResponse;

+                    //$scope.someOptions = [{serviceTemplateId:"1",templateName:"1.1"}, {serviceTemplateId:"2",templateName:"1.2"}];

+                    // $scope.someOptions = [{"serviceTemplateId": '1', "templateName": "1.1"},{"serviceTemplateId": '2', "templateName": "1.2"}]

+                    // console.log(":: " + JSON.stringify($scope.optionsValue));

+                }, function (reason) {

+                    $scope.error = "Error ! " + reason;

+                });

+

+

 

             //$('#myModal .creator').html($compile(Mustache.to_html(text, creatorText.ErrMsg))($scope));

 

@@ -213,6 +235,24 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             $('#myModal #footerBtns').append($compile(modelDelete_html)($scope));

         }

 

+

+        /**

+         * generate templates html string

+         * @param templates

+         * @returns

+         */

+        function translateToTemplatesInfo(templates) {

+            var options = '<option value="select">--select--</option>';

+            var i;

+            for (i = 0; i < templates.length; i += 1) {

+                var option = '<option value="' + templates[i].serviceTemplateId + '">' + templates[i].templateName

+                    + '</option>';

+                options = options + option;

+            }

+

+            return options;

+        }

+

         $scope.validatetextbox = function (value){

             if($scope.lifecycleData.service_name) {

                 $scope.textboxErr = false;

@@ -229,6 +269,29 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                 $scope.checkboxes.items[data.id]

             });

         };

+        $scope.test = function(id) {

+            $state.go('home.lcTabs.detailInfo', {'id': id});

+

+        }

+

+        $scope.templateParam = function() {

+            //$scope.lifecycleData.optSelect = 1.2;

+            //$log.info($scope.lifecycleData);

+

+            DataService.fetchCreateParameters($scope.lifecycleData.optSelect)

+                .then(function (tmplatesParamResponse) {

+                    console.log("Data Param Template :: ");

+                    $log.info(tmplatesParamResponse);

+                    $scope.paramJsonObj= tmplatesParamResponse.templateName;

+

+                }, function (reason) {

+                    $scope.error = "Error ! " + reason;

+                });

+

+        }

+

+

+

 

         $scope.showAddModal = function() {

             console.log("Showing Modal to Add data");

@@ -265,6 +328,61 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             });

         }

 

+        $scope.saveData = function() {

+            //TODO

+            var sengMsgObj = {};//collectCreateParamfromUI('', 'create', $scope.templateParameters.paramJsonObj);

+            //createServiceInstance(sengMsgObj)

+            DataService.createServiceInstance(lifecycleData, sengMsgObj)

+                .then(function (response) {

+                    $log.info(response);

+                    //TODO

+                }, function (reason) {

+                    $scope.error = "Error ! " + reason;

+                });

+        }

+

+        /**

+         * convert the template params obj to html UI string

+         *

+         * @param identify the object identify, it should be different every time

+         * @return the html component string

+         */

+        function collectCreateParamfromUI(parentHost,identify, createParam) {

+            // the create params used for create msg

+            var paramSentObj = {

+                domainHost:'',

+                nodeTemplateName:'',

+                nodeType:'',

+                segments:[],

+                additionalParamForNs:{}

+            };

+            // get the domain value

+            if (undefined !=  createParam.domainHost && 'enum' === createParam.domainHost.type) {

+                var domain = collectParamValue(identify, createParam.domainHost);

+                paramSentObj.domainHost = collectParamValue(identify, createParam.domainHost)

+            }

+            //if parent domainHost is not '' and local domain host is'', it should be setted as parent

+            if('' != parentHost && '' == paramSentObj.domainHost){

+                paramSentObj.domainHost = parentHost;

+            }

+            paramSentObj.nodeTemplateName = createParam.nodeTemplateName;

+            paramSentObj.nodeType = createParam.nodeType;

+

+            // get own param value from UI

+            createParam.additionalParamForNs.forEach(function(param) {

+                paramSentObj.additionalParamForNs[param.name] = collectParamValue(identify, param);

+            });

+            // get segments param value from UI

+            createParam.segments.forEach(function(segment) {

+                // the identify for segment

+                var segmentIdentify = '' == identify ? segment.nodeTemplateName

+                    : identify + '_' + segment.nodeTemplateName;

+                var segmentObj = collectCreateParamfromUI(paramSentObj.domainHost, segmentIdentify, segment);

+                paramSentObj.segments.push(segmentObj);

+            });

+            return paramSentObj;

+        }

+

 

     })

 

@@ -272,7 +390,9 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
         //console.log("$stateParams.id:: " + $stateParams.id);

         //$state.transitionTo("home.lcTabs({id: "+$stateParams.id+"})");

 

+

         $state.go('home.lcTabs.detailInfo', {'id': $stateParams.id});

+

     })

 

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

@@ -287,22 +407,23 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             if (jsonData[i].name == "sdno") {

                 //$("#sdnoLink").text(jsonData[i].name.toUpperCase());

                 //console.log("Adding Accordian to SDNO");

-                $(".accordion").append($compile(addAccordionData("sdno", jsonData[i].name.toUpperCase()))($scope));

+                $(".accordion").append($compile(addAccordionData("sdno", jsonData[i].name.toUpperCase(), $stateParams.id))($scope));

             }

             else if (jsonData[i].name == "gso") {

                 //console.log("Adding Accordian to GSO");

-                $(".accordion").append($compile(addAccordionData("gso", jsonData[i].name.toUpperCase()))($scope));

+                $(".accordion").append($compile(addAccordionData("gso", jsonData[i].name.toUpperCase(), $stateParams.id))($scope));

             }

             else if (jsonData[i].name == "nfvo") {

                 //console.log("Adding Accordian to NFVO");

-                $(".accordion").append($compile(addAccordionData("nfvo", jsonData[i].name.toUpperCase()))($scope));

+                $(".accordion").append($compile(addAccordionData("nfvo", jsonData[i].name.toUpperCase(), $stateParams.id))($scope));

             }

             else {

 

             }

         }

 

-        function addAccordionData(type, text) {

+        function addAccordionData(type, text, id) {

+            console.log("id:"+id);

             var content = '';

             content += '<div class="panel panel-default"><div class="panel-heading">';

             content += '<h6 class="panel-title">';

@@ -317,9 +438,9 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             content += '<ul class="list-group nomargin">';

 

             if(type == "sdno") {

-                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>';

+                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>';

                 content += '</li>';

-                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>';

+                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>';

                 content += '</li>';

             }

             else if(type == "gso"){

diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html
index c9ef1bcf..64965614 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html
@@ -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'">
@@ -50,34 +52,46 @@
                 <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