This is an automated email from the ASF dual-hosted git repository. kaxilnaik pushed a commit to branch v3-0-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 604e65d76f96006c252b08e5f8537dcab96ee1ba Author: Brent Bovenzi <[email protected]> AuthorDate: Sat May 3 04:24:44 2025 -0400 Add formatted extra to asset events (#50124) * Always show asset event extra, as json * Change clipboard icon size (cherry picked from commit 50f644d25ce7cf9bf81d12612c2408699807c6d6) --- .../airflow/ui/src/components/Assets/AssetEvent.tsx | 18 ++++++++---------- .../airflow/ui/src/components/Assets/AssetEvents.tsx | 8 +++----- .../airflow/ui/src/components/RenderedJsonField.tsx | 2 +- airflow-core/src/airflow/ui/src/pages/Asset/Asset.tsx | 1 - 4 files changed, 12 insertions(+), 17 deletions(-) diff --git a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx index 6c97c648de5..1cb0817964e 100644 --- a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx +++ b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Text, HStack, Code } from "@chakra-ui/react"; +import { Box, Text, HStack } from "@chakra-ui/react"; import { FiDatabase } from "react-icons/fi"; import { Link } from "react-router-dom"; @@ -24,30 +24,26 @@ import type { AssetEventResponse } from "openapi/requests/types.gen"; import Time from "src/components/Time"; import { Tooltip } from "src/components/ui"; +import RenderedJsonField from "../RenderedJsonField"; import { TriggeredRuns } from "./TriggeredRuns"; export const AssetEvent = ({ assetId, event, - showExtra, }: { readonly assetId?: number; readonly event: AssetEventResponse; - readonly showExtra?: boolean; }) => { let source = ""; - // eslint-disable-next-line @typescript-eslint/naming-convention - const { from_rest_api, from_trigger, ...extra } = event.extra ?? {}; + const { from_rest_api: fromRestAPI, from_trigger: fromTrigger, ...extra } = event.extra ?? {}; - if (from_rest_api === true) { + if (fromRestAPI === true) { source = "API"; - } else if (from_trigger === true) { + } else if (fromTrigger === true) { source = "Trigger"; } - const extraString = JSON.stringify(extra); - return ( <Box borderBottomWidth={1} fontSize={13} mt={1} p={2}> <Text fontWeight="bold"> @@ -86,7 +82,9 @@ export const AssetEvent = ({ <HStack> <TriggeredRuns dagRuns={event.created_dagruns} /> </HStack> - {showExtra && extraString !== "{}" ? <Code>{extraString}</Code> : undefined} + {Object.keys(extra).length >= 1 ? ( + <RenderedJsonField content={extra} jsonProps={{ collapsed: true }} /> + ) : undefined} </Box> ); }; diff --git a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx index f06f55185c9..4becd16cc95 100644 --- a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx +++ b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx @@ -29,8 +29,8 @@ import { DataTable } from "../DataTable"; import type { CardDef, TableState } from "../DataTable/types"; import { AssetEvent } from "./AssetEvent"; -const cardDef = (assetId?: number, showExtra?: boolean): CardDef<AssetEventResponse> => ({ - card: ({ row }) => <AssetEvent assetId={assetId} event={row} showExtra={showExtra} />, +const cardDef = (assetId?: number): CardDef<AssetEventResponse> => ({ + card: ({ row }) => <AssetEvent assetId={assetId} event={row} />, meta: { customSkeleton: <Skeleton height="120px" width="100%" />, }, @@ -42,7 +42,6 @@ type AssetEventProps = { readonly isLoading?: boolean; readonly setOrderBy?: (order: string) => void; readonly setTableUrlState?: (state: TableState) => void; - readonly showExtra?: boolean; readonly tableUrlState?: TableState; readonly title?: string; }; @@ -53,7 +52,6 @@ export const AssetEvents = ({ isLoading, setOrderBy, setTableUrlState, - showExtra, tableUrlState, title, }: AssetEventProps) => { @@ -100,7 +98,7 @@ export const AssetEvents = ({ )} </Flex> <DataTable - cardDef={cardDef(assetId, showExtra)} + cardDef={cardDef(assetId)} columns={[]} data={data?.asset_events ?? []} displayMode="card" diff --git a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx index 132a57116a6..5e32d8c67d7 100644 --- a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx +++ b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx @@ -47,7 +47,7 @@ const RenderedJsonField = ({ content, jsonProps, ...rest }: Props) => { {...jsonProps} /> <ClipboardRoot value={contentFormatted}> - <ClipboardIconButton /> + <ClipboardIconButton h={7} minW={7} /> </ClipboardRoot> </Flex> ); diff --git a/airflow-core/src/airflow/ui/src/pages/Asset/Asset.tsx b/airflow-core/src/airflow/ui/src/pages/Asset/Asset.tsx index 9f8ff455504..0a961d19d2c 100644 --- a/airflow-core/src/airflow/ui/src/pages/Asset/Asset.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Asset/Asset.tsx @@ -109,7 +109,6 @@ export const Asset = () => { isLoading={isLoadingEvents} setOrderBy={setOrderBy} setTableUrlState={setTableURLState} - showExtra tableUrlState={tableURLState} /> </Box>
