Add support for XCom page in browse and task instance tab

airflow/api_fastapi/core_api/datamodels/xcom.py

@@ -33,6 +33,7 @@ class XComResponse(BaseModel):
     map_index: int
     task_id: str
     dag_id: str
+    run_id: str
 
 
 class XComResponseNative(XComResponse):

airflow/api_fastapi/core_api/openapi/v1-generated.yaml

@@ -9481,6 +9481,9 @@ components:
         dag_id:
           type: string
           title: Dag Id
+        run_id:
+          type: string
+          title: Run Id
       type: object
       required:
       - key
@@ -9489,6 +9492,7 @@ components:
       - map_index
       - task_id
       - dag_id
+      - run_id
       title: XComResponse
       description: Serializer for a xcom item.
     XComResponseNative:
@@ -9513,6 +9517,9 @@ components:
         dag_id:
           type: string
           title: Dag Id
+        run_id:
+          type: string
+          title: Run Id
         value:
           title: Value
       type: object
@@ -9523,6 +9530,7 @@ components:
       - map_index
       - task_id
       - dag_id
+      - run_id
       - value
       title: XComResponseNative
       description: XCom response serializer with native return type.
@@ -9548,6 +9556,9 @@ components:
         dag_id:
           type: string
           title: Dag Id
+        run_id:
+          type: string
+          title: Run Id
         value:
           anyOf:
           - type: string
@@ -9561,6 +9572,7 @@ components:
       - map_index
       - task_id
       - dag_id
+      - run_id
       - value
       title: XComResponseString
       description: XCom response serializer with string return type.

airflow/ui/openapi-gen/requests/schemas.gen.ts

@@ -5380,6 +5380,10 @@ export const $XComResponse = {
       type: "string",
       title: "Dag Id",
     },
