ui: fixed loading issue in table, and remove unwanted params from API in table profiler (#12668)

* ui: fixed loading issue in table, and remove unwanted params from API in table profiler

* fixed unit test and addressing comment

* added "testDefinition" params to API as it required to for edit test
This commit is contained in:
Shailesh Parmar 2023-07-31 21:14:21 +05:30 committed by GitHub
parent 5f07c6281a
commit 43fdf78d73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 231 additions and 210 deletions

View File

@ -267,21 +267,21 @@ const BotListV1 = ({
<Col span={24}>
<Row>
<Col span={24}>
<Table
bordered
columns={columns}
dataSource={searchedData}
loading={{
spinning: loading,
indicator: <Loader size="small" />,
}}
locale={{
emptyText: <FilterTablePlaceHolder />,
}}
pagination={false}
rowKey="name"
size="small"
/>
{loading ? (
<Loader />
) : (
<Table
bordered
columns={columns}
dataSource={searchedData}
locale={{
emptyText: <FilterTablePlaceHolder />,
}}
pagination={false}
rowKey="name"
size="small"
/>
)}
</Col>
<Col span={24}>
{paging.total > PAGE_SIZE_LARGE && (

View File

@ -135,14 +135,15 @@ const TopActiveUsers: FC<Props> = ({ chartFilter }) => {
}}
/>
}>
{isEmpty(mostActiveUsers) ? (
{isLoading ? (
<Loader />
) : isEmpty(mostActiveUsers) ? (
<EmptyGraphPlaceholder />
) : (
<Table
className="data-insight-table-wrapper"
columns={columns}
dataSource={mostActiveUsers}
loading={{ spinning: isLoading, indicator: <Loader /> }}
pagination={false}
size="small"
/>

View File

@ -15,6 +15,7 @@ import { Card, Space, Table, Typography } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { AxiosError } from 'axios';
import PageHeader from 'components/header/PageHeader.component';
import Loader from 'components/Loader/Loader';
import { isEmpty, isUndefined } from 'lodash';
import React, { FC, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -27,7 +28,6 @@ import { ChartFilter } from '../../interface/data-insight.interface';
import { getDecodedFqn } from '../../utils/StringsUtils';
import { showErrorToast } from '../../utils/ToastUtils';
import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
import Loader from '../Loader/Loader';
import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
@ -130,14 +130,15 @@ const TopViewEntities: FC<Props> = ({ chartFilter }) => {
}}
/>
}>
{isEmpty(mostViewedEntities) ? (
{isLoading ? (
<Loader />
) : isEmpty(mostViewedEntities) ? (
<EmptyGraphPlaceholder />
) : (
<Table
className="data-insight-table-wrapper"
columns={columns}
dataSource={mostViewedEntities}
loading={{ spinning: isLoading, indicator: <Loader /> }}
pagination={false}
size="small"
/>

View File

@ -198,18 +198,21 @@ export const TestSuites = ({ summaryPanel }: { summaryPanel: ReactNode }) => {
<Col span={24}>{summaryPanel}</Col>
<Col span={24}>
<Table
bordered
columns={columns}
data-testid="test-suite-table"
dataSource={testSuites.data}
loading={{ spinning: isLoading, indicator: <Loader /> }}
locale={{
emptyText: <FilterTablePlaceHolder />,
}}
pagination={false}
size="small"
/>
{isLoading ? (
<Loader />
) : (
<Table
bordered
columns={columns}
data-testid="test-suite-table"
dataSource={testSuites.data}
locale={{
emptyText: <FilterTablePlaceHolder />,
}}
pagination={false}
size="small"
/>
)}
</Col>
<Col span={24}>
{testSuites.paging.total > PAGE_SIZE && (

View File

@ -216,16 +216,16 @@ export const GlossaryImportResult: FC<Props> = ({ csvImportResult }) => {
parseCsvFile();
}, [csvImportResult.importResultsCsv]);
if (loading) {
return <Loader />;
}
return (
<Table
bordered
columns={columns}
data-testid="import-result-table"
dataSource={parsedRecords}
loading={{
spinning: loading,
indicator: <Loader size="small" />,
}}
pagination={false}
rowKey="name"
scroll={{ x: true }}

View File

@ -401,29 +401,29 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
return (
<Row gutter={16}>
<Col span={24}>
<Table
bordered
className="test-case-table-container"
columns={columns}
data-testid="test-case-table"
dataSource={sortedData}
expandable={{
...getTableExpandableConfig<TestCase>(),
expandRowByClick: true,
rowExpandable: () => true,
expandedRowRender: (recode) => <TestSummary data={recode} />,
}}
loading={{
indicator: <Loader size="small" />,
spinning: isLoading,
}}
locale={{
emptyText: <FilterTablePlaceHolder />,
}}
pagination={false}
rowKey="id"
size="small"
/>
{isLoading ? (
<Loader />
) : (
<Table
bordered
className="test-case-table-container"
columns={columns}
data-testid="test-case-table"
dataSource={sortedData}
expandable={{
...getTableExpandableConfig<TestCase>(),
expandRowByClick: true,
rowExpandable: () => true,
expandedRowRender: (recode) => <TestSummary data={recode} />,
}}
locale={{
emptyText: <FilterTablePlaceHolder />,
}}
pagination={false}
rowKey="id"
size="small"
/>
)}
</Col>
<Col span={24}>
{!isUndefined(pagingData) && pagingData.paging.total > PAGE_SIZE && (

View File

@ -31,6 +31,7 @@ import classNames from 'classnames';
import { SummaryCard } from 'components/common/SummaryCard/SummaryCard.component';
import { SummaryCardProps } from 'components/common/SummaryCard/SummaryCard.interface';
import DatePickerMenu from 'components/DatePickerMenu/DatePickerMenu.component';
import Loader from 'components/Loader/Loader';
import { DateRangeObject } from 'components/ProfilerDashboard/component/TestSummary';
import TabsLabel from 'components/TabsLabel/TabsLabel.component';
import { useTourProvider } from 'components/TourProvider/TourProvider';
@ -136,7 +137,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
const [selectedTestCaseStatus, setSelectedTestCaseStatus] =
useState<string>('');
const [selectedTestType, setSelectedTestType] = useState('');
const [isTestCaseLoading, setIsTestCaseLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [dateRangeObject, setDateRangeObject] =
useState<DateRangeObject>(DEFAULT_RANGE_DATA);
@ -379,11 +380,11 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
};
const fetchAllTests = async (params?: ListTestCaseParams) => {
setIsTestCaseLoading(true);
setIsLoading(true);
try {
const { data } = await getListTestCase({
...params,
fields: 'testCaseResult,entityLink,testDefinition,testSuite',
fields: 'testCaseResult, testDefinition',
entityLink: generateEntityLink(datasetFQN || ''),
includeAllTests: true,
limit: API_RES_MAX_SIZE,
@ -393,7 +394,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
} catch (error) {
showErrorToast(error as AxiosError);
} finally {
setIsTestCaseLoading(false);
setIsLoading(false);
}
};
@ -444,11 +445,14 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
// and the datasetFQN comes form url parameter which is already encoded,
// we are decoding FQN below to avoid double encoding in the API function
const decodedDatasetFQN = decodeURIComponent(datasetFQN);
setIsLoading(true);
try {
const response = await getLatestTableProfileByFqn(decodedDatasetFQN);
setTable(response);
} catch (error) {
showErrorToast(error as AxiosError);
} finally {
setIsLoading(false);
}
};
@ -485,18 +489,20 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
}, [viewTest, isTourOpen, isTableProfile, allTests]);
useEffect(() => {
if (
const fetchProfiler =
!isTableDeleted &&
datasetFQN &&
!isTourOpen &&
(isTableProfile || isColumnProfile)
) {
(isTableProfile || isColumnProfile) &&
isUndefined(table);
if (fetchProfiler) {
fetchLatestProfilerData();
}
if (isTourOpen) {
setTable(mockDatasetData.tableDetails as unknown as Table);
}
}, [datasetFQN, isTourOpen, isTableProfile]);
}, [datasetFQN, isTourOpen, isTableProfile, isColumnProfile]);
return (
<Row
@ -629,6 +635,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
<Col key={summery.title}>
<SummaryCard
className={classNames(summery.className, 'h-full')}
isLoading={isLoading}
showProgressBar={false}
title={summery.title}
total={0}
@ -641,6 +648,7 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
<Col key={key}>
<SummaryCard
showProgressBar
isLoading={isLoading}
title={key}
total={selectedColumnTestsObj.totalTests}
type={toLower(key) as SummaryCardProps['type']}
@ -653,44 +661,50 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
)}
</Row>
{isColumnProfile && (
<ColumnProfileTable
columnTests={columnTests}
columns={columns.map((col) => ({
...col,
key: col.name,
}))}
dateRangeObject={dateRangeObject}
hasEditAccess={editTest}
/>
)}
{isLoading ? (
<Loader />
) : (
<>
{isColumnProfile && (
<ColumnProfileTable
columnTests={columnTests}
columns={columns.map((col) => ({
...col,
key: col.name,
}))}
dateRangeObject={dateRangeObject}
hasEditAccess={editTest}
/>
)}
{isDataQuality && (
<QualityTab
afterDeleteAction={fetchAllTests}
isLoading={isTestCaseLoading}
showTableColumn={false}
testCases={getFilterTestCase()}
testSuite={testSuite}
onTestCaseResultUpdate={handleResultUpdate}
onTestUpdate={handleTestUpdate}
/>
)}
{isDataQuality && (
<QualityTab
afterDeleteAction={fetchAllTests}
isLoading={isLoading}
showTableColumn={false}
testCases={getFilterTestCase()}
testSuite={testSuite}
onTestCaseResultUpdate={handleResultUpdate}
onTestUpdate={handleTestUpdate}
/>
)}
{isTableProfile && (
<TableProfilerChart
dateRangeObject={dateRangeObject}
showOperationGraph={showOperationGraph}
/>
)}
{isTableProfile && (
<TableProfilerChart
dateRangeObject={dateRangeObject}
showOperationGraph={showOperationGraph}
/>
)}
{settingModalVisible && (
<ProfilerSettingsModal
columns={columns}
tableId={table?.id || ''}
visible={settingModalVisible}
onVisibilityChange={handleSettingModal}
/>
{settingModalVisible && (
<ProfilerSettingsModal
columns={columns}
tableId={table?.id || ''}
visible={settingModalVisible}
onVisibilityChange={handleSettingModal}
/>
)}
</>
)}
</Space>
</Col>

View File

@ -199,6 +199,8 @@ export const TeamImportResult = ({
setIsLoading(false);
},
});
} else {
setIsLoading(false);
}
};
@ -207,16 +209,16 @@ export const TeamImportResult = ({
parseCsvFile();
}, [csvImportResult.importResultsCsv]);
if (loading) {
return <Loader />;
}
return (
<Table
bordered
columns={columns}
data-testid="import-result-table"
dataSource={parsedRecords}
loading={{
spinning: loading,
indicator: <Loader size="small" />,
}}
pagination={false}
rowKey="name*"
scroll={{ x: true }}

View File

@ -191,6 +191,8 @@ export const UserImportResult = ({
setIsLoading(false);
},
});
} else {
setIsLoading(false);
}
};
@ -199,6 +201,10 @@ export const UserImportResult = ({
parseCsvFile();
}, [csvImportResult.importResultsCsv]);
if (loading) {
return <Loader />;
}
return (
<Table
bordered
@ -206,10 +212,6 @@ export const UserImportResult = ({
columns={columns}
data-testid="import-result-table"
dataSource={parsedRecords}
loading={{
spinning: loading,
indicator: <Loader size="small" />,
}}
pagination={false}
rowKey="name*"
scroll={{ x: true }}

View File

@ -252,23 +252,23 @@ const UserListV1: FC<UserListV1Props> = ({
</Col>
<Col span={24}>
<Table
bordered
className="user-list-table"
columns={columns}
data-testid="user-list-table"
dataSource={data}
loading={{
spinning: isDataLoading,
indicator: <Loader size="small" />,
}}
locale={{
emptyText: <FilterTablePlaceHolder />,
}}
pagination={false}
rowKey="id"
size="small"
/>
{isDataLoading ? (
<Loader />
) : (
<Table
bordered
className="user-list-table"
columns={columns}
data-testid="user-list-table"
dataSource={data}
locale={{
emptyText: <FilterTablePlaceHolder />,
}}
pagination={false}
rowKey="id"
size="small"
/>
)}
</Col>
<Col span={24}>
{paging.total > PAGE_SIZE_MEDIUM && (

View File

@ -185,37 +185,37 @@ const AlertsPage = () => {
</div>
</Col>
<Col span={24}>
<Table
bordered
columns={columns}
dataSource={alerts}
loading={{
spinning: loading,
indicator: <Loader size="small" />,
}}
locale={{
emptyText: !loading && (
<ErrorPlaceHolder
permission
className="p-y-md"
doc={ALERTS_DOCS}
heading={t('label.alert')}
type={ERROR_PLACEHOLDER_TYPE.CREATE}
onClick={() =>
history.push(
getSettingPath(
GlobalSettingsMenuCategory.NOTIFICATIONS,
GlobalSettingOptions.ADD_ALERTS
{loading ? (
<Loader />
) : (
<Table
bordered
columns={columns}
dataSource={alerts}
locale={{
emptyText: !loading && (
<ErrorPlaceHolder
permission
className="p-y-md"
doc={ALERTS_DOCS}
heading={t('label.alert')}
type={ERROR_PLACEHOLDER_TYPE.CREATE}
onClick={() =>
history.push(
getSettingPath(
GlobalSettingsMenuCategory.NOTIFICATIONS,
GlobalSettingOptions.ADD_ALERTS
)
)
)
}
/>
),
}}
pagination={false}
rowKey="id"
size="middle"
/>
}
/>
),
}}
pagination={false}
rowKey="id"
size="middle"
/>
)}
</Col>
<Col span={24}>
{Boolean(

View File

@ -201,19 +201,22 @@ const KPIList = ({ viewKPIPermission }: { viewKPIPermission: boolean }) => {
return (
<>
<Col span={24}>
<Table
bordered
columns={columns}
data-testid="kpi-table"
dataSource={kpiList}
loading={{ spinning: isLoading, indicator: <Loader /> }}
locale={{
emptyText: noDataPlaceHolder,
}}
pagination={false}
rowKey="name"
size="small"
/>
{isLoading ? (
<Loader />
) : (
<Table
bordered
columns={columns}
data-testid="kpi-table"
dataSource={kpiList}
locale={{
emptyText: noDataPlaceHolder,
}}
pagination={false}
rowKey="name"
size="small"
/>
)}
</Col>
{kpiList.length > PAGE_SIZE_MEDIUM && (
<Col span={24}>

View File

@ -144,7 +144,9 @@ function SchemaTablesTab({
</Row>
</Col>
<Col span={24}>
{isEmpty(tableData) && !showDeletedTables && !tableDataLoading ? (
{tableDataLoading ? (
<Loader />
) : isEmpty(tableData) && !showDeletedTables ? (
<ErrorPlaceHolder
className="mt-0-important"
type={ERROR_PLACEHOLDER_TYPE.NO_DATA}
@ -155,10 +157,6 @@ function SchemaTablesTab({
columns={tableColumn}
data-testid="databaseSchema-tables"
dataSource={tableData.data}
loading={{
spinning: tableDataLoading,
indicator: <Loader size="small" />,
}}
locale={{
emptyText: <ErrorPlaceHolder />,
}}

View File

@ -289,23 +289,23 @@ function ServiceMainTabContent({
</Row>
</Col>
<Col data-testid="table-container" span={24}>
<Table
bordered
columns={tableColumn}
components={tableComponent}
data-testid="service-children-table"
dataSource={data}
loading={{
spinning: isServiceLoading,
indicator: <Loader size="small" />,
}}
locale={{
emptyText: <ErrorPlaceHolder className="m-y-md" />,
}}
pagination={false}
rowKey="id"
size="small"
/>
{isServiceLoading ? (
<Loader />
) : (
<Table
bordered
columns={tableColumn}
components={tableComponent}
data-testid="service-children-table"
dataSource={data}
locale={{
emptyText: <ErrorPlaceHolder className="m-y-md" />,
}}
pagination={false}
rowKey="id"
size="small"
/>
)}
{Boolean(!isNil(paging.after) || !isNil(paging.before)) &&
!isEmpty(data) && (
<NextPrevious

View File

@ -17,7 +17,6 @@ import {
Col,
Row,
Space,
Spin,
Switch,
Table,
Tooltip,
@ -1139,23 +1138,21 @@ const TagsPage = () => {
</Space>
</div>
<Table
bordered
className={isClassificationDisabled ? 'opacity-60' : ''}
columns={tableColumn}
data-testid="table"
dataSource={tags}
loading={{
indicator: (
<Spin indicator={<Loader size="small" />} size="small" />
),
spinning: isTagsLoading,
}}
pagination={false}
rowClassName={(record) => (record.disabled ? 'opacity-60' : '')}
rowKey="id"
size="small"
/>
{isTagsLoading ? (
<Loader />
) : (
<Table
bordered
className={isClassificationDisabled ? 'opacity-60' : ''}
columns={tableColumn}
data-testid="table"
dataSource={tags}
pagination={false}
rowClassName={(record) => (record.disabled ? 'opacity-60' : '')}
rowKey="id"
size="small"
/>
)}
{paging.total > PAGE_SIZE && (
<NextPrevious
currentPage={currentPage}