feat(ui/tasks): add pagination on tasks listing page #10293
Conversation
There was a problem hiding this comment.
nice! in general I think we should avoid a pagination context since it obscures where the data is coming from and might end up being difficult to maintain
I think we can simplify things by handling pagination in the DataFlowJobsTab component itself and we can always write a new query to get tasks and paginate like we do elsewhere
| import { useBaseEntity } from '../../EntityContext'; | ||
| import { EntityType } from '../../../../../types.generated'; | ||
| import { EntityList } from './components/EntityList'; | ||
| import { useEntityRegistry } from '../../../../useEntityRegistry'; | ||
| import { useTaskPagination } from './components/TaskPaginationContext'; | ||
|
|
||
| export const DataFlowJobsTab = () => { |
There was a problem hiding this comment.
what if instead of needing to wrap the profile in a pagination provider, we just fetch the data from this component and do the pagination in this component here?
we could always default fetch the first 10 (instead of 100 like we do now) but then paginate from this component entirely like we do in most other places.
| @@ -70,7 +70,7 @@ query getDataFlow($urn: String!) { | |||
| downstream: lineage(input: { direction: DOWNSTREAM, start: 0, count: 100 }) { | |||
| ...partialLineageResults | |||
| } | |||
| childJobs: relationships(input: { types: ["IsPartOf"], direction: INCOMING, start: 0, count: 100 }) { | |||
There was a problem hiding this comment.
we could then write another query like getDataFlowChildJobs that takes in a start and count and use that when we want to paginate
| totalJobs, | ||
| pageSize, | ||
| lastResultIndex, | ||
| showTaskPagination = false, |
There was a problem hiding this comment.
totalJobs and showTaskPagination are a little too specific here - let's rename to totalAssets and showPagination to make this generic so we can use pagination in EntityList everywhere if we desire.
we then will probably need to pass in page and setPage from the parent so pagination can be handled outside of here and we don't have to rely on a pagination context
…agination for component itself
| @@ -125,6 +125,53 @@ query getDataFlow($urn: String!) { | |||
| } | |||
| } | |||
|
|
|||
| query getDataFlowChildJobs($urn: String!, $start: Int, $count: Int) { | |||
There was a problem hiding this comment.
nice! as a followup we can actually remove the childJobs that we're currently getting in the main dataflow query since we're getting it now when you open the tab
There was a problem hiding this comment.
actually i'm going to ask for a couple of small UI edits before merging this:
can we update the styling of the pagination at the bottom of the page to look like it does elsewhere? right now the pages are on the far right when they should be centered. also, the pagination bar should be fixed to the bottom of the screen and allow the contents to scroll within it. this is what i'm seeing:
an example of how it looks elsewhere like on the domains contents page:
once these two quick things are dealt with we're ready to roll
|
@chriscollins3456 here is the attached video |
chriscollins3456
merged commit d7cd1fc
into
datahub-project:master
Checklist