diff --git a/frontend/src/pages/org/dashboard.ts b/frontend/src/pages/org/dashboard.ts index 8bbbbefe..440c80a3 100644 --- a/frontend/src/pages/org/dashboard.ts +++ b/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` + ${compactFormatter.format(minutes)} + (${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`
${label}
- ${humanizeDuration(value * 1000)} | + ${humanizeMilliseconds(value * 1000)} | ${this.renderPercentage(value / quotaSeconds)}
@@ -394,7 +424,9 @@ export class Dashboard extends LiteElement { hasQuota ? html` - ${humanizeDuration((quotaSeconds - usageSeconds) * 1000)} + ${this.humanizeExecutionSeconds( + quotaSeconds - usageSeconds + )} ${msg("Available")} ` @@ -422,7 +454,9 @@ export class Dashboard extends LiteElement {
${msg("Monthly Execution Time Available")}
- ${humanizeDuration((quotaSeconds - usageSeconds) * 1000)} + ${this.humanizeExecutionSeconds( + quotaSeconds - usageSeconds + )} | ${this.renderPercentage( (quotaSeconds - usageSeconds) / quotaSeconds @@ -433,10 +467,10 @@ export class Dashboard extends LiteElement {
- ${humanizeDuration(usageSeconds * 1000)} + ${this.humanizeExecutionSeconds(usageSeconds)} - ${humanizeDuration(quotaSeconds * 1000)} + ${this.humanizeExecutionSeconds(quotaSeconds)}
@@ -555,8 +589,8 @@ export class Dashboard extends LiteElement { > `, - value ? humanizeDuration(value * 1000) : "--", - humanizeDuration((crawlTime || 0) * 1000), + value ? this.humanizeExecutionSeconds(value) : "--", + humanizeMilliseconds(crawlTime * 1000 || 0), ]; }); return html`