You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ranger.apache.org by mu...@apache.org on 2026/07/17 12:43:17 UTC
(ranger) branch master updated: RANGER-5694 : Refactor policy condition rendering component to ensure layout stability (#1082)
This is an automated email from the ASF dual-hosted git repository.
fimugdha pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ranger.git
The following commit(s) were added to refs/heads/master by this push:
new b93fed70d RANGER-5694 : Refactor policy condition rendering component to ensure layout stability (#1082)
b93fed70d is described below
commit b93fed70df3ef8bcc8002ce63352e84bce5a03d6
Author: Mugdha Varadkar <fi...@users.noreply.github.com>
AuthorDate: Fri Jul 17 18:13:12 2026 +0530
RANGER-5694 : Refactor policy condition rendering component to ensure layout stability (#1082)
---
.../Admin/AdminLogs/PolicyViewDetails.jsx | 70 +++++++++++++++-------
.../src/views/Reports/SearchPolicyTable.jsx | 26 +++++---
2 files changed, 68 insertions(+), 28 deletions(-)
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 e683303a1..018981c9f 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,7 +23,16 @@ 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 {
+ cloneDeep,
+ find,
+ filter,
+ has,
+ keyBy,
+ isEmpty,
+ map,
+ sortBy
+} from "lodash";
import {
getResourcesDefVal,
serverError,
@@ -354,6 +363,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,
@@ -456,23 +500,7 @@ export function PolicyViewDetails(props) {
filterServiceDef && filterServiceDef.policyConditions
) && (
<td>
- {!isEmpty(items.conditions)
- ? items.conditions.map((obj, index) => {
- let conditionObj =
- filterServiceDef.policyConditions.find((e) => {
- return e.name == obj.type;
- });
- return (
- <Badge
- bg="info"
- className="me-1 line-clamp line-clamp-3 text-start"
- key={obj.values}
- >{`${getPolicyConditionDisplayLbl(
- conditionObj.label
- )}: ${obj.values.join(", ")}`}</Badge>
- );
- })
- : "--"}
+ {getPolicyItemConditions(items, filterServiceDef)}
</td>
)}
@@ -553,9 +581,9 @@ 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
+ return filterLabel?.label
? getPolicyConditionDisplayLbl(filterLabel.label)
: "";
};
@@ -571,7 +599,7 @@ export function PolicyViewDetails(props) {
<td width="30%">{getConditionLabel(obj.type)}</td>
<td width="70%">
<span className="line-clamp line-clamp-5 text-start">
- {obj.values.join(", ")}
+ {(obj.values || []).join(", ")}
</span>
</td>
</tr>
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 39d96f2ae..b0b74c898 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,7 +28,7 @@ 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";
@@ -338,17 +338,29 @@ function PolicyConditionData(props) {
<td>
{!isEmpty(items.conditions)
? items.conditions.map((obj, index) => {
- let conditionObj = props.serviceDef.policyConditions.find(
- (condition) => condition.name === obj.type
+ 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 (
<Badge
bg="info"
className="me-1 line-clamp line-clamp-3 text-start"
- key={index}
- >{`${getPolicyConditionDisplayLbl(
- conditionObj.label
- )}: ${obj.values.join(", ")}`}</Badge>
+ key={`${obj.type}-${index}`}
+ >{`${label}: ${values}`}</Badge>
);
})
: "--"}