Skip to content

UI: Add Expand/Collapse all to XComs page #56083

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pierrejeambrun merged 4 commits into from
Oct 1, 2025
Merged

UI: Add Expand/Collapse all to XComs page #56083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d5b8dea
UI: Add Expand/Collapse all to XComs page
KatalKavya96 Sep 24, 2025
8259c88
Restored few changes
KatalKavya96 Sep 29, 2025
582d8a7
Fixing lint issue
KatalKavya96 Sep 29, 2025
4bc8dfb
Made suggested Changes
KatalKavya96 Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 25 additions & 5 deletions airflow-core/src/airflow/ui/src/pages/XCom/XCom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@
* specific language governing permissions and limitations
* under the License.
*/
import { Box, Heading, Link } from "@chakra-ui/react";
import { Box, Heading, Link, Flex, ButtonGroup, IconButton, useDisclosure } from "@chakra-ui/react";
import type { ColumnDef } from "@tanstack/react-table";
import { useTranslation } from "react-i18next";
import { MdCompress, MdExpand } from "react-icons/md";
import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom";

import { useXcomServiceGetXcomEntries } from "openapi/queries";
Expand All @@ -41,7 +42,7 @@ const {
TASK_ID_PATTERN: TASK_ID_PATTERN_PARAM,
}: SearchParamsKeysType = SearchParamsKeys;

const columns = (translate: (key: string) => string): Array<ColumnDef<XComResponse>> => [
const columns = (translate: (key: string) => string, open: boolean): Array<ColumnDef<XComResponse>> => [
{
accessorKey: "key",
enableSorting: false,
Expand Down Expand Up @@ -98,6 +99,7 @@ const columns = (translate: (key: string) => string): Array<ColumnDef<XComRespon
<XComEntry
dagId={original.dag_id}
mapIndex={original.map_index}
open={open}
runId={original.run_id}
taskId={original.task_id}
xcomKey={original.key}
Expand All @@ -114,6 +116,7 @@ export const XCom = () => {
const { setTableURLState, tableURLState } = useTableURLState();
const { pagination } = tableURLState;
const [searchParams] = useSearchParams();
const { onClose, onOpen, open } = useDisclosure();

const filteredKey = searchParams.get(KEY_PATTERN_PARAM);
const filteredDagDisplayName = searchParams.get(DAG_DISPLAY_NAME_PATTERN_PARAM);
Expand All @@ -122,7 +125,6 @@ export const XCom = () => {
const filteredTaskId = searchParams.get(TASK_ID_PATTERN_PARAM);

const { LOGICAL_DATE_GTE, LOGICAL_DATE_LTE, RUN_AFTER_GTE, RUN_AFTER_LTE } = SearchParamsKeys;

const logicalDateGte = searchParams.get(LOGICAL_DATE_GTE);
const logicalDateLte = searchParams.get(LOGICAL_DATE_LTE);
const runAfterGte = searchParams.get(RUN_AFTER_GTE);
Expand Down Expand Up @@ -158,11 +160,29 @@ export const XCom = () => {
<Heading size="md">{translate("xcom.title")}</Heading>
) : undefined}

<XComFilters />
<Flex alignItems="center" justifyContent="space-between">
<XComFilters />
<ButtonGroup attached mt="1" size="sm" variant="surface">
<IconButton
aria-label={translate("auditLog.actions.expandAllExtra")}
onClick={onOpen}
title={translate("auditLog.actions.expandAllExtra")}
>
<MdExpand />
</IconButton>
<IconButton
aria-label={translate("auditLog.actions.collapseAllExtra")}
onClick={onClose}
title={translate("auditLog.actions.collapseAllExtra")}
>
<MdCompress />
</IconButton>
</ButtonGroup>
</Flex>

<ErrorAlert error={error} />
<DataTable
columns={columns(translate)}
columns={columns(translate, open)}
data={data ? data.xcom_entries : []}
displayMode="table"
initialState={tableURLState}
Expand Down
9 changes: 7 additions & 2 deletions airflow-core/src/airflow/ui/src/pages/XCom/XComEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { urlRegex } from "src/constants/urlRegex";
type XComEntryProps = {
readonly dagId: string;
readonly mapIndex: number;
readonly open?: boolean;
readonly runId: string;
readonly taskId: string;
readonly xcomKey: string;
Expand Down Expand Up @@ -62,7 +63,7 @@ const renderTextWithLinks = (text: string) => {
);
};

export const XComEntry = ({ dagId, mapIndex, runId, taskId, xcomKey }: XComEntryProps) => {
export const XComEntry = ({ dagId, mapIndex, open = false, runId, taskId, xcomKey }: XComEntryProps) => {
const { data, isLoading } = useXcomServiceGetXcomEntry<XComResponseNative>({
dagId,
dagRunId: runId,
Expand All @@ -88,7 +89,11 @@ export const XComEntry = ({ dagId, mapIndex, runId, taskId, xcomKey }: XComEntry
) : (
<HStack>
{isObjectOrArray ? (
<RenderedJsonField content={xcomValue as object} enableClipboard={false} />
<RenderedJsonField
content={xcomValue as object}
enableClipboard={false}
jsonProps={{ collapsed: !open }}
/>
) : (
<Text>{renderTextWithLinks(valueFormatted)}</Text>
)}
Expand Down