You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by "aritra24 (via GitHub)" <gi...@apache.org> on 2025/03/05 19:29:06 UTC

[PR] WIP: Implement backfill banner [airflow]

aritra24 opened a new pull request, #47411:
URL: https://github.com/apache/airflow/pull/47411

   resolves: #43968
   
   <!--
    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.
    -->
   
   <!--
   Thank you for contributing! 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 committers for the review!
   
   In case of an existing issue, reference it using one of the following:
   
   closes: #ISSUE
   related: #ISSUE
   
   How to write a good git commit message:
   http://chris.beams.io/posts/git-commit/
   -->
   
   
   
   <!-- Please keep an empty line above the dashes. -->
   ---
   **^ Add meaningful description above**
   Read the **[Pull Request Guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#pull-request-guidelines)** for more information.
   In case of fundamental code changes, an Airflow Improvement Proposal ([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvement+Proposals)) is needed.
   In case of a new dependency, check compliance with the [ASF 3rd Party License Policy](https://www.apache.org/legal/resolved.html#category-x).
   In case of backwards incompatible changes please leave a note in a newsfragment file, named `{pr_number}.significant.rst` or `{issue_number}.significant.rst`, in [newsfragments](https://github.com/apache/airflow/tree/main/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] WIP: Implement backfill banner [airflow]

Posted by "aritra24 (via GitHub)" <gi...@apache.org>.
aritra24 commented on PR #47411:
URL: https://github.com/apache/airflow/pull/47411#issuecomment-2702697712

   Hmm, do you foresee there being a use for it in any other place in the future? If so I'd leave it in. Else I'll go ahead with merging the two 


-- 
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] WIP: Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1985647652


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,88 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { MdClose, MdPause, MdStop } from "react-icons/md";
+
+import { useBackfillServiceListBackfills } from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data } = useBackfillServiceListBackfills({
+    dagId,
+  });
+
+  const [visible, setVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    setVisible(data?.total_entries === undefined ? false : data.total_entries > 0);
+  }, [data]);
+
+  return visible ? (
+    <Box bg="blue.solid" color="white" fontSize="m" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />

Review Comment:
   You should only ever have one active backfill so I think this is ok



-- 
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] Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1991715918


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,109 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({
+    dagId,
+  });
+  const [backfill] = data?.backfills.filter((bf) => bf.completed_at === null) ?? [];
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill();
+  const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill();
+
+  const { isPending: isStopPending, mutate: stopPending } = useBackfillServiceCancelBackfill();
+
+  const [isPaused, setIsPaused] = useState(backfill?.is_paused ?? false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(isPausePending || isUnPausePending || isStopPending);
+  const togglePause = () => {
+    if (isPaused) {
+      pauseMutate({ backfillId: backfill?.id });
+    } else {
+      unpauseMutate({ backfillId: backfill?.id });
+    }
+    setIsPaused(!isPaused);
+  };
+
+  const cancel = () => {
+    stopPending({ backfillId: backfill?.id });
+    setIsDisabled(true);
+  };
+
+  if (isLoading || backfill === undefined) {
+    return undefined;
+  }
+
+  return (
+    <Box bg="blue.solid" color="white" fontSize="m" mr="0.5" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />
+        </>
+        <Spacer flex="max-content" />
+        <ProgressBar size="xs" visibility="visible" />
+        <ActionButton
+          actionName=""
+          disabled={isDisabled}
+          icon={isPaused ? <MdPlayArrow color="white" size="1" /> : <MdPause color="white" size="1" />}
+          loading={isPausePending || isUnPausePending}
+          onClick={() => {
+            togglePause();
+          }}
+          rounded="full"
+          size="xs"
+          text=""
+          variant="outline"
+        />
+        <ActionButton
+          actionName=""

Review Comment:
   ```suggestion
             actionName="Cancel backfill"
   ```



-- 
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] WIP: Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #47411:
URL: https://github.com/apache/airflow/pull/47411#issuecomment-2701880716

   We only use this banner once. I think you can combined the two components, Banner and BackfillBanner, and not worry about arrays and keys.


-- 
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] WIP: Implement backfill banner [airflow]

