WINDUP-758: Sorting the entries in the Migration Issue Report

reporting/impl/src/main/resources/reports/resources/css/windup.css

@@ -7,6 +7,13 @@ body {
   margin:10px;
 }
 
+.tablesorter thead tr th {
+  cursor:pointer;
+  background-position: left center;
+  padding-left: 20px;
+  background: url(../img/styles/table-sort-bg.gif) no-repeat 0%;
+}
+
 .btn-xxs {
   padding: 2px 8px;
   margin: 0 3px 0 0;
@@ -151,4 +158,4 @@ p.windup-contributors  {
 .tattletale-nav-logo {
 	background: url(../img/styles/tattletale-small-white-icon.png);
 }
-/** /Navigation **/
+/** /Navigation **/

reporting/impl/src/main/resources/reports/templates/problem-centric-report.ftl

@@ -51,10 +51,9 @@
 	            	<div class="panel-heading">
                         <h3 class="panel-title">Potential Issues</h3>
                     </div>
-	                <table class="table table-hover table-condensed">
+	                <table id="issues_table" class="table table-hover table-condensed tablesorter">
 	                    <thead>
 	                        <tr>
-	                            <th></th>
 	                            <th>Issue</th>
 	                            <th>Incidents Found</th>
 	                            <th>Effort per Incident</th>
@@ -65,7 +64,6 @@
 	                    <tbody>
 	                        <#list getProblemSummaries() as problemSummary>
 	                            <tr>
-	                                <th class="row">${problemSummary?counter}</th>
 	                                <td>
 	                                    <a href="#" class="problem-link">
 	                                        ${problemSummary.issueName}
@@ -92,6 +90,7 @@
 
         <script src="resources/js/jquery-1.10.1.min.js"></script>
         <script src="resources/js/bootstrap.min.js"></script>
+        <script src="resources/js/jquery.tablesorter.min.js"></script> 
         <script type="text/javascript">
             $(document).ready(function () {
                 $('.problem-link').each(function(index, value) {
@@ -101,6 +100,28 @@
                     });
                 });
             });
+            // we need this parser because we are using comma to separate thousands
+            $.tablesorter.addParser({ 
+   		 id: 'thousands',
+   		 is: function(s) { 
+  		      return true; 
+   		 }, 
+ 		 format: function(s) {
+   		     return s.replace('$','').replace(/,/g,'');
+   		 }, 
+  		 type: 'numeric' 
+	    }); 
+            $(document).ready(function() { 
+                $("#issues_table").tablesorter({
+                sortList: [[3,1]],
+        	headers: {
+                  // 3rd,4th,5th columns are parsed using thousands parser
+          	  2: {sorter:'thousands'},
+                  3: {sorter:'thousands'},
+                  4: {sorter:'thousands'}
+                  }
+                });
+   	    }); 
         </script>
     </body>
 </html>