RANGER-4492: Optimize plugins/definitions API Call for Initial Load in Multiple Ranger-React Modules
Signed-off-by: Dineshkumar Yadav <dineshkumar.yadav@outlook.com>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AccessLogDetail.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AccessLogDetail.jsx
index dc75efe..13b7758 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AccessLogDetail.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AccessLogDetail.jsx
@@ -25,34 +25,18 @@
import { isEmpty } from "lodash";
import { Loader } from "Components/CommonComponents";
import { useParams } from "react-router-dom";
+import { getServiceDef } from "../../utils/appState";
-function AccessLogDetail(props) {
+function AccessLogDetail() {
const params = useParams();
const [access, setAccess] = useState([]);
- const [serviceDefs, setServiceDefs] = useState([]);
const [loader, setLoader] = useState(true);
+ const { allServiceDefs } = getServiceDef();
useEffect(() => {
- fetchServiceDefs();
fetchAcessLogs();
}, []);
- 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);
- setLoader(false);
- };
-
const fetchAcessLogs = async () => {
let accessResp = {};
let accessData = {};
@@ -99,7 +83,7 @@
<div className="wrap">
<PolicyViewDetails
paramsData={access}
- serviceDef={serviceDefs?.find((servicedef) => {
+ serviceDef={allServiceDefs?.find((servicedef) => {
return servicedef.name == access.serviceType;
})}
policyView={false}
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx
index 5f7fc8a..aa17887 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx
@@ -30,10 +30,11 @@
scrollToError
} from "../../components/CommonComponents";
import { commonBreadcrumb, serverError } from "../../utils/XAUtils";
-import { isEmpty, values } from "lodash";
+import { find, isEmpty, values } from "lodash";
import withRouter from "Hooks/withRouter";
import { useLocation, useNavigate } from "react-router-dom";
import usePrompt from "Hooks/usePrompt";
+import { getServiceDef } from "../../utils/appState";
const initialState = {
service: {},
@@ -74,6 +75,7 @@
const [preventUnBlock, setPreventUnblock] = useState(false);
const [blockUI, setBlockUI] = useState(false);
const toastId = useRef(null);
+ const { allServiceDefs } = getServiceDef();
useEffect(() => {
fetchInitialData();
@@ -107,7 +109,6 @@
}
}
- let apiError = "Error occurred while creating Key";
serviceJson.name = values.name;
serviceJson.cipher = values.cipher;
serviceJson.length = values.length;
@@ -149,7 +150,6 @@
};
const fetchKmsServices = async () => {
let serviceResp;
- let kmsDefinition;
dispatch({
type: "SET_LOADER",
loader: true
@@ -161,20 +161,11 @@
} catch (error) {
console.error(`Error occurred while fetching Services! ${error}`);
}
- try {
- kmsDefinition = await fetchApi({
- url: `plugins/definitions/name/${
- serviceResp.data && serviceResp.data.type
- }`
- });
- } catch (error) {
- console.error(`Error occurred while fetching Definitions! ${error}`);
- }
dispatch({
type: "SET_DATA",
service: serviceResp,
- definition: kmsDefinition,
+ definition: find(allServiceDefs, { name: "kms" }),
loader: false
});
};
@@ -194,7 +185,7 @@
};
const keyCreateBreadcrumb = () => {
let serviceDetails = {};
- serviceDetails["serviceDefId"] = definition.data && definition.data.id;
+ serviceDetails["serviceDefId"] = definition && definition?.id;
serviceDetails["serviceId"] = service.data && service.data.id;
serviceDetails["serviceName"] = props.params.serviceName;
return commonBreadcrumb(
@@ -226,7 +217,6 @@
handleSubmit,
form,
submitting,
- pristine,
invalid,
errors,
dirty,
@@ -398,7 +388,6 @@
<Col sm={{ span: 9, offset: 3 }}>
<Button
variant="primary"
- // type="submit"
onClick={() => {
if (invalid) {
let selector =
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 19629d6..fda70d9 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
@@ -52,6 +52,7 @@
import { isAuditor, isKeyAdmin, isKMSAuditor } from "../../utils/XAUtils";
import CustomBreadcrumb from "../CustomBreadcrumb";
import moment from "moment-timezone";
+import { getServiceDef } from "../../utils/appState";
function UserAccessLayout() {
const isKMSRole = isKeyAdmin() || isKMSAuditor();
@@ -68,6 +69,7 @@
const navigate = useNavigate();
const location = useLocation();
const searchParams = useQuery();
+ const { allServiceDefs } = getServiceDef();
const showMoreLess = () => {
setShow(!show);
@@ -92,21 +94,10 @@
};
const fetchData = async () => {
- let serviceDefsResp;
let servicesResp;
let resourceServices;
try {
- serviceDefsResp = await fetchApi({
- url: `plugins/definitions`
- });
- } catch (error) {
- console.error(
- `Error occurred while fetching Service Definitions ! ${error}`
- );
- }
-
- try {
servicesResp = await fetchApi({
url: "plugins/services"
});
@@ -120,10 +111,8 @@
);
}
- let resourceServiceDefs = filter(
- serviceDefsResp?.data?.serviceDefs,
- (serviceDef) =>
- isKMSRole ? serviceDef.name == "kms" : serviceDef.name != "kms"
+ let resourceServiceDefs = filter(allServiceDefs, (serviceDef) =>
+ isKMSRole ? serviceDef.name == "kms" : serviceDef.name != "kms"
);
let filterResourceServiceDefs = resourceServiceDefs;
@@ -138,12 +127,9 @@
});
}
- let serviceDefsList = map(
- serviceDefsResp?.data?.serviceDefs,
- function (serviceDef) {
- return { value: serviceDef.name, label: serviceDef.name };
- }
- );
+ let serviceDefsList = map(allServiceDefs, function (serviceDef) {
+ return { value: serviceDef.name, label: serviceDef.name };
+ });
setServiceDefs(resourceServiceDefs);
setServices(resourceServices);
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 7eb6754..90a257a 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
@@ -48,6 +48,7 @@
selectCustomStyles
} from "../../components/CommonComponents";
import usePrompt from "Hooks/usePrompt";
+import { getServiceDef } from "../../utils/appState";
const noneOptions = {
label: "None",
@@ -64,7 +65,7 @@
const navigate = useNavigate();
const params = useParams();
const toastId = useRef(null);
- const [serviceDefs, setServiceDefs] = useState([]);
+ const { allServiceDefs } = getServiceDef();
const [services, setServices] = useState([]);
const [zone, setZone] = useState({});
const [resourceServiceDef, setResourceServiceDef] = useState({});
@@ -161,25 +162,10 @@
};
const fetchInitalData = async () => {
- await fetchServiceDefs();
await fetchResourceServices();
await fetchZones();
};
- const fetchServiceDefs = async () => {
- let servicetypeResp;
-
- try {
- servicetypeResp = await fetchApi({
- url: `plugins/definitions`
- });
- } catch (error) {
- console.error(`Error occurred while fetching Services! ${error}`);
- }
-
- setServiceDefs(servicetypeResp.data.serviceDefs);
- };
-
const fetchResourceServices = async () => {
const serviceDefnsResp = await fetchApi({
url: "plugins/services"
@@ -232,7 +218,7 @@
};
const renderResourcesModal = (input, serviceType) => {
- let filterServiceDef = find(serviceDefs, ["name", serviceType]);
+ let filterServiceDef = find(allServiceDefs, ["name", serviceType]);
let filterService = find(services, ["type", serviceType]);
for (const obj of filterServiceDef.resources) {
@@ -256,7 +242,7 @@
const editResourcesModal = (idx, input, serviceType) => {
let editData = input.input.value[idx];
- let filterServiceDef = find(serviceDefs, ["name", serviceType]);
+ let filterServiceDef = find(allServiceDefs, ["name", serviceType]);
let filterService = find(services, ["type", serviceType]);
for (const obj of filterServiceDef.resources) {
@@ -479,7 +465,7 @@
let serviceType = find(services, ["name", name]);
tableValues["serviceType"] = serviceType.type;
- let filterServiceDef = find(serviceDefs, ["name", serviceType.type]);
+ let filterServiceDef = find(allServiceDefs, ["name", serviceType.type]);
for (const obj of filterServiceDef.resources) {
obj.recursiveSupported = false;
@@ -656,9 +642,9 @@
const showResources = (value, serviceType) => {
let data = {};
- let filterdef = serviceDefs.find((obj) => obj.name == serviceType);
+ let filterServiceDef = find(allServiceDefs, ["name", serviceType]);
- for (const obj of filterdef.resources) {
+ for (const obj of filterServiceDef.resources) {
obj.recursiveSupported = false;
obj.excludesSupported = false;
if (obj.level !== 10) {
@@ -666,13 +652,15 @@
}
}
- const grpResources = groupBy(filterdef.resources || [], "level");
+ const grpResources = groupBy(filterServiceDef.resources || [], "level");
+
let grpResourcesKeys = [];
for (const resourceKey in grpResources) {
grpResourcesKeys.push(+resourceKey);
}
grpResourcesKeys = grpResourcesKeys.sort();
data.resources = {};
+
for (const level of grpResourcesKeys) {
if (
value[`resourceName-${level}`] &&
@@ -703,6 +691,7 @@
</p>
));
};
+
const onFocusUserSelect = () => {
setUserLoading(true);
fetchUsersData().then((opts) => {
@@ -718,6 +707,7 @@
setGroupLoading(false);
});
};
+
const onFocusRoleSelect = () => {
setRoleLoading(true);
fetchRolesData().then((opts) => {
@@ -725,6 +715,7 @@
setRoleLoading(false);
});
};
+
const onFocusTagServiceSelect = () => {
setTagServiceLoading(true);
fetchTagServices().then((opts) => {
@@ -732,6 +723,7 @@
setTagServiceLoading(false);
});
};
+
return (
<React.Fragment>
<div className="clearfix">
@@ -1014,6 +1006,7 @@
</Row>
)}
/>
+
<Field
name="auditUserGroups"
render={({ input, meta }) => (
@@ -1141,6 +1134,7 @@
</Row>
)}
/>
+
<Field
name="resourceServices"
render={({ input }) => (
@@ -1176,6 +1170,7 @@
</Row>
)}
/>
+
<Table striped bordered>
<thead>
<tr>
@@ -1309,6 +1304,7 @@
</FieldArray>
</tbody>
</Table>
+
<Row className="form-actions">
<Col sm={{ span: 9, offset: 3 }}>
<Button