Posted by "aritra24 (via GitHub)" <gi...@apache.org>.
aritra24 commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1987759708


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,123 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdClose, MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({
+    dagId,
+  });
+
+  const backfill = data?.backfills[0];
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill();
+  const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill();
+
+  const { isPending: isStopPending, mutate: stopPending } = useBackfillServiceCancelBackfill();
+
+  let initialVisibility = false;
+
+  if (data?.total_entries !== undefined && data.total_entries > 0) {
+    initialVisibility = true;
+  }
+  const [isVisible, setIsVisible] = useState<boolean>(initialVisibility);
+  const [isActive, setIsActive] = useState(false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);

Review Comment:
   I wanted to be able to disable the buttons once the stop button is clicked, which if I use a let/const doesn't work, so I used a state. If there's a better conventional way to do it do let me know and I can try it out 🤔 



-- 
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] WIP: Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1987614212


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,123 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdClose, MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({

Review Comment:
   @dstandish Do you remember with this endpoint. Will cancelled backfills be returned?



-- 
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] Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1991715452


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,109 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({
+    dagId,
+  });
+  const [backfill] = data?.backfills.filter((bf) => bf.completed_at === null) ?? [];
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill();
+  const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill();
+
+  const { isPending: isStopPending, mutate: stopPending } = useBackfillServiceCancelBackfill();
+
+  const [isPaused, setIsPaused] = useState(backfill?.is_paused ?? false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(isPausePending || isUnPausePending || isStopPending);
+  const togglePause = () => {
+    if (isPaused) {
+      pauseMutate({ backfillId: backfill?.id });
+    } else {
+      unpauseMutate({ backfillId: backfill?.id });
+    }
+    setIsPaused(!isPaused);
+  };
+
+  const cancel = () => {
+    stopPending({ backfillId: backfill?.id });
+    setIsDisabled(true);
+  };
+
+  if (isLoading || backfill === undefined) {
+    return undefined;
+  }
+
+  return (
+    <Box bg="blue.solid" color="white" fontSize="m" mr="0.5" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />
+        </>
+        <Spacer flex="max-content" />
+        <ProgressBar size="xs" visibility="visible" />
+        <ActionButton
+          actionName=""

Review Comment:
   ```suggestion
             actionName={isPaused ? "Unpause backfill" : "Pause backfill"}
   ```
   
   We should make sure the aria-label is being set



-- 
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] WIP: Implement backfill banner [airflow]

Posted by "aritra24 (via GitHub)" <gi...@apache.org>.
aritra24 commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1986694225


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,88 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { MdClose, MdPause, MdStop } from "react-icons/md";
+
+import { useBackfillServiceListBackfills } from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data } = useBackfillServiceListBackfills({
+    dagId,
+  });
+
+  const [visible, setVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    setVisible(data?.total_entries === undefined ? false : data.total_entries > 0);
+  }, [data]);

Review Comment:
   Hmm, I was getting some weird effect of the UI not rendering if I just used just an if, perhaps I was missing something so I'll try that again and update 🤔



-- 
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] WIP: Implement backfill banner [airflow]

Posted by "aritra24 (via GitHub)" <gi...@apache.org>.
aritra24 commented on PR #47411:
URL: https://github.com/apache/airflow/pull/47411#issuecomment-2711370910

   I think there's still some buggy behaviour so I'll leave it as wip, will check it out some more tomorrow 🤔 


-- 
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] WIP: Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #47411:
URL: https://github.com/apache/airflow/pull/47411#issuecomment-2704064297

   > Hmm, do you foresee there being a use for it in any other place in the future? If so I'd leave it in. Else I'll go ahead with merging the two
   
   Let merge it for now and we can always split it apart in the future.


