yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-12 18:47:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fade recipe section to transparent on Ingestion Run Details (#9404)

Browse Source
This commit is contained in:
purnimagarg1 2023-12-19 22:41:18 +05:30 committed by GitHub
parent 94a1603676
commit 265d6bdb53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
datahub-web-react/src/app/ingest/source/executions/ExecutionRequestDetailsModal.tsx
View File

@ -83,11 +83,11 @@ const ShowMoreButton = styled(Button)`
padding: 0px; padding: 0px;
`; `;
const LogsContainer = styled.div<LogsContainerProps>` const DetailsContainer = styled.div<DetailsContainerProps>`
margin-bottom: -25px; margin-bottom: -25px;
${(props) => ${(props) =>
props.areLogsExpandable && props.areDetailsExpandable &&
!props.showExpandedLogs && !props.showExpandedDetails &&
` `
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(255,0,0,0.5) 60%, rgba(255,0,0,0) 90% ); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(255,0,0,0.5) 60%, rgba(255,0,0,0) 90% );
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(255,0,0,0.5) 60%, rgba(255,0,0,0) 90%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(255,0,0,0.5) 60%, rgba(255,0,0,0) 90%);
@ -102,9 +102,9 @@ const modalBodyStyle = {
padding: 0, padding: 0,
}; };
type LogsContainerProps = { type DetailsContainerProps = {
showExpandedLogs: boolean; showExpandedDetails: boolean;
areLogsExpandable: boolean; areDetailsExpandable: boolean;
}; };
type Props = { type Props = {
@ -124,7 +124,7 @@ export const ExecutionDetailsModal = ({ urn, visible, onClose }: Props) => {
downloadFile(output, `exec-${urn}.log`); downloadFile(output, `exec-${urn}.log`);
}; };
const logs = (showExpandedLogs && output) || output.slice(0, 250); const logs = (showExpandedLogs && output) || output?.split('\n').slice(0, 5).join('\n');
const result = data?.executionRequest?.result?.status; const result = data?.executionRequest?.result?.status;
useEffect(() => { useEffect(() => {
@ -154,10 +154,10 @@ export const ExecutionDetailsModal = ({ urn, visible, onClose }: Props) => {
} catch (e) { } catch (e) {
recipeYaml = ''; recipeYaml = '';
} }
const recipe = showExpandedRecipe ? recipeYaml : recipeYaml?.split('\n').slice(0, 1).join('\n'); const recipe = showExpandedRecipe ? recipeYaml : recipeYaml?.split('\n').slice(0, 5).join('\n');
const areLogsExpandable = output.length > 250; const areLogsExpandable = output?.split(/\r\n|\r|\n/)?.length > 5;
const isRecipeExpandable = recipeYaml?.includes('\n'); const isRecipeExpandable = recipeYaml?.split(/\r\n|\r|\n/)?.length > 5;
return ( return (
<Modal <Modal
@ -197,11 +197,11 @@ export const ExecutionDetailsModal = ({ urn, visible, onClose }: Props) => {
Download Download
</Button> </Button>
</SectionSubHeader> </SectionSubHeader>
<LogsContainer areLogsExpandable={areLogsExpandable} showExpandedLogs={showExpandedLogs}> <DetailsContainer areDetailsExpandable={areLogsExpandable} showExpandedDetails={showExpandedLogs}>
<Typography.Paragraph ellipsis> <Typography.Paragraph ellipsis>
<pre>{`${logs}${!showExpandedLogs && areLogsExpandable ? '...' : ''}`}</pre> <pre>{`${logs}${!showExpandedLogs && areLogsExpandable ? '...' : ''}`}</pre>
</Typography.Paragraph> </Typography.Paragraph>
</LogsContainer> </DetailsContainer>
{areLogsExpandable && ( {areLogsExpandable && (
<ShowMoreButton type="link" onClick={() => setShowExpandedLogs(!showExpandedLogs)}> <ShowMoreButton type="link" onClick={() => setShowExpandedLogs(!showExpandedLogs)}>
{showExpandedLogs ? 'Hide' : 'Show More'} {showExpandedLogs ? 'Hide' : 'Show More'}
@ -216,9 +216,14 @@ export const ExecutionDetailsModal = ({ urn, visible, onClose }: Props) => {
The recipe used for this ingestion run. The recipe used for this ingestion run.
</SubHeaderParagraph> </SubHeaderParagraph>
</SectionSubHeader> </SectionSubHeader>
<Typography.Paragraph ellipsis> <DetailsContainer
<pre>{`${recipe}${!showExpandedRecipe && isRecipeExpandable ? '\n...' : ''}`}</pre> areDetailsExpandable={isRecipeExpandable}
</Typography.Paragraph> showExpandedDetails={showExpandedRecipe}
>
<Typography.Paragraph ellipsis>
<pre>{`${recipe}${!showExpandedRecipe && isRecipeExpandable ? '...' : ''}`}</pre>
</Typography.Paragraph>
</DetailsContainer>
{isRecipeExpandable && ( {isRecipeExpandable && (
<ShowMoreButton type="link" onClick={() => setShowExpandedRecipe((v) => !v)}> <ShowMoreButton type="link" onClick={() => setShowExpandedRecipe((v) => !v)}>
{showExpandedRecipe ? 'Hide' : 'Show More'} {showExpandedRecipe ? 'Hide' : 'Show More'}