Few pagination fixes

Author: f-f

dashboard/src/Dashboard/Component/JobDetail.purs

@@ -22,6 +22,7 @@ import Data.Newtype (unwrap)
 import Effect.Aff (Milliseconds(..))
 import Effect.Aff.Class (class MonadAff)
 import Effect.Class (liftEffect)
+import Effect.Now as Now
 import Halogen as H
 import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
@@ -67,6 +68,7 @@ type State =
   , payloadCollapsed :: Boolean
   , logUntil :: Maybe DateTime
   , logPage :: Int
+  , currentTime :: Maybe DateTime
   }
 
 data Action
@@ -117,6 +119,7 @@ initialState input =
   , payloadCollapsed: false
   , logUntil: Nothing
   , logPage: 0
+  , currentTime: Nothing
   }
 
 -- --------------------------------------------------------------------------
@@ -189,15 +192,15 @@ renderJobDetail state job = do
   let info = V1.jobInfo job
   let statusName = Job.printStatus (Job.deriveStatus info)
   HH.div [ HP.class_ (HH.ClassName "job-detail") ]
-    [ renderInfoBlock info statusName (Job.getCompilerVersion job)
+    [ renderInfoBlock state.currentTime info statusName (Job.getCompilerVersion job)
     , renderPayloadSection state job
     , renderLogsSection state
     ]
 
-renderInfoBlock :: forall m. V1.JobInfo () -> String -> Maybe Version -> H.ComponentHTML Action () m
-renderInfoBlock info statusName compiler = do
-  let waitDuration = computeDurationBetween info.createdAt info.startedAt
-  let runDuration = map (\s -> computeDurationBetween s info.finishedAt) info.startedAt
+renderInfoBlock :: forall m. Maybe DateTime -> V1.JobInfo () -> String -> Maybe Version -> H.ComponentHTML Action () m
+renderInfoBlock mNow info statusName compiler = do
+  let waitDuration = computeDurationBetween mNow info.createdAt info.startedAt
+  let runDuration = map (\s -> computeDurationBetween mNow s info.finishedAt) info.startedAt
   HH.div [ HP.class_ (HH.ClassName "job-detail__timestamps") ]
     ( Array.catMaybes
         [ Just $ renderInfoRow "Job ID"
@@ -318,17 +321,20 @@ renderLogEntries state
                     , HH.th [ HP.class_ (HH.ClassName "log-table__th") ] [ HH.text "Message" ]
                     ]
                 ]
-            , HH.tbody_ (Array.mapWithIndex (renderLogEntry pageStart) pageLogs)
+            , HH.tbody_ (Array.mapWithIndex (renderLogEntry state.logSortOrder totalLogs pageStart) pageLogs)
             ]
         , renderLogPagination page totalPages totalLogs
         ]
 
-renderLogEntry :: forall m. Int -> Int -> LogLine -> H.ComponentHTML Action () m
-renderLogEntry offset index logLine = do
+renderLogEntry :: forall m. SortOrder -> Int -> Int -> Int -> LogLine -> H.ComponentHTML Action () m
+renderLogEntry sortOrder totalLogs offset index logLine = do
   let level = V1.printLogLevel logLine.level
+  let rowNum = case sortOrder of
+        ASC -> offset + index + 1
+        DESC -> totalLogs - offset - index
   HH.tr [ HP.class_ (HH.ClassName ("log-entry log-entry--" <> level)) ]
     [ HH.td [ HP.class_ (HH.ClassName "log-entry__rownum") ]
-        [ HH.text (show (offset + index + 1)) ]
+        [ HH.text (show rowNum) ]
     , HH.td [ HP.class_ (HH.ClassName "log-entry__time") ]
         [ HH.text (Job.formatTimestamp logLine.timestamp) ]
     , HH.td [ HP.class_ (HH.ClassName "log-entry__level") ]
@@ -370,6 +376,8 @@ renderLogPagination page totalPages totalLogs
 handleAction :: forall m. MonadAff m => Action -> H.HalogenM State Action () Output m Unit
 handleAction = case _ of
   Initialize -> do
+    now <- liftEffect Now.nowDateTime
+    H.modify_ _ { currentTime = Just now }
     handleAction FetchJob
     state <- H.get
     let finished = case state.job of
@@ -397,6 +405,7 @@ handleAction = case _ of
       let msg = API.printApiError err
       H.modify_ _ { loading = false, error = Just msg, job = Nothing }
     Right job -> do
+      now <- liftEffect Now.nowDateTime
       let info = V1.jobInfo job
       let logs = info.logs
       let lastTs = map _.timestamp (Array.last logs)
@@ -408,6 +417,7 @@ handleAction = case _ of
         , lastLogTimestamp = lastTs
         , logUntil = info.finishedAt
         , logPage = 0
+        , currentTime = Just now
         }
       fetchAllRemainingLogs
       stopAutoRefreshIfFinished info
