Sort months of the CI minutes chart app

Changelog: fixed
EE: true

ee/app/assets/javascripts/ci_minutes_usage/components/app.vue

 <script>
+import { MONTHS } from '../constants';
 import getCiMinutesUsage from '../graphql/queries/ci_minutes.graphql';
 import MinutesUsageMonthChart from './minutes_usage_month_chart.vue';
 import MinutesUsageProjectChart from './minutes_usage_project_chart.vue';
@@ -23,7 +24,21 @@ export default {
   },
   computed: {
     minutesUsageDataByMonth() {
-      return this.ciMinutesUsage.map((cur) => [cur.month, cur.minutes]);
+      function monthIndex([name]) {
+        return Object.keys(MONTHS).indexOf(name.toLowerCase());
+      }
+
+      return this.ciMinutesUsage
+        .map((cur) => [cur.month, cur.minutes])
+        .sort((a, b) => {
+          if (monthIndex(a) > monthIndex(b)) {
+            return 1;
+          }
+          if (monthIndex(a) < monthIndex(b)) {
+            return -1;
+          }
+          return 0;
+        });
     },
   },
 };

ee/app/assets/javascripts/ci_minutes_usage/components/minutes_usage_project_chart.vue

@@ -2,13 +2,13 @@
 import { GlAlert, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import { keyBy } from 'lodash';
-import { __ } from '~/locale';
 import {
   USAGE_BY_PROJECT,
   X_AXIS_PROJECT_LABEL,
   X_AXIS_CATEGORY,
   Y_AXIS_LABEL,
   NO_CI_MINUTES_MSG,
+  MONTHS,
 } from '../constants';
 
 export default {
@@ -17,20 +17,6 @@ export default {
   X_AXIS_CATEGORY,
   Y_AXIS_LABEL,
   NO_CI_MINUTES_MSG,
-  i18n: {
-    january: __('January'),
-    february: __('February'),
-    march: __('March'),
-    april: __('April'),
-    may: __('May'),
-    june: __('June'),
-    july: __('July'),
-    august: __('August'),
-    september: __('September'),
-    october: __('October'),
-    november: __('November'),
-    december: __('December'),
-  },
   components: {
     GlAlert,
     GlColumnChart,
@@ -90,7 +76,7 @@ export default {
       [this.selectedMonth] = this.months;
     },
     getTranslatedMonthName(month) {
-      return this.$options.i18n[month.toLowerCase()] ?? month;
+      return MONTHS[month.toLowerCase()] ?? month;
     },
   },
 };

ee/app/assets/javascripts/ci_minutes_usage/constants.js

@@ -9,3 +9,18 @@ export const Y_AXIS_LABEL = __('Minutes');
 export const NO_CI_MINUTES_MSG = s__('UsageQuota|No CI minutes usage data available.');
 
 export const X_AXIS_CATEGORY = 'category';
+
+export const MONTHS = {
+  january: __('January'),
+  february: __('February'),
+  march: __('March'),
+  april: __('April'),
+  may: __('May'),
+  june: __('June'),
+  july: __('July'),
+  august: __('August'),
+  september: __('September'),
+  october: __('October'),
+  november: __('November'),
+  december: __('December'),
+};