remove debug log

felixmosh · Jun 2, 2020 · c9c1b3a · c9c1b3a
1 parent 164e391
commit c9c1b3a
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/ui/components/Paginator.js b/ui/components/Paginator.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 
 // TODO: setPageSize() do not set size to zero.
+const MINIMUM_PAGE_SIZE_ALLOWED = 2
 
 export const Paginator = ({
   pagination,
@@ -13,6 +14,7 @@ export const Paginator = ({
   const currentPageNumber = totalJobs > 0 ? Math.floor(pagination.start / pageSize) + 1 : 0
 
   const [pageNumberInputValue, setPageNumberInputValue] = useState(currentPageNumber)
+  const [pageSizeInputValue, setPageSizeInputValue] = useState(pageSize)
 
   useEffect(() => {
     setPageNumberInputValue(currentPageNumber)
@@ -61,6 +63,31 @@ export const Paginator = ({
     setPageNumberInputValue(event.target.value)
   }
 
+  const handlePageSizeInputSubmit = (event) => {
+    if (event.key !== 'Enter') {
+      return
+    }
+
+    const inputValue = parseInt(pageSizeInputValue)
+    if (
+      Number.isNaN(inputValue) || inputValue < MINIMUM_PAGE_SIZE_ALLOWED
+    ) {
+      alert(`Invalid page size, please input a number greater than ${MINIMUM_PAGE_SIZE_ALLOWED}`)
+      setPageSizeInputValue(pageSize)
+      return
+    }
+
+    setPageSize(inputValue)
+    setPagination({
+      start: 0,
+      end: inputValue - 1,
+    })
+  }
+
+  const handlePageSizeInputChange = (event) => {
+    setPageSizeInputValue(event.target.value)
+  }
+
   return (
     <div className="paginator">
       <div>
@@ -87,7 +114,18 @@ export const Paginator = ({
           type="number" 
           onKeyDown={handlePageNumberInputSubmit} 
           onChange={handlePageNumberInputChange} 
-          value={pageNumberInputValue} /> out of {totalPages} pages. Listing the first{' '}
+          value={pageNumberInputValue} /> out of {totalPages} pages,{' '}
+
+        <input
+          disabled={totalJobs <= 2}
+          className="page-size"
+          type="number"
+          onKeyDown={handlePageSizeInputSubmit}
+          onChange={handlePageSizeInputChange}
+          value={pageSizeInputValue} /> jobs per page.
+      </div>
+      <div>
+        Listing the first{' '}
         {pagination.start} - {Math.min(pagination.end, totalJobs)} jobs.
       </div>
     </div>

diff --git a/ui/components/hooks/useStore.js b/ui/components/hooks/useStore.js
@@ -21,7 +21,7 @@ export default function useStore(basePath) {
     stopPolling()
     runPolling()
     return stopPolling
-  }, [selectedStatuses, pagination])
+  }, [selectedStatuses, pagination, pageSize])
 
   const stopPolling = () => {
     if (poll.current) {

diff --git a/ui/index.css b/ui/index.css
@@ -242,17 +242,23 @@ button:disabled {
   text-align: center;
   padding: 10px;
 }
+.paginator:last-of-type {
+  /* make the paginator easier to scroll to */
+  padding: 10px 10px 100px 10px;
+}
 
 .paginator button,
 .paginator span {
   margin: 4px 4px 0 0;
 }
 
-.paginator input.page-number {
+.paginator input.page-number,
+.paginator input.page-size {
   width: 4em;
   font-size: 1em;
 }
-.paginator input.page-number:disabled {
+.paginator input.page-number:disabled,
+.paginator input.page-size:disabled {
   color: gray;
   cursor: not-allowed;
 }