Add a text field to let users fill the page size

core/src/main/scala/org/apache/spark/ui/PagedTable.scala

@@ -25,7 +25,11 @@ import scala.xml.{Node, Unparsed}
  * @param page the page number
  * @param pageSize the number of rows in a page
  */
-private[ui] abstract class PagedDataSource[T](page: Int, pageSize: Int) {
+private[ui] abstract class PagedDataSource[T](page: Int, val pageSize: Int) {
+
+  if (pageSize <= 0) {
+    throw new IllegalArgumentException("Page size must be positive")
+  }
 
   protected val data: Seq[T]
 
@@ -68,9 +72,10 @@ private[ui] trait PagedTable[T] {
   def row(t: T): Seq[Node]
 
   def table: Seq[Node] = {
-    val PageData(page, totalPages, data) = dataSource.pageData
+    val _dataSource = dataSource
+    val PageData(page, totalPages, data) = _dataSource.pageData
     <div>
-      {pageNavigation(page, totalPages)}
+      {pageNavigation(page, _dataSource.pageSize, totalPages)}
       <table class={tableCssClass} id={tableId}>
         {headers}
         <tbody>
@@ -113,7 +118,7 @@ private[ui] trait PagedTable[T] {
    * > means jumping to the next page.
    * }}}
    */
-  private[ui] def pageNavigation(page: Int, totalPages: Int): Seq[Node] = {
+  private[ui] def pageNavigation(page: Int, pageSize: Int, totalPages: Int): Seq[Node] = {
     if (totalPages == 1) {
       Nil
     } else {
@@ -141,8 +146,10 @@ private[ui] trait PagedTable[T] {
         s"""$$(function(){
           |  $$( "#form-task-page" ).submit(function(event) {
           |    var page = $$("#form-task-page-no").val()
+          |    var pageSize = $$("#form-task-page-size").val()
+          |    pageSize = pageSize ? pageSize: 100;
           |    if (page != "") {
-          |      ${goButtonJsFuncName}(page);
+          |      ${goButtonJsFuncName}(page, pageSize);
           |    }
           |    event.preventDefault();
           |  });
@@ -151,14 +158,13 @@ private[ui] trait PagedTable[T] {
 
       <div>
         <div>
-          <form id="form-task-page" class="form-horizontal pull-right" style="margin-bottom: 0px;">
-            <div class="control-group">
-              <label class="control-label">{totalPages} Pages. Jump to</label>
-              <div class="controls" style="margin-left: 165px;">
-                <input type="text" id="form-task-page-no" value={page.toString} class="span1" />
-                <button type="submit" class="btn">Go</button>
-              </div>
-            </div>
+          <form id="form-task-page" class="form-inline pull-right" style="margin-bottom: 0px;">
+            <label>{totalPages} Pages. Jump to</label>
+            <input type="text" id="form-task-page-no" value={page.toString} class="span1" />
+            <label>. Show </label>
+            <input type="text" id="form-task-page-size" value={pageSize.toString} class="span1" />
+            <label>tasks in a page.</label>
+            <button type="submit" class="btn">Go</button>
           </form>
         </div>
         <div class="pagination" style="margin-bottom: 0px;">
@@ -216,9 +222,10 @@ private[ui] trait PagedTable[T] {
   def pageLink(page: Int): String
 
   /**
-   * Only the implementation knows how to create the url with a page number, so we leave this one
-   * to the implementation. The implementation should create a JavaScript method that accepts a page
-   * number and jumps to the page. The return value is this method name and its JavaScript codes.
+   * Only the implementation knows how to create the url with a page number and the page size, so we
+   * leave this one to the implementation. The implementation should create a JavaScript method that
+   * accepts a page number along with the page size and jumps to the page. The return value is this
+   * method name and its JavaScript codes.
    */
   def goButtonJavascriptFunction: (String, String)
 }

core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala

@@ -79,10 +79,12 @@ private[ui] class StagePage(parent: StagesTab) extends WebUIPage("stage") {
       val parameterTaskPage = request.getParameter("task.page")
       val parameterTaskSortColumn = request.getParameter("task.sort")
       val parameterTaskSortDesc = request.getParameter("task.desc")
+      val parameterTaskPageSize = request.getParameter("task.pageSize")
 
       val taskPage = Option(parameterTaskPage).map(_.toInt).getOrElse(1)
       val taskSortColumn = Option(parameterTaskSortColumn).getOrElse("Index")
       val taskSortDesc = Option(parameterTaskSortDesc).map(_.toBoolean).getOrElse(false)
+      val taskPageSize = Option(parameterTaskPageSize).map(_.toInt).getOrElse(100)
 
       // If this is set, expand the dag visualization by default
       val expandDagVizParam = request.getParameter("expandDagViz")
@@ -255,7 +257,7 @@ private[ui] class StagePage(parent: StagesTab) extends WebUIPage("stage") {
           stageData.hasBytesSpilled,
           currentTime,
           page = taskPage,
-          pageSize = 100, // Show 100 tasks at most in the table
+          pageSize = taskPageSize,
           sortColumn = taskSortColumn,
           desc = taskSortDesc
         )
@@ -1147,16 +1149,17 @@ private[ui] class TaskPagedTable(
 
   override def pageLink(page: Int): String = {
     val encodedSortColumn = URLEncoder.encode(sortColumn, "UTF-8")
-    s"${basePath}&task.page=$page&task.sort=${encodedSortColumn}&task.desc=${desc}"
+    s"${basePath}&task.page=$page&task.sort=${encodedSortColumn}&task.desc=${desc}" +
+      s"&task.pageSize=${pageSize}"
   }
 
   override def goButtonJavascriptFunction: (String, String) = {
     val jsFuncName = "goToTaskPage"
     val encodedSortColumn = URLEncoder.encode(sortColumn, "UTF-8")
     val jsFunc = s"""
-      |function goToTaskPage(page) {
+      |function goToTaskPage(page, pageSize) {
       |  var url = "${basePath}&task.sort=${encodedSortColumn}&task.desc=${desc}" +
-      |    "&task.page=" + page;
+      |    "&task.page=" + page + "&task.pageSize=" + pageSize;
       |  window.location.href = url;
       |}
      """.stripMargin
@@ -1203,7 +1206,8 @@ private[ui] class TaskPagedTable(
       taskHeadersAndCssClasses.map { case (header, cssClass) =>
         if (header == sortColumn) {
           val headerLink =
-            s"$basePath&task.sort=${URLEncoder.encode(header, "UTF-8")}&task.desc=${!desc}"
+            s"$basePath&task.sort=${URLEncoder.encode(header, "UTF-8")}&task.desc=${!desc}" +
+              s"&task.pageSize=${pageSize}"
           val js = Unparsed(s"window.location.href='${headerLink}'")
           val arrow = if (desc) "▾" else "▴" // UP or DOWN
           <th class={cssClass} onclick={js} style="cursor: pointer;">
@@ -1212,7 +1216,7 @@ private[ui] class TaskPagedTable(
           </th>
         } else {
           val headerLink =
-            s"$basePath&task.sort=${URLEncoder.encode(header, "UTF-8")}"
+            s"$basePath&task.sort=${URLEncoder.encode(header, "UTF-8")}&task.pageSize=${pageSize}"
           val js = Unparsed(s"window.location.href='${headerLink}'")
           <th class={cssClass} onclick={js} style="cursor: pointer;">
             {header}

core/src/test/scala/org/apache/spark/ui/PagedTableSuite.scala

@@ -77,23 +77,25 @@ class PagedTableSuite extends SparkFunSuite {
       override def goButtonJavascriptFunction: (String, String) = ("", "")
     }
 
-    assert(pagedTable.pageNavigation(1, 1) === Nil)
-    assert((pagedTable.pageNavigation(1, 2).head \\ "li").map(_.text.trim) === Seq("1", "2", ">"))
-    assert((pagedTable.pageNavigation(2, 2).head \\ "li").map(_.text.trim) === Seq("<", "1", "2"))
+    assert(pagedTable.pageNavigation(1, 10, 1) === Nil)
+    assert(
+      (pagedTable.pageNavigation(1, 10, 2).head \\ "li").map(_.text.trim) === Seq("1", "2", ">"))
+    assert(
+      (pagedTable.pageNavigation(2, 10, 2).head \\ "li").map(_.text.trim) === Seq("<", "1", "2"))
 
-    assert((pagedTable.pageNavigation(1, 100).head \\ "li").map(_.text.trim) ===
+    assert((pagedTable.pageNavigation(1, 10, 100).head \\ "li").map(_.text.trim) ===
       (1 to 10).map(_.toString) ++ Seq(">", ">>"))
-    assert((pagedTable.pageNavigation(2, 100).head \\ "li").map(_.text.trim) ===
+    assert((pagedTable.pageNavigation(2, 10, 100).head \\ "li").map(_.text.trim) ===
       Seq("<") ++ (1 to 10).map(_.toString) ++ Seq(">", ">>"))
 
-    assert((pagedTable.pageNavigation(100, 100).head \\ "li").map(_.text.trim) ===
+    assert((pagedTable.pageNavigation(100, 10, 100).head \\ "li").map(_.text.trim) ===
       Seq("<<", "<") ++ (91 to 100).map(_.toString))
-    assert((pagedTable.pageNavigation(99, 100).head \\ "li").map(_.text.trim) ===
+    assert((pagedTable.pageNavigation(99, 10, 100).head \\ "li").map(_.text.trim) ===
       Seq("<<", "<") ++ (91 to 100).map(_.toString) ++ Seq(">"))
 
-    assert((pagedTable.pageNavigation(11, 100).head \\ "li").map(_.text.trim) ===
+    assert((pagedTable.pageNavigation(11, 10, 100).head \\ "li").map(_.text.trim) ===
       Seq("<<", "<") ++ (11 to 20).map(_.toString) ++ Seq(">", ">>"))
-    assert((pagedTable.pageNavigation(93, 97).head \\ "li").map(_.text.trim) ===
+    assert((pagedTable.pageNavigation(93, 10, 97).head \\ "li").map(_.text.trim) ===
       Seq("<<", "<") ++ (91 to 97).map(_.toString) ++ Seq(">"))
   }
 }