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/09 16:46:40 UTC
[airflow] 01/02: Clean up Dag details
This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch adjust-grid-details-layout
in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 286b49665fc69e6a73350ea1a33bdbcce16fa161
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Fri Apr 8 19:15:04 2022 -0400
Clean up Dag details
---
airflow/www/static/js/tree/api/index.js | 2 -
airflow/www/static/js/tree/api/useDag.js | 31 -----
airflow/www/static/js/tree/details/content/Dag.jsx | 136 ++++++++++-----------
.../js/tree/details/content/dagRun/index.jsx | 35 +++---
airflow/www/templates/airflow/dag.html | 1 -
5 files changed, 79 insertions(+), 126 deletions(-)
diff --git a/airflow/www/static/js/tree/api/index.js b/airflow/www/static/js/tree/api/index.js
index aea1e918f8..3543c97e2e 100644
--- a/airflow/www/static/js/tree/api/index.js
+++ b/airflow/www/static/js/tree/api/index.js
@@ -20,7 +20,6 @@
import axios from 'axios';
import camelcaseKeys from 'camelcase-keys';
-import useDag from './useDag';
import useTasks from './useTasks';
import useClearRun from './useClearRun';
import useQueueRun from './useQueueRun';
@@ -42,7 +41,6 @@ axios.interceptors.response.use(
axios.defaults.headers.common.Accept = 'application/json';
export {
- useDag,
useTasks,
useClearRun,
useQueueRun,
diff --git a/airflow/www/static/js/tree/api/useDag.js b/airflow/www/static/js/tree/api/useDag.js
deleted file mode 100644
index a259587898..0000000000
--- a/airflow/www/static/js/tree/api/useDag.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/*!
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import axios from 'axios';
-import { useQuery } from 'react-query';
-import { getMetaValue } from '../../utils';
-
-const dagDetailsUrl = getMetaValue('dag_details_api');
-
-export default function useDag(dagId) {
- return useQuery(
- ['dag', dagId],
- () => axios.get(dagDetailsUrl),
- );
-}
diff --git a/airflow/www/static/js/tree/details/content/Dag.jsx b/airflow/www/static/js/tree/details/content/Dag.jsx
index 406815b2c2..928b4f3f55 100644
--- a/airflow/www/static/js/tree/details/content/Dag.jsx
+++ b/airflow/www/static/js/tree/details/content/Dag.jsx
@@ -23,29 +23,28 @@ import {
Tbody,
Tr,
Td,
- Tag,
Link,
Button,
Flex,
Heading,
+ Text,
} from '@chakra-ui/react';
import { mean } from 'lodash';
import { getDuration, formatDuration } from '../../../datetime_utils';
import { finalStatesMap, getMetaValue } from '../../../utils';
-import { useDag, useTasks, useTreeData } from '../../api';
+import { useTasks, useTreeData } from '../../api';
import Time from '../../Time';
+import { SimpleStatus } from '../../StatusBox';
const dagId = getMetaValue('dag_id');
const dagDetailsUrl = getMetaValue('dag_details_url');
const Dag = () => {
- const { data: dag } = useDag(dagId);
const { data: taskData } = useTasks(dagId);
const { data: { dagRuns = [] } } = useTreeData();
- if (!dag || !taskData) return null;
+ if (!taskData) return null;
const { tasks = [], totalEntries = '' } = taskData;
- const { description, tags } = dag;
// Build a key/value object of operator counts, the name is hidden inside of t.classRef.className
const operators = {};
@@ -72,9 +71,14 @@ const Dag = () => {
// eslint-disable-next-line react/no-array-index-key
<Tr key={val}>
<Td>
- Total
- {' '}
- {val}
+ <Flex alignItems="center">
+ <SimpleStatus state={val} mr={2} />
+ <Text>
+ Total
+ {' '}
+ {val}
+ </Text>
+ </Flex>
</Td>
<Td>
{key}
@@ -94,61 +98,59 @@ const Dag = () => {
<Button as={Link} variant="ghost" colorScheme="blue" href={dagDetailsUrl}>
DAG Details
</Button>
- {durations.length > 0 && (
- <>
- <Heading size="sm" mt={4} mb={2}>DAG Runs Summary</Heading>
- <Table variant="striped">
- <Tbody>
- <Tr>
- <Td>Total Runs Displayed</Td>
- <Td>
- {durations.length}
- </Td>
- </Tr>
- <Tr>
- <Td>First Run Start</Td>
- <Td>
- <Time dateTime={dagRuns[0].startDate} />
- </Td>
- </Tr>
- <Tr>
- <Td>Last Run Start</Td>
- <Td>
- <Time dateTime={dagRuns[dagRuns.length - 1].startDate} />
- </Td>
- </Tr>
- <Tr>
- <Td>Max Run Duration</Td>
- <Td>
- {formatDuration(max)}
- </Td>
- </Tr>
- <Tr>
- <Td>Mean Run Duration</Td>
- <Td>
- {formatDuration(avg)}
- </Td>
- </Tr>
- <Tr>
- <Td>Min Run Duration</Td>
- <Td>
- {formatDuration(min)}
- </Td>
- </Tr>
- {stateSummary}
- </Tbody>
- </Table>
- </>
- )}
- <Heading size="sm" mt={4} mb={2}>DAG Summary</Heading>
<Table variant="striped">
<Tbody>
- {description && (
- <Tr>
- <Td>Description</Td>
- <Td>{description}</Td>
- </Tr>
+ {durations.length > 0 && (
+ <>
+ <Tr borderBottomWidth={2} borderBottomColor="gray.300" borderBottomStyle="solid">
+ <Td><Heading size="sm">DAG Runs Summary</Heading></Td>
+ <Td />
+ </Tr>
+ <Tr>
+ <Td>Total Runs Displayed</Td>
+ <Td>
+ {durations.length}
+ </Td>
+ </Tr>
+ {stateSummary}
+ <Tr>
+ <Td>First Run Start</Td>
+ <Td>
+ <Time dateTime={dagRuns[0].startDate} />
+ </Td>
+ </Tr>
+ <Tr>
+ <Td>Last Run Start</Td>
+ <Td>
+ <Time dateTime={dagRuns[dagRuns.length - 1].startDate} />
+ </Td>
+ </Tr>
+ <Tr>
+ <Td>Max Run Duration</Td>
+ <Td>
+ {formatDuration(max)}
+ </Td>
+ </Tr>
+ <Tr>
+ <Td>Mean Run Duration</Td>
+ <Td>
+ {formatDuration(avg)}
+ </Td>
+ </Tr>
+ <Tr>
+ <Td>Min Run Duration</Td>
+ <Td>
+ {formatDuration(min)}
+ </Td>
+ </Tr>
+ </>
)}
+ <Tr borderBottomWidth={2} borderBottomColor="gray.300" borderBottomStyle="solid">
+ <Td>
+ <Heading size="sm">DAG Summary</Heading>
+ </Td>
+ <Td />
+ </Tr>
<Tr>
<Td>Total Tasks</Td>
<Td>{totalEntries}</Td>
@@ -162,20 +164,6 @@ const Dag = () => {
<Td>{value}</Td>
</Tr>
))}
- {!!tags.length && (
- <Tr>
- <Td>Tags</Td>
- <Td>
- <Flex flexWrap="wrap">
- {tags.map((tag) => (
- <Link key={tag.name} href={`/home?tags=${tag.name}`} mr={1}>
- <Tag colorScheme="blue" size="lg">{tag.name}</Tag>
- </Link>
- ))}
- </Flex>
- </Td>
- </Tr>
- )}
</Tbody>
</Table>
</>
diff --git a/airflow/www/static/js/tree/details/content/dagRun/index.jsx b/airflow/www/static/js/tree/details/content/dagRun/index.jsx
index ad1c0d6626..a449d183d3 100644
--- a/airflow/www/static/js/tree/details/content/dagRun/index.jsx
+++ b/airflow/www/static/js/tree/details/content/dagRun/index.jsx
@@ -76,12 +76,10 @@ const DagRun = ({ runId }) => {
<MarkSuccessRun dagId={dagId} runId={runId} />
</Flex>
<Divider my={3} />
- <Flex justifyContent="space-between" alignItems="center">
- <Text fontWeight="bold" ml="10px">Re-run:</Text>
- <Flex>
- <ClearRun dagId={dagId} runId={runId} />
- <QueueRun dagId={dagId} runId={runId} />
- </Flex>
+ <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">
@@ -114,18 +112,6 @@ const DagRun = ({ runId }) => {
</Text>
)}
<br />
- <Text as="strong">Data Interval:</Text>
- <Text>
- Start:
- {' '}
- <Time dateTime={dataIntervalStart} />
- </Text>
- <Text>
- End:
- {' '}
- <Time dateTime={dataIntervalEnd} />
- </Text>
- <br />
{startDate && (
<Text>
Started:
@@ -140,6 +126,19 @@ const DagRun = ({ runId }) => {
<Time dateTime={endDate} />
</Text>
)}
+ <br />
+ <Text as="strong">Data Interval:</Text>
+ <Text>
+ Start:
+ {' '}
+ <Time dateTime={dataIntervalStart} />
+ </Text>
+ <Text>
+ End:
+ {' '}
+ <Time dateTime={dataIntervalEnd} />
+ </Text>
+
</Box>
);
};
diff --git a/airflow/www/templates/airflow/dag.html b/airflow/www/templates/airflow/dag.html
index 16c0d27cb5..358b194078 100644
--- a/airflow/www/templates/airflow/dag.html
+++ b/airflow/www/templates/airflow/dag.html
@@ -65,7 +65,6 @@
<meta name="rendered_templates_url" content="{{ url_for('Airflow.rendered_templates', dag_id=dag.dag_id) }}">
<meta name="rendered_k8s_url" content="{{ url_for('Airflow.rendered_k8s', dag_id=dag.dag_id) }}">
<meta name="task_instances_list_url" content="{{ url_for('TaskInstanceModelView.list') }}">
- <meta name="dag_details_api" content="{{ url_for('/api/v1.airflow_api_connexion_endpoints_dag_endpoint_get_dag_details', dag_id=dag.dag_id) }}">
<meta name="tasks_api" content="{{ url_for('/api/v1.airflow_api_connexion_endpoints_task_endpoint_get_tasks', dag_id=dag.dag_id) }}">
<meta name="mapped_instances_api" content="{{ url_for('/api/v1.airflow_api_connexion_endpoints_task_instance_endpoint_get_mapped_task_instances', dag_id=dag.dag_id, dag_run_id='_DAG_RUN_ID_', task_id='_TASK_ID_') }}">
<!-- End Urls -->