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

Feat: Added support to handle error for UI side (#2708)

Browse Source
This commit is contained in:
Shailesh Parmar 2022-02-10 19:13:22 +05:30 committed by GitHub
parent b310f02af9
commit dc2c7c0fb7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 379 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx
View File

@ -321,37 +321,75 @@ const DashboardDetailsPage = () => {
};
const descriptionUpdateHandler = (updatedDashboard: Dashboard) => {
saveUpdatedDashboardData(updatedDashboard).then((res: AxiosResponse) => {
const { description, version } = res.data;
setCurrentVersion(version);
setDashboardDetails(res.data);
setDescription(description);
});
saveUpdatedDashboardData(updatedDashboard)
.then((res: AxiosResponse) => {
const { description, version } = res.data;
setCurrentVersion(version);
setDashboardDetails(res.data);
setDescription(description);
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message || 'Error while updating description.';
showToast({
variant: 'error',
body: errMsg,
});
});
};
const followDashboard = () => {
addFollower(dashboardId, USERId).then((res: AxiosResponse) => {
const { newValue } = res.data.changeDescription.fieldsAdded[0];
addFollower(dashboardId, USERId)
.then((res: AxiosResponse) => {
const { newValue } = res.data.changeDescription.fieldsAdded[0];
setFollowers([...followers, ...newValue]);
});
setFollowers([...followers, ...newValue]);
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message ||
'Error while following dashboard entity.';
showToast({
variant: 'error',
body: errMsg,
});
});
};
const unfollowDashboard = () => {
removeFollower(dashboardId, USERId).then((res: AxiosResponse) => {
const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
removeFollower(dashboardId, USERId)
.then((res: AxiosResponse) => {
const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
setFollowers(
followers.filter((follower) => follower.id !== oldValue[0].id)
);
});
setFollowers(
followers.filter((follower) => follower.id !== oldValue[0].id)
);
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message ||
'Error while unfollowing dashboard entity.';
showToast({
variant: 'error',
body: errMsg,
});
});
};
const onTagUpdate = (updatedDashboard: Dashboard) => {
saveUpdatedDashboardData(updatedDashboard).then((res: AxiosResponse) => {
setTier(getTierTags(res.data.tags));
setCurrentVersion(res.data.version);
setTags(getTagsWithoutTier(res.data.tags));
});
saveUpdatedDashboardData(updatedDashboard)
.then((res: AxiosResponse) => {
setTier(getTierTags(res.data.tags));
setCurrentVersion(res.data.version);
setTags(getTagsWithoutTier(res.data.tags));
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message || 'Error while updating tags.';
showToast({
variant: 'error',
body: errMsg,
});
});
};
const settingsUpdateHandler = (
@ -366,7 +404,15 @@ const DashboardDetailsPage = () => {
setTier(getTierTags(res.data.tags));
resolve();
})
.catch(() => reject());
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message || 'Error while updating entity.';
reject();
showToast({
variant: 'error',
body: errMsg,
});
});
});
};

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

