You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ep...@apache.org on 2022/06/30 14:03:41 UTC
[airflow] 14/14: Fix grid date ticks (#24738)
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 <br...@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();