Merge pull request #1373 from webrecorder/1329-show-consistent-unit-of-time-for-execution-minutes-in-dashboard

Update execution time display

frontend/src/pages/org/dashboard.ts

@@ -4,12 +4,13 @@ import { when } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { msg, localized, str } from "@lit/localize";
 import type { SlSelectEvent } from "@shoelace-style/shoelace";
-import humanizeDuration from "pretty-ms";
+import humanizeMilliseconds from "pretty-ms";
 
 import LiteElement, { html } from "../../utils/LiteElement";
 import type { AuthState } from "../../utils/AuthService";
 import type { OrgData } from "../../utils/orgs";
 import type { SelectNewDialogEvent } from "./index";
+import { getLocale } from "../../utils/localization";
 
 type Metrics = {
   storageUsedBytes: number;
@@ -58,6 +59,30 @@ export class Dashboard extends LiteElement {
     }
   }
 
+  private humanizeExecutionSeconds = (seconds: number) => {
+    const minutes = Math.ceil(seconds / 60);
+
+    const locale = getLocale();
+    const compactFormatter = new Intl.NumberFormat(locale, {
+      notation: "compact",
+      style: "unit",
+      unit: "minute",
+      unitDisplay: "long",
+    });
+
+    const fullFormatter = new Intl.NumberFormat(locale, {
+      style: "unit",
+      unit: "minute",
+      unitDisplay: "long",
+      maximumFractionDigits: 0,
+    });
+
+    return html`<span title="${fullFormatter.format(minutes)}">
+        ${compactFormatter.format(minutes)}</span
+      >
+      (${humanizeMilliseconds(seconds * 1000)})`;
+  };
+
   render() {
     const hasQuota = Boolean(this.metrics?.storageQuotaBytes);
     const quotaReached =
@@ -363,7 +388,12 @@ export class Dashboard extends LiteElement {
       usageSeconds = quotaSeconds;
     }
 
-    const renderBar = (value: number, label: string, color: string) => html`
+    const renderBar = (
+      /** Time in Seconds */
+      value: number,
+      label: string,
+      color: string
+    ) => html`
       <btrix-meter-bar
         value=${(value / usageSeconds) * 100}
         style="--background-color:var(--sl-color-${color}-400)"
@@ -371,7 +401,7 @@ export class Dashboard extends LiteElement {
         <div class="text-center">
           <div>${label}</div>
           <div class="text-xs opacity-80">
-            ${humanizeDuration(value * 1000)} |
+            ${humanizeMilliseconds(value * 1000)} |
             ${this.renderPercentage(value / quotaSeconds)}
           </div>
         </div>
@@ -394,7 +424,9 @@ export class Dashboard extends LiteElement {
             hasQuota
               ? html`
                   <span class="inline-flex items-center">
-                    ${humanizeDuration((quotaSeconds - usageSeconds) * 1000)}
+                    ${this.humanizeExecutionSeconds(
+                      quotaSeconds - usageSeconds
+                    )}
                     ${msg("Available")}
                   </span>
                 `
@@ -422,7 +454,9 @@ export class Dashboard extends LiteElement {
                   <div slot="content">
                     <div>${msg("Monthly Execution Time Available")}</div>
                     <div class="text-xs opacity-80">
-                      ${humanizeDuration((quotaSeconds - usageSeconds) * 1000)}
+                      ${this.humanizeExecutionSeconds(
+                        quotaSeconds - usageSeconds
+                      )}
                       |
                       ${this.renderPercentage(
                         (quotaSeconds - usageSeconds) / quotaSeconds
@@ -433,10 +467,10 @@ export class Dashboard extends LiteElement {
                 </sl-tooltip>
               </div>
               <span slot="valueLabel">
-                ${humanizeDuration(usageSeconds * 1000)}
+                ${this.humanizeExecutionSeconds(usageSeconds)}
               </span>
               <span slot="maxLabel">
-                ${humanizeDuration(quotaSeconds * 1000)}
+                ${this.humanizeExecutionSeconds(quotaSeconds)}
               </span>
             </btrix-meter>
           </div>
@@ -555,8 +589,8 @@ export class Dashboard extends LiteElement {
             >
             </sl-format-date>
           `,
-          value ? humanizeDuration(value * 1000) : "--",
-          humanizeDuration((crawlTime || 0) * 1000),
+          value ? this.humanizeExecutionSeconds(value) : "--",
+          humanizeMilliseconds(crawlTime * 1000 || 0),
         ];
       });
     return html`