Add Network Traffic Analysis section with Tailwind CSS styling

[Copilot]

Overview

Implements the Network Traffic Analysis section based on PR #4107, with all styling converted to Tailwind CSS and issues from code review addressed.

Changes

Backend (website/views/company.py)

Added get_network_traffic_data method to the OrganizationDashboardAnalyticsView class that analyzes:

• Daily traffic patterns over the last 30 days
• Hourly distribution of server-related issues (Performance and Server Down labels)
• Peak traffic times and request counts
• Error rates grouped by domain (top 5)
• Week-over-week traffic change calculations

The method integrates with Django ORM using TruncDay and ExtractHour functions to aggregate issue data and formats it for Chart.js visualization.

Frontend (website/templates/organization/dashboard/organization_analytics.html)

Added a comprehensive Network Traffic Analysis section featuring:

1. Traffic Statistics Cards - Three responsive cards displaying:

   • Daily Traffic (last 24 hours)
   • Weekly Traffic (last 7 days)
   • Peak Hour traffic with request count

2. Interactive Charts - Two Chart.js visualizations:

   • Daily Traffic Volume: Line chart showing 30-day traffic trend
   • Hourly Distribution: Bar chart showing traffic by hour of day

3. Domain Error Table - Responsive table listing top domains with error counts

All components use Tailwind CSS classes exclusively with proper responsive breakpoints (md:, lg:).

Issues Fixed

Based on PR #4107 code review feedback:

• ✅ Removed duplicate Chart.js inclusion - Kept only the cdnjs version with integrity hash, removed redundant jsDelivr import
• ✅ Eliminated inline styles - Converted all sizing to Tailwind classes (e.g., h-[300px])
• ✅ Updated red color usage - Changed to #e74c3c (project standard) in:
  • Dashboard header text
  • Security incident count
  • High risk score indicator
  • Critical alert indicators

Technical Details

• Chart containers use relative h-[300px] for proper Chart.js rendering with maintainAspectRatio: false
• Backend method returns JSON-serialized data for direct consumption by JavaScript
• Empty state handling included for domains with no error data
• FontAwesome icons used for visual consistency with existing UI

Testing

• ✅ Python syntax validation passed
• ✅ HTML tag balance verified (94 divs properly closed)
• ✅ Single Chart.js script inclusion confirmed
• ✅ All styling uses Tailwind CSS classes only

Closes #2472

Original prompt

create a new PR based on @OWASP-BLT/BLT/pull/4107 make sure the new style is implemented all in tailwind and fix any issues

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

Note

Free review on us!

CodeRabbit is offering free reviews until Wed Oct 08 2025 to showcase some of the refinements we've made.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}