You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ranger.apache.org by dh...@apache.org on 2026/07/17 11:43:48 UTC
(ranger) 01/01: RANGER-5468 : Policy UI to list permissions in sorted order
This is an automated email from the ASF dual-hosted git repository.
dhavaljrajpara pushed a commit to branch RANGER-5468
in repository https://gitbox.apache.org/repos/asf/ranger.git
commit 888c4f803b23bb528814ab655557752713a27e23
Author: Dhaval Rajpara <dh...@gmail.com>
AuthorDate: Fri Jul 17 08:27:46 2026 +0530
RANGER-5468 : Policy UI to list permissions in sorted order
---
.../src/components/CommonComponents.jsx | 4 +--
.../react-webapp/src/components/Editable.jsx | 2 +-
.../main/webapp/react-webapp/src/utils/XAUtils.js | 33 ++++++++++++++++++++++
.../Admin/AdminLogs/PolicyViewDetails.jsx | 13 ++++++---
.../views/PolicyListing/PolicyPermissionItem.jsx | 11 ++++----
.../views/PolicyListing/TagBasePermissionItem.jsx | 5 ++--
.../src/views/Reports/SearchPolicyTable.jsx | 31 ++++++++++++++------
.../views/ServiceManager/ServiceAuditFilter.jsx | 10 +++----
.../views/ServiceManager/ServiceViewDetails.jsx | 11 ++++++--
9 files changed, 89 insertions(+), 31 deletions(-)
diff --git a/security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx b/security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx
index e70345d6a..64aed3515 100644
--- a/security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx
@@ -95,12 +95,12 @@ export class MoreLess extends Component {
return (
<>
<div className={this.state.show ? "show-less" : "show-more"}>
- {this?.state?.data?.map((key) => {
+ {this?.state?.data?.map((key, index) => {
return (
<Badge
bg="info"
title={key}
- key={key}
+ key={index}
className="m-1 text-truncate more-less-width"
>
{key}
diff --git a/security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx b/security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx
index f69d0240c..f05c790d5 100644
--- a/security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx
@@ -620,7 +620,7 @@ const Editable = (props) => {
selectVal && selectVal?.length > 0 ? (
<>
<span className="editable-edit-text">
- {selectVal.map((op, index) => (
+ {sortBy(selectVal, "label").map((op, index) => (
<h6 className="d-inline me-1" key={index}>
<Badge bg="info">{op.label}</Badge>
</h6>
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 ceb4c3aef..a39a24f45 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
@@ -1604,3 +1604,36 @@ export const safeJsonParse = (value, fallback) => {
return fallback;
}
};
+
+//CommonFunction to get display label for policy permission item
+export const getPolicyPermissionItemDisplayLbl = (
+ serviceDef,
+ policyType,
+ accessType
+) => {
+ let accessTypeDefVal = [];
+ const accesTypeKeys = map(accessType, (item) => {
+ return isObject(item) ? item.type : item;
+ });
+ if (RangerPolicyType.RANGER_MASKING_POLICY_TYPE.value == policyType) {
+ accessTypeDefVal = serviceDef.dataMaskDef.accessTypes;
+ } else if (
+ RangerPolicyType.RANGER_ROW_FILTER_POLICY_TYPE.value == policyType
+ ) {
+ accessTypeDefVal = serviceDef.rowFilterDef.accessTypes;
+ } else {
+ accessTypeDefVal = serviceDef.accessTypes;
+ }
+ if (serviceDef.name == "tag") {
+ return map(sortBy(accesTypeKeys), (val) => ({ label: val }));
+ } else {
+ if (accessType.length == accessTypeDefVal.length) {
+ return sortBy(accessTypeDefVal, "label");
+ } else {
+ const accessTypeDisplayLblObj = filter(accessTypeDefVal, (item) =>
+ includes(accesTypeKeys, { type: item.name })
+ );
+ return sortBy(accessTypeDisplayLblObj, "label");
+ }
+ }
+};
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 2f011b6d4..e683303a1 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
@@ -27,7 +27,8 @@ import { cloneDeep, find, isEmpty, map, sortBy } from "lodash";
import {
getResourcesDefVal,
serverError,
- getPolicyConditionDisplayLbl
+ getPolicyConditionDisplayLbl,
+ getPolicyPermissionItemDisplayLbl
} from "Utils/XAUtils";
import { ModalLoader } from "Components/CommonComponents";
import { getServiceDef } from "Utils/appState";
@@ -478,14 +479,18 @@ export function PolicyViewDetails(props) {
{!isEmpty(items.accesses) ? (
<td className="text-center d-flex flex-wrap policyview-permission-wrap">
{" "}
- {items.accesses.map((obj, index) => (
+ {getPolicyPermissionItemDisplayLbl(
+ filterServiceDef,
+ policyType,
+ items.accesses
+ ).map((obj, index) => (
<h6 className="d-inline me-1" key={index}>
<Badge
bg="info"
className="d-inline me-1"
- key={obj.type}
+ key={obj.label}
>
- {obj.type}
+ {obj.label}
</Badge>
</h6>
))}
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyPermissionItem.jsx b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyPermissionItem.jsx
index 6240525b8..60a48dff1 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyPermissionItem.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyPermissionItem.jsx
@@ -31,7 +31,8 @@ import {
map,
filter,
some,
- isEqual
+ isEqual,
+ sortBy
} from "lodash";
import { toast } from "react-toastify";
import Editable from "Components/Editable";
@@ -253,10 +254,10 @@ export default function PolicyPermissionItem(props) {
}
}
}
- return srcOp.map(({ label, name: value }) => ({
- label,
- value
- }));
+ return sortBy(
+ srcOp.map(({ label, name: value }) => ({ label, value })),
+ serviceCompDetails?.name == "tag" ? "value" : "label"
+ );
};
const getMaskingAccessTypeOptions = (index) => {
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/TagBasePermissionItem.jsx b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/TagBasePermissionItem.jsx
index 7d164dedc..80fa4a8ae 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/TagBasePermissionItem.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/TagBasePermissionItem.jsx
@@ -33,7 +33,8 @@ import {
difference,
map,
every,
- cloneDeep
+ cloneDeep,
+ sortBy
} from "lodash";
import { RangerPolicyType } from "Utils/XAEnums";
import { getServiceDef } from "Utils/appState";
@@ -269,7 +270,7 @@ export default function TagBasePermissionItem(props) {
};
const tagAccessTypeDisplayVal = (val) => {
- return val.map((m, index) => {
+ return sortBy(val, "serviceName").map((m, index) => {
return (
<h6 className="d-inline me-1 mb-1" key={index}>
<Badge bg="info">{m.serviceName.toUpperCase()}</Badge>
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 c8f581eb4..39d96f2ae 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
@@ -38,6 +38,7 @@ import {
isKMSAuditor,
getPolicyConditionDisplayLbl
} from "Utils/XAUtils";
+import { getPolicyPermissionItemDisplayLbl } from "../../utils/XAUtils";
function SearchPolicyTable(props) {
const [searchPoliciesData, setSearchPolicies] = useState([]);
@@ -305,7 +306,11 @@ function PolicyConditionData(props) {
if (!isEmpty(policyItem)) {
tableRow = policyItem?.map((items, index) => {
- access = items.accesses?.map((obj) => obj.type);
+ access = getPolicyPermissionItemDisplayLbl(
+ props.serviceDef,
+ 0,
+ items.accesses
+ )?.map((obj) => obj.label);
return (
<tr key={index}>
<td>
@@ -388,7 +393,11 @@ function PolicyConditionData(props) {
let access = [];
if (!isEmpty(policyItem)) {
tableRow = policyItem?.map((items, index) => {
- access = items.accesses?.map((obj) => obj.type);
+ access = getPolicyPermissionItemDisplayLbl(
+ props.serviceDef,
+ 1,
+ items.accesses
+ )?.map((obj) => obj.label);
return (
<tr key={index}>
<td>
@@ -473,7 +482,11 @@ function PolicyConditionData(props) {
let access = [];
if (!isEmpty(policyItem)) {
tableRow = policyItem?.map((items, index) => {
- access = items.accesses?.map((obj) => obj.type);
+ access = getPolicyPermissionItemDisplayLbl(
+ props.serviceDef,
+ 2,
+ items.accesses
+ )?.map((obj) => obj.label);
return (
<tr key={index}>
<td>
@@ -569,7 +582,7 @@ function PolicyConditionData(props) {
{!isEmpty(props?.serviceDef?.policyConditions) && (
<th className="text-center text-nowrap">Rule Conditions</th>
)}
- <th>Accesses</th>
+ <th>Permissions</th>
{props?.serviceDef?.name != "tag" && <th>Delegate Admin</th>}
</tr>
</thead>
@@ -596,7 +609,7 @@ function PolicyConditionData(props) {
Rule Conditions
</th>
)}
- <th>Accesses</th>
+ <th>Permissions</th>
{props?.serviceDef?.name != "tag" && (
<th>Delegate Admin</th>
)}
@@ -624,7 +637,7 @@ function PolicyConditionData(props) {
Rule Conditions
</th>
)}
- <th>Accesses</th>
+ <th>Permissions</th>
{props?.serviceDef?.name != "tag" && (
<th>Delegate Admin</th>
)}
@@ -652,7 +665,7 @@ function PolicyConditionData(props) {
Rule Conditions
</th>
)}
- <th>Accesses</th>
+ <th>Permissions</th>
{props?.serviceDef?.name != "tag" && (
<th>Delegate Admin</th>
)}
@@ -685,7 +698,7 @@ function PolicyConditionData(props) {
{!isEmpty(props?.serviceDef?.policyConditions) && (
<th className="text-center text-nowrap">Rule Conditions</th>
)}
- <th>Accesses</th>
+ <th>Permissions</th>
<th>Masking Condition</th>
</tr>
</thead>
@@ -714,7 +727,7 @@ function PolicyConditionData(props) {
{!isEmpty(props?.serviceDef?.policyConditions) && (
<th className="text-center text-nowrap">Rule Conditions</th>
)}
- <th>Accesses</th>
+ <th>Permissions</th>
<th>Row Level Filter</th>
</tr>
</thead>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceAuditFilter.jsx b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceAuditFilter.jsx
index 23c2e8a13..9ce5dfc37 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceAuditFilter.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceAuditFilter.jsx
@@ -26,7 +26,7 @@ import AsyncSelect from "react-select/async";
import Editable from "Components/Editable";
import CreatableField from "Components/CreatableField";
import ModalResourceComp from "Views/Resources/ModalResourceComp";
-import { uniq, map, join, isEmpty, isArray } from "lodash";
+import { uniq, map, join, isEmpty, isArray, sortBy } from "lodash";
import TagBasePermissionItem from "Views/PolicyListing/TagBasePermissionItem";
import { dragStart, dragEnter, drop, dragOver } from "Utils/XAUtils";
import { selectInputCustomStyles } from "Components/CommonComponents";
@@ -155,10 +155,10 @@ export default function ServiceAuditFilter(props) {
const getAccessTypeOptions = () => {
let srcOp = [];
srcOp = serviceDefDetails?.accessTypes;
- return srcOp?.map(({ label, name: value }) => ({
- label,
- value
- }));
+ return sortBy(
+ srcOp?.map(({ label, name: value }) => ({ label, value })),
+ serviceDefDetails.name == "tag" ? "value" : "label"
+ );
};
const permList = [
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceViewDetails.jsx b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceViewDetails.jsx
index 8cb742c29..9f3afbe91 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceViewDetails.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceViewDetails.jsx
@@ -33,6 +33,7 @@ import {
} from "lodash";
import { ModalLoader } from "Components/CommonComponents";
import { additionalServiceConfigs } from "Utils/XAEnums";
+import { getPolicyPermissionItemDisplayLbl } from "Utils/XAUtils";
export const ServiceViewDetails = (props) => {
const { serviceData: service, serviceDefData } = props;
@@ -261,13 +262,17 @@ export const ServiceViewDetails = (props) => {
</td>
<td className="text-center">
{a.accessTypes !== undefined && a.accessTypes.length > 0
- ? a.accessTypes.map((accessType) => (
+ ? getPolicyPermissionItemDisplayLbl(
+ serviceDefData,
+ 0,
+ a.accessTypes
+ ).map((accessType) => (
<Badge
bg="info"
className="m-1 text-truncate"
- key={accessType}
+ key={accessType.label}
>
- {accessType}
+ {accessType.label}
</Badge>
))
: "--"}