Skip to content

Conversation

@The-Greg-O
Copy link
Contributor

@The-Greg-O The-Greg-O commented Dec 3, 2025

This PR adds search and sort functionality to the machines list page.

Changes

  • Search: Filter machines by name or IP address (supports both IPv4 and IPv6)
  • Sortable columns: Click column headers to sort by Name, IP Address, Version, or Last Seen
  • Numeric IP sorting: Sorts by IPv4 octets numerically (not alphabetically)
  • Numeric version sorting: Compares version segments numerically (1.10.0 > 1.9.0)
  • Smart Last Seen sorting: Online/connected machines are treated as "most recent"
  • Time delta display: Shows relative time for offline machines (e.g., "2 days, 5 hours ago")
  • Machine count: Displays total count, or "Showing X of Y" when filtering
  • Clear button: X icon appears in search box when text is entered

Screenshots

image image

The UI follows existing patterns in the codebase. Column headers show chevron indicators for sort direction.

Closes #351

- Add search input to filter machines by name or IP address
- Add sortable column headers for Name, IP, Version, and Last Seen
- Sort IP addresses numerically by octets (not alphabetically)
- Sort versions numerically by segments (1.10.0 > 1.9.0)
- Sort Last Seen with online machines treated as most recent
- Add time delta display for offline machines (e.g., "2 days ago")
- Add machine count display showing filtered/total counts
- Add clear button (X) to search input

Closes tale#351
@The-Greg-O The-Greg-O requested a review from tale as a code owner December 3, 2025 10:10
* - Under 1 month: "X days, Y hours ago"
* - Over 1 month: "X months, Y days ago"
*/
function formatTimeDelta(lastSeen: Date): string {
Copy link
Owner

Choose a reason for hiding this comment

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

Can we move this to the utils folder? It might end up getting used on other things.

Copy link
Contributor Author

@The-Greg-O The-Greg-O Dec 4, 2025

Choose a reason for hiding this comment

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

Done! Good idea. There are actually a couple other functions that might be nice in shared utils:
IP sorting logic
Version comparison
Last seen comparison

But I kept this change to what you requested and we can tackle the rest as needed

@tale
Copy link
Owner

tale commented Dec 4, 2025

Overall, this is such a welcome change, thank you so much for making this PR! It sets up a good future for replicating the search functionality that Tailscale provides.

@tale tale linked an issue Dec 4, 2025 that may be closed by this pull request
Moves the formatTimeDelta helper function to app/utils/time.ts
for reusability across the codebase, as requested in PR review.
@The-Greg-O The-Greg-O requested a review from tale December 4, 2025 20:45
@tale tale merged commit 70d535f into tale:main Dec 5, 2025
3 checks passed
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.

searchbar for machine listing Add machine filtering on the homepage (similar to Tailscale)

2 participants