-- 
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] Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1991711593


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,109 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({
+    dagId,
+  });
+  const [backfill] = data?.backfills.filter((bf) => bf.completed_at === null) ?? [];
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill();
+  const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill();
+
+  const { isPending: isStopPending, mutate: stopPending } = useBackfillServiceCancelBackfill();
+
+  const [isPaused, setIsPaused] = useState(backfill?.is_paused ?? false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(isPausePending || isUnPausePending || isStopPending);

Review Comment:
   We don't need either of these states.
   
   Paused: We should just always use the backfill's value. And on an action make sure we refetch the backill. Ctrl+f the codebase for `await queryClient.invalidateQueries({`. We can make it a single `onSuccess` function we pass to all three of our mutation queries
   
   Disabled: Actually, you can delete it entirely. When `loading` is true on the button, it will already be disabled.



-- 
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] Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #47411:
URL: https://github.com/apache/airflow/pull/47411#issuecomment-2719006926

   Nice work. Thanks for being so patient through my reviews!


-- 
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] WIP: Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1985646666


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,88 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { MdClose, MdPause, MdStop } from "react-icons/md";
+
+import { useBackfillServiceListBackfills } from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data } = useBackfillServiceListBackfills({
+    dagId,
+  });
+
+  const [visible, setVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    setVisible(data?.total_entries === undefined ? false : data.total_entries > 0);
+  }, [data]);

Review Comment:
   It's best to no have `useEffect` update `useState`. 
   
   Instead we should just have an if statement for the entire component to `return undefined` 



##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,88 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { MdClose, MdPause, MdStop } from "react-icons/md";
+
+import { useBackfillServiceListBackfills } from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data } = useBackfillServiceListBackfills({
+    dagId,
+  });
+
+  const [visible, setVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    setVisible(data?.total_entries === undefined ? false : data.total_entries > 0);
+  }, [data]);

Review Comment:
   It's best to not have `useEffect` update `useState`. 
   
   Instead we should just have an if statement for the entire component to `return undefined` 



-- 
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] Implement backfill banner [airflow]

Posted by "aritra24 (via GitHub)" <gi...@apache.org>.
aritra24 commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1991891661


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,109 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({
+    dagId,
+  });
+  const [backfill] = data?.backfills.filter((bf) => bf.completed_at === null) ?? [];
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill();
+  const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill();
+
+  const { isPending: isStopPending, mutate: stopPending } = useBackfillServiceCancelBackfill();
+
+  const [isPaused, setIsPaused] = useState(backfill?.is_paused ?? false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(isPausePending || isUnPausePending || isStopPending);

Review Comment:
   Done



-- 
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] WIP: Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1985638808


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,88 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { MdClose, MdPause, MdStop } from "react-icons/md";
+
+import { useBackfillServiceListBackfills } from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data } = useBackfillServiceListBackfills({
+    dagId,
+  });
+
+  const [visible, setVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    setVisible(data?.total_entries === undefined ? false : data.total_entries > 0);
+  }, [data]);
+
+  return visible ? (
+    <Box bg="blue.solid" color="white" fontSize="m" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />
+        </>
+        <Spacer flex="max-content" />
+        <ProgressBar key="progressbar" size="xs" visibility="visible" />
+        <ActionButton
+          actionName=""
+          icon={<MdPause color="white" size="xs" />}
+          key="pause"
+          rounded="full"
+          size="xs"
+          text=""
+          variant="outline"
+        />
+        <ActionButton
+          actionName=""
+          icon={<MdStop color="white" size="xs" />}
+          key="stop"
+          rounded="full"
+          size="xs"
+          text=""
+          variant="outline"
+        />

Review Comment:
   Let's leave them disabled then



-- 
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] WIP: Implement backfill banner [airflow]

Posted by "aritra24 (via GitHub)" <gi...@apache.org>.
aritra24 commented on PR #47411:
URL: https://github.com/apache/airflow/pull/47411#issuecomment-2710745757

   Removed the usage of useEffect, it seems to work now. 


