Expose new monthIso8601 GraphQL option to fix CI minutes usage sorting

On the backend, add a new monthIso8601 option to
NamespaceMonthlyUsageType.

On the frontend, utilise monthIso8601 GraphQL field to sort CI minutes
usage graph correctly. Additionally, add the year to the date format
used on the graph (eg. "January" becomes "Jan 2022").

Changelog: fixed

doc/api/graphql/reference/index.md

@@ -8934,6 +8934,7 @@ Represents the total number of issues and their weights for a particular day.
 | ---- | ---- | ----------- |
 | <a id="ciminutesnamespacemonthlyusageminutes"></a>`minutes` | [`Int`](#int) | Total number of minutes used by all projects in the namespace. |
 | <a id="ciminutesnamespacemonthlyusagemonth"></a>`month` | [`String`](#string) | Month related to the usage data. |
+| <a id="ciminutesnamespacemonthlyusagemonthiso8601"></a>`monthIso8601` | [`ISO8601Date`](#iso8601date) | Month related to the usage data in ISO 8601 date format. |
 | <a id="ciminutesnamespacemonthlyusageprojects"></a>`projects` | [`CiMinutesProjectMonthlyUsageConnection`](#ciminutesprojectmonthlyusageconnection) | CI minutes usage data for projects in the namespace. (see [Connections](#connections)) |
 | <a id="ciminutesnamespacemonthlyusagesharedrunnersduration"></a>`sharedRunnersDuration` | [`Int`](#int) | Total numbers of minutes used by the shared runners in the namespace. |
 

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

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

ee/app/assets/javascripts/ci_minutes_usage/graphql/queries/ci_minutes.graphql

@@ -2,6 +2,7 @@ query getCiMinutesUsage {
   ciMinutesUsage {
     nodes {
       month
+      monthIso8601
       minutes
       projects {
         nodes {

ee/app/graphql/types/ci/minutes/namespace_monthly_usage_type.rb

@@ -12,6 +12,9 @@ module Types
         field :month, ::GraphQL::Types::String, null: true,
               description: 'Month related to the usage data.'
 
+        field :month_iso8601, ::GraphQL::Types::ISO8601Date, method: :date, null: true,
+              description: 'Month related to the usage data in ISO 8601 date format.'
+
         field :minutes, ::GraphQL::Types::Int, null: true,
               method: :amount_used,
               description: 'Total number of minutes used by all projects in the namespace.'

ee/spec/frontend/ci_minutes_usage/mock_data.js

@@ -4,6 +4,7 @@ export const ciMinutesUsageMockData = {
       nodes: [
         {
           month: 'June',
+          monthIso8601: '2021-06-01',
           minutes: 5,
           projects: {
             nodes: [

ee/spec/graphql/types/ci/minutes/namespace_monthly_usage_type_spec.rb

@@ -4,6 +4,6 @@ require 'spec_helper'
 
 RSpec.describe GitlabSchema.types['CiMinutesNamespaceMonthlyUsage'] do
   it do
-    expect(described_class).to have_graphql_fields(:minutes, :month, :projects, :shared_runners_duration)
+    expect(described_class).to have_graphql_fields(:minutes, :month, :month_iso8601, :projects, :shared_runners_duration)
   end
 end