Fix excessive bugzilla api requests leading to rate limit.

We now only do one request for all bugs.

Author: Trikolon

src/app.ts

@@ -4,7 +4,7 @@
 
 import { LitElement, html, css } from "lit";
 import { customElement, state } from "lit/decorators.js";
-import { ExceptionListEntry } from "./types";
+import { ExceptionListEntry, BugMetaMap, BugMeta } from "./types";
 import "./exceptions-table";
 import "./github-corner";
 
@@ -64,6 +64,46 @@ async function fetchRecords(rsOrigin: string): Promise<ExceptionListEntry[]> {
   return json.data;
 }
 
+/**
+ * Fetch the metadata for a set of bug IDs from Bugzilla.
+ * @param bugIds The set of bug IDs to fetch metadata for.
+ * @returns A map of bug IDs to their metadata.
+ */
+async function fetchBugMetadata(bugIds: Set<string>): Promise<BugMetaMap> {
+  if (bugIds.size === 0) {
+    return {};
+  }
+
+  let url = new URL("https://bugzilla.mozilla.org/rest/bug");
+  url.searchParams.set("id", Array.from(bugIds).join(","));
+  url.searchParams.set("include_fields", "id,is_open,summary");
+
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch bug metadata: ${response.statusText}`);
+  }
+  const json = await response.json();
+
+  // Validate the response object.
+  if (!json.bugs?.length) {
+    throw new Error("Unexpected or outdated format.");
+  }
+
+  // Convert API response which is an array of bugs into a map of bug IDs to
+  // their metadata.
+  let bugMetaMap: BugMetaMap = {};
+
+  for (let bug of json.bugs) {
+    bugMetaMap[bug.id] = {
+      id: bug.id,
+      isOpen: bug.is_open,
+      summary: bug.summary,
+    };
+  }
+
+  return bugMetaMap;
+}
+
 @customElement("app-root")
 export class App extends LitElement {
   // The Remote Settings environment to use. The default is configured via env
@@ -76,6 +116,11 @@ export class App extends LitElement {
   @state()
   records: ExceptionListEntry[] = [];
 
+  // Holds the metadata for all bugs that are associated with the exceptions
+  // list.
+  @state()
+  bugMeta: BugMetaMap = {};
+
   @state()
   loading: boolean = true;
 
@@ -165,8 +210,15 @@ export class App extends LitElement {
       if (this.records.length && this.records[0].bugIds == null) {
         throw new Error("Unexpected or outdated format.");
       }
+
       // Sort so most recently modified records are at the top.
       this.records.sort((a, b) => b.last_modified - a.last_modified);
+
+      // Fetch the metadata for all bugs that are associated with the exceptions list.
+      this.bugMeta = await fetchBugMetadata(
+        new Set(this.records.flatMap((record) => record.bugIds || [])),
+      );
+
       this.error = null;
     } catch (error: any) {
       this.error = error?.message || "Failed to initialize";
@@ -219,6 +271,7 @@ export class App extends LitElement {
       <exceptions-table
         id="global-baseline"
         .entries=${this.records}
+        .bugMeta=${this.bugMeta}
         .filter=${(entry: ExceptionListEntry) =>
           !entry.topLevelUrlPattern?.length && entry.category === "baseline"}
       ></exceptions-table>
@@ -227,6 +280,7 @@ export class App extends LitElement {
       <exceptions-table
         id="global-convenience"
         .entries=${this.records}
+        .bugMeta=${this.bugMeta}
         .filter=${(entry: ExceptionListEntry) =>
           !entry.topLevelUrlPattern?.length && entry.category === "convenience"}
       ></exceptions-table>
@@ -236,6 +290,7 @@ export class App extends LitElement {
       <exceptions-table
         id="per-site-baseline"
         .entries=${this.records}
+        .bugMeta=${this.bugMeta}
         .filter=${(entry: ExceptionListEntry) =>
           !!entry.topLevelUrlPattern?.length && entry.category === "baseline"}
       ></exceptions-table>
@@ -244,6 +299,7 @@ export class App extends LitElement {
       <exceptions-table
         id="per-site-convenience"
         .entries=${this.records}
+        .bugMeta=${this.bugMeta}
         .filter=${(entry: ExceptionListEntry) =>
           !!entry.topLevelUrlPattern?.length && entry.category === "convenience"}
       ></exceptions-table>

src/bug-label.ts

@@ -3,20 +3,23 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import bugzillaIcon from "./assets/bugzilla-icon.svg";
+import { BugMeta } from "./types";
 
 /**
  * A component for displaying a bug label with a bugzilla icon.
  * The bug info is asynchronously fetched from the Bugzilla REST API.
  */
 @customElement("bug-label")
 export class BugLabel extends LitElement {
-  // ID of the bug to display. Must be a valid bugzilla bug ID.
-  @property({ type: String }) bugId = "";
-
-  // Holds the bug info fetched from the Bugzilla REST API.
-  @state() private bugInfo: { isOpen: boolean; summary: string } | null = null;
+  // Holds all bug metadata to display.
+  @property({ type: Object })
+  bugMeta: BugMeta = {
+    id: "",
+    isOpen: true,
+    summary: "",
+  };
 
   static styles = css`
     :host {
@@ -41,70 +44,17 @@ export class BugLabel extends LitElement {
     }
   `;
 
-  /**
-   * Get bug info from Bugzilla REST API
-   *
-   * @param {String} bugNumber
-   * @returns {null|Object} Info object of bug or null if not found
-   */
-  async bugzillaGetBugInfo(
-    bugNumber: string,
-  ): Promise<{ isOpen: boolean; summary: string } | null> {
-    const response = await fetch(
-      `https://bugzilla.mozilla.org/rest/bug/${bugNumber}?include_fields=is_open,summary`,
-    );
-    if (!response.ok) {
-      if (response.status === 404) {
-        return null;
-      }
-      throw new Error("Error while contacting Bugzilla API");
-    }
-    const info = await response.json();
-
-    if (info.bugs.length === 0) {
-      return null;
-    }
-    return { isOpen: info.bugs[0].is_open, summary: info.bugs[0].summary };
-  }
-
-  /**
-   * Trigger fetching the bug info when the component is first updated.
-   */
-  firstUpdated() {
-    this.fetchBugInfo();
-  }
-
-  /**
-   * Fetch the bug info from the Bugzilla REST API.
-   */
-  private async fetchBugInfo() {
-    if (!this.bugId) return;
-
-    try {
-      this.bugInfo = await this.bugzillaGetBugInfo(this.bugId);
-      if (this.bugInfo?.summary) {
-        this.bugInfo.summary = `Bug ${this.bugId}: ${this.bugInfo.summary}`;
-      }
-    } catch (err) {
-      console.error(`Failed to fetch bug info for bug ${this.bugId}:`, err);
-      this.bugInfo = {
-        isOpen: false,
-        summary: `Error fetching bug info for bug ${this.bugId}`,
-      };
-    }
-  }
-
   render() {
     return html`
       <a
         class="bug-label"
-        href="https://bugzilla.mozilla.org/show_bug.cgi?id=${this.bugId}"
+        href="https://bugzilla.mozilla.org/show_bug.cgi?id=${this.bugMeta.id}"
         target="_blank"
         rel="noopener noreferrer"
-        title=${this.bugInfo?.summary || "Loading bug info..."}
+        title=${this.bugMeta.summary}
       >
         <img
-          class="bug-icon ${this.bugInfo && !this.bugInfo.isOpen ? "closed" : ""}"
+          class="bug-icon ${!this.bugMeta.isOpen ? "closed" : ""}"
           src=${bugzillaIcon}
           alt="Bugzilla Icon"
           width="32"

src/exceptions-table.ts

@@ -4,7 +4,7 @@
 
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { ExceptionListEntry } from "./types";
+import { BugMetaMap, ExceptionListEntry } from "./types";
 import "./badge";
 import "./bug-label";
 import "./exception-dialog";
@@ -19,6 +19,10 @@ export class ExceptionsTable extends LitElement {
   @property({ type: Array })
   entries: ExceptionListEntry[] = [];
 
+  // Holds all bug metadata to display.
+  @property({ type: Object })
+  bugMeta: BugMetaMap = {};
+
   // An optional function that filters the entries to display.
   @property({ attribute: false })
   filter: (entry: ExceptionListEntry) => boolean = () => true;
@@ -199,6 +203,22 @@ export class ExceptionsTable extends LitElement {
     return html`<span title=${urlPattern}>${host}</span>`;
   }
 
+  /**
+   * Renders a list of bug labels for an entry.
+   * @param entry The entry to render the bug labels for.
+   * @returns The rendered bug labels.
+   */
+  private renderBugLabels(entry: ExceptionListEntry) {
+    if (!Array.isArray(entry.bugIds) || entry.bugIds.length === 0) {
+      return html``;
+    }
+    return html`<span class="badges"
+      >${entry.bugIds.map(
+        (bugId) => html`<bug-label .bugMeta=${this.bugMeta[bugId]}></bug-label>`,
+      )}</span
+    >`;
+  }
+
   private renderTable() {
     return html`
       <div class="table-container">
@@ -218,11 +238,7 @@ export class ExceptionsTable extends LitElement {
               (entry) => html`
                 <tr>
                   <td>
-                    <span class="badges">
-                      ${Array.isArray(entry.bugIds)
-                        ? entry.bugIds.map((bugId) => html`<bug-label bugId=${bugId}></bug-label>`)
-                        : ""}
-                    </span>
+                    <span class="badges"> ${this.renderBugLabels(entry)} </span>
                   </td>
                   <td class="${this.hasGlobalRules ? "" : "hidden-col"}">
                     ${this.renderUrlPattern(entry.topLevelUrlPattern)}

src/types.ts

@@ -4,6 +4,18 @@
 
 import { URLClassifierExceptionListEntry } from "./url-classifier-exception-list-types";
 
+// Metadata about a bug from Bugzilla.
+export interface BugMeta {
+  id: string;
+  isOpen: boolean;
+  summary: string;
+}
+
+// A map of bug IDs to their metadata.
+export interface BugMetaMap {
+  [bugId: string]: BugMeta;
+}
+
 // The RemoteSettings entry has a last_modified timestamp that is not exposed via the schema.
 // Create a type that extends the schema-generated type with the last_modified timestamp.
 // This will be the main type used throughout the app.