Skip to content

Add additional Machines list filters#507

Open
siemenvdn wants to merge 2 commits intotale:mainfrom
siemenvdn:feature/extend-machine-filtering
Open

Add additional Machines list filters#507
siemenvdn wants to merge 2 commits intotale:mainfrom
siemenvdn:feature/extend-machine-filtering

Conversation

@siemenvdn
Copy link

Added the basic filters as described in the #506 feature request I made.

Adds four composable filter dimensions to the Machines page on top of the existing text search. All filter state lives in URL search params so filtered views are fully bookmarkable and shareable.

Params:

  • q (text search)
  • user (user ID or tag-owned)
  • tag (e.g. tag:server)
  • status (online / offline / expired)
  • route (exit-node / subnet)

All optional and composable.

UI:

Screen.Recording.2026-03-21.at.13.15.16.mov

Changes

  • machine-filters.tsx — MachineFilters component renders pill-shaped filter dropdowns as a fragment, slotting directly into the existing flex row. Active filters turn indigo-tinted; clicking a selected item deselects it. Tag dropdown is hidden when no machines have tags.
  • use-machine-filter-params.ts — custom hook that is the single source of truth for reading/writing all four filter params, including hasActiveFilters and clearFilters (preserves q).
  • overview.tsx — filter predicate in useMemo uses lookup tables (STATUS_MATCH, ROUTE_MATCH) instead of nested if-chains. Reads filter params via the shared hook.

@siemenvdn siemenvdn requested a review from tale as a code owner March 21, 2026 12:32
Copy link
Owner

@tale tale left a comment

Choose a reason for hiding this comment

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

Left a small nit, appreciate the memoization though

Comment on lines +95 to +98
const userOptions = [
...(tagOwnedExists ? [{ value: "tag-owned", label: "Tag-owned" }] : []),
...users.map((u) => ({ value: u.id, label: getUserDisplayName(u) })),
];
Copy link
Owner

Choose a reason for hiding this comment

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

I see what you're doing here, but I think it's slightly unexpected behavior where the tooltip/user select dropdown shows names, but the URL shows IDs. They should both be the usernames.

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