feat(traffic): Add IP blocking and fix domain stats display

[nfebe]

• Fix domains showing 0: traffic logs use domain names not project names, so removed filtering by deployment names
• Add suspicious IPs section with block button for IPs with >30% traffic or >500 requests
• Add IP blocking via existing securityApi.blockIP endpoint
• Add filter buttons on top source IPs
• Rename "Deployments" to "Domains" to reflect actual data

[sourceant]

Code Review Summary

This Pull Request introduces significant improvements to the TrafficDashboard component. The primary changes involve centralizing configuration through a THRESHOLDS object, unifying the handling of interactive actions (insights, recommendations, alerts) via a new executeAction function, and enhancing the Overview tab with a dedicated 'Suspicious IPs' section that includes an IP blocking feature. These changes greatly improve the component's maintainability, configurability, and security posture.

🚀 Key Improvements

• Centralized THRESHOLDS object for all configurable values across the dashboard, improving maintainability and consistency.
• Unified executeAction function to handle various types of interactive payloads, streamlining event handling for recommendations and alerts.
• Introduction of a 'Suspicious IPs' panel with a direct 'Block IP' action, significantly enhancing security capabilities.
• Refactored domainStats to simplify deployment/domain data handling in the UI.
• Improved error and response time indicators by utilizing the new THRESHOLDS constants.

💡 Minor Suggestions

• Refine the type of the catch variable in the blockIP function for stronger type safety.

[sourceant]

🔍 Code Review

💡 1. **src/components/TrafficDashboard.vue** (Line 583) - CLARITY

Replace the magic numbers 0.3 and 500 with the newly defined constants (SUSPICIOUS_IP_RATIO_THRESHOLD, SUSPICIOUS_IP_COUNT_THRESHOLD). This enhances readability and maintainability by making the thresholds explicit and centralizing their definition.

Suggested Code:

    return requestRatio > SUSPICIOUS_IP_RATIO_THRESHOLD || ip.request_count > SUSPICIOUS_IP_COUNT_THRESHOLD;

Current Code:

    return requestRatio > 0.3 || ip.request_count > 500;

💡 2. **src/components/TrafficDashboard.vue** (Lines 850-852) - CLARITY

Modify handleAlertAction to use the new action and actionPayload properties from the alert object. This provides a direct and type-safe way to handle alert actions, improving maintainability and reducing potential bugs related to string parsing.

Suggested Code:

const handleAlertAction = (alert: PerformanceAlert) => {
  if (alert.action === "viewLogs" && typeof alert.actionPayload === 'string') {
    navigateToDeploymentLogs(alert.actionPayload);
  }
};

Current Code:

const handleAlertAction = (alert: PerformanceAlert) => {
  if (alert.action === "view") {
    const depName = alert.id.replace("error-", "").replace("slow-", "");
    navigateToDeploymentLogs(depName);
  }
};

Verdict: APPROVE

Posted as a comment because posting a review failed.

[cloudflare-workers-and-pages]

Deploying flatrun-ui with    Cloudflare Pages

Latest commit:	29a4527
Status:	✅  Deploy successful!
Preview URL:	https://e95e4d31.flatrun-ui.pages.dev
Branch Preview URL:	https://feat-traffic-ip-blocking.flatrun-ui.pages.dev

View logs

[sourceant]

Review complete. See the overview comment for a summary.

[sourceant]

For better type safety and clarity, consider explicitly typing the catch variable as Error. This makes it clear that you expect an Error object and allows for safer access to its properties, like message, without relying on the any type.

Alternatively, you could use unknown and add a type guard (if (e instanceof Error)) for even more robust error handling.

Suggested change

	deployment: p.deployment,
	} catch (e: Error) {