feat(ui/tasks): add pagination on tasks listing page

gaurav2733 · Apr 16, 2024 · 3726f54 · 3726f54
1 parent b6c4d9c
commit 3726f54
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 46 deletions.
diff --git a/datahub-web-react/src/app/entity/dataFlow/DataFlowEntity.tsx b/datahub-web-react/src/app/entity/dataFlow/DataFlowEntity.tsx
@@ -19,6 +19,7 @@ import { capitalizeFirstLetterOnly } from '../../shared/textUtil';
 import DataProductSection from '../shared/containers/profile/sidebar/DataProduct/DataProductSection';
 import { getDataProduct } from '../shared/utils';
 import { IncidentTab } from '../shared/tabs/Incident/IncidentTab';
+import { TaskPaginationProvider } from '../shared/tabs/Entity/components/TaskPaginationContext';
 
 /**
  * Definition of the DataHub DataFlow entity.
@@ -62,37 +63,39 @@ export class DataFlowEntity implements Entity<DataFlow> {
     useEntityQuery = useGetDataFlowQuery;
 
     renderProfile = (urn: string) => (
-        <EntityProfile
-            urn={urn}
-            entityType={EntityType.DataFlow}
-            useEntityQuery={this.useEntityQuery}
-            useUpdateQuery={useUpdateDataFlowMutation}
-            getOverrideProperties={this.getOverridePropertiesFromEntity}
-            headerDropdownItems={new Set([EntityMenuItems.UPDATE_DEPRECATION, EntityMenuItems.RAISE_INCIDENT])}
-            tabs={[
-                {
-                    name: 'Documentation',
-                    component: DocumentationTab,
-                },
-                {
-                    name: 'Properties',
-                    component: PropertiesTab,
-                },
-                {
-                    name: 'Tasks',
-                    component: DataFlowJobsTab,
-                },
-                {
-                    name: 'Incidents',
-                    component: IncidentTab,
-                    getDynamicName: (_, dataFlow) => {
-                        const activeIncidentCount = dataFlow?.dataFlow?.activeIncidents.total;
-                        return `Incidents${(activeIncidentCount && ` (${activeIncidentCount})`) || ''}`;
+        <TaskPaginationProvider>
+            <EntityProfile
+                urn={urn}
+                entityType={EntityType.DataFlow}
+                useEntityQuery={this.useEntityQuery}
+                useUpdateQuery={useUpdateDataFlowMutation}
+                getOverrideProperties={this.getOverridePropertiesFromEntity}
+                headerDropdownItems={new Set([EntityMenuItems.UPDATE_DEPRECATION, EntityMenuItems.RAISE_INCIDENT])}
+                tabs={[
+                    {
+                        name: 'Documentation',
+                        component: DocumentationTab,
                     },
-                },
-            ]}
-            sidebarSections={this.getSidebarSections()}
-        />
+                    {
+                        name: 'Properties',
+                        component: PropertiesTab,
+                    },
+                    {
+                        name: 'Tasks',
+                        component: DataFlowJobsTab,
+                    },
+                    {
+                        name: 'Incidents',
+                        component: IncidentTab,
+                        getDynamicName: (_, dataFlow) => {
+                            const activeIncidentCount = dataFlow?.dataFlow?.activeIncidents.total;
+                            return `Incidents${(activeIncidentCount && ` (${activeIncidentCount})`) || ''}`;
+                        },
+                    },
+                ]}
+                sidebarSections={this.getSidebarSections()}
+            />
+        </TaskPaginationProvider>
     );
 
     getSidebarSections = () => [

diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx
@@ -46,6 +46,7 @@ import { useAppConfig } from '../../../../useAppConfig';
 import { useUpdateDomainEntityDataOnChange } from '../../../../domain/utils';
 import ProfileSidebar from './sidebar/ProfileSidebar';
 import SidebarFormInfoWrapper from './sidebar/FormInfo/SidebarFormInfoWrapper';
+import { useTaskPagination } from '../../tabs/Entity/components/TaskPaginationContext';
 
 type Props<T, U> = {
     urn: string;
@@ -164,6 +165,7 @@ export const EntityProfile = <T, U>({
     const entityRegistry = useEntityRegistry();
     const history = useHistory();
     const appConfig = useAppConfig();
+    const { count, start } = useTaskPagination();
     const isCompact = React.useContext(CompactContext);
     const tabsWithDefaults = tabs.map((tab) => ({ ...tab, display: { ...defaultTabDisplayConfig, ...tab.display } }));
 
@@ -214,7 +216,7 @@ export const EntityProfile = <T, U>({
     );
 
     const { entityData, dataPossiblyCombinedWithSiblings, dataNotCombinedWithSiblings, loading, error, refetch } =
-        useGetDataForProfile({ urn, entityType, useEntityQuery, getOverrideProperties });
+        useGetDataForProfile({ urn, entityType, count ,start , useEntityQuery, getOverrideProperties });
 
     useUpdateGlossaryEntityDataOnChange(entityData, entityType);
     useUpdateDomainEntityDataOnChange(entityData, entityType);

diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/useGetDataForProfile.ts b/datahub-web-react/src/app/entity/shared/containers/profile/useGetDataForProfile.ts
@@ -6,32 +6,45 @@ import { EntityType, Exact } from '../../../../../types.generated';
 
 interface Props<T> {
     urn: string;
+    count?: number;
+    start?: number;
     entityType: EntityType;
     useEntityQuery: (
         baseOptions: QueryHookOptions<
             T,
             Exact<{
                 urn: string;
+                count?: number;
+                start?: number;
             }>
         >,
     ) => QueryResult<
         T,
         Exact<{
             urn: string;
+            count?: number;
+            start?: number;
         }>
     >;
     getOverrideProperties: (T) => GenericEntityProperties;
 }
 
-export default function useGetDataForProfile<T>({ urn, entityType, useEntityQuery, getOverrideProperties }: Props<T>) {
+export default function useGetDataForProfile<T>({
+    urn,
+    count,
+    start,
+    entityType,
+    useEntityQuery,
+    getOverrideProperties,
+}: Props<T>) {
     const isHideSiblingMode = useIsSeparateSiblingsMode();
     const {
         loading,
         error,
         data: dataNotCombinedWithSiblings,
         refetch,
     } = useEntityQuery({
-        variables: { urn },
+        variables: { urn, count, start },
         fetchPolicy: 'cache-first',
     });
 

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Entity/DataFlowJobsTab.tsx b/datahub-web-react/src/app/entity/shared/tabs/Entity/DataFlowJobsTab.tsx
@@ -10,10 +10,24 @@ export const DataFlowJobsTab = () => {
     const dataJobs = dataFlow?.childJobs?.relationships.map((relationship) => relationship.entity);
     const entityRegistry = useEntityRegistry();
     const totalJobs = dataFlow?.childJobs?.total || 0;
+    const pageSize = dataFlow?.childJobs?.count || 0;
+    const pageStart = dataFlow?.childJobs?.start || 0;
+    const lastResultIndex = pageStart + pageSize > totalJobs ? totalJobs : pageStart + pageSize;
+
     const title = `Contains ${totalJobs} ${
         totalJobs === 1
             ? entityRegistry.getEntityName(EntityType.DataJob)
             : entityRegistry.getCollectionName(EntityType.DataJob)
     }`;
-    return <EntityList title={title} type={EntityType.DataJob} entities={dataJobs || []} />;
+    return (
+        <EntityList
+            showTaskPagination
+            title={title}
+            type={EntityType.DataJob}
+            entities={dataJobs || []}
+            totalJobs={totalJobs}
+            pageSize={pageSize}
+            lastResultIndex={lastResultIndex}
+        />
+    );
 };
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Entity/components/EntityList.tsx b/datahub-web-react/src/app/entity/shared/tabs/Entity/components/EntityList.tsx
@@ -1,9 +1,16 @@
-import React from 'react';
-import { List } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { List, Pagination, Typography } from 'antd';
 import styled from 'styled-components';
 import { useEntityRegistry } from '../../../../../useEntityRegistry';
 import { PreviewType } from '../../../../Entity';
 import { EntityType } from '../../../../../../types.generated';
+import { SearchCfg } from '../../../../../../conf';
+import { useTaskPagination } from './TaskPaginationContext';
+
+const ScrollWrapper = styled.div`
+    overflow: auto;
+    max-height: 100%;
+`;
 
 const StyledList = styled(List)`
     padding-left: 40px;
@@ -28,22 +35,90 @@ const StyledListItem = styled(List.Item)`
     padding-top: 20px;
 `;
 
+const PaginationInfoContainer = styled.span`
+    padding: 8px;
+    padding-left: 16px;
+    border-top: 1px solid;
+    border-color: ${(props) => props.theme.styles['border-color-base']};
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+const StyledPagination = styled(Pagination)`
+    margin: 0px;
+    padding: 0px;
+`;
+
+const PaginationInfo = styled(Typography.Text)`
+    padding: 0px;
+`;
+
 type EntityListProps = {
     type: EntityType;
     entities: Array<any>;
     title?: string;
+    totalJobs?: number | null;
+    pageSize?: any;
+    lastResultIndex?: any;
+    showTaskPagination?: boolean;
 };
 
-export const EntityList = ({ type, entities, title }: EntityListProps) => {
+export const EntityList = ({
+    type,
+    entities,
+    title,
+    totalJobs,
+    pageSize,
+    lastResultIndex,
+    showTaskPagination = false,
+}: EntityListProps) => {
     const entityRegistry = useEntityRegistry();
+    const { updateData } = useTaskPagination();
+
+    const [page, setPage] = useState(1);
+    const [numResultsPerPage, setNumResultsPerPage] = useState(SearchCfg.RESULTS_PER_PAGE);
+
+    const onChangePage = (newPage: number) => {
+        setPage(newPage);
+    };
+
+    useEffect(() => {
+        updateData(numResultsPerPage, (page - 1) * numResultsPerPage);
+    }, [page, numResultsPerPage, updateData]);
+
     return (
-        <StyledList
-            bordered
-            dataSource={entities}
-            header={title || `${entities.length || 0} ${entityRegistry.getCollectionName(type)}`}
-            renderItem={(item) => (
-                <StyledListItem>{entityRegistry.renderPreview(type, PreviewType.PREVIEW, item)}</StyledListItem>
+        <>
+            <ScrollWrapper>
+                <StyledList
+                    bordered
+                    dataSource={entities}
+                    header={title || `${entities.length || 0} ${entityRegistry.getCollectionName(type)}`}
+                    renderItem={(item) => (
+                        <StyledListItem>{entityRegistry.renderPreview(type, PreviewType.PREVIEW, item)}</StyledListItem>
+                    )}
+                />
+            </ScrollWrapper>
+            {showTaskPagination && (
+                <PaginationInfoContainer>
+                    <PaginationInfo>
+                        <b>
+                            {lastResultIndex > 0 ? (page - 1) * pageSize + 1 : 0} - {lastResultIndex}
+                        </b>{' '}
+                        of <b>{totalJobs}</b>
+                    </PaginationInfo>
+                    <StyledPagination
+                        current={page}
+                        pageSize={numResultsPerPage}
+                        total={totalJobs as any}
+                        showLessItems
+                        onChange={onChangePage}
+                        showSizeChanger={(totalJobs as any) > SearchCfg.RESULTS_PER_PAGE}
+                        onShowSizeChange={(_currNum, newNum) => setNumResultsPerPage(newNum)}
+                        pageSizeOptions={['10', '20', '50', '100']}
+                    />
+                </PaginationInfoContainer>
             )}
-        />
+        </>
     );
 };
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Entity/components/TaskPaginationContext.tsx b/datahub-web-react/src/app/entity/shared/tabs/Entity/components/TaskPaginationContext.tsx
@@ -0,0 +1,30 @@
+import React, { createContext, useContext, useState } from 'react';
+import { SearchCfg } from '../../../../../../conf';
+
+type PaginationUpdateFunction = (newCount: number, newStart: number) => void;
+
+const TaskPaginationContext = createContext({
+    count: SearchCfg.RESULTS_PER_PAGE,
+    start: 1,
+    updateData: (() => {}) as PaginationUpdateFunction,
+});
+
+export const useTaskPagination = () => useContext(TaskPaginationContext);
+
+export const TaskPaginationProvider = ({ children }: { children: React.ReactNode }) => {
+    const [count, setCount] = useState(SearchCfg.RESULTS_PER_PAGE);
+    const [start, setStart] = useState(1);
+
+    const updateData: PaginationUpdateFunction = (newCount, newStart) => {
+        setCount(newCount);
+        setStart(newStart);
+    };
+
+    const contextValue = {
+        count,
+        start,
+        updateData,
+    };
+
+    return <TaskPaginationContext.Provider value={contextValue}>{children}</TaskPaginationContext.Provider>;
+};
diff --git a/datahub-web-react/src/graphql/dataFlow.graphql b/datahub-web-react/src/graphql/dataFlow.graphql
@@ -61,7 +61,7 @@ fragment dataFlowFields on DataFlow {
     }
 }
 
-query getDataFlow($urn: String!) {
+query getDataFlow($urn: String!, $start: Int, $count: Int) {
     dataFlow(urn: $urn) {
         ...dataFlowFields
         upstream: lineage(input: { direction: UPSTREAM, start: 0, count: 100 }) {
@@ -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 }) {
+        childJobs: relationships(input: { types: ["IsPartOf"], direction: INCOMING, start: $start, count: $count }) {
             start
             count
             total