azkaban-developers

UI Enhancements - support table sorting for table in Scheduling,

7/14/2014 7:49:24 PM

Details

diff --git a/azkaban-webserver/src/main/resources/azkaban/webapp/servlet/velocity/executionspage.vm b/azkaban-webserver/src/main/resources/azkaban/webapp/servlet/velocity/executionspage.vm
index 288b5e6..18c1cb5 100644
--- a/azkaban-webserver/src/main/resources/azkaban/webapp/servlet/velocity/executionspage.vm
+++ b/azkaban-webserver/src/main/resources/azkaban/webapp/servlet/velocity/executionspage.vm
@@ -22,12 +22,19 @@
 #parse("azkaban/webapp/servlet/velocity/javascript.vm")
 
     <script type="text/javascript" src="${context}/js/azkaban/view/executions.js"></script>
+    <script type="text/javascript" src="${context}/js/jquery/jquery.tablesorter.js"></script>
     <script type="text/javascript">
       var contextURL = "${context}";
       var currentTime = ${currentTime};
       var timezone = "${timezone}";
       var errorMessage = null;
       var successMessage = null;
+      
+      
+      $(document).ready(function () {
+        var jobTable = $("#executingJobs");
+      	jobTable.tablesorter();
+      });
     </script>
   </head>
   <body>
@@ -59,6 +66,7 @@
           <table id="executingJobs" class="table table-striped table-bordered table-hover table-condensed executions-table">
             <thead>
               <tr>
+                <th>#</th>
                 <th class="execid">Execution Id</th>
                 <th>Flow</th>
                 <th>Project</th>
@@ -75,6 +83,9 @@
 #if ($runningFlows)
   #foreach ($flow in $runningFlows)
               <tr>
+                 <td class="tb-name">
+                   $velocityCount
+                </td>
                 <td class="tb-name">
                   <a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
                 </td>
@@ -106,6 +117,7 @@
           <table id="recentlyFinished" class="table table-striped table-bordered table-hover table-condensed executions-table">
             <thead>
               <tr>
+                <th>#</th>
                 <th class="execid">Execution Id</th>
                 <th>Flow</th>
                 <th>Project</th>
@@ -122,6 +134,9 @@
 #if ($recentlyFinished.isEmpty())
   #foreach ($flow in $recentlyFinished)
               <tr>
+                <td class="tb-name">
+                   $velocityCount
+                </td>
                 <td class="tb-name execId">
                   <a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
                 </td>
diff --git a/azkaban-webserver/src/main/resources/azkaban/webapp/servlet/velocity/historypage.vm b/azkaban-webserver/src/main/resources/azkaban/webapp/servlet/velocity/historypage.vm
index 16d4c87..874fed9 100644
--- a/azkaban-webserver/src/main/resources/azkaban/webapp/servlet/velocity/historypage.vm
+++ b/azkaban-webserver/src/main/resources/azkaban/webapp/servlet/velocity/historypage.vm
@@ -26,10 +26,16 @@
     <script type="text/javascript" src="${context}/js/moment.min.js"></script>
     <script type="text/javascript" src="${context}/js/bootstrap-datetimepicker.min.js"></script>
     <script type="text/javascript" src="${context}/js/azkaban/view/history.js"></script>
+    <script type="text/javascript" src="${context}/js/jquery/jquery.tablesorter.js"></script>
     <script type="text/javascript">
       var contextURL = "${context}";
       var currentTime = ${currentTime};
       var timezone = "${timezone}";
+      
+      $(document).ready(function () {
+        var jobTable = $("#executingJobs");
+      	jobTable.tablesorter();
+      });
     </script>
   </head>
   <body>
@@ -76,6 +82,7 @@
           <table id="executingJobs" class="table table-striped table-bordered table-hover table-condensed executions-table">
             <thead>
               <tr>
+              	<th>#</th>
                 <th class="execid">Execution Id</th>
                 <th>Flow</th>
                 <th>Project</th>
@@ -91,6 +98,9 @@
   #if (!$flowHistory.isEmpty())
     #foreach ($flow in $flowHistory)
               <tr>
+                <td class="tb-name">
+                   $velocityCount
+                </td>
                 <td class="tb-name execId">
                   <a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
                 </td>
diff --git a/azkaban-webserver/src/main/resources/azkaban/webapp/servlet/velocity/scheduledflowpage.vm b/azkaban-webserver/src/main/resources/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
index 6e7c61b..ef19507 100644
--- a/azkaban-webserver/src/main/resources/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
+++ b/azkaban-webserver/src/main/resources/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
@@ -29,12 +29,18 @@
     <script type="text/javascript" src="${context}/js/azkaban/view/schedule-sla.js"></script>
     <script type="text/javascript" src="${context}/js/azkaban/view/scheduled.js"></script>
     <script type="text/javascript" src="${context}/js/azkaban/util/schedule.js"></script>
+    <script type="text/javascript" src="${context}/js/jquery/jquery.tablesorter.js"></script>
     <script type="text/javascript">
       var contextURL = "${context}";
       var currentTime = ${currentTime};
       var timezone = "${timezone}";
       var errorMessage = null;
       var successMessage = null;
+      
+      $(document).ready(function () {
+        var flowTable = $("#scheduledFlowsTbl");
+      	flowTable.tablesorter();
+      });
     </script>
   </head>
   <body>
@@ -66,6 +72,7 @@
             <thead>
               <tr>
                 <!--th class="execid">Execution Id</th-->
+                <th>#</th>
                 <th>ID</th>
                 <th>Flow</th>
                 <th>Project</th>
@@ -81,6 +88,9 @@
   #if(!$schedules.isEmpty())
     #foreach($sched in $schedules)
               <tr>
+                <td class="tb-name">
+                   $velocityCount
+                </td>
                 <td>${sched.scheduleId}</td>
                 <td class="tb-name">
                   <a href="${context}/manager?project=${sched.projectName}&flow=${sched.flowName}">${sched.flowName}</a>