[SPARK-25675][SPARK JOB HISTORY] Job UI page does not show pagination with one page
## What changes were proposed in this pull request? Currently in PagedTable.scala pageNavigation() method, if it is having only one page, they were not using the pagination. Now it is made to use the pagination, even if it is having one page. ## How was this patch tested? This tested with Spark webUI and History page in spark local setup.  Author: shivusondur <shivusondur@gmail.com> Closes #22668 from shivusondur/pagination.
This commit is contained in:
shivusondur
Felix Cheung
parent
ffe256ce16
commit
4c6c6711d5
|
|
@ -122,13 +122,9 @@ private[spark] trait PagedTable[T] {
|
|||
|
||||
/**
|
||||
* Return a page navigation.
|
||||
* <ul>
|
||||
* <li>If the totalPages is 1, the page navigation will be empty</li>
|
||||
* <li>
|
||||
* If the totalPages is more than 1, it will create a page navigation including a group of
|
||||
* page numbers and a form to submit the page number.
|
||||
* </li>
|
||||
* </ul>
|
||||
*
|
||||
* It will create a page navigation including a group of page numbers and a form
|
||||
* to submit the page number.
|
||||
*
|
||||
* Here are some examples of the page navigation:
|
||||
* {{{
|
||||
|
|
@ -154,120 +150,116 @@ private[spark] trait PagedTable[T] {
|
|||
* }}}
|
||||
*/
|
||||
private[ui] def pageNavigation(page: Int, pageSize: Int, totalPages: Int): Seq[Node] = {
|
||||
if (totalPages == 1) {
|
||||
Nil
|
||||
} else {
|
||||
// A group includes all page numbers will be shown in the page navigation.
|
||||
// The size of group is 10 means there are 10 page numbers will be shown.
|
||||
// The first group is 1 to 10, the second is 2 to 20, and so on
|
||||
val groupSize = 10
|
||||
val firstGroup = 0
|
||||
val lastGroup = (totalPages - 1) / groupSize
|
||||
val currentGroup = (page - 1) / groupSize
|
||||
val startPage = currentGroup * groupSize + 1
|
||||
val endPage = totalPages.min(startPage + groupSize - 1)
|
||||
val pageTags = (startPage to endPage).map { p =>
|
||||
if (p == page) {
|
||||
// The current page should be disabled so that it cannot be clicked.
|
||||
<li class="disabled"><a href="#">{p}</a></li>
|
||||
} else {
|
||||
<li><a href={Unparsed(pageLink(p))}>{p}</a></li>
|
||||
}
|
||||
// A group includes all page numbers will be shown in the page navigation.
|
||||
// The size of group is 10 means there are 10 page numbers will be shown.
|
||||
// The first group is 1 to 10, the second is 2 to 20, and so on
|
||||
val groupSize = 10
|
||||
val firstGroup = 0
|
||||
val lastGroup = (totalPages - 1) / groupSize
|
||||
val currentGroup = (page - 1) / groupSize
|
||||
val startPage = currentGroup * groupSize + 1
|
||||
val endPage = totalPages.min(startPage + groupSize - 1)
|
||||
val pageTags = (startPage to endPage).map { p =>
|
||||
if (p == page) {
|
||||
// The current page should be disabled so that it cannot be clicked.
|
||||
<li class="disabled"><a href="#">{p}</a></li>
|
||||
} else {
|
||||
<li><a href={Unparsed(pageLink(p))}>{p}</a></li>
|
||||
}
|
||||
}
|
||||
|
||||
val hiddenFormFields = {
|
||||
if (goButtonFormPath.contains('?')) {
|
||||
val queryString = goButtonFormPath.split("\\?", 2)(1)
|
||||
val search = queryString.split("#")(0)
|
||||
Splitter
|
||||
.on('&')
|
||||
.trimResults()
|
||||
.omitEmptyStrings()
|
||||
.withKeyValueSeparator("=")
|
||||
.split(search)
|
||||
.asScala
|
||||
.filterKeys(_ != pageSizeFormField)
|
||||
.filterKeys(_ != prevPageSizeFormField)
|
||||
.filterKeys(_ != pageNumberFormField)
|
||||
.mapValues(URLDecoder.decode(_, "UTF-8"))
|
||||
.map { case (k, v) =>
|
||||
<input type="hidden" name={k} value={v} />
|
||||
}
|
||||
} else {
|
||||
Seq.empty
|
||||
}
|
||||
val hiddenFormFields = {
|
||||
if (goButtonFormPath.contains('?')) {
|
||||
val queryString = goButtonFormPath.split("\\?", 2)(1)
|
||||
val search = queryString.split("#")(0)
|
||||
Splitter
|
||||
.on('&')
|
||||
.trimResults()
|
||||
.omitEmptyStrings()
|
||||
.withKeyValueSeparator("=")
|
||||
.split(search)
|
||||
.asScala
|
||||
.filterKeys(_ != pageSizeFormField)
|
||||
.filterKeys(_ != prevPageSizeFormField)
|
||||
.filterKeys(_ != pageNumberFormField)
|
||||
.mapValues(URLDecoder.decode(_, "UTF-8"))
|
||||
.map { case (k, v) =>
|
||||
<input type="hidden" name={k} value={v} />
|
||||
}
|
||||
} else {
|
||||
Seq.empty
|
||||
}
|
||||
}
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<form id={s"form-$tableId-page"}
|
||||
method="get"
|
||||
action={Unparsed(goButtonFormPath)}
|
||||
class="form-inline pull-right"
|
||||
style="margin-bottom: 0px;">
|
||||
<input type="hidden"
|
||||
name={prevPageSizeFormField}
|
||||
value={pageSize.toString} />
|
||||
{hiddenFormFields}
|
||||
<label>{totalPages} Pages. Jump to</label>
|
||||
<input type="text"
|
||||
name={pageNumberFormField}
|
||||
id={s"form-$tableId-page-no"}
|
||||
value={page.toString} class="span1" />
|
||||
<form id={s"form-$tableId-page"}
|
||||
method="get"
|
||||
action={Unparsed(goButtonFormPath)}
|
||||
class="form-inline pull-right"
|
||||
style="margin-bottom: 0px;">
|
||||
<input type="hidden"
|
||||
name={prevPageSizeFormField}
|
||||
value={pageSize.toString} />
|
||||
{hiddenFormFields}
|
||||
<label>{totalPages} Pages. Jump to</label>
|
||||
<input type="text"
|
||||
name={pageNumberFormField}
|
||||
id={s"form-$tableId-page-no"}
|
||||
value={page.toString} class="span1" />
|
||||
|
||||
<label>. Show </label>
|
||||
<input type="text"
|
||||
id={s"form-$tableId-page-size"}
|
||||
name={pageSizeFormField}
|
||||
value={pageSize.toString}
|
||||
class="span1" />
|
||||
<label>items in a page.</label>
|
||||
<label>. Show </label>
|
||||
<input type="text"
|
||||
id={s"form-$tableId-page-size"}
|
||||
name={pageSizeFormField}
|
||||
value={pageSize.toString}
|
||||
class="span1" />
|
||||
<label>items in a page.</label>
|
||||
|
||||
<button type="submit" class="btn">Go</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="pagination" style="margin-bottom: 0px;">
|
||||
<span style="float: left; padding-top: 4px; padding-right: 4px;">Page: </span>
|
||||
<ul>
|
||||
{if (currentGroup > firstGroup) {
|
||||
<li>
|
||||
<a href={Unparsed(pageLink(startPage - groupSize))} aria-label="Previous Group">
|
||||
<span aria-hidden="true">
|
||||
<<
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
}}
|
||||
{if (page > 1) {
|
||||
<li>
|
||||
<a href={Unparsed(pageLink(page - 1))} aria-label="Previous">
|
||||
<button type="submit" class="btn">Go</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="pagination" style="margin-bottom: 0px;">
|
||||
<span style="float: left; padding-top: 4px; padding-right: 4px;">Page: </span>
|
||||
<ul>
|
||||
{if (currentGroup > firstGroup) {
|
||||
<li>
|
||||
<a href={Unparsed(pageLink(startPage - groupSize))} aria-label="Previous Group">
|
||||
<span aria-hidden="true">
|
||||
<
|
||||
<<
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
}}
|
||||
{pageTags}
|
||||
{if (page < totalPages) {
|
||||
<li>
|
||||
<a href={Unparsed(pageLink(page + 1))} aria-label="Next">
|
||||
<span aria-hidden="true">></span>
|
||||
</a>
|
||||
</li>
|
||||
}}
|
||||
{if (currentGroup < lastGroup) {
|
||||
<li>
|
||||
<a href={Unparsed(pageLink(startPage + groupSize))} aria-label="Next Group">
|
||||
<span aria-hidden="true">
|
||||
>>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
}}
|
||||
</ul>
|
||||
</div>
|
||||
{if (page > 1) {
|
||||
<li>
|
||||
<a href={Unparsed(pageLink(page - 1))} aria-label="Previous">
|
||||
<span aria-hidden="true">
|
||||
<
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
}}
|
||||
{pageTags}
|
||||
{if (page < totalPages) {
|
||||
<li>
|
||||
<a href={Unparsed(pageLink(page + 1))} aria-label="Next">
|
||||
<span aria-hidden="true">></span>
|
||||
</a>
|
||||
</li>
|
||||
}}
|
||||
{if (currentGroup < lastGroup) {
|
||||
<li>
|
||||
<a href={Unparsed(pageLink(startPage + groupSize))} aria-label="Next Group">
|
||||
<span aria-hidden="true">
|
||||
>>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
}}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in a new issue