This is an automated email from the ASF dual-hosted git repository. utkarsharma pushed a commit to branch v2-9-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 512240a94d22554175f1f6de4e370386d7097e2d Author: Brent Bovenzi <[email protected]> AuthorDate: Mon Jul 1 12:02:50 2024 -0400 Fix calendar view scroll (#40458) (cherry picked from commit acdac24e3f40e28ff1ac067f9038364bcc96cae8) --- airflow/www/static/js/dag/details/dag/Calendar.tsx | 9 +++++---- airflow/www/static/js/dag/details/index.tsx | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/airflow/www/static/js/dag/details/dag/Calendar.tsx b/airflow/www/static/js/dag/details/dag/Calendar.tsx index 6826ab5d67..f3c4b44a29 100644 --- a/airflow/www/static/js/dag/details/dag/Calendar.tsx +++ b/airflow/www/static/js/dag/details/dag/Calendar.tsx @@ -77,8 +77,8 @@ const Calendar = () => { // We need to split the data into multiple years of calendars if (startYear !== endYear) { - for (let y = startYear; y <= endYear; y += 1) { - const index = y - startYear; + for (let y = endYear; y >= startYear; y -= 1) { + const index = endYear - y; const yearStartDate = y === startYear ? startDate : `${y}-01-01`; const yearEndDate = `${y}-12-31`; calendarOption.push({ @@ -182,6 +182,7 @@ const Calendar = () => { color: "gray", opacity: 0.6, }, + show: false, }, ], calendar: calendarOption, @@ -195,10 +196,10 @@ const Calendar = () => { }; return ( - <Box height="100%"> + <Box height={`${calendarOption.length * 165}px`} width="900px"> <Flex> <InfoTooltip - label=" Only showing the next year of planned DAG runs or the next 2000 runs, + label="Only showing the next year of planned DAG runs or the next 2000 runs, whichever comes first." size={16} /> diff --git a/airflow/www/static/js/dag/details/index.tsx b/airflow/www/static/js/dag/details/index.tsx index b459a82266..afe3de297c 100644 --- a/airflow/www/static/js/dag/details/index.tsx +++ b/airflow/www/static/js/dag/details/index.tsx @@ -444,7 +444,7 @@ const Details = ({ </TabPanel> )} {isDag && ( - <TabPanel height="100%" width="100%"> + <TabPanel height="100%" width="100%" overflow="auto"> <Calendar /> </TabPanel> )}