-- 
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] WIP: Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #47411:
URL: https://github.com/apache/airflow/pull/47411#issuecomment-2715903755

   > I think there's still some buggy behaviour so I'll leave it as wip, will check it out some more tomorrow 🤔
   
   I see it's marked as ready for review. Did you figure out the buggy behavior?


-- 
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] WIP: Implement backfill banner [airflow]

Posted by "aritra24 (via GitHub)" <gi...@apache.org>.
aritra24 commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1984447144


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,88 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { MdClose, MdPause, MdStop } from "react-icons/md";
+
+import { useBackfillServiceListBackfills } from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data } = useBackfillServiceListBackfills({
+    dagId,
+  });
+
+  const [visible, setVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    setVisible(data?.total_entries === undefined ? false : data.total_entries > 0);
+  }, [data]);
+
+  return visible ? (
+    <Box bg="blue.solid" color="white" fontSize="m" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />
+        </>
+        <Spacer flex="max-content" />
+        <ProgressBar key="progressbar" size="xs" visibility="visible" />
+        <ActionButton
+          actionName=""
+          icon={<MdPause color="white" size="xs" />}
+          key="pause"
+          rounded="full"
+          size="xs"
+          text=""
+          variant="outline"
+        />
+        <ActionButton
+          actionName=""
+          icon={<MdStop color="white" size="xs" />}
+          key="stop"
+          rounded="full"
+          size="xs"
+          text=""
+          variant="outline"
+        />

Review Comment:
   Need to implement their actions still



##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,88 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { MdClose, MdPause, MdStop } from "react-icons/md";
+
+import { useBackfillServiceListBackfills } from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data } = useBackfillServiceListBackfills({
+    dagId,
+  });
+
+  const [visible, setVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    setVisible(data?.total_entries === undefined ? false : data.total_entries > 0);
+  }, [data]);
+
+  return visible ? (
+    <Box bg="blue.solid" color="white" fontSize="m" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />

Review Comment:
   Probably need to update this to show a different time range since backfills returns all active backfill runs?



-- 
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] Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1991719357


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,109 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({
+    dagId,
+  });
+  const [backfill] = data?.backfills.filter((bf) => bf.completed_at === null) ?? [];
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill();
+  const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill();
+
+  const { isPending: isStopPending, mutate: stopPending } = useBackfillServiceCancelBackfill();
+
+  const [isPaused, setIsPaused] = useState(backfill?.is_paused ?? false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(isPausePending || isUnPausePending || isStopPending);
+  const togglePause = () => {
+    if (isPaused) {
+      pauseMutate({ backfillId: backfill?.id });
+    } else {
+      unpauseMutate({ backfillId: backfill?.id });
+    }
+    setIsPaused(!isPaused);
+  };
+
+  const cancel = () => {
+    stopPending({ backfillId: backfill?.id });
+    setIsDisabled(true);
+  };
+
+  if (isLoading || backfill === undefined) {
+    return undefined;
+  }
+
+  return (
+    <Box bg="blue.solid" color="white" fontSize="m" mr="0.5" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />
+        </>
+        <Spacer flex="max-content" />
+        <ProgressBar size="xs" visibility="visible" />
+        <ActionButton

Review Comment:
   ```suggestion
           <Button
   ```
   
   Let's just the plain Button from `components/ui`. This component isn't taking advantage of the ActionButton at all



-- 
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] Implement backfill banner [airflow]

Posted by "aritra24 (via GitHub)" <gi...@apache.org>.
aritra24 commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1991890815


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,109 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({
+    dagId,
+  });
+  const [backfill] = data?.backfills.filter((bf) => bf.completed_at === null) ?? [];
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill();
+  const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill();
+
+  const { isPending: isStopPending, mutate: stopPending } = useBackfillServiceCancelBackfill();
+
+  const [isPaused, setIsPaused] = useState(backfill?.is_paused ?? false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(isPausePending || isUnPausePending || isStopPending);
+  const togglePause = () => {
+    if (isPaused) {
+      pauseMutate({ backfillId: backfill?.id });
+    } else {
+      unpauseMutate({ backfillId: backfill?.id });
+    }
+    setIsPaused(!isPaused);
+  };
+
+  const cancel = () => {
+    stopPending({ backfillId: backfill?.id });
+    setIsDisabled(true);
+  };
+
+  if (isLoading || backfill === undefined) {
+    return undefined;
+  }
+
+  return (
+    <Box bg="blue.solid" color="white" fontSize="m" mr="0.5" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />
+        </>
+        <Spacer flex="max-content" />
+        <ProgressBar size="xs" visibility="visible" />
+        <ActionButton

Review Comment:
   Done



-- 
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] WIP: Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1987605234


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,123 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdClose, MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({
+    dagId,
+  });
+
+  const backfill = data?.backfills[0];
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill();
+  const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill();
+
+  const { isPending: isStopPending, mutate: stopPending } = useBackfillServiceCancelBackfill();
+
+  let initialVisibility = false;
+
+  if (data?.total_entries !== undefined && data.total_entries > 0) {
+    initialVisibility = true;
+  }
+  const [isVisible, setIsVisible] = useState<boolean>(initialVisibility);
+  const [isActive, setIsActive] = useState(false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);

Review Comment:
   Usually `isDisabled` isn't a state but just a variable like:
   
   `const isDisabled = isPausePending || isUnPausePending || isStopPending || isLoading;`



-- 
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] WIP: Implement backfill banner [airflow]

Posted by "aritra24 (via GitHub)" <gi...@apache.org>.
aritra24 commented on PR #47411:
URL: https://github.com/apache/airflow/pull/47411#issuecomment-2716315803

   Hey @bbovenzi, this is still a wip. Might've been a miss from my side for it to be ready for review. There's still a bug i think where sometimes on reload the banner doesn't show up. I'm trying to nail down why that is. Might take me a couple days to get to 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: commits-unsubscribe@airflow.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


Re: [PR] Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi merged PR #47411:
URL: https://github.com/apache/airflow/pull/47411


-- 
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] Implement backfill banner [airflow]

