feat(dashboard): add expand/collapse all groups button by kurama · Pull Request #6743 · louislam/uptime-kuma

kurama · 2026-01-15T12:23:34Z

Summary

In this pull request, the following changes are made:

Add expand/collapse all groups button to the monitor list filter bar
Button only appears when there are at least 2 groups with children (if a group has no children it cannot be expanded/collapsed, and with only one group the button is unnecessary)
Used folder/folder-open icons instead of the collapsible icons shown in the issue as they don't exist in the current FontAwesome version, folders better represent groups anyway (can be easily changed if needed)
Adjusted vertical spacing when filter buttons wrap to a new line to match horizontal spacing
Removed left padding from the monitor list column for consistent spacing on both sides of the application
Disable transitions on filter button and search input to prevent border flicker on theme change

Please follow this checklist to avoid unnecessary back and forth (click to expand)

⚠️ If there are Breaking change (a fix or feature that alters existing functionality in a way that could cause issues) I have called them out
🧠 I have disclosed any use of LLMs/AI in this contribution and reviewed all generated content.
I understand that I am responsible for and able to explain every line of code I submit.
🔍 Any UI changes adhere to visual style of this project.
🛠️ I have self-reviewed and self-tested my code to ensure it works as expected.
📝 I have commented my code, especially in hard-to-understand areas (e.g., using JSDoc for methods).
🤖 I added or updated automated tests where appropriate.
📄 Documentation updates are included (if applicable).
🧰 Dependency updates are listed and explained.
⚠️ CI passes and is green.

Screenshots for Visual Changes

Feature before:

Feature after:

Padding before:

(Red = difference)

Padding after:

UI Modifications: Highlight any changes made to the user interface.
Before & After: Include screenshots or comparisons (if applicable).

Event	Before	After
`UP`
`DOWN`
Certificate-expiry
Testing

Copilot

Pull request overview

This PR adds an expand/collapse all groups button to the monitor list filter bar, allowing users to quickly toggle the visibility of all monitor groups at once. The feature includes visual improvements to spacing and padding for a more consistent layout.

Changes:

Added expand/collapse all groups button that appears only when there are at least 2 groups with children
Improved vertical spacing consistency in the filter bar when buttons wrap
Removed left padding from monitor list column for consistent spacing

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/pages/Dashboard.vue	Removed left padding from monitor list column
src/lang/en.json	Added translations for expand/collapse all groups labels
src/icon.js	Imported folder and folder-open icons for the new button
src/components/MonitorListFilter.vue	Added collapse all button with spacing adjustments
src/components/MonitorList.vue	Implemented collapse/expand all logic with localStorage persistence

src/components/MonitorList.vue

CommanderStorm · 2026-01-15T12:36:11Z

The filters being in two rows is a bug and should not be like this.
Please see:

The filter looks weird in 2.1.0-beta.2 #6742

kurama · 2026-01-15T12:41:17Z