@ -148,7 +148,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
.catch((err: AxiosError) => {
showToast({
variant: 'error',
body: err.message ?? 'Error while fetching lineage data',
body: err.message ?? 'Error while fetching lineage data.',
});
})
.finally(() => {
@ -232,7 +232,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
if (err.response?.status === 404) {
setIsError(true);
} else {
const errMsg = err.message || 'Error while fetching table details';
const errMsg = err.message || 'Error while fetching table details.';
showToast({
variant: 'error',
body: errMsg,
@ -259,7 +259,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
.catch(() =>
showToast({
variant: 'error',
body: 'Error while getting sample data',
body: 'Error while getting sample data.',
})
)
.finally(() => setIsSampleDataLoading(false));
@ -305,22 +305,41 @@ const DatasetDetailsPage: FunctionComponent = () => {
};
const descriptionUpdateHandler = (updatedTable: Table) => {
saveUpdatedTableData(updatedTable).then((res: AxiosResponse) => {
const { description, version } = res.data;
setCurrentVersion(version);
setTableDetails(res.data);
setDescription(description);
});
saveUpdatedTableData(updatedTable)
.then((res: AxiosResponse) => {
const { description, version } = res.data;
setCurrentVersion(version);
setTableDetails(res.data);
setDescription(description);
})
.catch((err: AxiosError) => {
const msg =
err.response?.data.message ||
`Error while updating entity description.`;
showToast({
variant: 'error',
body: msg,
});
});
};
const columnsUpdateHandler = (updatedTable: Table) => {
saveUpdatedTableData(updatedTable).then((res: AxiosResponse) => {
const { columns, version } = res.data;
setCurrentVersion(version);
setTableDetails(res.data);
setColumns(columns);
setTableTags(getTableTags(columns || []));
});
saveUpdatedTableData(updatedTable)
.then((res: AxiosResponse) => {
const { columns, version } = res.data;
setCurrentVersion(version);
setTableDetails(res.data);
setColumns(columns);
setTableTags(getTableTags(columns || []));
})
.catch((err: AxiosError) => {
const msg =
err.response?.data.message || `Error while updating entity.`;
showToast({
variant: 'error',
body: msg,
});
});
};
const settingsUpdateHandler = (updatedTable: Table): Promise<void> => {
@ -334,7 +353,15 @@ const DatasetDetailsPage: FunctionComponent = () => {
setTier(getTierTags(tags));
resolve();
})
.catch(() => reject());
.catch((err: AxiosError) => {
const msg =
err.response?.data.message || `Error while updating entity.`;
reject();
showToast({
variant: 'error',
body: msg,
});
});
});
};
@ -346,13 +373,20 @@ const DatasetDetailsPage: FunctionComponent = () => {
});
};
const unfollowTable = () => {
removeFollower(tableId, USERId).then((res: AxiosResponse) => {
const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
removeFollower(tableId, USERId)
.then((res: AxiosResponse) => {
const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
setFollowers(
followers.filter((follower) => follower.id !== oldValue[0].id)
);
});
setFollowers(
followers.filter((follower) => follower.id !== oldValue[0].id)
);
})
.catch(() => {
showToast({
variant: 'error',
body: `Error while unfollowing entity.`,
});
});
};
const versionHandler = () => {
@ -400,7 +434,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
.catch(() => {
showToast({
variant: 'error',
body: `Error while adding adding new edge`,
body: `Error while adding adding new edge.`,
});
reject();
});
@ -416,7 +450,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
).catch(() => {
showToast({
variant: 'error',
body: `Error while removing edge`,
body: `Error while removing edge.`,
});
});
};

90
openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx
View File

