yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-10 07:53:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): service, database and database schema page bugs (#12673)

Browse Source 
* fixed bugs on service details page

* fixed bugs on database details page
refactored database details page code

* fixed bugs on database schema page

* reverted the changes for code refactoring on dataset details page
This commit is contained in:
Aniket Katkar 2023-07-31 21:15:32 +05:30 committed by GitHub
parent 43fdf78d73
commit f215a4424f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 138 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
openmetadata-ui/src/main/resources/ui/src/pages/DatabaseDetailsPage/DatabaseDetailsPage.tsx
View File

@ -40,7 +40,7 @@ import { compare, Operation } from 'fast-json-patch';
import { LabelType } from 'generated/entity/data/table'; import { LabelType } from 'generated/entity/data/table';
import { Include } from 'generated/type/include'; import { Include } from 'generated/type/include';
import { State, TagSource } from 'generated/type/tagLabel'; import { State, TagSource } from 'generated/type/tagLabel';
import { isNil, isUndefined } from 'lodash'; import { isEmpty, isNil, isUndefined } from 'lodash';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { EntityTags } from 'Models'; import { EntityTags } from 'Models';
import React, { import React, {
@ -61,6 +61,7 @@ import {
} from 'rest/databaseAPI'; } from 'rest/databaseAPI';
import { getFeedCount, postThread } from 'rest/feedsAPI'; import { getFeedCount, postThread } from 'rest/feedsAPI';
import { handleDataAssetAfterDeleteAction } from 'utils/Assets/AssetsUtils'; import { handleDataAssetAfterDeleteAction } from 'utils/Assets/AssetsUtils';
import { getEntityMissingError } from 'utils/CommonUtils';
import { default as appState } from '../../AppState'; import { default as appState } from '../../AppState';
import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants'; import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
import { import {
@ -87,7 +88,6 @@ import {
} from '../../utils/EntityUtils'; } from '../../utils/EntityUtils';
import { getEntityFieldThreadCounts } from '../../utils/FeedUtils'; import { getEntityFieldThreadCounts } from '../../utils/FeedUtils';
import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils'; import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils';
import { getErrorText } from '../../utils/StringsUtils';
import { import {
getTagsWithoutTier, getTagsWithoutTier,
getTierTags, getTierTags,
@ -122,7 +122,6 @@ const DatabaseDetails: FunctionComponent = () => {
const [databaseSchemaInstanceCount, setSchemaInstanceCount] = const [databaseSchemaInstanceCount, setSchemaInstanceCount] =
useState<number>(0); useState<number>(0);
const [error, setError] = useState('');
const [feedCount, setFeedCount] = useState<number>(0); const [feedCount, setFeedCount] = useState<number>(0);
const [entityFieldThreadCount, setEntityFieldThreadCount] = useState< const [entityFieldThreadCount, setEntityFieldThreadCount] = useState<
EntityFieldThreadCount[] EntityFieldThreadCount[]
@ -149,7 +148,7 @@ const DatabaseDetails: FunctionComponent = () => {
); );
setDatabasePermission(response); setDatabasePermission(response);
} catch (error) { } catch (error) {
showErrorToast(error as AxiosError); // Error
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
@ -177,13 +176,8 @@ const DatabaseDetails: FunctionComponent = () => {
} }
resolve(); resolve();
}) })
.catch((err: AxiosError) => { .catch(() => {
showErrorToast( // Error
err,
t('server.entity-fetch-error', {
entity: t('label.database schema'),
})
);
reject(); reject();
}) })
@ -218,8 +212,8 @@ const DatabaseDetails: FunctionComponent = () => {
throw t('server.unexpected-response'); throw t('server.unexpected-response');
} }
}) })
.catch((err: AxiosError) => { .catch(() => {
showErrorToast(err, t('server.entity-feed-fetch-error')); // Error
}); });
}; };
@ -236,19 +230,10 @@ const DatabaseDetails: FunctionComponent = () => {
setServiceType(serviceType); setServiceType(serviceType);
setShowDeletedSchemas(res.deleted ?? false); setShowDeletedSchemas(res.deleted ?? false);
fetchDatabaseSchemasAndDBTModels(); fetchDatabaseSchemasAndDBTModels();
} else {
throw t('server.unexpected-response');
} }
}) })
.catch((err: AxiosError) => { .catch(() => {
const errMsg = getErrorText( // Error
err,
t('server.entity-fetch-error', {
entity: t('label.database'),
})
);
setError(errMsg);
showErrorToast(errMsg);
}) })
.finally(() => { .finally(() => {
setIsLoading(false); setIsLoading(false);
@ -735,14 +720,6 @@ const DatabaseDetails: FunctionComponent = () => {
return <Loader />; return <Loader />;
} }
if (error) {
return (
<ErrorPlaceHolder>
<p data-testid="error-message">{error}</p>
</ErrorPlaceHolder>
);
}
if (!(databasePermission.ViewAll || databasePermission.ViewBasic)) { if (!(databasePermission.ViewAll || databasePermission.ViewBasic)) {
return <ErrorPlaceHolder type={ERROR_PLACEHOLDER_TYPE.PERMISSION} />; return <ErrorPlaceHolder type={ERROR_PLACEHOLDER_TYPE.PERMISSION} />;
} }
@ -753,42 +730,48 @@ const DatabaseDetails: FunctionComponent = () => {
pageTitle={t('label.entity-detail-plural', { pageTitle={t('label.entity-detail-plural', {
entity: getEntityName(database), entity: getEntityName(database),
})}> })}>
<Row gutter={[0, 12]}> {isEmpty(database) ? (
<Col className="p-x-lg" span={24}> <ErrorPlaceHolder className="m-0">
<DataAssetsHeader {getEntityMissingError(EntityType.DATABASE, databaseFQN)}
isRecursiveDelete </ErrorPlaceHolder>
afterDeleteAction={handleDataAssetAfterDeleteAction} ) : (
dataAsset={database} <Row gutter={[0, 12]}>
entityType={EntityType.DATABASE} <Col className="p-x-lg" span={24}>
permissions={databasePermission} <DataAssetsHeader
onDisplayNameUpdate={handleUpdateDisplayName} isRecursiveDelete
onOwnerUpdate={handleUpdateOwner} afterDeleteAction={handleDataAssetAfterDeleteAction}
onRestoreDataAsset={handleRestoreDatabase} dataAsset={database}
onTierUpdate={handleUpdateTier} entityType={EntityType.DATABASE}
/> permissions={databasePermission}
</Col> onDisplayNameUpdate={handleUpdateDisplayName}
<Col span={24}> onOwnerUpdate={handleUpdateOwner}
<Tabs onRestoreDataAsset={handleRestoreDatabase}
activeKey={activeTab ?? EntityTabs.SCHEMA} onTierUpdate={handleUpdateTier}
className="entity-details-page-tabs" />
data-testid="tabs" </Col>
items={tabs} <Col span={24}>
onChange={activeTabHandler} <Tabs
/> activeKey={activeTab ?? EntityTabs.SCHEMA}
</Col> className="entity-details-page-tabs"
data-testid="tabs"
items={tabs}
onChange={activeTabHandler}
/>
</Col>
{threadLink ? ( {threadLink ? (
<ActivityThreadPanel <ActivityThreadPanel
createThread={createThread} createThread={createThread}
deletePostHandler={deleteFeed} deletePostHandler={deleteFeed}
open={Boolean(threadLink)} open={Boolean(threadLink)}
postFeedHandler={postFeed} postFeedHandler={postFeed}
threadLink={threadLink} threadLink={threadLink}
updateThreadHandler={updateFeed} updateThreadHandler={updateFeed}
onCancel={onThreadPanelClose} onCancel={onThreadPanelClose}
/> />
) : null} ) : null}
</Row> </Row>
)}
</PageLayoutV1> </PageLayoutV1>
); );
}; };

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

