From d60f45ba278f76325fd0cfd254708f3f796ccac0 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 11:05:21 -0400
Subject: [PATCH 01/23] chore(pf5): upgrade TargetContextSelector

---
 src/app/TargetView/TargetContextSelector.tsx | 48 ++++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 236cca5ec..c2081ee4d 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -27,12 +27,13 @@ import {
   MenuFooter,
   SearchInput,
   Dropdown,
-  DropdownGroup,
   MenuToggle,
   MenuSearch,
   MenuSearchInput,
   SelectOption,
   SelectGroup,
+  DropdownList,
+  DropdownItem,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import * as React from 'react';
@@ -52,17 +53,22 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
   const [isTargetOpen, setIsTargetOpen] = React.useState(false);
   const [isLoading, setLoading] = React.useState(false);
 
-  const handleSelectToggle = React.useCallback(() => setIsTargetOpen((old) => !old), [setIsTargetOpen]);
+  const onToggleClick = () => {
+    setIsTargetOpen(!isTargetOpen);
+  };
 
-  const handleTargetSelect = React.useCallback(
-    (_, { target }, isPlaceholder) => {
+  const onSelect = React.useCallback(
+    (_, id) => {
       setIsTargetOpen(false);
-      const toSelect: Target = isPlaceholder ? undefined : target;
-      if (!isEqualTarget(toSelect, selectedTarget)) {
-        context.target.setTarget(toSelect);
+      if (typeof id === 'number' && id >= 0) {
+        const toSelect = targets[id];
+        if (!isEqualTarget(toSelect, selectedTarget)) {
+          setSelectedTarget(toSelect);
+          context.target.setTarget(toSelect);
+        }
       }
     },
-    [setIsTargetOpen, selectedTarget, context.target],
+    [targets, setSelectedTarget, setIsTargetOpen, context.target],
   );
 
   React.useEffect(() => {
@@ -233,27 +239,23 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
         ) : (
           <Dropdown
             className={className}
-            //onToggle={handleSelectToggle}
-            //onSelect={handleTargetSelect}
             isPlain
+            isScrollable
             placeholder="Select Target"
             isOpen={isTargetOpen}
-            onSelect={handleSelectToggle}
+            onOpenChange={(isOpen) => setIsTargetOpen(isOpen)}
+            onOpenChangeKeys={['Escape']}
+            onSelect={onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
                 aria-label="Select Target"
                 ref={toggleRef}
-                onClick={() => handleTargetSelect(undefined, { target: selectedTarget }, undefined)}
+                onClick={onToggleClick}
+                isExpanded={isTargetOpen}
                 variant="plain"
                 icon={selectionPrefix}
               >
-                {!selectedTarget
-                  ? undefined
-                  : {
-                      toString: () => getTargetRepresentation(selectedTarget),
-                      compareTo: (other) => other.target.connectUrl === selectedTarget.connectUrl,
-                      ...{ target: selectedTarget },
-                    }}
+                {!selectedTarget ? undefined : getTargetRepresentation(selectedTarget)}
               </MenuToggle>
             )}
             popperProps={{
@@ -270,7 +272,13 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
               {favorites}
               {handleFavorite}
             </MenuSearch>
-            <DropdownGroup label="Target Groups">{selectOptions}</DropdownGroup>
+            <DropdownList>
+              {targets.map((v, i) => (
+                <DropdownItem itemId={i} key={i}>
+                  {getTargetRepresentation(v)}
+                </DropdownItem>
+              ))}
+            </DropdownList>
             <MenuFooter>{selectFooter}</MenuFooter>
           </Dropdown>
         )}

From 3b3b8803792983d016af23efc78363bf78ed3218 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 11:09:22 -0400
Subject: [PATCH 02/23] imports

---
 src/app/TargetView/TargetContextSelector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index c2081ee4d..be47e87be 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -27,13 +27,13 @@ import {
   MenuFooter,
   SearchInput,
   Dropdown,
+  DropdownItem,
+  DropdownList,
   MenuToggle,
   MenuSearch,
   MenuSearchInput,
   SelectOption,
   SelectGroup,
-  DropdownList,
-  DropdownItem,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import * as React from 'react';

From b544c8827953d8b5a5f2a0aa67ce92d95b031cc1 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 11:22:05 -0400
Subject: [PATCH 03/23] refactor

---
 src/app/TargetView/TargetContextSelector.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index be47e87be..e12b028d0 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -58,14 +58,11 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
   };
 
   const onSelect = React.useCallback(
-    (_, id) => {
+    (_, target) => {
       setIsTargetOpen(false);
-      if (typeof id === 'number' && id >= 0) {
-        const toSelect = targets[id];
-        if (!isEqualTarget(toSelect, selectedTarget)) {
-          setSelectedTarget(toSelect);
-          context.target.setTarget(toSelect);
-        }
+      if (!isEqualTarget(target, selectedTarget)) {
+        setSelectedTarget(target);
+        context.target.setTarget(target);
       }
     },
     [targets, setSelectedTarget, setIsTargetOpen, context.target],
@@ -274,7 +271,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
             </MenuSearch>
             <DropdownList>
               {targets.map((v, i) => (
-                <DropdownItem itemId={i} key={i}>
+                <DropdownItem itemId={v} key={i}>
                   {getTargetRepresentation(v)}
                 </DropdownItem>
               ))}

From e874fb1b87ea32b4635334338dcd141415200776 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 13:57:02 -0400
Subject: [PATCH 04/23] Styling, discovery groups

---
 src/app/TargetView/TargetContextSelector.tsx | 49 +++++++-------------
 1 file changed, 16 insertions(+), 33 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index e12b028d0..280d4bd54 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -27,13 +27,12 @@ import {
   MenuFooter,
   SearchInput,
   Dropdown,
+  DropdownGroup,
   DropdownItem,
   DropdownList,
   MenuToggle,
   MenuSearch,
   MenuSearchInput,
-  SelectOption,
-  SelectGroup,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import * as React from 'react';
@@ -122,9 +121,9 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
   const selectOptions = React.useMemo(() => {
     if (noOptions) {
       return [
-        <SelectOption key={'no-target-found'} isDisabled>
+        <DropdownItem itemId={undefined} key={'no-target-found'} isDisabled>
           No target found
-        </SelectOption>,
+        </DropdownItem>,
       ];
     }
 
@@ -135,44 +134,34 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
 
     const options = Array.from(groupNames)
       .map((name) => (
-        <SelectGroup key={name} label={name}>
+        <DropdownGroup key={name} label={name}>
           {targets
             .filter((t) => getAnnotation(t.annotations.cryostat, 'REALM') === name)
             .map((t: Target) => (
-              <SelectOption
-                isSelected={favSet.has(t.connectUrl)}
-                id={t.connectUrl}
-                key={t.connectUrl}
-                value={{
-                  toString: () => getTargetRepresentation(t),
-                  compareTo: (other) => other.target.connectUrl === t.connectUrl,
-                  ...{ target: t }, // Bypassing type checks
-                }}
-              />
+              <DropdownItem isSelected={favSet.has(t.connectUrl)} itemId={t} key={t.connectUrl}>
+                {getTargetRepresentation(t)}
+              </DropdownItem>
             ))}
-        </SelectGroup>
+        </DropdownGroup>
       ))
       .sort((a, b) => `${a.props['label']}`.localeCompare(`${b.props['label']}`));
 
     const favGroup = favorites.length
       ? [
-          <SelectGroup key={'Favorites'} label={'Favorites'}>
+          <DropdownGroup key={'Favorites'} label={'Favorites'}>
             {favorites
               .map((f) => targets.find((t) => t.connectUrl === f))
               .filter((t) => t !== undefined)
               .map((t: Target) => (
-                <SelectOption
+                <DropdownItem
                   //isFavorite
-                  id={t.connectUrl}
+                  itemId={t}
                   key={`favorited-${t.connectUrl}`}
-                  value={{
-                    toString: () => getTargetRepresentation(t),
-                    compareTo: (other) => other.target.connectUrl === t.connectUrl,
-                    ...{ target: t },
-                  }}
-                />
+                >
+                  {getTargetRepresentation(t)}
+                </DropdownItem>
               ))}
-          </SelectGroup>,
+          </DropdownGroup>,
           <Divider key={'favorite-divider'} />,
         ]
       : [];
@@ -269,13 +258,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
               {favorites}
               {handleFavorite}
             </MenuSearch>
-            <DropdownList>
-              {targets.map((v, i) => (
-                <DropdownItem itemId={v} key={i}>
-                  {getTargetRepresentation(v)}
-                </DropdownItem>
-              ))}
-            </DropdownList>
+            <DropdownList>{selectOptions}</DropdownList>
             <MenuFooter>{selectFooter}</MenuFooter>
           </Dropdown>
         )}

From d04634421e99d22117f4e06b0777f4d786843f28 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 14:02:12 -0400
Subject: [PATCH 05/23] prettier

---
 src/app/CreateRecording/CustomRecordingForm.tsx | 3 ++-
 src/app/Rules/CreateRule.tsx                    | 7 ++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/CreateRecording/CustomRecordingForm.tsx b/src/app/CreateRecording/CustomRecordingForm.tsx
index afb6b5856..bb9e7c010 100644
--- a/src/app/CreateRecording/CustomRecordingForm.tsx
+++ b/src/app/CreateRecording/CustomRecordingForm.tsx
@@ -559,7 +559,8 @@ export const CustomRecordingForm: React.FC = () => {
             <FormHelperText>
               <HelperText>
                 <HelperTextItem>
-                Write contents of buffer onto disk. If disabled, the buffer acts as circular buffer only keeping the most recent Recording information
+                  Write contents of buffer onto disk. If disabled, the buffer acts as circular buffer only keeping the
+                  most recent Recording information
                 </HelperTextItem>
               </HelperText>
             </FormHelperText>
diff --git a/src/app/Rules/CreateRule.tsx b/src/app/Rules/CreateRule.tsx
index be0d0868a..aa6c906a3 100644
--- a/src/app/Rules/CreateRule.tsx
+++ b/src/app/Rules/CreateRule.tsx
@@ -595,8 +595,8 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
         <FormHelperText>
           <HelperText>
             <HelperTextItem>
-            Initial delay before archiving starts. The first archived copy will be made this long after the Recording is started.
-            The second archived copy will occur one Archival period later.
+              Initial delay before archiving starts. The first archived copy will be made this long after the Recording
+              is started. The second archived copy will occur one Archival period later.
             </HelperTextItem>
           </HelperText>
         </FormHelperText>
@@ -631,7 +631,8 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
         <FormHelperText>
           <HelperText>
             <HelperTextItem>
-            The number of Archived Recording copies to preserve in archives for each target application affected by this rule.
+              The number of Archived Recording copies to preserve in archives for each target application affected by
+              this rule.
             </HelperTextItem>
           </HelperText>
         </FormHelperText>

From a5eee07b2c40f07483e32d54e43fad37bdaf4664 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 14:03:36 -0400
Subject: [PATCH 06/23] styling

---
 src/app/TargetView/TargetContextSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 280d4bd54..d823fc1d3 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -238,7 +238,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
                 ref={toggleRef}
                 onClick={onToggleClick}
                 isExpanded={isTargetOpen}
-                variant="plain"
+                variant="plainText"
                 icon={selectionPrefix}
               >
                 {!selectedTarget ? undefined : getTargetRepresentation(selectedTarget)}

From f109a1fcaf4799739443a33eea1aebbacf5f876c Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 14:06:10 -0400
Subject: [PATCH 07/23] use item description field

---
 src/app/TargetView/TargetContextSelector.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index d823fc1d3..367c533fa 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -138,8 +138,13 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
           {targets
             .filter((t) => getAnnotation(t.annotations.cryostat, 'REALM') === name)
             .map((t: Target) => (
-              <DropdownItem isSelected={favSet.has(t.connectUrl)} itemId={t} key={t.connectUrl}>
-                {getTargetRepresentation(t)}
+              <DropdownItem
+                isSelected={favSet.has(t.connectUrl)}
+                itemId={t}
+                key={t.connectUrl}
+                description={t.connectUrl}
+              >
+                {t.alias}
               </DropdownItem>
             ))}
         </DropdownGroup>

From 9fa031d2e59c5f2c1fdb87d4ef47511782120d79 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 14:25:01 -0400
Subject: [PATCH 08/23] working favourites

---
 src/app/TargetView/TargetContextSelector.tsx | 25 +++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 367c533fa..b1f873e2b 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -127,8 +127,6 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
       ];
     }
 
-    const favSet = new Set(favorites);
-
     const groupNames = new Set<string>();
     targets.forEach((t) => groupNames.add(getAnnotation(t.annotations.cryostat, 'REALM') || 'Others'));
 
@@ -139,7 +137,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
             .filter((t) => getAnnotation(t.annotations.cryostat, 'REALM') === name)
             .map((t: Target) => (
               <DropdownItem
-                isSelected={favSet.has(t.connectUrl)}
+                isFavorited={favorites.includes(t.connectUrl)}
                 itemId={t}
                 key={t.connectUrl}
                 description={t.connectUrl}
@@ -158,11 +156,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
               .map((f) => targets.find((t) => t.connectUrl === f))
               .filter((t) => t !== undefined)
               .map((t: Target) => (
-                <DropdownItem
-                  //isFavorite
-                  itemId={t}
-                  key={`favorited-${t.connectUrl}`}
-                >
+                <DropdownItem isFavorited itemId={t} key={`favorited-${t.connectUrl}`}>
                   {getTargetRepresentation(t)}
                 </DropdownItem>
               ))}
@@ -197,15 +191,19 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
     [selectOptions, noOptions],
   );
 
-  const handleFavorite = React.useCallback(
-    (itemId: string, isFavorite: boolean) => {
+  const onFavoriteClick = React.useCallback(
+    (_, item: Target, actionId: string) => {
+      if (!actionId) {
+        return;
+      }
       setFavorites((old) => {
-        const toUpdate = !isFavorite ? [...old, itemId] : old.filter((f) => f !== itemId);
+        const prevFav = old.includes(item.connectUrl);
+        const toUpdate = prevFav ? old.filter((f) => f !== item.connectUrl) : [...old, item.connectUrl];
         saveToLocalStorage('TARGET_FAVORITES', toUpdate);
         return toUpdate;
       });
     },
-    [setFavorites],
+    [favorites, setFavorites],
   );
 
   const selectionPrefix = React.useMemo(
@@ -237,6 +235,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
             onOpenChange={(isOpen) => setIsTargetOpen(isOpen)}
             onOpenChangeKeys={['Escape']}
             onSelect={onSelect}
+            onActionClick={onFavoriteClick}
             toggle={(toggleRef) => (
               <MenuToggle
                 aria-label="Select Target"
@@ -260,8 +259,6 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
                 <SearchIcon />
                 <SearchInput placeholder="Filter by target..." onSearch={handleTargetFilter} />
               </MenuSearchInput>
-              {favorites}
-              {handleFavorite}
             </MenuSearch>
             <DropdownList>{selectOptions}</DropdownList>
             <MenuFooter>{selectFooter}</MenuFooter>

From 6fcbf700e23d69d8ebf3261e2a3dc4ea8c540bba Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 14:27:33 -0400
Subject: [PATCH 09/23] styling

---
 src/app/TargetView/TargetContextSelector.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index b1f873e2b..ae9c4683e 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -34,7 +34,6 @@ import {
   MenuSearch,
   MenuSearchInput,
 } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -256,10 +255,10 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
           >
             <MenuSearch>
               <MenuSearchInput>
-                <SearchIcon />
                 <SearchInput placeholder="Filter by target..." onSearch={handleTargetFilter} />
               </MenuSearchInput>
             </MenuSearch>
+            <Divider />
             <DropdownList>{selectOptions}</DropdownList>
             <MenuFooter>{selectFooter}</MenuFooter>
           </Dropdown>

From 861c9d9e12615e9f199517c00dca4a23c4214b95 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 14:36:11 -0400
Subject: [PATCH 10/23] working filter

---
 src/app/TargetView/TargetContextSelector.tsx | 73 +++++++++-----------
 1 file changed, 32 insertions(+), 41 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index ae9c4683e..f92d8ee71 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -48,6 +48,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
   const [targets, setTargets] = React.useState<Target[]>([]);
   const [selectedTarget, setSelectedTarget] = React.useState<Target>();
   const [favorites, setFavorites] = React.useState<string[]>(getFromLocalStorage('TARGET_FAVORITES', []));
+  const [searchTerm, setSearchTerm] = React.useState<string>('');
   const [isTargetOpen, setIsTargetOpen] = React.useState(false);
   const [isLoading, setLoading] = React.useState(false);
 
@@ -126,8 +127,16 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
       ];
     }
 
+    const matchExp = new RegExp(searchTerm, 'i');
+    const filteredTargets = targets.filter(
+      (t) =>
+        matchExp.test(t.alias) ||
+        matchExp.test(t.connectUrl) ||
+        matchExp.test(t.annotations.cryostat.find((kv) => kv.key === 'REALM')?.value || ''),
+    );
+
     const groupNames = new Set<string>();
-    targets.forEach((t) => groupNames.add(getAnnotation(t.annotations.cryostat, 'REALM') || 'Others'));
+    filteredTargets.forEach((t) => groupNames.add(getAnnotation(t.annotations.cryostat, 'REALM') || 'Others'));
 
     const options = Array.from(groupNames)
       .map((name) => (
@@ -148,47 +157,25 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
       ))
       .sort((a, b) => `${a.props['label']}`.localeCompare(`${b.props['label']}`));
 
-    const favGroup = favorites.length
-      ? [
-          <DropdownGroup key={'Favorites'} label={'Favorites'}>
-            {favorites
-              .map((f) => targets.find((t) => t.connectUrl === f))
-              .filter((t) => t !== undefined)
-              .map((t: Target) => (
-                <DropdownItem isFavorited itemId={t} key={`favorited-${t.connectUrl}`}>
-                  {getTargetRepresentation(t)}
-                </DropdownItem>
-              ))}
-          </DropdownGroup>,
-          <Divider key={'favorite-divider'} />,
-        ]
-      : [];
+    const favGroup =
+      !searchTerm && favorites.length
+        ? [
+            <DropdownGroup key={'Favorites'} label={'Favorites'}>
+              {favorites
+                .map((f) => targets.find((t) => t.connectUrl === f))
+                .filter((t) => t !== undefined)
+                .map((t: Target) => (
+                  <DropdownItem isFavorited itemId={t} key={`favorited-${t.connectUrl}`}>
+                    {getTargetRepresentation(t)}
+                  </DropdownItem>
+                ))}
+            </DropdownGroup>,
+            <Divider key={'favorite-divider'} />,
+          ]
+        : [];
 
     return favGroup.concat(options);
-  }, [targets, noOptions, favorites]);
-
-  const handleTargetFilter = React.useCallback(
-    (_, value: string) => {
-      if (!value || noOptions) {
-        // In case of empty options, placeholder is returned.
-        return selectOptions;
-      }
-
-      const matchExp = new RegExp(value, 'i');
-      return selectOptions
-        .filter((grp) => grp.props.children)
-        .map((grp) =>
-          React.cloneElement(grp, {
-            children: grp.props.children.filter((option) => {
-              const { target } = option.props.value;
-              return matchExp.test(target.connectUrl) || matchExp.test(target.alias);
-            }),
-          }),
-        )
-        .filter((grp) => grp.props.children.length > 0);
-    },
-    [selectOptions, noOptions],
-  );
+  }, [targets, noOptions, favorites, searchTerm]);
 
   const onFavoriteClick = React.useCallback(
     (_, item: Target, actionId: string) => {
@@ -255,7 +242,11 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
           >
             <MenuSearch>
               <MenuSearchInput>
-                <SearchInput placeholder="Filter by target..." onSearch={handleTargetFilter} />
+                <SearchInput
+                  placeholder="Filter by target..."
+                  value={searchTerm}
+                  onChange={(_, v) => setSearchTerm(v)}
+                />
               </MenuSearchInput>
             </MenuSearch>
             <Divider />

From 9769c236ac1c6b1c04b2b813fb85edf05675fecc Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 14:51:51 -0400
Subject: [PATCH 11/23] drop shadow

---
 src/app/TargetView/TargetContextSelector.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index f92d8ee71..4620dfe54 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -214,7 +214,6 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
         ) : (
           <Dropdown
             className={className}
-            isPlain
             isScrollable
             placeholder="Select Target"
             isOpen={isTargetOpen}
@@ -237,7 +236,6 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
             popperProps={{
               enableFlip: true,
               appendTo: portalRoot,
-              //maxHeight: '30em',
             }}
           >
             <MenuSearch>

From e8b1ffd6ebc00b2f18c109c4c2db2b25e291e3ce Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 14:53:01 -0400
Subject: [PATCH 12/23] button fixup

---
 src/app/TargetView/TargetContextSelector.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 4620dfe54..6bceb7db7 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -199,12 +199,11 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
 
   const selectFooter = React.useMemo(
     () => (
-      <Link to={'/topology/create-custom-target'}>
-        <Button variant="secondary">Create target</Button>
-      </Link>
+      <Button variant="secondary" component={(props) => <Link {...props} to={'/topology/create-custom-target'} />}>
+        Create target
+      </Button>
     ),
-    [],
-  );
+    []);
 
   return (
     <>

From 0199cde7e5d154a53403e19a2784974f726c992d Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 14:55:59 -0400
Subject: [PATCH 13/23] add button for clearing target selection

---
 src/app/TargetView/TargetContextSelector.tsx | 21 ++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 6bceb7db7..964354a6e 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -192,6 +192,13 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
     [favorites, setFavorites],
   );
 
+  const onClearSelection = React.useCallback(() => {
+    setIsTargetOpen(false);
+    removeFromLocalStorage('TARGET');
+    setSelectedTarget(undefined);
+    context.target.setTarget(undefined);
+  }, [setSelectedTarget, setIsTargetOpen, context.target]);
+
   const selectionPrefix = React.useMemo(
     () => (!selectedTarget ? undefined : <span style={{ fontWeight: 700 }}>Target:</span>),
     [selectedTarget],
@@ -199,11 +206,17 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
 
   const selectFooter = React.useMemo(
     () => (
-      <Button variant="secondary" component={(props) => <Link {...props} to={'/topology/create-custom-target'} />}>
-        Create target
-      </Button>
+      <>
+        <Button variant="secondary" component={(props) => <Link {...props} to={'/topology/create-custom-target'} />}>
+          Create target
+        </Button>
+        <Button variant="tertiary" onClick={onClearSelection}>
+          Clear selection
+        </Button>
+      </>
     ),
-    []);
+    [],
+  );
 
   return (
     <>

From 1c762c83c6f8b38b3e2da545f445c6718fe94787 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 14:58:15 -0400
Subject: [PATCH 14/23] placeholder text

---
 src/app/TargetView/TargetContextSelector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 964354a6e..8cf5e8c86 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -227,7 +227,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
           <Dropdown
             className={className}
             isScrollable
-            placeholder="Select Target"
+            placeholder="Select a Target"
             isOpen={isTargetOpen}
             onOpenChange={(isOpen) => setIsTargetOpen(isOpen)}
             onOpenChangeKeys={['Escape']}
@@ -242,7 +242,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
                 variant="plainText"
                 icon={selectionPrefix}
               >
-                {!selectedTarget ? undefined : getTargetRepresentation(selectedTarget)}
+                {!selectedTarget ? 'Select a Target' : getTargetRepresentation(selectedTarget)}
               </MenuToggle>
             )}
             popperProps={{

From f654ae34cf8fb51a53080357c79ffbda53e65495 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 15:00:17 -0400
Subject: [PATCH 15/23] footer layout

---
 src/app/TargetView/TargetContextSelector.tsx | 22 +++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 8cf5e8c86..8f17df164 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -33,6 +33,8 @@ import {
   MenuToggle,
   MenuSearch,
   MenuSearchInput,
+  Split,
+  SplitItem,
 } from '@patternfly/react-core';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
@@ -206,14 +208,18 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
 
   const selectFooter = React.useMemo(
     () => (
-      <>
-        <Button variant="secondary" component={(props) => <Link {...props} to={'/topology/create-custom-target'} />}>
-          Create target
-        </Button>
-        <Button variant="tertiary" onClick={onClearSelection}>
-          Clear selection
-        </Button>
-      </>
+      <Split hasGutter>
+        <SplitItem>
+          <Button variant="secondary" component={(props) => <Link {...props} to={'/topology/create-custom-target'} />}>
+            Create target
+          </Button>
+        </SplitItem>
+        <SplitItem>
+          <Button variant="tertiary" onClick={onClearSelection}>
+            Clear selection
+          </Button>
+        </SplitItem>
+      </Split>
     ),
     [],
   );

From 2448ce667ee7ff9bc844107b66a60763466dfafe Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 15:11:50 -0400
Subject: [PATCH 16/23] placeholder

---
 src/app/TargetView/TargetContextSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 8f17df164..92045c796 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -259,7 +259,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
             <MenuSearch>
               <MenuSearchInput>
                 <SearchInput
-                  placeholder="Filter by target..."
+                  placeholder="Filter by URL, alias, or discovery group..."
                   value={searchTerm}
                   onChange={(_, v) => setSearchTerm(v)}
                 />

From 02365462c4376916c573d4cd15fd0e335fa82138 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 16:04:56 -0400
Subject: [PATCH 17/23] favourited items styling matches non-favourites

---
 src/app/TargetView/TargetContextSelector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 92045c796..087e52e5d 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -167,8 +167,8 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
                 .map((f) => targets.find((t) => t.connectUrl === f))
                 .filter((t) => t !== undefined)
                 .map((t: Target) => (
-                  <DropdownItem isFavorited itemId={t} key={`favorited-${t.connectUrl}`}>
-                    {getTargetRepresentation(t)}
+                  <DropdownItem isFavorited itemId={t} key={`favorited-${t.connectUrl}`} description={t.connectUrl}>
+                    {t.alias}
                   </DropdownItem>
                 ))}
             </DropdownGroup>,

From f36dd1dd92572403fdfb574b203ceb03feddd84d Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 16:08:41 -0400
Subject: [PATCH 18/23] chart resize init fix

---
 src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx b/src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx
index eace6bedc..f48f0216d 100644
--- a/src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx
+++ b/src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx
@@ -399,6 +399,7 @@ export const MBeanMetricsChartCard: DashboardCardFC<MBeanMetricsChartCardProps>
 
   React.useEffect(() => {
     resizeObserver.current = getResizeObserver(containerRef.current, handleResize);
+    handleResize();
     return resizeObserver.current;
   }, [resizeObserver, containerRef, handleResize]);
 

From fd7033e3def841e48338fc9e85e88756ccb43bc2 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 16:33:23 -0400
Subject: [PATCH 19/23] callback

---
 src/app/TargetView/TargetContextSelector.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 087e52e5d..d35eeb73d 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -54,9 +54,9 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
   const [isTargetOpen, setIsTargetOpen] = React.useState(false);
   const [isLoading, setLoading] = React.useState(false);
 
-  const onToggleClick = () => {
-    setIsTargetOpen(!isTargetOpen);
-  };
+  const onToggleClick = React.useCallback(() => {
+    setIsTargetOpen((v) => !v);
+  }, [setIsTargetOpen]);
 
   const onSelect = React.useCallback(
     (_, target) => {

From 180f6678a01404d7cf0110a2cd0c4abfa5663217 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 16:35:15 -0400
Subject: [PATCH 20/23] refactor

---
 src/app/TargetView/TargetContextSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index d35eeb73d..6daae8d63 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -134,7 +134,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
       (t) =>
         matchExp.test(t.alias) ||
         matchExp.test(t.connectUrl) ||
-        matchExp.test(t.annotations.cryostat.find((kv) => kv.key === 'REALM')?.value || ''),
+        matchExp.test(getAnnotation(t.annotations.cryostat, 'REALM') ?? ''),
     );
 
     const groupNames = new Set<string>();

From 78a84918113b3851de8486dbf862a32114c7ab49 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 16:42:22 -0400
Subject: [PATCH 21/23] refactor

---
 src/app/TargetView/TargetContextSelector.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 6daae8d63..50d6ebad0 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -130,11 +130,8 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
     }
 
     const matchExp = new RegExp(searchTerm, 'i');
-    const filteredTargets = targets.filter(
-      (t) =>
-        matchExp.test(t.alias) ||
-        matchExp.test(t.connectUrl) ||
-        matchExp.test(getAnnotation(t.annotations.cryostat, 'REALM') ?? ''),
+    const filteredTargets = targets.filter((t) =>
+      [t.alias, t.connectUrl, getAnnotation(t.annotations.cryostat, 'REALM') ?? ''].some((v) => matchExp.test(v)),
     );
 
     const groupNames = new Set<string>();

From 81e47f631e43dfbc8e99a13433014110b6a54747 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 16:44:02 -0400
Subject: [PATCH 22/23] eslint

---
 src/app/TargetView/TargetContextSelector.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 50d6ebad0..c3ebc59da 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -66,7 +66,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
         context.target.setTarget(target);
       }
     },
-    [targets, setSelectedTarget, setIsTargetOpen, context.target],
+    [selectedTarget, setSelectedTarget, setIsTargetOpen, context.target],
   );
 
   React.useEffect(() => {
@@ -188,7 +188,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
         return toUpdate;
       });
     },
-    [favorites, setFavorites],
+    [setFavorites],
   );
 
   const onClearSelection = React.useCallback(() => {
@@ -218,7 +218,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
         </SplitItem>
       </Split>
     ),
-    [],
+    [onClearSelection],
   );
 
   return (

From fef301a211c06f5ebfdb28d5a76c79b11e9521fd Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 25 Jul 2024 16:56:04 -0400
Subject: [PATCH 23/23] bugfix

---
 src/app/TargetView/TargetContextSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index c3ebc59da..68a76d237 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -140,7 +140,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
     const options = Array.from(groupNames)
       .map((name) => (
         <DropdownGroup key={name} label={name}>
-          {targets
+          {filteredTargets
             .filter((t) => getAnnotation(t.annotations.cryostat, 'REALM') === name)
             .map((t: Target) => (
               <DropdownItem