This is an automated email from the ASF dual-hosted git repository. mehul pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/ranger.git
commit 786bdc82dd8ee5640a325e65b15be23a1744f36d Author: Mugdha Varadkar <mug...@apache.org> AuthorDate: Wed Jul 26 13:04:12 2023 +0530 RANGER-4331: Fixes for search filter on Audits tabs Signed-off-by: Mehul Parikh <me...@apache.org> --- .../main/webapp/react-webapp/src/utils/XAUtils.js | 11 +- .../src/views/AuditEvent/AccessLogs.jsx | 169 ++++++++++----------- .../src/views/AuditEvent/AuditLayout.jsx | 38 ++++- .../src/views/AuditEvent/PluginStatusLogs.jsx | 81 ++-------- .../src/views/AuditEvent/PluginsLog.jsx | 14 +- .../views/ServiceManager/ServiceDefinitions.jsx | 4 +- 6 files changed, 150 insertions(+), 167 deletions(-) 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 30fc4225b..74b213a9d 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 @@ -1162,10 +1162,11 @@ export const fetchSearchFilterParams = ( // Get search filter params from localStorage if (isEmpty(searchFilterParam)) { - const localStorageParams = - !isEmpty(localStorage.getItem(auditTabName)) && - JSON.parse(localStorage.getItem(auditTabName)); - if (!isNull(localStorageParams) && !isEmpty(localStorageParams)) { + if (!isNull(localStorage.getItem(auditTabName))) { + const localStorageParams = + !isEmpty(localStorage.getItem(auditTabName)) && + JSON.parse(localStorage.getItem(auditTabName)); + for (const localParam in localStorageParams) { let searchFilterObj = find(searchFilterOptions, { urlLabel: localParam @@ -1187,7 +1188,7 @@ export const fetchSearchFilterParams = ( category: category, value: value }); - searchParam[localParam] = value; + searchParam[localParam] = localStorageParams[localParam]; } } } 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 b30c6f32f..630e51637 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 @@ -18,7 +18,7 @@ */ import React, { useState, useCallback, useEffect, useRef } from "react"; -import { useSearchParams } from "react-router-dom"; +import { useSearchParams, useOutletContext } from "react-router-dom"; import { Badge, Button, Row, Col, Table, Modal } from "react-bootstrap"; import XATableLayout from "Components/XATableLayout"; import dateFormat from "dateformat"; @@ -40,7 +40,8 @@ import { toString, toUpper, has, - filter + filter, + isNull } from "lodash"; import { toast } from "react-toastify"; import { Link } from "react-router-dom"; @@ -62,12 +63,15 @@ import { ServiceRequestDataRangerAcl, ServiceRequestDataHadoopAcl } from "../../utils/XAEnums"; +import { getServiceDef } from "../../utils/appState"; function Access() { + const context = useOutletContext(); + const services = context.services; + const servicesAvailable = context.servicesAvailable; const isKMSRole = isKeyAdmin() || isKMSAuditor(); + const [searchParams, setSearchParams] = useSearchParams(); const [accessListingData, setAccessLogs] = useState([]); - const [serviceDefs, setServiceDefs] = useState([]); - const [services, setServices] = useState([]); const [zones, setZones] = useState([]); const [loader, setLoader] = useState(true); const [pageCount, setPageCount] = React.useState(0); @@ -77,73 +81,88 @@ function Access() { const [policyviewmodal, setPolicyViewModal] = useState(false); const [policyParamsData, setPolicyParamsData] = useState(null); const [rowdata, setRowData] = useState([]); - const [checked, setChecked] = useState(false); + const [checked, setChecked] = useState(() => { + let urlParam = Object.fromEntries([...searchParams]); + if (urlParam?.excludeServiceUser) { + return urlParam.excludeServiceUser == "true" ? true : false; + } else { + return localStorage?.excludeServiceUser == "true" ? true : false; + } + }); const [currentPage, setCurrentPage] = useState(1); const fetchIdRef = useRef(0); const [contentLoader, setContentLoader] = useState(true); const [searchFilterParams, setSearchFilterParams] = useState([]); - const [searchParams, setSearchParams] = useSearchParams(); const [defaultSearchFilterParams, setDefaultSearchFilterParams] = useState( [] ); const [resetPage, setResetpage] = useState({ page: 0 }); const [policyDetails, setPolicyDetails] = useState({}); + const { allServiceDefs } = getServiceDef(); useEffect(() => { - if (isEmpty(serviceDefs)) { - fetchServiceDefs(), fetchServices(); + if (!isKMSRole) { + fetchZones(); + } - if (!isKMSRole) { - fetchZones(); - } + let currentDate = moment(moment()).format("MM/DD/YYYY"); + let { searchFilterParam, defaultSearchFilterParam, searchParam } = + fetchSearchFilterParams("bigData", searchParams, searchFilterOptions); + + if ( + !has(searchFilterParam, "startDate") && + !has(searchFilterParam, "endDate") + ) { + searchParam["startDate"] = currentDate; + searchFilterParam["startDate"] = currentDate; + defaultSearchFilterParam.push({ + category: "startDate", + value: currentDate + }); } - if (!isEmpty(serviceDefs)) { - let currentDate = moment(moment()).format("MM/DD/YYYY"); + // Updating the states for search params, search filter, default search filter and localStorage + if (localStorage?.excludeServiceUser) { + searchParam["excludeServiceUser"] = checked; + } + setSearchParams(searchParam); + setSearchFilterParams(searchFilterParam); + setDefaultSearchFilterParams(defaultSearchFilterParam); + localStorage.setItem("bigData", JSON.stringify(searchParam)); + }, []); + + useEffect(() => { + if (servicesAvailable !== null) { let { searchFilterParam, defaultSearchFilterParam, searchParam } = fetchSearchFilterParams("bigData", searchParams, searchFilterOptions); + // Updating the states for search params, search filter, default search filter and localStorage + if (localStorage?.excludeServiceUser || searchParam?.excludeServiceUser) { + if (searchParam?.excludeServiceUser) { + setChecked(searchParam?.excludeServiceUser == "true" ? true : false); + localStorage.setItem( + "excludeServiceUser", + searchParam?.excludeServiceUser + ); + } + searchParam["excludeServiceUser"] = localStorage?.excludeServiceUser; + } + setSearchParams(searchParam); if ( - !has(searchFilterParam, "startDate") && - !has(searchFilterParam, "endDate") + JSON.stringify(searchFilterParams) !== JSON.stringify(searchFilterParam) ) { - searchParam["startDate"] = currentDate; - searchFilterParam["startDate"] = currentDate; - defaultSearchFilterParam.push({ - category: "startDate", - value: currentDate - }); + setSearchFilterParams(searchFilterParam); } - - // Updating the states for search params, search filter, default search filter and localStorage - setSearchParams(searchParam); - setSearchFilterParams(searchFilterParam); setDefaultSearchFilterParams(defaultSearchFilterParam); localStorage.setItem("bigData", JSON.stringify(searchParam)); setContentLoader(false); } - }, [serviceDefs]); - - useEffect(() => { - let { searchFilterParam, defaultSearchFilterParam, searchParam } = - fetchSearchFilterParams("bigData", searchParams, searchFilterOptions); - - // Updating the states for search params, search filter, default search filter and localStorage - setSearchParams(searchParam); - if ( - JSON.stringify(searchFilterParams) !== JSON.stringify(searchFilterParam) - ) { - setSearchFilterParams(searchFilterParam); - } - setDefaultSearchFilterParams(defaultSearchFilterParam); - localStorage.setItem("bigData", JSON.stringify(searchParam)); - setContentLoader(false); - }, [searchParams]); + }, [searchParams, servicesAvailable]); const fetchAccessLogsInfo = useCallback( async ({ pageSize, pageIndex, sortBy, gotoPage }) => { setLoader(true); - if (!isEmpty(serviceDefs)) { + if (servicesAvailable !== null) { let logsResp = []; let logs = []; let totalCount = 0; @@ -152,7 +171,15 @@ function Access() { if (fetchId === fetchIdRef.current) { params["pageSize"] = pageSize; params["startIndex"] = pageIndex * pageSize; - params["excludeServiceUser"] = checked ? true : false; + if (Object.fromEntries([...searchParams])?.excludeServiceUser) { + params["excludeServiceUser"] = + Object.fromEntries([...searchParams])?.excludeServiceUser == + "true" + ? true + : false; + } else { + params["excludeServiceUser"] = checked; + } if (sortBy.length > 0) { params["sortBy"] = getTableSortBy(sortBy); params["sortType"] = getTableSortType(sortBy); @@ -178,41 +205,9 @@ function Access() { } } }, - [updateTable, searchFilterParams] + [updateTable, checked, searchFilterParams, servicesAvailable] ); - const fetchServiceDefs = async () => { - let serviceDefsResp = []; - try { - serviceDefsResp = await fetchApi({ - url: "plugins/definitions" - }); - } catch (error) { - console.error( - `Error occurred while fetching Service Definitions or CSRF headers! ${error}` - ); - } - - setServiceDefs(serviceDefsResp.data.serviceDefs); - setContentLoader(false); - }; - - const fetchServices = async () => { - let servicesResp = []; - try { - servicesResp = await fetchApi({ - url: "plugins/services" - }); - } catch (error) { - console.error( - `Error occurred while fetching Services or CSRF headers! ${error}` - ); - } - - setServices(servicesResp.data.services); - setContentLoader(false); - }; - const fetchZones = async () => { let zonesResp; try { @@ -224,16 +219,18 @@ function Access() { } setZones(sortBy(zonesResp.data.securityZones, ["name"])); - setContentLoader(false); }; - const toggleChange = () => { + const toggleChange = (chkVal) => { let currentParams = Object.fromEntries([...searchParams]); - currentParams["excludeServiceUser"] = !checked; - localStorage.setItem("excludeServiceUser", JSON.stringify(!checked)); + currentParams["excludeServiceUser"] = chkVal?.target?.checked; + localStorage.setItem( + "excludeServiceUser", + JSON.stringify(chkVal?.target?.checked) + ); setSearchParams(currentParams); setAccessLogs([]); - setChecked(!checked); + setChecked(chkVal?.target?.checked); setLoader(true); setUpdateTable(moment.now()); }; @@ -693,7 +690,7 @@ function Access() { const getServiceDefType = () => { let serviceDefType = []; - serviceDefType = filter(serviceDefs, function (serviceDef) { + serviceDefType = filter(allServiceDefs, function (serviceDef) { return serviceDef.name !== "tag"; }); @@ -935,10 +932,8 @@ function Access() { <input type="checkbox" className="align-middle" - defaultChecked={checked} - onChange={() => { - toggleChange(); - }} + checked={checked} + onChange={toggleChange} data-id="serviceUsersExclude" data-cy="serviceUsersExclude" /> diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AuditLayout.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AuditLayout.jsx index a51b7ac2f..0537496f3 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AuditLayout.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AuditLayout.jsx @@ -21,12 +21,15 @@ import React, { Component } from "react"; import { Tab, Tabs } from "react-bootstrap"; import withRouter from "Hooks/withRouter"; import { Outlet } from "react-router-dom"; +import { fetchApi } from "Utils/fetchAPI"; class AuditLayout extends Component { constructor(props) { super(props); this.state = { - activeKey: this.activeTab() + activeKey: this.activeTab(), + services: null, + servicesAvailable: null }; } @@ -43,6 +46,32 @@ class AuditLayout extends Component { } } + componentDidMount() { + this.fetchServices(); + } + + fetchServices = async () => { + let servicesResp = []; + try { + const response = await fetchApi({ + url: "plugins/services" + }); + servicesResp = response?.data?.services || []; + } catch (error) { + console.error( + `Error occurred while fetching Services or CSRF headers! ${error}` + ); + } + + this.setState({ + services: servicesResp, + servicesAvailable: + servicesResp.length === 0 + ? "SERVICES_NOT_AVAILABLE" + : "SERVICES_AVAILABLE" + }); + }; + activeTab = () => { let activeTabVal; if (this.props?.location?.pathname) { @@ -85,7 +114,12 @@ class AuditLayout extends Component { <Tab eventKey="pluginStatus" title="Plugin Status" /> <Tab eventKey="userSync" title="User Sync" /> </Tabs> - <Outlet /> + <Outlet + context={{ + services: this.state.services, + servicesAvailable: this.state.servicesAvailable + }} + /> </> ); } diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/PluginStatusLogs.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/PluginStatusLogs.jsx index b1bcca656..ea0e550a7 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/PluginStatusLogs.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/PluginStatusLogs.jsx @@ -18,7 +18,7 @@ */ import React, { useState, useCallback, useRef, useEffect } from "react"; -import { useSearchParams } from "react-router-dom"; +import { useSearchParams, useOutletContext } from "react-router-dom"; import { Row, Col } from "react-bootstrap"; import XATableLayout from "Components/XATableLayout"; import { AuditFilterEntries } from "Components/CommonComponents"; @@ -40,16 +40,18 @@ import { import StructuredFilter from "../../components/structured-filter/react-typeahead/tokenizer"; import { fetchApi } from "Utils/fetchAPI"; import { isEmpty, isUndefined, map, sortBy, toUpper, filter } from "lodash"; +import { getServiceDef } from "../../utils/appState"; function Plugin_Status() { + const context = useOutletContext(); + const services = context.services; + const servicesAvailable = context.servicesAvailable; const [pluginStatusListingData, setPluginStatusLogs] = useState([]); const [loader, setLoader] = useState(true); const [pageCount, setPageCount] = React.useState(0); const [entries, setEntries] = useState([]); const [updateTable, setUpdateTable] = useState(moment.now()); const fetchIdRef = useRef(0); - const [serviceDefs, setServiceDefs] = useState([]); - const [services, setServices] = useState([]); const [contentLoader, setContentLoader] = useState(true); const [searchFilterParams, setSearchFilterParams] = useState([]); const [searchParams, setSearchParams] = useSearchParams(); @@ -58,13 +60,10 @@ function Plugin_Status() { ); const [resetPage, setResetpage] = useState({ page: null }); const isKMSRole = isKeyAdmin() || isKMSAuditor(); + const { allServiceDefs } = getServiceDef(); useEffect(() => { - if (isEmpty(serviceDefs)) { - fetchServiceDefs(), fetchServices(); - } - - if (!isEmpty(serviceDefs)) { + if (servicesAvailable !== null) { let { searchFilterParam, defaultSearchFilterParam, searchParam } = fetchSearchFilterParams( "pluginStatus", @@ -74,69 +73,21 @@ function Plugin_Status() { // Updating the states for search params, search filter, default search filter and localStorage setSearchParams(searchParam); - setSearchFilterParams(searchFilterParam); + if ( + JSON.stringify(searchFilterParams) !== JSON.stringify(searchFilterParam) + ) { + setSearchFilterParams(searchFilterParam); + } setDefaultSearchFilterParams(defaultSearchFilterParam); localStorage.setItem("pluginStatus", JSON.stringify(searchParam)); setContentLoader(false); } - }, [serviceDefs]); - - useEffect(() => { - let { searchFilterParam, defaultSearchFilterParam, searchParam } = - fetchSearchFilterParams( - "pluginStatus", - searchParams, - searchFilterOptions - ); - - // Updating the states for search params, search filter, default search filter and localStorage - setSearchParams(searchParam); - if ( - JSON.stringify(searchFilterParams) !== JSON.stringify(searchFilterParam) - ) { - setSearchFilterParams(searchFilterParam); - } - setDefaultSearchFilterParams(defaultSearchFilterParam); - localStorage.setItem("pluginStatus", JSON.stringify(searchParam)); - setContentLoader(false); - }, [searchParams]); - - const fetchServiceDefs = async () => { - setLoader(true); - let serviceDefsResp = []; - try { - serviceDefsResp = await fetchApi({ - url: "plugins/definitions" - }); - } catch (error) { - console.error( - `Error occurred while fetching Service Definitions or CSRF headers! ${error}` - ); - } - - setServiceDefs(serviceDefsResp.data.serviceDefs); - setLoader(false); - }; - - const fetchServices = async () => { - let servicesResp = []; - try { - servicesResp = await fetchApi({ - url: "plugins/services" - }); - } catch (error) { - console.error( - `Error occurred while fetching Services or CSRF headers! ${error}` - ); - } - setServices(servicesResp.data.services); - setContentLoader(false); - }; + }, [searchParams, servicesAvailable]); const fetchPluginStatusInfo = useCallback( async ({ pageSize, pageIndex, gotoPage }) => { setLoader(true); - if (!isEmpty(serviceDefs)) { + if (servicesAvailable !== null) { let logsResp = []; let logs = []; let totalCount = 0; @@ -166,7 +117,7 @@ function Plugin_Status() { } } }, - [updateTable, searchFilterParams] + [updateTable, searchFilterParams, servicesAvailable] ); const isDateDifferenceMoreThanHr = (date1, date2) => { @@ -535,7 +486,7 @@ function Plugin_Status() { const getServiceDefType = () => { let serviceDefType = []; - serviceDefType = map(serviceDefs, function (serviceDef) { + serviceDefType = map(allServiceDefs, function (serviceDef) { return { label: toUpper(serviceDef.displayName), value: serviceDef.name diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/PluginsLog.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/PluginsLog.jsx index 37ae4e1c8..55caa90bd 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/PluginsLog.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/PluginsLog.jsx @@ -18,7 +18,7 @@ */ import React, { useState, useCallback, useRef, useEffect } from "react"; -import { useSearchParams } from "react-router-dom"; +import { useSearchParams, useOutletContext } from "react-router-dom"; import { Badge, Row, Col } from "react-bootstrap"; import XATableLayout from "Components/XATableLayout"; import { AuditFilterEntries } from "Components/CommonComponents"; @@ -39,13 +39,15 @@ import { import { Loader } from "../../components/CommonComponents"; function Plugins() { + const context = useOutletContext(); + const services = context.services; const [pluginsListingData, setPluginsLogs] = useState([]); const [loader, setLoader] = useState(true); const [pageCount, setPageCount] = React.useState(0); const [entries, setEntries] = useState([]); const [updateTable, setUpdateTable] = useState(moment.now()); const fetchIdRef = useRef(0); - const [services, setServices] = useState([]); + //const [services, setServices] = useState([]); const [contentLoader, setContentLoader] = useState(true); const [searchFilterParams, setSearchFilterParams] = useState([]); const [searchParams, setSearchParams] = useSearchParams(); @@ -56,8 +58,6 @@ function Plugins() { const isKMSRole = isKeyAdmin() || isKMSAuditor(); useEffect(() => { - fetchServices(); - let { searchFilterParam, defaultSearchFilterParam, searchParam } = fetchSearchFilterParams("agent", searchParams, searchFilterOptions); @@ -73,7 +73,7 @@ function Plugins() { setContentLoader(false); }, [searchParams]); - const fetchServices = async () => { + /* const fetchServices = async () => { let servicesResp = []; try { servicesResp = await fetchApi({ @@ -87,7 +87,7 @@ function Plugins() { setServices(servicesResp.data.services); setLoader(false); - }; + }; */ const fetchPluginsInfo = useCallback( async ({ pageSize, pageIndex, sortBy, gotoPage }) => { @@ -265,7 +265,7 @@ function Plugins() { }); return sortBy(servicesName, "name")?.map((service) => ({ - label: service.displayName, + label: service.name, value: service.name })); }; diff --git a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinitions.jsx b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinitions.jsx index db2710bb9..aeb88161b 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinitions.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinitions.jsx @@ -72,7 +72,9 @@ class ServiceDefinitions extends Component { initialFetchResp = async () => { await this.fetchServices(); - await this.fetchZones(); + if (!this.state.isKMSRole) { + await this.fetchZones(); + } }; showExportModal = () => {