@ -36,7 +36,7 @@ import { compare, Operation } from 'fast-json-patch';
import { ThreadType } from 'generated/entity/feed/thread'; import { ThreadType } from 'generated/entity/feed/thread';
import { Include } from 'generated/type/include'; import { Include } from 'generated/type/include';
import { LabelType, State, TagLabel, TagSource } from 'generated/type/tagLabel'; import { LabelType, State, TagLabel, TagSource } from 'generated/type/tagLabel';
import { isString, isUndefined } from 'lodash'; import { isEmpty, isString, isUndefined } from 'lodash';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { EntityTags, PagingResponse } from 'Models'; import { EntityTags, PagingResponse } from 'Models';
import React, { import React, {
@ -57,6 +57,7 @@ import {
import { getFeedCount, postThread } from 'rest/feedsAPI'; import { getFeedCount, postThread } from 'rest/feedsAPI';
import { getTableList, TableListParams } from 'rest/tableAPI'; import { getTableList, TableListParams } from 'rest/tableAPI';
import { handleDataAssetAfterDeleteAction } from 'utils/Assets/AssetsUtils'; import { handleDataAssetAfterDeleteAction } from 'utils/Assets/AssetsUtils';
import { getEntityMissingError } from 'utils/CommonUtils';
import { default as appState } from '../../AppState'; import { default as appState } from '../../AppState';
import { import {
getDatabaseSchemaDetailsPath, getDatabaseSchemaDetailsPath,
@ -577,54 +578,60 @@ const DatabaseSchemaPage: FunctionComponent = () => {
pageTitle={t('label.entity-detail-plural', { pageTitle={t('label.entity-detail-plural', {
entity: getEntityName(databaseSchema), entity: getEntityName(databaseSchema),
})}> })}>
<Row gutter={[0, 12]}> {isEmpty(databaseSchema) ? (
<Col className="p-x-lg" span={24}> <ErrorPlaceHolder className="m-0">
{isSchemaDetailsLoading ? ( {getEntityMissingError(EntityType.DATABASE_SCHEMA, databaseSchemaFQN)}
<Skeleton </ErrorPlaceHolder>
active ) : (
paragraph={{ <Row gutter={[0, 12]}>
rows: 3, <Col className="p-x-lg" span={24}>
width: ['20%', '80%', '60%'], {isSchemaDetailsLoading ? (
}} <Skeleton
active
paragraph={{
rows: 3,
width: ['20%', '80%', '60%'],
}}
/>
) : (
<DataAssetsHeader
isRecursiveDelete
afterDeleteAction={handleDataAssetAfterDeleteAction}
dataAsset={databaseSchema}
entityType={EntityType.DATABASE_SCHEMA}
permissions={databaseSchemaPermission}
onDisplayNameUpdate={handleUpdateDisplayName}
onOwnerUpdate={handleUpdateOwner}
onRestoreDataAsset={handleRestoreDatabaseSchema}
onTierUpdate={handleUpdateTier}
/>
)}
</Col>
<Col span={24}>
<Tabs
activeKey={activeTab}
className="entity-details-page-tabs"
data-testid="tabs"
items={tabs}
onChange={activeTabHandler}
/> />
) : ( </Col>
<DataAssetsHeader <Col span={24}>
isRecursiveDelete {threadLink ? (
afterDeleteAction={handleDataAssetAfterDeleteAction} <ActivityThreadPanel
dataAsset={databaseSchema} createThread={createThread}
entityType={EntityType.DATABASE_SCHEMA} deletePostHandler={deleteFeed}
permissions={databaseSchemaPermission} open={Boolean(threadLink)}
onDisplayNameUpdate={handleUpdateDisplayName} postFeedHandler={postFeed}
onOwnerUpdate={handleUpdateOwner} threadLink={threadLink}
onRestoreDataAsset={handleRestoreDatabaseSchema} threadType={threadType}
onTierUpdate={handleUpdateTier} updateThreadHandler={updateFeed}
/> onCancel={onThreadPanelClose}
)} />
</Col> ) : null}
<Col span={24}> </Col>
<Tabs </Row>
activeKey={activeTab} )}
className="entity-details-page-tabs"
data-testid="tabs"
items={tabs}
onChange={activeTabHandler}
/>
</Col>
<Col span={24}>
{threadLink ? (
<ActivityThreadPanel
createThread={createThread}
deletePostHandler={deleteFeed}
open={Boolean(threadLink)}
postFeedHandler={postFeed}
threadLink={threadLink}
threadType={threadType}
updateThreadHandler={updateFeed}
onCancel={onThreadPanelClose}
/>
) : null}
</Col>
</Row>
</PageLayoutV1> </PageLayoutV1>
); );
}; };

57
openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx
View File

@ -97,6 +97,8 @@ import { getPipelines } from 'rest/pipelineAPI';
import { getServiceByFQN, patchService } from 'rest/serviceAPI'; import { getServiceByFQN, patchService } from 'rest/serviceAPI';
import { getContainers } from 'rest/storageAPI'; import { getContainers } from 'rest/storageAPI';
import { getTopics } from 'rest/topicsAPI'; import { getTopics } from 'rest/topicsAPI';
import { handleDataAssetAfterDeleteAction } from 'utils/Assets/AssetsUtils';
import { getEntityMissingError } from 'utils/CommonUtils';
import { getEntityName } from 'utils/EntityUtils'; import { getEntityName } from 'utils/EntityUtils';
import { DEFAULT_ENTITY_PERMISSION } from 'utils/PermissionsUtils'; import { DEFAULT_ENTITY_PERMISSION } from 'utils/PermissionsUtils';
import { getEditConnectionPath } from 'utils/RouterUtils'; import { getEditConnectionPath } from 'utils/RouterUtils';
@ -1008,31 +1010,38 @@ const ServiceDetailsPage: FunctionComponent = () => {
pageTitle={t('label.entity-detail-plural', { pageTitle={t('label.entity-detail-plural', {
entity: getEntityName(serviceDetails), entity: getEntityName(serviceDetails),
})}> })}>
<Row data-testid="service-page" gutter={[0, 12]}> {isEmpty(serviceDetails) ? (
<Col className="p-x-lg" span={24}> <ErrorPlaceHolder className="m-0">
<DataAssetsHeader {getEntityMissingError(serviceCategory as string, serviceFQN)}
isRecursiveDelete </ErrorPlaceHolder>
allowSoftDelete={false} ) : (
dataAsset={serviceDetails} <Row data-testid="service-page" gutter={[0, 12]}>
entityType={entityType} <Col className="p-x-lg" span={24}>
permissions={servicePermission} <DataAssetsHeader
onDisplayNameUpdate={handleUpdateDisplayName} isRecursiveDelete
onOwnerUpdate={handleUpdateOwner} afterDeleteAction={handleDataAssetAfterDeleteAction}
onRestoreDataAsset={() => Promise.resolve()} allowSoftDelete={false}
onTierUpdate={handleUpdateTier} dataAsset={serviceDetails}
/> entityType={entityType}
</Col> permissions={servicePermission}
onDisplayNameUpdate={handleUpdateDisplayName}
onOwnerUpdate={handleUpdateOwner}
onRestoreDataAsset={() => Promise.resolve()}
onTierUpdate={handleUpdateTier}
/>
</Col>
<Col span={24}> <Col span={24}>
<Tabs <Tabs
activeKey={activeTab} activeKey={activeTab}
className="entity-details-page-tabs" className="entity-details-page-tabs"
data-testid="tabs" data-testid="tabs"
items={tabs} items={tabs}
onChange={activeTabHandler} onChange={activeTabHandler}
/> />
</Col> </Col>
</Row> </Row>
)}
</PageLayoutV1> </PageLayoutV1>
); );
}; };