From 7822ada61552ff447ebb69adeb736da480a0d677 Mon Sep 17 00:00:00 2001
From: David Skoda <dskoda1@binghamton.edu>
Date: Fri, 27 May 2022 11:09:37 -0400
Subject: [PATCH 1/2] [23945] Icons in grid view for different dag types

---
 airflow/www/static/js/grid/dagRuns/Bar.jsx      |  4 +++-
 airflow/www/static/js/grid/dagRuns/Tooltip.jsx  |  7 ++++++-
 airflow/www/static/js/grid/details/Header.jsx   | 17 ++++++++++++++++-
 .../js/grid/details/content/dagRun/index.jsx    |  6 +++++-
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/airflow/www/static/js/grid/dagRuns/Bar.jsx b/airflow/www/static/js/grid/dagRuns/Bar.jsx
index 7523b8dd2abee2..2bbc0c38c97720 100644
--- a/airflow/www/static/js/grid/dagRuns/Bar.jsx
+++ b/airflow/www/static/js/grid/dagRuns/Bar.jsx
@@ -29,7 +29,8 @@ import {
   VStack,
   useTheme,
 } from '@chakra-ui/react';
-import { MdPlayArrow } from 'react-icons/md';
+import { MdPlayArrow, MdOutlineSchedule } 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 82cec0d8c75ae2..5f04f36d30bfbb 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 92052d4c2ee940..c158deabcaa59e 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 61f66a7367a6f0..27ee969aed4bda 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>

From 08ec58c9debae5a0d5093a9fb8b993e4340fa49d Mon Sep 17 00:00:00 2001
From: David Skoda <dskoda1@binghamton.edu>
Date: Fri, 27 May 2022 13:42:20 -0400
Subject: [PATCH 2/2] remove unused import

---
 airflow/www/static/js/grid/dagRuns/Bar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/airflow/www/static/js/grid/dagRuns/Bar.jsx b/airflow/www/static/js/grid/dagRuns/Bar.jsx
index 2bbc0c38c97720..22163a44da05ec 100644
--- a/airflow/www/static/js/grid/dagRuns/Bar.jsx
+++ b/airflow/www/static/js/grid/dagRuns/Bar.jsx
@@ -29,7 +29,7 @@ import {
   VStack,
   useTheme,
 } from '@chakra-ui/react';
-import { MdPlayArrow, MdOutlineSchedule } from 'react-icons/md';
+import { MdPlayArrow } from 'react-icons/md';
 import { RiArrowGoBackFill } from 'react-icons/ri';
 
 import DagRunTooltip from './Tooltip';