You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by "kaxil (via GitHub)" <gi...@apache.org> on 2026/02/06 01:16:50 UTC
[PR] Add Jobs page to the Airflow UI [airflow]
kaxil opened a new pull request, #61512:
URL: https://github.com/apache/airflow/pull/61512
Adds a new Jobs table under Browse menu with sorting, pagination, and filters for state, type, hostname, executor class, start date range, and end date range similar to Airflow 2.
Also fixed the backend API to not hardcode a running-state filter so all job states are queryable. Render job states with StateBadge for visual consistency with other pages.
<img width="1658" height="858" alt="image" src="https://github.com/user-attachments/assets/0b73d2e0-e3ad-4ade-bfb4-3e6349b917ae" />
<img width="1687" height="858" alt="image" src="https://github.com/user-attachments/assets/5ad8d128-2487-4a62-8544-ac153fa3a193" />
<img width="724" height="410" alt="image" src="https://github.com/user-attachments/assets/0d7878c9-ddf1-4755-a7f0-d40dfcc71e30" />
<img width="1247" height="516" alt="image" src="https://github.com/user-attachments/assets/13b4a719-3e06-4dbf-813b-6a811c3cc033" />
<!--
Thank you for contributing!
Please provide above a brief description of the changes made in this pull request.
Write a good git commit message following this guide: http://chris.beams.io/posts/git-commit/
Please make sure that your code changes are covered with tests.
And in case of new features or big changes remember to adjust the documentation.
Feel free to ping (in general) for the review if you do not see reaction for a few days
(72 Hours is the minimum reaction time you can expect from volunteers) - we sometimes miss notifications.
In case of an existing issue, reference it using one of the following:
* closes: #ISSUE
* related: #ISSUE
-->
---
##### Was generative AI tooling used to co-author this PR?
<!--
If generative AI tooling has been used in the process of authoring this PR, please
change below checkbox to `[X]` followed by the name of the tool, uncomment the "Generated-by".
-->
- [ ] Yes (please specify the tool below)
<!--
Generated-by: [Tool Name] following [the guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#gen-ai-assisted-contributions)
-->
---
* Read the **[Pull Request Guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#pull-request-guidelines)** for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
* For fundamental code changes, an Airflow Improvement Proposal ([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvement+Proposals)) is needed.
* When adding dependency, check compliance with the [ASF 3rd Party License Policy](https://www.apache.org/legal/resolved.html#category-x).
* For significant user-facing changes create newsfragment: `{pr_number}.significant.rst` or `{issue_number}.significant.rst`, in [airflow-core/newsfragments](https://github.com/apache/airflow/tree/main/airflow-core/newsfragments).
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Add Jobs page to the Airflow UI [airflow]
Posted by "kaxil (via GitHub)" <gi...@apache.org>.
kaxil commented on code in PR #61512:
URL: https://github.com/apache/airflow/pull/61512#discussion_r2774707906
##########
airflow-core/src/airflow/ui/src/pages/Jobs.tsx:
##########
@@ -0,0 +1,156 @@
+/*!
+ * 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 { Box, Heading, VStack } from "@chakra-ui/react";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
+
+import { useJobServiceGetJobs } from "openapi/queries";
+import type { JobResponse, TaskInstanceState } 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 { StateBadge } from "src/components/StateBadge";
+import Time from "src/components/Time";
+import { SearchParamsKeys } from "src/constants/searchParams";
+import { useFiltersHandler, type FilterableSearchParamsKeys } from "src/utils";
+
+const createColumns = (translate: TFunction): Array<ColumnDef<JobResponse>> => [
+ {
+ accessorKey: "id",
+ header: translate("jobs.columns.id"),
+ },
+ {
+ accessorKey: "job_type",
+ header: translate("jobs.columns.jobType"),
+ },
+ {
+ accessorKey: "state",
+ cell: ({
+ row: {
+ original: { state },
+ },
+ }) =>
+ state === null ? (
+ ""
+ ) : (
+ <StateBadge state={state as TaskInstanceState}>{translate(`common:states.${state}`)}</StateBadge>
Review Comment:
Added comment explaining the TaskInstanceState cast: // Job states (running, success, failed, restarting) are a subset of TaskInstanceState
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Add Jobs page to the Airflow UI [airflow]
Posted by "kaxil (via GitHub)" <gi...@apache.org>.
kaxil merged PR #61512:
URL: https://github.com/apache/airflow/pull/61512
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Add Jobs page to the Airflow UI [airflow]
Posted by "guan404ming (via GitHub)" <gi...@apache.org>.
guan404ming commented on code in PR #61512:
URL: https://github.com/apache/airflow/pull/61512#discussion_r2774716916
##########
airflow-core/src/airflow/ui/src/pages/Jobs.tsx:
##########
@@ -0,0 +1,156 @@
+/*!
+ * 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 { Box, Heading, VStack } from "@chakra-ui/react";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
+
+import { useJobServiceGetJobs } from "openapi/queries";
+import type { JobResponse, TaskInstanceState } 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 { StateBadge } from "src/components/StateBadge";
+import Time from "src/components/Time";
+import { SearchParamsKeys } from "src/constants/searchParams";
+import { useFiltersHandler, type FilterableSearchParamsKeys } from "src/utils";
+
+const createColumns = (translate: TFunction): Array<ColumnDef<JobResponse>> => [
+ {
+ accessorKey: "id",
+ header: translate("jobs.columns.id"),
+ },
+ {
+ accessorKey: "job_type",
+ header: translate("jobs.columns.jobType"),
+ },
+ {
+ accessorKey: "state",
+ cell: ({
+ row: {
+ original: { state },
+ },
+ }) =>
+ state === null ? (
+ ""
+ ) : (
+ <StateBadge state={state as TaskInstanceState}>{translate(`common:states.${state}`)}</StateBadge>
Review Comment:
Thanks!
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Add Jobs page to the Airflow UI [airflow]
Posted by "guan404ming (via GitHub)" <gi...@apache.org>.
guan404ming commented on code in PR #61512:
URL: https://github.com/apache/airflow/pull/61512#discussion_r2773812011
##########
airflow-core/src/airflow/ui/src/constants/filterConfigs.tsx:
##########
@@ -131,6 +145,36 @@ export const useFilterConfigs = () => {
label: translate("browse:auditLog.filters.eventType"),
type: FilterTypes.TEXT,
},
+ [SearchParamsKeys.EXECUTOR_CLASS]: {
+ hotkeyDisabled: true,
+ icon: <MdBuild />,
+ label: translate("admin:jobs.columns.executorClass"),
+ type: FilterTypes.TEXT,
+ },
+ [SearchParamsKeys.HOSTNAME]: {
+ hotkeyDisabled: true,
+ icon: <MdComputer />,
+ label: translate("admin:jobs.columns.hostname"),
+ type: FilterTypes.TEXT,
+ },
+ [SearchParamsKeys.JOB_STATE]: {
+ icon: <MdCheckCircle />,
+ label: translate("common:state"),
+ options: jobStateOptions.items.map((option) => ({
+ label: option.value === "all" ? translate(option.label) : translate(option.label),
Review Comment:
Both branches are identical we could simplify it
```suggestion
label: translate(option.label),
```
##########
airflow-core/src/airflow/ui/src/pages/Jobs.tsx:
##########
@@ -0,0 +1,156 @@
+/*!
+ * 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 { Box, Heading, VStack } from "@chakra-ui/react";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
+
+import { useJobServiceGetJobs } from "openapi/queries";
+import type { JobResponse, TaskInstanceState } 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 { StateBadge } from "src/components/StateBadge";
+import Time from "src/components/Time";
+import { SearchParamsKeys } from "src/constants/searchParams";
+import { useFiltersHandler, type FilterableSearchParamsKeys } from "src/utils";
+
+const createColumns = (translate: TFunction): Array<ColumnDef<JobResponse>> => [
+ {
+ accessorKey: "id",
+ header: translate("jobs.columns.id"),
+ },
+ {
+ accessorKey: "job_type",
+ header: translate("jobs.columns.jobType"),
+ },
+ {
+ accessorKey: "state",
+ cell: ({
+ row: {
+ original: { state },
+ },
+ }) =>
+ state === null ? (
+ ""
Review Comment:
Nit: We usually use `undefined` to prevent render redundant element
```suggestion
undefined
```
##########
airflow-core/src/airflow/ui/src/pages/Jobs.tsx:
##########
@@ -0,0 +1,156 @@
+/*!
+ * 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 { Box, Heading, VStack } from "@chakra-ui/react";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
+
+import { useJobServiceGetJobs } from "openapi/queries";
+import type { JobResponse, TaskInstanceState } 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 { StateBadge } from "src/components/StateBadge";
+import Time from "src/components/Time";
+import { SearchParamsKeys } from "src/constants/searchParams";
+import { useFiltersHandler, type FilterableSearchParamsKeys } from "src/utils";
+
+const createColumns = (translate: TFunction): Array<ColumnDef<JobResponse>> => [
+ {
+ accessorKey: "id",
+ header: translate("jobs.columns.id"),
+ },
+ {
+ accessorKey: "job_type",
+ header: translate("jobs.columns.jobType"),
+ },
+ {
+ accessorKey: "state",
+ cell: ({
+ row: {
+ original: { state },
+ },
+ }) =>
+ state === null ? (
+ ""
+ ) : (
+ <StateBadge state={state as TaskInstanceState}>{translate(`common:states.${state}`)}</StateBadge>
Review Comment:
`state` here is typed as `string | null` on `JobResponse`, but it's cast to TaskInstanceState. Job states are a subset of `TaskInstanceState`, but the cast is kind of semantically misleading. Consider adding a `JobState` type or add a comment noting the cast is intentional.
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Add Jobs page to the Airflow UI [airflow]
Posted by "guan404ming (via GitHub)" <gi...@apache.org>.
guan404ming commented on code in PR #61512:
URL: https://github.com/apache/airflow/pull/61512#discussion_r2773829426
##########
airflow-core/src/airflow/ui/src/pages/Jobs.tsx:
##########
@@ -0,0 +1,156 @@
+/*!
+ * 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 { Box, Heading, VStack } from "@chakra-ui/react";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
+
+import { useJobServiceGetJobs } from "openapi/queries";
+import type { JobResponse, TaskInstanceState } 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 { StateBadge } from "src/components/StateBadge";
+import Time from "src/components/Time";
+import { SearchParamsKeys } from "src/constants/searchParams";
+import { useFiltersHandler, type FilterableSearchParamsKeys } from "src/utils";
+
+const createColumns = (translate: TFunction): Array<ColumnDef<JobResponse>> => [
+ {
+ accessorKey: "id",
+ header: translate("jobs.columns.id"),
+ },
+ {
+ accessorKey: "job_type",
+ header: translate("jobs.columns.jobType"),
+ },
+ {
+ accessorKey: "state",
+ cell: ({
+ row: {
+ original: { state },
+ },
+ }) =>
+ state === null ? (
+ ""
+ ) : (
+ <StateBadge state={state as TaskInstanceState}>{translate(`common:states.${state}`)}</StateBadge>
Review Comment:
`state` here is typed as `string | null` on `JobResponse`, but it's cast to TaskInstanceState. Job states are a subset of `TaskInstanceState`, but the cast is kind of semantically misleading. Maybe Consider adding a `JobState` type or add a comment noting the cast is intentional.
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org