This is an automated email from the ASF dual-hosted git repository. bbovenzi pushed a commit to branch mapped-task-drawer in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 21b27b7a1f41ffacfa5978b3c9b0671b4e56826d Author: Brent Bovenzi <[email protected]> AuthorDate: Mon Feb 28 12:24:27 2022 -0500 improve rendering and add selected dag run --- airflow/www/static/js/tree/SidePanel.jsx | 28 ++++++++++++++++++--------- airflow/www/static/js/tree/StatusBox.jsx | 24 +++++++++++------------ airflow/www/static/js/tree/Tree.jsx | 6 +++++- airflow/www/static/js/tree/dagRuns/Bar.jsx | 9 ++++----- airflow/www/static/js/tree/dagRuns/index.jsx | 3 ++- airflow/www/static/js/tree/renderTaskRows.jsx | 9 ++++++--- 6 files changed, 47 insertions(+), 32 deletions(-) diff --git a/airflow/www/static/js/tree/SidePanel.jsx b/airflow/www/static/js/tree/SidePanel.jsx index 7a21eba..88439a0 100644 --- a/airflow/www/static/js/tree/SidePanel.jsx +++ b/airflow/www/static/js/tree/SidePanel.jsx @@ -25,8 +25,6 @@ import { Flex, Text, useDisclosure, - CloseButton, - Button, IconButton, } from '@chakra-ui/react'; import { MdKeyboardArrowLeft, MdKeyboardArrowRight } from 'react-icons/md'; @@ -38,30 +36,42 @@ const SidePanel = ({ instance: { runId, taskId, executionDate } }) => { if (!isOpen) { return ( <IconButton - ml={2} + m={2} icon={<MdKeyboardArrowLeft size={18} />} aria-label="Open Details Panel" onClick={onOpen} /> ); } - const title = runId && taskId - ? ( + let title = ''; + if (runId && taskId) { + title = ( <> <chakra.span>Task Instance: </chakra.span> <chakra.b>{taskId}</chakra.b> <chakra.span> at </chakra.span> <chakra.b>{formatDateTime(moment.utc(executionDate))}</chakra.b> </> - ) - : ( + ); + } else if (runId) { + title = ( + <> + <chakra.span>Dag Run: </chakra.span> + <chakra.b>{runId}</chakra.b> + <chakra.span> at </chakra.span> + <chakra.b>{formatDateTime(moment.utc(executionDate))}</chakra.b> + </> + ); + } else { + title = ( <chakra.span>Dag Details: </chakra.span> ); + } return ( - <Flex bg="gray.200" maxWidth={300} minWidth={300} flexDirection="column" p={3}> + <Flex bg="gray.200" maxWidth={isOpen ? '50%' : 0} minWidth={isOpen ? 300 : 0} flexDirection="column" p={3}> <IconButton - ml={2} + m={2} icon={<MdKeyboardArrowRight size={18} />} aria-label="Close Details Panel" onClick={onClose} diff --git a/airflow/www/static/js/tree/StatusBox.jsx b/airflow/www/static/js/tree/StatusBox.jsx index b4abc93..815e6a1 100644 --- a/airflow/www/static/js/tree/StatusBox.jsx +++ b/airflow/www/static/js/tree/StatusBox.jsx @@ -27,34 +27,32 @@ import { useTheme, } from '@chakra-ui/react'; -// import { callModal } from '../dag'; import InstanceTooltip from './InstanceTooltip'; const StatusBox = ({ - group, instance, containerRef, extraLinks = [], onSelectInstance, ...rest + group, instance, containerRef, onSelectInstance, selectedInstance, ...rest }) => { - const { - executionDate, taskId, tryNumber = 0, operator, runId, - } = instance; + const { runId } = instance; const { colors } = useTheme(); const hoverBlue = `${colors.blue[100]}50`; - // const onOpenModal = () => executionDate && callModal(taskId, executionDate, extraLinks, tryNumber, operator === 'SubDagOperator' || undefined, runId); - const onClick = (e) => { - e.stopPropagation(); - onSelectInstance(instance); - }; - // Fetch the corresponding column element and set its background color when hovering const onMouseOver = () => { - [...containerRef.current.getElementsByClassName(`js-${runId}`)] - .forEach((e) => { e.style.backgroundColor = hoverBlue; }); + if (selectedInstance.runId !== runId) { + [...containerRef.current.getElementsByClassName(`js-${runId}`)] + .forEach((e) => { e.style.backgroundColor = hoverBlue; }); + } }; const onMouseLeave = () => { [...containerRef.current.getElementsByClassName(`js-${runId}`)] .forEach((e) => { e.style.backgroundColor = null; }); }; + const onClick = (e) => { + e.stopPropagation(); + onSelectInstance(instance); + }; + return ( <> <Tooltip diff --git a/airflow/www/static/js/tree/Tree.jsx b/airflow/www/static/js/tree/Tree.jsx index 154a5db..9ae5833 100644 --- a/airflow/www/static/js/tree/Tree.jsx +++ b/airflow/www/static/js/tree/Tree.jsx @@ -74,7 +74,11 @@ const Tree = () => { <Box mr="12px" pb="12px" overflowX="auto" ref={scrollRef} maxWidth="60vw"> <Table height={0}> <Thead> - <DagRuns containerRef={containerRef} selectedInstance={selectedInstance} /> + <DagRuns + containerRef={containerRef} + selectedInstance={selectedInstance} + onSelectInstance={onSelectInstance} + /> </Thead> <Tbody> {renderTaskRows({ diff --git a/airflow/www/static/js/tree/dagRuns/Bar.jsx b/airflow/www/static/js/tree/dagRuns/Bar.jsx index 4dbe20d..c64abdd 100644 --- a/airflow/www/static/js/tree/dagRuns/Bar.jsx +++ b/airflow/www/static/js/tree/dagRuns/Bar.jsx @@ -31,12 +31,11 @@ import { 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, selectedInstance, + run, max, index, totalRuns, containerRef, selectedInstance, onSelectInstance, }) => { const { colors } = useTheme(); const hoverBlue = `${colors.blue[100]}50`; @@ -53,14 +52,14 @@ const DagRunBar = ({ 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 }); + onClick={(e) => { + e.stopPropagation(); + onSelectInstance(run); }} position="relative" data-peer diff --git a/airflow/www/static/js/tree/dagRuns/index.jsx b/airflow/www/static/js/tree/dagRuns/index.jsx index 7de949f..7459634 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, selectedInstance }) => { +const DagRuns = ({ containerRef, selectedInstance, onSelectInstance }) => { const { data: { dagRuns = [] } } = useTreeData(); const durations = []; const runs = dagRuns.map((dagRun) => { @@ -98,6 +98,7 @@ const DagRuns = ({ containerRef, selectedInstance }) => { totalRuns={runs.length} containerRef={containerRef} selectedInstance={selectedInstance} + onSelectInstance={onSelectInstance} /> ))} </Flex> diff --git a/airflow/www/static/js/tree/renderTaskRows.jsx b/airflow/www/static/js/tree/renderTaskRows.jsx index 1a9e1ba..c227353 100644 --- a/airflow/www/static/js/tree/renderTaskRows.jsx +++ b/airflow/www/static/js/tree/renderTaskRows.jsx @@ -85,24 +85,26 @@ const TaskName = ({ ); const TaskInstances = ({ - task, containerRef, dagRunIds, onSelectInstance, + task, containerRef, dagRunIds, onSelectInstance, selectedInstance, }) => ( <Flex justifyContent="flex-end"> {dagRunIds.map((runId) => { // Check if an instance exists for the run, or return an empty box const instance = task.instances.find((gi) => gi.runId === runId); + const key = `${runId}-${task.id}`; return instance ? ( <StatusBox - key={`${runId}-${task.id}`} + key={key} instance={instance} containerRef={containerRef} extraLinks={task.extraLinks} group={task} onSelectInstance={onSelectInstance} + selectedInstance={selectedInstance} /> ) - : <Box key={`${runId}-${task.id}`} width="16px" data-testid="blank-task" />; + : <Box key={key} width="16px" data-testid="blank-task" />; })} </Flex> ); @@ -185,6 +187,7 @@ const Row = (props) => { task={task} containerRef={containerRef} onSelectInstance={onSelectInstance} + selectedInstance={selectedInstance} /> </Collapse> </Td>
