Feat: Improved comprehensive monitor list filtering

[chakflying]

⚠️⚠️⚠️ Since we do not accept all types of pull requests and do not want to waste your time. Please be sure that you have read pull request rules:
https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md#can-i-create-a-pull-request-for-uptime-kuma

Tick the checkbox if you understand [x]:

• I have read and understand the pull request rules.

Description

Fixes #1134.
Fixes #1585.

Design inspired by the GitHub mobile app. The left most button shows the number of active filters, and clears all active filters. Each category of filter is a multi-select, which when only one is selected, the filter state will be shown in the button, otherwise the generic "Status", "Active" is shown. Works independent of the search text.

This PR is a partial duplicate of #1971, but does not handle the filtering of the events list.

Also fixes bugs:

• monitor.active returns 0 instead of false when it has no parent
• "Pending" monitors counted as "Up". Debatable but doesn't make sense for the statistics listed in the filters.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• User interface (UI)
• New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project
• I ran ESLint and other linters for modified files
• I have performed a self-review of my own code and tested it
• I have commented my code, particularly in hard-to-understand areas
  (including JSDoc for methods)
• My changes generate no new warnings
• My code needed automated testing. I have added them (this is optional task)

Screenshots (if any)

light	dark

[CommanderStorm]

• could you add Resolves #1134 to the description
• From just looking at the screenshots (this is not a code review, i can do that later today) the design looks a bit asymertical (red arrows). Could we make the search bar stretch to the full width in the mobile view? (I am not a designer, feel free to overrule)
  

[louislam]

Nice work. I prefer your solution rather than #1971.

[chakflying]

The "Add Monitor" button lines up with the edge of the monitor list, while the Filters lines up with the status pills of the monitors.

The space left of the search box is reserved for #1886.

[CommanderStorm]

Merging this should also close the PRs:

• Option to display only monitors that are down #3045
• Add filtering monitor list and status history by its status (UP|DOWN) #1971

[louislam]

Added a missing translate key and split Active into another key activeFilter.
Thanks for the big feature.

[louislam]

Merging this should also close the PRs:

* [Option to display only monitors that are down #3045](https://github.com/louislam/uptime-kuma/pull/3045)

* [Add filtering monitor list and status history by its status (UP|DOWN) #1971](https://github.com/louislam/uptime-kuma/pull/1971)

Thanks for finding them, they will be closed.

[derekoharrow]

Just updated to 1.23 and trying the new filters. I love them, but...

I have a monitor that is down, and this is under a nested group ("the lounge" under "Everything->Media")

If I have the view unfiltered, the default, then everything shows as expected.

If I filter for "down" monitors, then it seems to list everything multiple times. In this case, under "Everything", under "Everything / Media" and under "Everything / Media / thelounge".

Also, when filtered, instead of showing the monitor name on its own, it shows all the groups above it - e.g. instead of "the lounge" it says "Everything / Media / thelounge" which makes it very difficult to read.

[ajnadox]

Just tested this out and its nice but the feature should be on Status pages since thats whats showing on another screen we have running.

[derekoharrow]

Just tested this out and its nice but the feature should be on Status pages since thats whats showing on another screen we have running.

Agreed - would love the Status screens to only show problems and not everything...

[CommanderStorm]

@ajnadox @derekoharrow
Filtering of status pages is tracked in #1512
If you have productive comments (UI-Draft, …) please leave them there.

Some maintainers use 👍🏻 on issues to prioritise work, as always: Pull Requests welcome.