FlowFuse / FlowFuse/flowfuse

Unify the filtering UI pattern across hosted and remote instance list pages

Open
#8,115 0 comments 0 reactions 1 assignee Claimed by @cstns View on GitHub
Dominant language
JavaScript
Stars
400
Forks
89
Avg merge
1d 20h
Merged PRs (30d)
149

Description

Hosted and remote instance pages use slightly different UI patterns for filtering, and we should converge on one.

## Current differences

* **Remote instances** (`DevicesBrowser.vue`): The filter button says "Filter" and opens a popover with both status filters (Running, Error, Not Running) and mode filters (Fleet Mode, Developer Mode). This is the more flexible pattern since it can accommodate additional filter types.
* **Team hosted instances** (`pages/team/Instances.vue`): The filter button says "Status" and only offers status group filters (Running, Error, Not Running).
* **Application hosted instances** (`pages/application/Overview.vue`): Same as team hosted instances, button says "Status" with the same status group filters.

## What we want

* Adopt the remote instances pattern (generic "Filter" button with an extensible popover) as the standard across all instance list pages
* Both hosted and remote instance pages should use the same filter component/pattern so adding new filter types in the future is straightforward
* The filter button should show "Filter" (not "Status") and support multiple filter categories

Depends on #8114 for the backend filtering support.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.