Copilot commented on code in PR #64878: URL: https://github.com/apache/airflow/pull/64878#discussion_r3067443982
########## airflow-core/src/airflow/ui/src/pages/Dashboard/Deadlines/Deadlines.tsx: ########## @@ -0,0 +1,179 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { Badge, Box, Flex, Heading, HStack, Link, Separator, Skeleton, Text, VStack } from "@chakra-ui/react"; +import dayjs from "dayjs"; +import { useTranslation } from "react-i18next"; +import { FiAlertTriangle, FiClock } from "react-icons/fi"; +import { Link as RouterLink } from "react-router-dom"; + +import { useDeadlinesServiceGetDeadlines } from "openapi/queries"; +import type { DeadlineResponse } from "openapi/requests/types.gen"; +import { ErrorAlert } from "src/components/ErrorAlert"; +import Time from "src/components/Time"; +import { useAutoRefresh } from "src/utils"; + +const LIMIT = 5; + +const DeadlineRow = ({ deadline }: { readonly deadline: DeadlineResponse }) => ( + <HStack justifyContent="space-between" px={2} py={1.5} width="100%"> + <VStack alignItems="flex-start" gap={0}> + <HStack> + <Link asChild color="fg.info" fontSize="sm" fontWeight="bold"> + <RouterLink to={`/dags/${deadline.dag_id}`}>{deadline.dag_id}</RouterLink> + </Link> + <Text color="fg.muted" fontSize="xs"> + / + </Text> + <Link asChild color="fg.info" fontSize="sm"> + <RouterLink to={`/dags/${deadline.dag_id}/runs/${deadline.dag_run_id}`}> + {deadline.dag_run_id} + </RouterLink> + </Link> + </HStack> + {deadline.alert_name !== undefined && deadline.alert_name !== "" ? ( + <Text color="fg.muted" fontSize="xs"> + {deadline.alert_name} + </Text> + ) : undefined} + </VStack> + <Time datetime={deadline.deadline_time} fontSize="sm" /> + </HStack> +); + +export const Deadlines = () => { + const { t: translate } = useTranslation("dag"); Review Comment: This component uses `useTranslation("dag")` with keys like `overview.deadlines.title/pending/recentlyMissed`, but those keys don’t exist in the en locale files. Add the corresponding entries (likely under `public/i18n/locales/en/dag.json` -> `overview`) or switch to an existing namespace/key set so the dashboard doesn’t render raw keys. ```suggestion const { t } = useTranslation("dag"); const fallbackTranslations: Record<string, string> = { "overview.deadlines.pending": "Pending", "overview.deadlines.recentlyMissed": "Recently missed", "overview.deadlines.title": "Deadlines", }; const translate = (key: string) => t(key, { defaultValue: fallbackTranslations[key] ?? key }); ``` ########## airflow-core/src/airflow/ui/openapi-gen/requests/types.gen.ts: ########## @@ -2103,7 +2103,7 @@ export type LightGridTaskInstanceSummary = { /** * Define all menu items defined in the menu. */ -export type MenuItem = 'Required Actions' | 'Assets' | 'Audit Log' | 'Config' | 'Connections' | 'Dags' | 'Docs' | 'Jobs' | 'Plugins' | 'Pools' | 'Providers' | 'Variables' | 'XComs'; +export type MenuItem = 'Required Actions' | 'Assets' | 'Audit Log' | 'Config' | 'Connections' | 'Dags' | 'Deadlines' | 'Docs' | 'Jobs' | 'Plugins' | 'Pools' | 'Providers' | 'Variables' | 'XComs'; Review Comment: This file is marked auto-generated by @hey-api/openapi-ts. To avoid future drift/merge conflicts, please ensure this change comes from regenerating the OpenAPI client (and avoid hand-editing `openapi-gen/*`); otherwise the next regen will overwrite it. ########## airflow-core/src/airflow/ui/src/pages/Dashboard/Deadlines/Deadlines.tsx: ########## @@ -0,0 +1,179 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { Badge, Box, Flex, Heading, HStack, Link, Separator, Skeleton, Text, VStack } from "@chakra-ui/react"; +import dayjs from "dayjs"; +import { useTranslation } from "react-i18next"; +import { FiAlertTriangle, FiClock } from "react-icons/fi"; +import { Link as RouterLink } from "react-router-dom"; + +import { useDeadlinesServiceGetDeadlines } from "openapi/queries"; +import type { DeadlineResponse } from "openapi/requests/types.gen"; +import { ErrorAlert } from "src/components/ErrorAlert"; +import Time from "src/components/Time"; +import { useAutoRefresh } from "src/utils"; + +const LIMIT = 5; + +const DeadlineRow = ({ deadline }: { readonly deadline: DeadlineResponse }) => ( + <HStack justifyContent="space-between" px={2} py={1.5} width="100%"> + <VStack alignItems="flex-start" gap={0}> + <HStack> + <Link asChild color="fg.info" fontSize="sm" fontWeight="bold"> + <RouterLink to={`/dags/${deadline.dag_id}`}>{deadline.dag_id}</RouterLink> + </Link> + <Text color="fg.muted" fontSize="xs"> + / + </Text> + <Link asChild color="fg.info" fontSize="sm"> + <RouterLink to={`/dags/${deadline.dag_id}/runs/${deadline.dag_run_id}`}> + {deadline.dag_run_id} + </RouterLink> + </Link> + </HStack> + {deadline.alert_name !== undefined && deadline.alert_name !== "" ? ( + <Text color="fg.muted" fontSize="xs"> + {deadline.alert_name} + </Text> + ) : undefined} + </VStack> + <Time datetime={deadline.deadline_time} fontSize="sm" /> + </HStack> +); + +export const Deadlines = () => { + const { t: translate } = useTranslation("dag"); + const refetchInterval = useAutoRefresh({ checkPendingRuns: true }); + const now = dayjs().toISOString(); + const last24h = dayjs().subtract(24, "hour").toISOString(); + Review Comment: `now`/`last24h` are recomputed on every render and then passed into `useDeadlinesServiceGetDeadlines`. The generated hook includes these values in the queryKey, so each render creates a brand-new query (can lead to continuous refetching when data arrives). Make the time bounds stable (e.g., memoize/state) and only update them on a controlled cadence (like the auto-refresh interval) rather than per-render. ########## airflow-core/src/airflow/ui/src/pages/Deadlines/index.tsx: ########## @@ -0,0 +1,150 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { Badge, Box, Heading, Link, VStack } from "@chakra-ui/react"; +import type { ColumnDef } from "@tanstack/react-table"; +import type { TFunction } from "i18next"; +import { useTranslation } from "react-i18next"; +import { Link as RouterLink, useSearchParams } from "react-router-dom"; + +import { useDeadlinesServiceGetDeadlines } from "openapi/queries"; +import type { DeadlineResponse } from "openapi/requests/types.gen"; +import { DataTable } from "src/components/DataTable"; +import { useTableURLState } from "src/components/DataTable/useTableUrlState"; +import { ErrorAlert } from "src/components/ErrorAlert"; +import { FilterBar } from "src/components/FilterBar"; +import Time from "src/components/Time"; +import { TruncatedText } from "src/components/TruncatedText"; +import { SearchParamsKeys } from "src/constants/searchParams"; +import { useFiltersHandler, type FilterableSearchParamsKeys } from "src/utils"; + +type DeadlineRow = { row: { original: DeadlineResponse } }; + +const createColumns = (translate: TFunction): Array<ColumnDef<DeadlineResponse>> => [ + { + accessorKey: "dag_id", + cell: ({ row: { original } }: DeadlineRow) => ( + <Link asChild color="fg.info"> + <RouterLink to={`/dags/${original.dag_id}`}> + <TruncatedText text={original.dag_id} /> + </RouterLink> + </Link> + ), + header: translate("common:dagId"), + }, + { + accessorKey: "dag_run_id", + cell: ({ row: { original } }: DeadlineRow) => ( + <Link asChild color="fg.info"> + <RouterLink to={`/dags/${original.dag_id}/runs/${original.dag_run_id}`}> + <TruncatedText text={original.dag_run_id} /> + </RouterLink> + </Link> + ), + enableSorting: false, + header: translate("common:dagRunId"), + }, + { + accessorKey: "deadline_time", + cell: ({ row: { original } }: DeadlineRow) => <Time datetime={original.deadline_time} />, + header: translate("browse:deadlines.columns.deadlineTime"), + }, + { + accessorKey: "missed", + cell: ({ + row: { + original: { missed }, + }, + }) => ( + <Badge colorPalette={missed ? "red" : "blue"} size="sm" variant="solid"> + {missed + ? translate("browse:deadlines.filters.statusOptions.missed") + : translate("browse:deadlines.filters.statusOptions.pending")} + </Badge> + ), + header: translate("browse:deadlines.columns.status"), + }, + { + accessorKey: "alert_name", + cell: ({ row: { original } }) => original.alert_name ?? "", + enableSorting: false, + header: translate("browse:deadlines.columns.alertName"), + }, + { + accessorKey: "created_at", + cell: ({ row: { original } }: DeadlineRow) => <Time datetime={original.created_at} />, + header: translate("common:table.createdAt"), + }, +]; + +const deadlinesFilterKeys: Array<FilterableSearchParamsKeys> = [ + SearchParamsKeys.DAG_ID, + SearchParamsKeys.MISSED, +]; + +export const Deadlines = () => { + const { t: translate } = useTranslation(["browse", "common"]); + const { setTableURLState, tableURLState } = useTableURLState(); + const [searchParams] = useSearchParams(); + + const { filterConfigs, handleFiltersChange, initialValues } = useFiltersHandler(deadlinesFilterKeys); + + const columns = createColumns(translate); + + const { pagination, sorting } = tableURLState; + const [sort] = sorting; + const orderBy = sort ? [`${sort.desc ? "-" : ""}${sort.id}`] : ["-deadline_time"]; + + const filteredDagId = searchParams.get(SearchParamsKeys.DAG_ID); + const filteredMissed = searchParams.get(SearchParamsKeys.MISSED); + + const missedFilter = filteredMissed === "true" ? true : filteredMissed === "false" ? false : undefined; + + const { data, error, isFetching, isLoading } = useDeadlinesServiceGetDeadlines({ + dagId: filteredDagId !== null && filteredDagId !== "" ? filteredDagId : "~", + dagRunId: "~", + limit: pagination.pageSize, + missed: missedFilter, + offset: pagination.pageIndex * pagination.pageSize, + orderBy, + }); Review Comment: The PR description says the global Deadlines view should show (1) pending deadlines with `deadline_time` in the future and (2) missed deadlines only from the last 24h. This page currently only filters by `missed` (optional) and `dagId`, with no default `deadlineTimeGte`/`lastUpdatedAtGte` constraints, so older missed deadlines (and past pending ones) will be included. Consider applying the stated default time filters, or adjust the UI/API to support the intended “pending future + missed last 24h” behavior (which may require 2 sections/queries or a dedicated backend filter). ########## airflow-core/src/airflow/ui/openapi-gen/requests/schemas.gen.ts: ########## @@ -8580,7 +8580,7 @@ export const $LightGridTaskInstanceSummary = { export const $MenuItem = { type: 'string', - enum: ['Required Actions', 'Assets', 'Audit Log', 'Config', 'Connections', 'Dags', 'Docs', 'Jobs', 'Plugins', 'Pools', 'Providers', 'Variables', 'XComs'], + enum: ['Required Actions', 'Assets', 'Audit Log', 'Config', 'Connections', 'Dags', 'Deadlines', 'Docs', 'Jobs', 'Plugins', 'Pools', 'Providers', 'Variables', 'XComs'], title: 'MenuItem', Review Comment: This file is marked auto-generated by @hey-api/openapi-ts. To avoid future drift/merge conflicts, ensure the enum update is produced by regenerating the OpenAPI client (not manual edits), and that all generated artifacts are updated consistently. -- 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]
