new traffic filters

[pascal-fischer]

Issue ticket number and link

Documentation

Select exactly one:

• I added/updated documentation for this change
• Documentation is not needed for this change (explain why)

Docs PR URL (required if "docs added" is checked)

Paste the PR link from https://github.com/netbirdio/docs here:

https://github.com/netbirdio/docs/pull/__

E2E tests

Optional: override the image tags used by the Playwright e2e workflow.
Defaults to main when omitted.

management-cloud-tag: main
reverse-proxy-tag: main

Summary by CodeRabbit

• New Features

  • Traffic Events now uses a streamlined, server-powered table with faster filtering and pagination.
  • Added clearer filter chips and a new picker for narrowing results by peers, resources, or users.
  • The page now shows a fixed “Traffic Events” heading and improved date-range defaults.

• Bug Fixes

  • Improved consistency between selected filters and displayed results.
  • Traffic Events access now respects feature availability and locked states more reliably.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f66d896a-2aca-4f06-8fa5-e8dc0bcf66ab

📥 Commits

Reviewing files that changed from the base of the PR and between f2ad889 and e4792d9.

📒 Files selected for processing (5)

• src/app/(dashboard)/events/traffic/page.tsx
• src/cloud/traffic-events/TrafficEventsPeerTabContent.tsx
• src/cloud/traffic-events/TrafficEventsTable.tsx
• src/components/table/filters/PeerResourcePicker.tsx
• src/contexts/ServerPaginationProvider.tsx

---

📝 Walkthrough

Walkthrough

The traffic events page and table are refactored to use ServerPaginationProvider for centralized pagination/filtering, replacing local state and prop-driven data fetching. A new PeerResourcePicker filter component is added for source/destination filtering, and ServerPaginationProvider gains an optional enabled flag to conditionally suppress fetches.

Changes

Traffic Events Server-Driven Refactor

Layer / File(s)	Summary
ServerPaginationProvider enabled flag src/contexts/ServerPaginationProvider.tsx	Adds optional enabled prop (default true) that suppresses the main fetch and gates next-page prefetching.
PeerResourcePicker filter component src/components/table/filters/PeerResourcePicker.tsx	New client-side component with search/filter, virtualized option list, peer/resource/user tabs, selection toggling, and formatPeerResourceChip helper.
TrafficEventsTable context-driven filtering src/cloud/traffic-events/TrafficEventsTable.tsx	Rewrites the table to consume useServerPagination, normalizes rows via flow_id, defines Source/Destination server filterDefs using PeerResourcePicker, hides source_id/destination_id columns, and simplifies rendered controls.
Traffic events page wiring and consumer updates src/app/(dashboard)/events/traffic/page.tsx, src/cloud/traffic-events/TrafficEventsPeerTabContent.tsx	Page computes defaultFilters/feature-lock state and wraps TrafficEventsTable in ServerPaginationProvider; peer detail table drops the removed TrafficEventsTableProps type in favor of an inline prop shape.

Estimated code review effort: 4 (Complex) | ~60 minutes

Sequence Diagram(s)

sequenceDiagram
  participant NetworkTrafficPage
  participant ServerPaginationProvider
  participant API
  participant TrafficEventsTable
  participant PeerResourcePicker

  NetworkTrafficPage->>ServerPaginationProvider: mount with url, defaultFilters, enabled
  ServerPaginationProvider->>API: fetch /events/network-traffic (if enabled)
  API-->>ServerPaginationProvider: paginated traffic events
  TrafficEventsTable->>ServerPaginationProvider: useServerPagination(data, filters)
  ServerPaginationProvider-->>TrafficEventsTable: rows, active filters
  TrafficEventsTable->>PeerResourcePicker: render Source/Destination filter chip
  PeerResourcePicker-->>TrafficEventsTable: onChange(source_id/destination_id)
  TrafficEventsTable->>ServerPaginationProvider: update filter state
  ServerPaginationProvider->>API: refetch with new filters

Loading

Poem

A rabbit hops through code so neat,
Pagination now server-complete! 🐇
Peers and resources, pick with a click,
Filters and chips, fast and slick.
No more props to drag along—
Just one provider, humming its song. 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title matches the main change by referring to the new traffic filters UI.
Description check	✅ Passed	The description mostly follows the template, but the issue ticket section is empty and the docs-not-needed choice lacks an explanation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/new-traffic-events-filter

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/app/(dashboard)/events/traffic/page.tsx

