[Actionable Observability] Add time range filter to Alerts Summary Widget

[fkanout]

📝 Summary

The Alerts Summary Widget will be integrated into other pages/hosts (not only the Rule Details page). Some of these pages have time range filter capabilities. The Alerts Summary Widget should apply the time range filters provided by the host page to guarantee consistency.

✅ AC

• Currently, the Alerts Summary Widget has a hardcoded time range filter 30days. And it should be kept as the default value.
• Expose an optionalprop for Alerts Summary Widget that accepts { start: number, end: number } for the time range
• The prop should update the Alert Summary Widget leading hook where it will override the default query in these two lines
• The selected time range should be mentioned in the widget interface, instead of the last 30-day alerts

cc @simianhacker

[elasticmachine]

Pinging @elastic/actionable-observability (Team: Actionable Observability)

[maryam-saeidi]

@fkanout I implemented this ticket a bit differently from the acceptance criteria:

Currently, the Alerts Summary Widget has a hardcoded time range filter 30days. And it should be kept as the default value.

I didn't use the default value since we need to pass absolute time to the new API and it was not clear when we need to generate the absolute time. I decided to put this responsibility to the consumer to decide when to update the absolute time range.

Expose an optionalprop for Alerts Summary Widget that accepts { start: number, end: number } for the time range

The selected time range should be mentioned in the widget interface, instead of the last 30-day alerts

I used { utcFrom: string, utcTo: string, title: JSX.Element | string } to make it more explicit that we need to provide the time in UTC format, in the new API, it only accepts this format. I also allowed consumer to decide whether to have a title for Alert Summary Widget or not.

Please let me know if there is any concern.