Skip to content

Conversation

@nfebe
Copy link
Contributor

@nfebe nfebe commented Dec 22, 2025

No description provided.

- 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 <fenn25.fn@gmail.com>
- Update design system CSS variables to use smaller radius values
  - --radius-sm: 3px, --radius-md: 4px, --radius-lg: 6px, --radius-xl: 8px
- Replace all hardcoded 8px/10px/12px/16px border-radius with 4px
- Affected views: Security, Home, Certificates, Networks, Plugins,
  DeploymentDetail, Infrastructure, Templates, Settings
- Affected components: ContainerTerminal, DeploymentTrafficStats,
  SecurityHealthCard, ToastNotifications, PluginWidget, TrafficDashboard

Creates a more compact, modern visual appearance consistent with
the redesigned TrafficDashboard.

Signed-off-by: nfebe <fenn25.fn@gmail.com>
@sourceant
Copy link

sourceant bot commented Dec 22, 2025

Code Review Summary

This pull request introduces substantial improvements in both the application's user interface and its underlying data architecture. The TrafficDashboard.vue component has been thoroughly redesigned to feature a more intuitive tabbed layout, enhancing information accessibility and user experience. A comprehensive update to border-radius values across various components ensures visual coherence throughout the application. Furthermore, a critical enhancement to the traffic analytics data model was implemented, adding essential deployment context to path statistics.

🚀 Key Improvements

  • Enhanced Traffic Dashboard UI/UX: The TrafficDashboard.vue component was refactored into a highly organized tabbed interface, offering a clearer and more navigable view of traffic data, logs, and performance metrics.
  • Consistent Design System Application: A uniform 4px border-radius has been applied to numerous UI elements, promoting a cohesive and modern visual design language across the application.
  • Improved Traffic Data Fidelity: The PathStats interface in src/services/api.ts now includes a deployment field, enabling more accurate and granular traffic analytics by associating specific request paths with their respective deployments.

💡 Minor Suggestions

  • To fully maximize the benefits of the established design system, it is highly recommended to systematically replace all hardcoded border-radius: 4px; instances with the var(--radius-md) CSS variable. This will centralize styling definitions and streamline future design modifications. The example provided in src/components/ContainerTerminal.vue serves as a blueprint for this global change.

Copy link

@sourceant sourceant bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review complete. See the overview comment for a summary.

Update design system scale to 2, 4, 6, 8, 12px and replace all hardcoded
border-radius values with CSS variables across 46 files.

- var(--radius-xs): 2px - tiny elements
- var(--radius-sm): 4px - buttons, inputs, badges
- var(--radius-md): 6px - cards, containers
- var(--radius-lg): 8px - larger containers
- var(--radius-xl): 12px - modals

Signed-off-by: nfebe <fenn25.fn@gmail.com>
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Dec 22, 2025

Deploying flatrun-ui with  Cloudflare Pages  Cloudflare Pages

Latest commit: 7136775
Status: ✅  Deploy successful!
Preview URL: https://27824c7f.flatrun-ui.pages.dev
Branch Preview URL: https://feat-traffic-dashboard-redes.flatrun-ui.pages.dev

View logs

Copy link

@sourceant sourceant bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review complete. No specific code suggestions were generated. See the overview comment for a summary.

@nfebe nfebe merged commit 97504e9 into main Dec 22, 2025
5 checks passed
@nfebe nfebe deleted the feat/traffic-dashboard-redesign branch December 22, 2025 18:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants