create NFVO scaling function

commit gui code for scaling function

Issue-ID: CLIENT-168
Change-Id: I1bd4609fb2ac324f497c5a044543890980f8f4a3
Signed-off-by: Luji7 <lu.ji3@zte.com.cn>

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">&times;</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>