+    run_id: {
+      type: "string",
+      title: "Run Id",
+    },
   },
   type: "object",
   required: [
@@ -5389,6 +5393,7 @@ export const $XComResponse = {
     "map_index",
     "task_id",
     "dag_id",
+    "run_id",
   ],
   title: "XComResponse",
   description: "Serializer for a xcom item.",
@@ -5422,6 +5427,10 @@ export const $XComResponseNative = {
       type: "string",
       title: "Dag Id",
     },
+    run_id: {
+      type: "string",
+      title: "Run Id",
+    },
     value: {
       title: "Value",
     },
@@ -5434,6 +5443,7 @@ export const $XComResponseNative = {
     "map_index",
     "task_id",
     "dag_id",
+    "run_id",
     "value",
   ],
   title: "XComResponseNative",
@@ -5468,6 +5478,10 @@ export const $XComResponseString = {
       type: "string",
       title: "Dag Id",
     },
+    run_id: {
+      type: "string",
+      title: "Run Id",
+    },
     value: {
       anyOf: [
         {
@@ -5488,6 +5502,7 @@ export const $XComResponseString = {
     "map_index",
     "task_id",
     "dag_id",
+    "run_id",
     "value",
   ],
   title: "XComResponseString",

airflow/ui/openapi-gen/requests/types.gen.ts

@@ -1286,6 +1286,7 @@ export type XComResponse = {
   map_index: number;
   task_id: string;
   dag_id: string;
+  run_id: string;
 };
 
 /**
@@ -1298,6 +1299,7 @@ export type XComResponseNative = {
   map_index: number;
   task_id: string;
   dag_id: string;
+  run_id: string;
   value: unknown;
 };
 
@@ -1311,6 +1313,7 @@ export type XComResponseString = {
   map_index: number;
   task_id: string;
   dag_id: string;
+  run_id: string;
   value: string | null;
 };
 

airflow/ui/src/components/ui/Clipboard.tsx

@@ -0,0 +1,112 @@
+/*!
+ * 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 type { ButtonProps, InputProps } from "@chakra-ui/react";
+import {
+  Button,
+  Clipboard as ChakraClipboard,
+  IconButton,
+  Input,
+} from "@chakra-ui/react";
+import * as React from "react";
+import { LuCheck, LuClipboard, LuLink } from "react-icons/lu";
+
+const ClipboardIcon = React.forwardRef<
+  HTMLDivElement,
+  ChakraClipboard.IndicatorProps
+>((props, ref) => (
+  <ChakraClipboard.Indicator copied={<LuCheck />} {...props} ref={ref}>
+    <LuClipboard />
+  </ChakraClipboard.Indicator>
+));
+
+const ClipboardCopyText = React.forwardRef<
+  HTMLDivElement,
+  ChakraClipboard.IndicatorProps
+>((props, ref) => (
+  <ChakraClipboard.Indicator copied="Copied" {...props} ref={ref}>
+    Copy
+  </ChakraClipboard.Indicator>
+));
+
+export const ClipboardLabel = React.forwardRef<
+  HTMLLabelElement,
+  ChakraClipboard.LabelProps
+>((props, ref) => (
+  <ChakraClipboard.Label
+    display="inline-block"
+    fontWeight="medium"
+    mb="1"
+    textStyle="sm"
+    {...props}
+    ref={ref}
+  />
+));
+
+export const ClipboardButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => (
+    <ChakraClipboard.Trigger asChild>
+      <Button ref={ref} size="sm" variant="surface" {...props}>
+        <ClipboardIcon />
+        <ClipboardCopyText />
+      </Button>
+    </ChakraClipboard.Trigger>
+  ),
+);
+
+export const ClipboardLink = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => (
+    <ChakraClipboard.Trigger asChild>
+      <Button
+        alignItems="center"
+        display="inline-flex"
+        gap="2"
+        ref={ref}
+        size="xs"
+        unstyled
+        variant="plain"
+        {...props}
+      >
+        <LuLink />
+        <ClipboardCopyText />
+      </Button>
+    </ChakraClipboard.Trigger>
+  ),
+);
+
+export const ClipboardIconButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>((props, ref) => (
+  <ChakraClipboard.Trigger asChild>
+    <IconButton ref={ref} size="xs" variant="subtle" {...props}>
+      <ClipboardIcon />
+      <ClipboardCopyText srOnly />
+    </IconButton>
+  </ChakraClipboard.Trigger>
+));
+
+export const ClipboardInput = React.forwardRef<HTMLInputElement, InputProps>(
+  (props, ref) => (
+    <ChakraClipboard.Input asChild>
+      <Input ref={ref} {...props} />
+    </ChakraClipboard.Input>
+  ),
+);
+
+export const ClipboardRoot = ChakraClipboard.Root;

airflow/ui/src/components/ui/index.ts

@@ -35,3 +35,4 @@ export * from "./Status";
 export * from "./Button";
 export * from "./Toaster";
 export * from "./Breadcrumb";
+export * from "./Clipboard";

airflow/ui/src/layouts/Nav/BrowseButton.tsx

@@ -28,6 +28,10 @@ const links = [
     href: "/events",
     title: "Events",
   },
+  {
+    href: "/xcoms",
+    title: "XComs",
+  },
 ];
 
 export const BrowseButton = () => (

airflow/ui/src/pages/XCom/XCom.tsx

@@ -0,0 +1,87 @@
+/*!
+ * 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 } from "@chakra-ui/react";
+import type { ColumnDef } from "@tanstack/react-table";
+import { useParams, useSearchParams } from "react-router-dom";
+
+import { useXcomServiceGetXcomEntries } from "openapi/queries";
+import type { XComResponse } from "openapi/requests/types.gen";
+import { DataTable } from "src/components/DataTable";
+import { useTableURLState } from "src/components/DataTable/useTableUrlState";
+import { ErrorAlert } from "src/components/ErrorAlert";
+
+import { XComEntry } from "./XComEntry";
+
+const columns: Array<ColumnDef<XComResponse>> = [
+  {
+    accessorKey: "key",
+    enableSorting: false,
+    header: "Key",
+  },
+  {
+    cell: ({ row: { original } }) => (
+      <XComEntry
+        dagId={original.dag_id}
+        mapIndex={original.map_index}
+        runId={original.run_id}
+        taskId={original.task_id}
+        xcomKey={original.key}
+      />
+    ),
+    enableSorting: false,
+    header: "Value",
+  },
+];
+
+export const XCom = () => {
+  const { dagId = "~", runId = "~", taskId = "~" } = useParams();
+  const [searchParams] = useSearchParams();
+  const mapIndexParam = searchParams.get("map_index");
+  const mapIndex = parseInt(mapIndexParam ?? "-1", 10);
+
+  const { setTableURLState, tableURLState } = useTableURLState();
+  const { pagination } = tableURLState;
+
+  const { data, error, isFetching, isLoading } = useXcomServiceGetXcomEntries({
+    dagId,
+    dagRunId: runId,
+    limit: pagination.pageSize,
+    mapIndex,
+    offset: pagination.pageIndex * pagination.pageSize,
+    taskId,
+  });
+
+  return (
+    <Box>
+      <ErrorAlert error={error} />
+      <DataTable
+        columns={columns}
+        data={data ? data.xcom_entries : []}
+        displayMode="table"
+        initialState={tableURLState}
+        isFetching={isFetching}
+        isLoading={isLoading}
+        modelName="XCom"
+        onStateChange={setTableURLState}
+        skeletonCount={undefined}
+        total={data ? data.total_entries : 0}
+      />
+    </Box>
+  );
+};