Uploaded image for project: 'Minimal Marketable Features'
  1. Minimal Marketable Features
  2. MMF-870

Better understand the history of a project

    Details

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

      Description

      Context

      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)

      Needs

      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.

      Overview:

      Coverage:

      Duplications:

      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

      Access

      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.

        Attachments

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

          Issue Links

            Activity

              People

              • Assignee:
                fabrice.bellingard Fabrice Bellingard
                Reporter:
                fabrice.bellingard Fabrice Bellingard
              • Votes:
                1 Vote for this issue
                Watchers:
                6 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: