diff options
3 files changed, 214 insertions, 3 deletions
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js index 8cc47b07..8251458f 100644 --- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js +++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js @@ -124,7 +124,10 @@ app.factory("DataService", function($http, $log){ deleteService : function(serviceId) { return deleteServiceInstance(serviceId); - } + }, + scaleService: function (nsInstanceId, scaleType, aspectId, numberOfSteps, resultHandleFun) { + scaleServiceInstance(nsInstanceId, scaleType, aspectId, numberOfSteps, resultHandleFun); + } } }); @@ -756,4 +759,106 @@ function queryServiceData(){ } }); return returnVal; +} + +function scaleServiceInstance(nsInstanceId, scaleType, aspectId, numberOfSteps, resultHandleFun) { + var parameter = { + 'nsInstanceId': nsInstanceId, + 'scaleType': 'SCALE_NS', + 'scaleNsData': [ + { + 'scaleNsByStepsData': [ + { + 'scalingDirection': scaleType, + 'aspectId': aspectId, + 'numberOfSteps': numberOfSteps + } + ] + } + ] + }; + var nfvoUri = '/openoapi/nslcm/1.0/ns/' + nsInstanceId + '/scale'; + $.when( + $.ajax({ + type: "POST", + url: nfvoUri, + contentType: "application/json", + dataType: "json", + data: JSON.stringify(parameter) + }) + ).then( + function (response) { + var jobId = response.jobID; + //show the progress dialog + return queryScaleProgress(jobId); + } + ).then(function (response) { + resultHandleFun(response); + }); +} + +function queryScaleProgress(jobId) { + //show the progress dialog + var operation = 'scale network service'; + $("#idScaleProgressTitle").text(operation); + $("#scaleProgressContent").text('status:'); + $("#scaleProgressbar").attr("style", "width: 0%"); + $("#scaleProgressDialog").modal({backdrop: 'static', keyboard: false}); + //set a timer for query operation + var defer = $.Deferred(); + var queryProgressUri = jobStatusUri(jobId); + var timerDefer = $.Deferred(); + var timeout = 3600000; + var fun = function () { + if (timeout === 0) { + timerDefer.resolve({ + status: 'error', + reason: operation + ' timeout!', + }); + return; + } + timeout = timeout - 1000; + $.when($.ajax({ + type: "GET", + url: queryProgressUri + })) + .then(function (response) { + //update progress + $("#scaleProgressbar").attr("style", "width: " + response.responseDescriptor.progress.toString() + "%"); + $("#scaleProgressValue").text(response.responseDescriptor.progress.toString() + '%'); + $("#scaleProgressContent").text('status: ' + response.responseDescriptor.statusDescription); + if (response.responseDescriptor.status == 'finished' || response.responseDescriptor.status == 'error') { + timerDefer.resolve({ + status: response.responseDescriptor.status, + reason: response.responseDescriptor.errorCode + }); + } + }); + }; + var timerId = setInterval(fun, 1000); + $.when(timerDefer) + .then(function (responseDesc) { + clearInterval(timerId); + $('#scaleProgressDialog').modal('hide'); + defer.resolve({ + status: responseDesc.status, + reason: responseDesc.reason + }); + + }); + return defer; +} + +/** + * generate url for querying operation status + * @param jobId + * @param responseId + * @returns + */ +function jobStatusUri(jobId, responseId) { + var responsePara = ''; + if (undefined !== responseId) { + responsePara = '&responseId=' + responseId; + } + return '/openoapi/nslcm/v1/jobs/' + jobId + responsePara; }
\ No newline at end of file diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js index 75541d06..3fceb57a 100644 --- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js +++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js @@ -139,6 +139,20 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', ' }, function (reason) {
$scope.error = "Error ! " + reason;
});
+ $('#scalingTypeIn').on("change", function (e) {
+ var value = $(e.target).val();
+ if ('on' === value) {
+ $('#scalingTypeIn').attr("checked", "checked");
+ $('#scalingTypeOut').removeAttr("checked");
+ }
+ });
+ $('#scalingTypeOut').on("change", function (e) {
+ var value = $(e.target).val();
+ if ('on' === value) {
+ $('#scalingTypeOut').attr("checked", "checked");
+ $('#scalingTypeIn').removeAttr("checked");
+ }
+ });
};
//loadTableData();
@@ -449,7 +463,30 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', ' }
};
bootbox.confirm("Do you confirm to delete service?", deleteHandle);
- }
+ };
+
+ $scope.scaleData = function (id) {
+ var nsInstanceId = id;
+ $('#scaleNS').click(
+ function() {
+ var scaleIn = $('#scalingTypeIn').attr('checked');
+ var scaleType = scaleIn === undefined ? 'SCALE_OUT' : 'SCALE_IN';
+ var aspectId = $('#scalingAspect').val();
+ var numberOfSteps = $('#numberOfSteps').val();
+ var resultHandleFun = function(response) {
+ if (response.status === 'finished') {
+ console.log('scale successfully!');
+ } else {
+ console.log('Scaling service failed! ' + response);
+ //showErrorMessage('Scaling service failed',response);
+ }
+ };
+ DataService.scaleService(nsInstanceId, scaleType, aspectId, numberOfSteps, resultHandleFun);
+ $('#scaleNS').unbind('click');
+ }
+ );
+ $('#scaleOptionDialog').modal();
+ };
})
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html index cac3f80d..b5bcdd7d 100644 --- a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html +++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html @@ -44,6 +44,7 @@ <!--<img src="../images/delete.png" ng-click="editData(lcData.id)" style="cursor: pointer"></img>--> <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(lcData.serviceId)" style="cursor: pointer;margin: 0 5px"></span>--> <span class="pull-right glyphicon glyphicon-trash" ng-click="deleteIndividualData(lcData.serviceId)" style="cursor: pointer;margin: 0 5px"></span> + <span class="pull-right glyphicon glyphicon-circle-arrow-right" ng-click="scaleData(lcData.serviceId)" style="cursor: pointer;margin: 0 5px"></span> </td> </tr> </table> @@ -131,7 +132,7 @@ <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" - aria-hidden="true">¡Á + aria-hidden="true">�� </button> <h4 class="modal-title" id="errorDialogTitle" style="text-align:center;"></h4> </div> @@ -142,3 +143,71 @@ </div> </div> </div> + +<!--scale option dialog--> +<div id="scaleOptionDialog" class="modal fade" role="dialog"> + <div class="modal-dialog"> + <!-- Modal content--> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal">×</button> + <h5 class="modal-title titlestyle">Scale Option</h5> + </div> + <div class="modal-body"> + <div class="form-group row" style="height:26px;margin-top:15px; margin-left:25px;"> + <span class="col-xs-3" style="margin-left:20px"> + <input type="radio" id="scalingTypeIn"/> Scale In + </span> + <span class="col-xs-offset-2 col-xs-3"> + <input type="radio" id="scalingTypeOut"/> Scale Out + </span> + </div> + <div class="form-group row" style="margin-left:25px;"> + <label class="col-xs-3 control-label"> + <span>Scaling Aspect</span> + <span class="required">*</span> + </label> + <div class="col-xs-7"> + <input type="text" id="scalingAspect" name="scalingAspect" class="form-control" maxlength="256"/> + </div> + </div> + <div class="form-group row" style="margin-left:25px;"> + <label class="col-xs-3 control-label"> + <span>Number of Steps</span> + <span class="required">*</span> + </label> + <div class="col-xs-7"> + <input type="text" id="numberOfSteps" name="numberOfSteps" class="form-control" maxlength="256"/> + </div> + </div> + <div class="modal-footer"> + <button type="button" style="width:80px;" class="btn SDBtn" data-dismiss="modal" + aria-hidden="true" id="scaleNS"> + <span>OK</span> + </button> + <button type="button" style="width:80px;" class="btn button-previous SDBtn" data-dismiss="modal"> + <span>Cancel</span> + </button> + </div> + </div> + </div> + </div> +</div> +<!--scale progress bar--> +<div class="modal fade" id="scaleProgressDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header" style="margin-left:10px;margin-bottom:5px;"> + <h4 class="modal-title" id="idScaleProgressTitle" style="text-align:center;"></h4> + </div> + <div class="modal-body" style="margin-left:10px;margin-bottom:5px;margin-right:10px;"> + <div class="progress"> + <div id="scaleProgressbar" class="progress-bar" role="progressbar" style="width: 10%;"> + <span id ="scaleProgressValue">0%</span> + </div> + </div> + <div id="scaleProgressContent"></div> + </div> + </div> + </div> +</div> |