Add last modified date to exceptions tables.

- Uses dayjs for relative time labels
- For top resources we use the most recent modified timestamp of all entries for the given top level site.

Author: Trikolon

package-lock.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "addons-moz-compare": "^1.3.0",
+    "dayjs": "^1.11.13",
     "lit": "^3.3.0",
     "mozjexl": "^1.1.6"
   }

package.json

@@ -10,7 +10,7 @@ import "../bug-label";
 import "./exception-dialog";
 import { ExceptionDialog } from "./exception-dialog";
 import tableStyles from "./table-styles.css.ts";
-import { capitalizeFirstChar, renderUrlPattern } from "./utils.ts";
+import { capitalizeFirstChar, renderLastModified, renderUrlPattern } from "./utils.ts";
 
 /**
  * A table component for displaying exception list entries.
@@ -123,6 +123,7 @@ export class ExceptionsTable extends LitElement {
               <th>Resource</th>
               <th>Classifier Features</th>
               <th>Filters</th>
+              <th>Last Modified</th>
               <th>Detail</th>
             </tr>
           </thead>
@@ -151,6 +152,7 @@ export class ExceptionsTable extends LitElement {
                     </span>
                   </td>
                   <td> ${this.renderFilters(entry)} </td>
+                  <td> ${renderLastModified(entry.last_modified)} </td>
                   <td>
                     <button @click=${() => this.onDetailClick(entry)}>{ }</button>
                   </td>

src/components/exceptions-table/exceptions-table.ts

@@ -10,7 +10,7 @@ import "../bug-label";
 import "./exception-dialog";
 import { ExceptionDialog } from "./exception-dialog";
 import tableStyles from "./table-styles.css.ts";
-import { getHostFromUrlPattern } from "./utils.ts";
+import { getHostFromUrlPattern, renderLastModified } from "./utils.ts";
 
 interface TopResource {
   host: string;
@@ -93,6 +93,15 @@ export class TopExceptionsTable extends LitElement {
       .sort((a, b) => b.topLevelSites.size - a.topLevelSites.size);
   }
 
+  /**
+   * Get the most recent last modified timestamp from a list of entries.
+   * @param entries The entries to get the most recent last modified timestamp from.
+   * @returns The most recent last modified timestamp.
+   */
+  private getMostRecentLastModified(entries: ExceptionListEntry[]): number {
+    return Math.max(...entries.map((entry) => entry.last_modified));
+  }
+
   private renderTable() {
     return html`
       <div class="table-container">
@@ -102,6 +111,7 @@ export class TopExceptionsTable extends LitElement {
               <th class="compact-col">Bugs</th>
               <th class="compact-col"># Sites</th>
               <th>Resource</th>
+              <th>Last Modified</th>
               <th>Detail</th>
             </tr>
           </thead>
@@ -118,6 +128,11 @@ export class TopExceptionsTable extends LitElement {
                   </td>
                   <td class="compact-col">${topResource.topLevelSites.size}</td>
                   <td>${topResource.host}</td>
+                  <td
+                    >${renderLastModified(
+                      this.getMostRecentLastModified(Array.from(topResource.entries)),
+                    )}</td
+                  >
                   <td>
                     <button
                       @click=${() => this.onDetailClick(Array.from(topResource.entries.values()))}

src/components/exceptions-table/top-exceptions-table.ts

@@ -3,6 +3,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { html } from "lit";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+// Extend dayjs with relative time plugin. This is used for the last modified
+// column in the exceptions tables.
+dayjs.extend(relativeTime);
 
 // Common utilities for the exceptions table elements.
 
@@ -51,3 +57,16 @@ export function renderUrlPattern(urlPattern?: string) {
 
   return html`<span title=${urlPattern}>${host}</span>`;
 }
+
+/**
+ * Renders the last modified date for an entry. Shows a relative time label
+ * and the absolute date on hover.
+ * @param lastModified The last modified timestamp to render. Epoch time in
+ * milliseconds.
+ * @returns The rendered last modified date.
+ */
+export function renderLastModified(lastModified: number) {
+  const dateObj = dayjs(lastModified);
+  const absoluteDate = dateObj.toDate().toLocaleString();
+  return html`<span title="${absoluteDate}">${dateObj.fromNow()}</span>`;
+}