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/01 15:30:41 UTC
[airflow] 02/02: Autorefresh, table width, remove extraneous code
This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch grid-list-mapped-tis
in repository https://gitbox.apache.org/repos/asf/airflow.git
commit bafa4b33b50e85d88796e7ca7be19488a93741c4
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Fri Apr 1 11:27:38 2022 -0400
Autorefresh, table width, remove extraneous code
---
.../www/static/js/tree/api/useMappedInstances.js | 9 ++++++++
.../content/{ => taskInstance}/MappedInstances.jsx | 25 ++++++++++++++--------
.../js/tree/details/content/taskInstance/Nav.jsx | 11 ----------
.../js/tree/details/content/taskInstance/index.jsx | 2 +-
airflow/www/static/js/tree/details/index.jsx | 15 ++++---------
5 files changed, 30 insertions(+), 32 deletions(-)
diff --git a/airflow/www/static/js/tree/api/useMappedInstances.js b/airflow/www/static/js/tree/api/useMappedInstances.js
index 844a194..d43c8d7 100644
--- a/airflow/www/static/js/tree/api/useMappedInstances.js
+++ b/airflow/www/static/js/tree/api/useMappedInstances.js
@@ -17,17 +17,26 @@
* under the License.
*/
+/* global autoRefreshInterval */
+
import axios from 'axios';
import { useQuery } from 'react-query';
+import { useAutoRefresh } from '../context/autorefresh';
+
export default function useMappedInstances({
dagId, runId, taskId, limit, offset, order,
}) {
const orderParam = order && order !== 'map_index' ? { order_by: order } : {};
+ const { isRefreshOn } = useAutoRefresh();
return useQuery(
['mappedInstances', dagId, runId, taskId, offset, order],
() => axios.get(`/api/v1/dags/${dagId}/dagRuns/${runId}/taskInstances/${taskId}/listMapped`, {
params: { offset, limit, ...orderParam },
}),
+ {
+ keepPreviousData: true,
+ refetchInterval: isRefreshOn && autoRefreshInterval * 1000,
+ },
);
}
diff --git a/airflow/www/static/js/tree/details/content/MappedInstances.jsx b/airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx
similarity index 78%
rename from airflow/www/static/js/tree/details/content/MappedInstances.jsx
rename to airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx
index f78e533..70bbda0 100644
--- a/airflow/www/static/js/tree/details/content/MappedInstances.jsx
+++ b/airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx
@@ -27,10 +27,15 @@ import {
} from '@chakra-ui/react';
import { snakeCase } from 'lodash';
-import { formatDateTime, formatDuration } from '../../../datetime_utils';
-import { useMappedInstances } from '../../api';
-import { SimpleStatus } from '../../StatusBox';
-import Table from '../../Table';
+import { getMetaValue } from '../../../../utils';
+import { formatDateTime, formatDuration } from '../../../../datetime_utils';
+import { useMappedInstances } from '../../../api';
+import { SimpleStatus } from '../../../StatusBox';
+import Table from '../../../Table';
+
+const renderedTemplatesUrl = getMetaValue('rendered_templates_url');
+const logUrl = getMetaValue('log_url');
+const taskUrl = getMetaValue('task_url');
const MappedInstances = ({
dagId, runId, taskId,
@@ -57,8 +62,9 @@ const MappedInstances = ({
execution_date: mi.executionDate,
map_index: mi.mapIndex,
}).toString();
- const logLink = `/log?${params}`;
- const detailsLink = `/task?${params}`;
+ const detailsLink = `${taskUrl}&${params}`;
+ const renderedLink = `${renderedTemplatesUrl}&${params}`;
+ const logLink = `${logUrl}&${params}`;
return {
...mi,
state: (
@@ -67,11 +73,12 @@ const MappedInstances = ({
{mi.state || 'no status'}
</Flex>
),
- duration: formatDuration(mi.duration),
- startDate: formatDateTime(mi.startDate),
- endDate: formatDateTime(mi.endDate),
+ duration: mi.duration && formatDuration(mi.duration),
+ startDate: mi.startDate && formatDateTime(mi.startDate),
+ endDate: mi.endDate && formatDateTime(mi.endDate),
links: (
<Flex alignItems="center">
+ <Button as={Link} variant="outline" mr={1} colorScheme="blue" href={renderedLink}>Rendered</Button>
<Button as={Link} variant="outline" mr={1} colorScheme="blue" href={logLink}>Log</Button>
<Button as={Link} variant="outline" colorScheme="blue" href={detailsLink}>More Details</Button>
</Flex>
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/Nav.jsx b/airflow/www/static/js/tree/details/content/taskInstance/Nav.jsx
index 6fc8eb6..d0841d0 100644
--- a/airflow/www/static/js/tree/details/content/taskInstance/Nav.jsx
+++ b/airflow/www/static/js/tree/details/content/taskInstance/Nav.jsx
@@ -44,7 +44,6 @@ const Nav = ({ instance, isMapped }) => {
const {
taskId,
dagId,
- runId,
operator,
executionDate,
} = instance;
@@ -62,12 +61,6 @@ const Nav = ({ instance, isMapped }) => {
_flt_3_task_id: taskId,
_oc_TaskInstanceModelView: 'dag_run.execution_date',
});
- const mapParams = new URLSearchParams({
- _flt_3_dag_id: dagId,
- _flt_3_task_id: taskId,
- _flt_3_run_id: runId,
- _oc_TaskInstanceModelView: 'map_index',
- });
const subDagParams = new URLSearchParams({
execution_date: executionDate,
}).toString();
@@ -79,7 +72,6 @@ const Nav = ({ instance, isMapped }) => {
}).toString();
const allInstancesLink = `${taskInstancesUrl}?${listParams.toString()}`;
- const mappedInstancesLink = `${taskInstancesUrl}?${mapParams.toString()}`;
const filterUpstreamLink = appendSearchParams(gridUrlNoRoot, filterParams);
const subDagLink = appendSearchParams(gridUrl.replace(dagId, `${dagId}.${taskId}`), subDagParams);
@@ -103,9 +95,6 @@ const Nav = ({ instance, isMapped }) => {
<LinkButton href={logLink}>Log</LinkButton>
</>
)}
- {isMapped && (
- <LinkButton href={mappedInstancesLink} title="Show the mapped instances for this DAG run">Mapped Instances</LinkButton>
- )}
<LinkButton href={allInstancesLink} title="View all instances across all DAG runs">All Instances</LinkButton>
<LinkButton href={filterUpstreamLink}>Filter Upstream</LinkButton>
</Flex>
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 ed970f4..1e787c7 100644
--- a/airflow/www/static/js/tree/details/content/taskInstance/index.jsx
+++ b/airflow/www/static/js/tree/details/content/taskInstance/index.jsx
@@ -35,7 +35,7 @@ import TaskNav from './Nav';
import Details from './Details';
import { useTreeData } from '../../../api';
-import MappedInstances from '../MappedInstances';
+import MappedInstances from './MappedInstances';
const getTask = ({ taskId, runId, task }) => {
if (task.id === taskId) return task;
diff --git a/airflow/www/static/js/tree/details/index.jsx b/airflow/www/static/js/tree/details/index.jsx
index 1bdf4e2..ffe8b0f 100644
--- a/airflow/www/static/js/tree/details/index.jsx
+++ b/airflow/www/static/js/tree/details/index.jsx
@@ -30,28 +30,21 @@ import DagRunContent from './content/dagRun';
import DagContent from './content/Dag';
import { useSelection } from '../context/selection';
-const Details = ({ isRefreshOn, onToggleRefresh }) => {
+const Details = () => {
const { selected } = useSelection();
return (
- <Flex borderLeftWidth="1px" flexDirection="column" p={3} flexGrow={1} maxWidth="600px">
+ <Flex borderLeftWidth="1px" flexDirection="column" pl={3} mr={3} flexGrow={1} maxWidth="750px">
<Header />
<Divider my={2} />
- <Box minWidth="500px">
- {/* TODO: get full instance data from the API */}
+ <Box minWidth="750px">
{!selected.runId && !selected.taskId && <DagContent />}
{selected.runId && !selected.taskId && (
- <DagRunContent
- runId={selected.runId}
- isRefreshOn={isRefreshOn}
- onToggleRefresh={onToggleRefresh}
- />
+ <DagRunContent runId={selected.runId} />
)}
{selected.taskId && (
<TaskInstanceContent
runId={selected.runId}
taskId={selected.taskId}
- isRefreshOn={isRefreshOn}
- onToggleRefresh={onToggleRefresh}
/>
)}
</Box>