✨ adding filter& sort by analysis to Application-inventory table (#2100)

Resolves: #1745 Adding the ability to sort and filter by analysis status in the application inventory table. --------- Signed-off-by: HadasahR <[email protected]> Signed-off-by: Maayan Hadasi <[email protected]> Co-authored-by: Maayan Hadasi <[email protected]>
konveyor · Jan 30, 2025 · a5bb449 · a5bb449
1 parent 1b95d56
commit a5bb449
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -48,7 +48,11 @@ import {
 import { ToolbarBulkSelector } from "@app/components/ToolbarBulkSelector";
 import { ConfirmDialog } from "@app/components/ConfirmDialog";
 import { NotificationsContext } from "@app/components/NotificationsContext";
-import { formatPath, getAxiosErrorMessage } from "@app/utils/utils";
+import {
+  formatPath,
+  getAxiosErrorMessage,
+  universalComparator,
+} from "@app/utils/utils";
 import { Paths } from "@app/Paths";
 import keycloak from "@app/keycloak";
 import {
@@ -72,7 +76,7 @@ import { useLocalTableControls } from "@app/hooks/table-controls";
 
 // Queries
 import { getArchetypeById, getAssessmentsByItemId } from "@app/api/rest";
-import { Assessment, Ref } from "@app/api/models";
+import { Assessment, Ref, TaskState } from "@app/api/models";
 import {
   useBulkDeleteApplicationMutation,
   useFetchApplications,
@@ -89,7 +93,10 @@ import { useFetchTagsWithTagItems } from "@app/queries/tags";
 
 // Relative components
 import { AnalysisWizard } from "../analysis-wizard/analysis-wizard";
-import { ApplicationAnalysisStatus } from "../components/application-analysis-status";
+import {
+  ApplicationAnalysisStatus,
+  mapAnalysisStateToLabel,
+} from "../components/application-analysis-status";
 import { ApplicationAssessmentStatus } from "../components/application-assessment-status";
 import { ApplicationBusinessService } from "../components/application-business-service";
 import { ApplicationDependenciesForm } from "@app/components/ApplicationDependenciesFormContainer/ApplicationDependenciesForm";
@@ -362,7 +369,7 @@ export const ApplicationsTable: React.FC = () => {
       sort: "sessionStorage",
     },
     isLoading: isFetchingApplications,
-    sortableColumns: ["name", "businessService", "tags", "effort"],
+    sortableColumns: ["name", "businessService", "tags", "effort", "analysis"],
     initialSort: { columnKey: "name", direction: "asc" },
     initialColumns: {
       name: { isIdentity: true },
@@ -372,6 +379,10 @@ export const ApplicationsTable: React.FC = () => {
       businessService: app.businessService?.name || "",
       tags: app.tags?.length || 0,
       effort: app.effort || 0,
+      analysis: mapAnalysisStateToLabel(
+        (app.tasks.currentAnalyzer?.state as TaskState) || "No task",
+        t
+      ),
     }),
     filterCategories: [
       {
@@ -526,7 +537,28 @@ export const ApplicationsTable: React.FC = () => {
         ],
         getItemValue: (item) => normalizeRisk(item.risk) ?? "",
       },
+
+      {
+        categoryKey: "analysis",
+        title: t("terms.analysis"),
+        type: FilterType.multiselect,
+        placeholderText:
+          t("actions.filterBy", {
+            what: t("terms.analysis").toLowerCase(),
+          }) + "...",
+
+        selectOptions: applications
+          .map((a) => {
+            const value = a.tasks.currentAnalyzer?.state || "No task";
+            const label = mapAnalysisStateToLabel(value as TaskState, t);
+            return { value, label };
+          })
+          .filter((v, i, a) => a.findIndex((v2) => v2.label === v.label) === i)
+          .sort((a, b) => universalComparator(a.label, b.label)),
+        getItemValue: (item) => item.tasks.currentAnalyzer?.state || "No task",
+      },
     ],
+
     initialItemsPerPage: 10,
     hasActionsColumn: true,
     isSelectionEnabled: true,

diff --git a/client/src/app/pages/applications/components/application-analysis-status.tsx b/client/src/app/pages/applications/components/application-analysis-status.tsx
@@ -10,7 +10,7 @@ export interface ApplicationAnalysisStatusProps {
   state: TaskState;
 }
 
-const taskStateToAnalyze: Map<TaskState, IconedStatusPreset> = new Map([
+export const taskStateToAnalyze: Map<TaskState, IconedStatusPreset> = new Map([
   ["not supported", "Canceled"],
   ["Canceled", "Canceled"],
   ["Created", "Scheduled"],
@@ -39,10 +39,10 @@ export const ApplicationAnalysisStatus: React.FC<
 };
 
 export const mapAnalysisStateToLabel = (
-  value: TaskState,
+  state: TaskState,
   t: (key: string) => string
 ) => {
-  const presetKey: IconedStatusPreset = getTaskStatus(value);
+  const presetKey: IconedStatusPreset = getTaskStatus(state);
   const presets = buildPresetLabels(t);
   const label = presets[presetKey]?.label ?? presets.Unknown.label;
   return label;