This is an automated email from the ASF dual-hosted git repository.
dhavalshah9131 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ranger.git
commit f6585afeb3aa4e80a292540f3125c2184589a5f2
Author: Brijesh Bhalala <brijeshbhalala2...@gmail.com>
AuthorDate: Thu Jun 29 00:08:52 2023 +0530
RANGER-4295: Option might require to clear all filter at once for resource
policy side bars
---
.../src/components/CommonComponents.jsx | 21 ++++++-----
.../main/webapp/react-webapp/src/styles/style.css | 43 +++++++++++++++++++---
.../src/views/AuditEvent/AccessLogs.jsx | 9 ++---
.../react-webapp/src/views/SideBar/SideBar.jsx | 6 ++-
.../react-webapp/src/views/SideBar/SideBarBody.jsx | 25 ++++++++++---
5 files changed, 76 insertions(+), 28 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 890154c62..c2aa0a018 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
@@ -17,7 +17,7 @@
* under the License.
*/
-import { isEmpty } from "lodash";
+import { isEmpty, isObject } from "lodash";
import moment from "moment-timezone";
import React, { Component, useEffect, useMemo, useState } from "react";
import {
@@ -153,10 +153,17 @@ export class AccessMoreLess extends Component {
render() {
return (
- <div className="tags-set-height-groups">
+ <div
+ className={`tags-set-height-groups ${
+ !this?.state?.show && "tags-oflow"
+ }`}
+ >
{this?.state?.data?.map((key, index) => {
return (
- <div className="mb-1">
+ <div
+ className="text-truncate cursor-pointer"
+ title={isObject(key) ? key?.props?.data : key}
+ >
<span className="tag-item" key={index}>
{key} {index < this?.state?.data.length - 1 && ", "}
</span>
@@ -172,15 +179,11 @@ export class AccessMoreLess extends Component {
{this?.props?.Data?.length > 4 ? (
this?.state?.show ? (
<span className="float-left-margin-1">
- <h6>
- <code className="show-more-less"> + More..</code>
- </h6>
+ <code className="show-more-less"> + More..</code>
</span>
) : (
<span className="float-left-margin-1">
- <h6>
- <code className="show-more-less"> - Less..</code>
- </h6>
+ <code className="show-more-less"> - Less..</code>
</span>
)
) : null}
diff --git a/security-admin/src/main/webapp/react-webapp/src/styles/style.css
b/security-admin/src/main/webapp/react-webapp/src/styles/style.css
index 37dcab847..77c0ab7ac 100644
--- a/security-admin/src/main/webapp/react-webapp/src/styles/style.css
+++ b/security-admin/src/main/webapp/react-webapp/src/styles/style.css
@@ -262,7 +262,13 @@ a:active {
background-color: #f8f9fa;
border-color: #007bff;
}
-
+.user-name {
+ overflow: hidden;
+ display: -webkit-box !important;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow-wrap: anywhere;
+}
/* Header */
/*
@@ -673,9 +679,8 @@ table.no-bg-color thead tr th:first-child {
/* Edit Permission */
.show-more-less {
+ font-size: 11px;
color: #0b7fad;
- font-size: 12px;
- font-size: 70%;
cursor: pointer;
}
@@ -1790,11 +1795,14 @@ header {
.tags-set-height-groups {
width: 100%;
- height: 85px;
+ overflow-y: auto;
+ max-height: 140px;
overflow-x: hidden;
- min-height: 95px;
}
-
+.item {
+ white-space: normal;
+ word-break: break-all;
+}
tbody.drag-drop-wrap > tr > td:first-child {
position: relative;
padding-left: 20px;
@@ -2000,6 +2008,8 @@ tbody.drag-drop-wrap > tr > td:hover:first-child:after {
color: white;
padding: 0;
border: 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.nav-drawer .list-group-item a,
@@ -2453,6 +2463,27 @@ li.list-group-item:hover {
}
}
+.custom-clear-btn {
+ border: 0;
+ position: absolute;
+ top: calc(50% - 8px);
+ right: 16px;
+ background: transparent;
+ line-height: 1;
+ box-shadow: none;
+ color: #333333;
+}
+.custom-nav-search {
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+.custom-nav-search [class$="-IndicatorsContainer"] {
+ visibility: hidden;
+}
+/* Access Audit Tags */
+.tags-oflow {
+ max-height: 120px;
+}
.heading-without-wrap {
padding: 1rem 1rem 0rem 1rem;
margin: 0;
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AccessLogs.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AccessLogs.jsx
index 2a522b89a..b30c6f32f 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AccessLogs.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AccessLogs.jsx
@@ -651,7 +651,7 @@ function Access() {
Cell: (rawValue) => {
let Tags = [];
if (!isEmpty(rawValue.value)) {
- Tags = JSON.parse(rawValue.value).map((tag) => {
+ Tags = sortBy(JSON.parse(rawValue.value), "type")?.map((tag) => {
if (tag.attributes && !isEmpty(tag.attributes)) {
return (
<CustomPopoverTagOnClick
@@ -670,9 +670,9 @@ function Access() {
} else {
return <div className="text-center">--</div>;
}
- return <AccessMoreLess Data={sortBy(Tags)} />;
+ return <AccessMoreLess Data={Tags} />;
},
- width: 100,
+ width: 140,
disableResizing: true,
disableSortBy: true,
getResizerProps: () => {}
@@ -999,9 +999,6 @@ function Access() {
<Modal.Body>
<PolicyViewDetails
paramsData={policyParamsData}
- serviceDef={serviceDefs.find((servicedef) => {
- return servicedef.name == policyDetails.serviceType;
- })}
policyView={false}
/>
</Modal.Body>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/SideBar/SideBar.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/SideBar/SideBar.jsx
index 209cd7ba4..4dad6cab9 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/SideBar/SideBar.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/SideBar/SideBar.jsx
@@ -113,7 +113,9 @@ export const SideBar = () => {
} = keyState;
const userProps = getUserProfile();
- const loginId = <span className="login-id">{userProps?.loginId}</span>;
+ const loginId = (
+ <span className="login-id user-name">{userProps?.loginId}</span>
+ );
let location = useLocation();
let isListenerAttached = false;
@@ -423,7 +425,7 @@ export const SideBar = () => {
}}
>
<img src={accountIcon} />
- <span>{loginId}</span>
+ <span title={userProps?.loginId}>{loginId}</span>
</Button>
</li>
</ul>
diff --git
a/security-admin/src/main/webapp/react-webapp/src/views/SideBar/SideBarBody.jsx
b/security-admin/src/main/webapp/react-webapp/src/views/SideBar/SideBarBody.jsx
index a654548a2..d35afe92c 100644
---
a/security-admin/src/main/webapp/react-webapp/src/views/SideBar/SideBarBody.jsx
+++
b/security-admin/src/main/webapp/react-webapp/src/views/SideBar/SideBarBody.jsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import React, { useEffect, useReducer } from "react";
+import React, { useEffect, useReducer, useState } from "react";
import { NavLink, useNavigate } from "react-router-dom";
import {
sortBy,
@@ -33,7 +33,7 @@ import closeIcon from "Images/close.svg";
import { RangerPolicyType } from "../../utils/XAEnums";
import { getUserProfile, setUserProfile } from "Utils/appState";
import { fetchApi } from "Utils/fetchAPI";
-import Select from "react-select";
+import Select, { components } from "react-select";
import {
hasAccessToTab,
isAuditor,
@@ -44,6 +44,7 @@ import {
} from "Utils/XAUtils";
import { getServiceDef } from "../../utils/appState";
import ResourceTagContent from "./ResourceTagContent";
+import { Button } from "react-bootstrap";
function reducer(state, action) {
switch (action.type) {
@@ -307,14 +308,17 @@ export const SideBarBody = (props) => {
</span>
</div>
<div
- title={`${isEmpty(servicesData) ? "Create Service first" : ""} `}
+ title={`${isEmpty(servicesData) ? "Create Service first" : ""}`}
+ className="position-relative"
>
<Select
isMulti
- isClearable={false}
+ isClearable={true}
placeholder="Select Service Types"
menuPlacement="auto"
- className={`select-nav-drawer ${loader ? "not-allowed" : ""}`}
+ className={`select-nav-drawer custom-nav-search ${
+ loader ? "not-allowed" : ""
+ }`}
styles={serviceSelectCustomStyle}
theme={serviceSelectThemes}
isDisabled={loader || isEmpty(servicesData) ? true : false}
@@ -327,6 +331,17 @@ export const SideBarBody = (props) => {
IndicatorSeparator: () => null
}}
/>
+ {selectedServiceDef?.length > 0 && (
+ <button
+ className={`custom-clear-btn ${loader ? "not-allowed" : ""}`}
+ disabled={loader ? true : false}
+ onClick={() => {
+ handleServiceDefChange([]);
+ }}
+ >
+ X
+ </button>
+ )}
</div>
<ResourceTagContent
serviceDefsData={sortBy(
