feat: show which flags use each segment in the UI

[aparimeet]

Problem

In the UI it was hard to see which segments are used by which flags; that information only appeared on each flag’s view/edit screen. With many flags and segments it was easy to have unused segments and hard to see the impact of changing a segment’s constraints.

Solution

Segment list: Show a “Used in N flags” count per segment so usage is visible at a glance.
Segment view: Show a “Used in flags” section with the list of flags that reference the segment (via rules or rollouts) and links to each flag’s view/edit page.

Changes

ui/src/app/segments/segmentsApi.ts

• Added listFlagsForSegment query: loads all flags, then each flag’s rules and rollouts, and returns flags that reference the given segment (used on segment detail).

• Added getSegmentFlagCounts query: same data source, returns a map segmentKey → number of flags (used on segment list).

• Added helpers ruleReferencesSegment and rolloutReferencesSegment and exported IFlagReference and the new hooks.

ui/src/app/segments/Segment.tsx

• Always show a “Used in flags” section: loading state, “This segment is not used by any flags,” or a list of flags with links to /namespaces/{ns}/flags/{flagKey}.

• Use refetchOnMountOrArgChange: true for the “used in flags” query so data is fresh when opening the segment page.

ui/src/components/segments/SegmentTable.tsx

• For each segment card, show “Used in N flags” (with icon) once flag counts have loaded, including “Used in 0 flags.”

• Use refetchOnMountOrArgChange: true for the flag-counts query so the list shows up-to-date counts when visiting the segments page.

Notes

• No new backend APIs: everything uses existing endpoints (list flags, list rules per flag, list rollouts per flag); the UI aggregates to “which flags use this segment” and “how many flags per segment.”

• For namespaces with many flags, the segment list and segment detail each trigger 1 + 2×F requests (F = number of flags) when those views load; consider a dedicated backend endpoint later if this becomes a performance concern.

Screenshots

[github-actions]

👋 Hi @aparimeet! Thanks for your contribution to this project.

It looks like one or more of your commits are missing a DCO (Developer Certificate of Origin) sign-off. The DCO is a simple way for you to certify that you have the right to submit this code under the project's license.

How to fix this:

# For future commits, use the -s flag
git commit -s -m "Your commit message"

# To sign off on existing commits in this PR
git rebase HEAD~$(git rev-list --count origin/main..HEAD) --signoff
git push --force-with-lease

The -s flag adds this line to your commit message:
Signed-off-by: Your Name <your.email@example.com>

📋 View the failing DCO check for more details

For more information about the DCO, visit: https://developercertificate.org/

[aparimeet]

This change should resolve #4037

[erka]

Hey @aparimeet

Thank you for your work. The idea is interesting, though I’m a bit concerned about how it would behave in setups with many flags. For systems with 99+ flags, this might become slow.

[aparimeet]

@erka You're right. There is potential for slowdown with scale.
Also, we might want to make use of listbox / modal when a segment is being used by a large number of flags, otherwise the Segment.tsx page might look distorted.

I wanted to see if I can make some progress with this issue and get something working with a small number of flags per segment.

This can be thought of as a proof of concept for the requirement.
We'll definitely need to iterate over this implementation with scalability in mind.

I'll try to test and benchmark with large number of flags and see how the system responds with this implementation.

[aparimeet]

I was able to import 100+ flags. Certain flags were set to use 100+ segments.

Fresh load for the SegmentTable.tsx page for 100+ segments, each being used by 100+ flags

Takes about 1-2 seconds to load the "Used in flags" data:
https://github.com/user-attachments/assets/06a7e70e-f04b-498a-95ff-65425349155a

Fresh load for Segment.tsx page with 100+ flags

Again, takes about 1-2 seconds to load all the flags:
https://github.com/user-attachments/assets/a3cfea11-150a-4379-a6b2-d8ca2b833124

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 58.05%. Comparing base (5c1625e) to head (9cfa560).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5563   +/-   ##
=======================================
  Coverage   58.05%   58.05%           
=======================================
  Files         177      177           
  Lines       16742    16742           
=======================================
  Hits         9720     9720           
  Misses       6019     6019           
  Partials     1003     1003           

Flag	Coverage Δ
unittests	58.05% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[erka]

@aparimeet One request for flags and extra two for each flags. It could take some time for people. Could we make this configurable with a UI preference option? I really don't want to make new api endpoint right now but I would like to make the progress with it.

[aparimeet]

@aparimeet One request for flags and extra two for each flags. It could take some time for people. Could we make this configurable with a UI preference option? I really don't want to make new api endpoint right now but I would like to make the progress with it.

Sure, moved this under a UI preference option. Here is an overview of the changes:

Summary

Adds a browser-only preference so users can opt in to loading “which flags use this segment” data. That path uses the existing APIs (listFlags + per-flag rules + rollouts) and can mean 1 + 2×N requests for N flags, so it is off by default and skips those requests when disabled. No new backend endpoints.

UI

Location	Behavior
Settings → Preferences (#/settings)	New switch “Segment flag usage” with short copy explaining it loads flag references on the segment page and segments list, and that turning it off reduces extra API calls when there are many flags.
Segment detail	When the preference is off, the whole “Used in flags” block is not rendered (no placeholder message). When on, behavior is unchanged (loading state, empty state, or list of flags).
Segments list	When off, the “Used in N flags” line is not shown (same as before when counts are not loaded), and the flag-count query is skipped.

State & persistence

• preferencesSlice.ts

  • New optional field: loadSegmentFlagReferences (stored with existing preferences in localStorage).
  • Default in initial state: false (feature off).
  • selectLoadSegmentFlagReferences: true only when loadSegmentFlagReferences === true (explicit opt-in; missing/false/undefined ⇒ off).
  • New action: loadSegmentFlagReferencesChanged(boolean).

• store.ts

  • loadSegmentFlagReferencesChanged included in the same listener that persists theme / timezone / sidebar to localStorage so the toggle survives reloads.

API usage (RTK Query skip)

• Segment.tsx — useListFlagsForSegmentQuery uses
  skip: !segmentKey || !loadSegmentFlagReferences
  so when the preference is off, listFlagsForSegment does not run (no list-flags + per-flag rules/rollouts fan-out).

• SegmentTable.tsx — useGetSegmentFlagCountsQuery uses
  skip: !data?.segments?.length || !loadSegmentFlagReferences
  so the segment list does not trigger that expensive aggregation when the preference is off.

Files touched

• ui/src/app/preferences/preferencesSlice.ts
• ui/src/app/preferences/Preferences.tsx
• ui/src/store.ts
• ui/src/app/segments/Segment.tsx
• ui/src/components/segments/SegmentTable.tsx

Note for reviewers

Users who already saved loadSegmentFlagReferences: true in localStorage keep that value; everyone else gets the default off behavior until they enable it in Preferences.

[erka]

thank you @aparimeet