search

SigNoz / signoz

SigNoz is an open-source observability platform native to OpenTelemetry with logs, traces and metrics in a single application. An open-source alternative to DataDog, NewRelic, etc. 🔥 🖥. 👉 Open source Application Performance Monitoring (APM) & Observability tool
https://signoz.io
Other
18.45k stars 1.17k forks source link

Suggest recently selected custom time period #3897

Open makeavish opened 10 months ago

makeavish commented 10 months ago

https://www.loom.com/share/8ca6fd5f73ca4370a7cf9a75e733fb81?sid=7777ce46-195c-4e7f-a0c8-3ceb93e95036

joemiltonm commented 9 months ago

Hi Vishal, I would like to work on this issue shall I take it.

pranay01 commented 9 months ago

Sure @joemiltonm Assigned to you

pranay01 commented 9 months ago

Do propose the approach you will take and suggested location of the history of custom time period before starting to actually code

joemiltonm commented 9 months ago

Do propose the approach you will take and suggested location of the history of custom time period before starting to actually code

Thank you, sure will proceed after proposing the approach here.

joemiltonm commented 8 months ago

Hi @pranay01 ,

To implement this I would recommend using local storage combined with redux state management to store and retrieve the history of custom time ranges.

Workflow: When the user selects a custom time range using this we create a new object with 'label' and 'value' as key. This is dispatched to a 'customTimeHistory' state variable, which maintains an array of objects. Simultaneously, the object is stored in 'timeHistory' key in the local storage. This ensures new custom date gets reflected in the dropdown options and also stored in local storage for persistance.

When the application starts, the 'customTimeHistory' redux variable initialises to the values from the local storage or an empty array if local storage is not available.

Please suggest if any changes are required in this approach.

Below is the screencast of the custom time history feature I experimented with the approach I've mentioned. please have a look.

Screencast from 09-01-24 01:07:28 PM IST.webm

Further, if the user keeps adding custom dates then a long list of custom dates will appear clumsy. To avoid this

we can include a 'remove' button next to the custom time ranges to manually delete it.

or

we can limit the total custom time ranges that can be added to say 5 or 8 and If this limit is exceeded, we could remove the oldest date (FIFO)

Please share your preferred way or any different approach we need to take.

makeavish commented 8 months ago

@YounixM Please review above approach

YounixM commented 8 months ago

@joemiltonm: We are in the process of updating the design for the time selector. It will take a week or so. Post that, we can collaborate and get this change merged.

joemiltonm commented 8 months ago

@joemiltonm: We are in the process of updating the design for the time selector. It will take a week or so. Post that, we can collaborate and get this change merged.

@YounixM, sure. we'll collaborate and implement the feature in the updated design.