Filter query improvements on tables

[oboc-sts]

Regarding the filter query used on tables, I believe the final resolution was the following:

• The filter query should still support the current functionality and work the way it works right now (free text search across all the table contents)
• On top of this ^ we add a key:value based syntax where key = "column name" and value = "string to search"
  • the double quotas are there to cover for multi-words / special characters used in column names and/or values
• If the filter query is set, the UI should warn about this at all times to help our users understand they are not viewing ALL the entires, but a limited set of results matching a specific criteria
  • an easy way to clear the active filter query is also mandatory
• The filter query should be embedded in the URL for easy sharing, bookmarking, referencing, etc.

In other words:

• if you want to free text search error you just enter error in the filter input and the current search (across the entire table contents) kicks in, displaying all entries containing the error keyword in any column
• if you want to search for all entries having state (a specific column name) conaining the error keyword, you enter "state":"error"

Additional details and improvements will probably be added later on as we pick this up... Please inquire about this with the UX team.

[github-actions]

🎯 Agentic Issue Triage

This is a feature request to enhance the table filter/search functionality in the Rancher Dashboard with key:value column-scoped search syntax, URL-embedded filter state, and a persistent visual indicator when filters are active.

📋 Summary of Requested Features

1. Backward-compatible free-text search – existing behavior preserved (search across all columns)
2. Column-scoped "key":"value" syntax – quoted syntax to support multi-word column names and values
   • Example: "state":"error" searches only in the state column
3. Active filter warning/indicator – always visible UI cue so users know they're viewing a filtered subset, not all entries
4. Clear filter button – easy one-click way to reset the active filter
5. Filter state in URL – enables sharing, bookmarking, and referencing filtered views

🗂️ Affected Components

• shell/components/SortableTable/ – primary table component where search/filter logic lives
• shell/utils/ – likely search/filter utility functions
• Router/query-string handling for URL state persistence

Key files to explore:

• shell/components/SortableTable/index.vue
• shell/components/SortableTable/filtering.js (if exists)
• shell/mixins/ for any table-related mixins

🛠️ Implementation Guidance

Parsing

• Implement a query parser that distinguishes free-text from "key":"value" tokens
• Consider a small parser (e.g., regex-based or a simple state machine) to tokenize the input
• Be careful about edge cases: unmatched quotes, colons in free-text, mixed syntax like error "state":"active"

Column Matching

• Map quoted key to actual column headers/field names (handle case-insensitivity)
• Need to reconcile display column names vs. underlying data field names

URL Persistence

• Use Vue Router query params (e.g., ?filter=...) — encode/decode carefully
• Watch for conflicts with existing query params the page might use

UX

• Consider a chip/tag UI element below or within the filter input to show active key:value filters
• "Clear filter" could be an ✕ button on the chip or a "Clear all" link
• Coordinate with UX team (as mentioned in the issue) before finalising UI

✅ Suggested Sub-Tasks

• Design review / sign-off from UX team on filter indicator and clear-button UX
• Implement "key":"value" query parser utility (with unit tests)
• Update SortableTable filter logic to use new parser
• Add URL query param persistence for filter state (encode/decode)
• Add visual filter-active indicator component
• Add clear-filter action (button/chip ✕)
• Write unit tests for parser edge cases (empty values, special chars, mixed syntax)
• Write Cypress E2E tests covering free-text, column-scoped, and URL sharing scenarios
• Verify behavior on all major table views (Workloads, Events, Pods, etc.)

🔗 Useful Resources

• SortableTable component – start here for filter logic
• GitHub search syntax (inspiration for key:value DSL): https://docs.github.com/en/search-github/getting-started-with-searching-on-github/understanding-the-search-syntax
• Vue Router query params guide: (router.vuejs.org/redacted)

Note: The issue mentions looping in the UX team for additional details — this should be a prerequisite before starting implementation.

Generated by Agentic Triage for issue #17747 · ● 191.4K · ◷

[richard-cox]

Placeholder for thoughts

• currently not all columns are filterable via free text (they're locally deduced rather than existing in the resource server side). this would also apply to filtering specific columns

Update 1

• typing could open a drop down showing column human names that support filtering. on selecting a column another drop down could show containing existing values of that column (which would be possible using the new summary endpoint). selections would be of a kinda pill form instead of straight up editable text
• we would need to work out how a user ignores suggests and just puts in free text

[github-actions]

🤖 Issue grooming questions

Thanks for the feature description and the usage examples! The high-level behaviour (free-text search + key:value syntax, URL embedding, filter indicator with clear action) is described. A couple of things are needed before this can be triaged for development:

1. Missing: Acceptance Criteria

Please add a concrete, testable checklist defining what "done" looks like. For example:

• A user can enter free text (e.g., error) and all table rows containing that text in any visible column are shown.
• A user can enter "columnName":"value" and only rows where that column matches the value are shown.
• When a filter query is active, a persistent indicator is shown and a one-click action clears the filter.
• The active filter query is reflected in the URL and survives a page reload.
• Existing free-text search behaviour is not regressed.

2. Missing: Technical Details

To allow an engineer to scope this work:

• Which specific table component(s) will be affected (e.g., SortableTable, a specific resource list page)?
• Is there a UX design or mockup available? The description mentions UX team involvement — can a link or screenshot be added once available?

This comment was generated automatically to help gather the information needed to groom this issue.

Generated by Daily Issue Grooming · ● 823.9K · ◷

[github-actions]

🤖 Issue grooming questions

The feature description (free-text search + "key":"value" column-scoped syntax, active filter indicator, clear action, URL persistence) is understood. The two items requested previously are still outstanding in the issue body.

1. Still missing: Acceptance Criteria

Please add a concrete, testable checklist directly in the issue body defining what "done" looks like. For example:

• Entering free text (e.g. error) in the filter input searches across all visible table columns, matching existing behaviour.
• Entering "columnName":"value" (e.g. "state":"error") filters the table to only rows where that column contains the specified value.
• When a filter query is active, a persistent visual indicator is shown at all times.
• A one-click action (e.g. clear button or ✕) removes the active filter.
• The active filter query is reflected in the page URL and survives a page reload.
• Existing free-text search behaviour is not regressed.

2. Still missing: Technical Details

To allow an engineer to scope the work:

• Which specific table component(s) will be updated (e.g. shell/components/SortableTable/index.vue)?
• Is a UX design or mockup available? The issue mentions looping in the UX team — can a link or screenshot be added once available?

This comment was generated automatically to help gather the information needed to groom this issue.

Generated by Daily Issue Grooming · ● 972.7K · ◷