@@ -445,6 +455,8 @@ handleAction = case _ of
       }
 
   LogRefreshTick -> do
+    now <- liftEffect Now.nowDateTime
+    H.modify_ _ { currentTime = Just now }
     state <- H.get
     -- No-op if the job is already finished: all logs have been fetched.
     let finished = case state.job of
@@ -460,6 +472,7 @@ handleAction = case _ of
     -- next tick will attempt another fetch automatically.
     Left _ -> pure unit
     Right job -> do
+      now <- liftEffect Now.nowDateTime
       state <- H.get
       let info = V1.jobInfo job
       let newLogs = Array.filter (isNewerThan state.lastLogTimestamp) info.logs
@@ -469,7 +482,7 @@ handleAction = case _ of
         let combined = capLogs state.logSortOrder (state.allLogs <> newLogs)
         H.modify_ _ { allLogs = combined, lastLogTimestamp = lastTs }
       -- Update job status and logUntil from the refreshed data
-      H.modify_ _ { job = Just job, logUntil = info.finishedAt }
+      H.modify_ _ { job = Just job, logUntil = info.finishedAt, currentTime = Just now }
       stopAutoRefreshIfFinished info
 
   TogglePayload ->
@@ -552,11 +565,14 @@ getPayloadJson = case _ of
   PackageSetJob j -> JSON.printIndented (CJ.encode Operation.packageSetOperationCodec j.payload)
 
 -- | Compute a human-readable duration between a start time and an optional
--- | end time. If the end time is absent, shows "ongoing".
-computeDurationBetween :: DateTime -> Maybe DateTime -> String
-computeDurationBetween start = case _ of
-  Nothing -> "ongoing"
+-- | end time. If the end time is absent, uses the current time as a fallback
+-- | and appends "(ongoing)".
+computeDurationBetween :: Maybe DateTime -> DateTime -> Maybe DateTime -> String
+computeDurationBetween mNow start = case _ of
   Just end -> Job.formatDurationBetween start end
+  Nothing -> case mNow of
+    Just now -> Job.formatDurationBetween start now <> " (ongoing)"
+    Nothing -> "ongoing"
 
 -- | Fetch all remaining log pages after the initial fetch by looping until
 -- | either an empty batch is returned or the maximum number of iterations

dashboard/src/Dashboard/Component/JobsList.purs

@@ -137,11 +137,32 @@ type State =
   , currentPage :: Int
   -- | Whether there are more results beyond the current page.
   , hasNextPage :: Boolean
-  -- | Boundary timestamps for pages we have visited. `pageCursors !! 0` is
-  -- | the cursor that takes us from page 1 to page 2, etc.
-  , pageCursors :: Array DateTime
+  -- | The cursor used to fetch the current page, if any.
+  , pageCursor :: Maybe PageCursor
   }
 
