[airflow] branch main updated: [23945] Icons in grid view for different dag types (#23970)

[potiuk]

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

potiuk 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 d470a8ef8d [23945] Icons in grid view for different dag types (#23970)
d470a8ef8d is described below

commit d470a8ef8df152eceee88b95365ff923db7cb2d7
Author: David Skoda <dsko...@binghamton.edu>
AuthorDate: Fri May 27 16:25:04 2022 -0400

    [23945] Icons in grid view for different dag types (#23970)
---
 airflow/www/static/js/grid/dagRuns/Bar.jsx              |  2 ++
 airflow/www/static/js/grid/dagRuns/Tooltip.jsx          |  7 ++++++-
 airflow/www/static/js/grid/details/Header.jsx           | 17 ++++++++++++++++-
 .../www/static/js/grid/details/content/dagRun/index.jsx |  6 +++++-
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/airflow/www/static/js/grid/dagRuns/Bar.jsx 
b/airflow/www/static/js/grid/dagRuns/Bar.jsx
index 7523b8dd2a..22163a44da 100644
--- a/airflow/www/static/js/grid/dagRuns/Bar.jsx
+++ b/airflow/www/static/js/grid/dagRuns/Bar.jsx
@@ -30,6 +30,7 @@ import {
   useTheme,
 } from '@chakra-ui/react';
 import { MdPlayArrow } from 'react-icons/md';
+import { RiArrowGoBackFill } from 'react-icons/ri';
 
 import DagRunTooltip from './Tooltip';
 import { useContainerRef } from '../context/containerRef';
@@ -101,6 +102,7 @@ const DagRunBar = ({
             data-testid="run"
           >
             {run.runType === 'manual' && <MdPlayArrow size="8px" color="white" 
data-testid="manual-run" />}
+            {run.runType === 'backfill' && <RiArrowGoBackFill size="8px" 
color="white" data-testid="backfill-run" />}
           </Flex>
         </Tooltip>
       </Flex>
diff --git a/airflow/www/static/js/grid/dagRuns/Tooltip.jsx 
b/airflow/www/static/js/grid/dagRuns/Tooltip.jsx
index 82cec0d8c7..5f04f36d30 100644
--- a/airflow/www/static/js/grid/dagRuns/Tooltip.jsx
+++ b/airflow/www/static/js/grid/dagRuns/Tooltip.jsx
@@ -25,7 +25,7 @@ import Time from '../components/Time';
 
 const DagRunTooltip = ({
   dagRun: {
-    state, duration, dataIntervalStart, executionDate,
+    state, duration, dataIntervalStart, executionDate, runType,
   },
 }) => (
   <Box py="2px">
@@ -44,6 +44,11 @@ const DagRunTooltip = ({
       {' '}
       {formatDuration(duration)}
     </Text>
+    <Text>
+      Type:
+      {' '}
+      {runType}
+    </Text>
   </Box>
 );
 
diff --git a/airflow/www/static/js/grid/details/Header.jsx 
b/airflow/www/static/js/grid/details/Header.jsx
index 92052d4c2e..c158deabca 100644
--- a/airflow/www/static/js/grid/details/Header.jsx
+++ b/airflow/www/static/js/grid/details/Header.jsx
@@ -26,7 +26,8 @@ import {
   Heading,
   Text,
 } from '@chakra-ui/react';
-import { MdPlayArrow } from 'react-icons/md';
+import { MdPlayArrow, MdOutlineSchedule } from 'react-icons/md';
+import { RiArrowGoBackFill } from 'react-icons/ri';
 
 import { getMetaValue } from '../../utils';
 import useSelection from '../utils/useSelection';
@@ -71,6 +72,20 @@ const Header = () => {
           {runLabel}
         </>
       );
+    } else if (dagRun.runType === 'backfill') {
+      runLabel = (
+        <>
+          <RiArrowGoBackFill style={{ display: 'inline' }} />
+          {runLabel}
+        </>
+      );
+    } else if (dagRun.runType === 'scheduled') {
+      runLabel = (
+        <>
+          <MdOutlineSchedule style={{ display: 'inline' }} />
+          {runLabel}
+        </>
+      );
     }
   }
 
diff --git a/airflow/www/static/js/grid/details/content/dagRun/index.jsx 
b/airflow/www/static/js/grid/details/content/dagRun/index.jsx
index 61f66a7367..27ee969aed 100644
--- a/airflow/www/static/js/grid/details/content/dagRun/index.jsx
+++ b/airflow/www/static/js/grid/details/content/dagRun/index.jsx
@@ -25,7 +25,9 @@ import {
   Link,
   Divider,
 } from '@chakra-ui/react';
-import { MdPlayArrow, MdOutlineAccountTree } from 'react-icons/md';
+
+import { MdPlayArrow, MdOutlineSchedule, MdOutlineAccountTree } from 
'react-icons/md';
+import { RiArrowGoBackFill } from 'react-icons/ri';
 
 import { SimpleStatus } from '../../../components/StatusBox';
 import { ClipboardText } from '../../../components/Clipboard';
@@ -97,6 +99,8 @@ const DagRun = ({ runId }) => {
         Run Type:
         {' '}
         {runType === 'manual' && <MdPlayArrow style={{ display: 'inline' }} />}
+        {runType === 'backfill' && <RiArrowGoBackFill style={{ display: 
'inline' }} />}
+        {runType === 'scheduled' && <MdOutlineSchedule style={{ display: 
'inline' }} />}
         {runType}
       </Text>
       <Text>