mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-09-08 08:31:37 +00:00
chore(ui): ingestion workflow improvement (#12524)
This commit is contained in:
parent
abe58f486f
commit
2a03cb0c7c
@ -130,18 +130,22 @@ export const DataAssetsHeader = ({
|
|||||||
);
|
);
|
||||||
const [copyTooltip, setCopyTooltip] = useState<string>();
|
const [copyTooltip, setCopyTooltip] = useState<string>();
|
||||||
|
|
||||||
const excludeEntityService = [
|
const excludeEntityService = useMemo(
|
||||||
EntityType.DATABASE,
|
() =>
|
||||||
EntityType.DATABASE_SCHEMA,
|
[
|
||||||
EntityType.DATABASE_SERVICE,
|
EntityType.DATABASE,
|
||||||
EntityType.DASHBOARD_SERVICE,
|
EntityType.DATABASE_SCHEMA,
|
||||||
EntityType.MESSAGING_SERVICE,
|
EntityType.DATABASE_SERVICE,
|
||||||
EntityType.PIPELINE_SERVICE,
|
EntityType.DASHBOARD_SERVICE,
|
||||||
EntityType.MLMODEL_SERVICE,
|
EntityType.MESSAGING_SERVICE,
|
||||||
EntityType.METADATA_SERVICE,
|
EntityType.PIPELINE_SERVICE,
|
||||||
EntityType.STORAGE_SERVICE,
|
EntityType.MLMODEL_SERVICE,
|
||||||
...SERVICE_CATEGORIES,
|
EntityType.METADATA_SERVICE,
|
||||||
].includes(entityType);
|
EntityType.STORAGE_SERVICE,
|
||||||
|
...SERVICE_CATEGORIES,
|
||||||
|
].includes(entityType),
|
||||||
|
[entityType]
|
||||||
|
);
|
||||||
const hasFollowers = 'followers' in dataAsset;
|
const hasFollowers = 'followers' in dataAsset;
|
||||||
|
|
||||||
const { entityName, tier, isFollowing, version, followers } = useMemo(
|
const { entityName, tier, isFollowing, version, followers } = useMemo(
|
||||||
@ -226,7 +230,7 @@ export const DataAssetsHeader = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (dataAsset.fullyQualifiedName && !isTourPage) {
|
if (dataAsset.fullyQualifiedName && !isTourPage && !excludeEntityService) {
|
||||||
fetchActiveAnnouncement();
|
fetchActiveAnnouncement();
|
||||||
fetchTaskCount();
|
fetchTaskCount();
|
||||||
}
|
}
|
||||||
@ -234,7 +238,7 @@ export const DataAssetsHeader = ({
|
|||||||
const asset = dataAsset as Container;
|
const asset = dataAsset as Container;
|
||||||
fetchContainerParent(asset.parent?.fullyQualifiedName ?? '');
|
fetchContainerParent(asset.parent?.fullyQualifiedName ?? '');
|
||||||
}
|
}
|
||||||
}, [dataAsset]);
|
}, [dataAsset, excludeEntityService, isTourPage]);
|
||||||
|
|
||||||
const { extraInfo, breadcrumbs }: DataAssetHeaderInfo = useMemo(
|
const { extraInfo, breadcrumbs }: DataAssetHeaderInfo = useMemo(
|
||||||
() =>
|
() =>
|
||||||
|
@ -80,10 +80,10 @@ const Ingestion: React.FC<IngestionProps> = ({
|
|||||||
|
|
||||||
const [ingestionData, setIngestionData] =
|
const [ingestionData, setIngestionData] =
|
||||||
useState<Array<IngestionPipeline>>(ingestionList);
|
useState<Array<IngestionPipeline>>(ingestionList);
|
||||||
const [servicePermission, setServicePermission] =
|
const [ingestionPipelinesPermission, setIngestionPipelinesPermission] =
|
||||||
useState<IngestionServicePermission>();
|
useState<IngestionServicePermission>();
|
||||||
|
|
||||||
const fetchServicePermission = async () => {
|
const fetchIngestionPipelinesPermission = async () => {
|
||||||
try {
|
try {
|
||||||
const promises = ingestionList.map((item) =>
|
const promises = ingestionList.map((item) =>
|
||||||
getEntityPermissionByFqn(ResourceEntity.INGESTION_PIPELINE, item.name)
|
getEntityPermissionByFqn(ResourceEntity.INGESTION_PIPELINE, item.name)
|
||||||
@ -98,7 +98,7 @@ const Ingestion: React.FC<IngestionProps> = ({
|
|||||||
};
|
};
|
||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
setServicePermission(permissionData);
|
setIngestionPipelinesPermission(permissionData);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
showErrorToast(error as AxiosError);
|
showErrorToast(error as AxiosError);
|
||||||
}
|
}
|
||||||
@ -154,8 +154,8 @@ const Ingestion: React.FC<IngestionProps> = ({
|
|||||||
}, [searchText, ingestionList]);
|
}, [searchText, ingestionList]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchServicePermission();
|
fetchIngestionPipelinesPermission();
|
||||||
}, []);
|
}, [ingestionList]);
|
||||||
|
|
||||||
const getIngestionTab = () => {
|
const getIngestionTab = () => {
|
||||||
return (
|
return (
|
||||||
@ -207,6 +207,7 @@ const Ingestion: React.FC<IngestionProps> = ({
|
|||||||
handleEnableDisableIngestion={handleEnableDisableIngestion}
|
handleEnableDisableIngestion={handleEnableDisableIngestion}
|
||||||
handleIsConfirmationModalOpen={handleIsConfirmationModalOpen}
|
handleIsConfirmationModalOpen={handleIsConfirmationModalOpen}
|
||||||
ingestionData={ingestionData}
|
ingestionData={ingestionData}
|
||||||
|
ingestionPipelinesPermission={ingestionPipelinesPermission}
|
||||||
isRequiredDetailsAvailable={isRequiredDetailsAvailable}
|
isRequiredDetailsAvailable={isRequiredDetailsAvailable}
|
||||||
paging={paging}
|
paging={paging}
|
||||||
permissions={permissions}
|
permissions={permissions}
|
||||||
@ -214,7 +215,6 @@ const Ingestion: React.FC<IngestionProps> = ({
|
|||||||
pipelineType={pipelineType}
|
pipelineType={pipelineType}
|
||||||
serviceCategory={serviceCategory}
|
serviceCategory={serviceCategory}
|
||||||
serviceName={serviceName}
|
serviceName={serviceName}
|
||||||
servicePermission={servicePermission}
|
|
||||||
triggerIngestion={triggerIngestion}
|
triggerIngestion={triggerIngestion}
|
||||||
onIngestionWorkflowsUpdate={onIngestionWorkflowsUpdate}
|
onIngestionWorkflowsUpdate={onIngestionWorkflowsUpdate}
|
||||||
/>
|
/>
|
||||||
|
@ -36,7 +36,7 @@ function IngestionListTable({
|
|||||||
paging,
|
paging,
|
||||||
handleEnableDisableIngestion,
|
handleEnableDisableIngestion,
|
||||||
onIngestionWorkflowsUpdate,
|
onIngestionWorkflowsUpdate,
|
||||||
servicePermission,
|
ingestionPipelinesPermission,
|
||||||
serviceCategory,
|
serviceCategory,
|
||||||
serviceName,
|
serviceName,
|
||||||
handleDeleteSelection,
|
handleDeleteSelection,
|
||||||
@ -112,11 +112,11 @@ function IngestionListTable({
|
|||||||
handleDeleteSelection={handleDeleteSelection}
|
handleDeleteSelection={handleDeleteSelection}
|
||||||
handleEnableDisableIngestion={handleEnableDisableIngestion}
|
handleEnableDisableIngestion={handleEnableDisableIngestion}
|
||||||
handleIsConfirmationModalOpen={handleIsConfirmationModalOpen}
|
handleIsConfirmationModalOpen={handleIsConfirmationModalOpen}
|
||||||
|
ingestionPipelinesPermission={ingestionPipelinesPermission}
|
||||||
isRequiredDetailsAvailable={isRequiredDetailsAvailable}
|
isRequiredDetailsAvailable={isRequiredDetailsAvailable}
|
||||||
record={record}
|
record={record}
|
||||||
serviceCategory={serviceCategory}
|
serviceCategory={serviceCategory}
|
||||||
serviceName={serviceName}
|
serviceName={serviceName}
|
||||||
servicePermission={servicePermission}
|
|
||||||
triggerIngestion={triggerIngestion}
|
triggerIngestion={triggerIngestion}
|
||||||
onIngestionWorkflowsUpdate={onIngestionWorkflowsUpdate}
|
onIngestionWorkflowsUpdate={onIngestionWorkflowsUpdate}
|
||||||
/>
|
/>
|
||||||
@ -166,7 +166,7 @@ function IngestionListTable({
|
|||||||
triggerIngestion,
|
triggerIngestion,
|
||||||
isRequiredDetailsAvailable,
|
isRequiredDetailsAvailable,
|
||||||
handleEnableDisableIngestion,
|
handleEnableDisableIngestion,
|
||||||
servicePermission,
|
ingestionPipelinesPermission,
|
||||||
serviceName,
|
serviceName,
|
||||||
deleteSelection,
|
deleteSelection,
|
||||||
handleDeleteSelection,
|
handleDeleteSelection,
|
||||||
|
@ -32,7 +32,7 @@ export interface IngestionListTableProps {
|
|||||||
pipelineNameColWidth?: number;
|
pipelineNameColWidth?: number;
|
||||||
serviceCategory: ServiceCategory;
|
serviceCategory: ServiceCategory;
|
||||||
serviceName: string;
|
serviceName: string;
|
||||||
servicePermission?: IngestionServicePermission;
|
ingestionPipelinesPermission?: IngestionServicePermission;
|
||||||
deployIngestion: (id: string) => Promise<void>;
|
deployIngestion: (id: string) => Promise<void>;
|
||||||
handleDeleteSelection: (row: SelectedRowDetails) => void;
|
handleDeleteSelection: (row: SelectedRowDetails) => void;
|
||||||
handleEnableDisableIngestion: (id: string) => void;
|
handleEnableDisableIngestion: (id: string) => void;
|
||||||
|
@ -26,7 +26,7 @@ import { PipelineActionsProps } from './PipelineActions.interface';
|
|||||||
|
|
||||||
function PipelineActions({
|
function PipelineActions({
|
||||||
record,
|
record,
|
||||||
servicePermission,
|
ingestionPipelinesPermission,
|
||||||
triggerIngestion,
|
triggerIngestion,
|
||||||
deployIngestion,
|
deployIngestion,
|
||||||
deleteSelection,
|
deleteSelection,
|
||||||
@ -47,7 +47,7 @@ function PipelineActions({
|
|||||||
const [selectedPipeline, setSelectedPipeline] = useState<IngestionPipeline>();
|
const [selectedPipeline, setSelectedPipeline] = useState<IngestionPipeline>();
|
||||||
|
|
||||||
const getEditPermission = (service: string): boolean =>
|
const getEditPermission = (service: string): boolean =>
|
||||||
!servicePermission?.[service]?.EditAll;
|
!ingestionPipelinesPermission?.[service]?.EditAll;
|
||||||
|
|
||||||
const handleTriggerIngestion = async (id: string, displayName: string) => {
|
const handleTriggerIngestion = async (id: string, displayName: string) => {
|
||||||
try {
|
try {
|
||||||
@ -89,7 +89,7 @@ function PipelineActions({
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const ConfirmDelete = (id: string, name: string) => {
|
const handleConfirmDelete = (id: string, name: string) => {
|
||||||
handleDeleteSelection({
|
handleDeleteSelection({
|
||||||
id,
|
id,
|
||||||
name,
|
name,
|
||||||
@ -192,9 +192,9 @@ function PipelineActions({
|
|||||||
<Button
|
<Button
|
||||||
className="p-x-xss"
|
className="p-x-xss"
|
||||||
data-testid="delete"
|
data-testid="delete"
|
||||||
disabled={!servicePermission?.[record.name]?.Delete}
|
disabled={!ingestionPipelinesPermission?.[record.name]?.Delete}
|
||||||
type="link"
|
type="link"
|
||||||
onClick={() => ConfirmDelete(record.id as string, record.name)}>
|
onClick={() => handleConfirmDelete(record.id as string, record.name)}>
|
||||||
{getDeleteButton()}
|
{getDeleteButton()}
|
||||||
</Button>
|
</Button>
|
||||||
<Divider className="border-gray" type="vertical" />
|
<Divider className="border-gray" type="vertical" />
|
||||||
|
@ -18,7 +18,7 @@ import { SelectedRowDetails } from './ingestion.interface';
|
|||||||
|
|
||||||
export interface PipelineActionsProps {
|
export interface PipelineActionsProps {
|
||||||
record: IngestionPipeline;
|
record: IngestionPipeline;
|
||||||
servicePermission?: IngestionServicePermission;
|
ingestionPipelinesPermission?: IngestionServicePermission;
|
||||||
isRequiredDetailsAvailable: boolean;
|
isRequiredDetailsAvailable: boolean;
|
||||||
serviceCategory: ServiceCategory;
|
serviceCategory: ServiceCategory;
|
||||||
serviceName: string;
|
serviceName: string;
|
||||||
|
@ -119,14 +119,20 @@ const SuccessScreen = ({
|
|||||||
</Typography.Paragraph>
|
</Typography.Paragraph>
|
||||||
</Space>
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
{!isAirflowAvailable && (
|
<div className="m-t-sm">
|
||||||
<>
|
{isFetchingStatus ? (
|
||||||
<AirflowMessageBanner className="m-t-sm" />
|
<Loader size="small" />
|
||||||
<Card className="m-t-sm">
|
) : (
|
||||||
{isFetchingStatus ? <Loader /> : <>{messageElement}</>}
|
<>
|
||||||
</Card>
|
{!isAirflowAvailable && (
|
||||||
</>
|
<>
|
||||||
)}
|
<AirflowMessageBanner />
|
||||||
|
<Card className="m-t-sm">{messageElement}</Card>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="mt-7 text-center">
|
<div className="mt-7 text-center">
|
||||||
<Button
|
<Button
|
||||||
|
@ -244,12 +244,9 @@ const ServiceDetailsPage: FunctionComponent = () => {
|
|||||||
// Error
|
// Error
|
||||||
} finally {
|
} finally {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
if (!airflowEndpoint) {
|
|
||||||
await getAirflowEndpoint();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[serviceFQN, paging, airflowEndpoint, getAirflowEndpoint]
|
[serviceFQN, paging]
|
||||||
);
|
);
|
||||||
|
|
||||||
const updateCurrentSelectedIngestion = useCallback(
|
const updateCurrentSelectedIngestion = useCallback(
|
||||||
@ -342,6 +339,13 @@ const ServiceDetailsPage: FunctionComponent = () => {
|
|||||||
setIngestionPipelines((pipelines) =>
|
setIngestionPipelines((pipelines) =>
|
||||||
pipelines.filter((ing) => ing.id !== id)
|
pipelines.filter((ing) => ing.id !== id)
|
||||||
);
|
);
|
||||||
|
/**
|
||||||
|
* update the paging total count to reflect on tab count
|
||||||
|
*/
|
||||||
|
setIngestionPaging((prevData) => ({
|
||||||
|
...prevData,
|
||||||
|
total: prevData.total > 0 ? prevData.total - 1 : 0,
|
||||||
|
}));
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
showErrorToast(
|
showErrorToast(
|
||||||
error as AxiosError,
|
error as AxiosError,
|
||||||
@ -875,6 +879,7 @@ const ServiceDetailsPage: FunctionComponent = () => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isAirflowAvailable && !isOpenMetadataService) {
|
if (isAirflowAvailable && !isOpenMetadataService) {
|
||||||
getAllIngestionWorkflows();
|
getAllIngestionWorkflows();
|
||||||
|
getAirflowEndpoint();
|
||||||
}
|
}
|
||||||
}, [isAirflowAvailable]);
|
}, [isAirflowAvailable]);
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user