Implement Filters on Uptime Monitors Page

[Br0wnHammer]

Is your feature request related to a problem? Please describe.
We need to implement filtering on the uptime monitors page. This is the first stage of the filter implementation.

Describe the solution you'd like
Filters to Implement (Stage 1)

Type: http, port, docker, ping
Status: Resumed, Paused

Have a reset button present when a filter is selected.

Backend Status
✅ Mostly, the required DB queries are completed.

Frontend Requirements
Use the Chip component to handle filters effectively.
Ensure that filtering is smooth and intuitive.
Debounce search queries when filtering via string input, so we are not making a query for every keystroke.

Tasks

• Implement Type and Status filters using the Chip component.
• Integrate filtering logic with the backend.
• Add debounce for string-based filtering.
• Test and ensure proper functionality.

[Br0wnHammer]

CC @gorkem-bwl, @ajhollid

[Br0wnHammer]

@gorkem-bwl, @ajhollid

Sharing my first draft of filters implementation. (Reset button yet to be created)

[gorkem-bwl]

Looks like a good start to me. You can play with the colors + remove the line widget explanation area (where it says "Type") later on. Also you can check whether the drop down menu line heights are the same with the ones in the components.

[Br0wnHammer]

Filter.mp4

@ajhollid @gorkem-bwl, need to clarify one thing.
How about we change the status filter box to isActive (true, false)

since down monitors also have the field isActive as true only their status is down.
This is just a functionality testing draft.
Final UI will be sent soon for approvals.

[gorkem-bwl]

Filter.mp4
@ajhollid @gorkem-bwl, need to clarify one thing. How about we change the status filter box to isActive (true, false)

since down monitors also have the field isActive as true only their status is down. This is just a functionality testing draft. Final UI will be sent soon for approvals.

Yep, I am good with that. You might also think about right-aligning all the UI related elements added here.

[Br0wnHammer]

Filter.mp4
@ajhollid @gorkem-bwl, need to clarify one thing. How about we change the status filter box to isActive (true, false)
since down monitors also have the field isActive as true only their status is down. This is just a functionality testing draft. Final UI will be sent soon for approvals.

Yep, I am good with that. You might also think about right-aligning all the UI related elements added here.

Near to the search component?
Also should I implement the filter for names as well replacing the search bar? @gorkem-bwl

[gorkem-bwl]

Filter.mp4
@ajhollid @gorkem-bwl, need to clarify one thing. How about we change the status filter box to isActive (true, false)
since down monitors also have the field isActive as true only their status is down. This is just a functionality testing draft. Final UI will be sent soon for approvals.

Yep, I am good with that. You might also think about right-aligning all the UI related elements added here.

Near to the search component?
Also should I implement the filter for names as well replacing the search bar? @gorkem-bwl

Yes for both :)

[ajhollid]

@gorkem-bwl @Br0wnHammer monitors have two properties that we likelty want to filter by isActive and status

Whether or not a monitor is "Up" or "Down" depends on the stauts property

Whether or not a monitor is "Paused" or "Not Paused" depends on the isActive propery.

I don't know if users will equat "Active" and "Inactive" to "Paued" and "Not Paused".

I would suggest the filter values be

"Up" / "Down" -> status
"Paused" -> isActive === false

That would be the most intiuitive to me.

[gorkem-bwl]

@gorkem-bwl @Br0wnHammer monitors have two properties that we likelty want to filter by isActive and status

Whether or not a monitor is "Up" or "Down" depends on the stauts property

Whether or not a monitor is "Paused" or "Not Paused" depends on the isActive propery.

I don't know if users will equat "Active" and "Inactive" to "Paued" and "Not Paused".

I would suggest the filter values be

"Up" / "Down" -> status "Paused" -> isActive === false

That would be the most intiuitive to me.

How about:

Status: Up or Down
State: Paused or Active

?

[Br0wnHammer]

@gorkem-bwl @Br0wnHammer monitors have two properties that we likelty want to filter by isActive and status
Whether or not a monitor is "Up" or "Down" depends on the stauts property
Whether or not a monitor is "Paused" or "Not Paused" depends on the isActive propery.
I don't know if users will equat "Active" and "Inactive" to "Paued" and "Not Paused".
I would suggest the filter values be
"Up" / "Down" -> status "Paused" -> isActive === false
That would be the most intiuitive to me.

How about:

Status: Up or Down State: Paused or Active

?

Just to clarify, the three filters would now be:
Type
Status
State

?

[gorkem-bwl]

@gorkem-bwl @Br0wnHammer monitors have two properties that we likelty want to filter by isActive and status
Whether or not a monitor is "Up" or "Down" depends on the stauts property
Whether or not a monitor is "Paused" or "Not Paused" depends on the isActive propery.
I don't know if users will equat "Active" and "Inactive" to "Paued" and "Not Paused".
I would suggest the filter values be
"Up" / "Down" -> status "Paused" -> isActive === false
That would be the most intiuitive to me.

How about:

Status: Up or Down State: Paused or Active

?

Just to clarify, the three filters would now be:
Type
Status
State

?

Yes, plus the search section. All will be connected with "AND".

[Br0wnHammer]

The reset button with hover.

[Br0wnHammer]

@gorkem-bwl @Br0wnHammer monitors have two properties that we likelty want to filter by isActive and status
Whether or not a monitor is "Up" or "Down" depends on the stauts property
Whether or not a monitor is "Paused" or "Not Paused" depends on the isActive propery.
I don't know if users will equat "Active" and "Inactive" to "Paued" and "Not Paused".
I would suggest the filter values be
"Up" / "Down" -> status "Paused" -> isActive === false
That would be the most intiuitive to me.

How about:
Status: Up or Down State: Paused or Active
?

Just to clarify, the three filters would now be:
Type
Status
State
?

Yes, plus the search section. All will be connected with "AND".

@gorkem-bwl, I had a chat with Alex regarding search section. He believes better to leave the search component alone for now for the first stage.

[gorkem-bwl]

Yes, plus the search section. All will be connected with "AND".

@gorkem-bwl, I had a chat with Alex regarding search section. He believes better to leave the search component alone for now for the first stage.

I am good with that 👍

[Br0wnHammer]

Filter.mp4

Hey @gorkem-bwl, @ajhollid, please review the filtering functionality. Also, please mention any UI improvements.

[gorkem-bwl]

Can you change:

• http to HTTP(S)
• ping to Ping
• docker to Docker
• port to Port

Also remove the placeholder here:

How does it look like with light theme enabled?

[Br0wnHammer]

Can you change:

• http to HTTP(S)
• ping to Ping
• docker to Docker
• port to Port

Also remove the placeholder here:

How does it look like with light theme enabled?

@gorkem-bwl

[gorkem-bwl]

Light theme looks good.

[Br0wnHammer]

Hey @gorkem-bwl, final UI.

[gorkem-bwl]

Looks good to me !