You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ds...@apache.org on 2022/07/25 18:40:03 UTC
[airflow] branch main updated: Use tables in grid details panes (#25258)
This is an automated email from the ASF dual-hosted git repository.
dstandish pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 52d11a9fdd Use tables in grid details panes (#25258)
52d11a9fdd is described below
commit 52d11a9fdda499ee936356636b66b9557eedf8d5
Author: Daniel Standish <15...@users.noreply.github.com>
AuthorDate: Mon Jul 25 11:39:57 2022 -0700
Use tables in grid details panes (#25258)
---
airflow/www/static/js/dag/details/dagRun/index.tsx | 159 ++++++++++++---------
.../static/js/dag/details/taskInstance/Details.tsx | 113 ++++++++-------
scripts/ci/pre_commit/pre_commit_www_lint.py | 2 +-
3 files changed, 150 insertions(+), 124 deletions(-)
diff --git a/airflow/www/static/js/dag/details/dagRun/index.tsx b/airflow/www/static/js/dag/details/dagRun/index.tsx
index f28c575871..65e1a76a63 100644
--- a/airflow/www/static/js/dag/details/dagRun/index.tsx
+++ b/airflow/www/static/js/dag/details/dagRun/index.tsx
@@ -24,6 +24,10 @@ import {
Button,
Link,
Divider,
+ Table,
+ Tbody,
+ Tr,
+ Td,
} from '@chakra-ui/react';
import { MdPlayArrow, MdOutlineSchedule, MdOutlineAccountTree } from 'react-icons/md';
@@ -74,7 +78,7 @@ const DagRun = ({ runId }: Props) => {
const detailsLink = appendSearchParams(dagRunDetailsUrl, detailsParams);
return (
- <Box py="4px">
+ <>
<Flex justifyContent="space-between" alignItems="center">
<Button as={Link} variant="ghost" colorScheme="blue" href={detailsLink}>DAG Run Details</Button>
<Button as={Link} variant="ghost" colorScheme="blue" href={graphLink} leftIcon={<MdOutlineAccountTree />}>
@@ -83,76 +87,89 @@ const DagRun = ({ runId }: Props) => {
<MarkFailedRun dagId={dagId} runId={runId} />
<MarkSuccessRun dagId={dagId} runId={runId} />
</Flex>
- <Divider my={3} />
- <Flex justifyContent="flex-end" alignItems="center">
- <Text fontWeight="bold" mr={2}>Re-run:</Text>
- <ClearRun dagId={dagId} runId={runId} />
- <QueueRun dagId={dagId} runId={runId} />
- </Flex>
- <Divider my={3} />
- <Flex alignItems="center">
- <Text as="strong">Status:</Text>
- <SimpleStatus state={state} mx={2} />
- {state || 'no status'}
- </Flex>
- <br />
- <Text whiteSpace="nowrap">
- Run Id:
- {' '}
- <ClipboardText value={runId} />
- </Text>
- <Text>
- Run Type:
- {' '}
- {runType === 'manual' && <MdPlayArrow style={{ display: 'inline' }} />}
- {runType === 'backfill' && <RiArrowGoBackFill style={{ display: 'inline' }} />}
- {runType === 'scheduled' && <MdOutlineSchedule style={{ display: 'inline' }} />}
- {runType}
- </Text>
- <Text>
- Duration:
- {' '}
- {formatDuration(getDuration(startDate, endDate))}
- </Text>
- {lastSchedulingDecision && (
- <Text>
- Last Scheduling Decision:
- {' '}
- <Time dateTime={lastSchedulingDecision} />
- </Text>
- )}
- <br />
- {startDate && (
- <Text>
- Started:
- {' '}
- <Time dateTime={startDate} />
- </Text>
- )}
- {endDate && (
- <Text>
- Ended:
- {' '}
- <Time dateTime={endDate} />
- </Text>
- )}
- {dataIntervalStart && dataIntervalEnd && (
- <>
- <br />
- <Text as="strong">Data Interval:</Text>
- <Text>
- Start:
- {' '}
- <Time dateTime={dataIntervalStart} />
- </Text>
- <Text>
- End:
- {' '}
- <Time dateTime={dataIntervalEnd} />
- </Text>
- </>
- )}
- </Box>
+ <Box py="4px">
+ <Divider my={3} />
+ <Flex justifyContent="flex-end" alignItems="center">
+ <Text fontWeight="bold" mr={2}>Re-run:</Text>
+ <ClearRun dagId={dagId} runId={runId} />
+ <QueueRun dagId={dagId} runId={runId} />
+ </Flex>
+ <Divider my={3} />
+ </Box>
+ <Table variant="striped">
+ <Tbody>
+ <Tr>
+ <Td>Status</Td>
+ <Td>
+ <Flex>
+ <SimpleStatus state={state} mx={2} />
+ {state || 'no status'}
+ </Flex>
+ </Td>
+ </Tr>
+ <Tr>
+ <Td>Run ID</Td>
+ <Td><ClipboardText value={runId} /></Td>
+ </Tr>
+ <Tr>
+ <Td>Run type</Td>
+ <Td>
+ {runType === 'manual' && <MdPlayArrow style={{ display: 'inline' }} />}
+ {runType === 'backfill' && <RiArrowGoBackFill style={{ display: 'inline' }} />}
+ {runType === 'scheduled' && <MdOutlineSchedule style={{ display: 'inline' }} />}
+ {runType}
+
+ </Td>
+ </Tr>
+ <Tr>
+ <Td>Run duration</Td>
+ <Td>
+ {formatDuration(getDuration(startDate, endDate))}
+ </Td>
+ </Tr>
+ {lastSchedulingDecision && (
+ <Tr>
+ <Td>Last scheduling decision</Td>
+ <Td>
+ <Time dateTime={lastSchedulingDecision} />
+ </Td>
+ </Tr>
+ )}
+ {startDate && (
+ <Tr>
+ <Td>Started</Td>
+ <Td>
+ <Time dateTime={startDate} />
+ </Td>
+ </Tr>
+ )}
+ {endDate && (
+ <Tr>
+ <Td>Ended</Td>
+ <Td>
+ <Time dateTime={endDate} />
+ </Td>
+ </Tr>
+ )}
+ {dataIntervalStart && dataIntervalEnd && (
+ <>
+ <Tr>
+ <Td>Data interval start</Td>
+ <Td>
+ <Time dateTime={dataIntervalStart} />
+ </Td>
+ </Tr>
+ <Tr>
+ <Td>Data interval end</Td>
+ <Td>
+ <Time dateTime={dataIntervalEnd} />
+ </Td>
+ </Tr>
+ </>
+ )}
+ </Tbody>
+ </Table>
+ </>
);
};
diff --git a/airflow/www/static/js/dag/details/taskInstance/Details.tsx b/airflow/www/static/js/dag/details/taskInstance/Details.tsx
index bb9faeba97..99b0f1a1bd 100644
--- a/airflow/www/static/js/dag/details/taskInstance/Details.tsx
+++ b/airflow/www/static/js/dag/details/taskInstance/Details.tsx
@@ -22,6 +22,10 @@ import {
Text,
Box,
Flex,
+ Table,
+ Tbody,
+ Tr,
+ Td,
} from '@chakra-ui/react';
import { finalStatesMap } from 'src/utils';
@@ -87,7 +91,7 @@ const Details = ({ instance, group, operator }: Props) => {
}
});
- const taskIdTitle = isGroup ? 'Task Group Id: ' : 'Task Id: ';
+ const taskIdTitle = isGroup ? 'Task Group ID' : 'Task ID';
const isStateFinal = state && ['success', 'failed', 'upstream_failed', 'skipped'].includes(state);
const isOverall = (isMapped || isGroup) && 'Overall ';
@@ -101,63 +105,68 @@ const Details = ({ instance, group, operator }: Props) => {
</>
)}
{mappedStates && numMapped > 0 && (
- <Text>
- {numMapped}
- {' '}
- {numMapped === 1 ? 'Task ' : 'Tasks '}
- Mapped
- </Text>
- )}
- <Flex alignItems="center">
- <Text as="strong">
- {isOverall}
- Status:
- </Text>
- <SimpleStatus state={state} mx={2} />
- {state || 'no status'}
- </Flex>
- {summary.length > 0 && (
- summary
- )}
- <br />
- <Text>
- {taskIdTitle}
- <ClipboardText value={taskId} />
- </Text>
- <Text whiteSpace="nowrap">
- Run Id:
- {' '}
- <ClipboardText value={runId} />
- </Text>
- {operator && (
<Text>
- Operator:
+ {numMapped}
{' '}
- {operator}
+ {numMapped === 1 ? 'Task ' : 'Tasks '}
+ Mapped
</Text>
)}
- <br />
- <Text>
- {isOverall}
- Duration:
- {' '}
- {formatDuration(getDuration(startDate, endDate))}
- </Text>
- {startDate && (
- <Text>
- Started:
- {' '}
- <Time dateTime={startDate} />
- </Text>
- )}
- {endDate && isStateFinal && (
- <Text>
- Ended:
- {' '}
- <Time dateTime={endDate} />
- </Text>
+ {summary.length > 0 && (
+ summary
)}
</Box>
+ <br />
+ <br />
+ <Table variant="striped">
+ <Tbody>
+ <Tr>
+ <Td>
+ {isOverall}
+ Status
+ </Td>
+ <Td>
+ <Flex>
+ <SimpleStatus state={state} mx={2} />
+ {state || 'no status'}
+ </Flex>
+ </Td>
+ </Tr>
+ <Tr>
+ <Td>{taskIdTitle}</Td>
+ <Td><ClipboardText value={taskId} /></Td>
+ </Tr>
+ <Tr>
+ <Td>Run ID</Td>
+ <Td><Text whiteSpace="nowrap"><ClipboardText value={runId} /></Text></Td>
+ </Tr>
+ {operator && (
+ <Tr>
+ <Td>Operator</Td>
+ <Td>{operator}</Td>
+ </Tr>
+ )}
+ <Tr>
+ <Td>
+ {isOverall}
+ Duration
+ </Td>
+ <Td>{formatDuration(getDuration(startDate, endDate))}</Td>
+ </Tr>
+ {startDate && (
+ <Tr>
+ <Td>Started</Td>
+ <Td><Time dateTime={startDate} /></Td>
+ </Tr>
+ )}
+ {endDate && isStateFinal && (
+ <Tr>
+ <Td>Ended</Td>
+ <Td><Time dateTime={endDate} /></Td>
+ </Tr>
+ )}
+ </Tbody>
+ </Table>
</Flex>
);
};
diff --git a/scripts/ci/pre_commit/pre_commit_www_lint.py b/scripts/ci/pre_commit/pre_commit_www_lint.py
index 934f28cb02..a89877df8d 100755
--- a/scripts/ci/pre_commit/pre_commit_www_lint.py
+++ b/scripts/ci/pre_commit/pre_commit_www_lint.py
@@ -28,4 +28,4 @@ if __name__ == '__main__':
dir = Path("airflow") / "www"
subprocess.check_call(['yarn', '--frozen-lockfile', '--non-interactive'], cwd=dir)
subprocess.check_call(['yarn', 'run', 'generate-api-types'], cwd=dir)
- subprocess.check_call(['yarn', 'run', 'lint'], cwd=dir)
+ subprocess.check_call(['yarn', 'run', 'lint:fix'], cwd=dir)