fix(ui): filter Risk Pipeline chart by selected providers and show zero-data legends (#9340)

Author: Alan-TheGentleman

ui/actions/overview/sankey.adapter.ts

@@ -16,9 +16,21 @@ export interface SankeyLink {
   value: number;
 }
 
+export interface ZeroDataProvider {
+  id: string;
+  displayName: string;
+}
+
 export interface SankeyData {
   nodes: SankeyNode[];
   links: SankeyLink[];
+  zeroDataProviders: ZeroDataProvider[];
+}
+
+export interface SankeyFilters {
+  providerTypes?: string[];
+  /** All selected provider types - used to show missing providers in legend */
+  allSelectedProviderTypes?: string[];
 }
 
 interface AggregatedProvider {
@@ -66,22 +78,86 @@ const SEVERITY_ORDER = [
 /**
  * Adapts providers overview and findings severity API responses to Sankey chart format.
  * Severity distribution is calculated proportionally based on each provider's fail count.
+ *
+ * @param providersResponse - The providers overview API response
+ * @param severityResponse - The findings severity API response
+ * @param filters - Optional filters to restrict which providers are shown.
+ *                  When filters are set, only selected providers are shown.
+ *                  When no filters, all providers are shown.
  */
 export function adaptProvidersOverviewToSankey(
   providersResponse: ProvidersOverviewResponse | undefined,
   severityResponse?: FindingsSeverityOverviewResponse | undefined,
+  filters?: SankeyFilters,
 ): SankeyData {
   if (!providersResponse?.data || providersResponse.data.length === 0) {
-    return { nodes: [], links: [] };
+    return { nodes: [], links: [], zeroDataProviders: [] };
   }
 
   const aggregatedProviders = aggregateProvidersByType(providersResponse.data);
-  const providersWithFailures = aggregatedProviders.filter((p) => p.fail > 0);
 
+  // Filter providers based on selection:
+  // - If providerTypes filter is set: show only those provider types
+  // - Otherwise: show all providers from the API response
+  const hasProviderTypeFilter =
+    filters?.providerTypes && filters.providerTypes.length > 0;
+
+  let providersToShow: AggregatedProvider[];
+  if (hasProviderTypeFilter) {
+    // Show only selected provider types
+    providersToShow = aggregatedProviders.filter((p) =>
+      filters.providerTypes!.includes(p.id.toLowerCase()),
+    );
+  } else {
+    // No provider type filter - show all providers from the API response
+    // Providers with no findings (pass=0, fail=0) will appear in the legend
+    providersToShow = aggregatedProviders;
+  }
+
+  if (providersToShow.length === 0) {
+    return { nodes: [], links: [], zeroDataProviders: [] };
+  }
+
+  // Separate providers with and without failures
+  const providersWithFailures = providersToShow.filter((p) => p.fail > 0);
+  const providersWithoutFailures = providersToShow.filter((p) => p.fail === 0);
+
+  // Zero-data providers to show as legends below the chart
+  const zeroDataProviders: ZeroDataProvider[] = providersWithoutFailures.map(
+    (p) => ({
+      id: p.id,
+      displayName: p.displayName,
+    }),
+  );
+
+  // Add selected provider types that are completely missing from API response
+  // (these are providers with zero findings - not even in the response)
+  if (
+    filters?.allSelectedProviderTypes &&
+    filters.allSelectedProviderTypes.length > 0
+  ) {
+    const existingProviderIds = new Set(
+      aggregatedProviders.map((p) => p.id.toLowerCase()),
+    );
+
+    for (const selectedType of filters.allSelectedProviderTypes) {
+      const normalizedType = selectedType.toLowerCase();
+      if (!existingProviderIds.has(normalizedType)) {
+        // This provider type was selected but has no data at all
+        zeroDataProviders.push({
+          id: normalizedType,
+          displayName: getProviderDisplayName(normalizedType),
+        });
+      }
+    }
+  }
+
+  // If no providers have failures, return empty chart with legends
   if (providersWithFailures.length === 0) {
-    return { nodes: [], links: [] };
+    return { nodes: [], links: [], zeroDataProviders };
   }
 
+  // Only include providers WITH failures in the chart
   const providerNodes: SankeyNode[] = providersWithFailures.map((p) => ({
     name: p.displayName,
   }));
@@ -136,5 +212,5 @@ export function adaptProvidersOverviewToSankey(
     });
   }
 
-  return { nodes, links };
+  return { nodes, links, zeroDataProviders };
 }

ui/app/(prowler)/_new-overview/components/graphs-tabs/risk-pipeline-view/risk-pipeline-view.ssr.tsx

@@ -2,7 +2,9 @@ import {
   adaptProvidersOverviewToSankey,
   getFindingsBySeverity,
   getProvidersOverview,
+  SankeyFilters,
 } from "@/actions/overview";
+import { getProviders } from "@/actions/providers";
 import { SankeyChart } from "@/components/graphs/sankey-chart";
 import { SearchParamsProps } from "@/types";
 
@@ -15,30 +17,98 @@ export async function RiskPipelineViewSSR({
 }) {
   const filters = pickFilterParams(searchParams);
 
-  // Fetch both endpoints in parallel
-  const [providersResponse, severityResponse] = await Promise.all([
-    getProvidersOverview({ filters }),
-    getFindingsBySeverity({ filters }),
-  ]);
+  // Check if any provider/account filter is active
+  const providerTypeFilter = filters["filter[provider_type__in]"];
+  const providerIdFilter = filters["filter[provider_id__in]"];
+
+  // Fetch data in parallel
+  const [providersResponse, severityResponse, providersListResponse] =
+    await Promise.all([
+      getProvidersOverview({ filters }),
+      getFindingsBySeverity({ filters }),
+      // Only fetch providers list if we need to look up account IDs
+      providerIdFilter && !providerTypeFilter
+        ? getProviders({ pageSize: 200 })
+        : Promise.resolve(null),
+    ]);
+
+  // Determine provider types to show
+  let providerTypesToShow: string[] | undefined;
+
+  if (providerTypeFilter) {
+    // Provider type filter is set - use it directly
+    providerTypesToShow = String(providerTypeFilter)
+      .split(",")
+      .map((t) => t.trim().toLowerCase());
+  } else if (providerIdFilter && providersListResponse?.data) {
+    // Account filter is set - look up provider types from account IDs
+    const selectedAccountIds = String(providerIdFilter)
+      .split(",")
+      .map((id) => id.trim());
+
+    const providerTypesSet = new Set<string>();
+    for (const accountId of selectedAccountIds) {
+      const provider = providersListResponse.data.find(
+        (p) => p.id === accountId,
+      );
+      if (provider) {
+        providerTypesSet.add(provider.attributes.provider.toLowerCase());
+      }
+    }
+    providerTypesToShow = Array.from(providerTypesSet);
+  }
+
+  // Build sankey filters
+  const sankeyFilters: SankeyFilters = {
+    providerTypes: providerTypesToShow,
+    allSelectedProviderTypes: providerTypesToShow,
+  };
 
   const sankeyData = adaptProvidersOverviewToSankey(
     providersResponse,
     severityResponse,
+    sankeyFilters,
   );
 
-  if (sankeyData.nodes.length === 0) {
+  // If no chart data and no zero-data providers, show empty state message
+  if (
+    sankeyData.nodes.length === 0 &&
+    sankeyData.zeroDataProviders.length === 0
+  ) {
     return (
       <div className="flex h-[460px] w-full items-center justify-center">
         <p className="text-text-neutral-tertiary text-sm">
-          No provider data available
+          No findings data available for the selected filters
         </p>
       </div>
     );
   }
 
+  // If no chart data but there are zero-data providers, show only the legend
+  if (sankeyData.nodes.length === 0) {
+    return (
+      <div className="flex h-[460px] w-full items-center justify-center">
+        <div className="text-center">
+          <p className="text-text-neutral-tertiary mb-4 text-sm">
+            No failed findings for the selected accounts
+          </p>
+          <SankeyChart
+            data={sankeyData}
+            zeroDataProviders={sankeyData.zeroDataProviders}
+            height={100}
+          />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="w-full flex-1 overflow-visible">
-      <SankeyChart data={sankeyData} height={460} />
+      <SankeyChart
+        data={sankeyData}
+        zeroDataProviders={sankeyData.zeroDataProviders}
+        height={460}
+      />
     </div>
   );
 }

ui/app/(prowler)/compliance/page.tsx

@@ -61,7 +61,8 @@ export default async function Compliance({
 
       // Find the provider data in the included array
       const providerData = scansData.included?.find(
-        (item: any) => item.type === "providers" && item.id === providerId,
+        (item: { type: string; id: string }) =>
+          item.type === "providers" && item.id === providerId,
       );
 
       if (!providerData) {

ui/app/(prowler)/scans/page.tsx

@@ -148,18 +148,22 @@ const SSRDataTableScans = async ({
     include: "provider",
   });
 
-  // Process scans with provider information from included data
+  const scans = scansData?.data;
+  const included = scansData?.included;
+  const meta = scansData && "meta" in scansData ? scansData.meta : undefined;
+
   const expandedScansData =
-    scansData?.data?.map((scan: any) => {
+    scans?.map((scan: ScanProps) => {
       const providerId = scan.relationships?.provider?.data?.id;
 
       if (!providerId) {
         return { ...scan, providerInfo: null };
       }
 
       // Find the provider data in the included array
-      const providerData = scansData.included?.find(
-        (item: any) => item.type === "providers" && item.id === providerId,
+      const providerData = included?.find(
+        (item: { type: string; id: string }) =>
+          item.type === "providers" && item.id === providerId,
       );
 
       if (!providerData) {
@@ -181,7 +185,7 @@ const SSRDataTableScans = async ({
       key={`scans-${Date.now()}`}
       columns={ColumnGetScans}
       data={expandedScansData || []}
-      metadata={scansData?.meta}
+      metadata={meta}
     />
   );
 };

ui/components/graphs/sankey-chart.tsx

@@ -35,11 +35,17 @@ interface SankeyLink {
   value: number;
 }
 
+interface ZeroDataProvider {
+  id: string;
+  displayName: string;
+}
+
 interface SankeyChartProps {
   data: {
     nodes: SankeyNode[];
     links: SankeyLink[];
   };
+  zeroDataProviders?: ZeroDataProvider[];
   height?: number;
 }
 
@@ -382,7 +388,11 @@ const CustomLink = ({
   );
 };
 
-export function SankeyChart({ data, height = 400 }: SankeyChartProps) {
+export function SankeyChart({
+  data,
+  zeroDataProviders = [],
+  height = 400,
+}: SankeyChartProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [hoveredLink, setHoveredLink] = useState<number | null>(null);
@@ -579,6 +589,29 @@ export function SankeyChart({ data, height = 400 }: SankeyChartProps) {
           />
         </div>
       )}
+      {zeroDataProviders.length > 0 && (
+        <div className="border-divider-primary mt-4 border-t pt-4">
+          <p className="text-text-neutral-tertiary mb-3 text-xs font-medium tracking-wide uppercase">
+            Providers with no failed findings
+          </p>
+          <div className="flex flex-wrap gap-4">
+            {zeroDataProviders.map((provider) => {
+              const IconComponent = PROVIDER_ICONS[provider.displayName];
+              return (
+                <div
+                  key={provider.id}
+                  className="flex items-center gap-2 text-sm"
+                >
+                  {IconComponent && <IconComponent width={20} height={20} />}
+                  <span className="text-text-neutral-secondary">
+                    {provider.displayName}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
     </div>
   );
 }