This is an automated email from the ASF dual-hosted git repository. ppawar pushed a commit to branch ATLAS-5114 in repository https://gitbox.apache.org/repos/asf/atlas.git
commit c78b57e65d6df8d7c419c96e8ed61d596b749c80 Author: Prasad Pawar <[email protected]> AuthorDate: Thu Sep 25 16:32:08 2025 +0530 ATLAS-5114: ATLAS-5134: ATLAS-5122: [REACT UI] Entity Details: Relationships-->Table section is missing keys/attribute property names, 'Name' column missing in debug metrics page, Attribute names are not visible in business metadata page --- dashboard/src/components/Table/TableLayout.tsx | 6 +++- dashboard/src/styles/table.scss | 6 ++-- .../views/Administrator/BusinessMetadataTab.tsx | 37 ++++++++++------------ .../BusinessMetadataAtrribute.tsx | 5 +-- .../EntityDetailTabs/RelationshipsTab.tsx | 26 ++++++++------- 5 files changed, 43 insertions(+), 37 deletions(-) diff --git a/dashboard/src/components/Table/TableLayout.tsx b/dashboard/src/components/Table/TableLayout.tsx index f58d150b0..609ca3457 100644 --- a/dashboard/src/components/Table/TableLayout.tsx +++ b/dashboard/src/components/Table/TableLayout.tsx @@ -592,7 +592,11 @@ const TableLayout: FC<TableProps> = ({ > <MuiTable size="small" - className="table expand-row-table" + className={`table ${expandRow ? "expand-row-table" : ""} ${ + memoizedData && memoizedData.length > 0 && expandRow + ? "has-expanded-rows" + : "" + }`} sx={{ tableLayout: "fixed", width: "100%" }} > {!isFetching && ( diff --git a/dashboard/src/styles/table.scss b/dashboard/src/styles/table.scss index 4cc8aceb1..7f108cc7a 100644 --- a/dashboard/src/styles/table.scss +++ b/dashboard/src/styles/table.scss @@ -249,7 +249,9 @@ td:has(.searchTableName) { cursor: pointer; } -.expand-row-table td:not(:first-child), -.expand-row-table th:not(:first-child) { +/* Only stretch non-first columns when a table is actually expanded (tbody has expanded rows) */ +/* Only stretch direct cells of the expandable table, not nested inner tables */ +.expand-row-table.has-expanded-rows > thead > tr > th:not(:first-child), +.expand-row-table.has-expanded-rows > tbody > tr > td:not(:first-child) { width: 100% !important; } diff --git a/dashboard/src/views/Administrator/BusinessMetadataTab.tsx b/dashboard/src/views/Administrator/BusinessMetadataTab.tsx index bd4588897..3d404c7e8 100644 --- a/dashboard/src/views/Administrator/BusinessMetadataTab.tsx +++ b/dashboard/src/views/Administrator/BusinessMetadataTab.tsx @@ -15,8 +15,8 @@ * limitations under the License. */ -import { CustomButton, LightTooltip } from "@components/muiComponents"; -import { Stack, Typography } from "@mui/material"; +import { CustomButton, LightTooltip, Box } from "@components/muiComponents"; +import { Stack } from "@mui/material"; import AddOutlinedIcon from "@mui/icons-material/AddOutlined"; import { TableLayout } from "@components/Table/TableLayout"; import { useAppDispatch, useAppSelector } from "@hooks/reducerHook"; @@ -75,28 +75,23 @@ const BusinessMetadataTab = ({ setForm, setBMAttribute }: any) => { !isEmpty(info.getValue()) ? ( <LightTooltip title={ - <Typography> - {" "} - <div - dangerouslySetInnerHTML={{ - __html: sanitizeHtmlContent(info.getValue()) - }} - /> - </Typography> - } - > - <Typography> - {" "} - <div + <span dangerouslySetInnerHTML={{ - __html: sanitizeHtmlContent( - info.getValue().length > 40 - ? info.getValue().substr(0, 40) + "..." - : info.getValue() - ) + __html: sanitizeHtmlContent(info.getValue()) }} /> - </Typography> + } + > + <Box + component="span" + dangerouslySetInnerHTML={{ + __html: sanitizeHtmlContent( + info.getValue().length > 40 + ? info.getValue().substr(0, 40) + "..." + : info.getValue() + ) + }} + /> </LightTooltip> ) : ( <span>N/A</span> diff --git a/dashboard/src/views/DetailPage/BusinessMetadataDetails/BusinessMetadataAtrribute.tsx b/dashboard/src/views/DetailPage/BusinessMetadataDetails/BusinessMetadataAtrribute.tsx index 04fb2ac00..e32f44f38 100644 --- a/dashboard/src/views/DetailPage/BusinessMetadataDetails/BusinessMetadataAtrribute.tsx +++ b/dashboard/src/views/DetailPage/BusinessMetadataDetails/BusinessMetadataAtrribute.tsx @@ -120,10 +120,11 @@ const BusinessMetadataAtrribute = ({ componentProps, row }: any) => { justifyContent="flex-start" > {!isEmpty(typesObj) ? ( - typesObj.map((label: string) => { + typesObj.map((label: string, idx: number) => { return ( - <LightTooltip title={label}> + <LightTooltip key={`tt-${label}-${idx}`} title={label}> <Chip + key={`chip-${label}-${idx}`} label={<EllipsisText>{label}</EllipsisText>} size="small" sx={{ diff --git a/dashboard/src/views/DetailPage/EntityDetailTabs/RelationshipsTab.tsx b/dashboard/src/views/DetailPage/EntityDetailTabs/RelationshipsTab.tsx index a6131e562..9f5413b9b 100644 --- a/dashboard/src/views/DetailPage/EntityDetailTabs/RelationshipsTab.tsx +++ b/dashboard/src/views/DetailPage/EntityDetailTabs/RelationshipsTab.tsx @@ -70,14 +70,16 @@ const RelationshipsTab: React.FC<EntityDetailTabProps> = ({ const defaultColumns = useMemo( () => [ { - accessorKey: "key", + id: "relationKey", + accessorKey: "relationKey", + accessorFn: (row: Record<string, any>) => Object.keys(row)[0] || "", cell: (info: any) => { - let keys: string[] = Object.keys(info.row.original); - let values = info.row.original; + const keyName: string = info.getValue(); + const values = info.row.original; return ( - <Typography fontWeight="600">{`${keys[0]} ${ - isArray(values[keys[0]]) && !isEmpty(values[keys[0]]) - ? `(${values[keys[0]].length})` + <Typography fontWeight="600">{`${keyName} ${ + isArray(values[keyName]) && !isEmpty(values[keyName]) + ? `(${values[keyName].length})` : "" }`}</Typography> ); @@ -86,21 +88,23 @@ const RelationshipsTab: React.FC<EntityDetailTabProps> = ({ width: "30%" }, { - accessorKey: "value", + id: "relationValue", + accessorKey: "relationValue", + accessorFn: (row: Record<string, any>) => row[Object.keys(row)[0]], cell: (info: any) => { - let keys: string[] = Object.keys(info.row.original); - let values = info.row.original; + const keyName: string = Object.keys(info.row.original)[0]; + const value = info.getValue(); return ( <span className="value-text"> {getValues( - values[keys[0]], + value, columnData, entity, undefined, "properties", referredEntities, undefined, - Object.keys(info.row.original)[0] + keyName )} </span> );