Posted by "aritra24 (via GitHub)" <gi...@apache.org>.
aritra24 commented on PR #47411:
URL: https://github.com/apache/airflow/pull/47411#issuecomment-2719021876

   Thanks for the detailed and insightful reviews, it's been a learning experience! 


-- 
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] WIP: Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1991619991


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,122 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdClose, MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({
+    dagId,
+  });
+  const [backfill] = data?.backfills.filter((bf) => bf.completed_at === null) ?? [];
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill();
+  const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill();
+
+  const { isPending: isStopPending, mutate: stopPending } = useBackfillServiceCancelBackfill();
+
+  let initialVisibility = false;
+
+  if (backfill !== undefined) {
+    initialVisibility = true;
+  }
+  const [isVisible, setIsVisible] = useState<boolean>(initialVisibility);
+  const [isPaused, setIsPaused] = useState(backfill?.is_paused ?? false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(isPausePending || isUnPausePending || isStopPending);
+  const togglePause = () => {
+    if (isPaused) {
+      pauseMutate({ backfillId: backfill?.id });
+    } else {
+      unpauseMutate({ backfillId: backfill?.id });
+    }
+    setIsPaused(!isPaused);
+  };
+
+  const cancel = () => {
+    stopPending({ backfillId: backfill?.id });
+    setIsDisabled(true);
+  };
+
+  return isVisible && !isLoading ? (
+    <Box bg="blue.solid" color="white" fontSize="m" mr="1.5" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />
+        </>
+        <Spacer flex="max-content" />
+        <ProgressBar size="xs" visibility="visible" />
+        <ActionButton
+          actionName=""
+          disabled={isDisabled}
+          icon={isPaused ? <MdPlayArrow color="white" size="1" /> : <MdPause color="white" size="1" />}
+          loading={isPausePending || isUnPausePending}
+          onClick={() => {
+            togglePause();
+          }}
+          rounded="full"
+          size="xs"
+          text=""
+          variant="outline"
+        />
+        <ActionButton
+          actionName=""
+          disabled={isDisabled}
+          icon={<MdStop color="white" size="1" />}
+          loading={isStopPending}
+          onClick={() => {
+            cancel();
+          }}
+          rounded="full"
+          size="xs"
+          text=""
+          variant="outline"
+        />
+        <ActionButton
+          actionName=""
+          icon={<MdClose color="white" size="1" />}
+          onClick={() => setIsVisible(false)}
+          rounded="full"
+          size="xs"
+          text=""
+          variant="outline"
+        />

Review Comment:
   Let's remove the visibility functionality. Always show a banner if a backfill is active, never show a banner when it isnt



-- 
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] Implement backfill banner [airflow]

Posted by "aritra24 (via GitHub)" <gi...@apache.org>.
aritra24 commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1991684751


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,122 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdClose, MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({
+    dagId,
+  });
+  const [backfill] = data?.backfills.filter((bf) => bf.completed_at === null) ?? [];
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill();
+  const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill();
+
+  const { isPending: isStopPending, mutate: stopPending } = useBackfillServiceCancelBackfill();
+
+  let initialVisibility = false;
+
+  if (backfill !== undefined) {
+    initialVisibility = true;
+  }
+  const [isVisible, setIsVisible] = useState<boolean>(initialVisibility);
+  const [isPaused, setIsPaused] = useState(backfill?.is_paused ?? false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(isPausePending || isUnPausePending || isStopPending);
+  const togglePause = () => {
+    if (isPaused) {
+      pauseMutate({ backfillId: backfill?.id });
+    } else {
+      unpauseMutate({ backfillId: backfill?.id });
+    }
+    setIsPaused(!isPaused);
+  };
+
+  const cancel = () => {
+    stopPending({ backfillId: backfill?.id });
+    setIsDisabled(true);
+  };
+
+  return isVisible && !isLoading ? (
+    <Box bg="blue.solid" color="white" fontSize="m" mr="1.5" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />
+        </>
+        <Spacer flex="max-content" />
+        <ProgressBar size="xs" visibility="visible" />
+        <ActionButton
+          actionName=""
+          disabled={isDisabled}
+          icon={isPaused ? <MdPlayArrow color="white" size="1" /> : <MdPause color="white" size="1" />}
+          loading={isPausePending || isUnPausePending}
+          onClick={() => {
+            togglePause();
+          }}
+          rounded="full"
+          size="xs"
+          text=""
+          variant="outline"
+        />
+        <ActionButton
+          actionName=""
+          disabled={isDisabled}
+          icon={<MdStop color="white" size="1" />}
+          loading={isStopPending}
+          onClick={() => {
+            cancel();
+          }}
+          rounded="full"
+          size="xs"
+          text=""
+          variant="outline"
+        />
+        <ActionButton
+          actionName=""
+          icon={<MdClose color="white" size="1" />}
+          onClick={() => setIsVisible(false)}
+          rounded="full"
+          size="xs"
+          text=""
+          variant="outline"
+        />

Review Comment:
   Done



-- 
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] Implement backfill banner [airflow]

Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1991715918


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,109 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({
+    dagId,
+  });
+  const [backfill] = data?.backfills.filter((bf) => bf.completed_at === null) ?? [];
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill();
+  const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill();
+
+  const { isPending: isStopPending, mutate: stopPending } = useBackfillServiceCancelBackfill();
+
+  const [isPaused, setIsPaused] = useState(backfill?.is_paused ?? false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(isPausePending || isUnPausePending || isStopPending);
+  const togglePause = () => {
+    if (isPaused) {
+      pauseMutate({ backfillId: backfill?.id });
+    } else {
+      unpauseMutate({ backfillId: backfill?.id });
+    }
+    setIsPaused(!isPaused);
+  };
+
+  const cancel = () => {
+    stopPending({ backfillId: backfill?.id });
+    setIsDisabled(true);
+  };
+
+  if (isLoading || backfill === undefined) {
+    return undefined;
+  }
+
+  return (
+    <Box bg="blue.solid" color="white" fontSize="m" mr="0.5" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />
+        </>
+        <Spacer flex="max-content" />
+        <ProgressBar size="xs" visibility="visible" />
+        <ActionButton
+          actionName=""
+          disabled={isDisabled}
+          icon={isPaused ? <MdPlayArrow color="white" size="1" /> : <MdPause color="white" size="1" />}
+          loading={isPausePending || isUnPausePending}
+          onClick={() => {
+            togglePause();
+          }}
+          rounded="full"
+          size="xs"
+          text=""
+          variant="outline"
+        />
+        <ActionButton
+          actionName=""

Review Comment:
   ```suggestion
             actionName="Cancel backfill"
   ```



##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,109 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
+
+import {
+  useBackfillServiceCancelBackfill,
+  useBackfillServiceListBackfills,
+  useBackfillServicePauseBackfill,
+  useBackfillServiceUnpauseBackfill,
+} from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data, isLoading } = useBackfillServiceListBackfills({
+    dagId,
+  });
+  const [backfill] = data?.backfills.filter((bf) => bf.completed_at === null) ?? [];
+
+  const { isPending: isPausePending, mutate: pauseMutate } = useBackfillServicePauseBackfill();
+  const { isPending: isUnPausePending, mutate: unpauseMutate } = useBackfillServiceUnpauseBackfill();
+
+  const { isPending: isStopPending, mutate: stopPending } = useBackfillServiceCancelBackfill();
+
+  const [isPaused, setIsPaused] = useState(backfill?.is_paused ?? false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(isPausePending || isUnPausePending || isStopPending);
+  const togglePause = () => {
+    if (isPaused) {
+      pauseMutate({ backfillId: backfill?.id });
+    } else {
+      unpauseMutate({ backfillId: backfill?.id });
+    }
+    setIsPaused(!isPaused);
+  };
+
+  const cancel = () => {
+    stopPending({ backfillId: backfill?.id });
+    setIsDisabled(true);
+  };
+
+  if (isLoading || backfill === undefined) {
+    return undefined;
+  }
+
+  return (
+    <Box bg="blue.solid" color="white" fontSize="m" mr="0.5" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />
+        </>
+        <Spacer flex="max-content" />
+        <ProgressBar size="xs" visibility="visible" />
+        <ActionButton
+          actionName=""

Review Comment:
   ```suggestion
             actionName={isPaused ? "Unpause backfill" : "Pause backfill"}
   ```
   
   We should make sure the aria-label is being set



-- 
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] WIP: Implement backfill banner [airflow]

Posted by "aritra24 (via GitHub)" <gi...@apache.org>.
aritra24 commented on code in PR #47411:
URL: https://github.com/apache/airflow/pull/47411#discussion_r1986691664


##########
airflow/ui/src/components/Banner/BackfillBanner.tsx:
##########
@@ -0,0 +1,88 @@
+/*!
+ * 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, HStack, Spacer, Text } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { MdClose, MdPause, MdStop } from "react-icons/md";
+
+import { useBackfillServiceListBackfills } from "openapi/queries";
+
+import Time from "../Time";
+import { ProgressBar } from "../ui";
+import ActionButton from "../ui/ActionButton";
+
+type Props = {
+  readonly dagId: string;
+};
+
+const BackfillBanner = ({ dagId }: Props) => {
+  const { data } = useBackfillServiceListBackfills({
+    dagId,
+  });
+
+  const [visible, setVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    setVisible(data?.total_entries === undefined ? false : data.total_entries > 0);
+  }, [data]);
+
+  return visible ? (
+    <Box bg="blue.solid" color="white" fontSize="m" my="1" px="2" py="1" rounded="lg">
+      <HStack>
+        <Text key="backfill">Backfill in progress:</Text>
+        <>
+          <Time datetime={data?.backfills[0]?.from_date} /> - <Time datetime={data?.backfills[0]?.to_date} />

Review Comment:
   Ack, that sounds good in that case. 



-- 
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