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/05 21:42:27 UTC

[airflow] branch dag-details-durations created (now 81ab19d394)

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a change to branch dag-details-durations
in repository https://gitbox.apache.org/repos/asf/airflow.git


      at 81ab19d394 Add basic cross-run info to dag details

This branch includes the following new commits:

     new 81ab19d394 Add basic cross-run info to dag details

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



[airflow] 01/01: Add basic cross-run info to dag details

Posted by bb...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch dag-details-durations
in repository https://gitbox.apache.org/repos/asf/airflow.git

commit 81ab19d3942f5174a8ec39eb4478f5e58de58e74
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Tue Apr 5 17:42:05 2022 -0400

    Add basic cross-run info to dag details
---
 airflow/www/static/js/tree/details/content/Dag.jsx | 59 ++++++++++++++++++++--
 1 file changed, 55 insertions(+), 4 deletions(-)

diff --git a/airflow/www/static/js/tree/details/content/Dag.jsx b/airflow/www/static/js/tree/details/content/Dag.jsx
index db3ad9f8ad..109b140bb4 100644
--- a/airflow/www/static/js/tree/details/content/Dag.jsx
+++ b/airflow/www/static/js/tree/details/content/Dag.jsx
@@ -32,10 +32,11 @@ import {
   Button,
   Flex,
 } from '@chakra-ui/react';
+import { mean } from 'lodash';
 
-import { formatDuration } from '../../../datetime_utils';
+import { getDuration, formatDuration } from '../../../datetime_utils';
 import { getMetaValue } from '../../../utils';
-import { useDag, useTasks } from '../../api';
+import { useDag, useTasks, useTreeData } from '../../api';
 import Time from '../../Time';
 
 const dagId = getMetaValue('dag_id');
@@ -44,6 +45,7 @@ const dagDetailsUrl = getMetaValue('dag_details_url');
 const Dag = () => {
   const { data: dag } = useDag(dagId);
   const { data: taskData } = useTasks(dagId);
+  const { data: { groups = {}, dagRuns = [] } } = useTreeData();
   if (!dag || !taskData) return null;
   const { tasks = [], totalEntries = '' } = taskData;
   const {
@@ -60,11 +62,60 @@ const Dag = () => {
     }
   });
 
+  const durations = [];
+  const runs = dagRuns.map((dagRun) => {
+    const duration = getDuration(dagRun.startDate, dagRun.endDate);
+    durations.push(duration);
+    return {
+      ...dagRun,
+      duration,
+    };
+  });
+
+  // calculate dag run bar heights relative to max
+  const max = Math.max.apply(null, durations);
+  const min = Math.min.apply(null, durations);
+  const avg = mean(durations);
+
   return (
     <>
-      <Button as={Link} mb={2} variant="ghost" colorScheme="blue" href={dagDetailsUrl}>
+      <Button as={Link} variant="ghost" colorScheme="blue" href={dagDetailsUrl}>
         DAG Details
       </Button>
+      {durations.length > 0 && (
+        <>
+          <Text my={3}>DAG Runs Summary</Text>
+          <Table variant="striped">
+            <Tbody>
+              <Tr>
+                <Td>Total Runs Displayed</Td>
+                <Td>
+                  {durations.length}
+                </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>
+            </Tbody>
+          </Table>
+        </>
+      )}
+      <Text my={3}>DAG Summary</Text>
       <Table variant="striped">
         <Tbody>
           {description && (
@@ -116,7 +167,7 @@ const Dag = () => {
           </Tr>
           <Tr>
             <Td>Relative File Location</Td>
-            <Td><Code colorScheme="blackAlpha" maxWidth="250px">{fileloc}</Code></Td>
+            <Td><Code colorScheme="blackAlpha" maxWidth="450px" fontSize="12px">{fileloc}</Code></Td>
           </Tr>
           {dagRunTimeout && (
           <Tr>