From 33ff648f702709342180355b921d55219e95c0ad Mon Sep 17 00:00:00 2001 From: Pierre Jeambrun Date: Mon, 8 Dec 2025 15:32:48 +0100 Subject: [PATCH] [v3-1-test] Show asset extra in asset list (#59195) (cherry picked from commit 38db2defa230cdd9976fe12dc2fb0a9048ed01b2) Co-authored-by: Pierre Jeambrun --- .../ui/public/i18n/locales/en/assets.json | 1 + .../ui/public/i18n/locales/en/browse.json | 4 -- .../ui/public/i18n/locales/en/common.json | 2 + .../ui/src/pages/AssetsList/AssetsList.tsx | 43 ++++++++++++++++--- .../airflow/ui/src/pages/Events/Events.tsx | 6 +-- .../src/airflow/ui/src/pages/XCom/XCom.tsx | 4 +- 6 files changed, 45 insertions(+), 15 deletions(-) diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/en/assets.json b/airflow-core/src/airflow/ui/public/i18n/locales/en/assets.json index 527dfeb9e0b27..1a0bc7bf86b01 100644 --- a/airflow-core/src/airflow/ui/public/i18n/locales/en/assets.json +++ b/airflow-core/src/airflow/ui/public/i18n/locales/en/assets.json @@ -22,6 +22,7 @@ }, "title": "Create Asset Event for {{name}}" }, + "extra": "Extra", "group": "Group", "lastAssetEvent": "Last Asset Event", "name": "Name", diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/en/browse.json b/airflow-core/src/airflow/ui/public/i18n/locales/en/browse.json index 07259fd1e5825..235c3ef4aa2a0 100644 --- a/airflow-core/src/airflow/ui/public/i18n/locales/en/browse.json +++ b/airflow-core/src/airflow/ui/public/i18n/locales/en/browse.json @@ -1,9 +1,5 @@ { "auditLog": { - "actions": { - "collapseAllExtra": "Collapse all extra json", - "expandAllExtra": "Expand all extra json" - }, "columns": { "event": "Event", "extra": "Extra", diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/en/common.json b/airflow-core/src/airflow/ui/public/i18n/locales/en/common.json index 8aee7cb16deec..d7688753c364f 100644 --- a/airflow-core/src/airflow/ui/public/i18n/locales/en/common.json +++ b/airflow-core/src/airflow/ui/public/i18n/locales/en/common.json @@ -25,6 +25,7 @@ "requiredActions": "Required Actions", "xcoms": "XComs" }, + "collapseAllExtra": "Collapse all extra json", "collapseDetailsPanel": "Collapse Details Panel", "createdAssetEvent_one": "Created Asset Event", "createdAssetEvent_other": "Created Asset Events", @@ -99,6 +100,7 @@ "hotkey": "e", "tooltip": "Press {{hotkey}} to toggle expand" }, + "expandAllExtra": "Expand all extra json", "expression": { "all": "All", "and": "AND", diff --git a/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx b/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx index 1a7c94d64277b..ee0e8cc2a3a92 100644 --- a/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx +++ b/airflow-core/src/airflow/ui/src/pages/AssetsList/AssetsList.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { Box, Heading, Link, VStack } from "@chakra-ui/react"; +import { Box, Flex, Heading, Link, useDisclosure, VStack } from "@chakra-ui/react"; import type { ColumnDef } from "@tanstack/react-table"; import { useMemo } from "react"; import { useTranslation } from "react-i18next"; @@ -27,6 +27,8 @@ import type { AssetResponse } 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 { ExpandCollapseButtons } from "src/components/ExpandCollapseButtons"; +import RenderedJsonField from "src/components/RenderedJsonField"; import { SearchBar } from "src/components/SearchBar"; import Time from "src/components/Time"; import { SearchParamsKeys } from "src/constants/searchParams"; @@ -36,7 +38,10 @@ import { DependencyPopover } from "./DependencyPopover"; type AssetRow = { row: { original: AssetResponse } }; -const createColumns = (translate: (key: string) => string): Array> => [ +const createColumns = ( + translate: (key: string) => string, + open?: boolean, +): Array> => [ { accessorKey: "name", cell: ({ row: { original } }: AssetRow) => ( @@ -90,6 +95,21 @@ const createColumns = (translate: (key: string) => string): Array { + if (original.extra !== null) { + return ; + } + + return undefined; + }, + enableSorting: false, + header: translate("extra"), + meta: { + skeletonWidth: 200, + }, + }, ]; const NAME_PATTERN_PARAM = SearchParamsKeys.NAME_PATTERN; @@ -105,6 +125,8 @@ export const AssetsList = () => { const [sort] = sorting; const orderBy = sort ? [`${sort.desc ? "-" : ""}${sort.id}`] : undefined; + const { onClose, onOpen, open } = useDisclosure(); + const { data, error, isLoading } = useAssetServiceGetAssets({ limit: pagination.pageSize, namePattern, @@ -112,7 +134,7 @@ export const AssetsList = () => { orderBy, }); - const columns = useMemo(() => createColumns(translate), [translate]); + const columns = useMemo(() => createColumns(translate, open), [translate, open]); const handleSearchChange = (value: string) => { setTableURLState({ @@ -137,9 +159,18 @@ export const AssetsList = () => { placeHolder={translate("searchPlaceholder")} /> - - {data?.total_entries} {translate("common:asset", { count: data?.total_entries })} - + + + {data?.total_entries} {translate("common:asset", { count: data?.total_entries })} + + + + { - const { t: translate } = useTranslation("browse"); + const { t: translate } = useTranslation(["browse", "common"]); const { dagId, runId, taskId } = useParams(); const [searchParams] = useSearchParams(); const { setTableURLState, tableURLState } = useTableURLState(); @@ -221,8 +221,8 @@ export const Events = () => { diff --git a/airflow-core/src/airflow/ui/src/pages/XCom/XCom.tsx b/airflow-core/src/airflow/ui/src/pages/XCom/XCom.tsx index fc0e8045b3f5e..6a7c0c80a20b0 100644 --- a/airflow-core/src/airflow/ui/src/pages/XCom/XCom.tsx +++ b/airflow-core/src/airflow/ui/src/pages/XCom/XCom.tsx @@ -173,8 +173,8 @@ export const XCom = () => {