You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by bb...@apache.org on 2022/04/11 15:32:30 UTC
[airflow] 01/01: Remove table selection for now
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 <br...@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 (