RANGER-4492: Optimize plugins/definitions API Call for Initial Load i…

…n Multiple Ranger-React Modules Signed-off-by: Dineshkumar Yadav <[email protected]>
apache · Jan 4, 2024 · f3e1564 · f3e1564
1 parent 271986e
commit f3e1564
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 79 deletions.
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
@@ -25,34 +25,18 @@ import { toast } from "react-toastify";
 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 @@ function AccessLogDetail(props) {
               <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
@@ -30,10 +30,11 @@ import {
   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 @@ function KeyCreate(props) {
   const [preventUnBlock, setPreventUnblock] = useState(false);
   const [blockUI, setBlockUI] = useState(false);
   const toastId = useRef(null);
+  const { allServiceDefs } = getServiceDef();
 
   useEffect(() => {
     fetchInitialData();
@@ -107,7 +109,6 @@ function KeyCreate(props) {
         }
     }
 
-    let apiError = "Error occurred while creating Key";
     serviceJson.name = values.name;
     serviceJson.cipher = values.cipher;
     serviceJson.length = values.length;
@@ -149,7 +150,6 @@ function KeyCreate(props) {
   };
   const fetchKmsServices = async () => {
     let serviceResp;
-    let kmsDefinition;
     dispatch({
       type: "SET_LOADER",
       loader: true
@@ -161,20 +161,11 @@ function KeyCreate(props) {
     } 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 @@ function KeyCreate(props) {
   };
   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 @@ function KeyCreate(props) {
           handleSubmit,
           form,
           submitting,
-          pristine,
           invalid,
           errors,
           dirty,
@@ -398,7 +388,6 @@ function KeyCreate(props) {
                 <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
@@ -52,6 +52,7 @@ import SearchPolicyTable from "./SearchPolicyTable";
 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 @@ function UserAccessLayout() {
   const navigate = useNavigate();
   const location = useLocation();
   const searchParams = useQuery();
+  const { allServiceDefs } = getServiceDef();
 
   const showMoreLess = () => {
     setShow(!show);
@@ -92,20 +94,9 @@ function UserAccessLayout() {
   };
 
   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 @@ function UserAccessLayout() {
       );
     }
 
-    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 @@ function UserAccessLayout() {
       });
     }
 
-    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
@@ -48,6 +48,7 @@ import {
   selectCustomStyles
 } from "../../components/CommonComponents";
 import usePrompt from "Hooks/usePrompt";
+import { getServiceDef } from "../../utils/appState";
 
 const noneOptions = {
   label: "None",
@@ -64,7 +65,7 @@ const SecurityZoneForm = () => {
   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 SecurityZoneForm = () => {
   };
 
   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 SecurityZoneForm = () => {
   };
 
   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 SecurityZoneForm = () => {
 
   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 @@ const SecurityZoneForm = () => {
       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,23 +642,25 @@ const SecurityZoneForm = () => {
 
   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) {
         obj.mandatory = false;
       }
     }
 
-    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 @@ const SecurityZoneForm = () => {
       </p>
     ));
   };
+
   const onFocusUserSelect = () => {
     setUserLoading(true);
     fetchUsersData().then((opts) => {
@@ -718,20 +707,23 @@ const SecurityZoneForm = () => {
       setGroupLoading(false);
     });
   };
+
   const onFocusRoleSelect = () => {
     setRoleLoading(true);
     fetchRolesData().then((opts) => {
       setDefaultRoleOptions(opts);
       setRoleLoading(false);
     });
   };
+
   const onFocusTagServiceSelect = () => {
     setTagServiceLoading(true);
     fetchTagServices().then((opts) => {
       setDefaultTagServiceOptions(opts);
       setTagServiceLoading(false);
     });
   };
+
   return (
     <React.Fragment>
       <div className="clearfix">
@@ -1014,6 +1006,7 @@ const SecurityZoneForm = () => {
                         </Row>
                       )}
                     />
+
                     <Field
                       name="auditUserGroups"
                       render={({ input, meta }) => (
@@ -1141,6 +1134,7 @@ const SecurityZoneForm = () => {
                         </Row>
                       )}
                     />
+
                     <Field
                       name="resourceServices"
                       render={({ input }) => (
@@ -1176,6 +1170,7 @@ const SecurityZoneForm = () => {
                         </Row>
                       )}
                     />
+
                     <Table striped bordered>
                       <thead>
                         <tr>
@@ -1309,6 +1304,7 @@ const SecurityZoneForm = () => {
                         </FieldArray>
                       </tbody>
                     </Table>
+
                     <Row className="form-actions">
                       <Col sm={{ span: 9, offset: 3 }}>
                         <Button