summaryrefslogtreecommitdiffstats
path: root/lifecyclemgr
diff options
context:
space:
mode:
authorSeshu-Kumar-M <seshu.kumar.m@huawei.com>2017-02-24 07:48:56 +0530
committerSeshu-Kumar-M <seshu.kumar.m@huawei.com>2017-02-24 07:48:56 +0530
commit248e1a98954153e9d29fb256a0dc2d71682ff45e (patch)
treebc9f1671aa416368e2c56c99380e19ccb7d7641f /lifecyclemgr
parentc14b11b8efabf3e819b9af3e4a55b131a7f67cb7 (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')
-rw-r--r--lifecyclemgr/src/main/webapp/lifecyclemgr/css/style.css20
-rw-r--r--lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js85
-rw-r--r--lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js141
-rw-r--r--lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html60
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