Analytics Traffic: Replace Status Code Breakdown with donut chart visualization #3

New Issue

2026-07-25T18:42:11Z

tech commented

2026-07-25 18:42:11 +00:00

Problem

In /analytics/traffic, the "Status Code Breakdown" section is currently displayed as a standard list/chart.

For a security operations dashboard, HTTP status distribution is easier to understand visually as a donut chart.

Expected behavior

Replace the current Status Code Breakdown visualization with a donut chart.

Example:
Status Code Breakdown

_______

/
| 200 |
| |
_______/

200 OK 75%
301 Redirect 10%
403 Forbidden 8%
404 Not Found 5%
500 Error 2%

Requirements

Frontend

Update:

/analytics/traffic

Status Code Breakdown component.

Implement:

Donut chart visualization
Interactive hover details
Percentage display
Total request count in the center
Legend with status code and description

Example:

Center:

125,430
Requests

Legend:

🟢 200 OK 92,500 (73.7%)
🟡 301 Redirect 12,430 (9.9%)
🔴 403 Forbidden 8,210 (6.5%)
🔴 404 Not Found 6,100 (4.8%)
⚠️ 500 Server Error 6,190 (4.9%)

UX requirements

Match the ARGUS SOC dashboard style.
Responsive on desktop and mobile.
Keep the existing data source/API.
Do not create unnecessary backend changes if the current API already provides status code statistics.

Backend review

Verify that the analytics API provides:

status code
count
percentage (optional, can be calculated frontend)

Example:

{
  "status_codes": [
    {
      "code": 200,
      "count": 92500
    },
    {
      "code": 403,
      "count": 8210
    }
  ]
}
Goal

Make traffic analytics easier for security operators to understand at a glance, similar to modern SOC dashboards.


Labels:

```text
component:analytics
type:enhancement
priority:medium

## Problem In /analytics/traffic, the "Status Code Breakdown" section is currently displayed as a standard list/chart. For a security operations dashboard, HTTP status distribution is easier to understand visually as a donut chart. ## Expected behavior Replace the current Status Code Breakdown visualization with a donut chart. Example: Status Code Breakdown _______ / \ | 200 | | | \_______/ 200 OK 75% 301 Redirect 10% 403 Forbidden 8% 404 Not Found 5% 500 Error 2% ## Requirements ### Frontend Update: /analytics/traffic Status Code Breakdown component. Implement: - Donut chart visualization - Interactive hover details - Percentage display - Total request count in the center - Legend with status code and description Example: Center: 125,430 Requests Legend: 🟢 200 OK 92,500 (73.7%) 🟡 301 Redirect 12,430 (9.9%) 🔴 403 Forbidden 8,210 (6.5%) 🔴 404 Not Found 6,100 (4.8%) ⚠️ 500 Server Error 6,190 (4.9%) ## UX requirements - Match the ARGUS SOC dashboard style. - Responsive on desktop and mobile. - Keep the existing data source/API. - Do not create unnecessary backend changes if the current API already provides status code statistics. ## Backend review Verify that the analytics API provides: - status code - count - percentage (optional, can be calculated frontend) Example: ```json { "status_codes": [ { "code": 200, "count": 92500 }, { "code": 403, "count": 8210 } ] } Goal Make traffic analytics easier for security operators to understand at a glance, similar to modern SOC dashboards. Labels: ```text component:analytics type:enhancement priority:medium

tech commented

2026-07-25 19:37:52 +00:00

Moved to the correct repository: weboria/argus-appliance#4. 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:37:52 +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#3