Fixed filter issue when using search bar and Docker Compose dependencies

docker-compose.yml

@@ -40,8 +40,8 @@ services:
           - ipam-engine-name
   nginx-proxy-dev:
     depends_on:
-      - ipam-ui
-      - ipam-engine
+      - ipam-ui-dev
+      - ipam-engine-dev
     build:
       context: ./lb
       dockerfile: Dockerfile.dev

ui/src/features/DiscoverTable/Table.js

@@ -2,6 +2,8 @@ import * as React from "react";
 import { useSelector } from 'react-redux';
 import { useLocation } from "react-router-dom";
 
+import { cloneDeep } from 'lodash';
+
 import ReactDataGrid from '@inovua/reactdatagrid-community';
 import filter from '@inovua/reactdatagrid-community/filter'
 import '@inovua/reactdatagrid-community/index.css';
@@ -100,42 +102,24 @@ export default function DiscoverTable(props) {
 
   React.useEffect(() => {
     if(location.state) {
-      var searchFilter = [...filterData];
+      var searchFilter = cloneDeep(filterSettings);
 
       const target = searchFilter.find((obj) => obj.name === location.state.name);
 
       Object.assign(target, location.state);
 
-      onFilterValueChange(searchFilter);
+      setFilterData(searchFilter);
     }
   },[location]);
 
   React.useEffect(() => {
     stateData && setGridData(filter(stateData, filterData));
-  },[stateData]);
+  },[stateData, filterData]);
 
   React.useEffect(() => {
     gridData && setLoading(false);
   },[gridData]);
 
-  const onFilterValueChange = React.useCallback((filterValue) => {
-    console.log("===FILTER VALUE===");
-    console.log(filterValue);
-    console.log("==================");
-
-    console.log("===STATE DATA===");
-    console.log(stateData);
-    console.log("================");
-
-    if(stateData) {
-      const data = filter(stateData, filterValue)
-
-      setGridData(data);
-    }
-
-    setFilterData(filterValue);
-  }, [stateData])
-
   function renderDetails() {
     return (
       <ClickAwayListener onClickAway={() => setMenuExpand(false)}>
@@ -194,7 +178,7 @@ export default function DiscoverTable(props) {
           loading={loading}
           dataSource={gridData || []}
           filterValue={filterData}
-          onFilterValueChange={onFilterValueChange}
+          onFilterValueChange={(newFilterValue) => setFilterData(newFilterValue)}
           defaultSortInfo={{ name: 'name', dir: 1, type: 'string' }}
           emptyText={NoRowsOverlay}
           style={gridStyle}

ui/src/features/drawer/drawer.js

@@ -355,17 +355,20 @@ export default function NavDrawer() {
 
     if(vNets) {
       const vNetExclusions = ['id', 'peerings', 'resv', 'subnets', 'size', 'used', 'available', 'utilization', 'parent_space', 'subscription_id', 'tenant_id'];
-      const vNetResults = objToFilter(vNets, 'Virtual Networks', '/discover/vnet', vNetExclusions);
+      const vNetFiltered = objToFilter(vNets, 'Virtual Networks', '/discover/vnet', vNetExclusions);
+      const vNetResults = orderBy(vNetFiltered, 'phrase', 'asc');
 
       const subnetExclusions = ['id', 'vnet_id', 'size', 'used', 'available', 'utilization', 'subscription_id', 'tenant_id'];
-      const subnetResults = objToFilter(subnets, 'Subnets', '/discover/subnet', subnetExclusions);
+      const subnetFiltered = objToFilter(subnets, 'Subnets', '/discover/subnet', subnetExclusions);
+      const subnetResults = orderBy(subnetFiltered, 'phrase', 'asc');
 
       newSearchData = [...newSearchData, ...vNetResults, ...subnetResults];
     }
 
     if(endpoints) {
       const endpointExclusions = ['id', 'unique_id', 'vnet_id', 'subnet_id', 'metadata', 'subscription_id', 'tenant_id'];
-      const endpointResults = objToFilter(endpoints, 'Endpoints', '/discover/endpoint', endpointExclusions);
+      const endpointFiltered = objToFilter(endpoints, 'Endpoints', '/discover/endpoint', endpointExclusions);
+      const endpointResults = orderBy(endpointFiltered, 'phrase', 'asc');
 
       newSearchData = [...newSearchData, ...endpointResults];
     }