[FE] Identifying Potential Code Hotspots
Frontend implementation of https://gitlab.com/gitlab-org/gitlab-ee/issues/12683
Requirements
Overview
- New feature flag - to be added by backend if possible, else we can handle it
- Sidebar navigation menu item
- Dropdowns for item selection, first iteration to include
- Group selection (does not load hotspots, only project selection)
- Project selection
- Number of files
- Treemap chart displaying code hotspots for a single project
- No access view for unsupported users / groups
- No data toast message when no data returned for selected range
Additional components required
- ECharts Treemap
- This will either need to be added to gitlab or wrapped as a gitlab-ui component.
- To ensure that the best path is chosen, ping a maintainer of gitlab-ui as early as possibly
- Click functionality on folders within the chart to drill down
- The level of complexity will be determined by the project code hotspot data which is returned from the API
- 1 level of data: Most complicated
- 2 levels of data: Somewhere in the middle
- All levels of data: Least complicated
- The level of complexity will be determined by the project code hotspot data which is returned from the API
- WIP prototype of the chart
- This will either need to be added to gitlab or wrapped as a gitlab-ui component.
Implementation
- As this is a new page, the follow will be required
- New Vue application to be created for the page
- New Vuex store for the state management
Questions
- Product / UX
- Are subgroups being left out for the MVP?
- Backend
- Will it be very resource intensive to return all project code hotspot data in one API call?
- Frontend
- What would be the best way to test all of this?
Edited by Brandon Labuschagne