Analytics Traffic: Redesign traffic analytics with SOC visualizations, threat context and improved charts #9

Closed
opened 2026-07-25 18:53:30 +00:00 by tech · 1 comment
Owner

Problem

The current /analytics/traffic page contains useful information but the presentation is too basic and data-heavy.

Current issues:

  • Too many tables and horizontal bars.
  • Not enough visual analytics.
  • Lack of security context.
  • No country visualization.
  • No threat level indication.
  • Empty sections provide little value.
  • The design does not fully match the ARGUS SOC dashboard style.

The page should be redesigned as a professional traffic analytics dashboard.


Goal

Transform:
Redesign the /analytics/traffic page into a professional SOC-grade traffic intelligence dashboard.

The current page contains useful information but the presentation is too basic, with many tables and simple bars. ARGUS Enterprise should provide an operational security view where an analyst can immediately understand traffic behavior, threats, attacks, origins and performance impact.

The redesign must follow the same ARGUS SOC dashboard experience used across:

  • /dashboard
  • /analytics/overview
  • /analytics/geoip
  • /logs/live-tail
  • /security/*

Use the same:

  • typography
  • cards
  • spacing
  • dark security dashboard style
  • charts
  • components
  • responsive behavior

Avoid:

  • excessive tables
  • long scrolling lists
  • basic horizontal bars as the main visualization
  • empty panels without context

Prefer:

  • charts
  • cards
  • heatmaps
  • threat indicators
  • drill-down views
  • security context

1. Traffic Overview Cards

Replace the current basic cards:

Total Requests
Bandwidth Out
Avg Response
Error Rate

with richer SOC cards.

Example:

Traffic Overview

231K
Total Requests

↑ 12%
Compared with previous period

39.8 MB
Bandwidth Out

128ms
Average Response

4.2%
Error Rate

12
Threat Countries

HIGH
Traffic Threat Level

Each card should include:

  • value
  • trend
  • previous period comparison
  • status indicator
  • drill-down link where applicable

2. Traffic Activity Timeline

Replace the simple:

Requests / hour

with an interactive multi-series chart.

Show:

  • Allowed requests
  • Blocked requests
  • Challenged requests
  • Errors
  • Total traffic

Example:

Traffic Activity

Allowed ─────
Blocked ─────
Challenge ─────
Errors ─────

Time:
1h / 24h / 7d / 30d

Requirements:

  • interactive tooltip
  • zoom support if possible
  • selectable time range
  • smooth real-time updates

3. Bandwidth Analytics

Improve:

Bandwidth out (MB/hour)

Add:

  • total bandwidth
  • bandwidth trend
  • top consumers
  • bandwidth by host

Example:

Bandwidth Usage

Total:
39.8 MB

Top Host:

api.example.com

18 MB


4. HTTP Status Code Analytics

Current:

Status code breakdown
2xx
3xx
4xx
5xx

Replace with visual analytics.

Use donut chart.

Example:

HTTP Responses

🟢 200 OK
82%

🟡 3xx Redirect
10%

🟠 4xx Client Error
6%

🔴 5xx Server Error
2%

Requirements:

  • donut chart
  • percentage
  • total requests
  • click to filter logs

5. Response Time Analytics

Current:

Avg
p95

Improve:

Show:

Performance

Average

128ms

P95

420ms

P99

850ms

Add:

  • latency chart
  • slowest endpoints
  • performance trends

6. Security Events Analytics

Current:

Bot blocked
Rate limited
WAF blocked

Replace with SOC visualization.

Show:

Security Actions

🛡 WAF Blocks

2,430

🤖 Bot Defense

850

🚦 Rate Limits

320

🧠 ANIS Intelligence

540

Add:

Timeline chart:

Security Events Over Time

WAF
Bots
Rate Limit
ANIS


7. Geographic Traffic Intelligence

Add GeoIP intelligence.

Every country display must include:

  • country flag
  • country name
  • ISO code
  • request count
  • threat level
  • blocked percentage

Example:

Top Source Countries

🇨🇳 China

Requests:
12,400

Blocked:
94%

Threat:
🔴 HIGH

🇺🇸 United States

Requests:
8,200

Blocked:
2%

Threat:
🟢 LOW

Use ISO 3166 country codes.

Do not parse country names.


8. Threat Level System

Add threat classification everywhere.

Use:

🔴 Critical

🟠 High

🟡 Medium

🟢 Low

Apply to:

  • countries
  • IP addresses
  • ASNs
  • hosts
  • traffic sources

Example:

Source IP

185.xxx.xxx.xxx

🇷🇺 Russia

Threat:
HIGH

Reason:
Known scanner


9. Traffic Categories

Replace:

other
browser

with visual analytics.

Use donut chart:

Traffic Category

Browser
65%

API
20%

Bot
10%

Other
5%


10. HTTP Methods

Replace simple table:

GET 215

with chart:

HTTP Methods

GET
POST
PUT
DELETE
PATCH

Show:

  • count
  • percentage
  • security relevance

Example:

POST

25,430 requests

Threat relevance:
Medium


11. Protocol Analytics

Improve:

HTTP/1.1

Show:

Protocols

HTTP/3

HTTP/2

HTTP/1.1

TLS Versions

TLS 1.3

TLS 1.2

Include:

  • adoption percentage
  • security status

12. ASN Intelligence

Redesign:

Top ASNs

into:

Top Source Networks

ASN

Organization

Country

Requests

Threat Score

Example:

AS12345

Cloud Provider

🇺🇸 US

12,500 requests

Threat:
Medium


13. Browser / Operating System / Device Intelligence

Do not show empty sections like:

Browser breakdown will appear here once requests are logged.

Instead:

If no data:

No client fingerprint data available.

HTTPS traffic analysis will populate this section automatically.

When available:

Use:

  • donut charts
  • percentages
  • rankings

For:

  • browsers
  • operating systems
  • device types

14. TLS Intelligence

Add:

TLS Security

TLS 1.3

85%

TLS 1.2

15%

Weak protocols:

0


15. Per-host Traffic Leaderboard

Replace the current table:

Domain
Requests
Bandwidth
Avg RT
WAF
Bots
Error %

with SOC cards.

Example:

Top Applications

🌐 api.example.com

Requests:
120K

Bandwidth:
18 MB

Threat:
LOW

WAF:
120 blocked

🌐 login.example.com

Requests:
40K

Threat:
HIGH

WAF:
8,500 blocked


16. Drill-down capability

Every major component should allow navigation.

Examples:

Country:

Click China
→ GeoIP details
→ related IPs
→ related attacks

Status:

Click 403
→ filtered logs

Host:

Click domain
→ host analytics


17. Export

Keep CSV export but improve:

Allow:

  • export current chart data
  • export selected period
  • export filtered results

Backend/API Review

Review analytics APIs.

Avoid sending raw logs unnecessarily.

Create aggregated endpoints if needed.

Required data:

traffic statistics
requests timeline
bandwidth
status codes
latency
security actions
GeoIP
ASN
browser fingerprint
OS fingerprint
device information
TLS information
host statistics
ANIS intelligence impact

Possible endpoints:

GET /api/v1/analytics/traffic

GET /api/v1/analytics/status-codes

GET /api/v1/analytics/security-events

GET /api/v1/analytics/geo

GET /api/v1/analytics/performance

GET /api/v1/analytics/client-intelligence


Final Goal

The /analytics/traffic page must become a premium enterprise SOC traffic intelligence dashboard.

A security operator should immediately answer:

  • How much traffic is coming in?
  • Is it normal or suspicious?
  • Where are requests coming from?
  • Which countries are attacking?
  • What is ARGUS blocking?
  • Which applications are targeted?
  • Is performance impacted?
  • What protocols and clients are being used?

The final result should look like a modern security operations platform, not a simple traffic statistics page.

Labels:

component:analytics
component:traffic
component:soc-dashboard
type:enhancement
priority:high

## Problem The current /analytics/traffic page contains useful information but the presentation is too basic and data-heavy. Current issues: - Too many tables and horizontal bars. - Not enough visual analytics. - Lack of security context. - No country visualization. - No threat level indication. - Empty sections provide little value. - The design does not fully match the ARGUS SOC dashboard style. The page should be redesigned as a professional traffic analytics dashboard. --- # Goal Transform: Redesign the `/analytics/traffic` page into a professional SOC-grade traffic intelligence dashboard. The current page contains useful information but the presentation is too basic, with many tables and simple bars. ARGUS Enterprise should provide an operational security view where an analyst can immediately understand traffic behavior, threats, attacks, origins and performance impact. The redesign must follow the same ARGUS SOC dashboard experience used across: - /dashboard - /analytics/overview - /analytics/geoip - /logs/live-tail - /security/* Use the same: - typography - cards - spacing - dark security dashboard style - charts - components - responsive behavior Avoid: - excessive tables - long scrolling lists - basic horizontal bars as the main visualization - empty panels without context Prefer: - charts - cards - heatmaps - threat indicators - drill-down views - security context --- # 1. Traffic Overview Cards Replace the current basic cards: Total Requests Bandwidth Out Avg Response Error Rate with richer SOC cards. Example: Traffic Overview 231K Total Requests ↑ 12% Compared with previous period 39.8 MB Bandwidth Out 128ms Average Response 4.2% Error Rate 12 Threat Countries HIGH Traffic Threat Level Each card should include: - value - trend - previous period comparison - status indicator - drill-down link where applicable --- # 2. Traffic Activity Timeline Replace the simple: Requests / hour with an interactive multi-series chart. Show: - Allowed requests - Blocked requests - Challenged requests - Errors - Total traffic Example: Traffic Activity Allowed ───── Blocked ───── Challenge ───── Errors ───── Time: 1h / 24h / 7d / 30d Requirements: - interactive tooltip - zoom support if possible - selectable time range - smooth real-time updates --- # 3. Bandwidth Analytics Improve: Bandwidth out (MB/hour) Add: - total bandwidth - bandwidth trend - top consumers - bandwidth by host Example: Bandwidth Usage Total: 39.8 MB Top Host: api.example.com 18 MB --- # 4. HTTP Status Code Analytics Current: Status code breakdown 2xx 3xx 4xx 5xx Replace with visual analytics. Use donut chart. Example: HTTP Responses 🟢 200 OK 82% 🟡 3xx Redirect 10% 🟠 4xx Client Error 6% 🔴 5xx Server Error 2% Requirements: - donut chart - percentage - total requests - click to filter logs --- # 5. Response Time Analytics Current: Avg p95 Improve: Show: Performance Average 128ms P95 420ms P99 850ms Add: - latency chart - slowest endpoints - performance trends --- # 6. Security Events Analytics Current: Bot blocked Rate limited WAF blocked Replace with SOC visualization. Show: Security Actions 🛡 WAF Blocks 2,430 🤖 Bot Defense 850 🚦 Rate Limits 320 🧠 ANIS Intelligence 540 Add: Timeline chart: Security Events Over Time WAF Bots Rate Limit ANIS --- # 7. Geographic Traffic Intelligence Add GeoIP intelligence. Every country display must include: - country flag - country name - ISO code - request count - threat level - blocked percentage Example: Top Source Countries 🇨🇳 China Requests: 12,400 Blocked: 94% Threat: 🔴 HIGH 🇺🇸 United States Requests: 8,200 Blocked: 2% Threat: 🟢 LOW Use ISO 3166 country codes. Do not parse country names. --- # 8. Threat Level System Add threat classification everywhere. Use: 🔴 Critical 🟠 High 🟡 Medium 🟢 Low Apply to: - countries - IP addresses - ASNs - hosts - traffic sources Example: Source IP 185.xxx.xxx.xxx 🇷🇺 Russia Threat: HIGH Reason: Known scanner --- # 9. Traffic Categories Replace: other browser with visual analytics. Use donut chart: Traffic Category Browser 65% API 20% Bot 10% Other 5% --- # 10. HTTP Methods Replace simple table: GET 215 with chart: HTTP Methods GET POST PUT DELETE PATCH Show: - count - percentage - security relevance Example: POST 25,430 requests Threat relevance: Medium --- # 11. Protocol Analytics Improve: HTTP/1.1 Show: Protocols HTTP/3 HTTP/2 HTTP/1.1 TLS Versions TLS 1.3 TLS 1.2 Include: - adoption percentage - security status --- # 12. ASN Intelligence Redesign: Top ASNs into: Top Source Networks ASN Organization Country Requests Threat Score Example: AS12345 Cloud Provider 🇺🇸 US 12,500 requests Threat: Medium --- # 13. Browser / Operating System / Device Intelligence Do not show empty sections like: Browser breakdown will appear here once requests are logged. Instead: If no data: No client fingerprint data available. HTTPS traffic analysis will populate this section automatically. When available: Use: - donut charts - percentages - rankings For: - browsers - operating systems - device types --- # 14. TLS Intelligence Add: TLS Security TLS 1.3 85% TLS 1.2 15% Weak protocols: 0 --- # 15. Per-host Traffic Leaderboard Replace the current table: Domain Requests Bandwidth Avg RT WAF Bots Error % with SOC cards. Example: Top Applications 🌐 api.example.com Requests: 120K Bandwidth: 18 MB Threat: LOW WAF: 120 blocked 🌐 login.example.com Requests: 40K Threat: HIGH WAF: 8,500 blocked --- # 16. Drill-down capability Every major component should allow navigation. Examples: Country: Click China → GeoIP details → related IPs → related attacks Status: Click 403 → filtered logs Host: Click domain → host analytics --- # 17. Export Keep CSV export but improve: Allow: - export current chart data - export selected period - export filtered results --- # Backend/API Review Review analytics APIs. Avoid sending raw logs unnecessarily. Create aggregated endpoints if needed. Required data: traffic statistics requests timeline bandwidth status codes latency security actions GeoIP ASN browser fingerprint OS fingerprint device information TLS information host statistics ANIS intelligence impact Possible endpoints: GET /api/v1/analytics/traffic GET /api/v1/analytics/status-codes GET /api/v1/analytics/security-events GET /api/v1/analytics/geo GET /api/v1/analytics/performance GET /api/v1/analytics/client-intelligence --- # Final Goal The `/analytics/traffic` page must become a premium enterprise SOC traffic intelligence dashboard. A security operator should immediately answer: - How much traffic is coming in? - Is it normal or suspicious? - Where are requests coming from? - Which countries are attacking? - What is ARGUS blocking? - Which applications are targeted? - Is performance impacted? - What protocols and clients are being used? The final result should look like a modern security operations platform, not a simple traffic statistics page. Labels: component:analytics component:traffic component:soc-dashboard type:enhancement priority:high
Author
Owner

Moved to the correct repository: weboria/argus-appliance#10. argus-installer only tracks customer installer/deployment issues; this is a product feature, so tracking continues there (a private repo). Closing here.

Moved to the correct repository: weboria/argus-appliance#10. argus-installer only tracks customer installer/deployment issues; this is a product feature, so tracking continues there (a private repo). Closing here.
tech closed this issue 2026-07-25 19:38:14 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Weboria/argus-installer#9