diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.test.tsx index f4d0a60f216..0358d3519c5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.test.tsx @@ -13,15 +13,13 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; import { act } from 'react-test-renderer'; import { DataInsightChartType } from '../../generated/dataInsight/dataInsightChartResult'; +import { DataInsightTabs } from '../../interface/data-insight.interface'; import DataInsightSummary from './DataInsightSummary'; -jest.mock('react-i18next', () => ({ - useTranslation: jest.fn().mockReturnValue({ - t: (label: string) => label, - }), -})); +let activeTab = DataInsightTabs.DATA_ASSETS; const mockFilter = { startTs: 1667952000000, @@ -30,6 +28,15 @@ const mockFilter = { const mockScrollFunction = jest.fn(); +jest.mock('react-router-dom', () => ({ + Link: jest + .fn() + .mockImplementation(({ children, ...rest }) => {children}), + useParams: jest.fn().mockImplementation(() => ({ + tab: activeTab, + })), +})); + jest.mock('../../axiosAPIs/DataInsightAPI', () => ({ getAggregateChartData: jest.fn().mockImplementation(() => Promise.resolve()), })); @@ -41,7 +48,8 @@ describe('Test DataInsightSummary Component', () => { + />, + { wrapper: MemoryRouter } ); }); @@ -54,4 +62,46 @@ describe('Test DataInsightSummary Component', () => { expect(summaryCard).toBeInTheDocument(); expect(totalEntitiesByType).toBeInTheDocument(); }); + + it('Should render only the data assets summary', async () => { + await act(async () => { + render( + , + { wrapper: MemoryRouter } + ); + }); + + const dataAssetSummary = await screen.findByTestId('data-assets-summary'); + + expect(dataAssetSummary).toBeInTheDocument(); + + // should not render the app analytics summary + expect(screen.queryByTestId('app-analytics-summary')).toBeNull(); + }); + + it('Should render only the app analytics summary', async () => { + activeTab = DataInsightTabs.APP_ANALYTICS; + + await act(async () => { + render( + , + { wrapper: MemoryRouter } + ); + }); + + const appAnalyticsSummary = await screen.findByTestId( + 'app-analytics-summary' + ); + + expect(appAnalyticsSummary).toBeInTheDocument(); + + // should not render the data assets summary + expect(screen.queryByTestId('data-assets-summary')).toBeNull(); + }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.tsx index a55186a8192..3b87b98845f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.tsx @@ -15,7 +15,7 @@ import { Card, Col, Row, Space, Typography } from 'antd'; import { AxiosError } from 'axios'; import React, { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; +import { Link, useParams } from 'react-router-dom'; import { getAggregateChartData } from '../../axiosAPIs/DataInsightAPI'; import { getUserPath } from '../../constants/constants'; import { @@ -28,7 +28,10 @@ import { DataInsightChartType, } from '../../generated/dataInsight/dataInsightChartResult'; import { MostActiveUsers } from '../../generated/dataInsight/type/mostActiveUsers'; -import { ChartFilter } from '../../interface/data-insight.interface'; +import { + ChartFilter, + DataInsightTabs, +} from '../../interface/data-insight.interface'; import { getEntitiesChartSummary, getWebChartSummary, @@ -44,6 +47,9 @@ interface Props { } const DataInsightSummary: FC = ({ chartFilter, onScrollToChart }) => { + const { tab = DataInsightTabs.DATA_ASSETS } = + useParams<{ tab: DataInsightTabs }>(); + const [isLoading, setIsLoading] = useState(false); const [entitiesCharts, setEntitiesChart] = useState< (DataInsightChartResult | undefined)[] @@ -167,64 +173,71 @@ const DataInsightSummary: FC = ({ chartFilter, onScrollToChart }) => { }> - {/* summary of entity charts */} - {entitiesSummaryList.map((summary) => ( - onScrollToChart(summary.id)}> - - {summary.label} - - - {summary.latest} - {summary.id.startsWith('Percentage') ? '%' : ''} - - - ))} + {tab === DataInsightTabs.DATA_ASSETS && ( +
+ {/* summary of entity charts */} + {entitiesSummaryList.map((summary) => ( + onScrollToChart(summary.id)}> + + {summary.label} + + + {summary.latest} + {summary.id.startsWith('Percentage') ? '%' : ''} + + + ))} +
+ )} + {tab === DataInsightTabs.APP_ANALYTICS && ( +
+ {/* summary for web charts */} + {webSummaryList.map((summary) => ( + onScrollToChart(summary.id)}> + + {summary.label} + + + {summary.latest} + {summary.id.startsWith('Percentage') ? '%' : ''} + + + ))} - {/* summary for web charts */} - {webSummaryList.map((summary) => ( - onScrollToChart(summary.id)}> - - {summary.label} - - - {summary.latest} - {summary.id.startsWith('Percentage') ? '%' : ''} - - - ))} - - {/* summary of most active user */} - {mostActiveUser && mostActiveUser.userName && ( - - - {t('label.most-active-user')} - - - - - - {mostActiveUser.userName} - - - - + {/* summary of most active user */} + {mostActiveUser && mostActiveUser.userName && ( + + + {t('label.most-active-user')} + + + + + + {mostActiveUser.userName} + + + + + )} +
)}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx index 1b355bb966e..557a8aa6599 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx @@ -246,15 +246,23 @@ const DataInsightPage = () => { - - - - - - + + {/* Do not show summary for KPIs */} + {tab !== DataInsightTabs.KPIS && ( + + + + )} + + {/* Do not show KPIChart for app analytics */} + {tab !== DataInsightTabs.APP_ANALYTICS && ( + + + + )} {activeTab === DataInsightTabs.DATA_ASSETS && ( <> diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.test.tsx index 7b52362c5af..bfee2ad0ccf 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.test.tsx @@ -11,13 +11,17 @@ * limitations under the License. */ -import { render, screen } from '@testing-library/react'; +import { act, render, screen } from '@testing-library/react'; import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; +import { DataInsightTabs } from '../../interface/data-insight.interface'; import DataInsightPage from './DataInsightPage.component'; +let activeTab = DataInsightTabs.DATA_ASSETS; + jest.mock('react-router-dom', () => ({ useHistory: jest.fn().mockReturnValue({ push: jest.fn() }), - useParams: jest.fn().mockReturnValue({ tab: 'data-assets' }), + useParams: jest.fn().mockImplementation(() => ({ tab: activeTab })), })); jest.mock('../../components/containers/PageLayoutV1', () => @@ -121,4 +125,28 @@ describe('Test DataInsightPage Component', () => { expect(totalEntityInsight).toBeInTheDocument(); }); + + it('Should not render the KPI chart for app analytics', async () => { + activeTab = DataInsightTabs.APP_ANALYTICS; + + await act(async () => { + render(, { wrapper: MemoryRouter }); + }); + + const kpiChart = screen.queryByTestId('kpi-chart'); + + expect(kpiChart).toBeNull(); + }); + + it('Should not render the insights summary for KPIs', async () => { + activeTab = DataInsightTabs.KPIS; + + await act(async () => { + render(, { wrapper: MemoryRouter }); + }); + + const dataInsightsSummary = screen.queryByTestId('data-insight-summary'); + + expect(dataInsightsSummary).toBeNull(); + }); });