@ -267,29 +267,58 @@ const PipelineDetailsPage = () => {
};
const followPipeline = () => {
addFollower(pipelineId, USERId).then((res: AxiosResponse) => {
const { newValue } = res.data.changeDescription.fieldsAdded[0];
addFollower(pipelineId, USERId)
.then((res: AxiosResponse) => {
const { newValue } = res.data.changeDescription.fieldsAdded[0];
setFollowers([...followers, ...newValue]);
});
setFollowers([...followers, ...newValue]);
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message ||
'Error while following pipeline entity.';
showToast({
variant: 'error',
body: errMsg,
});
});
};
const unfollowPipeline = () => {
removeFollower(pipelineId, USERId).then((res: AxiosResponse) => {
const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
removeFollower(pipelineId, USERId)
.then((res: AxiosResponse) => {
const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
setFollowers(
followers.filter((follower) => follower.id !== oldValue[0].id)
);
});
setFollowers(
followers.filter((follower) => follower.id !== oldValue[0].id)
);
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message ||
'Error while unfollowing pipeline entity.';
showToast({
variant: 'error',
body: errMsg,
});
});
};
const descriptionUpdateHandler = (updatedPipeline: Pipeline) => {
saveUpdatedPipelineData(updatedPipeline).then((res: AxiosResponse) => {
const { description, version } = res.data;
setCurrentVersion(version);
setPipelineDetails(res.data);
setDescription(description);
});
saveUpdatedPipelineData(updatedPipeline)
.then((res: AxiosResponse) => {
const { description, version } = res.data;
setCurrentVersion(version);
setPipelineDetails(res.data);
setDescription(description);
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message || 'Error while updating description.';
showToast({
variant: 'error',
body: errMsg,
});
});
};
const settingsUpdateHandler = (updatedPipeline: Pipeline): Promise<void> => {
@ -302,16 +331,33 @@ const PipelineDetailsPage = () => {
setTier(getTierTags(res.data.tags));
resolve();
})
.catch(() => reject());
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message || 'Error while updating entity.';
reject();
showToast({
variant: 'error',
body: errMsg,
});
});
});
};
const onTagUpdate = (updatedPipeline: Pipeline) => {
saveUpdatedPipelineData(updatedPipeline).then((res: AxiosResponse) => {
setTier(getTierTags(res.data.tags));
setCurrentVersion(res.data.version);
setTags(getTagsWithoutTier(res.data.tags));
});
saveUpdatedPipelineData(updatedPipeline)
.then((res: AxiosResponse) => {
setTier(getTierTags(res.data.tags));
setCurrentVersion(res.data.version);
setTags(getTagsWithoutTier(res.data.tags));
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message || 'Error while updating tags.';
showToast({
variant: 'error',
body: errMsg,
});
});
};
const onTaskUpdate = (jsonPatch: Array<Operation>) => {

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

@ -206,29 +206,56 @@ const TopicDetailsPage: FunctionComponent = () => {
};
const followTopic = () => {
addFollower(topicId, USERId).then((res: AxiosResponse) => {
const { newValue } = res.data.changeDescription.fieldsAdded[0];
addFollower(topicId, USERId)
.then((res: AxiosResponse) => {
const { newValue } = res.data.changeDescription.fieldsAdded[0];
setFollowers([...followers, ...newValue]);
});
setFollowers([...followers, ...newValue]);
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message || 'Error while following entity.';
showToast({
variant: 'error',
body: errMsg,
});
});
};
const unfollowTopic = () => {
removeFollower(topicId, USERId).then((res: AxiosResponse) => {
const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
removeFollower(topicId, USERId)
.then((res: AxiosResponse) => {
const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
setFollowers(
followers.filter((follower) => follower.id !== oldValue[0].id)
);
});
setFollowers(
followers.filter((follower) => follower.id !== oldValue[0].id)
);
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message || 'Error while unfollowing entity.';
showToast({
variant: 'error',
body: errMsg,
});
});
};
const descriptionUpdateHandler = (updatedTopic: Topic) => {
saveUpdatedTopicData(updatedTopic).then((res: AxiosResponse) => {
const { description, version } = res.data;
setCurrentVersion(version);
setTopicDetails(res.data);
setDescription(description);
});
saveUpdatedTopicData(updatedTopic)
.then((res: AxiosResponse) => {
const { description, version } = res.data;
setCurrentVersion(version);
setTopicDetails(res.data);
setDescription(description);
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message || 'Error while updating description.';
showToast({
variant: 'error',
body: errMsg,
});
});
};
const settingsUpdateHandler = (updatedTopic: Topic): Promise<void> => {
@ -241,16 +268,33 @@ const TopicDetailsPage: FunctionComponent = () => {
setTier(getTierTags(res.data.tags));
resolve();
})
.catch(() => reject());
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message || 'Error while updating entity.';
reject();
showToast({
variant: 'error',
body: errMsg,
});
});
});
};
const onTagUpdate = (updatedTopic: Topic) => {
saveUpdatedTopicData(updatedTopic).then((res: AxiosResponse) => {
setTier(getTierTags(res.data.tags));
setCurrentVersion(res.data.version);
setTags(getTagsWithoutTier(res.data.tags));
});
saveUpdatedTopicData(updatedTopic)
.then((res: AxiosResponse) => {
setTier(getTierTags(res.data.tags));
setCurrentVersion(res.data.version);
setTags(getTagsWithoutTier(res.data.tags));
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message || 'Error while updating tags.';
showToast({
variant: 'error',
body: errMsg,
});
});
};
const versionHandler = () => {

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

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { AxiosResponse } from 'axios';
import { AxiosError, AxiosResponse } from 'axios';
import classNames from 'classnames';
import { compare } from 'fast-json-patch';
import { isNil } from 'lodash';
@ -26,6 +26,7 @@ import {
} from '../../axiosAPIs/databaseAPI';
import { getDatabaseTables } from '../../axiosAPIs/tableAPI';
import Description from '../../components/common/description/Description';
import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
import NextPrevious from '../../components/common/next-previous/NextPrevious';
import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
import TabsPane from '../../components/common/TabsPane/TabsPane';
@ -43,7 +44,8 @@ import {
import { ServiceCategory } from '../../enums/service.enum';
import { Database } from '../../generated/entity/data/database';
import { Table } from '../../generated/entity/data/table';
import { isEven } from '../../utils/CommonUtils';
import useToastContext from '../../hooks/useToastContext';
import { getEntityMissingError, isEven } from '../../utils/CommonUtils';
import { serviceTypeLogo } from '../../utils/ServiceUtils';
import { getOwnerFromId, getUsagePercentile } from '../../utils/TableUtils';
import { getTableTags } from '../../utils/TagsUtils';
@ -53,6 +55,7 @@ const DatabaseDetails: FunctionComponent = () => {
const [slashedTableName, setSlashedTableName] = useState<
TitleBreadcrumbProps['titleLinks']
>([]);
const showToast = useToastContext();
const { databaseFQN } = useParams() as Record<string, string>;
const [isLoading, setIsLoading] = useState(true);
const [database, setDatabase] = useState<Database>();
@ -69,6 +72,7 @@ const DatabaseDetails: FunctionComponent = () => {
const [tableInstanceCount, setTableInstanceCount] = useState<number>(0);
const [activeTab, setActiveTab] = useState<number>(1);
const [isError, setIsError] = useState(false);
const history = useHistory();
const isMounting = useRef(true);
@ -121,35 +125,48 @@ const DatabaseDetails: FunctionComponent = () => {
};
const getDetailsByFQN = () => {
getDatabaseDetailsByFQN(databaseFQN).then((res: AxiosResponse) => {
const { description, id, name, service, serviceType } = res.data;
setDatabase(res.data);
setDescription(description);
setDatabaseId(id);
setDatabaseName(name);
getDatabaseDetailsByFQN(databaseFQN)
.then((res: AxiosResponse) => {
const { description, id, name, service, serviceType } = res.data;
setDatabase(res.data);
setDescription(description);
setDatabaseId(id);
setDatabaseName(name);
setServiceType(serviceType);
setServiceType(serviceType);
setSlashedTableName([
{
name: service.name,
url: service.name
? getServiceDetailsPath(
service.name,
serviceType,
ServiceCategory.DATABASE_SERVICES
)
: '',
imgSrc: serviceType ? serviceTypeLogo(serviceType) : undefined,
},
{
name: name,
url: '',
activeTitle: true,
},
]);
});
fetchDatabaseTablesAndDBTModels();
setSlashedTableName([
{
name: service.name,
url: service.name
? getServiceDetailsPath(
service.name,
serviceType,
ServiceCategory.DATABASE_SERVICES
)
: '',
imgSrc: serviceType ? serviceTypeLogo(serviceType) : undefined,
},
{
name: name,
url: '',
activeTitle: true,
},
]);
fetchDatabaseTablesAndDBTModels();
})
.catch((err: AxiosError) => {
if (err.response?.status === 404) {
setIsError(true);
} else {
const errMsg = err.message || 'Error while fetching database details';
showToast({
variant: 'error',
body: errMsg,
});
}
setIsLoading(false);
});
};
const onCancel = () => {
@ -176,11 +193,20 @@ const DatabaseDetails: FunctionComponent = () => {
...database,
description: updatedHTML,
};
saveUpdatedDatabaseData(updatedDatabaseDetails).then(() => {
setDatabase(updatedDatabaseDetails);
setDescription(updatedHTML);
setIsEdit(false);
});
saveUpdatedDatabaseData(updatedDatabaseDetails)
.then(() => {
setDatabase(updatedDatabaseDetails);
setDescription(updatedHTML);
setIsEdit(false);
})
.catch((err: AxiosError) => {
const errMsg =
err.response?.data.message || 'Error while updating description';
showToast({
variant: 'error',
body: errMsg,
});
});
}
};
@ -226,6 +252,10 @@ const DatabaseDetails: FunctionComponent = () => {
<>
{isLoading ? (
<Loader />
) : isError ? (
<ErrorPlaceHolder>
{getEntityMissingError('database', databaseFQN)}
</ErrorPlaceHolder>
) : (
<PageContainer>
<div

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

@ -31,6 +31,7 @@ import { getPipelines } from '../../axiosAPIs/pipelineAPI';
import { getServiceByFQN, updateService } from '../../axiosAPIs/serviceAPI';
import { getTopics } from '../../axiosAPIs/topicsAPI';
import Description from '../../components/common/description/Description';
import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
import IngestionError from '../../components/common/error/IngestionError';
import NextPrevious from '../../components/common/next-previous/NextPrevious';
import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
@ -61,7 +62,7 @@ import {
import { EntityReference } from '../../generated/type/entityReference';
import { useAuth } from '../../hooks/authHooks';
import useToastContext from '../../hooks/useToastContext';
import { isEven } from '../../utils/CommonUtils';
import { getEntityMissingError, isEven } from '../../utils/CommonUtils';
import {
getIsIngestionEnable,
getServiceCategoryFromType,
@ -101,6 +102,7 @@ const ServicePage: FunctionComponent = () => {
const [activeTab, setActiveTab] = useState(1);
const [isConnectionAvailable, setConnectionAvailable] =
useState<boolean>(true);
const [isError, setIsError] = useState(false);
const [ingestions, setIngestions] = useState<AirflowPipeline[]>([]);
const [serviceList] = useState<Array<DatabaseService>>([]);
const [ingestionPaging, setIngestionPaging] = useState<Paging>({} as Paging);
@ -261,7 +263,17 @@ const ServicePage: FunctionComponent = () => {
resolve();
getAllIngestionWorkflows();
if (triggerIngestion) {
triggerIngestionById(id, displayName).then();
triggerIngestionById(id, displayName)
.then()
.catch((err: AxiosError) => {
const msg = err.response?.data.message;
showToast({
variant: 'error',
body:
msg ??
`Error while triggring ingestion workflow ${displayName}`,
});
});
}
})
.catch((err: AxiosError) => {
@ -301,7 +313,17 @@ const ServicePage: FunctionComponent = () => {
setIsloading(false);
getAllIngestionWorkflows();
if (triggerIngestion) {
triggerIngestionById(id, displayName).then();
triggerIngestionById(id, displayName)
.then()
.catch((err: AxiosError) => {
const msg = err.response?.data.message;
showToast({
variant: 'error',
body:
msg ??
`Error while triggring ingestion workflow ${displayName}`,
});
});
}
})
.catch((err: AxiosError) => {
@ -325,7 +347,14 @@ const ServicePage: FunctionComponent = () => {
setServiceDetails(res.data);
resolve();
})
.catch(() => reject());
.catch((err: AxiosError) => {
reject();
const msg = err.response?.data.message;
showToast({
variant: 'error',
body: msg ?? `Error while updating config for ${serviceFQN}`,
});
});
});
};
@ -600,8 +629,8 @@ const ServicePage: FunctionComponent = () => {
}, [serviceCategory, serviceType]);
useEffect(() => {
getServiceByFQN(serviceName, serviceFQN).then(
(resService: AxiosResponse) => {
getServiceByFQN(serviceName, serviceFQN)
.then((resService: AxiosResponse) => {
const { description, serviceType } = resService.data;
setServiceDetails(resService.data);
setDescription(description);
@ -614,8 +643,21 @@ const ServicePage: FunctionComponent = () => {
},
]);
getOtherDetails();
}
);
})
.catch((err: AxiosError) => {
if (err.response?.status === 404) {
setIsError(true);
} else {
const errMsg =
err.response?.data.message ||
'Error while fetching service details';
showToast({
variant: 'error',
body: errMsg,
});
}
setIsloading(false);
});
}, [serviceFQN, serviceName]);
useEffect(() => {
@ -679,6 +721,10 @@ const ServicePage: FunctionComponent = () => {
<>
{isLoading ? (
<Loader />
) : isError ? (
<ErrorPlaceHolder>
{getEntityMissingError(serviceName as string, serviceFQN)}
</ErrorPlaceHolder>
) : (
<PageContainer>
<div className="tw-px-4" data-testid="service-page">