This is an automated email from the ASF dual-hosted git repository. bbovenzi pushed a commit to branch mapped-task-action-ux in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 53dc1dc51b796ab597c3ff37acc5b7d427ee8733 Author: Brent Bovenzi <brent.bove...@gmail.com> AuthorDate: Mon Apr 11 11:13:40 2022 -0400 Remove table selection for now --- airflow/www/static/js/tree/Table.jsx | 44 ++-------------------- .../tree/details/content/taskInstance/Details.jsx | 2 +- .../content/taskInstance/MappedInstances.jsx | 3 +- .../js/tree/details/content/taskInstance/index.jsx | 24 +----------- .../content/taskInstance/taskActions/Clear.jsx | 2 - .../taskInstance/taskActions/MarkFailed.jsx | 3 +- .../taskInstance/taskActions/MarkSuccess.jsx | 4 +- .../content/taskInstance/taskActions/Run.jsx | 22 +++-------- 8 files changed, 16 insertions(+), 88 deletions(-) diff --git a/airflow/www/static/js/tree/Table.jsx b/airflow/www/static/js/tree/Table.jsx index 32119cf50e..06eb84cad4 100644 --- a/airflow/www/static/js/tree/Table.jsx +++ b/airflow/www/static/js/tree/Table.jsx @@ -21,7 +21,7 @@ * Custom wrapper of react-table using Chakra UI components */ -import React, { useEffect, useRef, forwardRef } from 'react'; +import React, { useEffect } from 'react'; import { Flex, Table as ChakraTable, @@ -33,10 +33,9 @@ import { IconButton, Text, useColorModeValue, - Checkbox, } from '@chakra-ui/react'; import { - useTable, useSortBy, usePagination, useRowSelect, + useTable, useSortBy, usePagination, } from 'react-table'; import { MdKeyboardArrowLeft, MdKeyboardArrowRight, @@ -45,23 +44,8 @@ import { TiArrowUnsorted, TiArrowSortedDown, TiArrowSortedUp, } from 'react-icons/ti'; -const IndeterminateCheckbox = forwardRef( - ({ indeterminate, ...rest }, ref) => { - const defaultRef = useRef(); - const resolvedRef = ref || defaultRef; - - useEffect(() => { - resolvedRef.current.indeterminate = indeterminate; - }, [resolvedRef, indeterminate]); - - return ( - <Checkbox ref={resolvedRef} {...rest} /> - ); - }, -); - const Table = ({ - data, columns, manualPagination, pageSize = 25, setSortBy, isLoading = false, selectRows, + data, columns, manualPagination, pageSize = 25, setSortBy, isLoading = false, }) => { const { totalEntries, offset, setOffset } = manualPagination || {}; const oddColor = useColorModeValue('gray.50', 'gray.900'); @@ -82,8 +66,7 @@ const Table = ({ canNextPage, nextPage, previousPage, - selectedFlatRows, - state: { pageIndex, sortBy, selectedRowIds }, + state: { pageIndex, sortBy }, } = useTable( { columns, @@ -98,20 +81,6 @@ const Table = ({ }, useSortBy, usePagination, - useRowSelect, - (hooks) => { - hooks.visibleColumns.push((cols) => [ - { - id: 'selection', - Cell: ({ row }) => ( - <div> - <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} /> - </div> - ), - }, - ...cols, - ]); - }, ); const handleNext = () => { @@ -128,11 +97,6 @@ const Table = ({ if (setSortBy) setSortBy(sortBy); }, [sortBy, setSortBy]); - useEffect(() => { - if (selectRows) selectRows(selectedFlatRows.map((row) => row.original.mapIndex)); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedRowIds, selectRows]); - return ( <> <ChakraTable {...getTableProps()}> diff --git a/airflow/www/static/js/tree/details/content/taskInstance/Details.jsx b/airflow/www/static/js/tree/details/content/taskInstance/Details.jsx index b413a647de..6ef9fa7460 100644 --- a/airflow/www/static/js/tree/details/content/taskInstance/Details.jsx +++ b/airflow/www/static/js/tree/details/content/taskInstance/Details.jsx @@ -92,7 +92,7 @@ const Details = ({ instance, group, operator }) => { <br /> </> )} - {mappedStates.length > 0 && ( + {mappedStates && mappedStates.length > 0 && ( <Text> {mappedStates.length} {' '} diff --git a/airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx b/airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx index 77c0713ab3..42bbdca66f 100644 --- a/airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx +++ b/airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx @@ -46,7 +46,7 @@ const IconLink = (props) => ( ); const MappedInstances = ({ - dagId, runId, taskId, selectRows, + dagId, runId, taskId, }) => { const limit = 25; const [offset, setOffset] = useState(0); @@ -147,7 +147,6 @@ const MappedInstances = ({ pageSize={limit} setSortBy={setSortBy} isLoading={isLoading} - selectRows={selectRows} /> </Box> ); diff --git a/airflow/www/static/js/tree/details/content/taskInstance/index.jsx b/airflow/www/static/js/tree/details/content/taskInstance/index.jsx index 62ffee156a..f4d28e621d 100644 --- a/airflow/www/static/js/tree/details/content/taskInstance/index.jsx +++ b/airflow/www/static/js/tree/details/content/taskInstance/index.jsx @@ -17,14 +17,13 @@ * under the License. */ -import React, { useState } from 'react'; +import React from 'react'; import { Box, VStack, Divider, StackDivider, Text, - Flex, } from '@chakra-ui/react'; import RunAction from './taskActions/Run'; @@ -56,7 +55,6 @@ const getTask = ({ taskId, runId, task }) => { }; const TaskInstance = ({ taskId, runId }) => { - const [selectedRows, setSelectedRows] = useState([]); const { data: { groups = {}, dagRuns = [] } } = useTreeData(); const group = getTask({ taskId, runId, task: groups }); const run = dagRuns.find((r) => r.runId === runId); @@ -71,11 +69,6 @@ const TaskInstance = ({ taskId, runId }) => { const instance = group.instances.find((ti) => ti.runId === runId); - let taskActionsTitle = 'Task Actions'; - if (isMapped) { - taskActionsTitle += ` for ${selectedRows.length || 'all'} mapped task${selectedRows.length !== 1 ? 's' : ''}`; - } - return ( <Box py="4px"> {!isGroup && ( @@ -88,40 +81,27 @@ const TaskInstance = ({ taskId, runId }) => { )} {!isGroup && ( <Box my={3}> - <Text as="strong">{taskActionsTitle}</Text> - <Flex maxHeight="20px" minHeight="20px"> - {selectedRows.length ? ( - <Text color="red.500"> - Clear, Mark Failed, and Mark Success do not yet work with individual mapped tasks. - </Text> - ) : <Divider my={2} />} - </Flex> - {/* visibility={selectedRows.length ? 'visible' : 'hidden'} */} <VStack justifyContent="center" divider={<StackDivider my={3} />}> <RunAction runId={runId} taskId={taskId} dagId={dagId} - selectedRows={selectedRows} /> <ClearAction runId={runId} taskId={taskId} dagId={dagId} executionDate={executionDate} - selectedRows={selectedRows} /> <MarkFailedAction runId={runId} taskId={taskId} dagId={dagId} - selectedRows={selectedRows} /> <MarkSuccessAction runId={runId} taskId={taskId} dagId={dagId} - selectedRows={selectedRows} /> </VStack> <Divider my={2} /> @@ -143,7 +123,7 @@ const TaskInstance = ({ taskId, runId }) => { extraLinks={extraLinks} /> {isMapped && ( - <MappedInstances dagId={dagId} runId={runId} taskId={taskId} selectRows={setSelectedRows} /> + <MappedInstances dagId={dagId} runId={runId} taskId={taskId} /> )} </Box> ); diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Clear.jsx b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Clear.jsx index cada7b59ed..4196edc6b9 100644 --- a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Clear.jsx +++ b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Clear.jsx @@ -34,7 +34,6 @@ const Run = ({ runId, taskId, executionDate, - selectedRows, }) => { const [affectedTasks, setAffectedTasks] = useState([]); @@ -114,7 +113,6 @@ const Run = ({ colorScheme="blue" onClick={onClick} isLoading={isLoading} - isDisabled={!!selectedRows.length} title="Clearing deletes the previous state of the task instance, allowing it to get re-triggered by the scheduler or a backfill command" > Clear diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkFailed.jsx b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkFailed.jsx index 6bc10c066e..fe277c9eef 100644 --- a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkFailed.jsx +++ b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkFailed.jsx @@ -33,7 +33,6 @@ const MarkFailed = ({ dagId, runId, taskId, - selectedRows, }) => { const [affectedTasks, setAffectedTasks] = useState([]); @@ -100,7 +99,7 @@ const MarkFailed = ({ <ActionButton bg={upstream && 'gray.100'} onClick={onToggleUpstream} name="Upstream" /> <ActionButton bg={downstream && 'gray.100'} onClick={onToggleDownstream} name="Downstream" /> </ButtonGroup> - <Button colorScheme="red" onClick={onClick} isLoading={isMarkLoading || isConfirmLoading} isDisabled={!!selectedRows.length}> + <Button colorScheme="red" onClick={onClick} isLoading={isMarkLoading || isConfirmLoading}> Mark Failed </Button> <ConfirmDialog diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkSuccess.jsx b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkSuccess.jsx index b4d2b8c047..06bc80c756 100644 --- a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkSuccess.jsx +++ b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkSuccess.jsx @@ -30,7 +30,7 @@ import ActionButton from './ActionButton'; import { useMarkSuccessTask, useConfirmMarkTask } from '../../../../api'; const Run = ({ - dagId, runId, taskId, selectedRows, + dagId, runId, taskId, }) => { const [affectedTasks, setAffectedTasks] = useState([]); @@ -95,7 +95,7 @@ const Run = ({ <ActionButton bg={upstream && 'gray.100'} onClick={onToggleUpstream} name="Upstream" /> <ActionButton bg={downstream && 'gray.100'} onClick={onToggleDownstream} name="Downstream" /> </ButtonGroup> - <Button colorScheme="green" onClick={onClick} isLoading={isMarkLoading || isConfirmLoading} isDisabled={!!selectedRows.length}> + <Button colorScheme="green" onClick={onClick} isLoading={isMarkLoading || isConfirmLoading}> Mark Success </Button> <ConfirmDialog diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Run.jsx b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Run.jsx index d161e44531..d77c3e947d 100644 --- a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Run.jsx +++ b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Run.jsx @@ -35,7 +35,6 @@ const Run = ({ dagId, runId, taskId, - selectedRows, }) => { const containerRef = useContainerRef(); const [ignoreAllDeps, setIgnoreAllDeps] = useState(false); @@ -50,22 +49,11 @@ const Run = ({ const { mutate: onRun, isLoading } = useRunTask(dagId, runId, taskId); const onClick = () => { - if (selectedRows.length) { - selectedRows.forEach((mapIndex) => { - onRun({ - ignoreAllDeps, - ignoreTaskState, - ignoreTaskDeps, - mapIndex, - }); - }); - } else { - onRun({ - ignoreAllDeps, - ignoreTaskState, - ignoreTaskDeps, - }); - } + onRun({ + ignoreAllDeps, + ignoreTaskState, + ignoreTaskDeps, + }); }; return (