You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2025/04/28 20:29:41 UTC
(airflow) 02/03: Show backfill banner after creating a new backfill (#49666)
This is an automated email from the ASF dual-hosted git repository.
kaxilnaik pushed a commit to branch v3-0-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
commit ec7c99c49069faf59e2c1e7b3622459ce4b9d597
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Mon Apr 28 14:14:04 2025 -0400
Show backfill banner after creating a new backfill (#49666)
(cherry picked from commit e1d0545f3fb20477dbc5512761e4fd51d98c6640)
---
.../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 9d26f27d986..1cf543ebca9 100644
--- a/airflow-core/src/airflow/ui/src/main.tsx
+++ b/airflow-core/src/airflow/ui/src/main.tsx
@@ -28,7 +28,7 @@ import { ColorModeProvider } from "src/context/colorMode";
import { TimezoneProvider } from "src/context/timezone";
import { router } from "src/router";
-import { queryClient } from "./queryClient";
+import { client } from "./queryClient";
import { system } from "./theme";
import { clearToken, tokenHandler } from "./utils/tokenHandler";
@@ -65,7 +65,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 3f782851242..1aa9a42e4a8 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(),