bbovenzi commented on code in PR #64387:
URL: https://github.com/apache/airflow/pull/64387#discussion_r3059009927
##########
airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx:
##########
@@ -143,9 +143,15 @@ export const Gantt = ({ dagRunState, limit, runAfterGte,
runAfterLte, runType, t
const gridTiSummaries = summariesByRunId.get(runId);
const summariesLoading = Boolean(runId && selectedRun &&
!summariesByRunId.has(runId));
- // Single fetch for all Gantt data (individual task tries)
+ // startDate and endDate are sent to the backend as query parameters.
+ // The server filters the data — NOT the browser.
const { data: ganttData, isLoading: ganttLoading } =
useGanttServiceGetGanttData(
- { dagId, runId },
+ {
+ dagId,
+ runId,
+ startDate: filterStartDate ? `${filterStartDate}T00:00:00Z` : undefined,
+ endDate: filterEndDate ? `${filterEndDate}T23:59:59Z` : undefined,
Review Comment:
The dates should include the full time. Most dags run in less than a day, so
if the most precise you can be is day, then this filter is entirely useless.
##########
airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx:
##########
@@ -228,21 +234,74 @@ export const Gantt = ({ dagRunState, limit, runAfterGte,
runAfterLte, runType, t
};
return (
- <Box
- height={`${fixedHeight}px`}
- minW="250px"
- ml={-2}
- mt={`${GRID_BODY_OFFSET_PX}px`}
- onMouseLeave={handleChartMouseLeave}
- w="100%"
- >
- <Bar
- data={chartData}
- options={chartOptions}
- style={{
- paddingTop: flatNodes.length === 1 ? 15 : 1.5,
- }}
- />
- </Box>
+ <>
+ {/* Date range inputs — values are sent to backend as query params, no
client-side filtering */}
+ <Box alignItems="flex-start" display="flex" gap="4" mb="4">
Review Comment:
Making this a box in the gantt chart messes up all of the positioning of the
element.
##########
airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx:
##########
@@ -81,8 +79,12 @@ const CHART_PADDING = 36;
const CHART_ROW_HEIGHT = 20;
const MIN_BAR_WIDTH = 10;
-export const Gantt = ({ dagRunState, limit, runAfterGte, runAfterLte, runType,
triggeringUser }: Props) => {
+export const Gantt = ({ dagRunState, limit, runType, triggeringUser }: Props)
=> {
const { dagId = "", groupId: selectedGroupId, runId = "", taskId:
selectedTaskId } = useParams();
+ const [filterStartDate, setFilterStartDate] = useState("");
+ const [filterEndDate, setFilterEndDate] = useState("");
+ const [dateError, setDateError] = useState("");
Review Comment:
We don't need state management for the error. It can just be a variable:
`const isRangeValid = [startDate is before endDate]`
##########
airflow-core/src/airflow/ui/src/layouts/Details/Gantt/Gantt.tsx:
##########
@@ -228,21 +234,74 @@ export const Gantt = ({ dagRunState, limit, runAfterGte,
runAfterLte, runType, t
};
return (
- <Box
- height={`${fixedHeight}px`}
- minW="250px"
- ml={-2}
- mt={`${GRID_BODY_OFFSET_PX}px`}
- onMouseLeave={handleChartMouseLeave}
- w="100%"
- >
- <Bar
- data={chartData}
- options={chartOptions}
- style={{
- paddingTop: flatNodes.length === 1 ? 15 : 1.5,
- }}
- />
- </Box>
+ <>
+ {/* Date range inputs — values are sent to backend as query params, no
client-side filtering */}
+ <Box alignItems="flex-start" display="flex" gap="4" mb="4">
+ <Field.Root invalid={Boolean(dateError)} maxW="200px">
+ <Field.Label color="fg.muted" fontSize="xs">
+ {translate("startDate")}
+ </Field.Label>
+ <Input
+ fontSize="sm"
+ fontWeight="medium"
+ onChange={(e) => {
+ const value = e.target.value;
+
+ if (value && filterEndDate && value > filterEndDate) {
+ setDateError(translate("startDateAfterEndDate"));
+ return;
+ }
+ setDateError("");
+ setFilterStartDate(value);
+ }}
+ placeholder="YYYY-MM-DD"
+ size="sm"
+ type="date"
+ value={filterStartDate}
+ />
+ </Field.Root>
+
+ <Field.Root invalid={Boolean(dateError)} maxW="200px">
+ <Field.Label color="fg.muted" fontSize="xs">
+ {translate("endDate")}
+ </Field.Label>
+ <Input
+ fontSize="sm"
+ fontWeight="medium"
+ onChange={(e) => {
+ const value = e.target.value;
+
+ if (value && filterStartDate && value < filterStartDate) {
+ setDateError(translate("endDateBeforeStartDate"));
+ return;
+ }
+ setDateError("");
+ setFilterEndDate(value);
+ }}
+ placeholder="YYYY-MM-DD"
+ size="sm"
+ type="date"
+ value={filterEndDate}
+ />
+ {dateError ? <Field.ErrorText
fontSize="xs">{dateError}</Field.ErrorText> : undefined}
+ </Field.Root>
Review Comment:
We already have a date range filter component. Let's use it.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
