From fb042d5e7121d407f5a1449253f715c1e7f6c622 Mon Sep 17 00:00:00 2001 From: nfebe Date: Mon, 22 Dec 2025 18:59:19 +0100 Subject: [PATCH 1/3] feat(traffic): Redesign traffic dashboard with intelligent insights - Add sub-tabs: Overview, Request Logs, Performance - Add intelligent insights bar with trend analysis and anomaly detection - Add actionable recommendations (investigate IP, slow endpoints) - Add request logs table with sorting, filtering, and pagination - Add unknown domains section for non-vhost traffic - Add deployment context to slowest endpoints - Update PathStats interface with deployment field - Use 4px border radius for compact modern look - Add sparklines and trend indicators to stat cards Signed-off-by: nfebe --- src/components/TrafficDashboard.vue | 1747 ++++++++++++++++++--------- src/services/api.ts | 1 + 2 files changed, 1199 insertions(+), 549 deletions(-) diff --git a/src/components/TrafficDashboard.vue b/src/components/TrafficDashboard.vue index 2b0d4c4..baefba4 100644 --- a/src/components/TrafficDashboard.vue +++ b/src/components/TrafficDashboard.vue @@ -6,161 +6,419 @@
- -
-
- + + + + -
-
- - - {{ overallHealthText }} - - - - {{ anomalyCount }} anomalies detected - +
+ + +
+
+
+ + {{ insight.text }} +
+
+
+
- -
-

Deployment Performance

-
-
-
- {{ dep.name }} - {{ dep.healthLabel }} + +
+ +
+
+
+ Requests + + + {{ Math.abs(requestsTrend) }}% +
-
-
- {{ formatNumber(dep.requests) }} - requests -
-
- - {{ formatTime(dep.avgTime) }} - - avg response -
-
- {{ dep.errorRate.toFixed(1) }}% - error rate -
+ {{ formatNumber(stats.total_requests) }} +
+
+
+
+
+
+ Data Transfer +
+ {{ formatBytes(stats.total_bytes) }} + {{ formatBytes(stats.total_bytes / Math.max(stats.total_requests, 1)) }}/req avg +
+
+
+ Response Time + slow
-
-
-
-
-
+ + {{ formatTime(stats.avg_response_time_ms) }} + + p95: {{ formatTime(estimatedP95) }} +
+
+
+ Error Rate + high
-
- - {{ dep.insight }} + {{ globalErrorRate }}% +
+ 4xx: {{ stats.by_status_group?.['4xx'] || 0 }} + 5xx: {{ stats.by_status_group?.['5xx'] || 0 }}
-
- -
-

Performance Alerts

-
-
- -
- {{ alert.title }} - {{ alert.description }} + +
+ +
+
+

Deployments

+ {{ knownDeploymentStats.length }} +
+
+
+
+ {{ dep.name }} +
+
+
+
+
+
+ {{ formatNumber(dep.total_requests) }} + + {{ formatTime(dep.avg_response_time) }} + + + {{ dep.error_rate.toFixed(1) }}% + +
+ +
-
-
- -
-

Slowest Endpoints

-
-
-
- {{ ep.path }} - {{ formatNumber(ep.requests) }} requests + +
+
+
+

Unknown Domains

+ {{ unknownDomainStats.length }} +
+
+
+ {{ domain.name }} + {{ formatNumber(domain.total_requests) }} req +
+
-
- {{ formatTime(ep.avgTime) }} + +
+
+

Top Sources

+
+
+
+ {{ ip.ip }} +
+ {{ formatNumber(ip.requests) }} + {{ formatBytes(ip.bytes) }} +
+
+
-
-
+
+
+ + +
+
+

By Method

+
+
+ {{ method }} +
+
+
+ {{ formatNumber(count) }} +
+
+
+
+

By Status

+
+
+ 2xx + {{ formatNumber(stats.by_status_group?.['2xx'] || 0) }} +
+
+ 3xx + {{ formatNumber(stats.by_status_group?.['3xx'] || 0) }} +
+
+ 4xx + {{ formatNumber(stats.by_status_group?.['4xx'] || 0) }} +
+
+ 5xx + {{ formatNumber(stats.by_status_group?.['5xx'] || 0) }} +
- -
-

Most Active Sources

-
-
- {{ ip.ip }} - {{ formatNumber(ip.requests) }} req - {{ formatBytes(ip.bytes) }} + +
+
+ + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Time + + DomainMethodPath + Status + + IP + Time + + Size +
{{ formatLogTime(log.created_at) }}{{ log.deployment_name }} + + {{ log.request_method }} + + {{ log.request_path }} + + {{ log.status_code }} + + + {{ log.source_ip }} + + {{ formatTime(log.response_time_ms) }} + {{ formatBytes(log.bytes_sent) }} + +
+
+ No logs match your filters
+
+