[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
  • WIP prototype of the chart

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?