✨ adding filter& sort by analysis to Application-inventory table

[HadasahR]

Resolves: #1745

Adding the ability to sort and filter by analysis status in the application inventory table.
before the change:

after the change :

UI test PR: konveyor/tackle-ui-tests#1238
this PR is using functions added in #2152

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 41.97%. Comparing base (b654645) to head (f31bdb3).
Report is 250 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2100      +/-   ##
==========================================
+ Coverage   39.20%   41.97%   +2.77%     
==========================================
  Files         146      175      +29     
  Lines        4857     5644     +787     
  Branches     1164     1343     +179     
==========================================
+ Hits         1904     2369     +465     
- Misses       2939     3259     +320     
- Partials       14       16       +2     

Flag	Coverage Δ
client	41.97% <ø> (+2.77%)	⬆️
server	?

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[rszwajko]

The code for new functionality is added in the correct places but there are some problems with mapping state values. Unfortunately adding code to legacy class of this size is never easy :)

General comments:

1. wording: the PR title is OK (you could start with a capital letter though), the description is repeating the title so you could skip it. However leave a link to the issue/bug you are fixing i.e. Resolves: [BUG] Need to be able to filter & sort by application analysis status #1745 . In git history you will find some examples
2. check out your IDE configuration - it seems the IDE is not auto-formatting on save action. We have a script for linting - run from command line (in the project root) npm run lint . You will see the list of all violations (we somehow accumulated few of them). Then you can fix (only) yours. General cleanup is a candidate for another PR (npm run lint -- --fix will auto-fix all easy formatting problems in the whole project)

[HadasahR]

Thanks, I'll check it out. ‫בתאריך יום ה׳, 26 בספט׳ 2024 ב-23:14 מאת ‪Radoslaw Szwajkowski‬‏ <‪ ***@***.***‬‏>:‬

…

***@***.**** requested changes on this pull request. The code for new functionality is added in the correct places but there are some problems with mapping state values. Unfortunately adding code to legacy class of this size is never easy :) General comments: 1. wording: the PR title is OK (you could start with a capital letter though), the description is repeating the title so you could skip it. However leave a link to the issue/bug you are fixing i.e. Resolves: #1745 <#1745> . In git history you will find some examples 2. check out your IDE configuration - it seems the IDE is not auto-formatting on save action. We have a script for linting - run from command line (in the project root) npm run lint . You will see the list of all violations (we somehow accumulated few of them). Then you can fix (only) yours. General cleanup is a candidate for another PR (npm run lint -- --fix will auto-fix all easy formatting problems in the whole project) ------------------------------ In client/src/app/pages/applications/applications-table/applications-table.tsx <#2100 (comment)>: > @@ -345,6 +348,7 @@ export const ApplicationsTable: React.FC = () => { businessService: app.businessService?.name || "", tags: app.tags?.length || 0, effort: app.effort || 0, + analysis:app.tasks.currentAnalyzer?.state || "" Sort values need to be the same as the values visible to the user. Otherwise the sort order may feel "random". ------------------------------ In client/src/app/pages/applications/applications-table/applications-table.tsx <#2100 (comment)>: > @@ -499,7 +503,24 @@ 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: Array.from(taskStateToAnalyze).map( + ([taskState, displayStatus]) => ({ Unfortunately few values are mapped to the same value (see the screenshot below). You could remove duplicates in few ways but using a library is probably the fastest - an example from our code base. Note also that the values get sorted before the display. Screenshot.from.2024-09-26.21-26-22.png (view on web) <https://github.com/user-attachments/assets/d40772f2-8ff7-4684-8b33-d6cfaf63a9b5> ------------------------------ In client/src/app/pages/applications/applications-table/applications-table.tsx <#2100 (comment)>: > @@ -499,7 +503,24 @@ 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: Array.from(taskStateToAnalyze).map( + ([taskState, displayStatus]) => ({ + value: taskState, + label: t(`${displayStatus}`), The displayed values should match the values that the user sees in the table. Here the things get a bit tricky. Basically you need to repeat the same flow as done in the table by ApplicationAnalysisStatus component <https://github.com/konveyor/tackle2-ui/blob/c04bb35390b3bd06e425dc8cead7cd92df2dd478/client/src/app/pages/applications/applications-table/applications-table.tsx#L929>. There the received state is mapped via taskStateToAnalyze BUT later on inside IconedStatus <https://github.com/konveyor/tackle2-ui/blob/c04bb35390b3bd06e425dc8cead7cd92df2dd478/client/src/app/components/Icons/IconedStatus.tsx#L69> it's mapped again - the label value is the value that the user sees. ------------------------------ In client/src/app/pages/applications/applications-table/applications-table.tsx <#2100 (comment)>: > @@ -499,7 +503,24 @@ 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: Array.from(taskStateToAnalyze).map( + ([taskState, displayStatus]) => ({ + value: taskState, + label: t(`${displayStatus}`), + }) + ), + getItemValue: (item) => item?.tasks.currentAnalyzer?.state || "No Task", The value here should match the value prop in the selectOptions list. If this would not work please let me know - there are more options. — Reply to this email directly, view it on GitHub <#2100 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFOSM5AKDARWL6MXDB3TKVLZYRTK7AVCNFSM6AAAAABONHNEEKVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDGMZSGIYTOMJVGE> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>

[rszwajko]

The PR is going the right direction but it needs a preliminary refactoring - extracting presets creation to a re-usable function . I recommend to create a small PR for that and then re-use this functionality in this PR. Ping me if you need help with that.

[sshveta]

@rszwajko @sjd78 Can we please review/merge these PRs .

[rszwajko]

Looks good! One minor comment (see below). It would be also nice to add a final screenshot of this feature (the existing ones are outdated)

[mguetta1]

Video_2025-01-30_13-43-21.mp4