+-- | Direction of a pagination cursor relative to the sort order.
+data PaginationDir = Forward | Backward
+
+derive instance Eq PaginationDir
+
+-- | A pagination cursor: a boundary timestamp and the direction it was
+-- | computed from (forward = NextPage, backward = PrevPage).
+type PageCursor = { timestamp :: DateTime, dir :: PaginationDir }
+
+printCursorParam :: PageCursor -> String
+printCursorParam { timestamp, dir } =
+  (case dir of
+    Forward -> "f:"
+    Backward -> "b:")
+    <> Job.formatCursorTimestamp timestamp
+
+parseCursorParam :: String -> Maybe PageCursor
+parseCursorParam s = case String.take 2 s of
+  "f:" -> map (\dt -> { timestamp: dt, dir: Forward }) (Job.parseCursorTimestamp (String.drop 2 s))
+  "b:" -> map (\dt -> { timestamp: dt, dir: Backward }) (Job.parseCursorTimestamp (String.drop 2 s))
+  _ -> Nothing
+
 data Action
   = Initialize
   | FetchJobs
@@ -205,7 +226,9 @@ initialState input = do
   , untilStr: fromMaybe "" p.until
   , currentPage: fromMaybe 1 p.page
   , hasNextPage: true
-  , pageCursors: []
+  , pageCursor: case p.page, p.cursor >>= parseCursorParam of
+      Just pg, Just pc | pg > 1 -> Just pc
+      _, _ -> Nothing
   }
 
 -- --------------------------------------------------------------------------
@@ -246,6 +269,9 @@ stateToParams s =
   , page:
       if s.currentPage <= 1 then Nothing
       else Just s.currentPage
+  , cursor: case s.pageCursor of
+      Just pc | s.currentPage > 1 -> Just (printCursorParam pc)
+      _ -> Nothing
   }
 
 -- --------------------------------------------------------------------------
@@ -630,7 +656,9 @@ handleAction = case _ of
         , currentPage = fromMaybe 1 p.page
         , since = Nothing
         , until = Nothing
-        , pageCursors = []
+        , pageCursor = case p.page, p.cursor >>= parseCursorParam of
+            Just pg, Just pc | pg > 1 -> Just pc
+            _, _ -> Nothing
         , hasNextPage = true
         }
       handleAction FetchJobs
@@ -663,15 +691,18 @@ handleAction = case _ of
       -- avoids VDOM diffing on every auto-refresh tick when nothing new
       -- has arrived.
       unless (not state.loading && newFingerprints == oldFingerprints) do
-        let hasNext = Array.length jobs >= pageSize
+        let isBackward = case state.pageCursor of
+              Just { dir: Backward } -> true
+              _ -> false
+        let hasNext = isBackward || Array.length jobs >= pageSize
         H.modify_ _ { loading = false, error = Nothing, jobs = summaries, hasNextPage = hasNext }
 
   SetTimeRange range -> do
     when (range == Custom) do
       now <- liftEffect Now.nowDateTime
       let sinceDefault = subtractHours 24.0 now
       H.modify_ _ { sinceStr = Job.formatDateTimeLocal sinceDefault, untilStr = Job.formatDateTimeLocal now }
-    H.modify_ _ { timeRange = range, since = Nothing, until = Nothing, currentPage = 1, pageCursors = [], hasNextPage = true }
+    H.modify_ _ { timeRange = range, since = Nothing, until = Nothing, currentPage = 1, pageCursor = Nothing, hasNextPage = true }
     handleAction FetchJobs
     notifyFiltersChanged
 
@@ -722,17 +753,17 @@ handleAction = case _ of
     -- Re-fetch when switching between Active and other modes, because
     -- Active excludes completed jobs server-side.
     when (needsRefetch state) do
-      H.modify_ _ { currentPage = 1, pageCursors = [], hasNextPage = true }
+      H.modify_ _ { currentPage = 1, pageCursor = Nothing, hasNextPage = true }
       handleAction FetchJobs
 
   ClearFilters -> do
-    H.modify_ _ { filters = emptyFilters, sortOrder = defaultSortOrder, currentPage = 1, pageCursors = [], hasNextPage = true }
+    H.modify_ _ { filters = emptyFilters, sortOrder = defaultSortOrder, currentPage = 1, pageCursor = Nothing, hasNextPage = true }
     notifyFiltersChanged
 
   SetSort field -> do
     H.modify_ \s -> do
       let newOrder = if s.sortField == field then (if s.sortOrder == DESC then ASC else DESC) else DESC
