This is an automated email from the ASF dual-hosted git repository.
guanmingchiu pushed a commit to branch v3-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-1-test by this push:
new 141b0a015e0 [v3-1-test] 56058: Removing refresh state consumption for
Dag header (#58389) (#58692)
141b0a015e0 is described below
commit 141b0a015e052c7d3609fadaac298977d816fd27
Author: github-actions[bot]
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Mon Dec 1 14:44:46 2025 +0800
[v3-1-test] 56058: Removing refresh state consumption for Dag header
(#58389) (#58692)
* 56058: Removing refresh state consumption for Dag header
* Updated formatting
* 56058: Removed spinner from all headers
---------
(cherry picked from commit c7a9f79d8f403f905f39bb77950f7811220ca8e9)
Co-authored-by: Vivek Nanda <[email protected]>
Co-authored-by: Vivek Nanda <[email protected]>
---
airflow-core/src/airflow/ui/src/components/HeaderCard.tsx | 6 ++----
airflow-core/src/airflow/ui/src/pages/Asset/Header.tsx | 10 ++--------
airflow-core/src/airflow/ui/src/pages/Dag/Dag.tsx | 8 +-------
airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx | 3 ---
.../ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx | 10 +---------
.../src/airflow/ui/src/pages/GroupTaskInstance/Header.tsx | 9 +--------
.../src/airflow/ui/src/pages/MappedTaskInstance/Header.tsx | 9 +--------
.../ui/src/pages/MappedTaskInstance/MappedTaskInstance.tsx | 9 +--------
airflow-core/src/airflow/ui/src/pages/Run/Header.tsx | 9 +--------
airflow-core/src/airflow/ui/src/pages/Run/Run.tsx | 7 +------
airflow-core/src/airflow/ui/src/pages/TaskInstance/Header.tsx | 9 +--------
.../src/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx | 5 +----
12 files changed, 13 insertions(+), 81 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/components/HeaderCard.tsx
b/airflow-core/src/airflow/ui/src/components/HeaderCard.tsx
index 964b860e598..1899e1f8564 100644
--- a/airflow-core/src/airflow/ui/src/components/HeaderCard.tsx
+++ b/airflow-core/src/airflow/ui/src/components/HeaderCard.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Flex, GridItem, Heading, HStack, Spinner } from
"@chakra-ui/react";
+import { Box, Flex, GridItem, Heading, HStack } from "@chakra-ui/react";
import type { ReactNode } from "react";
import { useTranslation } from "react-i18next";
@@ -27,14 +27,13 @@ import { StateBadge } from "src/components/StateBadge";
type Props = {
readonly actions?: ReactNode;
readonly icon: ReactNode;
- readonly isRefreshing?: boolean;
readonly state?: TaskInstanceState | null;
readonly stats: Array<{ label: string; value: ReactNode | string }>;
readonly subTitle?: ReactNode | string;
readonly title: ReactNode | string;
};
-export const HeaderCard = ({ actions, icon, isRefreshing, state, stats,
subTitle, title }: Props) => {
+export const HeaderCard = ({ actions, icon, state, stats, subTitle, title }:
Props) => {
const { t: translate } = useTranslation();
return (
@@ -47,7 +46,6 @@ export const HeaderCard = ({ actions, icon, isRefreshing,
state, stats, subTitle
{state === undefined ? undefined : (
<StateBadge state={state}>{state ?
translate(`common:states.${state}`) : undefined}</StateBadge>
)}
- {isRefreshing ? <Spinner /> : <div />}
</Flex>
<HStack gap={1}>{actions}</HStack>
</Flex>
diff --git a/airflow-core/src/airflow/ui/src/pages/Asset/Header.tsx
b/airflow-core/src/airflow/ui/src/pages/Asset/Header.tsx
index e6ec78df6fd..b2268720e29 100644
--- a/airflow-core/src/airflow/ui/src/pages/Asset/Header.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Asset/Header.tsx
@@ -24,13 +24,7 @@ import { HeaderCard } from "src/components/HeaderCard";
import { DependencyPopover } from "../AssetsList/DependencyPopover";
-export const Header = ({
- asset,
- isRefreshing,
-}: {
- readonly asset?: AssetResponse;
- readonly isRefreshing?: boolean;
-}) => {
+export const Header = ({ asset }: { readonly asset?: AssetResponse }) => {
const { t: translate } = useTranslation("assets");
const stats = [
@@ -45,5 +39,5 @@ export const Header = ({
},
];
- return <HeaderCard icon={<FiDatabase />} isRefreshing={isRefreshing}
stats={stats} title={asset?.name} />;
+ return <HeaderCard icon={<FiDatabase />} stats={stats} title={asset?.name}
/>;
};
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Dag.tsx
b/airflow-core/src/airflow/ui/src/pages/Dag/Dag.tsx
index c7bb74e6835..3ba287faffd 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Dag.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Dag.tsx
@@ -106,13 +106,7 @@ export const Dag = () => {
return (
<ReactFlowProvider>
<DetailsLayout error={error ?? runsError} isLoading={isLoading ||
isLoadingRuns} tabs={displayTabs}>
- <Header
- dag={dag}
- isRefreshing={
- latestRun ? Boolean(isStatePending(latestRun.state) &&
Boolean(refetchInterval)) : false
- }
- latestRunInfo={latestRun ?? undefined}
- />
+ <Header dag={dag} latestRunInfo={latestRun ?? undefined} />
</DetailsLayout>
</ReactFlowProvider>
);
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx
b/airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx
index 8d55c0f0c39..84913f45fd7 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx
@@ -50,11 +50,9 @@ type LatestRunInfo = {
export const Header = ({
dag,
- isRefreshing,
latestRunInfo,
}: {
readonly dag?: DAGDetailsResponse;
- readonly isRefreshing?: boolean;
readonly latestRunInfo?: LatestRunInfo;
}) => {
const { t: translate } = useTranslation(["common", "dag"]);
@@ -156,7 +154,6 @@ export const Header = ({
)
}
icon={<DagIcon />}
- isRefreshing={isRefreshing}
stats={stats}
subTitle={
dag !== undefined && (
diff --git
a/airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx
b/airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx
index feedee26b33..a4efef77265 100644
---
a/airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx
+++
b/airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx
@@ -23,7 +23,6 @@ import { useParams } from "react-router-dom";
import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
import { useGridTiSummaries } from "src/queries/useGridTISummaries.ts";
-import { isStatePending, useAutoRefresh } from "src/utils";
import { Header } from "./Header";
@@ -33,19 +32,12 @@ export const GroupTaskInstance = () => {
const { data: gridTISummaries } = useGridTiSummaries({ dagId, runId });
const taskInstance = gridTISummaries?.task_instances.find((ti) => ti.task_id
=== groupId);
- const refetchInterval = useAutoRefresh({ dagId });
-
const tabs = [{ icon: <MdOutlineTask />, label:
translate("tabs.taskInstances"), value: "" }];
return (
<ReactFlowProvider>
<DetailsLayout tabs={tabs}>
- {taskInstance === undefined ? undefined : (
- <Header
- isRefreshing={Boolean(isStatePending(taskInstance.state) &&
Boolean(refetchInterval))}
- taskInstance={taskInstance}
- />
- )}
+ {taskInstance === undefined ? undefined : <Header
taskInstance={taskInstance} />}
</DetailsLayout>
</ReactFlowProvider>
);
diff --git a/airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/Header.tsx
b/airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/Header.tsx
index 9fc14c76f5d..16731d4de4c 100644
--- a/airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/Header.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/Header.tsx
@@ -27,13 +27,7 @@ import { HeaderCard } from "src/components/HeaderCard";
import Time from "src/components/Time";
import { getDuration } from "src/utils";
-export const Header = ({
- isRefreshing,
- taskInstance,
-}: {
- readonly isRefreshing?: boolean;
- readonly taskInstance: LightGridTaskInstanceSummary;
-}) => {
+export const Header = ({ taskInstance }: { readonly taskInstance:
LightGridTaskInstanceSummary }) => {
const { t: translate } = useTranslation();
const entries: Array<{ label: string; value: number | ReactNode | string }>
= [];
@@ -62,7 +56,6 @@ export const Header = ({
<HeaderCard
actions={<ClearTaskInstanceButton groupTaskInstance={taskInstance}
isHotkeyEnabled withText={true} />}
icon={<MdOutlineTask />}
- isRefreshing={isRefreshing}
state={taskInstance.state}
stats={stats}
subTitle={<Time datetime={taskInstance.min_start_date} />}
diff --git
a/airflow-core/src/airflow/ui/src/pages/MappedTaskInstance/Header.tsx
b/airflow-core/src/airflow/ui/src/pages/MappedTaskInstance/Header.tsx
index c62e8fed0e5..88d6bb122b6 100644
--- a/airflow-core/src/airflow/ui/src/pages/MappedTaskInstance/Header.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/MappedTaskInstance/Header.tsx
@@ -26,13 +26,7 @@ import { HeaderCard } from "src/components/HeaderCard";
import Time from "src/components/Time";
import { getDuration } from "src/utils";
-export const Header = ({
- isRefreshing,
- taskInstance,
-}: {
- readonly isRefreshing?: boolean;
- readonly taskInstance: LightGridTaskInstanceSummary;
-}) => {
+export const Header = ({ taskInstance }: { readonly taskInstance:
LightGridTaskInstanceSummary }) => {
const { t: translate } = useTranslation();
const entries: Array<{ label: string; value: number | ReactNode | string }>
= [];
let taskCount: number = 0;
@@ -62,7 +56,6 @@ export const Header = ({
<Box>
<HeaderCard
icon={<MdOutlineTask />}
- isRefreshing={isRefreshing}
state={taskInstance.state}
stats={stats}
subTitle={<Time datetime={taskInstance.min_start_date} />}
diff --git
a/airflow-core/src/airflow/ui/src/pages/MappedTaskInstance/MappedTaskInstance.tsx
b/airflow-core/src/airflow/ui/src/pages/MappedTaskInstance/MappedTaskInstance.tsx
index 378b386e87f..6c231c35bcd 100644
---
a/airflow-core/src/airflow/ui/src/pages/MappedTaskInstance/MappedTaskInstance.tsx
+++
b/airflow-core/src/airflow/ui/src/pages/MappedTaskInstance/MappedTaskInstance.tsx
@@ -23,13 +23,11 @@ import { useParams } from "react-router-dom";
import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
import { useGridTiSummaries } from "src/queries/useGridTISummaries.ts";
-import { isStatePending, useAutoRefresh } from "src/utils";
import { Header } from "./Header";
export const MappedTaskInstance = () => {
const { dagId = "", runId = "", taskId = "" } = useParams();
- const refetchInterval = useAutoRefresh({ dagId });
const { t: translate } = useTranslation("dag");
const { data: gridTISummaries } = useGridTiSummaries({ dagId, runId });
@@ -47,12 +45,7 @@ export const MappedTaskInstance = () => {
return (
<ReactFlowProvider>
<DetailsLayout tabs={tabs}>
- {taskInstance === undefined ? undefined : (
- <Header
- isRefreshing={Boolean(isStatePending(taskInstance.state) &&
Boolean(refetchInterval))}
- taskInstance={taskInstance}
- />
- )}
+ {taskInstance === undefined ? undefined : <Header
taskInstance={taskInstance} />}
</DetailsLayout>
</ReactFlowProvider>
);
diff --git a/airflow-core/src/airflow/ui/src/pages/Run/Header.tsx
b/airflow-core/src/airflow/ui/src/pages/Run/Header.tsx
index d95ddab0ceb..cb90867721c 100644
--- a/airflow-core/src/airflow/ui/src/pages/Run/Header.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Run/Header.tsx
@@ -35,13 +35,7 @@ import { SearchParamsKeys } from
"src/constants/searchParams";
import { usePatchDagRun } from "src/queries/usePatchDagRun";
import { getDuration, useContainerWidth } from "src/utils";
-export const Header = ({
- dagRun,
- isRefreshing,
-}: {
- readonly dagRun: DAGRunResponse;
- readonly isRefreshing?: boolean;
-}) => {
+export const Header = ({ dagRun }: { readonly dagRun: DAGRunResponse }) => {
const { t: translate } = useTranslation();
const [note, setNote] = useState<string | null>(dagRun.note);
@@ -93,7 +87,6 @@ export const Header = ({
</>
}
icon={<FiBarChart />}
- isRefreshing={isRefreshing}
state={dagRun.state}
stats={[
...(dagRun.logical_date === null
diff --git a/airflow-core/src/airflow/ui/src/pages/Run/Run.tsx
b/airflow-core/src/airflow/ui/src/pages/Run/Run.tsx
index eb97b8bf5c9..2ec4fb8fc6c 100644
--- a/airflow-core/src/airflow/ui/src/pages/Run/Run.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Run/Run.tsx
@@ -71,12 +71,7 @@ export const Run = () => {
return (
<ReactFlowProvider>
<DetailsLayout error={error} isLoading={isLoading} tabs={displayTabs}>
- {dagRun === undefined ? undefined : (
- <Header
- dagRun={dagRun}
- isRefreshing={Boolean(isStatePending(dagRun.state) &&
Boolean(refetchInterval))}
- />
- )}
+ {dagRun === undefined ? undefined : <Header dagRun={dagRun} />}
</DetailsLayout>
</ReactFlowProvider>
);
diff --git a/airflow-core/src/airflow/ui/src/pages/TaskInstance/Header.tsx
b/airflow-core/src/airflow/ui/src/pages/TaskInstance/Header.tsx
index 2238a33029b..dfa18973120 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskInstance/Header.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskInstance/Header.tsx
@@ -32,13 +32,7 @@ import Time from "src/components/Time";
import { usePatchTaskInstance } from "src/queries/usePatchTaskInstance";
import { renderDuration, useContainerWidth } from "src/utils";
-export const Header = ({
- isRefreshing,
- taskInstance,
-}: {
- readonly isRefreshing?: boolean;
- readonly taskInstance: TaskInstanceResponse;
-}) => {
+export const Header = ({ taskInstance }: { readonly taskInstance:
TaskInstanceResponse }) => {
const { t: translate } = useTranslation();
const containerRef = useRef<HTMLDivElement>();
const containerWidth = useContainerWidth(containerRef);
@@ -127,7 +121,6 @@ export const Header = ({
</>
}
icon={<MdOutlineTask />}
- isRefreshing={isRefreshing}
state={taskInstance.state}
stats={stats}
title={`${taskInstance.task_display_name}${taskInstance.map_index > -1
? ` [${taskInstance.rendered_map_index ?? taskInstance.map_index}]` : ""}`}
diff --git
a/airflow-core/src/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx
b/airflow-core/src/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx
index 11f67d3df18..94183cb536f 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx
@@ -116,10 +116,7 @@ export const TaskInstance = () => {
{translate("common:noItemsFound", { modelName:
translate("common:taskInstance_one") })}
</Heading>
) : (
- <Header
- isRefreshing={Boolean(isStatePending(taskInstance.state) &&
Boolean(refetchInterval))}
- taskInstance={taskInstance}
- />
+ <Header taskInstance={taskInstance} />
)}
</DetailsLayout>
</ReactFlowProvider>
