chore(ui): ingestion workflow improvement (#12524)

This commit is contained in:
Sachin Chaurasiya 2023-07-21 10:23:06 +05:30 committed by GitHub
parent abe58f486f
commit 2a03cb0c7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 57 additions and 42 deletions

View File

@ -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(
() => () =>

View File

@ -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}
/> />

View File

@ -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,

View File

@ -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;

View File

@ -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" />

View File

@ -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;

View File

@ -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

View File

@ -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]);