Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
11a2a98
adding filter by analysis to Application inventory table
HadasahR Sep 18, 2024
c142659
add sort to analysis
HadasahR Sep 22, 2024
185573c
Merge branch 'main' into hadassah_application-inventoy-table-add-filt…
rszwajko Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions client/src/app/pages/applications/applications-table/applications-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,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,
taskStateToAnalyze,
} 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";
Expand Down Expand Up @@ -335,7 +338,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 },
Expand All @@ -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 || ""
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sort values need to be the same as the values visible to the user. Otherwise the sort order may feel "random".

}),
filterCategories: [
{
Expand Down Expand Up @@ -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]) => ({
Copy link
Collaborator

@rszwajko rszwajko Sep 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 - here's an example from our code base. Note also that the values get sorted before the display.
Screenshot from 2024-09-26 21-26-22

value: taskState,
label: t(`${displayStatus}`),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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. There the received state is mapped via taskStateToAnalyze BUT later on inside IconedStatus
it's mapped again - the label value is the value that the user sees.

})
),
getItemValue: (item) => item?.tasks.currentAnalyzer?.state || "No Task",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

},
],

initialItemsPerPage: 10,
hasActionsColumn: true,
isSelectionEnabled: true,
Expand Down
2 changes: 1 addition & 1 deletion client/src/app/pages/applications/components/application-analysis-status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,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"],
Expand Down
Loading