feat(ui): integrate threat map with regions API endpoint (#9324)

Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>

Author: Alan-TheGentleman

ui/CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 - Compliance Watchlist component to Overview page [(#9199)](https://github.com/prowler-cloud/prowler/pull/9199)
 - Service Watchlist component to Overview page [(#9316)](https://github.com/prowler-cloud/prowler/pull/9316)
 - Risk Pipeline component with Sankey chart to Overview page [(#9317)](https://github.com/prowler-cloud/prowler/pull/9317)
+- Threat Map component to Overview Page [(#9324)](https://github.com/prowler-cloud/prowler/pull/9324)
 
 ## [1.14.0] (Prowler v5.14.0)
 

ui/actions/overview/index.ts

@@ -1,3 +1,4 @@
 export * from "./overview";
-export * from "./overview.adapter";
+export * from "./sankey.adapter";
+export * from "./threat-map.adapter";
 export * from "./types";

ui/actions/overview/overview.ts

@@ -7,6 +7,7 @@ import { handleApiResponse } from "@/lib/server-actions-helper";
 import {
   FindingsSeverityOverviewResponse,
   ProvidersOverviewResponse,
+  RegionsOverviewResponse,
   ServicesOverviewResponse,
 } from "./types";
 
@@ -178,3 +179,31 @@ export const getThreatScore = async ({
     return undefined;
   }
 };
+
+export const getRegionsOverview = async ({
+  filters = {},
+}: {
+  filters?: Record<string, string | string[] | undefined>;
+} = {}): Promise<RegionsOverviewResponse | undefined> => {
+  const headers = await getAuthHeaders({ contentType: false });
+
+  const url = new URL(`${apiBaseUrl}/overviews/regions`);
+
+  // Handle multiple filters
+  Object.entries(filters).forEach(([key, value]) => {
+    if (key !== "filter[search]" && value !== undefined) {
+      url.searchParams.append(key, String(value));
+    }
+  });
+
+  try {
+    const response = await fetch(url.toString(), {
+      headers,
+    });
+
+    return handleApiResponse(response);
+  } catch (error) {
+    console.error("Error fetching regions overview:", error);
+    return undefined;
+  }
+};

ui/actions/overview/overview.adapter.ts ui/actions/overview/sankey.adapter.tsui/actions/overview/overview.adapter.ts renamed to ui/actions/overview/sankey.adapter.ts

@@ -1,72 +1,36 @@
+import { getProviderDisplayName } from "@/types/providers";
+
 import {
   FindingsSeverityOverviewResponse,
   ProviderOverview,
   ProvidersOverviewResponse,
 } from "./types";
 
-/**
- * Sankey chart node structure
- */
 export interface SankeyNode {
   name: string;
 }
 
-/**
- * Sankey chart link structure
- */
 export interface SankeyLink {
   source: number;
   target: number;
   value: number;
 }
 
-/**
- * Sankey chart data structure
- */
 export interface SankeyData {
   nodes: SankeyNode[];
   links: SankeyLink[];
 }
 
-/**
- * Provider display name mapping
- * Maps provider IDs to user-friendly display names
- * These names must match the COLOR_MAP keys in sankey-chart.tsx
- */
-const PROVIDER_DISPLAY_NAMES: Record<string, string> = {
-  aws: "AWS",
-  azure: "Azure",
-  gcp: "Google Cloud",
-  kubernetes: "Kubernetes",
-  github: "GitHub",
-  m365: "Microsoft 365",
-  iac: "Infrastructure as Code",
-  oraclecloud: "Oracle Cloud Infrastructure",
-};
-
-/**
- * Aggregated provider data after grouping by provider type
- */
 interface AggregatedProvider {
   id: string;
   displayName: string;
   pass: number;
   fail: number;
 }
 
-/**
- * Provider types to exclude from the Sankey chart
- */
 const EXCLUDED_PROVIDERS = new Set(["mongo", "mongodb", "mongodbatlas"]);
 
-/**
- * Aggregates multiple provider entries by provider type (id)
- * Since the API can return multiple entries for the same provider type,
- * we need to sum up their findings
- *
- * @param providers - Raw provider overview data from API
- * @returns Aggregated providers with summed findings
- */
+// API can return multiple entries for the same provider type, so we sum their findings
 function aggregateProvidersByType(
   providers: ProviderOverview[],
 ): AggregatedProvider[] {
@@ -75,10 +39,7 @@ function aggregateProvidersByType(
   for (const provider of providers) {
     const { id, attributes } = provider;
 
-    // Skip excluded providers
-    if (EXCLUDED_PROVIDERS.has(id)) {
-      continue;
-    }
+    if (EXCLUDED_PROVIDERS.has(id)) continue;
 
     const existing = aggregated.get(id);
 
@@ -88,7 +49,7 @@ function aggregateProvidersByType(
     } else {
       aggregated.set(id, {
         id,
-        displayName: PROVIDER_DISPLAY_NAMES[id] || id,
+        displayName: getProviderDisplayName(id),
         pass: attributes.findings.pass,
         fail: attributes.findings.fail,
       });
@@ -98,9 +59,6 @@ function aggregateProvidersByType(
   return Array.from(aggregated.values());
 }
 
-/**
- * Severity display names in order
- */
 const SEVERITY_ORDER = [
   "Critical",
   "High",
@@ -110,18 +68,8 @@ const SEVERITY_ORDER = [
 ] as const;
 
 /**
- * Adapts providers overview and findings severity API responses to Sankey chart format
- *
- * Creates a 2-level flow visualization:
- * - Level 1: Cloud providers (AWS, Azure, GCP, etc.)
- * - Level 2: Severity breakdown (Critical, High, Medium, Low, Informational)
- *
- * The severity distribution is calculated proportionally based on each provider's
- * fail count relative to the total fails across all providers.
- *
- * @param providersResponse - Raw API response from /overviews/providers
- * @param severityResponse - Raw API response from /overviews/findings_severity
- * @returns Sankey chart data with nodes and links
+ * Adapts providers overview and findings severity API responses to Sankey chart format.
+ * Severity distribution is calculated proportionally based on each provider's fail count.
  */
 export function adaptProvidersOverviewToSankey(
   providersResponse: ProvidersOverviewResponse | undefined,
@@ -131,34 +79,23 @@ export function adaptProvidersOverviewToSankey(
     return { nodes: [], links: [] };
   }
 
-  // Aggregate providers by type
   const aggregatedProviders = aggregateProvidersByType(providersResponse.data);
-
-  // Filter out providers with no findings (only need fail > 0 for severity view)
   const providersWithFailures = aggregatedProviders.filter((p) => p.fail > 0);
 
   if (providersWithFailures.length === 0) {
     return { nodes: [], links: [] };
   }
 
-  // Build nodes array: providers first, then severities
   const providerNodes: SankeyNode[] = providersWithFailures.map((p) => ({
     name: p.displayName,
   }));
-
   const severityNodes: SankeyNode[] = SEVERITY_ORDER.map((severity) => ({
     name: severity,
   }));
-
   const nodes = [...providerNodes, ...severityNodes];
-
-  // Calculate severity start index (after provider nodes)
   const severityStartIndex = providerNodes.length;
-
-  // Build links from each provider to severities
   const links: SankeyLink[] = [];
 
-  // If we have severity data, distribute proportionally
   if (severityResponse?.data?.attributes) {
     const { critical, high, medium, low, informational } =
       severityResponse.data.attributes;
@@ -167,18 +104,15 @@ export function adaptProvidersOverviewToSankey(
     const totalSeverity = severityValues.reduce((sum, v) => sum + v, 0);
 
     if (totalSeverity > 0) {
-      // Calculate total fails across all providers
       const totalFails = providersWithFailures.reduce(
         (sum, p) => sum + p.fail,
         0,
       );
 
       providersWithFailures.forEach((provider, sourceIndex) => {
-        // Calculate this provider's proportion of total fails
         const providerRatio = provider.fail / totalFails;
 
         severityValues.forEach((severityValue, severityIndex) => {
-          // Distribute severity proportionally to this provider
           const value = Math.round(severityValue * providerRatio);
 
           if (value > 0) {
@@ -192,7 +126,7 @@ export function adaptProvidersOverviewToSankey(
       });
     }
   } else {
-    // Fallback: if no severity data, just show fail counts to a generic "Fail" node
+    // Fallback when no severity data available
     const failNode: SankeyNode = { name: "Fail" };
     nodes.push(failNode);
     const failIndex = nodes.length - 1;