Extract common date durations for charting/monitoring filtering
Summary
The time-duration definitions/handling in the Monitoring Dashboard should be refactored into some kind of reusable utility, component and/or constants so that other implementations (e.g., the upcoming WAF statistics reporting feature) can have similar functionality with minimal duplicated code.
During a review of one of the MRs for WAF statistics reporting, @jivanvl noted the following about some date-duration code:
this is something that could be moved to
/app/assets/javascripts/lib/utils/...
and use this as an utility for some other charts across GitLabthe monitoring team has the same kind of file here: https://gitlab.com/gitlab-org/gitlab/blob/v12.6.2-ee/app/assets/javascripts/monitoring/constants.js#L86-112
The code helps to create a time range filter dropdown in the page:
which is very similar (in principle) to the time range dropdown in the Monitoring Dashboard, in that there's a series of fixed time durations to choose from:
Why isn't this an RFC?
This could have been written as an RFC, but I thought that this is more of a refactoring proposal specific to a couple of features in GitLab, rather than a new/change pattern proposal (which I believe is more what RFCs are for). It's a fine line, though, and could be argued either way
Improvements
Code re-use means shorter development time, fewer decisions, more UI cohesion/consistency.
Risks
It's not yet clear to me how to extract something meaningfully reusable from the Monitoring Dashboard, since other use cases might call for:
- Different time ranges
- (A lack of) Custom time ranges
- Calendar intervals, rather than fixed-length intervals
Involved components
Any of (not exhaustive):
Monitoring Dashboard:
- https://gitlab.com/gitlab-org/gitlab/blob/v12.6.2-ee/app/assets/javascripts/monitoring/constants.js
- https://gitlab.com/gitlab-org/gitlab/blob/v12.6.2-ee/app/assets/javascripts/monitoring/components/date_time_picker/date_time_picker.vue
- https://gitlab.com/gitlab-org/gitlab/blob/v12.6.2-ee/app/assets/javascripts/monitoring/utils.js
Threat Monitoring:
Proposal
As we will need different ranges for WAF statistics, moving monitoring dashboard code to a common location which can be further reused/extended by threat monitoring page seems to be a good approach.
app/assets/javascripts/vue_shared
and app/assets/javascripts/operations
have been suggested to be used as common location.