yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-31 12:39:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix the errorPlaceholder visible when component is in loading state (#11387)

Browse Source 
* fix the errorPlaceholder visible when component is in loading state

* changes as per commets
This commit is contained in:
Ashish Gupta 2023-05-04 12:09:22 +05:30 committed by GitHub
parent f374bb38b4
commit f2a62dd60f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 651 additions and 558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx
View File

@ -11,6 +11,7 @@
* limitations under the License.
*/
import { PlusOutlined } from '@ant-design/icons';
import {
Button,
Card,
@ -21,6 +22,8 @@ import {
Typography,
} from 'antd';
import { AxiosError } from 'axios';
import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
import { ERROR_PLACEHOLDER_TYPE, SIZE } from 'enums/common.enum';
import { isEmpty, isUndefined } from 'lodash';
import React, { FC, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -276,27 +279,27 @@ const KPIChart: FC<Props> = ({ chartFilter, kpiList }) => {
<Space
className="w-full justify-center items-center"
direction="vertical">
<Typography.Text>
{t('message.no-kpi-available-add-new-one')}
</Typography.Text>
<ErrorPlaceHolder
button={
<AntdTooltip
title={
isAdminUser
? t('label.add-entity', {
entity: t('label.kpi-uppercase'),
})
: t('message.no-permission-for-action')
}>
title={!isAdminUser && t('message.no-permission-for-action')}>
<Button
className="tw-border-primary tw-text-primary"
disabled={!isAdminUser}
type="default"
ghost
icon={<PlusOutlined />}
type="primary"
onClick={handleAddKpi}>
{t('label.add-entity', {
entity: t('label.kpi-uppercase'),
})}
</Button>
</AntdTooltip>
}
className="p-y-lg"
permission={isAdminUser}
size={SIZE.MEDIUM}
type={ERROR_PLACEHOLDER_TYPE.ASSIGN}>
{t('message.no-kpi-available-add-new-one')}
</ErrorPlaceHolder>
</Space>
)}
</Card>

42
openmetadata-ui/src/main/resources/ui/src/components/TestSuitePipelineTab/TestSuitePipelineTab.component.tsx
View File

@ -11,11 +11,14 @@
* limitations under the License.
*/
import { CheckOutlined } from '@ant-design/icons';
import { CheckOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Col, Popover, Row, Table, Tooltip } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { AxiosError } from 'axios';
import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
import cronstrue from 'cronstrue';
import { ERROR_PLACEHOLDER_TYPE } from 'enums/common.enum';
import { isEmpty } from 'lodash';
import React, { Fragment, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory, useLocation, useParams } from 'react-router-dom';
@ -550,13 +553,44 @@ const TestSuitePipelineTab = () => {
currTriggerId,
]);
const errorPlaceholder = useMemo(
() => (
<ErrorPlaceHolder
button={
<Button
ghost
className="p-x-lg"
data-testid="add-placeholder-button"
icon={<PlusOutlined />}
type="primary"
onClick={() => {
history.push(getTestSuiteIngestionPath(testSuiteFQN));
}}>
{t('label.add')}
</Button>
}
className="mt-24"
heading={t('label.pipeline')}
permission={createPermission}
type={ERROR_PLACEHOLDER_TYPE.ASSIGN}
/>
),
[testSuiteFQN]
);
if (isLoading || isFetchingStatus) {
return <Loader />;
}
return !isAirflowAvailable ? (
<ErrorPlaceHolderIngestion />
) : (
if (!isAirflowAvailable) {
return <ErrorPlaceHolderIngestion />;
}
if (isEmpty(testSuitePipelines)) {
return errorPlaceholder;
}
return (
<TestCaseCommonTabContainer
buttonName={t('label.add-entity', {
entity: t('label.ingestion'),

4
openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx
View File

@ -159,7 +159,7 @@ const AlertsPage = () => {
[]
);
if (isEmpty(alerts)) {
if (isEmpty(alerts) && !loading) {
return (
<ErrorPlaceHolder
permission
@ -200,7 +200,7 @@ const AlertsPage = () => {
bordered
columns={columns}
dataSource={alerts}
loading={{ spinning: loading, indicator: <Loader /> }}
loading={{ spinning: loading, indicator: <Loader size="small" /> }}
pagination={false}
rowKey="id"
size="middle"

2
openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
View File

@ -188,7 +188,7 @@ const KPIList = () => {
if (isEmpty(kpiList)) {
return (
<div className="mt-24 w-full">
<div className="m-t-lg w-full">
<EmptyGraphPlaceholder />
</div>
);

29
openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
View File

@ -331,6 +331,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
entity: t('label.database-schema'),
})
);
setError(errMsg);
showErrorToast(errMsg);
})
@ -638,7 +639,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
const getSchemaTableList = () => {
return (
<Col span={24}>
{isEmpty(tableData) && !showDeletedTables ? (
{isEmpty(tableData) && !showDeletedTables && !tableDataLoading ? (
<ErrorPlaceHolder
className="mt-0-important"
type={ERROR_PLACEHOLDER_TYPE.NO_DATA}
@ -650,10 +651,6 @@ const DatabaseSchemaPage: FunctionComponent = () => {
columns={tableColumn}
data-testid="databaseSchema-tables"
dataSource={tableData}
loading={{
spinning: tableDataLoading,
indicator: <Loader size="small" />,
}}
locale={{
emptyText: <FilterTablePlaceHolder />,
}}
@ -786,16 +783,20 @@ const DatabaseSchemaPage: FunctionComponent = () => {
appState.inPageSearchText = '';
}, []);
if (isLoading) {
return <Loader />;
}
if (error) {
return (
<Fragment>
{isLoading ? (
<Loader />
) : error ? (
<ErrorPlaceHolder>
<p data-testid="error-message">{error}</p>
</ErrorPlaceHolder>
) : (
<>
);
}
return (
<Fragment>
{databaseSchemaPermission.ViewAll ||
databaseSchemaPermission.ViewBasic ? (
<PageContainerV1>
@ -864,6 +865,9 @@ const DatabaseSchemaPage: FunctionComponent = () => {
<Col className="p-y-md" span={24}>
{activeTab === 1 && (
<Card className="h-full">
{tableDataLoading ? (
<Loader />
) : (
<Row gutter={[16, 16]}>
<Col data-testid="description-container" span={24}>
<Description
@ -888,6 +892,7 @@ const DatabaseSchemaPage: FunctionComponent = () => {
</Col>
{getSchemaTableList()}
</Row>
)}
</Card>
)}
{activeTab === 2 && (
@ -941,8 +946,6 @@ const DatabaseSchemaPage: FunctionComponent = () => {
type={ERROR_PLACEHOLDER_TYPE.PERMISSION}
/>
)}
</>
)}
</Fragment>
);
};

15
openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx
View File

@ -68,7 +68,7 @@ const TestSuitePage = () => {
const { isAdminUser } = useAuth();
const { isAuthDisabled } = useAuthContext();
const [testSuites, setTestSuites] = useState<Array<TestSuite>>([]);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [testSuitePage, setTestSuitePage] = useState(INITIAL_PAGING_VALUE);
const [testSuitePaging, setTestSuitePaging] = useState<Paging>(pagingObject);
const [selectedTestSuite, setSelectedTestSuite] = useState<TestSuite>();
@ -85,6 +85,7 @@ const TestSuitePage = () => {
}, [permissions]);
const handleShowDeleted = (checked: boolean) => {
setIsLoading(true);
setShowDeleted(checked);
};
@ -232,11 +233,7 @@ const TestSuitePage = () => {
[createPermission]
);
if (isLoading) {
return <Loader />;
}
if (isEmpty(testSuites) && !showDeleted) {
if (isEmpty(testSuites) && !showDeleted && !isLoading) {
return <PageContainerV1>{errorPlaceHolder}</PageContainerV1>;
}
@ -284,7 +281,10 @@ const TestSuitePage = () => {
columns={columns}
data-testid="test-suite-table"
dataSource={testSuites}
loading={{ spinning: isLoading, indicator: <Loader /> }}
loading={{
spinning: isLoading,
indicator: <Loader size="small" />,
}}
locale={{
emptyText: <FilterTablePlaceHolder />,
}}
@ -306,6 +306,7 @@ const TestSuitePage = () => {
)}
</Row>
<DeleteWidgetModal
isRecursiveDelete
afterDeleteAction={fetchTestSuites}
allowSoftDelete={!showDeleted}
entityId={selectedTestSuite?.id || ''}

98
openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
View File

@ -770,15 +770,65 @@ const DatabaseDetails: FunctionComponent = () => {
setIsEditable(false);
};
const databaseTable = useMemo(() => {
if (schemaDataLoading) {
return <Loader />;
} else if (!isEmpty(schemaData)) {
return (
<Col span={24}>
<Table
bordered
className="table-shadow"
columns={tableColumn}
data-testid="database-databaseSchemas"
dataSource={schemaData}
loading={{
spinning: schemaDataLoading,
indicator: <Loader size="small" />,
}}
pagination={false}
rowKey="id"
size="small"
/>
{Boolean(
!isNil(databaseSchemaPaging.after) ||
!isNil(databaseSchemaPaging.before)
) && (
<NextPrevious
currentPage={currentPage}
pageSize={PAGE_SIZE}
paging={databaseSchemaPaging}
pagingHandler={databaseSchemaPagingHandler}
totalCount={databaseSchemaPaging.total}
/>
)}
</Col>
);
} else {
return <ErrorPlaceHolder />;
}
}, [
schemaDataLoading,
schemaData,
tableColumn,
databaseSchemaPaging,
currentPage,
databaseSchemaPagingHandler,
]);
if (isLoading) {
return <Loader />;
}
if (error) {
return (
<>
{isLoading ? (
<Loader />
) : error ? (
<ErrorPlaceHolder>
<p data-testid="error-message">{error}</p>
</ErrorPlaceHolder>
) : (
);
}
return (
<>
{databasePermission.ViewAll || databasePermission.ViewBasic ? (
<PageContainerV1>
@ -825,11 +875,7 @@ const DatabaseDetails: FunctionComponent = () => {
</Col>
<Col className="m-t-xs" span={24}>
<Space
wrap
align="center"
data-testid="extrainfo"
size={4}>
<Space wrap align="center" data-testid="extrainfo" size={4}>
{extraInfo.map((info, index) => (
<span
className="tw-flex tw-items-center"
@ -939,34 +985,8 @@ const DatabaseDetails: FunctionComponent = () => {
onThreadLinkSelect={onThreadLinkSelect}
/>
</Col>
<Col span={24}>
<Table
bordered
className="table-shadow"
columns={tableColumn}
data-testid="database-databaseSchemas"
dataSource={schemaData}
loading={{
spinning: schemaDataLoading,
indicator: <Loader size="small" />,
}}
pagination={false}
rowKey="id"
size="small"
/>
{Boolean(
!isNil(databaseSchemaPaging.after) ||
!isNil(databaseSchemaPaging.before)
) && (
<NextPrevious
currentPage={currentPage}
pageSize={PAGE_SIZE}
paging={databaseSchemaPaging}
pagingHandler={databaseSchemaPagingHandler}
totalCount={databaseSchemaPaging.total}
/>
)}
</Col>
{databaseTable}
</Row>
</Card>
)}
@ -1019,8 +1039,6 @@ const DatabaseDetails: FunctionComponent = () => {
<ErrorPlaceHolder type={ERROR_PLACEHOLDER_TYPE.PERMISSION} />
)}
</>
)}
</>
);
};

286
openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
View File

@ -159,6 +159,7 @@ const ServicePage: FunctionComponent = () => {
const [serviceDetails, setServiceDetails] = useState<ServicesType>();
const [data, setData] = useState<Array<ServicePageData>>([]);
const [isLoading, setIsLoading] = useState(!isOpenMetadataService);
const [isServiceLoading, setIsServiceLoading] = useState(true);
const [dataModel, setDataModel] = useState<Array<ServicePageData>>([]);
const [dataModelPaging, setDataModelPaging] = useState<Paging>(pagingObject);
const [paging, setPaging] = useState<Paging>(pagingObject);
@ -230,6 +231,23 @@ const ServicePage: FunctionComponent = () => {
},
];
const isTestingDisabled = useMemo(
() =>
!servicePermission.EditAll ||
(serviceCategory === ServiceCategory.METADATA_SERVICES &&
serviceFQN === OPEN_METADATA) ||
isUndefined(connectionDetails),
[servicePermission, serviceCategory, serviceFQN, connectionDetails]
);
const goToEditConnection = () => {
history.push(getEditConnectionPath(serviceName || '', serviceFQN || ''));
};
const handleDelete = () => {
setDeleteWidgetVisible(true);
};
const activeTabHandler = (tabValue: number) => {
setActiveTab(tabValue);
const currentTabIndex = tabValue - 1;
@ -416,7 +434,7 @@ const ServicePage: FunctionComponent = () => {
};
const fetchDatabases = async (paging?: PagingWithoutTotal) => {
setIsLoading(true);
setIsServiceLoading(true);
try {
const { data, paging: resPaging } = await getDatabases(
serviceFQN,
@ -431,12 +449,12 @@ const ServicePage: FunctionComponent = () => {
} catch (error) {
showErrorToast(error as AxiosError);
} finally {
setIsLoading(false);
setIsServiceLoading(false);
}
};
const fetchTopics = async (paging?: PagingWithoutTotal) => {
setIsLoading(true);
setIsServiceLoading(true);
try {
const { data, paging: resPaging } = await getTopics(
serviceFQN,
@ -448,12 +466,12 @@ const ServicePage: FunctionComponent = () => {
} catch (error) {
showErrorToast(error as AxiosError);
} finally {
setIsLoading(false);
setIsServiceLoading(false);
}
};
const fetchDashboards = async (paging?: PagingWithoutTotal) => {
setIsLoading(true);
setIsServiceLoading(true);
try {
const { data, paging: resPaging } = await getDashboards(
serviceFQN,
@ -465,12 +483,12 @@ const ServicePage: FunctionComponent = () => {
} catch (error) {
showErrorToast(error as AxiosError);
} finally {
setIsLoading(false);
setIsServiceLoading(false);
}
};
const fetchDashboardsDataModel = async (paging?: PagingWithoutTotal) => {
setIsLoading(true);
setIsServiceLoading(true);
try {
const { data, paging: resPaging } = await getDataModels(
serviceFQN,
@ -482,12 +500,12 @@ const ServicePage: FunctionComponent = () => {
} catch (error) {
showErrorToast(error as AxiosError);
} finally {
setIsLoading(false);
setIsServiceLoading(false);
}
};
const fetchPipeLines = async (paging?: PagingWithoutTotal) => {
setIsLoading(true);
setIsServiceLoading(true);
try {
const { data, paging: resPaging } = await getPipelines(
serviceFQN,
@ -499,12 +517,12 @@ const ServicePage: FunctionComponent = () => {
} catch (error) {
showErrorToast(error as AxiosError);
} finally {
setIsLoading(false);
setIsServiceLoading(false);
}
};
const fetchMlModal = async (paging?: PagingWithoutTotal) => {
setIsLoading(true);
setIsServiceLoading(true);
try {
const { data, paging: resPaging } = await getMlModels(
serviceFQN,
@ -516,12 +534,12 @@ const ServicePage: FunctionComponent = () => {
} catch (error) {
showErrorToast(error as AxiosError);
} finally {
setIsLoading(false);
setIsServiceLoading(false);
}
};
const fetchContainers = async (paging?: PagingWithoutTotal) => {
setIsLoading(true);
setIsServiceLoading(true);
try {
const response = await getContainers({
service: serviceFQN,
@ -536,7 +554,7 @@ const ServicePage: FunctionComponent = () => {
setData([]);
setPaging(pagingObject);
} finally {
setIsLoading(false);
setIsServiceLoading(false);
}
};
@ -836,7 +854,7 @@ const ServicePage: FunctionComponent = () => {
setCurrentPage(activePage ?? 1);
};
const getIngestionTab = () => {
const ingestionTab = useMemo(() => {
if (!isAirflowAvailable) {
return <ErrorPlaceHolderIngestion />;
} else if (isUndefined(airflowEndpoint) || isUndefined(serviceDetails)) {
@ -863,11 +881,90 @@ const ServicePage: FunctionComponent = () => {
</div>
);
}
};
}, [
isAirflowAvailable,
airflowEndpoint,
serviceDetails,
deleteIngestionById,
deployIngestion,
handleEnableDisableIngestion,
ingestions,
ingestionPaging,
servicePermission,
serviceName,
serviceList,
serviceFQN,
triggerIngestionById,
getAllIngestionWorkflows,
]);
const getDataModalTab = () => (
<DataModelTable data={dataModel} isLoading={isLoading} />
const dataModalTab = useMemo(
() => <DataModelTable data={dataModel} isLoading={isLoading} />,
[dataModel, isLoading]
);
const testConnectionTab = useMemo(() => {
return (
<>
<Space className="w-full my-4 justify-end">
<Tooltip
title={
servicePermission.EditAll
? t('label.edit-entity', {
entity: t('label.connection'),
})
: t('message.no-permission-for-action')
}>
<Button
ghost
data-testid="edit-connection-button"
disabled={!servicePermission.EditAll}
type="primary"
onClick={goToEditConnection}>
{t('label.edit-entity', {
entity: t('label.connection'),
})}
</Button>
</Tooltip>
{allowTestConn && isAirflowAvailable && (
<Tooltip
title={
servicePermission.EditAll
? t('label.test-entity', {
entity: t('label.connection'),
})
: t('message.no-permission-for-action')
}>
<TestConnection
connectionType={serviceDetails?.serviceType ?? ''}
formData={connectionDetails as ConfigData}
isTestingDisabled={isTestingDisabled}
serviceCategory={serviceCategory as ServiceCategory}
serviceName={serviceDetails?.name}
// validation is not required as we have all the data available and not in edit mode
shouldValidateForm={false}
showDetails={false}
/>
</Tooltip>
)}
</Space>
<ServiceConnectionDetails
connectionDetails={connectionDetails || {}}
serviceCategory={serviceCategory}
serviceFQN={serviceDetails?.serviceType || ''}
/>
</>
);
}, [
servicePermission.EditAll,
allowTestConn,
isAirflowAvailable,
serviceDetails,
connectionDetails,
isTestingDisabled,
serviceCategory,
]);
useEffect(() => {
if (
servicePageTabs(getCountLabel(serviceName))[activeTab - 1].path !== tab
@ -876,18 +973,6 @@ const ServicePage: FunctionComponent = () => {
}
}, [tab]);
const goToEditConnection = () => {
history.push(getEditConnectionPath(serviceName || '', serviceFQN || ''));
};
const handleEditConnection = () => {
goToEditConnection();
};
const handleDelete = () => {
setDeleteWidgetVisible(true);
};
useEffect(() => {
if (!isOpenMetadataService) {
fetchServicePermission();
@ -960,18 +1045,53 @@ const ServicePage: FunctionComponent = () => {
];
}, [serviceName]);
const entityServiceTab = useMemo(() => {
if (isServiceLoading) {
return <Loader />;
} else if (!isEmpty(data) && !isServiceLoading) {
return (
<div data-testid="table-container">
<Table
bordered
className="mt-4 table-shadow"
columns={tableColumn}
components={tableComponent}
data-testid="service-children-table"
dataSource={data}
pagination={false}
rowKey="id"
size="small"
/>
{Boolean(!isNil(paging.after) || !isNil(paging.before)) && (
<NextPrevious
currentPage={currentPage}
pageSize={PAGE_SIZE}
paging={paging}
pagingHandler={pagingHandler}
totalCount={paging.total}
/>
)}
</div>
);
} else {
return <ErrorPlaceHolder />;
}
}, [
isServiceLoading,
data,
paging,
tableColumn,
tableComponent,
currentPage,
pagingHandler,
]);
useEffect(() => {
if (isAirflowAvailable && !isOpenMetadataService) {
getAllIngestionWorkflows();
}
}, [isAirflowAvailable]);
const isTestingDisabled =
!servicePermission.EditAll ||
(serviceCategory === ServiceCategory.METADATA_SERVICES &&
serviceFQN === OPEN_METADATA) ||
isUndefined(connectionDetails);
if (isLoading) {
return (
<PageContainerV1>
@ -1077,96 +1197,10 @@ const ServicePage: FunctionComponent = () => {
tabs={tabs}
/>
<Col span={24}>
{activeTab === 1 &&
(isEmpty(data) ? (
<ErrorPlaceHolder />
) : (
<div data-testid="table-container">
<Table
bordered
className="mt-4 table-shadow"
columns={tableColumn}
components={tableComponent}
data-testid="service-children-table"
dataSource={data}
loading={{
spinning: isLoading,
indicator: <Loader size="small" />,
}}
pagination={false}
rowKey="id"
size="small"
/>
{Boolean(
!isNil(paging.after) || !isNil(paging.before)
) && (
<NextPrevious
currentPage={currentPage}
pageSize={PAGE_SIZE}
paging={paging}
pagingHandler={pagingHandler}
totalCount={paging.total}
/>
)}
</div>
))}
{activeTab === 4 && getDataModalTab()}
{activeTab === 2 && getIngestionTab()}
{activeTab === 3 && (
<>
<Space className="w-full my-4 justify-end">
<Tooltip
title={
servicePermission.EditAll
? t('label.edit-entity', {
entity: t('label.connection'),
})
: t('message.no-permission-for-action')
}>
<Button
ghost
data-testid="edit-connection-button"
disabled={!servicePermission.EditAll}
type="primary"
onClick={handleEditConnection}>
{t('label.edit-entity', {
entity: t('label.connection'),
})}
</Button>
</Tooltip>
{allowTestConn && isAirflowAvailable && (
<Tooltip
title={
servicePermission.EditAll
? t('label.test-entity', {
entity: t('label.connection'),
})
: t('message.no-permission-for-action')
}>
<TestConnection
connectionType={serviceDetails?.serviceType ?? ''}
formData={connectionDetails as ConfigData}
isTestingDisabled={isTestingDisabled}
serviceCategory={
serviceCategory as ServiceCategory
}
serviceName={serviceDetails?.name}
// validation is not required as we have all the data available and not in edit mode
shouldValidateForm={false}
showDetails={false}
/>
</Tooltip>
)}
</Space>
<ServiceConnectionDetails
connectionDetails={connectionDetails || {}}
serviceCategory={serviceCategory}
serviceFQN={serviceDetails?.serviceType || ''}
/>
</>
)}
{activeTab === 1 && entityServiceTab}
{activeTab === 4 && dataModalTab}
{activeTab === 2 && ingestionTab}
{activeTab === 3 && testConnectionTab}
</Col>
</Col>
</Row>