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`
+ `
+ )}
`;