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

Fix UI Error Handling on Topic entity page (#3615)

Browse Source
This commit is contained in:
Sachin Chaurasiya 2022-03-24 00:52:54 +05:30 committed by GitHub
parent 9c71754b25
commit 6ce65141a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 257 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
openmetadata-ui/src/main/resources/ui/src/jsons/en.ts
View File

@ -41,6 +41,7 @@ const jsonData = {
'fetch-table-details-error': 'Error while fetching table details!', 'fetch-table-details-error': 'Error while fetching table details!',
'fetch-table-queries-error': 'Error while fetching table queries!', 'fetch-table-queries-error': 'Error while fetching table queries!',
'fetch-tags-error': 'Error while fetching tags!', 'fetch-tags-error': 'Error while fetching tags!',
'fetch-topic-details-error': 'Error while fetching topic details!',
'update-owner-error': 'Error while updating owner', 'update-owner-error': 'Error while updating owner',

2
openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx
View File

@ -585,8 +585,6 @@ const DatasetDetailsPage: FunctionComponent = () => {
}); });
}; };
// TODO: move all the error from below code to en.ts and use handleShowErrorToast to show error.
const followTable = () => { const followTable = () => {
addFollower(tableId, USERId) addFollower(tableId, USERId)
.then((res: AxiosResponse) => { .then((res: AxiosResponse) => {

438
openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx
View File

@ -44,11 +44,6 @@ import {
getTopicDetailsPath, getTopicDetailsPath,
getVersionPath, getVersionPath,
} from '../../constants/constants'; } from '../../constants/constants';
import {
onConfirmText,
onErrorText,
onUpdatedConversastionError,
} from '../../constants/feed.constants';
import { EntityType, TabSpecificField } from '../../enums/entity.enum'; import { EntityType, TabSpecificField } from '../../enums/entity.enum';
import { ServiceCategory } from '../../enums/service.enum'; import { ServiceCategory } from '../../enums/service.enum';
import { CreateThread } from '../../generated/api/feed/createThread'; import { CreateThread } from '../../generated/api/feed/createThread';
@ -56,6 +51,7 @@ import { Topic } from '../../generated/entity/data/topic';
import { User } from '../../generated/entity/teams/user'; import { User } from '../../generated/entity/teams/user';
import { TagLabel } from '../../generated/type/tagLabel'; import { TagLabel } from '../../generated/type/tagLabel';
import useToastContext from '../../hooks/useToastContext'; import useToastContext from '../../hooks/useToastContext';
import jsonData from '../../jsons/en';
import { import {
addToRecentViewed, addToRecentViewed,
getCurrentUserId, getCurrentUserId,
@ -121,13 +117,38 @@ const TopicDetailsPage: FunctionComponent = () => {
} }
}; };
const handleShowErrorToast = (errMessage: string) => {
showToast({
variant: 'error',
body: errMessage,
});
};
const handleShowSuccessToast = (message: string) => {
showToast({
variant: 'success',
body: message,
});
};
const getEntityFeedCount = () => { const getEntityFeedCount = () => {
getFeedCount(getEntityFeedLink(EntityType.TOPIC, topicFQN)).then( getFeedCount(getEntityFeedLink(EntityType.TOPIC, topicFQN))
(res: AxiosResponse) => { .then((res: AxiosResponse) => {
setFeedCount(res.data.totalCount); if (res.data) {
setEntityFieldThreadCount(res.data.counts); setFeedCount(res.data.totalCount);
} setEntityFieldThreadCount(res.data.counts);
); } else {
handleShowErrorToast(
jsonData['api-error-messages']['fetch-entity-feed-count-error']
);
}
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data?.message ||
jsonData['api-error-messages']['fetch-entity-feed-count-error'];
handleShowErrorToast(errMsg);
});
}; };
const fetchActivityFeed = () => { const fetchActivityFeed = () => {
@ -135,26 +156,23 @@ const TopicDetailsPage: FunctionComponent = () => {
getAllFeeds(getEntityFeedLink(EntityType.TOPIC, topicFQN)) getAllFeeds(getEntityFeedLink(EntityType.TOPIC, topicFQN))
.then((res: AxiosResponse) => { .then((res: AxiosResponse) => {
const { data } = res.data; const { data } = res.data;
setEntityThread(data); if (data) {
setEntityThread(data);
} else {
handleShowErrorToast(
jsonData['api-error-messages']['fetch-entity-feed-error']
);
}
}) })
.catch(() => { .catch((err: AxiosError) => {
showToast({ const errMsg =
variant: 'error', err.response?.data?.message ||
body: 'Error while fetching entity feeds', jsonData['api-error-messages']['fetch-entity-feed-error'];
}); handleShowErrorToast(errMsg);
}) })
.finally(() => setIsentityThreadLoading(false)); .finally(() => setIsentityThreadLoading(false));
}; };
useEffect(() => {
if (topicDetailsTabs[activeTab - 1].path !== tab) {
setActiveTab(getCurrentTopicTab(tab));
}
if (TabSpecificField.ACTIVITY_FEED === tab) {
fetchActivityFeed();
}
}, [tab]);
const saveUpdatedTopicData = (updatedData: Topic): Promise<AxiosResponse> => { const saveUpdatedTopicData = (updatedData: Topic): Promise<AxiosResponse> => {
const jsonPatch = compare(topicDetails, updatedData); const jsonPatch = compare(topicDetails, updatedData);
@ -168,80 +186,86 @@ const TopicDetailsPage: FunctionComponent = () => {
setLoading(true); setLoading(true);
getTopicByFqn(topicFQN, ['owner', 'followers', 'tags']) getTopicByFqn(topicFQN, ['owner', 'followers', 'tags'])
.then((res: AxiosResponse) => { .then((res: AxiosResponse) => {
const { if (res.data) {
id, const {
deleted, id,
description, deleted,
followers, description,
fullyQualifiedName, followers,
name, fullyQualifiedName,
schemaType, name,
schemaText, schemaType,
service, schemaText,
tags, service,
owner, tags,
partitions, owner,
cleanupPolicies, partitions,
maximumMessageSize, cleanupPolicies,
replicationFactor, maximumMessageSize,
retentionSize, replicationFactor,
serviceType, retentionSize,
version, serviceType,
} = res.data; version,
setName(name); } = res.data;
setTopicDetails(res.data); setName(name);
setTopicId(id); setTopicDetails(res.data);
setCurrentVersion(version); setTopicId(id);
setDescription(description ?? ''); setCurrentVersion(version);
setSchemaType(schemaType); setDescription(description ?? '');
setFollowers(followers); setSchemaType(schemaType);
setOwner(owner); setFollowers(followers);
setTier(getTierTags(tags)); setOwner(owner);
setTags(getTagsWithoutTier(tags)); setTier(getTierTags(tags));
setSchemaText(schemaText); setTags(getTagsWithoutTier(tags));
setPartitions(partitions); setSchemaText(schemaText);
setCleanupPolicies(cleanupPolicies); setPartitions(partitions);
setMaximumMessageSize(maximumMessageSize); setCleanupPolicies(cleanupPolicies);
setReplicationFactor(replicationFactor); setMaximumMessageSize(maximumMessageSize);
setRetentionSize(retentionSize); setReplicationFactor(replicationFactor);
setDeleted(deleted); setRetentionSize(retentionSize);
setSlashedTopicName([ setDeleted(deleted);
{ setSlashedTopicName([
name: service.name, {
url: service.name name: service.name,
? getServiceDetailsPath( url: service.name
service.name, ? getServiceDetailsPath(
ServiceCategory.MESSAGING_SERVICES service.name,
) ServiceCategory.MESSAGING_SERVICES
: '', )
imgSrc: serviceType ? serviceTypeLogo(serviceType) : undefined, : '',
}, imgSrc: serviceType ? serviceTypeLogo(serviceType) : undefined,
{ },
name: name, {
url: '', name: name,
activeTitle: true, url: '',
}, activeTitle: true,
]); },
]);
addToRecentViewed({ addToRecentViewed({
entityType: EntityType.TOPIC, entityType: EntityType.TOPIC,
fqn: fullyQualifiedName, fqn: fullyQualifiedName,
serviceType: serviceType, serviceType: serviceType,
timestamp: 0, timestamp: 0,
}); });
setLoading(false); } else {
handleShowErrorToast(
jsonData['api-error-messages']['fetch-table-details-error']
);
setIsError(true);
}
}) })
.catch((err: AxiosError) => { .catch((err: AxiosError) => {
if (err.response?.status === 404) { if (err.response?.status === 404) {
setIsError(true); setIsError(true);
} else { } else {
const errMsg = err.message || 'Error while fetching topic details'; const errMsg =
showToast({ err.response?.data?.message ||
variant: 'error', jsonData['api-error-messages']['fetch-topic-details-error'];
body: errMsg, handleShowErrorToast(errMsg);
});
} }
})
.finally(() => {
setLoading(false); setLoading(false);
}); });
}; };
@ -249,54 +273,67 @@ const TopicDetailsPage: FunctionComponent = () => {
const followTopic = () => { const followTopic = () => {
addFollower(topicId, USERId) addFollower(topicId, USERId)
.then((res: AxiosResponse) => { .then((res: AxiosResponse) => {
const { newValue } = res.data.changeDescription.fieldsAdded[0]; if (res.data) {
const { newValue } = res.data.changeDescription.fieldsAdded[0];
setFollowers([...followers, ...newValue]); setFollowers([...followers, ...newValue]);
} else {
handleShowErrorToast(
jsonData['api-error-messages']['update-entity-follow-error']
);
}
}) })
.catch((err: AxiosError) => { .catch((err: AxiosError) => {
const errMsg = const errMsg =
err.response?.data.message || 'Error while following entity.'; err.response?.data?.message ||
showToast({ jsonData['api-error-messages']['update-entity-follow-error'];
variant: 'error', handleShowErrorToast(errMsg);
body: errMsg,
});
}); });
}; };
const unfollowTopic = () => { const unfollowTopic = () => {
removeFollower(topicId, USERId) removeFollower(topicId, USERId)
.then((res: AxiosResponse) => { .then((res: AxiosResponse) => {
const { oldValue } = res.data.changeDescription.fieldsDeleted[0]; if (res.data) {
const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
setFollowers( setFollowers(
followers.filter((follower) => follower.id !== oldValue[0].id) followers.filter((follower) => follower.id !== oldValue[0].id)
); );
} else {
handleShowErrorToast(
jsonData['api-error-messages']['update-entity-unfollow-error']
);
}
}) })
.catch((err: AxiosError) => { .catch((err: AxiosError) => {
const errMsg = const errMsg =
err.response?.data.message || 'Error while unfollowing entity.'; err.response?.data?.message ||
showToast({ jsonData['api-error-messages']['update-entity-unfollow-error'];
variant: 'error', handleShowErrorToast(errMsg);
body: errMsg,
});
}); });
}; };
const descriptionUpdateHandler = (updatedTopic: Topic) => { const descriptionUpdateHandler = (updatedTopic: Topic) => {
saveUpdatedTopicData(updatedTopic) saveUpdatedTopicData(updatedTopic)
.then((res: AxiosResponse) => { .then((res: AxiosResponse) => {
const { description, version } = res.data; if (res.data) {
setCurrentVersion(version); const { description, version } = res.data;
setTopicDetails(res.data); setCurrentVersion(version);
setDescription(description); setTopicDetails(res.data);
getEntityFeedCount(); setDescription(description);
getEntityFeedCount();
} else {
handleShowErrorToast(
jsonData['api-error-messages']['update-description-error']
);
}
}) })
.catch((err: AxiosError) => { .catch((err: AxiosError) => {
const errMsg = const msg =
err.response?.data.message || 'Error while updating description.'; err.response?.data?.message ||
showToast({ jsonData['api-error-messages']['update-description-error'];
variant: 'error', handleShowErrorToast(msg);
body: errMsg,
});
}); });
}; };
@ -304,21 +341,25 @@ const TopicDetailsPage: FunctionComponent = () => {
return new Promise<void>((resolve, reject) => { return new Promise<void>((resolve, reject) => {
saveUpdatedTopicData(updatedTopic) saveUpdatedTopicData(updatedTopic)
.then((res) => { .then((res) => {
setTopicDetails(res.data); if (res.data) {
setCurrentVersion(res.data.version); setTopicDetails(res.data);
setOwner(res.data.owner); setCurrentVersion(res.data.version);
setTier(getTierTags(res.data.tags)); setOwner(res.data.owner);
getEntityFeedCount(); setTier(getTierTags(res.data.tags));
resolve(); getEntityFeedCount();
resolve();
} else {
handleShowErrorToast(
jsonData['api-error-messages']['update-entity-error']
);
}
}) })
.catch((err: AxiosError) => { .catch((err: AxiosError) => {
const errMsg = const msg =
err.response?.data.message || 'Error while updating entity.'; err.response?.data?.message ||
jsonData['api-error-messages']['update-entity-error'];
handleShowErrorToast(msg);
reject(); reject();
showToast({
variant: 'error',
body: errMsg,
});
}); });
}); });
}; };
@ -326,18 +367,22 @@ const TopicDetailsPage: FunctionComponent = () => {
const onTagUpdate = (updatedTopic: Topic) => { const onTagUpdate = (updatedTopic: Topic) => {
saveUpdatedTopicData(updatedTopic) saveUpdatedTopicData(updatedTopic)
.then((res: AxiosResponse) => { .then((res: AxiosResponse) => {
setTier(getTierTags(res.data.tags)); if (res.data) {
setCurrentVersion(res.data.version); setTier(getTierTags(res.data.tags));
setTags(getTagsWithoutTier(res.data.tags)); setCurrentVersion(res.data.version);
getEntityFeedCount(); setTags(getTagsWithoutTier(res.data.tags));
getEntityFeedCount();
} else {
handleShowErrorToast(
jsonData['api-error-messages']['update-tags-error']
);
}
}) })
.catch((err: AxiosError) => { .catch((err: AxiosError) => {
const errMsg = const errMsg =
err.response?.data.message || 'Error while updating tags.'; err.response?.data?.message ||
showToast({ jsonData['api-error-messages']['update-tags-error'];
variant: 'error', handleShowErrorToast(errMsg);
body: errMsg,
});
}); });
}; };
@ -367,31 +412,41 @@ const TopicDetailsPage: FunctionComponent = () => {
} }
}); });
}); });
getEntityFeedCount();
} else {
handleShowErrorToast(
jsonData['api-error-messages']['add-feed-error']
);
} }
}) })
.catch(() => { .catch((err: AxiosError) => {
showToast({ const errMsg =
variant: 'error', err.response?.data?.message ||
body: 'Error while posting feed', jsonData['api-error-messages']['add-feed-error'];
}); handleShowErrorToast(errMsg);
}); });
}; };
const createThread = (data: CreateThread) => { const createThread = (data: CreateThread) => {
postThread(data) postThread(data)
.then((res: AxiosResponse) => { .then((res: AxiosResponse) => {
setEntityThread((pre) => [...pre, res.data]); if (res.data) {
getEntityFeedCount(); setEntityThread((pre) => [...pre, res.data]);
showToast({ getEntityFeedCount();
variant: 'success', handleShowSuccessToast(
body: 'Conversation created successfully', jsonData['api-success-messages']['create-conversation']
}); );
} else {
handleShowErrorToast(
jsonData['api-error-messages']['create-conversation-error']
);
}
}) })
.catch(() => { .catch((err: AxiosError) => {
showToast({ const errMsg =
variant: 'error', err.response?.data?.message ||
body: 'Error while creating the conversation', jsonData['api-error-messages']['create-conversation-error'];
}); handleShowErrorToast(errMsg);
}); });
}; };
@ -400,39 +455,58 @@ const TopicDetailsPage: FunctionComponent = () => {
.then(() => { .then(() => {
getUpdatedThread(threadId) getUpdatedThread(threadId)
.then((data) => { .then((data) => {
setEntityThread((pre) => { if (data) {
return pre.map((thread) => { setEntityThread((pre) => {
if (thread.id === data.id) { return pre.map((thread) => {
return { if (thread.id === data.id) {
...thread, return {
posts: data.posts.slice(-3), ...thread,
postsCount: data.postsCount, posts: data.posts.slice(-3),
}; postsCount: data.postsCount,
} else { };
return thread; } else {
} return thread;
}
});
}); });
}); } else {
handleShowErrorToast(
jsonData['api-error-messages'][
'fetch-updated-conversation-error'
]
);
}
}) })
.catch((error) => { .catch((error: AxiosError) => {
const message = error?.message; const message =
showToast({ error?.response?.data?.message ||
variant: 'error', jsonData['api-error-messages'][
body: message ?? onUpdatedConversastionError, 'fetch-updated-conversation-error'
}); ];
handleShowErrorToast(message);
}); });
showToast({ handleShowSuccessToast(
variant: 'success', jsonData['api-success-messages']['delete-message']
body: onConfirmText, );
});
}) })
.catch((error) => { .catch((error: AxiosError) => {
const message = error?.message; const message =
showToast({ variant: 'error', body: message ?? onErrorText }); error?.response?.data?.message ||
jsonData['api-error-messages']['delete-message-error'];
handleShowErrorToast(message);
}); });
}; };
useEffect(() => {
if (topicDetailsTabs[activeTab - 1].path !== tab) {
setActiveTab(getCurrentTopicTab(tab));
}
if (TabSpecificField.ACTIVITY_FEED === tab) {
fetchActivityFeed();
}
}, [tab]);
useEffect(() => { useEffect(() => {
getEntityFeedCount(); getEntityFeedCount();
}, []); }, []);