diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md index a8cb90d441..d44d5dd90c 100644 --- a/ui/CHANGELOG.md +++ b/ui/CHANGELOG.md @@ -8,6 +8,7 @@ All notable changes to the **Prowler UI** are documented in this file. - Add a new chart to show the split between passed and failed findings. [(#7680)](https://github.com/prowler-cloud/prowler/pull/7680) - Added `Accordion` component. [(#7700)](https://github.com/prowler-cloud/prowler/pull/7700) +- Improve `Provider UID` filter by adding more context and enhancing the UI/UX. [(#7741)](https://github.com/prowler-cloud/prowler/pull/7741) - Added an AWS CloudFormation Quick Link to the IAM Role credentials step [(#7735)](https://github.com/prowler-cloud/prowler/pull/7735) ### 🐞 Fixes diff --git a/ui/app/(prowler)/findings/page.tsx b/ui/app/(prowler)/findings/page.tsx index 0ddf609b6e..a894210fa8 100644 --- a/ui/app/(prowler)/findings/page.tsx +++ b/ui/app/(prowler)/findings/page.tsx @@ -14,7 +14,7 @@ import { import { ContentLayout } from "@/components/ui"; import { DataTable, DataTableFilterCustom } from "@/components/ui/table"; import { createDict } from "@/lib"; -import { ProviderProps } from "@/types"; +import { ProviderAccountProps, ProviderProps } from "@/types"; import { FindingProps, ScanProps, SearchParamsProps } from "@/types/components"; export default async function Findings({ @@ -73,14 +73,29 @@ export default async function Findings({ // Get findings data // Extract provider UIDs - const providerUIDs = Array.from( + const providerUIDs: string[] = Array.from( new Set( providersData?.data - ?.map((provider: ProviderProps) => provider.attributes.uid) + ?.map((provider: ProviderProps) => provider.attributes?.uid) .filter(Boolean), ), ); + const providerDetails: Array<{ [uid: string]: ProviderAccountProps }> = + providerUIDs.map((uid) => { + const provider = providersData.data.find( + (p: { attributes: { uid: string } }) => p.attributes?.uid === uid, + ); + + return { + [uid]: { + provider: provider?.attributes?.provider || "", + uid: uid, + alias: provider?.attributes?.alias ?? null, + }, + }; + }); + // Extract scan UUIDs with "completed" state and more than one resource const completedScans = scansData?.data ?.filter( @@ -122,6 +137,7 @@ export default async function Findings({ key: "provider_uid__in", labelCheckboxGroup: "Provider UID", values: providerUIDs, + valueLabelMapping: providerDetails, }, { key: "scan__in", diff --git a/ui/components/ui/custom/custom-dropdown-filter.tsx b/ui/components/ui/custom/custom-dropdown-filter.tsx index 7f659d9c13..ee18bab9bc 100644 --- a/ui/components/ui/custom/custom-dropdown-filter.tsx +++ b/ui/components/ui/custom/custom-dropdown-filter.tsx @@ -18,6 +18,8 @@ import { PlusCircleIcon } from "@/components/icons"; import { useUrlFilters } from "@/hooks/use-url-filters"; import { CustomDropdownFilterProps } from "@/types"; +import { EntityInfoShort } from "../entities"; + const filterSelectedClass = "inline-flex items-center border py-1 text-xs transition-colors border-transparent bg-default-500 text-secondary-foreground hover:bg-default-500/80 rounded-md px-2 font-normal"; @@ -192,18 +194,35 @@ export const CustomDropdownFilter: React.FC = ({ hideScrollBar className="flex max-h-96 max-w-56 flex-col gap-y-2 py-2" > - {memoizedFilterValues.map((value) => ( - - {value} - - ))} + {memoizedFilterValues.map((value) => { + // Find the corresponding entity from valueLabelMapping + const matchingEntry = filter.valueLabelMapping?.find( + (entry) => entry[value], + ); + const entity = matchingEntry?.[value]; + + return ( + + {entity ? ( + + ) : ( + value + )} + + ); + })} diff --git a/ui/types/filters.ts b/ui/types/filters.ts index 944706f7aa..a8fb78dde9 100644 --- a/ui/types/filters.ts +++ b/ui/types/filters.ts @@ -1,7 +1,10 @@ +import { ProviderAccountProps } from "./providers"; + export interface FilterOption { key: string; labelCheckboxGroup: string; values: string[]; + valueLabelMapping?: Array<{ [uid: string]: ProviderAccountProps }>; } export interface CustomDropdownFilterProps { diff --git a/ui/types/providers.ts b/ui/types/providers.ts index 50353125e7..6bac15262c 100644 --- a/ui/types/providers.ts +++ b/ui/types/providers.ts @@ -45,6 +45,12 @@ export interface ProviderProps { groupNames?: string[]; } +export interface ProviderAccountProps { + provider: ProviderType; + uid: string; + alias: string; +} + export interface ProviderOverviewProps { data: { type: "provider-overviews";