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

Show storage values for each item type when no quota (#1260)

Browse Source 
Hides chart and shows size values for each Storage line when org has no
quota. No changes to orgs with quota. (Follow-up to #1188)
This commit is contained in:
sua yoo 2023-10-13 14:31:33 -07:00 committed by GitHub
parent 630c00c5b0
commit 22fbf92ed6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 97 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,6 +57,7 @@ export class Dashboard extends LiteElement {
} }
render() { render() {
const hasQuota = Boolean(this.metrics?.storageQuotaBytes);
const quotaReached = const quotaReached =
this.metrics && this.metrics &&
this.metrics.storageQuotaBytes > 0 && this.metrics.storageQuotaBytes > 0 &&
@ -120,6 +121,11 @@ export class Dashboard extends LiteElement {
<dl> <dl>
${this.renderStat({ ${this.renderStat({
value: metrics.crawlCount, value: metrics.crawlCount,
secondaryValue: hasQuota
? ""
: html`<sl-format-bytes
value=${metrics.storageUsedCrawls}
></sl-format-bytes>`,
singleLabel: msg("Crawl"), singleLabel: msg("Crawl"),
pluralLabel: msg("Crawls"), pluralLabel: msg("Crawls"),
iconProps: { iconProps: {
@ -129,12 +135,22 @@ export class Dashboard extends LiteElement {
})} })}
${this.renderStat({ ${this.renderStat({
value: metrics.uploadCount, value: metrics.uploadCount,
secondaryValue: hasQuota
? ""
: html`<sl-format-bytes
value=${metrics.storageUsedUploads}
></sl-format-bytes>`,
singleLabel: msg("Upload"), singleLabel: msg("Upload"),
pluralLabel: msg("Uploads"), pluralLabel: msg("Uploads"),
iconProps: { name: "upload", color: this.colors.uploads }, iconProps: { name: "upload", color: this.colors.uploads },
})} })}
${this.renderStat({ ${this.renderStat({
value: metrics.profileCount, value: metrics.profileCount,
secondaryValue: hasQuota
? ""
: html`<sl-format-bytes
value=${metrics.storageUsedProfiles}
></sl-format-bytes>`,
singleLabel: msg("Browser Profile"), singleLabel: msg("Browser Profile"),
pluralLabel: msg("Browser Profiles"), pluralLabel: msg("Browser Profiles"),
iconProps: { iconProps: {
@ -147,6 +163,11 @@ export class Dashboard extends LiteElement {
></sl-divider> ></sl-divider>
${this.renderStat({ ${this.renderStat({
value: metrics.archivedItemCount, value: metrics.archivedItemCount,
secondaryValue: hasQuota
? ""
: html`<sl-format-bytes
value=${metrics.storageUsedBytes}
></sl-format-bytes>`,
singleLabel: msg("Archived Item"), singleLabel: msg("Archived Item"),
pluralLabel: msg("Archived Items"), pluralLabel: msg("Archived Items"),
iconProps: { name: "file-zip-fill" }, iconProps: { name: "file-zip-fill" },
@ -246,58 +267,54 @@ export class Dashboard extends LiteElement {
></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"> ${when(
<btrix-meter hasQuota,
value=${metrics.storageUsedBytes} () => html`
max=${ifDefined(metrics.storageQuotaBytes || undefined)} <div class="mb-2">
valueText=${msg("gigabyte")} <btrix-meter
> value=${metrics.storageUsedBytes}
${when(metrics.storageUsedCrawls, () => max=${ifDefined(metrics.storageQuotaBytes || undefined)}
renderBar( valueText=${msg("gigabyte")}
metrics.storageUsedCrawls, >
msg("Crawls"), ${when(metrics.storageUsedCrawls, () =>
this.colors.crawls renderBar(
) metrics.storageUsedCrawls,
)} msg("Crawls"),
${when(metrics.storageUsedUploads, () => this.colors.crawls
renderBar( )
metrics.storageUsedUploads, )}
msg("Uploads"), ${when(metrics.storageUsedUploads, () =>
this.colors.uploads renderBar(
) metrics.storageUsedUploads,
)} msg("Uploads"),
${when(metrics.storageUsedProfiles, () => this.colors.uploads
renderBar( )
metrics.storageUsedProfiles, )}
msg("Profiles"), ${when(metrics.storageUsedProfiles, () =>
this.colors.browserProfiles renderBar(
) metrics.storageUsedProfiles,
)} msg("Profiles"),
<div slot="available" class="flex-1"> this.colors.browserProfiles
<sl-tooltip> )
<div slot="content"> )}
<div>${msg("Available")}</div> <div slot="available" class="flex-1">
<div class="text-xs opacity-80"> <sl-tooltip>
${this.renderPercentage( <div slot="content">
(metrics.storageQuotaBytes - metrics.storageUsedBytes) / <div>${msg("Available")}</div>
metrics.storageQuotaBytes <div class="text-xs opacity-80">
)} ${this.renderPercentage(
</div> (metrics.storageQuotaBytes - metrics.storageUsedBytes) /
metrics.storageQuotaBytes
)}
</div>
</div>
<div class="w-full h-full"></div>
</sl-tooltip>
</div> </div>
<div class="w-full h-full"></div> <sl-format-bytes
</sl-tooltip>
</div>
${when(
hasQuota,
() => html`<sl-format-bytes
slot="valueLabel" slot="valueLabel"
value=${metrics.storageUsedBytes} value=${metrics.storageUsedBytes}
display="narrow" display="narrow"
@ -306,10 +323,11 @@ 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> `
)}
`; `;
} }
@ -340,26 +358,38 @@ export class Dashboard extends LiteElement {
private renderStat(stat: { private renderStat(stat: {
value: number | string | TemplateResult; value: number | string | TemplateResult;
secondaryValue?: number | string | TemplateResult;
singleLabel: string; singleLabel: string;
pluralLabel: string; pluralLabel: string;
iconProps: { name: string; library?: string; color?: string }; iconProps: { name: string; library?: string; color?: string };
}) { }) {
const { value, iconProps } = stat; const { value, iconProps } = stat;
return html` return html`
<div class="flex items-center mb-2 last:mb-0"> <div class="flex items-center justify-between mb-2 last:mb-0">
<sl-icon <div class="flex items-center">
class="text-base text-neutral-500 mr-2" <sl-icon
name=${iconProps.name} class="text-base text-neutral-500 mr-2"
library=${ifDefined(iconProps.library)} name=${iconProps.name}
style="color:var(--sl-color-${iconProps.color || library=${ifDefined(iconProps.library)}
this.colors.default}-500)" style="color:var(--sl-color-${iconProps.color ||
></sl-icon> this.colors.default}-500)"
<dt class="order-last"> ></sl-icon>
${value === 1 ? stat.singleLabel : stat.pluralLabel} <dt class="order-last">
</dt> ${value === 1 ? stat.singleLabel : stat.pluralLabel}
<dd class="mr-1"> </dt>
${typeof value === "number" ? value.toLocaleString() : value} <dd class="mr-1">
</dd> ${typeof value === "number" ? value.toLocaleString() : value}
</dd>
</div>
${when(
stat.secondaryValue,
() =>
html`
<div class="text-xs text-neutral-500 font-monostyle">
${stat.secondaryValue}
</div>
`
)}
</div> </div>
`; `;
} }