diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelsTable.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelsTable.tsx index 49c8804afdc..7a28636b7ec 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelsTable.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataModels/DataModelsTable.tsx @@ -14,9 +14,10 @@ import { Table } from 'antd'; import { ColumnsType } from 'antd/lib/table'; import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder'; +import NextPrevious from 'components/common/next-previous/NextPrevious'; import RichTextEditorPreviewer from 'components/common/rich-text-editor/RichTextEditorPreviewer'; import Loader from 'components/Loader/Loader'; -import { getDataModelDetailsPath } from 'constants/constants'; +import { getDataModelDetailsPath, PAGE_SIZE } from 'constants/constants'; import { isEmpty, isUndefined } from 'lodash'; import { DataModelTableProps } from 'pages/DataModelPage/DataModelsInterface'; import { ServicePageData } from 'pages/service'; @@ -25,7 +26,13 @@ import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; import { getEntityName } from 'utils/EntityUtils'; -const DataModelTable = ({ data, isLoading }: DataModelTableProps) => { +const DataModelTable = ({ + data, + isLoading, + paging, + pagingHandler, + currentPage, +}: DataModelTableProps) => { const { t } = useTranslation(); const tableColumn: ColumnsType = useMemo( @@ -82,6 +89,15 @@ const DataModelTable = ({ data, isLoading }: DataModelTableProps) => { rowKey="id" size="small" /> + {paging && paging.total > PAGE_SIZE && ( + + )} ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelsInterface.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelsInterface.tsx index 979249d313e..61859711793 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelsInterface.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataModelPage/DataModelsInterface.tsx @@ -10,11 +10,15 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { Paging } from 'generated/type/paging'; import { ServicePageData } from 'pages/service'; export interface DataModelTableProps { data: Array; isLoading: boolean; + paging: Paging; + currentPage: number; + pagingHandler: (cursorValue: string | number, activePage?: number) => void; } export enum DATA_MODELS_DETAILS_TABS { diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx index fe45034095d..1ffb3023ff0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx @@ -166,6 +166,7 @@ const ServicePage: FunctionComponent = () => { const [ingestionPaging, setIngestionPaging] = useState({} as Paging); const [currentPage, setCurrentPage] = useState(1); + const [dataModelCurrentPage, setDataModelCurrentPage] = useState(1); const [airflowEndpoint, setAirflowEndpoint] = useState(); const [connectionDetails, setConnectionDetails] = useState(); @@ -561,7 +562,10 @@ const ServicePage: FunctionComponent = () => { } }; - const getOtherDetails = (paging?: PagingWithoutTotal) => { + const getOtherDetails = ( + paging?: PagingWithoutTotal, + isDataModel?: boolean + ) => { switch (serviceCategory) { case ServiceCategory.DATABASE_SERVICES: { fetchDatabases(paging); @@ -574,7 +578,9 @@ const ServicePage: FunctionComponent = () => { break; } case ServiceCategory.DASHBOARD_SERVICES: { - fetchDashboards(paging); + if (!isDataModel) { + fetchDashboards(paging); + } fetchDashboardsDataModel(paging); break; @@ -810,6 +816,21 @@ const ServicePage: FunctionComponent = () => { setCurrentPage(activePage ?? 1); }; + const dataModelPagingHandler = ( + cursorType: string | number, + activePage?: number + ) => { + getOtherDetails( + { + [cursorType]: + dataModelPaging[cursorType as keyof typeof dataModelPaging], + }, + true + ); + + setDataModelCurrentPage(activePage ?? 1); + }; + const ingestionTab = useMemo(() => { if (!isAirflowAvailable) { return ; @@ -855,8 +876,16 @@ const ServicePage: FunctionComponent = () => { ]); const dataModalTab = useMemo( - () => , - [dataModel, isLoading] + () => ( + + ), + [dataModel, isServiceLoading, dataModelPagingHandler, dataModelCurrentPage] ); const testConnectionTab = useMemo(() => {