The filters being in two rows is a bug and should not be like this. Please see:
* [The filter looks weird in 2.1.0-beta.2 #6742](https://github.com/louislam/uptime-kuma/issues/6742)

Thanks for sharing, I can try to rework the filters, but what are the Select button and the Circle button with the 3 horizontal lines for?

CommanderStorm · 2026-01-15T12:46:21Z

That is the old UI, ignore that part.

For this change, I think we need to consolidate the filters a bit more.
I am not sure how, currently at least the button looks fairly misplaced.
I don't have the silver bullet on this one tbh, just that this should not strech to a second row.

Likely pulling that fix once you have found it to a different PR makes sense.

kurama · 2026-01-15T12:47:51Z

Okay, I'll try to think about it and do that in another PR when everything is ready :)

CommanderStorm · 2026-01-18T10:34:38Z

src/components/MonitorList.vue

+                    <MonitorListFilter
+                        :filterState="filterState"
+                        :allCollapsed="allGroupsCollapsed"
+                        :hasGroups="groupMonitors.length >= 2"


is this a typo?

Suggested change

:hasGroups="groupMonitors.length >= 2"

:hasGroups="groupMonitors.length >= 1"

Not really, I wondered: is having a button to open a SINGLE group actually useful? I thought we wanted this functionality to work from minimum two groups (that have children)? But maybe that's a bad idea

fair, there is already a button for this then.

CommanderStorm · 2026-01-18T10:40:08Z

src/components/MonitorListFilter.vue

+    <button
+        v-if="hasGroups"
+        type="button"
+        class="btn btn-outline-normal btn-collapse-all"
+        :title="allCollapsed ? $t('Expand All Groups') : $t('Collapse All Groups')"
+        @click="$emit('toggle-collapse-all')"
+    >
+        <font-awesome-icon :icon="allCollapsed ? 'folder' : 'folder-open'" fixed-width />
+    </button>


🤔 do you think we should hide this button on mobile?

I am open to both options.

We have space on mobile now, so I think leaving it is better, right?

CommanderStorm

I have left two comments.
Once those are answered, we can merge 👍🏻

I don't 100% think this fits into the rest of the UI, but I don't know how to do it better.
LGTM

Copilot AI review requested due to automatic review settings January 15, 2026 12:23

Copilot started reviewing on behalf of kurama January 15, 2026 12:24 View session

Copilot AI reviewed Jan 15, 2026

View reviewed changes

src/components/MonitorList.vue Outdated Show resolved Hide resolved

src/components/MonitorList.vue Outdated Show resolved Hide resolved

src/components/MonitorList.vue Show resolved Hide resolved

kurama mentioned this pull request Jan 16, 2026

refactor: simplify filters components #6749

Merged

9 tasks

CommanderStorm added the pr:please address review comments this PR needs a bit more work to be mergable label Jan 16, 2026

CommanderStorm marked this pull request as draft January 16, 2026 10:40

github-actions bot added the needs:resolve-merge-conflict label Jan 17, 2026

feat(dashboard): add expand/collapse all groups button

f273f09

kurama force-pushed the feat/collapse-expand-groups branch from de02ff2 to f273f09 Compare January 17, 2026 22:42

github-actions bot removed the needs:resolve-merge-conflict label Jan 17, 2026

kurama marked this pull request as ready for review January 17, 2026 22:43

github-actions bot added pr:needs review this PR needs a review by maintainers or other community members and removed pr:please address review comments this PR needs a bit more work to be mergable labels Jan 17, 2026

fix(dashboard): add padding adjustment for better layout consistency

5dda103

CommanderStorm reviewed Jan 18, 2026

View reviewed changes

CommanderStorm approved these changes Jan 18, 2026

View reviewed changes

CommanderStorm and others added 2 commits January 18, 2026 11:44

Merge branch 'master' into feat/collapse-expand-groups

84b3101

fix(MonitorListFilter): remove unnecessary margin from collapse button

ab29222

CommanderStorm enabled auto-merge (squash) January 18, 2026 10:45

CommanderStorm merged commit bf9b734 into louislam:master Jan 18, 2026
23 of 24 checks passed

CommanderStorm added this to the 2.1.0 milestone Jan 18, 2026

	:hasGroups="groupMonitors.length >= 2"
	:hasGroups="groupMonitors.length >= 1"

Uh oh!

Conversation

kurama commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots for Visual Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

CommanderStorm commented Jan 15, 2026

Uh oh!

kurama commented Jan 15, 2026

Uh oh!

CommanderStorm commented Jan 15, 2026

Uh oh!

kurama commented Jan 15, 2026

Uh oh!

CommanderStorm Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

kurama Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CommanderStorm Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

kurama Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

CommanderStorm Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

kurama Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

CommanderStorm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kurama commented Jan 15, 2026 •

edited

Loading

kurama Jan 18, 2026 •

edited

Loading