This is an automated email from the ASF dual-hosted git repository. ephraimanierobi pushed a commit to branch v2-3-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit b6aa6806e4e12205ec0115eaa266ea046f07eadc Author: Brent Bovenzi <brent.bove...@gmail.com> AuthorDate: Wed Jun 29 13:01:47 2022 -0400 Fix grid date ticks (#24738) * fix date ticks * fix linting * fix LinkButton type error (cherry picked from commit d725625799d695f78e37696c3b594f18ccf2d899) --- airflow/www/static/js/grid/dagRuns/Bar.tsx | 6 +- .../dagRuns/{index.test.jsx => index.test.tsx} | 116 ++++++++++++--------- 2 files changed, 73 insertions(+), 49 deletions(-) diff --git a/airflow/www/static/js/grid/dagRuns/Bar.tsx b/airflow/www/static/js/grid/dagRuns/Bar.tsx index 00c5214b83..7e9b2ef353 100644 --- a/airflow/www/static/js/grid/dagRuns/Bar.tsx +++ b/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" /> diff --git a/airflow/www/static/js/grid/dagRuns/index.test.jsx b/airflow/www/static/js/grid/dagRuns/index.test.tsx similarity index 54% rename from airflow/www/static/js/grid/dagRuns/index.test.jsx rename to airflow/www/static/js/grid/dagRuns/index.test.tsx index 14e9adc9a5..612c96eb27 100644 --- a/airflow/www/static/js/grid/dagRuns/index.test.jsx +++ b/airflow/www/static/js/grid/dagRuns/index.test.tsx @@ -26,33 +26,49 @@ 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, @@ -60,7 +76,7 @@ describe('Test 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();