This is an automated email from the ASF dual-hosted git repository.
ppawar pushed a commit to branch atlas-2.5
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/atlas-2.5 by this push:
new c7190685d ATLAS-5050: [React UI] Audit tab layout: Single section not
expands to full width (#367)
c7190685d is described below
commit c7190685d5f472eca8a72d1b708ccc15320f374b
Author: Brijesh Bhalala <[email protected]>
AuthorDate: Mon Sep 8 17:22:34 2025 +0530
ATLAS-5050: [React UI] Audit tab layout: Single section not expands to full
width (#367)
---
dashboard/src/styles/propertiesTab.scss | 19 ++++
.../EntityDetailTabs/AttributeProperties.tsx | 112 +++++++++++----------
.../EntityDetailTabs/AuditTableDetails.tsx | 29 +++---
3 files changed, 89 insertions(+), 71 deletions(-)
diff --git a/dashboard/src/styles/propertiesTab.scss
b/dashboard/src/styles/propertiesTab.scss
index 843aed5e7..3c9076a17 100644
--- a/dashboard/src/styles/propertiesTab.scss
+++ b/dashboard/src/styles/propertiesTab.scss
@@ -59,3 +59,22 @@
width: 100% !important;
word-break: break-all;
}
+
+.audit-attributes:has(.audit-attributes-item:nth-child(1):last-child)
+ .audit-attributes-item {
+ flex: 0 0 100%;
+}
+
+.audit-attributes:has(.audit-attributes-item:nth-child(2):last-child)
+ .audit-attributes-item {
+ flex: 0 0 calc(50% - 0.5rem);
+}
+
+.audit-attributes:has(.audit-attributes-item:nth-child(3):last-child)
+ .audit-attributes-item:nth-child(-n + 2) {
+ flex: 0 0 calc(50% - 0.5rem);
+}
+.audit-attributes:has(.audit-attributes-item:nth-child(3):last-child)
+ .audit-attributes-item:nth-child(3) {
+ flex: 0 0 100%;
+}
diff --git
a/dashboard/src/views/DetailPage/EntityDetailTabs/AttributeProperties.tsx
b/dashboard/src/views/DetailPage/EntityDetailTabs/AttributeProperties.tsx
index 406e4305c..ce58c002a 100644
--- a/dashboard/src/views/DetailPage/EntityDetailTabs/AttributeProperties.tsx
+++ b/dashboard/src/views/DetailPage/EntityDetailTabs/AttributeProperties.tsx
@@ -225,62 +225,64 @@ const AttributeProperties = ({
? properties
: nonEmptyValueProperty
: properties
- )
- ? Object.entries(
- !auditDetails
- ? checked
- ? properties
- : nonEmptyValueProperty
- : properties
- )
- .sort()
- .map(([keys, value]: [string, any]) => {
- return (
- <>
- <Stack
- direction="row"
- spacing={4}
- marginBottom={1}
- marginTop={1}
+ ) ? (
+ Object.entries(
+ !auditDetails
+ ? checked
+ ? properties
+ : nonEmptyValueProperty
+ : properties
+ )
+ .sort()
+ .map(([keys, value]: [string, any]) => {
+ return (
+ <>
+ <Stack
+ direction="row"
+ spacing={4}
+ marginBottom={1}
+ marginTop={1}
+ >
+ <div
+ style={{
+ flexBasis: "30%",
+ wordBreak: "break-all",
+ textAlign: "left",
+ fontWeight: "600"
+ }}
>
- <div
- style={{
- flexBasis: "30%",
- wordBreak: "break-all",
- textAlign: "left",
- fontWeight: "600"
- }}
- >
- {`${keys} ${
- isArray(value) ? `(${value.length})` : ""
- }`}
- </div>
- <div
- style={{
- flex: 1,
- wordBreak: "break-all",
- textAlign: "left",
- margin: "0"
- }}
- className="attribute-value-text"
- >
- {getValues(
- value,
- properties,
- typeDefEntityData,
- undefined,
- "properties",
- referredEntities,
- entity,
- keys
- )}
- </div>
- </Stack>
- <Divider />
- </>
- );
- })
- : "No Record Found"}
+ {`${keys} ${
+ isArray(value) ? `(${value.length})` : ""
+ }`}
+ </div>
+ <div
+ style={{
+ flex: 1,
+ wordBreak: "break-all",
+ textAlign: "left",
+ margin: "0"
+ }}
+ className="attribute-value-text"
+ >
+ {getValues(
+ value,
+ properties,
+ typeDefEntityData,
+ undefined,
+ "properties",
+ referredEntities,
+ entity,
+ keys
+ )}
+ </div>
+ </Stack>
+ <Divider />
+ </>
+ );
+ })
+ ) : (
+ <Stack textAlign="center">No Record Found</Stack>
+ )}
</Stack>
)}
</AccordionDetails>
diff --git
a/dashboard/src/views/DetailPage/EntityDetailTabs/AuditTableDetails.tsx
b/dashboard/src/views/DetailPage/EntityDetailTabs/AuditTableDetails.tsx
index aabbf355d..50574fe19 100644
--- a/dashboard/src/views/DetailPage/EntityDetailTabs/AuditTableDetails.tsx
+++ b/dashboard/src/views/DetailPage/EntityDetailTabs/AuditTableDetails.tsx
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { Grid } from "@mui/material";
+import Stack from "@mui/material/Stack";
import { extractKeyValueFromEntity, isArray, isEmpty } from "@utils/Utils";
import AttributeProperties from "./AttributeProperties";
@@ -74,14 +74,13 @@ const AuditTableDetails = ({ componentProps, row }: any) =>
{
? parseDetailsObject.typeName
: updateName(name, {})}
{!isEmpty(entity) ? (
- <Grid
- container
- marginTop={0}
- spacing={2}
- className="properties-container"
+ <Stack
+ direction={"row"}
+ gap={"1rem"}
+ flexWrap="wrap"
+ className="audit-attributes properties-container"
>
- <Grid item md={6}>
- {" "}
+ <div className="audit-attributes-item">
<AttributeProperties
entity={parseDetailsObject}
referredEntities={referredEntities}
@@ -90,10 +89,9 @@ const AuditTableDetails = ({ componentProps, row }: any) => {
entityobj={entity}
propertiesName="Technical"
/>
- </Grid>
+ </div>
{!isEmpty(relationshipAttributes) && (
- <Grid item md={6}>
- {" "}
+ <div className="audit-attributes-item">
<AttributeProperties
entity={parseDetailsObject}
referredEntities={referredEntities}
@@ -102,11 +100,10 @@ const AuditTableDetails = ({ componentProps, row }: any)
=> {
entityobj={entity}
propertiesName="Relationship"
/>
- </Grid>
+ </div>
)}
{!isEmpty(customAttr) && (
- <Grid item md={12}>
- {" "}
+ <div className="audit-attributes-item">
<AttributeProperties
entity={parseDetailsObject}
referredEntities={referredEntities}
@@ -115,9 +112,9 @@ const AuditTableDetails = ({ componentProps, row }: any) =>
{
entityobj={entity}
propertiesName="User-defined"
/>
- </Grid>
+ </div>
)}
- </Grid>
+ </Stack>
) : (
<h4 data-cy="noData">
<i>No details to show!</i>
