Skip to content

Tree view: Highlight dag run on hover #21476

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bbovenzi merged 6 commits into from
Feb 15, 2022
Merged

Tree view: Highlight dag run on hover #21476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7e43360
vertical highlighting when hover on group
bbovenzi Feb 8, 2022
47fad2b
full horizontal/vertical crosshairs
bbovenzi Feb 9, 2022
29b88dc
fix ref, js only classname, linting
bbovenzi Feb 9, 2022
1752894
calculate vertical bar height
bbovenzi Feb 9, 2022
8ae4081
improve vertical highlight calculation
bbovenzi Feb 10, 2022
ae83247
update package.json
bbovenzi Feb 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion airflow/www/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
"webpack-manifest-plugin": "^2.2.0"
},
"dependencies": {
"@chakra-ui/react": "^1.6.6",
"@chakra-ui/react": "^1.8.3",
"@emotion/cache": "^11.4.0",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11",
Expand Down
15 changes: 14 additions & 1 deletion airflow/www/static/js/tree/StatusBox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,24 @@ const StatusBox = ({
} = instance;
const onClick = () => executionDate && callModal(taskId, executionDate, extraLinks, tryNumber, operator === 'SubDagOperator' || undefined, runId);

// Fetch the corresponding column element and set its background color when hovering
const onMouseOver = () => {
[...containerRef.current.getElementsByClassName(`js-${runId}`)]
.forEach((e) => { e.style.backgroundColor = 'rgba(113, 128, 150, 0.1)'; });
};
const onMouseLeave = () => {
[...containerRef.current.getElementsByClassName(`js-${runId}`)]
.forEach((e) => { e.style.backgroundColor = null; });
};

return (
<Tooltip
label={<InstanceTooltip instance={instance} group={group} />}
fontSize="md"
portalProps={{ containerRef }}
hasArrow
placement="top"
openDelay={100}
openDelay={400}
>
<Flex
p="1px"
Expand All @@ -55,6 +65,9 @@ const StatusBox = ({
onClick={onClick}
cursor={!group.children && 'pointer'}
data-testid="task-instance"
zIndex={1}
onMouseEnter={onMouseOver}
onMouseLeave={onMouseLeave}
{...rest}
>
<Box
Expand Down
8 changes: 5 additions & 3 deletions airflow/www/static/js/tree/Tree.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
FormLabel,
Spinner,
Text,
Thead,
} from '@chakra-ui/react';

import useTreeData from './useTreeData';
Expand All @@ -47,7 +48,7 @@ const Tree = () => {
}, []);

return (
<Box position="relative">
<Box position="relative" ref={containerRef}>
<FormControl display="flex" alignItems="center" justifyContent="flex-end" width="100%">
{isRefreshOn && <Spinner color="blue.500" speed="1s" mr="4px" />}
<FormLabel htmlFor="auto-refresh" mb={0} fontSize="12px" fontWeight="normal">
Expand All @@ -60,14 +61,15 @@ const Tree = () => {
<Box px="24px">
<Box position="relative" width="100%" overflowX="auto" ref={scrollRef}>
<Table>
<Tbody>
<Thead>
<DagRuns containerRef={containerRef} />
</Thead>
<Tbody>
{renderTaskRows({ task: groups, containerRef })}
</Tbody>
</Table>
</Box>
</Box>
<div ref={containerRef} />
</Box>
);
};
Expand Down
118 changes: 72 additions & 46 deletions airflow/www/static/js/tree/dagRuns/Bar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,55 +32,81 @@ import { MdPlayArrow } from 'react-icons/md';
import DagRunTooltip from './Tooltip';
import { callModalDag } from '../../dag';

const BAR_HEIGHT = 100;

const DagRunBar = ({
run, max, index, totalRuns, containerRef,
}) => (
<Box position="relative">
<Flex
height="100px"
alignItems="flex-end"
justifyContent="center"
pb="2px"
px="3px"
onClick={() => {
callModalDag({ execution_date: run.executionDate, dag_id: run.dagId, run_id: run.runId });
}}
>
<Tooltip
label={<DagRunTooltip dagRun={run} />}
hasArrow
portalProps={{ containerRef }}
placement="top"
openDelay={100}
}) => {
let highlightHeight = '100%';
if (containerRef && containerRef.current) {
const table = containerRef.current.getElementsByTagName('tbody')[0];
highlightHeight = table.offsetHeight + BAR_HEIGHT;
}
return (
<Box position="relative">
<Flex
height={BAR_HEIGHT}
alignItems="flex-end"
justifyContent="center"
mb="2px"
// py="2px"
px="2px"
mx="1px"
cursor="pointer"
width="14px"
zIndex={1}
onClick={() => {
callModalDag({ execution_date: run.executionDate, dag_id: run.dagId, run_id: run.runId });
}}
position="relative"
data-peer
>
<Flex
width="10px"
height={`${(run.duration / max) * 100}px`}
minHeight="12px"
backgroundColor={stateColors[run.state]}
borderRadius={2}
cursor="pointer"
pb="2px"
direction="column"
justifyContent="flex-end"
alignItems="center"
px="1px"
zIndex={1}
data-testid="run"
<Tooltip
label={<DagRunTooltip dagRun={run} />}
hasArrow
portalProps={{ containerRef }}
placement="top"
openDelay={100}
>
{run.runType === 'manual' && <MdPlayArrow size="8px" color="white" data-testid="manual-run" />}
</Flex>
</Tooltip>
</Flex>
{index < totalRuns - 3 && index % 10 === 0 && (
<VStack position="absolute" top="0" left="-22px" spacing={0}>
<Text fontSize="10px" color="gray.400" whiteSpace="nowrap" transform="rotate(-30deg) translateX(28px)" mt="-23px !important">
{moment.utc(run.executionDate).format('MMM DD, HH:mm')}
</Text>
<Box borderLeftWidth={1} zIndex={0} opacity={0.7} height="100px" />
</VStack>
)}
</Box>
);
<Flex
width="10px"
height={`${(run.duration / max) * BAR_HEIGHT}px`}
minHeight="12px"
backgroundColor={stateColors[run.state]}
borderRadius={2}
cursor="pointer"
pb="2px"
direction="column"
justifyContent="flex-end"
alignItems="center"
px="1px"
zIndex={1}
data-testid="run"
>
{run.runType === 'manual' && <MdPlayArrow size="8px" color="white" data-testid="manual-run" />}
</Flex>
</Tooltip>
</Flex>
<Box
position="absolute"
width="100%"
top="1px"
height={highlightHeight}
className={`js-${run.runId}`}
_peerHover={{ backgroundColor: 'rgba(113, 128, 150, 0.1)' }}
zIndex={0}
transition="background-color 0.2s"
/>
{index < totalRuns - 3 && index % 10 === 0 && (
<VStack position="absolute" top="0" left="8px" spacing={0} zIndex={0} width={0}>
<Text fontSize="10px" color="gray.400" whiteSpace="nowrap" transform="rotate(-30deg) translateX(28px)" mt="-23px !important">
{moment.utc(run.executionDate).format('MMM DD, HH:mm')}
</Text>
<Box borderLeftWidth={1} opacity={0.7} height="100px" zIndex={0} />
</VStack>
)}
</Box>
);
};

export default DagRunBar;
4 changes: 2 additions & 2 deletions airflow/www/static/js/tree/renderTaskRows.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const renderTaskRows = ({
const TaskName = ({
isGroup, onToggle, isOpen, level, taskName,
}) => (
<Box _groupHover={{ backgroundColor: 'rgba(113, 128, 150, 0.1)' }}>
<Box _groupHover={{ backgroundColor: 'rgba(113, 128, 150, 0.1)' }} transition="background-color 0.2s">
<Flex
as={isGroup ? 'button' : 'div'}
onClick={() => isGroup && onToggle()}
Expand Down Expand Up @@ -155,7 +155,7 @@ const Row = ({
</Collapse>
</Td>
<Td width={0} p={0} borderBottom={0} />
<Td p={0} align="right" _groupHover={{ backgroundColor: 'rgba(113, 128, 150, 0.1)' }} borderBottom={0}>
<Td p={0} align="right" _groupHover={{ backgroundColor: 'rgba(113, 128, 150, 0.1)' }} transition="background-color 0.2s" borderBottom={0}>
<Collapse in={isFullyOpen}>
<TaskInstances dagRuns={dagRuns} task={task} containerRef={containerRef} />
</Collapse>
Expand Down
Loading