yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-10-11 17:08:23 +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;
}
`;
const StatusText = styled(Typography.Text)`
font-weight: bold;
margin-left: 8px;
color: ${(props) => props.color};
&:hover {
text-decoration: underline;
},
`;
interface TypeColumnProps {
type: string;
record: any;
@ -124,9 +132,7 @@ export function LastStatusColumn({ status, record, setFocusExecutionUrn }: LastS
type="link"
onClick={() => setFocusExecutionUrn(record.lastExecUrn)}
>
<Typography.Text strong style={{ color, marginLeft: 8 }}>
{text || 'Pending...'}
</Typography.Text>
<StatusText color={color}>{text || 'Pending...'}</StatusText>
</StatusButton>
</StatusContainer>
);

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

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