You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by bb...@apache.org on 2025/04/28 18:14:10 UTC
(airflow) branch main updated: Show backfill banner after creating a new backfill (#49666)
This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new e1d0545f3fb Show backfill banner after creating a new backfill (#49666)
e1d0545f3fb is described below
commit e1d0545f3fb20477dbc5512761e4fd51d98c6640
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Mon Apr 28 14:14:04 2025 -0400
Show backfill banner after creating a new backfill (#49666)
---
.../airflow/ui/src/components/Banner/BackfillBanner.tsx | 15 ++++++++-------
airflow-core/src/airflow/ui/src/main.tsx | 4 ++--
.../src/airflow/ui/src/queries/useCreateBackfill.ts | 7 ++++---
airflow-core/src/airflow/ui/src/queryClient.ts | 2 +-
airflow-core/src/airflow/ui/src/router.tsx | 4 ++--
5 files changed, 17 insertions(+), 15 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/components/Banner/BackfillBanner.tsx b/airflow-core/src/airflow/ui/src/components/Banner/BackfillBanner.tsx
index 65807847c18..7a94a45dad7 100644
--- a/airflow-core/src/airflow/ui/src/components/Banner/BackfillBanner.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Banner/BackfillBanner.tsx
@@ -17,6 +17,7 @@
* under the License.
*/
import { Box, HStack, Spacer, Text, type ButtonProps } from "@chakra-ui/react";
+import { useQueryClient } from "@tanstack/react-query";
import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
import { RiArrowGoBackFill } from "react-icons/ri";
@@ -27,7 +28,6 @@ import {
useBackfillServicePauseBackfill,
useBackfillServiceUnpauseBackfill,
} from "openapi/queries";
-import { queryClient } from "src/queryClient";
import Time from "../Time";
import { Button, ProgressBar } from "../ui";
@@ -45,18 +45,19 @@ const buttonProps = {
variant: "outline",
} satisfies ButtonProps;
-const onSuccess = async () => {
- await queryClient.invalidateQueries({
- queryKey: [useBackfillServiceListBackfills1Key],
- });
-};
-
const BackfillBanner = ({ dagId }: Props) => {
const { data, isLoading } = useBackfillServiceListBackfills1({
dagId,
});
const [backfill] = data?.backfills.filter((bf) => bf.completed_at === null) ?? [];
+ const queryClient = useQueryClient();
+ const onSuccess = async () => {
+ await queryClient.invalidateQueries({
+ queryKey: [useBackfillServiceListBackfills1Key],
+ });
+ };
+
const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill({ onSuccess });
const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill({
onSuccess,
diff --git a/airflow-core/src/airflow/ui/src/main.tsx b/airflow-core/src/airflow/ui/src/main.tsx
index f91fdd4cf44..3e7041cfde8 100644
--- a/airflow-core/src/airflow/ui/src/main.tsx
+++ b/airflow-core/src/airflow/ui/src/main.tsx
@@ -29,7 +29,7 @@ import { TimezoneProvider } from "src/context/timezone";
import { router } from "src/router";
import { getRedirectPath } from "src/utils/links.ts";
-import { queryClient } from "./queryClient";
+import { client } from "./queryClient";
import { system } from "./theme";
import { clearToken, tokenHandler } from "./utils/tokenHandler";
@@ -60,7 +60,7 @@ createRoot(document.querySelector("#root") as HTMLDivElement).render(
<StrictMode>
<ChakraProvider value={system}>
<ColorModeProvider>
- <QueryClientProvider client={queryClient}>
+ <QueryClientProvider client={client}>
<TimezoneProvider>
<RouterProvider router={router} />
</TimezoneProvider>
diff --git a/airflow-core/src/airflow/ui/src/queries/useCreateBackfill.ts b/airflow-core/src/airflow/ui/src/queries/useCreateBackfill.ts
index 3685247d7e3..ae46751a278 100644
--- a/airflow-core/src/airflow/ui/src/queries/useCreateBackfill.ts
+++ b/airflow-core/src/airflow/ui/src/queries/useCreateBackfill.ts
@@ -16,20 +16,21 @@
* specific language governing permissions and limitations
* under the License.
*/
+import { useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
-import { useBackfillServiceCreateBackfill, useBackfillServiceListBackfillsKey } from "openapi/queries";
+import { useBackfillServiceCreateBackfill, useBackfillServiceListBackfills1Key } from "openapi/queries";
import type { CreateBackfillData } from "openapi/requests/types.gen";
import { toaster } from "src/components/ui";
-import { queryClient } from "src/queryClient";
export const useCreateBackfill = ({ onSuccessConfirm }: { onSuccessConfirm: () => void }) => {
const [dateValidationError, setDateValidationError] = useState<unknown>(undefined);
const [error, setError] = useState<unknown>(undefined);
+ const queryClient = useQueryClient();
const onSuccess = async () => {
await queryClient.invalidateQueries({
- queryKey: [useBackfillServiceListBackfillsKey],
+ queryKey: [useBackfillServiceListBackfills1Key],
});
toaster.create({
description: "Backfill jobs have been successfully triggered.",
diff --git a/airflow-core/src/airflow/ui/src/queryClient.ts b/airflow-core/src/airflow/ui/src/queryClient.ts
index 2abfe0cc104..f090a7c7939 100644
--- a/airflow-core/src/airflow/ui/src/queryClient.ts
+++ b/airflow-core/src/airflow/ui/src/queryClient.ts
@@ -26,7 +26,7 @@ if (OpenAPI.BASE.endsWith("/")) {
OpenAPI.BASE = OpenAPI.BASE.slice(0, -1);
}
-export const queryClient = new QueryClient({
+export const client = new QueryClient({
defaultOptions: {
mutations: {
retry: 1,
diff --git a/airflow-core/src/airflow/ui/src/router.tsx b/airflow-core/src/airflow/ui/src/router.tsx
index 3d580e3e209..77d55de10bf 100644
--- a/airflow-core/src/airflow/ui/src/router.tsx
+++ b/airflow-core/src/airflow/ui/src/router.tsx
@@ -54,7 +54,7 @@ import { XCom } from "src/pages/XCom";
import { Configs } from "./pages/Configs";
import { Security } from "./pages/Security";
-import { queryClient } from "./queryClient";
+import { client } from "./queryClient";
const taskInstanceRoutes = [
{ element: <Logs />, index: true },
@@ -193,7 +193,7 @@ export const routerConfig = [
),
// Use react router loader to ensure we have the config before any other requests are made
loader: async () => {
- const data = await queryClient.ensureQueryData(
+ const data = await client.ensureQueryData(
queryOptions({
queryFn: ConfigService.getConfigs,
queryKey: UseConfigServiceGetConfigsKeyFn(),