fix(topology): nodes can be filtered by label/annotation

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,14 @@
   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 const keyValueToString = (kv: KeyValue): string => {
+  return `${kv.key}=${kv.value}`;
+};
+
 export interface Metadata {
   labels: KeyValue[];
 }

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 && Object.entries(groupNode.labels).filter(([k, v]) => filter.Label.includes(`${k}=${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 && Object.entries(target.labels || {}).filter(([k, v]) => filters.Label.includes(`${k}=${v}`)).length > 0;
+    matched = matched && target.labels.map(keyValueToString).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}`),
-      ).length > 0;
+      [...annotations?.cryostat, ...annotations?.platform].some((kv) =>
+        filters.Annotation.includes(keyValueToString(kv)),
+      );
   }
   return matched;
 };

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,
@@ -24,7 +25,7 @@
   topologyUpdateCategoryIntent,
   topologyUpdateCategoryTypeIntent,
 } from '@app/Shared/Redux/ReduxStore';
-import { EnvironmentNode, TargetNode } 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 {
@@ -272,7 +273,10 @@
             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);
               },
               ...{
@@ -349,6 +353,19 @@
   }
   if (typeof value === 'object') {
     if (Array.isArray(value)) {
+      if (value.length > 0 && typeof value[0] === 'object') {
+        if (isKeyValue(value[0])) {
+          return value.map(keyValueToString);
+        } 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}`);