Extend filtering in the Set Target step

Added filters: 1. by name (freetext search) 2. by custom target (yes/no select) 3. by labels (multiselect) Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>
konveyor · Sep 16, 2024 · b1a8ee4 · b1a8ee4
1 parent f389539
commit b1a8ee4
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 3 deletions.
diff --git a/client/src/app/pages/applications/analysis-wizard/set-targets.tsx b/client/src/app/pages/applications/analysis-wizard/set-targets.tsx
@@ -25,6 +25,8 @@ import { useLocalTableControls } from "@app/hooks/table-controls";
 import { useSetting } from "@app/queries/settings";
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
 import { StateError } from "@app/components/StateError";
+import { universalComparator } from "@app/utils/utils";
+import { toLabelValue } from "@app/utils/rules-utils";
 
 interface SetTargetsProps {
   applications: Application[];
@@ -177,9 +179,12 @@ const SetTargetsInternal: React.FC<SetTargetsInternalProps> = ({
     tableName: "target-cards",
     items: targets,
     idProperty: "name",
-    initialFilterValues: { name: applicationProviders },
+    initialFilterValues: { provider: applicationProviders },
     columnNames: {
       name: "name",
+      provider: "provider",
+      custom: "custom",
+      labels: "labels",
     },
     isFilterEnabled: true,
     isPaginationEnabled: false,
@@ -200,11 +205,56 @@ const SetTargetsInternal: React.FC<SetTargetsInternalProps> = ({
           value: language,
         })),
         placeholderText: "Filter by language...",
-        categoryKey: "name",
+        categoryKey: "provider",
         title: "Languages",
         type: FilterType.multiselect,
         matcher: (filter, target) => !!target.provider?.includes(filter),
       },
+      {
+        placeholderText: "Filter by name...",
+        categoryKey: "name",
+        title: "Name",
+        type: FilterType.search,
+        matcher: (filter, target) =>
+          !!target.name?.toLowerCase().includes(filter.toLowerCase()),
+      },
+      {
+        placeholderText: "Filter by custom target...",
+        categoryKey: "custom",
+        title: "Custom target",
+        type: FilterType.select,
+        selectOptions: [
+          { value: "true", label: "Yes" },
+          { value: "false", label: "No" },
+        ],
+        matcher: (filter, target) => String(!!target.custom) === filter,
+      },
+      {
+        selectOptions: unique(
+          targets
+            .flatMap(({ labels }) => labels ?? [])
+            .map(({ name, label }) => ({
+              name,
+              label: toLabelValue(label),
+            })),
+          ({ label }) => label
+        )
+          .map(({ label, name }) => ({
+            value: label,
+            label: name,
+            chipLabel: label,
+          }))
+          .sort((a, b) => universalComparator(a.label, b.label)),
+
+        placeholderText: "Filter by labels...",
+        categoryKey: "labels",
+        title: "Labels",
+        type: FilterType.multiselect,
+        matcher: (filter, target) =>
+          (target.labels ?? [])
+            .map(({ label }) => toLabelValue(label))
+            .includes(filter),
+      },
     ],
   });
 

diff --git a/client/src/app/utils/rules-utils.ts b/client/src/app/utils/rules-utils.ts
@@ -105,6 +105,8 @@ interface ParsedLabel {
   labelValue: string;
 }
 
+export const toLabelValue = (label?: string) => label?.split("=").pop() ?? "";
+
 export const getParsedLabel = (label: string | null): ParsedLabel => {
   if (label === null) {
     return {
@@ -116,7 +118,7 @@ export const getParsedLabel = (label: string | null): ParsedLabel => {
   const char1 = label.indexOf("/") + 1;
   const char2 = label.lastIndexOf("=");
   const type = label.substring(char1, char2);
-  const value = label.split("=").pop();
+  const value = toLabelValue(label);
 
   return {
     labelType: type || "",