diff options
author | Seshu-Kumar-M <seshu.kumar.m@huawei.com> | 2017-02-24 07:48:56 +0530 |
---|---|---|
committer | Seshu-Kumar-M <seshu.kumar.m@huawei.com> | 2017-02-24 07:48:56 +0530 |
commit | 248e1a98954153e9d29fb256a0dc2d71682ff45e (patch) | |
tree | bc9f1671aa416368e2c56c99380e19ccb7d7641f /lifecyclemgr | |
parent | c14b11b8efabf3e819b9af3e4a55b131a7f67cb7 (diff) |
Changes for the GSO LCM create
IssueId : CLIENT-33
Change-Id: Ie9846d20b29aa2646752f6d5dd8270cb121458e4
Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>
Diffstat (limited to 'lifecyclemgr')
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">×</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 |