This is an automated email from the ASF dual-hosted git repository.
fimugdha pushed a commit to branch ranger-2.9
in repository https://gitbox.apache.org/repos/asf/ranger.git
The following commit(s) were added to refs/heads/ranger-2.9 by this push:
new 3d6340e0d RANGER-5694 : Refactor policy condition rendering component
to ensure layout stability (#1083)
3d6340e0d is described below
commit 3d6340e0d33b84b530c4e8d964d69d94d966cb46
Author: Mugdha Varadkar <[email protected]>
AuthorDate: Fri Jul 17 17:50:27 2026 +0530
RANGER-5694 : Refactor policy condition rendering component to ensure
layout stability (#1083)
---
.../main/webapp/react-webapp/src/utils/XAEnums.js | 9 ++-
.../main/webapp/react-webapp/src/utils/XAUtils.js | 10 ++-
.../Admin/AdminLogs/PolicyViewDetails.jsx | 82 +++++++++++++++-------
.../src/views/Reports/SearchPolicyTable.jsx | 39 +++++++---
4 files changed, 103 insertions(+), 37 deletions(-)
diff --git a/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
b/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
index 722c0e21a..b2cf730b6 100644
--- a/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
+++ b/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
@@ -550,7 +550,7 @@ export const RegexValidation = {
characters.
<br />
2. Allowed special character ,._-+/@= and space. <br />
- 3. Name length should be greater than one."
+ 3. Name length should be greater than one.
</>
),
regexforNameValidationMessage:
@@ -562,7 +562,7 @@ export const RegexValidation = {
<br />
2. Allowed special character ._-@ and space.
<br />
- 3. Name length should be greater than one."
+ 3. Name length should be greater than one.
</>
)
},
@@ -894,3 +894,8 @@ export const additionalServiceConfigs = [
type: "user"
}
];
+export const policyConditionDisplayLabel = {
+ "Accessed after expiry_date (yes/no)?": "Accessed after expiry date",
+ "Enter boolean expression": "Boolean expression",
+ "IP Address Range": "IP Address Range"
+};
diff --git a/security-admin/src/main/webapp/react-webapp/src/utils/XAUtils.js
b/security-admin/src/main/webapp/react-webapp/src/utils/XAUtils.js
index 4f534bb00..9182d427e 100644
--- a/security-admin/src/main/webapp/react-webapp/src/utils/XAUtils.js
+++ b/security-admin/src/main/webapp/react-webapp/src/utils/XAUtils.js
@@ -24,7 +24,8 @@ import {
PathAssociateWithModule,
QueryParams,
RangerPolicyType,
- ServiceType
+ ServiceType,
+ policyConditionDisplayLabel
} from "Utils/XAEnums";
import {
filter,
@@ -1584,3 +1585,10 @@ export const currentTimeZone = (timeZoneDate) => {
.replace(/^.*GMT.*\(/, "")
.replace(/\)$/, "");
};
+
+// Common function to get display label for policy condition
+export const getPolicyConditionDisplayLbl = (lbl) => {
+ return has(policyConditionDisplayLabel, lbl)
+ ? policyConditionDisplayLabel[lbl]
+ : lbl;
+};
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
index 534daa4c4..48d21b68f 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/Admin/AdminLogs/PolicyViewDetails.jsx
@@ -23,8 +23,21 @@ import { Table, Badge, Row, Col } from "react-bootstrap";
import { RangerPolicyType, DefStatus } from "Utils/XAEnums";
import dateFormat from "dateformat";
import { toast } from "react-toastify";
-import { cloneDeep, find, isEmpty, map, sortBy } from "lodash";
-import { getResourcesDefVal, serverError } from "Utils/XAUtils";
+import {
+ cloneDeep,
+ find,
+ filter,
+ has,
+ keyBy,
+ isEmpty,
+ map,
+ sortBy
+} from "lodash";
+import {
+ getResourcesDefVal,
+ serverError,
+ getPolicyConditionDisplayLbl
+} from "Utils/XAUtils";
import { ModalLoader } from "Components/CommonComponents";
import { getServiceDef } from "Utils/appState";
@@ -343,6 +356,41 @@ export function PolicyViewDetails(props) {
);
};
+ const getPolicyItemConditions = (items, filterServiceDef) => {
+ const conditions = items?.conditions || [];
+ const policyConditions = filterServiceDef?.policyConditions || [];
+
+ if (isEmpty(conditions) || isEmpty(policyConditions)) {
+ return "--";
+ }
+
+ const policyMap = keyBy(policyConditions, "name");
+
+ const matchingConditions = filter(conditions, (obj) =>
+ has(policyMap, obj.type)
+ );
+
+ if (isEmpty(matchingConditions)) {
+ return "--";
+ }
+
+ return map(matchingConditions, (obj, index) => {
+ const conditionObj = policyMap[obj.type];
+ const label = getPolicyConditionDisplayLbl(conditionObj?.label);
+ const values = (obj.values || []).join(", ");
+
+ return (
+ <Badge
+ bg="info"
+ className="me-1 line-clamp line-clamp-3 text-start"
+ key={`${obj.type}-${index}`}
+ >
+ {`${label}: ${values}`}
+ </Badge>
+ );
+ });
+ };
+
const getFilterPolicy = (
policyItemsVal,
serviceDef,
@@ -445,25 +493,7 @@ export function PolicyViewDetails(props) {
filterServiceDef && filterServiceDef.policyConditions
) && (
<td className="text-center">
- {!isEmpty(items.conditions)
- ? items.conditions.map((obj, index) => {
- let conditionObj =
- filterServiceDef.policyConditions.find((e) => {
- return e.name == obj.type;
- });
- return (
- <h6 className="d-inline me-1" key={index}>
- <Badge
- bg="info"
- className="d-inline me-1"
- key={obj.values}
- >{`${conditionObj.label}: ${obj.values.join(
- ", "
- )}`}</Badge>
- </h6>
- );
- })
- : "--"}
+ {getPolicyItemConditions(items, filterServiceDef)}
</td>
)}
@@ -540,9 +570,11 @@ export function PolicyViewDetails(props) {
const getPolicyConditions = (conditions, serviceDef) => {
const getConditionLabel = (label) => {
- let filterLabel = find(serviceDef.policyConditions, { name: label });
+ const filterLabel = find(serviceDef.policyConditions, { name: label });
- return filterLabel && filterLabel?.label ? filterLabel.label : "";
+ return filterLabel?.label
+ ? getPolicyConditionDisplayLbl(filterLabel.label)
+ : "";
};
return (
!isEmpty(conditions) && (
@@ -554,7 +586,9 @@ export function PolicyViewDetails(props) {
{conditions.map((obj) => (
<tr key={obj.type} colSpan="2">
<td width="40%">{getConditionLabel(obj.type)}</td>
- <td width="60% text-truncate">{obj.values.join(", ")}</td>
+ <td width="60% text-truncate">
+ {(obj.values || []).join(", ")}
+ </td>
</tr>
))}
</tbody>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
index b2997356a..76397084e 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/Reports/SearchPolicyTable.jsx
@@ -28,12 +28,16 @@ import {
Row,
Table
} from "react-bootstrap";
-import { isEmpty, find } from "lodash";
+import { isEmpty, find, keyBy } from "lodash";
import { MoreLess } from "Components/CommonComponents";
import XATableLayout from "Components/XATableLayout";
import { fetchApi } from "Utils/fetchAPI";
-import { Loader } from "../../components/CommonComponents";
-import { isAuditor, isKMSAuditor } from "../../utils/XAUtils";
+import { Loader } from "Components/CommonComponents";
+import {
+ isAuditor,
+ isKMSAuditor,
+ getPolicyConditionDisplayLbl
+} from "Utils/XAUtils";
function SearchPolicyTable(props) {
const [searchPoliciesData, setSearchPolicies] = useState([]);
@@ -329,14 +333,29 @@ function PolicyConditionData(props) {
<td className="text-center">
{!isEmpty(items.conditions)
? items.conditions.map((obj, index) => {
+ const policyMap = keyBy(
+ props.serviceDef.policyConditions,
+ "name"
+ );
+
+ const conditionObj = policyMap[obj.type];
+
+ if (isEmpty(conditionObj)) {
+ return null;
+ }
+
+ const label = conditionObj?.label
+ ? getPolicyConditionDisplayLbl(conditionObj.label)
+ : "";
+
+ const values = (obj.values || []).join(", ");
+
return (
- <h6 className="d-inline me-1" key={index}>
- <Badge
- bg="info"
- className="d-inline me-1"
- key={obj.values}
- >{`${obj.type}: ${obj.values.join(", ")}`}</Badge>
- </h6>
+ <Badge
+ bg="info"
+ className="me-1 line-clamp line-clamp-3 text-start"
+ key={`${obj.type}-${index}`}
+ >{`${label}: ${values}`}</Badge>
);
})
: "--"}
