From b2cf07011de74990fe873a14c30c269e6166d5c5 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 10:14:59 -0400
Subject: [PATCH 01/14] fix rendering of labels/annotations in dropdown

---
 src/app/Topology/Toolbar/TopologyFilters.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
index 055971cfe..ce36f1844 100644
--- a/src/app/Topology/Toolbar/TopologyFilters.tsx
+++ b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import _ from 'lodash';
 import {
   allowedGroupFilters,
   allowedTargetFilters,
@@ -349,6 +350,19 @@ export const fieldValueToStrings = (value: unknown): string[] => {
   }
   if (typeof value === 'object') {
     if (Array.isArray(value)) {
+      if (value.length > 0 && typeof value[0] === 'object') {
+        if (_.isEqual(new Set(['key', 'value']), new Set(Object.getOwnPropertyNames(value[0])))) {
+          return value.map((o) => `${o.key}=${o.value}`);
+        } else {
+          return value.map((o) => {
+            let str = '';
+            for (const p in Object.getOwnPropertyNames(o)) {
+              str += `${p}=${o[p]}`;
+            }
+            return str;
+          });
+        }
+      }
       return value.map((v) => `${v}`);
     } else {
       return Object.entries(value as object).map(([k, v]) => `${k}=${v}`);

From bfe33163ccc894a5a029a653a7fe8a30eea37bbd Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 10:22:40 -0400
Subject: [PATCH 02/14] render node labels/annotations using 'key: value'
 instead of 'key=value' form

---
 src/app/Topology/Entity/EntityAnnotations.tsx | 2 +-
 src/app/Topology/Entity/utils.tsx             | 2 +-
 src/app/Topology/Toolbar/TopologyFilters.tsx  | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/Topology/Entity/EntityAnnotations.tsx b/src/app/Topology/Entity/EntityAnnotations.tsx
index 06f715342..39ec09ec0 100644
--- a/src/app/Topology/Entity/EntityAnnotations.tsx
+++ b/src/app/Topology/Entity/EntityAnnotations.tsx
@@ -27,7 +27,7 @@ export const EntityAnnotations: React.FC<{ annotations?: Annotations; maxDisplay
     return annotations
       ? Object.keys(annotations).map((groupK) => ({
           groupLabel: groupK,
-          annotations: annotations[groupK].map((kv) => `${kv.key}=${kv.value}`),
+          annotations: annotations[groupK].map((kv) => `${kv.key}: ${kv.value}`),
         }))
       : [];
   }, [annotations]);
diff --git a/src/app/Topology/Entity/utils.tsx b/src/app/Topology/Entity/utils.tsx
index 9e25102a1..38f088a92 100644
--- a/src/app/Topology/Entity/utils.tsx
+++ b/src/app/Topology/Entity/utils.tsx
@@ -54,7 +54,7 @@ import { ActiveRecDetail, Nothing } from './ResourceDetails';
 import { DescriptionConfig, TargetOwnedResourceType, TargetRelatedResourceType, ResourceTypes, PatchFn } from './types';
 
 export const keyValueEntryTransformer = (kv: { key: string; value: string }[]): string[] =>
-  kv.map((k) => `${k.key}=${k.value}`);
+  kv.map((k) => `${k.key}: ${k.value}`);
 
 export const valuesEntryTransformer: (kv: string[] | object) => string[] = Object.values;
 
diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
index ce36f1844..7a29fddfd 100644
--- a/src/app/Topology/Toolbar/TopologyFilters.tsx
+++ b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -352,7 +352,7 @@ export const fieldValueToStrings = (value: unknown): string[] => {
     if (Array.isArray(value)) {
       if (value.length > 0 && typeof value[0] === 'object') {
         if (_.isEqual(new Set(['key', 'value']), new Set(Object.getOwnPropertyNames(value[0])))) {
-          return value.map((o) => `${o.key}=${o.value}`);
+          return value.map((o) => `${o.key}: ${o.value}`);
         } else {
           return value.map((o) => {
             let str = '';
@@ -365,7 +365,7 @@ export const fieldValueToStrings = (value: unknown): string[] => {
       }
       return value.map((v) => `${v}`);
     } else {
-      return Object.entries(value as object).map(([k, v]) => `${k}=${v}`);
+      return Object.entries(value as object).map(([k, v]) => `${k}: ${v}`);
     }
   } else {
     return [`${value}`];

From b769f43a38476a809a81fe5e300de4c1a5fd4614 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 10:27:04 -0400
Subject: [PATCH 03/14] refactor

---
 src/app/Shared/Services/api.types.ts         | 6 +++++-
 src/app/Topology/Toolbar/TopologyFilters.tsx | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/Shared/Services/api.types.ts b/src/app/Shared/Services/api.types.ts
index 021b84eef..c70c37a60 100644
--- a/src/app/Shared/Services/api.types.ts
+++ b/src/app/Shared/Services/api.types.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import _ from 'lodash';
 import { RecordingReplace } from '@app/CreateRecording/types';
 import { AlertVariant } from '@patternfly/react-core';
 import { Observable } from 'rxjs';
@@ -28,6 +28,10 @@ export interface KeyValue {
   value: string;
 }
 
+export const isKeyValue = (o: any): o is KeyValue => {
+  return typeof o === 'object' && _.isEqual(new Set(['key', 'value']), new Set(Object.getOwnPropertyNames(o)));
+};
+
 export interface Metadata {
   labels: KeyValue[];
 }
diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
index 7a29fddfd..66385055a 100644
--- a/src/app/Topology/Toolbar/TopologyFilters.tsx
+++ b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -25,7 +25,7 @@ import {
   topologyUpdateCategoryIntent,
   topologyUpdateCategoryTypeIntent,
 } from '@app/Shared/Redux/ReduxStore';
-import { EnvironmentNode, TargetNode } from '@app/Shared/Services/api.types';
+import { EnvironmentNode, TargetNode, isKeyValue } from '@app/Shared/Services/api.types';
 import { flattenTree, getUniqueNodeTypes, isTargetNode } from '@app/Shared/Services/api.utils';
 import { getDisplayFieldName } from '@app/utils/utils';
 import {
@@ -351,7 +351,7 @@ export const fieldValueToStrings = (value: unknown): string[] => {
   if (typeof value === 'object') {
     if (Array.isArray(value)) {
       if (value.length > 0 && typeof value[0] === 'object') {
-        if (_.isEqual(new Set(['key', 'value']), new Set(Object.getOwnPropertyNames(value[0])))) {
+        if (isKeyValue(value[0])) {
           return value.map((o) => `${o.key}: ${o.value}`);
         } else {
           return value.map((o) => {

From cd3a17b7fcdfd6f2545599b1e040bc82cc550f62 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 10:39:06 -0400
Subject: [PATCH 04/14] handle case where compared value is something other
 than string or keyvalue

---
 src/app/Topology/Toolbar/TopologyFilters.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
index 66385055a..4f975015b 100644
--- a/src/app/Topology/Toolbar/TopologyFilters.tsx
+++ b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -273,7 +273,10 @@ export const TopologyFilter: React.FC<{ isDisabled?: boolean }> = ({ isDisabled,
             value={{
               toString: () => opt,
               compareTo: (other) => {
-                const regex = new RegExp(typeof other === 'string' ? other : other.value, 'i');
+                const regex = new RegExp(
+                  typeof other === 'string' ? other : isKeyValue(other) ? other.value : `${other}`,
+                  'i',
+                );
                 return regex.test(opt);
               },
               ...{

From 9d8fc707bc81a3c19576087f57c2b1e11c829105 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 11:21:02 -0400
Subject: [PATCH 05/14] Revert "render node labels/annotations using 'key:
 value' instead of 'key=value' form"

This reverts commit bfe33163ccc894a5a029a653a7fe8a30eea37bbd.
---
 src/app/Topology/Entity/EntityAnnotations.tsx | 2 +-
 src/app/Topology/Entity/utils.tsx             | 2 +-
 src/app/Topology/Toolbar/TopologyFilters.tsx  | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/Topology/Entity/EntityAnnotations.tsx b/src/app/Topology/Entity/EntityAnnotations.tsx
index 39ec09ec0..06f715342 100644
--- a/src/app/Topology/Entity/EntityAnnotations.tsx
+++ b/src/app/Topology/Entity/EntityAnnotations.tsx
@@ -27,7 +27,7 @@ export const EntityAnnotations: React.FC<{ annotations?: Annotations; maxDisplay
     return annotations
       ? Object.keys(annotations).map((groupK) => ({
           groupLabel: groupK,
-          annotations: annotations[groupK].map((kv) => `${kv.key}: ${kv.value}`),
+          annotations: annotations[groupK].map((kv) => `${kv.key}=${kv.value}`),
         }))
       : [];
   }, [annotations]);
diff --git a/src/app/Topology/Entity/utils.tsx b/src/app/Topology/Entity/utils.tsx
index 38f088a92..9e25102a1 100644
--- a/src/app/Topology/Entity/utils.tsx
+++ b/src/app/Topology/Entity/utils.tsx
@@ -54,7 +54,7 @@ import { ActiveRecDetail, Nothing } from './ResourceDetails';
 import { DescriptionConfig, TargetOwnedResourceType, TargetRelatedResourceType, ResourceTypes, PatchFn } from './types';
 
 export const keyValueEntryTransformer = (kv: { key: string; value: string }[]): string[] =>
-  kv.map((k) => `${k.key}: ${k.value}`);
+  kv.map((k) => `${k.key}=${k.value}`);
 
 export const valuesEntryTransformer: (kv: string[] | object) => string[] = Object.values;
 
diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
index 4f975015b..25a7e3ce6 100644
--- a/src/app/Topology/Toolbar/TopologyFilters.tsx
+++ b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -355,7 +355,7 @@ export const fieldValueToStrings = (value: unknown): string[] => {
     if (Array.isArray(value)) {
       if (value.length > 0 && typeof value[0] === 'object') {
         if (isKeyValue(value[0])) {
-          return value.map((o) => `${o.key}: ${o.value}`);
+          return value.map((o) => `${o.key}=${o.value}`);
         } else {
           return value.map((o) => {
             let str = '';
@@ -368,7 +368,7 @@ export const fieldValueToStrings = (value: unknown): string[] => {
       }
       return value.map((v) => `${v}`);
     } else {
-      return Object.entries(value as object).map(([k, v]) => `${k}: ${v}`);
+      return Object.entries(value as object).map(([k, v]) => `${k}=${v}`);
     }
   } else {
     return [`${value}`];

From 112f4b7a8c6ef0e5bec30ee3cd5b69a20e26109e Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 12:17:01 -0400
Subject: [PATCH 06/14] correct filter by label/annotation

---
 src/app/Topology/Shared/utils.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/Topology/Shared/utils.tsx b/src/app/Topology/Shared/utils.tsx
index 97b25887e..9dab5077f 100644
--- a/src/app/Topology/Shared/utils.tsx
+++ b/src/app/Topology/Shared/utils.tsx
@@ -111,7 +111,7 @@ export const isGroupNodeFiltered = (
   }
   if (filter.Label && filter.Label.length) {
     matched =
-      matched && Object.entries(groupNode.labels).filter(([k, v]) => filter.Label.includes(`${k}=${v}`)).length > 0;
+      matched && groupNode.labels.map((kv) => `${kv.key}=${kv.value}`).filter((v) => filter.Label.includes(v)).length > 0;
   }
   return matched;
 };
@@ -132,14 +132,14 @@ export const isTargetNodeFiltered = ({ target }: TargetNode, filters?: TopologyF
   }
   if (filters.Label && filters.Label.length) {
     matched =
-      matched && Object.entries(target.labels || {}).filter(([k, v]) => filters.Label.includes(`${k}=${v}`)).length > 0;
+      matched && target.labels.map((kv) => `${kv.key}=${kv.value}`).some((v) => filters.Label.includes(v));
   }
   if (filters.Annotation && filters.Annotation.length) {
     const annotations = target.annotations;
     matched =
       matched &&
-      [...Object.entries(annotations?.cryostat || {}), ...Object.entries(annotations?.platform || {})].filter(
-        ([k, v]) => filters.Annotation.includes(`${k}=${v}`),
+      [...annotations?.cryostat, ...annotations?.platform].filter(
+        (kv) => filters.Annotation.includes(`${kv.key}=${kv.value}`),
       ).length > 0;
   }
   return matched;

From fa5ca48472e2df57029f8fe720ff373b7070e870 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 12:29:00 -0400
Subject: [PATCH 07/14] refactor

---
 src/app/Shared/Services/api.types.ts         |  4 ++++
 src/app/Topology/Shared/utils.tsx            | 14 ++++++--------
 src/app/Topology/Toolbar/TopologyFilters.tsx |  4 ++--
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/app/Shared/Services/api.types.ts b/src/app/Shared/Services/api.types.ts
index c70c37a60..99ba8f6f1 100644
--- a/src/app/Shared/Services/api.types.ts
+++ b/src/app/Shared/Services/api.types.ts
@@ -32,6 +32,10 @@ export const isKeyValue = (o: any): o is KeyValue => {
   return typeof o === 'object' && _.isEqual(new Set(['key', 'value']), new Set(Object.getOwnPropertyNames(o)));
 };
 
+export const keyValueToString = (kv: KeyValue): string => {
+  return `${kv.key}=${kv.value}`;
+};
+
 export interface Metadata {
   labels: KeyValue[];
 }
diff --git a/src/app/Topology/Shared/utils.tsx b/src/app/Topology/Shared/utils.tsx
index 9dab5077f..51a5e0d7f 100644
--- a/src/app/Topology/Shared/utils.tsx
+++ b/src/app/Topology/Shared/utils.tsx
@@ -17,7 +17,7 @@
 import { JmxAuthDescription } from '@app/Shared/Components/JmxAuthDescription';
 import { JmxSslDescription } from '@app/Shared/Components/JmxSslDescription';
 import { TopologyFilters } from '@app/Shared/Redux/Filters/TopologyFilterSlice';
-import { NodeType, EnvironmentNode, TargetNode } from '@app/Shared/Services/api.types';
+import { NodeType, EnvironmentNode, TargetNode, keyValueToString } from '@app/Shared/Services/api.types';
 import { DEFAULT_EMPTY_UNIVERSE, isTargetNode } from '@app/Shared/Services/api.utils';
 import {
   Button,
@@ -110,8 +110,7 @@ export const isGroupNodeFiltered = (
     matched = matched && filter.Name.includes(groupNode.name);
   }
   if (filter.Label && filter.Label.length) {
-    matched =
-      matched && groupNode.labels.map((kv) => `${kv.key}=${kv.value}`).filter((v) => filter.Label.includes(v)).length > 0;
+    matched = matched && groupNode.labels.map(keyValueToString).some((v) => filter.Label.includes(v));
   }
   return matched;
 };
@@ -131,16 +130,15 @@ export const isTargetNodeFiltered = ({ target }: TargetNode, filters?: TopologyF
     matched = matched && target.jvmId !== undefined && filters.JvmId.includes(target.jvmId);
   }
   if (filters.Label && filters.Label.length) {
-    matched =
-      matched && target.labels.map((kv) => `${kv.key}=${kv.value}`).some((v) => filters.Label.includes(v));
+    matched = matched && target.labels.map(keyValueToString).some((v) => filters.Label.includes(v));
   }
   if (filters.Annotation && filters.Annotation.length) {
     const annotations = target.annotations;
     matched =
       matched &&
-      [...annotations?.cryostat, ...annotations?.platform].filter(
-        (kv) => filters.Annotation.includes(`${kv.key}=${kv.value}`),
-      ).length > 0;
+      [...annotations?.cryostat, ...annotations?.platform].some((kv) =>
+        filters.Annotation.includes(keyValueToString(kv)),
+      );
   }
   return matched;
 };
diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
index 25a7e3ce6..ddb4109ba 100644
--- a/src/app/Topology/Toolbar/TopologyFilters.tsx
+++ b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -25,7 +25,7 @@ import {
   topologyUpdateCategoryIntent,
   topologyUpdateCategoryTypeIntent,
 } from '@app/Shared/Redux/ReduxStore';
-import { EnvironmentNode, TargetNode, isKeyValue } from '@app/Shared/Services/api.types';
+import { EnvironmentNode, TargetNode, isKeyValue, keyValueToString } from '@app/Shared/Services/api.types';
 import { flattenTree, getUniqueNodeTypes, isTargetNode } from '@app/Shared/Services/api.utils';
 import { getDisplayFieldName } from '@app/utils/utils';
 import {
@@ -355,7 +355,7 @@ export const fieldValueToStrings = (value: unknown): string[] => {
     if (Array.isArray(value)) {
       if (value.length > 0 && typeof value[0] === 'object') {
         if (isKeyValue(value[0])) {
-          return value.map((o) => `${o.key}=${o.value}`);
+          return value.map(keyValueToString);
         } else {
           return value.map((o) => {
             let str = '';

From 8b01ada6e331132996339568cbb5d80860f61b0a Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 14:32:46 -0400
Subject: [PATCH 08/14] use util function

---
 src/app/Topology/Entity/EntityAnnotations.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/Topology/Entity/EntityAnnotations.tsx b/src/app/Topology/Entity/EntityAnnotations.tsx
index 06f715342..bcb00307b 100644
--- a/src/app/Topology/Entity/EntityAnnotations.tsx
+++ b/src/app/Topology/Entity/EntityAnnotations.tsx
@@ -17,6 +17,7 @@ import { Label, LabelGroup } from '@patternfly/react-core';
 import * as React from 'react';
 import { EmptyText } from '../../Shared/Components/EmptyText';
 import { Annotations } from './types';
+import { keyValueToString } from '@app/Shared/Services/api.types';
 
 export const EntityAnnotations: React.FC<{ annotations?: Annotations; maxDisplay?: number }> = ({
   annotations,
@@ -27,7 +28,7 @@ export const EntityAnnotations: React.FC<{ annotations?: Annotations; maxDisplay
     return annotations
       ? Object.keys(annotations).map((groupK) => ({
           groupLabel: groupK,
-          annotations: annotations[groupK].map((kv) => `${kv.key}=${kv.value}`),
+          annotations: annotations[groupK].map((kv) => keyValueToString(kv)),
         }))
       : [];
   }, [annotations]);

From 8a8f65a1d1cb0ea8637d65fb765131d0a169b5a4 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 14:35:09 -0400
Subject: [PATCH 09/14] cleanup

---
 src/app/Shared/Services/api.types.ts          | 2 +-
 src/app/Topology/Entity/EntityAnnotations.tsx | 2 +-
 src/app/Topology/Toolbar/TopologyFilters.tsx  | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/Shared/Services/api.types.ts b/src/app/Shared/Services/api.types.ts
index 99ba8f6f1..71c2d3b5e 100644
--- a/src/app/Shared/Services/api.types.ts
+++ b/src/app/Shared/Services/api.types.ts
@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import _ from 'lodash';
 import { RecordingReplace } from '@app/CreateRecording/types';
 import { AlertVariant } from '@patternfly/react-core';
+import _ from 'lodash';
 import { Observable } from 'rxjs';
 
 export type ApiVersion = 'v1' | 'v2' | 'v2.1' | 'v2.2' | 'v2.3' | 'v2.4' | 'v3' | 'beta';
diff --git a/src/app/Topology/Entity/EntityAnnotations.tsx b/src/app/Topology/Entity/EntityAnnotations.tsx
index bcb00307b..0b139ab99 100644
--- a/src/app/Topology/Entity/EntityAnnotations.tsx
+++ b/src/app/Topology/Entity/EntityAnnotations.tsx
@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { keyValueToString } from '@app/Shared/Services/api.types';
 import { Label, LabelGroup } from '@patternfly/react-core';
 import * as React from 'react';
 import { EmptyText } from '../../Shared/Components/EmptyText';
 import { Annotations } from './types';
-import { keyValueToString } from '@app/Shared/Services/api.types';
 
 export const EntityAnnotations: React.FC<{ annotations?: Annotations; maxDisplay?: number }> = ({
   annotations,
diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
index ddb4109ba..de48aadfc 100644
--- a/src/app/Topology/Toolbar/TopologyFilters.tsx
+++ b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import _ from 'lodash';
 import {
   allowedGroupFilters,
   allowedTargetFilters,

From edd553e83e957d6dd2ffb839527a1e3f96298793 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 14:48:39 -0400
Subject: [PATCH 10/14] refactor

---
 src/app/Topology/Shared/utils.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/Topology/Shared/utils.tsx b/src/app/Topology/Shared/utils.tsx
index 51a5e0d7f..9a8dc9b5f 100644
--- a/src/app/Topology/Shared/utils.tsx
+++ b/src/app/Topology/Shared/utils.tsx
@@ -110,7 +110,7 @@ export const isGroupNodeFiltered = (
     matched = matched && filter.Name.includes(groupNode.name);
   }
   if (filter.Label && filter.Label.length) {
-    matched = matched && groupNode.labels.map(keyValueToString).some((v) => filter.Label.includes(v));
+    matched = matched && groupNode.labels.some((kv) => filter.Label.includes(keyValueToString(kv)));
   }
   return matched;
 };
@@ -130,7 +130,7 @@ export const isTargetNodeFiltered = ({ target }: TargetNode, filters?: TopologyF
     matched = matched && target.jvmId !== undefined && filters.JvmId.includes(target.jvmId);
   }
   if (filters.Label && filters.Label.length) {
-    matched = matched && target.labels.map(keyValueToString).some((v) => filters.Label.includes(v));
+    matched = matched && target.labels.some((kv) => filters.Label.includes(keyValueToString(kv)));
   }
   if (filters.Annotation && filters.Annotation.length) {
     const annotations = target.annotations;

From c4b664381c36a1df32b368926e0a26ccaffa7f1c Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 14:58:12 -0400
Subject: [PATCH 11/14] label truncation

---
 src/app/RecordingMetadata/ClickableLabel.tsx |  1 +
 src/app/Topology/Toolbar/TopologyFilters.tsx | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app/RecordingMetadata/ClickableLabel.tsx b/src/app/RecordingMetadata/ClickableLabel.tsx
index 72113c72f..c68108280 100644
--- a/src/app/RecordingMetadata/ClickableLabel.tsx
+++ b/src/app/RecordingMetadata/ClickableLabel.tsx
@@ -55,6 +55,7 @@ export const ClickableLabel: React.FC<ClickableLabelCellProps> = ({ label, isSel
         onClick={handleLabelClicked}
         key={label.key}
         color={labelColor}
+        isTruncated
       >
         {`${label.key}: ${label.value}`}
       </Label>
diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
index de48aadfc..cc9fb1773 100644
--- a/src/app/Topology/Toolbar/TopologyFilters.tsx
+++ b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -212,7 +212,13 @@ export const TopologyFilter: React.FC<{ isDisabled?: boolean }> = ({ isDisabled,
                   },
                 }}
               >
-                {isLabelOrAnnotation(cat) ? <Label color="grey">{opt}</Label> : opt}
+                {isLabelOrAnnotation(cat) ? (
+                  <Label color="grey" isTruncated>
+                    {opt}
+                  </Label>
+                ) : (
+                  opt
+                )}
               </SelectOption>
             ))}
           </SelectGroup>
@@ -285,7 +291,13 @@ export const TopologyFilter: React.FC<{ isDisabled?: boolean }> = ({ isDisabled,
               },
             }}
           >
-            {isLabelOrAnnotation(cat) ? <Label color="grey">{opt}</Label> : opt}
+            {isLabelOrAnnotation(cat) ? (
+              <Label color="grey" isTruncated>
+                {opt}
+              </Label>
+            ) : (
+              opt
+            )}
           </SelectOption>
         );
       });

From a41157a2b13a1474be682c6acdc03db5045ad43d Mon Sep 17 00:00:00 2001
From: Andrew Azores <me@andrewazor.es>
Date: Tue, 30 Jul 2024 14:59:41 -0400
Subject: [PATCH 12/14] filter value comparison

Co-authored-by: Thuan Vo <thuan.votann@gmail.com>
Signed-off-by: Andrew Azores <me@andrewazor.es>
---
 src/app/Topology/Toolbar/TopologyFilters.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
index cc9fb1773..9a1100658 100644
--- a/src/app/Topology/Toolbar/TopologyFilters.tsx
+++ b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -279,7 +279,7 @@ export const TopologyFilter: React.FC<{ isDisabled?: boolean }> = ({ isDisabled,
               toString: () => opt,
               compareTo: (other) => {
                 const regex = new RegExp(
-                  typeof other === 'string' ? other : isKeyValue(other) ? other.value : `${other}`,
+                  typeof other === 'string' ? other : isKeyValue(other) ? keyValueToString(other): `${other}`,
                   'i',
                 );
                 return regex.test(opt);

From 651b27f60aad95dc209de8ef3862d7a135998ff2 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 15:00:43 -0400
Subject: [PATCH 13/14] Revert "label truncation"

This reverts commit c4b664381c36a1df32b368926e0a26ccaffa7f1c.
---
 src/app/RecordingMetadata/ClickableLabel.tsx |  1 -
 src/app/Topology/Toolbar/TopologyFilters.tsx | 16 ++--------------
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/app/RecordingMetadata/ClickableLabel.tsx b/src/app/RecordingMetadata/ClickableLabel.tsx
index c68108280..72113c72f 100644
--- a/src/app/RecordingMetadata/ClickableLabel.tsx
+++ b/src/app/RecordingMetadata/ClickableLabel.tsx
@@ -55,7 +55,6 @@ export const ClickableLabel: React.FC<ClickableLabelCellProps> = ({ label, isSel
         onClick={handleLabelClicked}
         key={label.key}
         color={labelColor}
-        isTruncated
       >
         {`${label.key}: ${label.value}`}
       </Label>
diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
index 9a1100658..a21f3bf48 100644
--- a/src/app/Topology/Toolbar/TopologyFilters.tsx
+++ b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -212,13 +212,7 @@ export const TopologyFilter: React.FC<{ isDisabled?: boolean }> = ({ isDisabled,
                   },
                 }}
               >
-                {isLabelOrAnnotation(cat) ? (
-                  <Label color="grey" isTruncated>
-                    {opt}
-                  </Label>
-                ) : (
-                  opt
-                )}
+                {isLabelOrAnnotation(cat) ? <Label color="grey">{opt}</Label> : opt}
               </SelectOption>
             ))}
           </SelectGroup>
@@ -291,13 +285,7 @@ export const TopologyFilter: React.FC<{ isDisabled?: boolean }> = ({ isDisabled,
               },
             }}
           >
-            {isLabelOrAnnotation(cat) ? (
-              <Label color="grey" isTruncated>
-                {opt}
-              </Label>
-            ) : (
-              opt
-            )}
+            {isLabelOrAnnotation(cat) ? <Label color="grey">{opt}</Label> : opt}
           </SelectOption>
         );
       });

From f6a6dd26e5a3f3d507a5cb1f09e492d7bac5e27d Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 30 Jul 2024 15:03:51 -0400
Subject: [PATCH 14/14] prettier

---
 src/app/Topology/Toolbar/TopologyFilters.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
index a21f3bf48..564aa70ce 100644
--- a/src/app/Topology/Toolbar/TopologyFilters.tsx
+++ b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -273,7 +273,7 @@ export const TopologyFilter: React.FC<{ isDisabled?: boolean }> = ({ isDisabled,
               toString: () => opt,
               compareTo: (other) => {
                 const regex = new RegExp(
-                  typeof other === 'string' ? other : isKeyValue(other) ? keyValueToString(other): `${other}`,
+                  typeof other === 'string' ? other : isKeyValue(other) ? keyValueToString(other) : `${other}`,
                   'i',
                 );
                 return regex.test(opt);