This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new ed1435c2b57 UI: Surface Dag run conf in the header (#73987)
ed1435c2b57 is described below
commit ed1435c2b5792a89d5c5a62e83371cb01c8aef08
Author: Brent Bovenzi <[email protected]>
AuthorDate: Mon Oct 5 16:56:27 2026 -0400
UI: Surface Dag run conf in the header (#73987)
Conf is what makes one run of a Dag different from another, and it was
reachable only by opening the Details tab and scrolling past bookkeeping.
The header now carries a collapsed preview that links through, and
Details leads with it, expanded.
---
.../airflow/ui/src/components/RenderedJsonField.tsx | 6 ++++--
airflow-core/src/airflow/ui/src/pages/Run/Details.tsx | 12 ++++++------
airflow-core/src/airflow/ui/src/pages/Run/Header.tsx | 19 ++++++++++++++++++-
3 files changed, 28 insertions(+), 9 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
index 55f12010cec..87f07110dd9 100644
--- a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
+++ b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
@@ -46,11 +46,13 @@ type Props = {
readonly collapsed?: boolean;
readonly content: object;
readonly enableClipboard?: boolean;
+ /** Replaces expanding in place — for a preview whose full value lives on
another page. */
+ readonly onExpand?: () => void;
} & Omit<FlexProps, "content">;
type EditorInstance = Parameters<OnMount>[0];
-const RenderedJsonField = ({ collapsed, content, enableClipboard = true,
...rest }: Props) => {
+const RenderedJsonField = ({ collapsed, content, enableClipboard = true,
onExpand, ...rest }: Props) => {
const contentFormatted = JSON.stringify(content, undefined, 2);
const { t: translate } = useTranslation("common");
const { beforeMount, theme } = useMonacoTheme();
@@ -120,7 +122,7 @@ const RenderedJsonField = ({ collapsed, content,
enableClipboard = true, ...rest
if (showBadges) {
return (
<Flex alignItems="center" flex={1} gap={1} minW={`${MIN_WIDTH}px`}
{...rest}>
- <JsonPreviewBadges entries={previewEntries} onExpand={() =>
setIsExpanded(true)} />
+ <JsonPreviewBadges entries={previewEntries} onExpand={onExpand ?? (()
=> setIsExpanded(true))} />
{clipboardButton}
</Flex>
);
diff --git a/airflow-core/src/airflow/ui/src/pages/Run/Details.tsx
b/airflow-core/src/airflow/ui/src/pages/Run/Details.tsx
index 7a460996e98..3197eb03125 100644
--- a/airflow-core/src/airflow/ui/src/pages/Run/Details.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Run/Details.tsx
@@ -61,6 +61,12 @@ export const Details = () => {
return (
<Table.Root striped>
<Table.Body>
+ <Table.Row>
+ <Table.Cell>{translate("dagRun.conf")}</Table.Cell>
+ <Table.Cell>
+ {hasDagRunConfig(dagRun.conf) ? <RenderedJsonField
content={dagRun.conf} /> : undefined}
+ </Table.Cell>
+ </Table.Row>
<Table.Row>
<Table.Cell>{translate("state")}</Table.Cell>
<Table.Cell data-testid="dag-run-state">
@@ -193,12 +199,6 @@ export const Details = () => {
</VStack>
</Table.Cell>
</Table.Row>
- <Table.Row>
- <Table.Cell>{translate("dagRun.conf")}</Table.Cell>
- <Table.Cell>
- {hasDagRunConfig(dagRun.conf) ? <RenderedJsonField
content={dagRun.conf} /> : undefined}
- </Table.Cell>
- </Table.Row>
</Table.Body>
</Table.Root>
);
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 6930f556cce..7c281c4ad92 100644
--- a/airflow-core/src/airflow/ui/src/pages/Run/Header.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Run/Header.tsx
@@ -19,6 +19,7 @@
import { Box, HStack, Text } from "@chakra-ui/react";
import { useTranslation } from "react-i18next";
import { FiBarChart } from "react-icons/fi";
+import { useNavigate } from "react-router-dom";
import { useDeadlinesServiceGetDagDeadlineAlerts } from "openapi/queries";
import type { DAGRunResponse } from "openapi/requests/types.gen";
@@ -34,6 +35,7 @@ import { LimitedItemsList } from
"src/components/LimitedItemsList";
import { MarkRunAsButton } from "src/components/MarkAs";
import { NeedsReviewButtonWithModal } from "src/components/NeedsReviewButton";
import { NotePreview } from "src/components/NotePreview";
+import RenderedJsonField from "src/components/RenderedJsonField";
import { RunTypeIcon } from "src/components/RunTypeIcon";
import { TeamName } from "src/components/TeamName";
import Time from "src/components/Time";
@@ -41,7 +43,7 @@ import Time from "src/components/Time";
import { SearchParamsKeys } from "src/constants/searchParams";
import { useShowTeam } from "src/hooks/useShowTeam";
import { useDagRunNote } from "src/queries/useDagRunNote";
-import { useDurationFormat } from "src/utils";
+import { hasDagRunConfig, useDurationFormat } from "src/utils";
import { DeadlineStatus } from "./DeadlineStatus";
@@ -50,6 +52,7 @@ export const Header = ({ dagRun }: { readonly dagRun:
DAGRunResponse }) => {
const { formatElapsed } = useDurationFormat();
const { isPending, note, onOpen, onSave, setNote } = useDagRunNote(dagRun);
const showTeam = useShowTeam(dagRun.team_name);
+ const navigate = useNavigate();
const dagId = dagRun.dag_id;
const dagRunId = dagRun.dag_run_id;
@@ -132,6 +135,20 @@ export const Header = ({ dagRun }: { readonly dagRun:
DAGRunResponse }) => {
/>
),
},
+ ...(hasDagRunConfig(dagRun.conf)
+ ? [
+ {
+ label: translate("dagRun.conf"),
+ value: (
+ <RenderedJsonField
+ collapsed
+ content={dagRun.conf}
+ onExpand={() => void navigate("details")}
+ />
+ ),
+ },
+ ]
+ : []),
...(hasDeadlineAlerts
? [
{