-      s { sortField = field, sortOrder = newOrder, currentPage = 1, pageCursors = [], hasNextPage = true }
+      s { sortField = field, sortOrder = newOrder, currentPage = 1, pageCursor = Nothing, hasNextPage = true }
     handleAction FetchJobs
     notifyFiltersChanged
 
@@ -749,18 +780,30 @@ handleAction = case _ of
       case cursor of
         Nothing -> pure unit
         Just ts -> do
-          let newCursors = state.pageCursors <> [ ts ]
-          H.modify_ _ { currentPage = state.currentPage + 1, pageCursors = newCursors }
+          H.modify_ _ { currentPage = state.currentPage + 1, pageCursor = Just { timestamp: ts, dir: Forward } }
           handleAction FetchJobs
           notifyFiltersChanged
 
   PrevPage -> do
     state <- H.get
     when (state.currentPage > 1) do
-      let newCursors = fromMaybe [] (Array.init state.pageCursors)
-      H.modify_ _ { currentPage = state.currentPage - 1, pageCursors = newCursors, hasNextPage = true }
-      handleAction FetchJobs
-      notifyFiltersChanged
+      let targetPage = state.currentPage - 1
+      if targetPage <= 1 then do
+        -- Arriving at page 1: reset cursor for fresh data
+        H.modify_ _ { currentPage = 1, pageCursor = Nothing, hasNextPage = true }
+        handleAction FetchJobs
+        notifyFiltersChanged
+      else do
+        let
+          cursor = case state.sortOrder of
+            DESC -> extremeCreatedAt max state.jobs
+            ASC -> extremeCreatedAt min state.jobs
+        case cursor of
+          Nothing -> pure unit
+          Just ts -> do
+            H.modify_ _ { currentPage = targetPage, pageCursor = Just { timestamp: ts, dir: Backward }, hasNextPage = true }
+            handleAction FetchJobs
+            notifyFiltersChanged
 
   Tick ->
     handleAction FetchJobsSilent
@@ -799,25 +842,24 @@ doFetchJobs = do
       Custom -> customUntil
       UntilNow -> Just now
       _ -> Nothing
-    pageCursor = Array.index state.pageCursors (state.currentPage - 2)
-    since = case state.sortOrder of
-      DESC -> baseSince
-      ASC ->
-        if state.currentPage > 1 then pageCursor
-        else baseSince
-    until = case state.sortOrder of
-      DESC ->
-        if state.currentPage > 1 then pageCursor
-        else baseUntil
-      ASC -> baseUntil
+    { since, until, fetchOrder, needsReverse } = case state.pageCursor of
+      Nothing ->
+        { since: baseSince, until: baseUntil, fetchOrder: state.sortOrder, needsReverse: false }
+      Just { timestamp, dir: Forward } -> case state.sortOrder of
+        DESC -> { since: baseSince, until: Just timestamp, fetchOrder: DESC, needsReverse: false }
+        ASC -> { since: Just timestamp, until: baseUntil, fetchOrder: ASC, needsReverse: false }
+      Just { timestamp, dir: Backward } -> case state.sortOrder of
+        DESC -> { since: Just timestamp, until: baseUntil, fetchOrder: ASC, needsReverse: true }
+        ASC -> { since: baseSince, until: Just timestamp, fetchOrder: DESC, needsReverse: true }
     includeCompleted = Just (state.filters.statusFilter /= ActiveOnly)
-  H.liftAff $ API.fetchJobs state.apiConfig { since, until, order: Just state.sortOrder, includeCompleted }
+  result <- H.liftAff $ API.fetchJobs state.apiConfig { since, until, order: Just fetchOrder, includeCompleted }
+  pure $ if needsReverse then map Array.reverse result else result
 
 -- | Update the combined sinceStr from a date or time part change, fetch if
 -- | both endpoints parse, and sync the URL.
 updateCustomSince :: forall m. MonadAff m => String -> H.HalogenM State Action () Output m Unit
 updateCustomSince newSince = do
