Uploaded image for project: 'Product Roadmaps'
  1. Product Roadmaps
  2. MMF-870

Better understand the history of a project



    • Type: MMF
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Labels:



      SonarQube 6.x has dropped project and global dashboards, and replaced them by more powerful hard-coded pages that must answer users' needs out of the box.

      What is currently missing is the ability to view and better understand the history of a project. There are 2 use cases for this:

      • I want to appreciate the evolution over time of a set of metrics to be sure that the quality of my project goes into the right direction
      • I want to go into details on some parts of the history of my project to understand why (for instance) there was a sudden increase of the technical debt

      Currently, the background images of the project home page and the history charts on each metric page do not correctly cover those cases:

      • Few people notice the background images on the home page - and it not possible to interact with it
      • It's hard to get to the history of a metric - some people don't even know that it is still possible
      • It's not possible to compare the evolution of some metrics, and in any case it's not possible to correlate a history chart with the corresponding analyses (that can give a hint on why some anomaly is visible on the chart)


      As a user, I want to easily see the history metric and:

      • Be able to see analysis events on the chart - not only the versions
      • Be able to zoom into a timeframe - because the history might be big and my mouse might not be precise enough to point to a specific analysis
      • Be able to compare the evolution of this metric with another metric

      As a user, when I go to the "Activity" page of my project, I expect to:

      • Not only see a list of analyses with their details, but also the history/evolution of the number of bugs, vulnerabilities, code smells, coverage and duplication
      • Display only the relevant analyses on the timeline (dots) when I select an event type on the top right dropdown box, so that I can click on a dot an highlight the analyses (with its details) in the list
      • Be able to zoom inside a chart, with the consequence that only the analyses of that timeframe are displayed on the list

      As a project admin, on top of the previous needs, I want to easily update / amend the history to:

      • clean it up
      • make it more precise (with custom events for instance)

      Design proposition

      From now on, the history of each metric will be displayed on the “Activity” page of a project. (Note: we’ll remove them later from the “Measures" space). This “Activity” page provides a timeline of events on the left, and a block dedicated to history charts on the right.

      Charts display

      By default, those two blocks display data corresponding to the time-range “from project start to today”. It is possible to select a custom time-range in the dropdown on top of the page:

      The timeline has the same behaviour than the current one. Except that for more readability, the diamonds representing events have different colors depending on the type of events. Those symbols are duplicated on the X-axis of the chart. When filtering events, they will also disappear on the chart.

      The timeline also displays versions as sticky badges. See https://jira.sonarsource.com/browse/SONAR-8550

      On the right block, 4 pre-defined charts can be displayed by clicking on the dropdown component. Those pre-defined charts allow the user to compare a specific set of metrics associated to a domain.




      Remediation Effort:

      There is also a “Custom” option that allows users to build their own history chart, out of the metrics they value the most. In that case, once this option selected, the user will find an empty chart and a “Add a metric” button

      Then, a pop-up appears, allowing to choose a domain and a specific metric to display.

      The user can repeat this action multiple times. If the selected metrics have the same Y-axis units, they will be displayed on the same chart:

      Otherwise, the block can be split to show 2 different charts with different Y-axis units, but the same X-axis timeline:

      This block can even be split in up to 4 charts if the user selects metrics from every unit we provide ( numbers, percentages, ratings, effort time). In that case we’ll repeat the X-axis timeline.

      A maximum of 3 metrics by chart can be selected by the user.

      See interactive prototype attached for the setup of a custom chart: MMF_870_Prototype_V2.zip

      By default, the first chart “Overview” is displayed. If the user selects another chart, his choice must be remembered and will be displayed next time he visits this page.

      Charts navigation

      By default, the charts show a time-period on the X-axis corresponding to the time-range selected in the top dropdown. However, it is possible to zoom on a specific part of the chart by using the thumbnail slider in the top right corner of the chart.

      When hovering on the chart, a tooltip will display, with data from the specific period being hovered:

      When the cursor is not on the chart, the last data is shown by default


      To improve discoverability, the Activity page is accessible from a project's Homepage in different ways.

      • It's possible to access it via the top "Activity" tab as usual
      • The Activity section on the right displays a minimal chart. On hover, the chart gives information. Clicking on the chart leads to the Activity page.

        If the user changes the display of the chart in the Activity page, the minimal chart on Homepage should reflect those changes. For example if a user visit the Activity page, chooses the chart "Coverage" then leaves, the Homepage chart will show Coverage measures.
      • Hovering on one of the main metrics, a button appears (see https://jira.sonarsource.com/browse/SONAR-8611 ) leading to a Custom chart showing the evolution of the specific metric.


        1. MMF_870_Activity_page_01_V1.png
          106 kB
        2. MMF_870_Activity_page_01_V2.png
          93 kB
        3. MMF_870_Activity_page_02_V1.png
          109 kB
        4. MMF_870_Activity_page_02_V2.png
          97 kB
        5. MMF_870_Activity_page_04_V2.png
          96 kB
        6. MMF_870_Chart_type_01_V1.png
          34 kB
        7. MMF_870_Chart_Type_01_V2.png
          89 kB
        8. MMF_870_Chart_type_02_V1.png
          20 kB
        9. MMF_870_Chart_Type_02_V2.png
          85 kB
        10. MMF_870_Chart_type_03_V1.png
          18 kB
        11. MMF_870_Chart_Type_03_V2.png
          88 kB
        12. MMF_870_Chart_type_04_V1.png
          21 kB
        13. MMF_870_Chart_type_05_V1.png
          37 kB
        14. MMF_870_Custom_Chart_01_V1.png
          87 kB
        15. MMF_870_Custom_Chart_01_V2.png
          70 kB
        16. MMF_870_Custom_Chart_02_V1.png
          88 kB
        17. MMF_870_Custom_Chart_02_V2.png
          71 kB
        18. MMF_870_Custom_Chart_03_V1.png
          95 kB
        19. MMF_870_Custom_Chart_04_V2.png
          71 kB
        20. MMF_870_Custom_Chart_05_V1.png
          91 kB
        21. MMF_870_Custom_Chart_05_V2.png
          71 kB
        22. MMF_870_Custom_Chart_11_V2.png
          87 kB
        23. MMF_870_Custom_Chart_13_V1.png
          105 kB
        24. MMF_870_Custom_Chart_17_V2.png
          87 kB
        25. MMF_870_Custom_Chart_18_V2.png
          95 kB
        26. MMF_870_Custom_Chart_19_V1.png
          102 kB
        27. MMF_870_filter_event_V1.png
          108 kB
        28. MMF_870_filter_event_V2.png
          96 kB
        29. MMF_870_Home_01_V2.png
          157 kB
        30. MMF_870_Home_02_V2.png
          160 kB
        31. MMF_870_Home_05_V2.png
          157 kB
        32. MMF_870_Prototype_V2.zip
          8.32 MB
        33. MMF_870_select_time_range_V1.png
          93 kB
        34. MMF_870_select_time_range_V2.png
          91 kB
        35. MMF_870_Zoom_Chart_02_V2.png
          76 kB

          Issue Links



              fabrice.bellingard Fabrice Bellingard
              fabrice.bellingard Fabrice Bellingard
              1 Vote for this issue
              6 Start watching this issue