From 248e1a98954153e9d29fb256a0dc2d71682ff45e Mon Sep 17 00:00:00 2001 From: Seshu-Kumar-M Date: Fri, 24 Feb 2017 07:48:56 +0530 Subject: [PATCH] Changes for the GSO LCM create IssueId : CLIENT-33 Change-Id: Ie9846d20b29aa2646752f6d5dd8270cb121458e4 Signed-off-by: Seshu-Kumar-M --- .../src/main/webapp/lifecyclemgr/css/style.css | 20 ++- .../src/main/webapp/lifecyclemgr/js/DataService.js | 85 +++++++------ .../src/main/webapp/lifecyclemgr/js/app.js | 141 +++++++++++++++++++-- .../main/webapp/lifecyclemgr/templates/home.html | 60 +++++---- 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 = ''; + var i; + for (i = 0; i < templates.length; i += 1) { + var 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 += '
'; content += '
'; @@ -317,9 +438,9 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', ' content += '
    '; if(type == "sdno") { - content += ''; - content += ''; } 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 @@
    - + + + {{lcData.name}} + +
    - - {{lcData.name}} {{lcData.template}} @@ -50,34 +52,46 @@
    Create
    -
    -
    +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + + + --> + +
    -
    - -
    - +
    +
    + +
    {{paramJsonObj}}
    -
    -
    - -
    - -
    - - +
    - -
    \ No newline at end of file -- 2.16.6