-  H.modify_ _ { sinceStr = newSince, since = Nothing, until = Nothing, currentPage = 1, pageCursors = [], hasNextPage = true }
+  H.modify_ _ { sinceStr = newSince, since = Nothing, until = Nothing, currentPage = 1, pageCursor = Nothing, hasNextPage = true }
   state <- H.get
   case Job.parseDateTimeLocal newSince, Job.parseDateTimeLocal state.untilStr of
     Just _, Just _ -> handleAction FetchJobs
@@ -828,7 +870,7 @@ updateCustomSince newSince = do
 -- | both endpoints parse, and sync the URL.
 updateCustomUntil :: forall m. MonadAff m => String -> H.HalogenM State Action () Output m Unit
 updateCustomUntil newUntil = do
-  H.modify_ _ { untilStr = newUntil, since = Nothing, until = Nothing, currentPage = 1, pageCursors = [], hasNextPage = true }
+  H.modify_ _ { untilStr = newUntil, since = Nothing, until = Nothing, currentPage = 1, pageCursor = Nothing, hasNextPage = true }
   state <- H.get
   case Job.parseDateTimeLocal state.sinceStr, Job.parseDateTimeLocal newUntil of
     Just _, Just _ -> handleAction FetchJobs

dashboard/src/Dashboard/Job.purs

@@ -14,6 +14,8 @@ module Dashboard.Job
   , formatTimestamp
   , formatDateTimeLocal
   , parseDateTimeLocal
+  , formatCursorTimestamp
+  , parseCursorTimestamp
   , formatDurationSecs
   , formatDurationBetween
   , timerEmitter
@@ -159,6 +161,21 @@ dateTimeLocalFormat = List.fromFoldable
   , Placeholder "T", Hours24, Placeholder ":", MinutesTwoDigits
   ]
 
+-- | Format a DateTime as a URL-safe cursor timestamp "YYYY-MM-DDTHH:MM:SS".
+formatCursorTimestamp :: DateTime -> String
+formatCursorTimestamp = Formatter.DateTime.format cursorTimestampFormat
+
+-- | Parse a cursor timestamp ("YYYY-MM-DDTHH:MM:SS") into a DateTime.
+parseCursorTimestamp :: String -> Maybe DateTime
+parseCursorTimestamp = hush <<< Formatter.DateTime.unformat cursorTimestampFormat
+
+-- "YYYY-MM-DDTHH:MM:SS"
+cursorTimestampFormat :: List FormatterCommand
+cursorTimestampFormat = List.fromFoldable
+  [ YearFull, Placeholder "-", MonthTwoDigits, Placeholder "-", DayOfMonthTwoDigits
+  , Placeholder "T", Hours24, Placeholder ":", MinutesTwoDigits, Placeholder ":", SecondsTwoDigits
+  ]
+
 -- | Format a duration in seconds as a human-readable string.
 formatDurationSecs :: Int -> String
 formatDurationSecs totalSecs

dashboard/src/Dashboard/Route.purs

@@ -28,6 +28,7 @@ type JobsListParams =
   , until :: Maybe String
   , order :: Maybe String
   , page :: Maybe Int
+  , cursor :: Maybe String
   }
 
 -- | All-Nothing params representing defaults (no filters active).
@@ -44,6 +45,7 @@ defaultParams =
   , until: Nothing
   , order: Nothing
   , page: Nothing
+  , cursor: Nothing
   }
 
 data Route
@@ -91,4 +93,5 @@ routes = RD.root routeChoice
     , until: RD.optional <<< RD.string
     , order: RD.optional <<< RD.string
     , page: RD.optional <<< RD.int <<< RD.string
+    , cursor: RD.optional <<< RD.string
     }

dashboard/src/Dashboard/Router.purs

@@ -146,7 +146,7 @@ handleAction = case _ of
     liftEffect $ setHash ("#/jobs/" <> jobId)
 
   HandleJobsListOutput (JobsList.FiltersChanged params) -> do
-    H.modify_ _ { lastJobsListParams = params }
+    H.modify_ _ { route = JobsList params, lastJobsListParams = params }
     liftEffect $ replaceHash (routeToHash (JobsList params))
 
   HandleJobDetailOutput JobDetail.NavigateBack -> do