RANGER-4493: Keep the UI behaviour for tag based and resource based s…

…ervices filtering for zone without any service
apache · Nov 21, 2023 · 6cdb6da · 6cdb6da
1 parent 69911e5
commit 6cdb6da
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 89 deletions.
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Home.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Home.jsx
@@ -59,39 +59,26 @@ class Home extends Component {
   };
 
   disableTabs = (loader) => {
-    loader == true &&
-      document
-        .getElementById("resourceSelectedZone")
-        ?.classList?.add("disabledEvents");
-    loader == true &&
-      document
-        .getElementById("tagSelectedZone")
-        ?.classList?.add("disabledEvents");
-    loader == true &&
-      document
-        .getElementsByClassName("sidebar-header")?.[0]
-        ?.classList?.add("disabledEvents");
-    loader == true &&
-      document.getElementById("rangerIcon")?.classList?.add("disabledCursor");
+    const elements = [
+      { id: "resourceSelectedZone", className: "disabledEvents" },
+      { id: "tagSelectedZone", className: "disabledEvents" },
+      { selector: "sidebar-header", className: "disabledEvents" },
+      { id: "rangerIcon", className: "disabledCursor" }
+    ];
+    elements.forEach((element) => {
+      const target = element.id
+        ? document.getElementById(element.id)
+        : document.getElementsByClassName(element.selector)?.[0];
 
+      if (target) {
+        if (loader) {
+          target.classList.add(element.className);
+        } else {
+          target.classList.remove(element.className);
+        }
+      }
+    });
     this.setState({ loader: loader });
-    loader == false &&
-      document
-        .getElementsByClassName("sidebar-header")?.[0]
-        ?.classList.remove("disabledEvents");
-    loader == false &&
-      document
-        .getElementById("rangerIcon")
-        ?.classList?.remove("disabledCursor");
-
-    loader == false &&
-      document
-        .getElementById("resourceSelectedZone")
-        ?.classList?.remove("disabledEvents");
-    loader == false &&
-      document
-        .getElementById("tagSelectedZone")
-        ?.classList?.remove("disabledEvents");
   };
 
   render() {

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
@@ -176,16 +176,16 @@ class ServiceDefinitions extends Component {
     try {
       let zonesResp = [];
       if (e && e !== undefined) {
-        zonesResp = await fetchApi({
+        const response = await fetchApi({
           url: `public/v2/api/zones/${e && e.value}/service-headers`
         });
-
+        zonesResp = response?.data || [];
         zonesResp &&
           this.props.navigate(
             `${this.props.location.pathname}?securityZone=${e.label}`
           );
 
-        let zoneServiceNames = map(zonesResp.data, "name");
+        let zoneServiceNames = map(zonesResp, "name");
 
         let zoneServices = zoneServiceNames.map((zoneService) => {
           return this.state.services.filter((service) => {
@@ -206,19 +206,16 @@ class ServiceDefinitions extends Component {
         }
 
         let zoneServiceDefTypes = uniq(map(zoneServices, "type"));
-        let filterZoneServiceDef;
-        if (!this.state.isTagView) {
-          filterZoneServiceDef = sortBy(
-            zoneServiceDefTypes.map((obj) => {
-              return this.state.serviceDefs.find((serviceDef) => {
-                return serviceDef.name == obj;
-              });
-            }),
-            "id"
-          );
-        } else {
-          filterZoneServiceDef = this.state.serviceDefs;
-        }
+        let filterZoneServiceDef = [];
+        filterZoneServiceDef = sortBy(
+          zoneServiceDefTypes.map((obj) => {
+            return this.state.serviceDefs.find((serviceDef) => {
+              return serviceDef.name == obj;
+            });
+          }),
+          "id"
+        );
+
         let zoneDetails = {};
         zoneDetails["label"] = e.label;
         zoneDetails["value"] = e.value;
@@ -249,7 +246,6 @@ class ServiceDefinitions extends Component {
   deleteService = async (sid) => {
     let localStorageZoneDetails = localStorage.getItem("zoneDetails");
     let zonesResp = [];
-
     try {
       this.setState({ blockUI: true });
 
@@ -262,19 +258,41 @@ class ServiceDefinitions extends Component {
         localStorageZoneDetails !== undefined &&
         localStorageZoneDetails !== null
       ) {
-        zonesResp = await fetchApi({
+        let filterZoneServiceDef = [];
+
+        const response = await fetchApi({
           url: `public/v2/api/zones/${
             JSON.parse(localStorageZoneDetails)?.value
           }/service-headers`
         });
 
-        if (isEmpty(zonesResp?.data)) {
-          this.setState({
-            zones: this.state.zones.filter(
-              (z) => z.id !== JSON.parse(localStorageZoneDetails)?.value
-            )
+        zonesResp = response?.data || [];
+
+        if (!isEmpty(zonesResp)) {
+          let zoneServiceNames = filter(zonesResp, ["isTagService", false]);
+
+          zoneServiceNames = map(zoneServiceNames, "name");
+
+          let zoneServices = zoneServiceNames?.map((zoneService) => {
+            return this.state.services?.filter((service) => {
+              return service.name === zoneService;
+            });
           });
+
+          let zoneServiceDefTypes = uniq(map(zoneServices?.flat(), "type"));
+
+          filterZoneServiceDef = sortBy(
+            zoneServiceDefTypes?.map((obj) => {
+              return this.state.serviceDefs?.find((serviceDef) => {
+                return serviceDef.name == obj;
+              });
+            }),
+            "id"
+          );
         }
+        this.setState({
+          filterServiceDefs: filterZoneServiceDef
+        });
       }
 
       this.setState({
@@ -378,7 +396,6 @@ class ServiceDefinitions extends Component {
                             this.state.selectedZone.value
                         }
                   }
-                  //isDisabled={true}
                   formatOptionLabel={this.formatOptionLabel}
                   isDisabled={isEmpty(zones) ? true : false}
                   onChange={this.getSelectedZone}
@@ -402,10 +419,13 @@ class ServiceDefinitions extends Component {
               <Button
                 variant="outline-secondary"
                 size="sm"
-                className="ml-2"
+                className={`${
+                  isEmpty(filterServiceDefs) ? "not-allowed" : "pe-auto"
+                } ml-2`}
                 onClick={this.showImportModal}
                 data-id="importBtn"
                 data-cy="importBtn"
+                disabled={isEmpty(filterServiceDefs) ? true : false}
               >
                 <i className="fa fa-fw fa-rotate-180 fa-external-link-square" />
                 Import
@@ -428,10 +448,13 @@ class ServiceDefinitions extends Component {
               <Button
                 variant="outline-secondary"
                 size="sm"
-                className="ml-2"
+                className={`${
+                  isEmpty(filterServiceDefs) ? "not-allowed" : "pe-auto"
+                } ml-2`}
                 onClick={this.showExportModal}
                 data-id="exportBtn"
                 data-cy="exportBtn"
+                disabled={isEmpty(filterServiceDefs) ? true : false}
               >
                 <i className="fa fa-fw fa-external-link-square" />
                 Export

diff --git a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx
@@ -469,29 +469,13 @@ class ServiceForm extends Component {
     });
   };
   deleteService = async (serviceId) => {
-    let localStorageZoneDetails = localStorage.getItem("zoneDetails");
-    let zonesResp = [];
     this.hideDeleteModal();
     try {
       this.setState({ blockUI: true });
       await fetchApi({
         url: `plugins/services/${serviceId}`,
         method: "delete"
       });
-      if (
-        localStorageZoneDetails !== undefined &&
-        localStorageZoneDetails !== null
-      ) {
-        zonesResp = await fetchApi({
-          url: `public/v2/api/zones/${
-            JSON.parse(localStorageZoneDetails)?.value
-          }/service-headers`
-        });
-
-        if (isEmpty(zonesResp?.data)) {
-          localStorage.removeItem("zoneDetails");
-        }
-      }
       this.setState({ blockUI: false });
       toast.success("Successfully deleted the service");
       this.props.navigate(

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
@@ -161,28 +161,12 @@ export const TopNavBar = (props) => {
   };
 
   const deleteService = async (serviceId) => {
-    let localStorageZoneDetails = localStorage.getItem("zoneDetails");
-    let zonesResp = [];
     hideDeleteModal();
     try {
       await fetchApi({
         url: `plugins/services/${serviceId}`,
         method: "delete"
       });
-      if (
-        localStorageZoneDetails !== undefined &&
-        localStorageZoneDetails !== null
-      ) {
-        zonesResp = await fetchApi({
-          url: `public/v2/api/zones/${
-            JSON.parse(localStorageZoneDetails)?.value
-          }/service-headers`
-        });
-
-        if (isEmpty(zonesResp?.data)) {
-          localStorage.removeItem("zoneDetails");
-        }
-      }
       toast.success("Successfully deleted the service");
       navigate(
         serviceDefData?.name === "tag"