This is an automated email from the ASF dual-hosted git repository. mugdha pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/ranger.git
commit 506de58264e629544b59fec050cf65ef506d7200 Author: Mugdha Varadkar <[email protected]> AuthorDate: Wed Jun 4 18:20:27 2025 +0530 RANGER-4351 : Resource policies side bar takes more time even user is available on policymanager resource page --- .../src/views/AuditEvent/AuditLayout.jsx | 4 +- .../src/views/Encryption/KeyManager.jsx | 12 +- .../src/views/Reports/SearchPolicyTable.jsx | 4 +- .../src/views/Reports/UserAccessLayout.jsx | 6 +- .../src/views/SecurityZone/SecurityZoneForm.jsx | 11 +- .../src/views/SecurityZone/ZoneListing.jsx | 8 +- .../src/views/ServiceManager/ServiceDefinition.jsx | 352 +-------------------- .../views/ServiceManager/ServiceDefinitions.jsx | 21 +- .../views/ServiceManager/ServiceViewDetails.jsx | 218 ++++++++----- .../src/views/SideBar/ResourceTagContent.jsx | 4 +- .../react-webapp/src/views/SideBar/SideBar.jsx | 54 +--- .../react-webapp/src/views/SideBar/SideBarBody.jsx | 19 +- .../react-webapp/src/views/SideBar/TopNavBar.jsx | 33 +- 13 files changed, 214 insertions(+), 532 deletions(-) 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 097279428..5aa29b728 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 @@ -54,9 +54,9 @@ class AuditLayout extends Component { let servicesResp = []; try { const response = await fetchApi({ - url: "plugins/services" + url: "public/v2/api/service-headers" }); - servicesResp = response?.data?.services || []; + servicesResp = response?.data || []; } catch (error) { console.error( `Error occurred while fetching Services or CSRF headers! ${error}` diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyManager.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyManager.jsx index b361e0de9..a4332e9b4 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyManager.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyManager.jsx @@ -31,11 +31,11 @@ import { fetchApi } from "Utils/fetchAPI"; import dateFormat from "dateformat"; import moment from "moment-timezone"; import { find, sortBy, isUndefined, isEmpty, reject } from "lodash"; -import StructuredFilter from "../../components/structured-filter/react-typeahead/tokenizer"; +import StructuredFilter from "Components/structured-filter/react-typeahead/tokenizer"; import AsyncSelect from "react-select/async"; -import { isKeyAdmin, parseSearchFilter } from "../../utils/XAUtils"; -import { BlockUi } from "../../components/CommonComponents"; -import CustomBreadcrumb from "../CustomBreadcrumb"; +import { isKeyAdmin, parseSearchFilter } from "Utils/XAUtils"; +import { BlockUi } from "Components/CommonComponents"; +import CustomBreadcrumb from "Views/CustomBreadcrumb"; function init(props) { return { @@ -221,10 +221,10 @@ const KeyManager = () => { let serviceOptions = []; try { const servicesResp = await fetchApi({ - url: "plugins/services", + url: "public/v2/api/service-headers", params: allParams }); - servicesdata = servicesResp.data.services; + servicesdata = servicesResp.data || []; } catch (error) { let errorMsg = `Error occurred while fetching Services!`; if (error?.response?.data?.msgDesc) { 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..a09d516dc 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 @@ -32,8 +32,8 @@ import { isEmpty, find } 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 } from "Utils/XAUtils"; function SearchPolicyTable(props) { const [searchPoliciesData, setSearchPolicies] = useState([]); diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Reports/UserAccessLayout.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Reports/UserAccessLayout.jsx index 29a739184..372c91c56 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/Reports/UserAccessLayout.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/Reports/UserAccessLayout.jsx @@ -50,7 +50,6 @@ import { fetchApi } from "Utils/fetchAPI"; import { useQuery, selectInputCustomStyles } from "Components/CommonComponents"; import SearchPolicyTable from "./SearchPolicyTable"; import { isAuditor, isKeyAdmin, isKMSAuditor } from "Utils/XAUtils"; -import CustomBreadcrumb from "Views/CustomBreadcrumb"; import moment from "moment-timezone"; import { getServiceDef } from "Utils/appState"; @@ -94,10 +93,10 @@ function UserAccessLayout() { try { servicesResp = await fetchApi({ - url: "plugins/services" + url: "public/v2/api/service-headers" }); - resourceServices = filter(servicesResp.data.services, (service) => + resourceServices = filter(servicesResp.data, (service) => isKMSRole ? service.type == "kms" : service.type != "kms" ); } catch (error) { @@ -480,7 +479,6 @@ function UserAccessLayout() { <div className="clearfix"> <div className="header-wraper"> <h3 className="wrap-header bold">Reports</h3> - <CustomBreadcrumb /> </div> </div> <div className="wrap report-page"> diff --git a/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx index 854ef671f..9b52fa09a 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx @@ -30,6 +30,7 @@ import { isEmpty, pickBy, find, + filter, maxBy, sortBy, map, @@ -170,10 +171,10 @@ const SecurityZoneForm = () => { const fetchResourceServices = async () => { const serviceDefnsResp = await fetchApi({ - url: "plugins/services" + url: "public/v2/api/service-headers" }); - const filterServices = serviceDefnsResp.data.services.filter( + const filterServices = serviceDefnsResp.data.filter( (obj) => obj.type !== "tag" && obj.type !== "kms" ); @@ -595,12 +596,10 @@ const SecurityZoneForm = () => { params["serviceType"] = "tag" || ""; } const serviceResp = await fetchApi({ - url: "plugins/services", + url: "public/v2/api/service-headers", params: params }); - const filterServices = serviceResp.data.services.filter( - (obj) => obj.type == "tag" - ); + const filterServices = filter(serviceResp.data || [], ["type", "tag"]); return filterServices.map(({ name }) => ({ label: name, value: name diff --git a/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/ZoneListing.jsx b/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/ZoneListing.jsx index 3cf2af6fa..8d1592793 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/ZoneListing.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/ZoneListing.jsx @@ -27,8 +27,7 @@ import ZoneDisplay from "./ZoneDisplay"; import { Row, Col, Collapse } from "react-bootstrap"; import { sortBy } from "lodash"; import withRouter from "Hooks/withRouter"; -import { BlockUi, Loader } from "../../components/CommonComponents"; -import CustomBreadcrumb from "../CustomBreadcrumb"; +import { BlockUi, Loader } from "Components/CommonComponents"; class ZoneListing extends Component { constructor(props) { @@ -75,7 +74,7 @@ class ZoneListing extends Component { try { servicesResp = await fetchApi({ - url: "plugins/services", + url: "public/v2/api/service-headers", params: { page: 0, pageSize: 200, @@ -104,7 +103,7 @@ class ZoneListing extends Component { selectedZone: selectedZone, zones: zoneList, filterZone: zoneList, - services: servicesResp.data.services + services: servicesResp.data }); }; @@ -180,7 +179,6 @@ class ZoneListing extends Component { <React.Fragment> <div className="header-wraper"> <h3 className="wrap-header bold">Security Zone</h3> - <CustomBreadcrumb /> </div> {this.state.loader ? ( <Loader /> diff --git a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinition.jsx b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinition.jsx index fa401169c..cc60cd305 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinition.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinition.jsx @@ -19,12 +19,13 @@ import React, { Component } from "react"; import { Link } from "react-router-dom"; -import { Alert, Badge, Button, Col, Modal, Table } from "react-bootstrap"; -import { difference, isEmpty, keys, map, omit, pick } from "lodash"; +import { Button, Col, Modal, Table } from "react-bootstrap"; +import { isEmpty } from "lodash"; import { RangerPolicyType } from "Utils/XAEnums"; import ExportPolicy from "./ExportPolicy"; import ImportPolicy from "./ImportPolicy"; -import { getServiceDefIcon } from "../../utils/XAUtils"; +import { getServiceDefIcon } from "Utils/XAUtils"; +import { ServiceViewDetails } from "Views/ServiceManager/ServiceViewDetails"; class ServiceDefinition extends Component { constructor(props) { @@ -79,233 +80,6 @@ class ServiceDefinition extends Component { this.props.deleteService(id); }; - getServiceConfigs = (serviceDef, serviceConfigs) => { - let tableRow = []; - let configs = {}; - let customConfigs = {}; - - let serviceDefConfigs = serviceDef?.configs?.filter( - (config) => config.name !== "ranger.plugin.audit.filters" - ); - - serviceConfigs = omit(serviceConfigs, "ranger.plugin.audit.filters"); - - let serviceConfigsKey = keys(serviceConfigs); - let serviceDefConfigsKey = map(serviceDefConfigs, "name"); - let customConfigsKey = difference(serviceConfigsKey, serviceDefConfigsKey); - - serviceDefConfigs?.map( - (config) => - (configs[config.label !== undefined ? config.label : config.name] = - serviceConfigs[config.name]) - ); - - Object.entries(configs).map(([key, value]) => - tableRow.push( - <tr key={key}> - <td>{key}</td> - <td>{value ? value : "--"}</td> - </tr> - ) - ); - - customConfigsKey.map( - (config) => (customConfigs[config] = serviceConfigs[config]) - ); - - tableRow.push( - <tr key="custom-configs-title"> - <td colSpan="2"> - <b>Add New Configurations :</b> - </td> - </tr> - ); - - if (isEmpty(customConfigs)) { - tableRow.push( - <tr key="custom-configs-empty"> - <td>--</td> - <td>--</td> - </tr> - ); - } - - Object.entries(customConfigs).map(([key, value]) => - tableRow.push( - <tr key={key}> - <td>{key}</td> - <td>{value ? value : "--"}</td> - </tr> - ) - ); - - return tableRow; - }; - - getFilterResources = (resources) => { - let keyname = Object.keys(resources); - return keyname.map((key, index) => { - let val = resources[key].values; - return ( - <div key={index} className="clearfix mb-2"> - <span className="float-start"> - <b>{key}: </b> - {val.join()} - </span> - {resources[key].isExcludes !== undefined ? ( - <h6 className="d-inline"> - {resources[key].isExcludes ? ( - <span className="badge bg-dark float-end">Exclude</span> - ) : ( - <span className="badge bg-dark float-end">Include</span> - )} - </h6> - ) : ( - "" - )} - {resources[key].isRecursive !== undefined ? ( - <h6 className="d-inline"> - {resources[key].isRecursive ? ( - <span className="badge bg-dark float-end">Recursive</span> - ) : ( - <span className="badge bg-dark float-end">Non Recursive</span> - )} - </h6> - ) : ( - "" - )} - </div> - ); - }); - }; - - getAuditFilters = (serviceConfigs) => { - let tableRow = []; - let auditFilters = pick(serviceConfigs, "ranger.plugin.audit.filters"); - - if (isEmpty(auditFilters)) { - return tableRow; - } - - if (isEmpty(auditFilters["ranger.plugin.audit.filters"])) { - return tableRow; - } - - try { - auditFilters = JSON.parse( - auditFilters["ranger.plugin.audit.filters"].replace(/'/g, '"') - ); - } catch (error) { - tableRow.push( - <tr key="error-service-audit-filter"> - <td className="text-center" colSpan="8"> - <Alert variant="danger"> - Error occured while parsing service audit filter! - </Alert> - </td> - </tr> - ); - return tableRow; - } - - auditFilters.map((a, index) => - tableRow.push( - <tr key={index}> - <td className="text-center"> - {a.isAudited == true ? ( - <h6> - <Badge bg="info">Yes</Badge> - </h6> - ) : ( - <h6> - <Badge bg="info">No</Badge> - </h6> - )} - </td> - <td className="text-center"> - {a.accessResult !== undefined ? ( - <h6> - <Badge bg="info">{a.accessResult}</Badge> - </h6> - ) : ( - "--" - )} - </td> - <td className="text-center"> - {a.resources !== undefined ? ( - <div className="resource-grp"> - {this.getFilterResources(a.resources)} - </div> - ) : ( - "--" - )} - </td> - <td className="text-center"> - {a.actions !== undefined - ? a.actions.map((action) => ( - <h6 key={action}> - <Badge bg="info">{action}</Badge> - </h6> - )) - : "--"} - </td> - <td className="text-center"> - {a.accessTypes !== undefined && a.accessTypes.length > 0 - ? a.accessTypes.map((accessType) => ( - <h6 key={accessType}> - <Badge bg="info">{accessType}</Badge> - </h6> - )) - : "--"} - </td> - <td className="text-center"> - {a.users !== undefined - ? a.users.map((user) => ( - <h6 key={user}> - <Badge - bg="info" - className="m-1 text-truncate more-less-width" - title={user} - key={user} - > - {user} - </Badge> - </h6> - )) - : "--"} - </td> - <td className="text-center"> - {a.groups !== undefined - ? a.groups.map((group) => ( - <h6 key={group}> - <Badge - bg="info" - className="m-1 text-truncate more-less-width" - title={group} - key={group} - > - {group} - </Badge> - </h6> - )) - : "--"} - </td> - <td className="text-center"> - {a.roles !== undefined - ? a.roles.map((role) => ( - <h6 key={role}> - <Badge bg="info">{role}</Badge> - </h6> - )) - : "--"} - </td> - </tr> - ) - ); - - return tableRow; - }; - render() { const { serviceDef, showImportModal, showExportModal } = this.state; return ( @@ -425,115 +199,15 @@ class ServiceDefinition extends Component { <i className="fa-fw fa fa-eye"></i> </Button> )} - <Modal - show={this.state.showView === s.id} - onHide={this.hideViewModal} - size="xl" - > - <Modal.Header closeButton> - <Modal.Title>Service Details</Modal.Title> - </Modal.Header> - <Modal.Body> - <p className="form-header">Service Details :</p> - <div className="overflow-auto"> - <Table bordered size="sm"> - <tbody className="service-details"> - <tr> - <td className="text-nowrap"> - Service Name - </td> - <td className="text-break">{s.name}</td> - </tr> - <tr> - <td className="text-nowrap"> - Display Name - </td> - <td className="text-break"> - {s.displayName} - </td> - </tr> - <tr> - <td className="text-nowrap">Description</td> - <td className="text-break"> - {s.description ? s.description : "--"} - </td> - </tr> - <tr> - <td className="text-nowrap"> - Active Status - </td> - <td> - <h6> - <Badge bg="info"> - {s.isEnabled ? `Enabled` : `Disabled`} - </Badge> - </h6> - </td> - </tr> - <tr> - <td className="text-nowrap">Tag Service</td> - <td className="text-break"> - {s.tagService ? ( - <h6> - <Badge bg="info"> - {s.tagService} - </Badge> - </h6> - ) : ( - "--" - )} - </td> - </tr> - </tbody> - </Table> - </div> - <p className="form-header">Config Properties :</p> - <div className="table-responsive"> - <Table bordered size="sm"> - <tbody className="service-config"> - {s?.configs && - this.getServiceConfigs( - this.state.serviceDef, - s.configs - )} - </tbody> - </Table> - </div> - <p className="form-header">Audit Filter :</p> - <div className="table-responsive"> - <Table - bordered - size="sm" - className="table-audit-filter-ready-only" - > - <thead> - <tr> - <th>Is Audited</th> - <th>Access Result</th> - <th>Resources</th> - <th>Operations</th> - <th>Permissions</th> - <th>Users</th> - <th>Groups</th> - <th>Roles</th> - </tr> - </thead> - <tbody className="service-audit"> - {this.getAuditFilters(s.configs)} - </tbody> - </Table> - </div> - </Modal.Body> - <Modal.Footer> - <Button - variant="primary" - size="sm" - onClick={this.hideViewModal} - > - OK - </Button> - </Modal.Footer> - </Modal> + + <ServiceViewDetails + serviceDefData={serviceDef} + serviceData={s} + showViewModal={this.state.showView === s.id} + hideViewModal={this.hideViewModal} + dashboardServiceView={true} + /> + {this.props.isAdminRole && ( <React.Fragment> <Link 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 53d58deb7..49cf32edb 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 @@ -28,15 +28,15 @@ import { isKeyAdmin, isAuditor, isKMSAuditor, - isUser + isUser, + serverError } from "Utils/XAUtils"; import withRouter from "Hooks/withRouter"; import ServiceDefinition from "./ServiceDefinition"; import ExportPolicy from "./ExportPolicy"; import ImportPolicy from "./ImportPolicy"; -import { serverError } from "../../utils/XAUtils"; -import { BlockUi, Loader } from "../../components/CommonComponents"; -import { getServiceDef } from "../../utils/appState"; +import { BlockUi, Loader } from "Components/CommonComponents"; +import { getServiceDef } from "Utils/appState"; import noServiceImage from "Images/no-service.svg"; class ServiceDefinitions extends Component { @@ -136,19 +136,16 @@ class ServiceDefinitions extends Component { try { servicesResp = await fetchApi({ - url: "plugins/services" + url: "public/v2/api/service-headers" }); if (this.state.isTagView) { - tagServices = filter(servicesResp.data.services, ["type", "tag"]); + tagServices = filter(servicesResp.data, ["type", "tag"]); } else { if (this.state.isKMSRole) { - resourceServices = filter( - servicesResp.data.services, - (service) => service.type == "kms" - ); + resourceServices = filter(servicesResp.data, ["type", "kms"]); } else { resourceServices = filter( - servicesResp.data.services, + servicesResp.data, (service) => service.type !== "tag" && service.type !== "kms" ); } @@ -160,7 +157,7 @@ class ServiceDefinitions extends Component { } this.setState({ - allServices: servicesResp.data.services, + allServices: servicesResp.data, services: this.state.isTagView ? tagServices : resourceServices, filterServices: this.state.isTagView ? tagServices : resourceServices, loader: false 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 9ee6b2f38..7fd84c8b9 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 @@ -17,12 +17,49 @@ * under the License. */ -import React from "react"; -import { Alert, Row, Col, Table, Badge } from "react-bootstrap"; +import React, { useEffect, useState } from "react"; +import { fetchApi } from "Utils/fetchAPI"; +import { Alert, Row, Col, Table, Badge, Modal, Button } from "react-bootstrap"; import { difference, isEmpty, keys, map, omit, pick } from "lodash"; +import { ModalLoader } from "Components/CommonComponents"; export const ServiceViewDetails = (props) => { - let { serviceData, serviceDefData } = props; + const { serviceData: service, serviceDefData } = props; + const [serviceData, setServiceData] = useState({}); + const [loader, setLoader] = useState(true); + + useEffect(() => { + if (props.showViewModal) { + if (props.dashboardServiceView) { + fetchService(); + } else { + setService(); + } + } + }, [props.showViewModal]); + + const fetchService = async () => { + let getServiceData = {}; + + try { + getServiceData = await fetchApi({ + url: `plugins/services/${service.id}` + }); + } catch (error) { + console.error( + `Error occurred while fetching service with id ${serviceData.id} - ! ${error}` + ); + } + + setServiceData(getServiceData?.data); + setLoader(false); + }; + + const setService = () => { + setServiceData(service); + setLoader(false); + }; + const getServiceConfigs = (serviceDef, serviceConfigs) => { let tableRow = []; let configs = {}; @@ -85,8 +122,10 @@ export const ServiceViewDetails = (props) => { return tableRow; }; + const getFilterResources = (resources) => { let keyname = Object.keys(resources); + return keyname.map((key, index) => { let val = resources[key].values; return ( @@ -121,6 +160,7 @@ export const ServiceViewDetails = (props) => { ); }); }; + const getAuditFilters = (serviceConfigs) => { let tableRow = []; let auditFilters = pick(serviceConfigs, "ranger.plugin.audit.filters"); @@ -247,80 +287,106 @@ export const ServiceViewDetails = (props) => { return tableRow; }; + return ( - <Row> - <Col sm={12}> - <p className="form-header">Service Details :</p> - <div className="overflow-auto"> - <Table bordered size="sm"> - <tbody className="service-details"> - <tr> - <td className="text-nowrap">Service Name</td> - <td className="text-break">{serviceData.name}</td> - </tr> - <tr> - <td className="text-nowrap">Display Name</td> - <td className="text-break">{serviceData.displayName}</td> - </tr> - <tr> - <td className="text-nowrap">Description</td> - <td className="text-break"> - {serviceData.description ? serviceData.description : "--"} - </td> - </tr> - <tr> - <td>Active Status</td> - <td> - <h6> - <Badge bg="info"> - {serviceData.isEnabled ? `Enabled` : `Disabled`} - </Badge> - </h6> - </td> - </tr> - <tr> - <td className="text-nowrap">Tag Service</td> - <td className="text-break"> - {serviceData.tagService ? ( - <h6> - <Badge bg="info">{serviceData.tagService}</Badge> - </h6> - ) : ( - "--" - )} - </td> - </tr> - </tbody> - </Table> - </div> - <p className="form-header">Config Properties :</p> - <div className="table-responsive"> - <Table bordered size="sm"> - <tbody className="service-config"> - {getServiceConfigs(serviceDefData, serviceData.configs)} - </tbody> - </Table> - </div> - <p className="form-header">Audit Filter :</p> - <div className="table-responsive"> - <Table bordered size="sm" className="table-audit-filter-ready-only"> - <thead> - <tr> - <th>Is Audited</th> - <th>Access Result</th> - <th>Resources</th> - <th>Operations</th> - <th>Permissions</th> - <th>Users</th> - <th>Groups</th> - <th>Roles</th> - </tr> - </thead> - <tbody>{getAuditFilters(serviceData.configs)}</tbody> - </Table> - </div> - </Col> - </Row> + <Modal show={props.showViewModal} onHide={props.hideViewModal} size="xl"> + <Modal.Header closeButton> + <Modal.Title>Service Details</Modal.Title> + </Modal.Header> + <Modal.Body> + {loader ? ( + <ModalLoader /> + ) : ( + <Row> + <Col sm={12}> + <p className="form-header">Service Details :</p> + <div className="overflow-auto"> + <Table bordered size="sm"> + <tbody className="service-details"> + <tr> + <td className="text-nowrap">Service Name</td> + <td className="text-break">{serviceData.name}</td> + </tr> + <tr> + <td className="text-nowrap">Display Name</td> + <td className="text-break">{serviceData.displayName}</td> + </tr> + <tr> + <td className="text-nowrap">Description</td> + <td className="text-break"> + {serviceData.description + ? serviceData.description + : "--"} + </td> + </tr> + <tr> + <td>Active Status</td> + <td> + <h6> + <Badge bg="info"> + {serviceData.isEnabled ? `Enabled` : `Disabled`} + </Badge> + </h6> + </td> + </tr> + <tr> + <td className="text-nowrap">Tag Service</td> + <td className="text-break"> + {serviceData.tagService ? ( + <h6> + <Badge bg="info">{serviceData.tagService}</Badge> + </h6> + ) : ( + "--" + )} + </td> + </tr> + </tbody> + </Table> + </div> + <p className="form-header">Config Properties :</p> + <div className="table-responsive"> + <Table bordered size="sm"> + <tbody className="service-config"> + {serviceData?.configs && + getServiceConfigs(serviceDefData, serviceData.configs)} + </tbody> + </Table> + </div> + <p className="form-header">Audit Filter :</p> + <div className="table-responsive"> + <Table + bordered + size="sm" + className="table-audit-filter-ready-only" + > + <thead> + <tr> + <th>Is Audited</th> + <th>Access Result</th> + <th>Resources</th> + <th>Operations</th> + <th>Permissions</th> + <th>Users</th> + <th>Groups</th> + <th>Roles</th> + </tr> + </thead> + <tbody className="service-audit"> + {getAuditFilters(serviceData.configs)} + </tbody> + </Table> + </div> + </Col> + </Row> + )} + </Modal.Body> + <Modal.Footer> + <Button variant="primary" size="sm" onClick={props.hideViewModal}> + OK + </Button> + </Modal.Footer> + </Modal> ); }; export default ServiceViewDetails; diff --git a/security-admin/src/main/webapp/react-webapp/src/views/SideBar/ResourceTagContent.jsx b/security-admin/src/main/webapp/react-webapp/src/views/SideBar/ResourceTagContent.jsx index b3ac984a1..6911f17ed 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/SideBar/ResourceTagContent.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/SideBar/ResourceTagContent.jsx @@ -17,10 +17,10 @@ * under the License. */ -import React, { useEffect } from "react"; +import React from "react"; import { NavLink } from "react-router-dom"; import { sortBy, capitalize, groupBy, isEmpty } from "lodash"; -import { RangerPolicyType } from "../../utils/XAEnums"; +import { RangerPolicyType } from "Utils/XAEnums"; import Spinner from "react-bootstrap/Spinner"; export const ResourceTagContent = (props) => { 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 24dcefd8b..192395515 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 @@ -17,13 +17,8 @@ * under the License. */ -import React, { useReducer, useEffect, useCallback, useState } from "react"; -import { - NavLink, - matchRoutes, - useLocation, - useNavigate -} from "react-router-dom"; +import React, { useReducer, useEffect, useState } from "react"; +import { NavLink, matchRoutes, useLocation } from "react-router-dom"; import Button from "react-bootstrap/Button"; import rangerIcon from "Images/sidebar/ranger.svg"; import keyIcon from "Images/sidebar/key.svg"; @@ -34,33 +29,19 @@ import zoneIcon from "Images/sidebar/zone.svg"; import settingsIcon from "Images/sidebar/settings.svg"; import accountIcon from "Images/sidebar/account.svg"; import gdsIcon from "Images/sidebar/governed-data.svg"; -import Collapse from "react-bootstrap/Collapse"; import { fetchApi } from "Utils/fetchAPI"; -import { getUserProfile, setUserProfile } from "Utils/appState"; +import { getUserProfile, getServiceDef } from "Utils/appState"; import { hasAccessToTab, isAuditor, isKeyAdmin, isSystemAdmin, - getBaseUrl, - isKMSAuditor + isKMSAuditor, + getLandingPageURl } from "Utils/XAUtils"; -import Select from "react-select"; -import { - cloneDeep, - filter, - isEmpty, - map, - sortBy, - uniq, - upperCase -} from "lodash"; -import { toast } from "react-toastify"; -import ResourceTagContent from "./ResourceTagContent"; -import { PathAssociateWithModule } from "../../utils/XAEnums"; -import { getServiceDef } from "../../utils/appState"; +import { cloneDeep, filter, sortBy } from "lodash"; +import { PathAssociateWithModule } from "Utils/XAEnums"; import { SideBarBody } from "./SideBarBody"; -import { getLandingPageURl } from "../../utils/XAUtils"; function reducer(state, action) { switch (action.type) { @@ -95,8 +76,9 @@ function reducer(state, action) { } export const SideBar = () => { - const { allServiceDefs, serviceDefs, tagServiceDefs } = - cloneDeep(getServiceDef()); + const { allServiceDefs, serviceDefs, tagServiceDefs } = cloneDeep( + getServiceDef() + ); const isKMSRole = isKeyAdmin() || isKMSAuditor(); const [keyState, dispatch] = useReducer(reducer, { loader: false, @@ -134,7 +116,6 @@ export const SideBar = () => { const [isActive, setActive] = useState(null); const [isDrawerOpen, setDrawer] = useState(false); const [accountDrawer, setAccountDrawer] = useState(false); - const [isTagView, setTagView] = useState(false); const handleClickOutside = (e) => { if ( @@ -173,24 +154,21 @@ export const SideBar = () => { try { servicesResp = await fetchApi({ - url: "plugins/services" + url: "public/v2/api/service-headers" }); - tagServices = filter(servicesResp.data.services, ["type", "tag"]); + tagServices = filter(servicesResp.data, ["type", "tag"]); if (isKMSRole) { - resourceServices = filter( - servicesResp.data.services, - (service) => service.type == "kms" - ); + resourceServices = filter(servicesResp.data, ["type", "kms"]); } else { resourceServices = filter( - servicesResp.data.services, + servicesResp.data, (service) => service.type !== "tag" && service.type !== "kms" ); } dispatch({ type: "SERVICES_DATA", - allServiceData: servicesResp.data.services, + allServiceData: servicesResp.data, serviceData: resourceServices, tagServiceData: tagServices }); @@ -271,7 +249,6 @@ export const SideBar = () => { setActive("resourcesCollapse"); setAccountDrawer(false); setDrawer(true); - setTagView(false); fetchServicesData(); }} > @@ -296,7 +273,6 @@ export const SideBar = () => { setActive("tagCollapse"); setAccountDrawer(false); setDrawer(true); - setTagView(true); fetchServicesData(); }} > 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 e8c292f0f..1d42160b3 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 @@ -131,7 +131,6 @@ export const SideBarBody = (props) => { if (value.length !== 0) { let selectedServiceDefs = []; let selectedService = []; - let filterSelectedService = []; value.map((serviceDef) => { allServicesDefData?.filter((servicedefs) => { @@ -149,18 +148,6 @@ export const SideBarBody = (props) => { }); }); - if (isKMSRole) { - filterSelectedService = filter( - selectedService, - (service) => service.type == "kms" - ); - } else { - filterSelectedService = filter( - selectedService, - (service) => service.type !== "tag" && service.type !== "kms" - ); - } - sideBarDispatch({ type: "SERVICEDEF_DATA", allserviceDefData: filter( @@ -181,10 +168,7 @@ export const SideBarBody = (props) => { if (value.length == 0) { let filterSelectedService = []; if (isKMSRole) { - filterSelectedService = filter( - allServicesData, - (service) => service.type == "kms" - ); + filterSelectedService = filter(allServicesData, ["type", "kms"]); } else { filterSelectedService = filter( allServicesData, @@ -689,6 +673,7 @@ export const SideBarBody = (props) => { <li className="list-group-item"> <a href={apiUrl} + rel="noreferrer" target="_blank" onClick={() => { props.closeCollapse(); diff --git a/security-admin/src/main/webapp/react-webapp/src/views/SideBar/TopNavBar.jsx b/security-admin/src/main/webapp/react-webapp/src/views/SideBar/TopNavBar.jsx index 00fe77c24..2e54b01ef 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/SideBar/TopNavBar.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/SideBar/TopNavBar.jsx @@ -22,7 +22,7 @@ import { useNavigate } from "react-router-dom"; import { Button, Dropdown, DropdownButton, Modal } from "react-bootstrap"; import { isEmpty, upperCase } from "lodash"; import Select from "react-select"; -import ServiceViewDetails from "../ServiceManager/ServiceViewDetails"; +import ServiceViewDetails from "Views/ServiceManager/ServiceViewDetails"; import { fetchApi } from "Utils/fetchAPI"; import moment from "moment-timezone"; import { toast } from "react-toastify"; @@ -32,7 +32,7 @@ import { isKMSAuditor, isUser, isSystemAdmin -} from "../../utils/XAUtils"; +} from "Utils/XAUtils"; function reducer(state, action) { switch (action.type) { @@ -301,26 +301,15 @@ export const TopNavBar = (props) => { </DropdownButton> )} </div> - <Modal - show={showView === serviceData?.id} - onHide={hideViewModal} - size="xl" - > - <Modal.Header closeButton> - <Modal.Title>Service Details</Modal.Title> - </Modal.Header> - <Modal.Body> - <ServiceViewDetails - serviceDefData={serviceDefData} - serviceData={serviceData} - /> - </Modal.Body> - <Modal.Footer> - <Button variant="primary" size="sm" onClick={hideViewModal}> - OK - </Button> - </Modal.Footer> - </Modal> + + <ServiceViewDetails + serviceDefData={serviceDefData} + serviceData={serviceData} + showViewModal={showView === serviceData?.id} + hideViewModal={hideViewModal} + dashboardServiceView={false} + /> + <Modal show={showDelete} onHide={hideDeleteModal}> <Modal.Header closeButton> <span className="text-word-break">
