Add paging on jobs panel

[davidsharp7]

Problem

Currently we pull back the last 100 runs of a job. This PR is to allow for paging so that users can easily scroll through the
runs 10 at a time.

I've also added the total run count to the returned JSON payload on this end point

GET /api/v1/namespaces/my-namespace/jobs/test-job/runs

I will do the PR for dataset versions in due course.

Closes: #2614

Solution

Implement paging similar to that on the sidebar datasets/jobs pages.

One-line summary:

Job level paging of runs.

Checklist

• You've signed-off your work
• Your changes are accompanied by tests (if relevant)
• Your change contains a small diff and is self-contained
• You've updated any relevant documentation (if relevant)
• You've included a one-line summary of your change for the CHANGELOG.md (Depending on the change, this may not be necessary).
• You've versioned your .sql database schema migration according to Flyway's naming convention (if relevant)
• You've included a header in any source code files (if relevant)

[netlify]

✅ Deploy Preview for peppy-sprite-186812 canceled.

Name	Link
🔨 Latest commit	65c0fbd
🔍 Latest deploy log	https://app.netlify.com/sites/peppy-sprite-186812/deploys/669f50f73801e30008af9f3d

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.74%. Comparing base (f0b2195) to head (65c0fbd).

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #2852   +/-   ##
=========================================
  Coverage     84.74%   84.74%           
  Complexity     1456     1456           
=========================================
  Files           253      253           
  Lines          6562     6563    +1     
  Branches        305      305           
=========================================
+ Hits           5561     5562    +1     
  Misses          850      850           
  Partials        151      151           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[phixMe]

I think the duration should maybe be N/A in the event that the job is currently running.

[wslulciuc]

LGTM 👍

[davidsharp7]

I think the duration should maybe be N/A in the event that the job is currently running.

Yeah agree - also added the 'New' state as well.

[phixMe]

Shouldn't we be setting this to a variable unless I'm missing something to page on this?

[davidsharp7]

It's because the "runs" are used by the job detail page so the thinking being that you pull the latest 10 runs so that job details works and then control all the paging from "Runs". Think there is a similar thing with "Dataset Versions" as that's pulled in the top level component and pushed downwards.

But in terms of having the offset and limit as a var then sure no problem. I've moved some stuff around so all of the work happens in JobDetailsPage.

[phixMe]

I pulled down your code and the one thing I'm seeing is that the loading state is wiping out the entire page for loading the runs instead of just the run table. Would it be possible to move the loading rendering detection up the chain and only display a loading indicator for this subsection?

[davidsharp7]

Yeah funnily enough that's part of the reason I split the workload between Runs and JobDetailsPage but agree it's not the best user experience to refresh everything - I will test it on a larger workload as the toy dataset won't cover these kind of use cases.

[phixMe]

Thanks for the updates @davidsharp7