diff --git a/frontend/src/components/meter.ts b/frontend/src/components/meter.ts index cbec3d43..0f0bae1f 100644 --- a/frontend/src/components/meter.ts +++ b/frontend/src/components/meter.ts @@ -50,7 +50,7 @@ export class Meter extends LitElement { min = 0; @property({ type: Number }) - max = 100; + max?: number; @property({ type: Number }) value = 0; @@ -106,16 +106,16 @@ export class Meter extends LitElement { } .valueText { - display: inline-flex; + display: inline-block; } - .valueText.withSeparator:after { + .maxText.withSeparator:before { content: "/"; padding: 0 0.3ch; } .maxText { - display: inline-block; + display: inline-flex; } `; @@ -130,8 +130,9 @@ export class Meter extends LitElement { render() { // meter spec disallow values that exceed max - const boundedValue = Math.max(Math.min(this.value, this.max), this.min); - const barWidth = `${(boundedValue / this.max) * 100}%`; + const max = this.max ? Math.max(this.value, this.max) : this.value; + const boundedValue = Math.max(Math.min(this.value, max), this.min); + const barWidth = `${(boundedValue / max) * 100}%`; return html`
- ${this.value < this.max ? html`` : ""} + ${this.value < max ? html`` : ""}
- - ${this.value} - -
-
- - ${this.max} + +
+ ${this.max + ? html`
+ + + +
` + : ""}
`; @@ -181,21 +184,22 @@ export class Meter extends LitElement { const remaining = Math.ceil(trackW - barWidth - pad); // Show compact value/max label when almost touching - const valueText = this.labels?.querySelector(".valueText"); - if (this.maxText && this.maxText.clientWidth >= remaining) { - valueText?.classList.add("withSeparator"); + if (this.maxText.clientWidth >= remaining) { + this.maxText.classList.add("withSeparator"); } else { - valueText?.classList.remove("withSeparator"); + this.maxText.classList.remove("withSeparator"); } } private handleSlotchange() { if (!this.bars) return; - this.bars.forEach((el, i, arr) => { - if (i < arr.length - 1) { - el.style.cssText += - "--border-right: 1px solid var(--sl-color-neutral-600)"; - } - }); + if (this.bars.length > 1) { + this.bars.forEach((el, i, arr) => { + if (i < arr.length - 1) { + el.style.cssText += + "--border-right: 1px solid var(--sl-color-neutral-600)"; + } + }); + } } } diff --git a/frontend/src/pages/org/dashboard.ts b/frontend/src/pages/org/dashboard.ts index d6e7688e..3400c271 100644 --- a/frontend/src/pages/org/dashboard.ts +++ b/frontend/src/pages/org/dashboard.ts @@ -116,27 +116,8 @@ export class Dashboard extends LiteElement { ${this.renderCard( msg("Storage"), (metrics) => html` - ${when(metrics.storageQuotaBytes, () => - this.renderStorageMeter(metrics) - )} + ${this.renderStorageMeter(metrics)}
- ${when( - !metrics.storageQuotaBytes, - () => html` - ${this.renderStat({ - value: html``, - singleLabel: msg("of Data Stored"), - pluralLabel: msg("of Data Stored"), - iconProps: { name: "device-hdd-fill" }, - })} - - ` - )} ${this.renderStat({ value: metrics.crawlCount, singleLabel: msg("Crawl"), @@ -226,12 +207,9 @@ export class Dashboard extends LiteElement { } private renderStorageMeter(metrics: Metrics) { - // Account for usage that exceeds max - const maxBytes = Math.max( - metrics.storageUsedBytes, - metrics.storageQuotaBytes - ); - const isStorageFull = metrics.storageUsedBytes >= metrics.storageQuotaBytes; + const hasQuota = Boolean(metrics.storageQuotaBytes); + const isStorageFull = + hasQuota && metrics.storageUsedBytes >= metrics.storageQuotaBytes; const renderBar = (value: number, label: string, color: string) => html` ${msg("Storage is Full")} `, - () => html` - - ${msg("Available")} - ` + () => + hasQuota + ? html` + + ${msg("Available")} + ` + : html` + + ${msg("of Data Stored")} + ` )}
${when(metrics.storageUsedCrawls, () => @@ -308,16 +295,19 @@ export class Dashboard extends LiteElement {
- - + ${when( + hasQuota, + () => html` + ` + )} `;