Decouple time window specs for the monitoring dashboard
What does this MR do?
This MR moves some logic from our dashboard to one of its components, the date picker, to ensure selected dates are valid.
As the validation logic moves to the date picker, the date picker can issue @events to inform upper components that there has been a problem. Instead of having the dashboard check for correct date input, the date-picker emits events to let the dashboard know if the data is correct.
Additionally, if the dates selected are wrong for some reason (e.g. faulty bookmark) the date picker is now left always visible, so the user can directly fix the issue in the UI.
Screenshots
The dashboard should work as before, with one exception, the date picker is available even if the dates are not correct, to allow the user to change them.
Error case handling
| before (dates are wrong, data is not loaded) | after (dates are wrong, data is loaded) | after (dates are wrong, user can verify in the timepicker) |
|---|---|---|
 |
 |
 |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Initial motivation
I decided to tackle this in case so the date picker can be reused in the logs page, related to #37276 (closed)
Closes #35936 (closed)