From 0a30ac3f9b70dcbfc6ec079278c7aaf67120b20e Mon Sep 17 00:00:00 2001
From: Augustin Husson <husson.augustin@gmail.com>
Date: Wed, 4 May 2022 20:27:56 +0200
Subject: [PATCH] enable active search through dropped targets (#10668)

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
---
 .../src/pages/serviceDiscovery/Services.tsx   | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx b/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx
index 7664be1f5..21bf2259b 100644
--- a/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx
+++ b/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx
@@ -22,11 +22,16 @@ export interface TargetLabels {
   isDropped: boolean;
 }
 
-const kvSearch = new KVSearch<Target>({
+const activeTargetKVSearch = new KVSearch<Target>({
   shouldSort: true,
   indexedKeys: ['labels', 'discoveredLabels', ['discoveredLabels', /.*/], ['labels', /.*/]],
 });
 
+const droppedTargetKVSearch = new KVSearch<DroppedTarget>({
+  shouldSort: true,
+  indexedKeys: ['discoveredLabels', ['discoveredLabels', /.*/]],
+});
+
 export const processSummary = (
   activeTargets: Target[],
   droppedTargets: DroppedTarget[]
@@ -91,6 +96,7 @@ export const processTargets = (activeTargets: Target[], droppedTargets: DroppedT
 
 export const ServiceDiscoveryContent: FC<ServiceMap> = ({ activeTargets, droppedTargets }) => {
   const [activeTargetList, setActiveTargetList] = useState(activeTargets);
+  const [droppedTargetList, setDroppedTargetList] = useState(droppedTargets);
   const [targetList, setTargetList] = useState(processSummary(activeTargets, droppedTargets));
   const [labelList, setLabelList] = useState(processTargets(activeTargets, droppedTargets));
 
@@ -98,21 +104,23 @@ export const ServiceDiscoveryContent: FC<ServiceMap> = ({ activeTargets, dropped
     (value: string) => {
       setQuerySearchFilter(value);
       if (value !== '') {
-        const result = kvSearch.filter(value.trim(), activeTargets);
-        setActiveTargetList(result.map((value) => value.original));
+        const activeTargetResult = activeTargetKVSearch.filter(value.trim(), activeTargets);
+        const droppedTargetResult = droppedTargetKVSearch.filter(value.trim(), droppedTargets);
+        setActiveTargetList(activeTargetResult.map((value) => value.original));
+        setDroppedTargetList(droppedTargetResult.map((value) => value.original));
       } else {
         setActiveTargetList(activeTargets);
       }
     },
-    [activeTargets]
+    [activeTargets, droppedTargets]
   );
 
   const defaultValue = useMemo(getQuerySearchFilter, []);
 
   useEffect(() => {
-    setTargetList(processSummary(activeTargetList, droppedTargets));
-    setLabelList(processTargets(activeTargetList, droppedTargets));
-  }, [activeTargetList, droppedTargets]);
+    setTargetList(processSummary(activeTargetList, droppedTargetList));
+    setLabelList(processTargets(activeTargetList, droppedTargetList));
+  }, [activeTargetList, droppedTargetList]);
 
   return (
     <>