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 <[email protected]> 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>
