Refactor code and fix some ui issues

Refactor code for SDNC-256 user story and fix some ui allignment issues

Change-Id: I99811da092afc967d49ee7214c333d84ed458725
Issue-ID: SDNC-465
Signed-off-by: Soumendu Sekhar Acharya <SA00498080@techmahindra.com>

Former-commit-id: ec3d47bd91eb653a20c98a79a4d6af645f098aa3

13 files changed, 292 insertions, 126 deletions

diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/WEB-INF/lib/jsp-api-2.0.jar b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/WEB-INF/lib/jsp-api-2.0.jar
deleted file mode 100644
index 3d0c81fe..00000000
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/WEB-INF/lib/jsp-api-2.0.jar
+++ /dev/null
diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/WEB-INF/lib/jstl-1.2.jar b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/WEB-INF/lib/jstl-1.2.jar
deleted file mode 100644
index 0fd275e9..00000000
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/WEB-INF/lib/jstl-1.2.jar
+++ /dev/null
diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/js/sdnc-controller/sdnc-applyConfig-controller.js b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/js/sdnc-controller/sdnc-applyConfig-controller.js
index faff3633..ed6733e5 100644
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/js/sdnc-controller/sdnc-applyConfig-controller.js
+++ b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/js/sdnc-controller/sdnc-applyConfig-controller.js
@@ -5,10 +5,10 @@ myApp.controller('ApplyConfigCtrl', ['$scope','$window', '$http', 'growl', 'devi
     //THIS FUNCTION WILL BE CALLED ON PAGE LOAD
     $scope.getAllVNFFromRc = function() {
 
-        deviceConfigService.getAllVNFFromRc().then(function(data) {
+        deviceConfigService.getAllVnfIds().then(function(data) {
             if (data != null) {
                 console.log(data);
-                $scope.objvnfList = data;
+                $scope.objvnfList= data['vnfDisplayList'];
              console.log("CompareConfigCtrl:getAllVNFFromRc called" + $scope.objvnfList);
             } else {
                 $scope.warningMessage = "No VNF is eligible for configuration!!!";
@@ -24,29 +24,27 @@ myApp.controller('ApplyConfigCtrl', ['$scope','$window', '$http', 'growl', 'devi
    $scope.getAllVNFFromRc();
    
    
- 
+   $scope.ShowResult=false;
    $scope.selectVnf = function(selectedValueVnf) {
-
+	   if (selectedValueVnf != null && selectedValueVnf != "") {
+		   $scope.ShowResult=true;
    	var vnfId = selectedValueVnf;
-   	
-   	 $scope.fileContent = '';
+   		$scope.successMessagebool1 = false;
+   		$scope.fileContent = '';
    	    $scope.fileSize = 0;
    	    $scope.fileName = '';
-   	  
+   	   
    	    $scope.submit = function () {
    	      var file = document.getElementById("myFileInput").files[0];
    	    $scope.result1={}; 
-   	     
    	      if (file) {
    	        var aReader = new FileReader();
    	        aReader.readAsText(file, "UTF-8");
    	        aReader.onload = function (evt) {
-   	           // $scope.fileContent = aReader.result;
    	            $scope.fileName = document.getElementById("myFileInput").files[0].name;
    	            $scope.fileSize = document.getElementById("myFileInput").files[0].size;
    	            var id= vnfId;
    	             result1=JSON.parse(aReader.result);
-   	            /*var item = JSON.parse(result1);*/
    	            $scope.fileContent = aReader.result.search(id);
    	            $scope.successMessagebool = false;
    	        if(  $scope.fileContent == -1){
@@ -58,17 +56,24 @@ myApp.controller('ApplyConfigCtrl', ['$scope','$window', '$http', 'growl', 'devi
    	                 disableCountDown: true  
    	              });
    	            }
-   	        else{
-   	        	
+   	        else{	
    	         $scope.apply();
-   	     
    	        }
    	           }
    	        aReader.onerror = function (evt) {
    	            $scope.fileContent = "error";
    	        }
-   	      }
-   	   $scope.successMessagebool1 = false;
+   	       
+   	      }else{
+ 	        	$scope.errorMessage = "Please select file!!!!";
+	              growl.error($scope.errorMessage, {
+	                  title: 'Error!',
+	                  globalDisableCloseButton: false,
+	                 ttl: 7000,
+	                 disableCountDown: true  
+	              });
+ 	        }
+   	 
    	       $scope.apply = function() {
    	          if (file) {
    	        	  deviceConfigService.runApplyconfig(vnfId,result1);
@@ -80,14 +85,22 @@ myApp.controller('ApplyConfigCtrl', ['$scope','$window', '$http', 'growl', 'devi
 	                  disableCountDown: true  
 	             }); 
  	            $scope.successMessagebool1 = true;
-   	          
-   	      
    	          }  };
    	    
-   	    }
+   	    }; } else {
+            $scope.ShowResult = false;
+            $scope.showCompare = false;
+            $scope.showResult = false;
+            $scope.errorMessage = "Please select a VNF!!!";
+            growl.error($scope.errorMessage, {
+                title: 'Error!',
+                globalDisableCloseButton: false,
+                ttl: 7000,
+                disableCountDown: true  
+            });
+        }
    	    
-   	      }
+   	      };
    
    
-}]);
-
+}]);
\ No newline at end of file
diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/js/sdnc-controller/sdnc-compareConfig-controller.js b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/js/sdnc-controller/sdnc-compareConfig-controller.js
index 91584b00..9884862c 100644
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/js/sdnc-controller/sdnc-compareConfig-controller.js
+++ b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/js/sdnc-controller/sdnc-compareConfig-controller.js
@@ -29,6 +29,10 @@ myApp.controller('CompareConfigCtrl', ['$scope','$filter', '$http','$window', 'g
 	$scope.itemsPerPage = 5;
 	$scope.pagedItems = [];
 	$scope.currentPage = 0;
+	$scope.version1=false;
+	$scope.version2=false;
+	$scope.version3=false;
+	$scope.version4=false;
     //THIS FUNCTION WILL BE CALLED ON PAGE LOAD
     $scope.getAllVNF = function() {
 
@@ -54,9 +58,6 @@ myApp.controller('CompareConfigCtrl', ['$scope','$filter', '$http','$window', 'g
 
         if (selectedValueVnf != null && selectedValueVnf != "") {
             console.log("selectedvnf Value", selectedValueVnf);
-            //selectedItem = selectedValueVnf.split("%");
-//            var vnfName = selectedItem[0];
-//            var vnfType = selectedItem[1];
             var vnfId = selectedValueVnf;
             $scope.getVersionList(vnfId);
         } else {
@@ -278,9 +279,6 @@ myApp.controller('CompareConfigCtrl', ['$scope','$filter', '$http','$window', 'g
        $scope.versionsSelected = [];
        angular.forEach(objVersion, function(item) {
            angular.forEach($scope.objVersionModel, function(val, index) {
-              /* if (item.vnfversion == val['vnfversion'] && item.selected == false) {
-                   $scope.objVersionModel.splice(index, 1);
-               }*/
                if (item.selected) {
                    if ($scope.versionsSelected.indexOf(item) == -1)
                        $scope.versionsSelected.push(item);
@@ -295,11 +293,11 @@ myApp.controller('CompareConfigCtrl', ['$scope','$filter', '$http','$window', 'g
            versionDetails.vnfversion = item['vnfversion'];
            versionDetails.vnfName = item['vnfname'];
            var vnfid = item['vnfid'];
-          // var config = JSON.parse(item['configinfo']);
            var config = item['configinfo'];
            var config1=JSON.parse(config);
            console.log("CompareConfigCtrl::createCompareModel::objCompareModel1", config1);
            deviceConfigService.runApplyconfig(vnfid,config1);
+           $scope.showResult = false;
            $scope.successMessage = "File uploaded successfully";
            growl.success($scope.successMessage, {
                title: 'Success!',
@@ -349,9 +347,6 @@ myApp.controller('CompareConfigCtrl', ['$scope','$filter', '$http','$window', 'g
         $scope.versionsSelected = [];
         angular.forEach(objVersion, function(item) {
             angular.forEach($scope.objVersionModel, function(val, index) {
-                /*if (item.vnfversion == val['vnfversion'] && item.selected == false) {
-                    $scope.objVersionModel.splice(index, 1);
-                }*/
                 if (item.selected) {
                     if ($scope.versionsSelected.indexOf(item) == -1)
                         $scope.versionsSelected.push(item);
@@ -372,7 +367,6 @@ myApp.controller('CompareConfigCtrl', ['$scope','$filter', '$http','$window', 'g
             versionObj.versionDetails = versionDetails;
 
             //fetch all the other topology/network,opertaion status for the vnf
-           // versionObj.topologyInfo = $scope.fetchConfigDetails(item);
             versionObj.topologyInfo = $scope.fetchTopologyInfo(item);
             versionObj.vnfIdInfo = $scope.fetchVnfId(item);	
             versionObj.serviceStatusInfo= $scope.fetchServiceStatus(item);
@@ -440,9 +434,6 @@ myApp.controller('CompareConfigCtrl', ['$scope','$filter', '$http','$window', 'g
         $scope.versionsSelected = [];
         angular.forEach(objVersion, function(item) {
             angular.forEach($scope.objVersionModel, function(val, index) {
-                /*if ((item.vnfversion == val['vnfversion']) && item.selected == false) {
-                   // $scope.objVersionModel.splice(index, 1);
-                }*/
                 if (item.selected) {
                     if ($scope.versionsSelected.indexOf(item) == -1)
                         $scope.versionsSelected.push(item);
@@ -456,13 +447,10 @@ myApp.controller('CompareConfigCtrl', ['$scope','$filter', '$http','$window', 'g
             var versionObj = {};
             var versionDetails = {};
             versionDetails.vnfversion = item.vnfversion;
-            /*versionDetails.vnfName = item['vnfname'];
-            versionDetails.vnfid = item['vnfid'];*/
             versionDetails.timeStamp = item.createdAt;
             versionObj.versionDetails = versionDetails;
 
             //fetch all the other topology/network,opertaion status for the vnf
-           // versionObj.topologyInfo = $scope.fetchConfigDetails(item);
             versionObj.topologyInfo = $scope.fetchTopologyInfo(item);
             versionObj.vnfIdInfo = $scope.fetchVnfId(item);	
             versionObj.serviceStatusInfo= $scope.fetchServiceStatus(item);
@@ -475,9 +463,20 @@ myApp.controller('CompareConfigCtrl', ['$scope','$filter', '$http','$window', 'g
            
             if ((versionObj.versionDetails.vnfversion == $scope.versionsSelected[0].vnfversion)) {
                 $scope.objCompareModel1 = versionObj;
+                $scope.version1=true;
             } else if ((versionObj.versionDetails.vnfversion == $scope.versionsSelected[1].vnfversion))
                 {$scope.objCompareModel2 = versionObj;
-        }
+                $scope.version2=true;
+                $scope.version3=false;
+                $scope.version4=false;
+        }else if((versionObj.versionDetails.vnfversion == $scope.versionsSelected[2].vnfversion)){
+        	$scope.objCompareModel3 = versionObj;
+        	$scope.version3=true;
+        	$scope.version4=false;
+        }else if((versionObj.versionDetails.vnfversion == $scope.versionsSelected[3].vnfversion)){
+        	$scope.objCompareModel4 = versionObj;
+        	$scope.version4=true;
+        	}
       document.getElementById("view").style.display = "none";
         } );
         $scope.showResult = true;
diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/js/sdnc-services/sdnc-compareConfig-service.js b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/js/sdnc-services/sdnc-compareConfig-service.js
index 7b5c688e..42bafcd9 100644
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/js/sdnc-services/sdnc-compareConfig-service.js
+++ b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/js/sdnc-services/sdnc-compareConfig-service.js
@@ -34,8 +34,7 @@ myApp.service('deviceConfigService', ['$http','VNF_API_BASE', function($http, VN
                 });
 
     };
-    
-    
+       
     	this.getAllVNF = function() {
         var testlist = {};
         return $http.get('/getAllBackupVnfIds')
@@ -51,11 +50,24 @@ myApp.service('deviceConfigService', ['$http','VNF_API_BASE', function($http, VN
 
     };
 
+    this.getAllVnfIds = function() {
+        var rctestlist = {};
+        return $http.get('/getAllVnfIds')
+            .then(function(response) {
+                   console.log("---validationTestService::getAllVNF From Restconf::TestResponse---" + JSON.stringify(response));
+                    vnflist = response.data;
+                    return vnflist;
+                },
+                function(response) {
+                   console.log("validationTestService::getAllVNF From Restconf::Status Code", response.status);
+                    return response;
+                });
+
+    };
+    
     this.getVersions = function(vnfId) {
 
         var data = {};
-//        data.selectedVnfName = vnfName;
-//        data.selectedVnfType = vnfType;
         data.vnfId = vnfId;
         var config = {
             params: data,
@@ -67,15 +79,9 @@ myApp.service('deviceConfigService', ['$http','VNF_API_BASE', function($http, VN
         console.log("deviceConfigService::getVersions::config", JSON.stringify(config));
 
         var baseUrl = VNF_API_BASE;
-        // var baseApi='runtest';
-        // var apiUrl= baseUrl + baseApi;
-
-        // Call the pre validation service
         var request = {
             method: 'GET',
             url: '/configDetailsById/'+vnfId,
-            //url: 'sdnc-stubs/getAllConfigForVNF.json',
-            //data: data,
             
             headers: {
                 'Content-Type': 'application/json',
@@ -144,22 +150,6 @@ myApp.service('deviceConfigService', ['$http','VNF_API_BASE', function($http, VN
              console.log("validationTestService::getAllVNF::Status Code", response);
              return newConfig;
          });
-         /*.then(function (response) {
-        	 if (response.data)
-        	 { $scope.successMessage1 = "Put Data Method Executed Successfully!";
-        	 return response;
-        	 }
-        	var status=	 response.status;
-        	if (status == 200){
-        	 $window.alert("applyed successfully ");
-        	 }
-        	 var successMessage1 = "Put Data Method Executed Successfully!";
-         },
-         function (response) {
-        	 	var successMessage1 = "Service not Exists";
-         });
-    	
-        */
     };
 	
 
diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/images/Apply.jpg b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/images/Apply.jpg
index f7ea085b..7d5ab8de 100644
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/images/Apply.jpg
+++ b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/images/Apply.jpg
diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/style/sdnc-style.css b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/style/sdnc-style.css
index 5f192049..82f9c105 100644
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/style/sdnc-style.css
+++ b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/style/sdnc-style.css
@@ -478,13 +478,6 @@ input[type=checkbox] {
 
 }
 
-.columnsVersion {
-    float: left;
-    width: 33.3%;
-    padding: 8px;
-    border-radius: 15px;
-}
-
 .columnsVersionview{
     float: left;
     width: 50%;
@@ -541,3 +534,29 @@ input[type=checkbox] {
 .listHeading{
 	background-color: #ffcccc;
 }
+table.tableCompare{
+     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+     border-collapse: collapse;
+     width: 100%;
+     table-layout: auto;
+}
+ table.tableCompare tr:nth-child(even){
+     background-color: #E1E0DA;
+}
+ table.tableCompare th{
+     padding-top: 12px;
+     padding-bottom: 12px;
+     text-align: left;
+     background: linear-gradient(to top, #f8f8f8 0%, #cce5ff 83%);
+     color: black;
+}
+ table.tableCompare td,table.tableCompare th {
+     min-width:100px;
+     padding: 3px;
+     height:10%;
+     max-width:200px;
+}
+ table.tableCompare tr:{
+     text-align: left;
+     height:105;;
+}
diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-applyConfig.jsp b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-applyConfig.jsp
index 76293840..c686b389 100644
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-applyConfig.jsp
+++ b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-applyConfig.jsp
@@ -19,22 +19,32 @@
    */
     -->
 <div class="ReportMain" >
-   <div class="heading"><img src="static/images/Apply.jpg" width=70 height="40"  style="margin-left:5px;">&nbsp;&nbsp;Apply Configruation</div>
-   <form name="myForm" style="background-color:#f2f2f2; border: 1px solid #ddd;">
+   <div class="heading"><img src="static/images/Apply.jpg" width=50 height="40"  style="margin-left:5px;">&nbsp;&nbsp;Apply Configruation</div>
+   <form name="myForm" style="background-color: #f2f2f2;padding:20px 15px;border: 1px ridge #ddd">
     <div growl></div>
     
-      <div class="row" style="background-color:#f2f2f2;width:100%;margin-left:1px;height:75px">
-         <div class="column" style="width:30%;background-color:#f2f2f2;height:55px;margin-left:40px;"> 
-            <label class="labeltext">Select Avaliable VNF</label>
-         </div>
-         <div  class="column" style="background-color:#f2f2f2;width:60%;height:55px;margin-left:0px;">
-            <select  class="form-control" style="width:100%;margin-top:0px;" ng-model="selectedValueVnf"  ng-change="selectVnf(selectedValueVnf)">
-               <option  ng-repeat="vnf in objvnfList" value="{{vnf.vnfid}}">VnfId- {{vnf.vnfid}}&nbsp;VnfName- {{vnf.vnfname}}</option>
-               <option  value="">Select VNFId</option>
-            </select>
-         </div>
-      </div>
-        <div class="row" style="background-color:#f2f2f2;width:100%;margin-left:1px;height:100px">  
+     <div class="row">
+			<div class="column"
+				style="width: 20%; background-color: #f2f2f2; height: 35px; margin-left: 35px;">
+				<label class="labeltext">Select Avaliable VNF</label>
+			</div>
+			<div class="column"
+				style="background-color: #f2f2f2; width: 45%; height: 55px; margin-left: 0px;">
+				<select class="form-control" style="width: 100%; margin-top: 0px;"
+					name="select" ng-model="selectedValueVnf"
+					ng-change=selectVnf(selectedValueVnf) required>
+					<option ng-repeat="vnf in objvnfList" value="{{vnf.vnfId}}">VnfId-
+						{{vnf.vnfId}}&nbsp;VnfName- {{vnf.vnfName}}</option>
+					<option value="">Select VNF</option>
+				</select>
+				<div role="alert">
+					<span class="error" ng-show="myForm.select.$error.required">
+						Required!</span>
+				</div>
+			</div>
+		</div>
+<br><br>
+        <div class="row" style="background-color:#f2f2f2;width:100%;margin-left:1px;height:100px" ng-show="ShowResult">  
         <div class="column" style="width:30%;height:55px;margin-left:35px;"> 
 	<input type="file" style="width:300px" id="myFileInput" ng-model="file" accept=".json"/>
 	</div>
diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-compareConfig.html b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-compareConfig.html
index 93ab7b64..6acaa0e3 100644
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-compareConfig.html
+++ b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-compareConfig.html
@@ -46,7 +46,7 @@
             <th>Action</th>
          </tr>
           <tr ng-repeat="version in pagedItems[currentPage] | orderBy:sort.sortingOrder:sort.reverse">
-            <td>{{$index+1}}</td>
+          <td>{{ ($index + 1) + (currentPage - 1) * itemsPerPage + 5}}</td>
             <td>{{version.vnfversion}}</td>
             <td>{{version.createdAt}}</td>
             <td>{{version.updatedAt}}</td>
@@ -54,7 +54,7 @@
             </td>
          </tr>
          
-         <td colspan="5">
+         <td colspan="5" ng-if="pagedItems.length > 5">
          <!-- ng-show="pagedItems.length > 5"  -->
 				<ul class="pagination pull-right">
 					<li ng-class="{disabled: currentPage == 0}"><a href
diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-deviceConfig.html b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-deviceConfig.html
index 54b39b27..fb5248c8 100644
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-deviceConfig.html
+++ b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-deviceConfig.html
@@ -129,14 +129,16 @@
 
 
 
-<div id = "Div1" class="VersionMain" ng-show="showResult">
+<div id = "Div1" class="VersionMain" ng-show="showResult" >
    <div class="versionHeading"><img src="static/images/compare.jpg" width=25 height="25" style="margin-left:5px;">&nbsp;&nbsp;Version Comparision Result</div>
-   <div class="columnsVersion">
-      <ul class="price">
+  <table class="tableCompare" >
+  <td style="width:230px;">
+   
+      <ul class="price" style="font-weight:bold;">
          <li class="headerVersion">Attributes</li>
          <div style="background-color:#E1E0DA;">
-            <li class="listHeading">Config Details</li>
-            <li ng-repeat="(key,value) in objCompareModel1.versionDetails">{{key}}</li>
+            <li  class="listHeading">Config Details</li>
+            <li  ng-repeat="(key,value) in objCompareModel1.versionDetails">{{key}}</li>
             <hr class="separator">
             </hr>
          </div>
@@ -195,50 +197,50 @@
             </hr>
          </div>
       </ul>
-   </div>
   
-   <div class="columnsVersion">
+  </td><td>
+   
       <ul class="price">
          <li class="headerVersion" style="background-color:#807C7C">Version {{objCompareModel1.versionDetails.vnfversion}}</li>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">Config Details</li>
-            <li ng-repeat="(key,value) in objCompareModel1.versionDetails">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.versionDetails">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
           <div style="background-color:#E1E0DA;" >
             <li class="listHeading">VNF ID</li>
-            <li ng-repeat="(key,value) in objCompareModel1.vnfIdInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.vnfIdInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
           <div style="background-color:#E1E0DA;">
             <li class="listHeading">SERVICE STATUS</li>
-            <li ng-repeat="(key,value) in objCompareModel1.serviceStatusInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.serviceStatusInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
           <div style="background-color:#E1E0DA;">
             <li class="listHeading">VNF Topology Identifer</li>
-            <li ng-repeat="(key,value) in objCompareModel1.vnfTopologyIdentifier">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.vnfTopologyIdentifier">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
           <div style="background-color:#E1E0DA;">
             <li class="listHeading">Operation Status</li>
-            <li ng-repeat="(key,value) in objCompareModel1.operationStatus">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.operationStatus">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
           <div style="background-color:#E1E0DA;">
             <li class="listHeading">Request Info</li>
-            <li ng-repeat="(key,value) in objCompareModel1.vnfRequestInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.vnfRequestInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">Service Info</li>
-            <li ng-repeat="(key,value) in objCompareModel1.serviceInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.serviceInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
@@ -250,7 +252,7 @@
          </div>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">Request Information</li>
-            <li ng-repeat="(key,value) in objCompareModel1.requestInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.requestInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
@@ -261,50 +263,50 @@
             </hr>
          </div>
        </ul>
-   </div>
-
-     <div class="columnsVersion">
+  
+</td><td>
+     
          <ul class="price">
          <li class="headerVersion"style="background-color:#807C7C">Version {{objCompareModel2.versionDetails.vnfversion}}</li>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">Config Details</li>
-            <li ng-repeat="(key,value) in objCompareModel2.versionDetails">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel2.versionDetails">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
           <div style="background-color:#E1E0DA;">
             <li class="listHeading">VNF ID</li>
-            <li ng-repeat="(key,value) in objCompareModel2.vnfIdInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel2.vnfIdInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">SERVICE STATUS</li>
-            <li ng-repeat="(key,value) in objCompareModel2.serviceStatusInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel2.serviceStatusInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">VNF Topology Identifer</li>
-            <li ng-repeat="(key,value) in objCompareModel2.vnfTopologyIdentifier">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel2.vnfTopologyIdentifier">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">Operation Status</li>
-            <li ng-repeat="(key,value) in objCompareModel2.operationStatus">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel2.operationStatus">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">Request Info</li>
-            <li ng-repeat="(key,value) in objCompareModel2.vnfRequestInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel2.vnfRequestInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
   		<div style="background-color:#E1E0DA;">
             <li class="listHeading">Service Info</li>
-            <li ng-repeat="(key,value) in objCompareModel2.serviceInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel2.serviceInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
@@ -316,7 +318,7 @@
          </div>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">Request Information</li>
-            <li ng-repeat="(key,value) in objCompareModel2.requestInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel2.requestInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
@@ -327,6 +329,139 @@
             </hr>
          </div>
       </ul>
-   </div>
+   
+</td><td ng-show=version3>
 
+         <ul class="price">
+         <li class="headerVersion"style="background-color:#807C7C">Version {{objCompareModel3.versionDetails.vnfversion}}</li>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">Config Details</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel3.versionDetails">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+          <div style="background-color:#E1E0DA;">
+            <li class="listHeading">VNF ID</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel3.vnfIdInfo">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">SERVICE STATUS</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel3.serviceStatusInfo">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">VNF Topology Identifer</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel3.vnfTopologyIdentifier">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">Operation Status</li>
+            <li  style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel3.operationStatus">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">Request Info</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel3.vnfRequestInfo">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+  		<div style="background-color:#E1E0DA;">
+            <li class="listHeading">Service Info</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel3.serviceInfo">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+  		<div style="background-color:#E1E0DA;">
+            <li class="listHeading">Service Request Header</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel3.requestHeader">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">Request Information</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel3.requestInfo">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">VNF Topology</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel3.topologyInfo">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+      </ul>
+  
+</td><td ng-show=version4>
+
+         <ul class="price">
+         <li class="headerVersion"style="background-color:#807C7C">Version {{objCompareModel4.versionDetails.vnfversion}}</li>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">Config Details</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel4.versionDetails">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+          <div style="background-color:#E1E0DA;">
+            <li class="listHeading">VNF ID</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel4.vnfIdInfo">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">SERVICE STATUS</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel4.serviceStatusInfo">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">VNF Topology Identifer</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel4.vnfTopologyIdentifier">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">Operation Status</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel4.operationStatus">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">Request Info</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel4.vnfRequestInfo">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+  		<div style="background-color:#E1E0DA;">
+            <li class="listHeading">Service Info</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel4.serviceInfo">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+  		<div style="background-color:#E1E0DA;">
+            <li class="listHeading">Service Request Header</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel4.requestHeader">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">Request Information</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel4.requestInfo">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+         <div style="background-color:#E1E0DA;">
+            <li class="listHeading">VNF Topology</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel4.topologyInfo">{{value}}</li>
+            <hr class="separator">
+            </hr>
+         </div>
+      </ul>
+  
+   </td>
+</table>
 </div>
\ No newline at end of file
diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-deviceConfigView.html b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-deviceConfigView.html
index e9a19aa3..d6cf2fda 100644
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-deviceConfigView.html
+++ b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-deviceConfigView.html
@@ -90,25 +90,25 @@
          <li class="headerVersion" style="background-color:#807C7C">Version {{objCompareModel1.versionDetails.vnfversion}}</li>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">Config Details</li>
-            <li ng-repeat="(key,value) in objCompareModel1.versionDetails">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.versionDetails">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
           <div style="background-color:#E1E0DA;" >
             <li class="listHeading">VNF ID</li>
-            <li ng-repeat="(key,value) in objCompareModel1.vnfIdInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.vnfIdInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
           <div style="background-color:#E1E0DA;">
             <li class="listHeading">SERVICE STATUS</li>
-            <li ng-repeat="(key,value) in objCompareModel1.serviceStatusInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.serviceStatusInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
           <div style="background-color:#E1E0DA;">
             <li class="listHeading">VNF Topology Identifer</li>
-            <li ng-repeat="(key,value) in objCompareModel1.vnfTopologyIdentifier">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.vnfTopologyIdentifier">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
@@ -120,13 +120,13 @@
          </div>
           <div style="background-color:#E1E0DA;">
             <li class="listHeading">Request Info</li>
-            <li ng-repeat="(key,value) in objCompareModel1.vnfRequestInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.vnfRequestInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">Service Info</li>
-            <li ng-repeat="(key,value) in objCompareModel1.serviceInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.serviceInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
@@ -138,13 +138,13 @@
          </div>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">Request Information</li>
-            <li ng-repeat="(key,value) in objCompareModel1.requestInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.requestInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
          <div style="background-color:#E1E0DA;">
             <li class="listHeading">VNF Topology</li>
-            <li style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.topologyInfo">{{value}}</li>
+            <li style="height:29px;overflow: auto;" style="height:29px;overflow: auto;" ng-repeat="(key,value) in objCompareModel1.topologyInfo">{{value}}</li>
             <hr class="separator">
             </hr>
          </div>
diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-viewReport.html b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-viewReport.html
index d4841ad5..2537263e 100644
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-viewReport.html
+++ b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-viewReport.html
@@ -70,9 +70,9 @@
 				<td>{{version.vnfname }}</td>
 				<td>{{version.vnfid}}</td>
 			</tr>
-			<td colspan="4">
+			 <td colspan="4" ng-show="pagedItems.length > 5" >
 			<!-- ng-show="pagedItems.length > 5" -->
-				<ul class="pagination pull-right">
+				<ul class="pagination pull-right" >
 					<li ng-class="{disabled: currentPage == 0}"><a href
 						ng-click="prevPage()">&laquo;</a></li>
 					<li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-viewReportById.html b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-viewReportById.html
index b4eec391..6fde31fc 100644
--- a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-viewReportById.html
+++ b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/views/form-viewReportById.html
@@ -102,7 +102,7 @@
 				<td>{{version.vnfname }}</td>
 				<td>{{version.versionNo}}</td>
 			</tr>
-			<td colspan="4">
+			 <td colspan="4" ng-if="pagedItems.length > 5">
 				<ul class="pagination pull-right">
 					<li ng-class="{disabled: currentPage == 0}"><a href
 						ng-click="prevPage()">&laquo;</a></li>