Skip to content

Format numbers in AI Impact dashboard for locale

What does this MR do and why?

Uses language specific formatting for numbers on the AI Impact dashboard

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

(Note: the numbers in the Critical vulnerabilities over time row are randomly generated large numbers)

Before After
gdk.test_3000_groups_vsmg-1711992318_-analytics_dashboards_ai_impact__1 gdk.test_3000_groups_vsmg-1711992318_-_analytics_dashboards_ai_impact

How to set up and validate locally

  1. Check out this branch locally
  2. Visit an AI Impact dashboard (for example, http://gdk.test:3000/groups/$GROUP_NAME/-/analytics/dashboards/ai_impact)
    1. You will need to have the ai_impact_analytics_dashboard feature flag enabled to access this
  3. You may need to fake data coming from the API to make sure there are large numbers in the dashboard. If so, apply this patch:
    diff --git a/ee/app/assets/javascripts/analytics/dashboards/api.js b/ee/app/assets/javascripts/analytics/dashboards/api.js
    index 08c4e18c8e27..3692703b46d9 100644
    --- a/ee/app/assets/javascripts/analytics/dashboards/api.js
    +++ b/ee/app/assets/javascripts/analytics/dashboards/api.js
    @@ -236,7 +236,13 @@ export const fetchMetricsForTimePeriods = async (timePeriods, queryFn, queryPara
          timePeriod,
        );
    
    -    return res;
    +    return {
    +      ...res,
    +      vulnerability_critical: {
    +        ...res?.vulnerability_critical,
    +        value: Math.floor(Math.random() * 10000),
    +      },
    +    };
      });
    
      return Promise.all(promises);
  4. You will see that, for example, if your location is set to en-US, numbers like 5000 are formatted as 5,000.

Related to #455908 (closed), #444717 (closed)

Edited by Chad Lavimoniere

Merge request reports