Fix grid date ticks

airflow/www/static/js/grid/components/LinkButton.tsx

@@ -26,6 +26,7 @@ import {
 
 interface Props extends ButtonProps {
   href?: string;
+  target?: string;
 }
 
 const LinkButton = ({ children, ...rest }: Props) => (<Button as={Link} variant="ghost" colorScheme="blue" {...rest}>{children}</Button>);

airflow/www/static/js/grid/dagRuns/Bar.tsx

@@ -69,6 +69,10 @@ const DagRunBar = ({
     els.forEach((e) => { e.style.backgroundColor = ''; });
   };
 
+  // show the tick on the 4th DagRun and then every 10th tick afterwards
+  const shouldShowTick = index === totalRuns - 4
+    || (index < totalRuns - 4 && (index + 4) % 10 === 0);
+
   return (
     <Box
       className={`js-${run.runId}`}
@@ -118,7 +122,7 @@ const DagRunBar = ({
           </Flex>
         </Tooltip>
       </Flex>
-      {(index === totalRuns - 4 || (index + 4) % 10 === 0) && (
+      {shouldShowTick && (
       <VStack position="absolute" top="0" left="8px" spacing={0} zIndex={0} width={0}>
         <Text fontSize="sm" color="gray.400" whiteSpace="nowrap" transform="rotate(-30deg) translateX(28px)" mt="-23px !important">
           <Time dateTime={run.executionDate} format="MMM DD, HH:mm" />

airflow/www/static/js/grid/dagRuns/index.test.jsx → airflow/www/static/js/grid/dagRuns/index.test.tsx

@@ -26,41 +26,57 @@ import moment from 'moment-timezone';
 import DagRuns from './index';
 import { TableWrapper } from '../utils/testUtils';
 import * as useGridDataModule from '../api/useGridData';
+import type { DagRun } from '../types';
 
-const dagRuns = [
-  {
-    dagId: 'dagId',
-    runId: 'run1',
-    dataIntervalStart: new Date(),
-    dataIntervalEnd: new Date(),
-    startDate: '2021-11-08T21:14:19.704433+00:00',
-    endDate: '2021-11-08T21:17:13.206426+00:00',
-    state: 'failed',
-    runType: 'scheduled',
-    executionDate: '2021-11-08T21:14:19.704433+00:00',
-  },
-  {
-    dagId: 'dagId',
-    runId: 'run2',
-    dataIntervalStart: new Date(),
-    dataIntervalEnd: new Date(),
+const datestring = (new Date()).toISOString();
+const generateRuns = (length: number): DagRun[] => (
+  [...Array(length)].map((_, i) => ({
+    runId: `run-${i}`,
+    dataIntervalStart: datestring,
+    dataIntervalEnd: datestring,
     state: 'success',
     runType: 'manual',
-    startDate: '2021-11-09T00:19:43.023200+00:00',
-    endDate: '2021-11-09T00:22:18.607167+00:00',
-  },
-];
+    startDate: '2021-11-08T21:14:19.704433+00:00',
+    endDate: '2021-11-08T21:17:13.206426+00:00',
+    lastSchedulingDecision: datestring,
+    executionDate: datestring,
+  }))
+);
 
 describe('Test DagRuns', () => {
   test('Durations and manual run arrow render correctly, but without any date ticks', () => {
+    const dagRuns: DagRun[] = [
+      {
+        runId: 'run1',
+        dataIntervalStart: datestring,
+        dataIntervalEnd: datestring,
+        startDate: '2021-11-08T21:14:19.704433+00:00',
+        endDate: '2021-11-08T21:17:13.206426+00:00',
+        state: 'failed',
+        runType: 'scheduled',
+        executionDate: '2021-11-08T21:14:19.704433+00:00',
+        lastSchedulingDecision: datestring,
+      },
+      {
+        runId: 'run2',
+        dataIntervalStart: datestring,
+        dataIntervalEnd: datestring,
+        state: 'success',
+        runType: 'manual',
+        startDate: '2021-11-09T00:19:43.023200+00:00',
+        endDate: '2021-11-09T00:22:18.607167+00:00',
+        executionDate: '2021-11-08T21:14:19.704433+00:00',
+        lastSchedulingDecision: datestring,
+      },
+    ];
     const data = {
       groups: {},
       dagRuns,
     };
 
     const spy = jest.spyOn(useGridDataModule, 'default').mockImplementation(() => ({
       data,
-    }));
+    } as any));
     const {
       queryAllByTestId, getByText, queryByText,
     } = render(<DagRuns />, { wrapper: TableWrapper });
@@ -77,42 +93,46 @@ describe('Test DagRuns', () => {
   test('Top date ticks appear when there are 4 or more runs', () => {
     const data = {
       groups: {},
-      dagRuns: [
-        ...dagRuns,
-        {
-          dagId: 'dagId',
-          runId: 'run3',
-          dataIntervalStart: new Date(),
-          dataIntervalEnd: new Date(),
-          startDate: '2021-11-08T21:14:19.704433+00:00',
-          endDate: '2021-11-08T21:17:13.206426+00:00',
-          state: 'failed',
-          runType: 'scheduled',
-        },
-        {
-          dagId: 'dagId',
-          runId: 'run4',
-          dataIntervalStart: new Date(),
-          dataIntervalEnd: new Date(),
-          state: 'success',
-          runType: 'manual',
-          startDate: '2021-11-09T00:19:43.023200+00:00',
-          endDate: '2021-11-09T00:22:18.607167+00:00',
-        },
-      ],
+      dagRuns: generateRuns(4),
     };
     const spy = jest.spyOn(useGridDataModule, 'default').mockImplementation(() => ({
       data,
-    }));
+    } as any));
     const { getByText } = render(<DagRuns />, { wrapper: TableWrapper });
-    expect(getByText(moment.utc(dagRuns[0].executionDate).format('MMM DD, HH:mm'))).toBeInTheDocument();
+    expect(getByText(moment.utc(datestring).format('MMM DD, HH:mm'))).toBeInTheDocument();
+    spy.mockRestore();
+  });
+
+  test('Show 1 date tick when there are less than 14 runs', () => {
+    const data = {
+      groups: {},
+      dagRuns: generateRuns(8),
+    };
+    const spy = jest.spyOn(useGridDataModule, 'default').mockImplementation(() => ({
+      data,
+    } as any));
+    const { queryAllByText } = render(<DagRuns />, { wrapper: TableWrapper });
+    expect(queryAllByText(moment.utc(datestring).format('MMM DD, HH:mm'))).toHaveLength(1);
+    spy.mockRestore();
+  });
+
+  test('Show 2 date ticks when there are 14+ runs', () => {
+    const data = {
+      groups: {},
+      dagRuns: generateRuns(14),
+    };
+    const spy = jest.spyOn(useGridDataModule, 'default').mockImplementation(() => ({
+      data,
+    } as any));
+    const { queryAllByText } = render(<DagRuns />, { wrapper: TableWrapper });
+    expect(queryAllByText(moment.utc(datestring).format('MMM DD, HH:mm'))).toHaveLength(2);
     spy.mockRestore();
   });
 
   test('Handles empty data correctly', () => {
     const spy = jest.spyOn(useGridDataModule, 'default').mockImplementation(() => ({
       data: { groups: {}, dagRuns: [] },
-    }));
+    } as any));
 
     const { queryByTestId } = render(<DagRuns />, { wrapper: TableWrapper });
     expect(queryByTestId('run')).toBeNull();