tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show storage meter even with no quota (#1240)

Browse Source 
- Displays how much storage items and browser profiles take up even when quota is not specified
This commit is contained in:
sua yoo 2023-10-02 20:01:39 -07:00 committed by GitHub
parent 941a75ef12
commit 3fea4cabe2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/meter.ts
View File

@ -50,7 +50,7 @@ export class Meter extends LitElement {
min = 0; min = 0;
@property({ type: Number }) @property({ type: Number })
max = 100; max?: number;
@property({ type: Number }) @property({ type: Number })
value = 0; value = 0;
@ -106,16 +106,16 @@ export class Meter extends LitElement {
} }
.valueText { .valueText {
display: inline-flex; display: inline-block;
} }
.valueText.withSeparator:after { .maxText.withSeparator:before {
content: "/"; content: "/";
padding: 0 0.3ch; padding: 0 0.3ch;
} }
.maxText { .maxText {
display: inline-block; display: inline-flex;
} }
`; `;
@ -130,8 +130,9 @@ export class Meter extends LitElement {
render() { render() {
// meter spec disallow values that exceed max // meter spec disallow values that exceed max
const boundedValue = Math.max(Math.min(this.value, this.max), this.min); const max = this.max ? Math.max(this.value, this.max) : this.value;
const barWidth = `${(boundedValue / this.max) * 100}%`; const boundedValue = Math.max(Math.min(this.value, max), this.min);
const barWidth = `${(boundedValue / max) * 100}%`;
return html` return html`
<div <div
class="meter" class="meter"
@ -139,27 +140,29 @@ export class Meter extends LitElement {
aria-valuenow=${boundedValue} aria-valuenow=${boundedValue}
aria-valuetext=${ifDefined(this.valueText)} aria-valuetext=${ifDefined(this.valueText)}
aria-valuemin=${this.min} aria-valuemin=${this.min}
aria-valuemax=${this.max} aria-valuemax=${max}
> >
<sl-resize-observer @sl-resize=${this.onTrackResize}> <sl-resize-observer @sl-resize=${this.onTrackResize}>
<div class="track"> <div class="track">
<div class="valueBar" style="width:${barWidth}"> <div class="valueBar" style="width:${barWidth}">
<slot @slotchange=${this.handleSlotchange}></slot> <slot @slotchange=${this.handleSlotchange}></slot>
</div> </div>
${this.value < this.max ? html`<slot name="available"></slot>` : ""} ${this.value < max ? html`<slot name="available"></slot>` : ""}
</div> </div>
</sl-resize-observer> </sl-resize-observer>
<div class="labels"> <div class="labels">
<div class="label value" style="width:${barWidth}"> <div class="label value" style="width:${barWidth}">
<span class="valueText withSeparator"> <span class="valueText">
<slot name="valueLabel">${this.value}</slot> <slot name="valueLabel"></slot>
</span> </span>
</div> </div>
<div class="label max"> ${this.max
<span class="maxText"> ? html`<div class="label max">
<slot name="maxLabel">${this.max}</slot> <span class="maxText withSeparator">
<slot name="maxLabel"></slot>
</span> </span>
</div> </div>`
: ""}
</div> </div>
</div> </div>
`; `;
@ -181,16 +184,16 @@ export class Meter extends LitElement {
const remaining = Math.ceil(trackW - barWidth - pad); const remaining = Math.ceil(trackW - barWidth - pad);
// Show compact value/max label when almost touching // Show compact value/max label when almost touching
const valueText = this.labels?.querySelector(".valueText"); if (this.maxText.clientWidth >= remaining) {
if (this.maxText && this.maxText.clientWidth >= remaining) { this.maxText.classList.add("withSeparator");
valueText?.classList.add("withSeparator");
} else { } else {
valueText?.classList.remove("withSeparator"); this.maxText.classList.remove("withSeparator");
} }
} }
private handleSlotchange() { private handleSlotchange() {
if (!this.bars) return; if (!this.bars) return;
if (this.bars.length > 1) {
this.bars.forEach((el, i, arr) => { this.bars.forEach((el, i, arr) => {
if (i < arr.length - 1) { if (i < arr.length - 1) {
el.style.cssText += el.style.cssText +=
@ -199,3 +202,4 @@ export class Meter extends LitElement {
}); });
} }
} }
}

52
frontend/src/pages/org/dashboard.ts
View File

@ -116,27 +116,8 @@ export class Dashboard extends LiteElement {
${this.renderCard( ${this.renderCard(
msg("Storage"), msg("Storage"),
(metrics) => html` (metrics) => html`
${when(metrics.storageQuotaBytes, () => ${this.renderStorageMeter(metrics)}
this.renderStorageMeter(metrics)
)}
<dl> <dl>
${when(
!metrics.storageQuotaBytes,
() => html`
${this.renderStat({
value: html`<sl-format-bytes
value=${metrics.storageUsedBytes ?? 0}
display="narrow"
></sl-format-bytes>`,
singleLabel: msg("of Data Stored"),
pluralLabel: msg("of Data Stored"),
iconProps: { name: "device-hdd-fill" },
})}
<sl-divider
style="--spacing:var(--sl-spacing-small)"
></sl-divider>
`
)}
${this.renderStat({ ${this.renderStat({
value: metrics.crawlCount, value: metrics.crawlCount,
singleLabel: msg("Crawl"), singleLabel: msg("Crawl"),
@ -226,12 +207,9 @@ export class Dashboard extends LiteElement {
} }
private renderStorageMeter(metrics: Metrics) { private renderStorageMeter(metrics: Metrics) {
// Account for usage that exceeds max const hasQuota = Boolean(metrics.storageQuotaBytes);
const maxBytes = Math.max( const isStorageFull =
metrics.storageUsedBytes, hasQuota && metrics.storageUsedBytes >= metrics.storageQuotaBytes;
metrics.storageQuotaBytes
);
const isStorageFull = metrics.storageUsedBytes >= metrics.storageQuotaBytes;
const renderBar = (value: number, label: string, color: string) => html` const renderBar = (value: number, label: string, color: string) => html`
<btrix-meter-bar <btrix-meter-bar
value=${(value / metrics.storageUsedBytes) * 100} value=${(value / metrics.storageUsedBytes) * 100}
@ -259,18 +237,27 @@ export class Dashboard extends LiteElement {
<span>${msg("Storage is Full")}</span> <span>${msg("Storage is Full")}</span>
</div> </div>
`, `,
() => html` () =>
hasQuota
? html`
<sl-format-bytes <sl-format-bytes
value=${maxBytes - metrics.storageUsedBytes} value=${metrics.storageQuotaBytes -
metrics.storageUsedBytes}
></sl-format-bytes> ></sl-format-bytes>
${msg("Available")} ${msg("Available")}
` `
: html`
<sl-format-bytes
value=${metrics.storageUsedBytes}
></sl-format-bytes>
${msg("of Data Stored")}
`
)} )}
</div> </div>
<div class="mb-2"> <div class="mb-2">
<btrix-meter <btrix-meter
value=${metrics.storageUsedBytes} value=${metrics.storageUsedBytes}
max=${maxBytes} max=${ifDefined(metrics.storageQuotaBytes || undefined)}
valueText=${msg("gigabyte")} valueText=${msg("gigabyte")}
> >
${when(metrics.storageUsedCrawls, () => ${when(metrics.storageUsedCrawls, () =>
@ -308,7 +295,9 @@ export class Dashboard extends LiteElement {
<div class="w-full h-full"></div> <div class="w-full h-full"></div>
</sl-tooltip> </sl-tooltip>
</div> </div>
<sl-format-bytes ${when(
hasQuota,
() => html`<sl-format-bytes
slot="valueLabel" slot="valueLabel"
value=${metrics.storageUsedBytes} value=${metrics.storageUsedBytes}
display="narrow" display="narrow"
@ -317,7 +306,8 @@ export class Dashboard extends LiteElement {
slot="maxLabel" slot="maxLabel"
value=${metrics.storageQuotaBytes} value=${metrics.storageQuotaBytes}
display="narrow" display="narrow"
></sl-format-bytes> ></sl-format-bytes>`
)}
</btrix-meter> </btrix-meter>
</div> </div>
`; `;