Include leading zero in months when accessing usage and quota data (#1528)

Closes #1527 

Improves front-end types & ensures the data being accessed matches the
data sent by the back-end.

Tested by hand by using the returned data from the `/orgs/${orgId}`
endpoint in prod where this is happening in dev

frontend/src/pages/org/dashboard.ts

@@ -7,7 +7,7 @@ import type { SlSelectEvent } from "@shoelace-style/shoelace";
 
 import LiteElement, { html } from "@/utils/LiteElement";
 import type { AuthState } from "@/utils/AuthService";
-import type { OrgData } from "@/utils/orgs";
+import type { OrgData, YearMonth } from "@/utils/orgs";
 import type { SelectNewDialogEvent } from "./index";
 import { humanizeExecutionSeconds } from "@/utils/executionTimeFormatter";
 
@@ -374,13 +374,13 @@ export class Dashboard extends LiteElement {
     }
 
     const now = new Date();
+    const currentYear = now.getFullYear();
+    const currentMonth = String(now.getUTCMonth() + 1).padStart(2, "0");
+    const currentPeriod = `${currentYear}-${currentMonth}` as YearMonth;
 
     let usageSeconds = 0;
     if (this.org!.monthlyExecSeconds) {
-      const actualUsage =
-        this.org!.monthlyExecSeconds[
-          `${now.getFullYear()}-${now.getUTCMonth() + 1}`
-        ];
+      const actualUsage = this.org!.monthlyExecSeconds[currentPeriod];
       if (actualUsage) {
         usageSeconds = actualUsage;
       }
@@ -392,10 +392,7 @@ export class Dashboard extends LiteElement {
 
     let usageSecondsAllTypes = 0;
     if (this.org!.crawlExecSeconds) {
-      const actualUsage =
-        this.org!.crawlExecSeconds[
-          `${now.getFullYear()}-${now.getUTCMonth() + 1}`
-        ];
+      const actualUsage = this.org!.crawlExecSeconds[currentPeriod];
       if (actualUsage) {
         usageSecondsAllTypes = actualUsage;
       }
@@ -403,10 +400,7 @@ export class Dashboard extends LiteElement {
 
     let usageSecondsExtra = 0;
     if (this.org!.extraExecSeconds) {
-      const actualUsageExtra =
-        this.org!.extraExecSeconds[
-          `${now.getFullYear()}-${now.getUTCMonth() + 1}`
-        ];
+      const actualUsageExtra = this.org!.extraExecSeconds[currentPeriod];
       if (actualUsageExtra) {
         usageSecondsExtra = actualUsageExtra;
       }
@@ -424,10 +418,7 @@ export class Dashboard extends LiteElement {
 
     let usageSecondsGifted = 0;
     if (this.org!.giftedExecSeconds) {
-      const actualUsageGifted =
-        this.org!.giftedExecSeconds[
-          `${now.getFullYear()}-${now.getUTCMonth() + 1}`
-        ];
+      const actualUsageGifted = this.org!.giftedExecSeconds[currentPeriod];
       if (actualUsageGifted) {
         usageSecondsGifted = actualUsageGifted;
       }
@@ -756,7 +747,7 @@ export class Dashboard extends LiteElement {
       );
     }
 
-    const rows = Object.entries(this.org.usage || {})
+    const rows = (Object.entries(this.org.usage || {}) as [YearMonth, number][])
       // Sort latest
       .reverse()
       .map(([mY, crawlTime]) => {

frontend/src/types/org.ts

@@ -1,3 +1,5 @@
+import type { Range } from "./utils";
+
 // From UserRole in backend
 export type UserRole = "viewer" | "crawler" | "owner" | "superadmin";
 
@@ -8,6 +10,8 @@ export const AccessCode: Record<UserRole, number> = {
   owner: 40,
 } as const;
 
+export type YearMonth = `${number}-${Range<0, 2>}${Range<0, 10>}`;
+
 export type OrgData = {
   id: string;
   name: string;
@@ -16,23 +20,23 @@ export type OrgData = {
   bytesStored: number;
   usage: {
     // Keyed by {4-digit year}-{2-digit month}
-    [key: string]: number;
+    [key: YearMonth]: number;
   } | null;
   crawlExecSeconds?: {
     // Keyed by {4-digit year}-{2-digit month}
-    [key: string]: number;
+    [key: YearMonth]: number;
   };
   monthlyExecSeconds?: {
     // Keyed by {4-digit year}-{2-digit month}
-    [key: string]: number;
+    [key: YearMonth]: number;
   };
   extraExecSeconds?: {
     // Keyed by {4-digit year}-{2-digit month}
-    [key: string]: number;
+    [key: YearMonth]: number;
   };
   giftedExecSeconds?: {
     // Keyed by {4-digit year}-{2-digit month}
-    [key: string]: number;
+    [key: YearMonth]: number;
   };
   extraExecSecondsAvailable: number;
   giftedExecSecondsAvailable: number;

frontend/src/types/utils.ts

@@ -8,3 +8,15 @@ import type { DebouncedFunc } from "lodash";
  * <sl-input ‍‍@sl-input={this.onInput as UnderlyingFunction<typeof this.onInput>} >
  */
 export type UnderlyingFunction<T> = T extends DebouncedFunc<infer F> ? F : T;
+
+type Enumerate<
+  N extends number,
+  Acc extends number[] = [],
+> = Acc["length"] extends N
+  ? Acc[number]
+  : Enumerate<N, [...Acc, Acc["length"]]>;
+
+export type Range<F extends number, T extends number> = Exclude<
+  Enumerate<T>,
+  Enumerate<F>
+>;