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

Managed Ingestion UX Improvements (#9216)

Browse Source
This commit is contained in:
purnimagarg1 2023-11-10 22:52:04 +05:30 committed by GitHub
parent 179f103412
commit b851d59e20
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
datahub-web-react/src/app/ingest/source/IngestionSourceTableColumns.tsx
View File

@ -61,6 +61,14 @@ const CliBadge = styled.span`
margin-right: 5px; margin-right: 5px;
} }
`; `;
const StatusText = styled(Typography.Text)`
font-weight: bold;
margin-left: 8px;
color: ${(props) => props.color};
&:hover {
text-decoration: underline;
},
`;
interface TypeColumnProps { interface TypeColumnProps {
type: string; type: string;
record: any; record: any;
@ -124,9 +132,7 @@ export function LastStatusColumn({ status, record, setFocusExecutionUrn }: LastS
type="link" type="link"
onClick={() => setFocusExecutionUrn(record.lastExecUrn)} onClick={() => setFocusExecutionUrn(record.lastExecUrn)}
> >
<Typography.Text strong style={{ color, marginLeft: 8 }}> <StatusText color={color}>{text || 'Pending...'}</StatusText>
{text || 'Pending...'}
</Typography.Text>
</StatusButton> </StatusButton>
</StatusContainer> </StatusContainer>
); );

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

@ -83,6 +83,17 @@ const ShowMoreButton = styled(Button)`
padding: 0px; padding: 0px;
`; `;
const LogsContainer = styled.div<LogsContainerProps>`
margin-bottom: -25px;
${(props) =>
props.areLogsExpandable &&
!props.showExpandedLogs &&
`
-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%);
`}
`;
const modalStyle = { const modalStyle = {
top: 100, top: 100,
}; };
@ -91,6 +102,11 @@ const modalBodyStyle = {
padding: 0, padding: 0,
}; };
type LogsContainerProps = {
showExpandedLogs: boolean;
areLogsExpandable: boolean;
};
type Props = { type Props = {
urn: string; urn: string;
visible: boolean; visible: boolean;
@ -108,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, 100); const logs = (showExpandedLogs && output) || output.slice(0, 250);
const result = data?.executionRequest?.result?.status; const result = data?.executionRequest?.result?.status;
useEffect(() => { useEffect(() => {
@ -140,7 +156,7 @@ export const ExecutionDetailsModal = ({ urn, visible, onClose }: Props) => {
} }
const recipe = showExpandedRecipe ? recipeYaml : recipeYaml?.split('\n').slice(0, 1).join('\n'); const recipe = showExpandedRecipe ? recipeYaml : recipeYaml?.split('\n').slice(0, 1).join('\n');
const areLogsExpandable = output.length > 100; const areLogsExpandable = output.length > 250;
const isRecipeExpandable = recipeYaml?.includes('\n'); const isRecipeExpandable = recipeYaml?.includes('\n');
return ( return (
@ -181,14 +197,16 @@ export const ExecutionDetailsModal = ({ urn, visible, onClose }: Props) => {
Download Download
</Button> </Button>
</SectionSubHeader> </SectionSubHeader>
<Typography.Paragraph ellipsis> <LogsContainer areLogsExpandable={areLogsExpandable} showExpandedLogs={showExpandedLogs}>
<pre>{`${logs}${!showExpandedLogs && areLogsExpandable ? '...' : ''}`}</pre> <Typography.Paragraph ellipsis>
{areLogsExpandable && ( <pre>{`${logs}${!showExpandedLogs && areLogsExpandable ? '...' : ''}`}</pre>
<ShowMoreButton type="link" onClick={() => setShowExpandedLogs(!showExpandedLogs)}> </Typography.Paragraph>
{showExpandedLogs ? 'Hide' : 'Show More'} </LogsContainer>
</ShowMoreButton> {areLogsExpandable && (
)} <ShowMoreButton type="link" onClick={() => setShowExpandedLogs(!showExpandedLogs)}>
</Typography.Paragraph> {showExpandedLogs ? 'Hide' : 'Show More'}
</ShowMoreButton>
)}
</LogsSection> </LogsSection>
{recipe && ( {recipe && (
<RecipeSection> <RecipeSection>