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

8 files changed, 225 insertions, 61 deletions

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>