Oops! Something went wrong! :(

ESLint: 9.39.3

TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property 'configs' -> object with constructor 'Object'
| property 'flat' -> object with constructor 'Object'
| ...
| property 'plugins' -> object with constructor 'Object'
--- property 'react' closes the circle
Referenced from: /.eslintrc.json
at JSON.stringify ()
at /node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2255:45
at Array.map ()
at ConfigValidator.formatErrors (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2246:23)
at ConfigValidator.validateConfigSchema (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2277:84)
at ConfigArrayFactory._normalizeConfigData (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3123:19)
at ConfigArrayFactory._loadConfigData (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3088:21)
at ConfigArrayFactory._loadExtendedShareableConfig (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3393:21)
at ConfigArrayFactory._loadExtends (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3261:25)
at ConfigArrayFactory._normalizeObjectConfigDataBody (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3199:25)
(node:2) ESLintRCWarning: You are using an eslintrc configuration file, which is deprecated and support will be removed in v10.0.0. Please migrate to an eslint.config.js file. See https://eslint.org/docs/latest/use/configure/migration-guide for details. An eslintrc configuration file is used because you have the ESLINT_USE_FLAT_CONFIG environment variable set to false. If you want to use an eslint.config.js file, remove the environment variable. If you want to find the location of the eslintrc configuration file, use the --debug flag.
(Use node --trace-warnings ... to show where the warning was created)

src/cloud/traffic-events/TrafficEventsPeerTabContent.tsx

Oops! Something went wrong! :(

ESLint: 9.39.3

TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property 'configs' -> object with constructor 'Object'
| property 'flat' -> object with constructor 'Object'
| ...
| property 'plugins' -> object with constructor 'Object'
--- property 'react' closes the circle
Referenced from: /.eslintrc.json
at JSON.stringify ()
at /node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2255:45
at Array.map ()
at ConfigValidator.formatErrors (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2246:23)
at ConfigValidator.validateConfigSchema (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2277:84)
at ConfigArrayFactory._normalizeConfigData (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3123:19)
at ConfigArrayFactory._loadConfigData (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3088:21)
at ConfigArrayFactory._loadExtendedShareableConfig (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3393:21)
at ConfigArrayFactory._loadExtends (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3261:25)
at ConfigArrayFactory._normalizeObjectConfigDataBody (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3199:25)
(node:2) ESLintRCWarning: You are using an eslintrc configuration file, which is deprecated and support will be removed in v10.0.0. Please migrate to an eslint.config.js file. See https://eslint.org/docs/latest/use/configure/migration-guide for details. An eslintrc configuration file is used because you have the ESLINT_USE_FLAT_CONFIG environment variable set to false. If you want to use an eslint.config.js file, remove the environment variable. If you want to find the location of the eslintrc configuration file, use the --debug flag.
(Use node --trace-warnings ... to show where the warning was created)

src/cloud/traffic-events/TrafficEventsTable.tsx

Oops! Something went wrong! :(

ESLint: 9.39.3

TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property 'configs' -> object with constructor 'Object'
| property 'flat' -> object with constructor 'Object'
| ...
| property 'plugins' -> object with constructor 'Object'
--- property 'react' closes the circle
Referenced from: /.eslintrc.json
at JSON.stringify ()
at /node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2255:45
at Array.map ()
at ConfigValidator.formatErrors (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2246:23)
at ConfigValidator.validateConfigSchema (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2277:84)
at ConfigArrayFactory._normalizeConfigData (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3123:19)
at ConfigArrayFactory._loadConfigData (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3088:21)
at ConfigArrayFactory._loadExtendedShareableConfig (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3393:21)
at ConfigArrayFactory._loadExtends (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3261:25)
at ConfigArrayFactory._normalizeObjectConfigDataBody (/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3199:25)
(node:2) ESLintRCWarning: You are using an eslintrc configuration file, which is deprecated and support will be removed in v10.0.0. Please migrate to an eslint.config.js file. See https://eslint.org/docs/latest/use/configure/migration-guide for details. An eslintrc configuration file is used because you have the ESLINT_USE_FLAT_CONFIG environment variable set to false. If you want to use an eslint.config.js file, remove the environment variable. If you want to find the location of the eslintrc configuration file, use the --debug flag.
(Use node --trace-warnings ... to show where the warning was created)

• 2 others

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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