[23945] Icons in grid view for different dag types

apache · May 27, 2022 · 7822ada · 7822ada
1 parent 9216489
commit 7822ada
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>