From eb6f4b56cb279226154057ae0a1234a43eff3f25 Mon Sep 17 00:00:00 2001 From: Chris Collins Date: Fri, 5 Aug 2022 10:49:55 -0400 Subject: [PATCH 1/2] feat(ingestion) Add Save & Run button to managed ingestion builder --- .../app/ingest/source/IngestionSourceList.tsx | 88 +++++++++++-------- .../builder/IngestionSourceBuilderModal.tsx | 16 ++-- .../ingest/source/builder/NameSourceStep.tsx | 25 ++++-- .../src/app/ingest/source/builder/types.ts | 2 +- 4 files changed, 81 insertions(+), 50 deletions(-) diff --git a/datahub-web-react/src/app/ingest/source/IngestionSourceList.tsx b/datahub-web-react/src/app/ingest/source/IngestionSourceList.tsx index 945f7f2eb7fd4..45b2e80b9479b 100644 --- a/datahub-web-react/src/app/ingest/source/IngestionSourceList.tsx +++ b/datahub-web-react/src/app/ingest/source/IngestionSourceList.tsx @@ -111,13 +111,47 @@ export const IngestionSourceList = () => { const focusSource = (focusSourceUrn && filteredSources.find((source) => source.urn === focusSourceUrn)) || undefined; + const onRefresh = () => { + refetch(); + // Used to force a re-render of the child execution request list. + setLastRefresh(new Date().getMilliseconds()); + }; + + const executeIngestionSource = (urn: string) => { + createExecutionRequestMutation({ + variables: { + input: { + ingestionSourceUrn: urn, + }, + }, + }) + .then(() => { + message.success({ + content: `Successfully submitted ingestion execution request!`, + duration: 3, + }); + setInterval(() => onRefresh(), 3000); + }) + .catch((e) => { + message.destroy(); + message.error({ + content: `Failed to submit ingestion execution request!: \n ${e.message || ''}`, + duration: 3, + }); + }); + }; + const onCreateOrUpdateIngestionSourceSuccess = () => { setTimeout(() => refetch(), 2000); setIsBuildingSource(false); setFocusSourceUrn(undefined); }; - const createOrUpdateIngestionSource = (input: UpdateIngestionSourceInput, resetState: () => void) => { + const createOrUpdateIngestionSource = ( + input: UpdateIngestionSourceInput, + resetState: () => void, + shouldRun?: boolean, + ) => { if (focusSourceUrn) { // Update: updateIngestionSource({ variables: { urn: focusSourceUrn as string, input } }) @@ -128,6 +162,7 @@ export const IngestionSourceList = () => { }); onCreateOrUpdateIngestionSourceSuccess(); resetState(); + if (shouldRun) executeIngestionSource(focusSourceUrn); }) .catch((e) => { message.destroy(); @@ -139,15 +174,21 @@ export const IngestionSourceList = () => { } else { // Create createIngestionSource({ variables: { input } }) - .then(() => { - setTimeout(() => refetch(), 2000); + .then((result) => { + message.loading({ content: 'Loading...', duration: 2 }); + setTimeout(() => { + refetch(); + message.success({ + content: `Successfully created ingestion source!`, + duration: 3, + }); + if (shouldRun && result.data?.createIngestionSource) { + executeIngestionSource(result.data.createIngestionSource); + } + }, 2000); setIsBuildingSource(false); setFocusSourceUrn(undefined); resetState(); - message.success({ - content: `Successfully created ingestion source!`, - duration: 3, - }); // onCreateOrUpdateIngestionSourceSuccess(); }) .catch((e) => { @@ -164,36 +205,6 @@ export const IngestionSourceList = () => { setPage(newPage); }; - const onRefresh = () => { - refetch(); - // Used to force a re-render of the child execution request list. - setLastRefresh(new Date().getMilliseconds()); - }; - - const executeIngestionSource = (urn: string) => { - createExecutionRequestMutation({ - variables: { - input: { - ingestionSourceUrn: urn, - }, - }, - }) - .then(() => { - message.success({ - content: `Successfully submitted ingestion execution request!`, - duration: 3, - }); - setInterval(() => onRefresh(), 3000); - }) - .catch((e) => { - message.destroy(); - message.error({ - content: `Failed to submit ingestion execution request!: \n ${e.message || ''}`, - duration: 3, - }); - }); - }; - const deleteIngestionSource = async (urn: string) => { removeIngestionSourceMutation({ variables: { urn }, @@ -214,7 +225,7 @@ export const IngestionSourceList = () => { }); }; - const onSubmit = (recipeBuilderState: SourceBuilderState, resetState: () => void) => { + const onSubmit = (recipeBuilderState: SourceBuilderState, resetState: () => void, shouldRun?: boolean) => { createOrUpdateIngestionSource( { type: recipeBuilderState.type as string, @@ -236,6 +247,7 @@ export const IngestionSourceList = () => { }, }, resetState, + shouldRun, ); }; diff --git a/datahub-web-react/src/app/ingest/source/builder/IngestionSourceBuilderModal.tsx b/datahub-web-react/src/app/ingest/source/builder/IngestionSourceBuilderModal.tsx index cce05903aa160..f0ff9e201301f 100644 --- a/datahub-web-react/src/app/ingest/source/builder/IngestionSourceBuilderModal.tsx +++ b/datahub-web-react/src/app/ingest/source/builder/IngestionSourceBuilderModal.tsx @@ -59,7 +59,7 @@ export enum IngestionSourceBuilderStep { type Props = { initialState?: SourceBuilderState; visible: boolean; - onSubmit?: (input: SourceBuilderState, resetState: () => void) => void; + onSubmit?: (input: SourceBuilderState, resetState: () => void, shouldRun?: boolean) => void; onCancel?: () => void; }; @@ -98,11 +98,15 @@ export const IngestionSourceBuilderModal = ({ initialState, visible, onSubmit, o onCancel?.(); }; - const submit = () => { - onSubmit?.(ingestionBuilderState, () => { - setStepStack([initialStep]); - setIngestionBuilderState({}); - }); + const submit = (shouldRun?: boolean) => { + onSubmit?.( + ingestionBuilderState, + () => { + setStepStack([initialStep]); + setIngestionBuilderState({}); + }, + shouldRun, + ); }; const currentStep = stepStack[stepStack.length - 1]; diff --git a/datahub-web-react/src/app/ingest/source/builder/NameSourceStep.tsx b/datahub-web-react/src/app/ingest/source/builder/NameSourceStep.tsx index cb924b6e7b67b..deb3ee4db2f43 100644 --- a/datahub-web-react/src/app/ingest/source/builder/NameSourceStep.tsx +++ b/datahub-web-react/src/app/ingest/source/builder/NameSourceStep.tsx @@ -9,6 +9,10 @@ const ControlsContainer = styled.div` margin-top: 8px; `; +const SaveRunButton = styled(Button)` + margin-right: 15px; +`; + export const NameSourceStep = ({ state, updateState, prev, submit }: StepProps) => { const setName = (stagedName: string) => { const newState: SourceBuilderState = { @@ -40,9 +44,9 @@ export const NameSourceStep = ({ state, updateState, prev, submit }: StepProps) updateState(newState); }; - const onClickCreate = () => { + const onClickCreate = (shouldRun?: boolean) => { if (state.name !== undefined && state.name.length > 0) { - submit(); + submit(shouldRun); } }; @@ -93,9 +97,20 @@ export const NameSourceStep = ({ state, updateState, prev, submit }: StepProps) - +
+ 0)} + onClick={() => onClickCreate(true)} + > + Save & Run + + +
); diff --git a/datahub-web-react/src/app/ingest/source/builder/types.ts b/datahub-web-react/src/app/ingest/source/builder/types.ts index 4936a13ae9ed8..c2a2693c9eb4c 100644 --- a/datahub-web-react/src/app/ingest/source/builder/types.ts +++ b/datahub-web-react/src/app/ingest/source/builder/types.ts @@ -21,7 +21,7 @@ export type StepProps = { updateState: (newState: SourceBuilderState) => void; goTo: (step: IngestionSourceBuilderStep) => void; prev?: () => void; - submit: () => void; + submit: (shouldRun?: boolean) => void; cancel: () => void; }; From d8c37bfa65088b2ce402e559512314b0207a9acf Mon Sep 17 00:00:00 2001 From: Chris Collins Date: Fri, 5 Aug 2022 17:11:29 -0400 Subject: [PATCH 2/2] update styling --- .../app/ingest/source/builder/NameSourceStep.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/datahub-web-react/src/app/ingest/source/builder/NameSourceStep.tsx b/datahub-web-react/src/app/ingest/source/builder/NameSourceStep.tsx index deb3ee4db2f43..f7c5fbcb40fa0 100644 --- a/datahub-web-react/src/app/ingest/source/builder/NameSourceStep.tsx +++ b/datahub-web-react/src/app/ingest/source/builder/NameSourceStep.tsx @@ -9,7 +9,7 @@ const ControlsContainer = styled.div` margin-top: 8px; `; -const SaveRunButton = styled(Button)` +const SaveButton = styled(Button)` margin-right: 15px; `; @@ -98,17 +98,18 @@ export const NameSourceStep = ({ state, updateState, prev, submit }: StepProps)
- 0)} - onClick={() => onClickCreate(true)} + onClick={() => onClickCreate(false)} > - Save & Run - + Save +