This is an automated email from the ASF dual-hosted git repository. bbovenzi pushed a commit to branch vertical-scroll-grid in repository https://gitbox.apache.org/repos/asf/airflow.git
commit e87f8ad7026c7853d5cf59f0bf3b51913edc5826 Author: Brent Bovenzi <[email protected]> AuthorDate: Wed Mar 9 17:30:27 2022 -0500 Add vertical scrolling to grid view --- airflow/www/static/js/tree/Tree.jsx | 15 +++++++++++---- airflow/www/static/js/tree/dagRuns/index.jsx | 5 +++-- airflow/www/static/js/tree/renderTaskRows.jsx | 8 +++++--- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/airflow/www/static/js/tree/Tree.jsx b/airflow/www/static/js/tree/Tree.jsx index dbb0bbd..f2c5510 100644 --- a/airflow/www/static/js/tree/Tree.jsx +++ b/airflow/www/static/js/tree/Tree.jsx @@ -37,6 +37,7 @@ import DagRuns from './dagRuns'; const Tree = () => { const containerRef = useRef(); const scrollRef = useRef(); + const tableRef = useRef(); const { data: { groups = {}, dagRuns = [] }, isRefreshOn, onToggleRefresh } = useTreeData(); const dagRunIds = dagRuns.map((dr) => dr.runId); @@ -48,6 +49,8 @@ const Tree = () => { } }, []); + const tableWidth = tableRef && tableRef.current ? tableRef.current.offsetWidth : '100%'; + return ( <Box position="relative" ref={containerRef}> <FormControl display="flex" alignItems="center" justifyContent="flex-end" width="100%"> @@ -62,11 +65,15 @@ const Tree = () => { <Box px="24px"> <Box position="relative" width="100%" overflowX="auto" ref={scrollRef}> <Table> - <Thead> - <DagRuns containerRef={containerRef} /> + <Thead display="block" pr="10px"> + <DagRuns containerRef={containerRef} tableWidth={tableWidth} /> </Thead> - <Tbody> - {renderTaskRows({ task: groups, containerRef, dagRunIds })} + {/* eslint-disable-next-line max-len */} + {/* TODO: don't use hardcoded values. 665px is roughly the normal total header and footer heights */} + <Tbody display="block" width="100%" maxHeight="calc(100vh - 665px)" minHeight="500px" overflow="auto" ref={tableRef} pr="10px"> + {renderTaskRows({ + task: groups, containerRef, dagRunIds, tableWidth, + })} </Tbody> </Table> </Box> diff --git a/airflow/www/static/js/tree/dagRuns/index.jsx b/airflow/www/static/js/tree/dagRuns/index.jsx index a0a4931..3ee55e5 100644 --- a/airflow/www/static/js/tree/dagRuns/index.jsx +++ b/airflow/www/static/js/tree/dagRuns/index.jsx @@ -36,7 +36,7 @@ const DurationTick = ({ children, ...rest }) => ( </Text> ); -const DagRuns = ({ containerRef }) => { +const DagRuns = ({ containerRef, tableWidth }) => { const { data: { dagRuns = [] } } = useTreeData(); const durations = []; const runs = dagRuns.map((dagRun) => { @@ -66,6 +66,7 @@ const DagRuns = ({ containerRef }) => { backgroundColor="white" zIndex={2} borderBottom={0} + width={`${tableWidth - (runs.length * 16)}px`} > {!!runs.length && ( <> @@ -87,7 +88,7 @@ const DagRuns = ({ containerRef }) => { <Box position="absolute" bottom="50px" borderBottomWidth={1} zIndex={0} opacity={0.7} width={tickWidth} /> <Box position="absolute" bottom="4px" borderBottomWidth={1} zIndex={0} opacity={0.7} width={tickWidth} /> </Td> - <Td p={0} width="16px" align="right" verticalAlign="bottom" borderBottom={0}> + <Td p={0} align="right" verticalAlign="bottom" borderBottom={0} width={`${runs.length * 16}px`}> <Flex justifyContent="flex-end"> {runs.map((run, i) => ( <DagRunBar diff --git a/airflow/www/static/js/tree/renderTaskRows.jsx b/airflow/www/static/js/tree/renderTaskRows.jsx index 170c6c4..c1df25d 100644 --- a/airflow/www/static/js/tree/renderTaskRows.jsx +++ b/airflow/www/static/js/tree/renderTaskRows.jsx @@ -39,7 +39,7 @@ import { getMetaValue } from '../utils'; const dagId = getMetaValue('dag_id'); const renderTaskRows = ({ - task, containerRef, level = 0, isParentOpen, dagRunIds, + task, containerRef, level = 0, isParentOpen, dagRunIds, tableWidth, }) => task.children.map((t) => ( <Row key={t.id} @@ -49,6 +49,7 @@ const renderTaskRows = ({ prevTaskId={task.id} isParentOpen={isParentOpen} dagRunIds={dagRunIds} + tableWidth={tableWidth} /> )); @@ -107,7 +108,7 @@ const TaskInstances = ({ task, containerRef, dagRunIds }) => ( const Row = (props) => { const { - task, containerRef, level, prevTaskId, isParentOpen = true, dagRunIds, + task, containerRef, level, prevTaskId, isParentOpen = true, dagRunIds, tableWidth, } = props; const isGroup = !!task.children; @@ -147,6 +148,7 @@ const Row = (props) => { left={0} backgroundColor="white" borderBottom={0} + width={`${tableWidth - (dagRunIds.length * 16)}px`} > <Collapse in={isFullyOpen}> <TaskName @@ -160,7 +162,7 @@ const Row = (props) => { </Collapse> </Td> <Td width={0} p={0} borderBottom={0} /> - <Td p={0} align="right" _groupHover={{ backgroundColor: 'rgba(113, 128, 150, 0.1)' }} transition="background-color 0.2s" borderBottom={0}> + <Td p={0} align="right" _groupHover={{ backgroundColor: 'rgba(113, 128, 150, 0.1)' }} transition="background-color 0.2s" borderBottom={0} width={`${dagRunIds.length * 16}px`}> <Collapse in={isFullyOpen}> <TaskInstances dagRunIds={dagRunIds} task={task} containerRef={containerRef} /> </Collapse>
