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

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

@ -57,6 +57,7 @@ export class Dashboard extends LiteElement {
}
render() {
const hasQuota = Boolean(this.metrics?.storageQuotaBytes);
const quotaReached =
this.metrics &&
this.metrics.storageQuotaBytes > 0 &&
@ -120,6 +121,11 @@ export class Dashboard extends LiteElement {
<dl>
${this.renderStat({
value: metrics.crawlCount,
secondaryValue: hasQuota
? ""
: html`<sl-format-bytes
value=${metrics.storageUsedCrawls}
></sl-format-bytes>`,
singleLabel: msg("Crawl"),
pluralLabel: msg("Crawls"),
iconProps: {
@ -129,12 +135,22 @@ export class Dashboard extends LiteElement {
})}
${this.renderStat({
value: metrics.uploadCount,
secondaryValue: hasQuota
? ""
: html`<sl-format-bytes
value=${metrics.storageUsedUploads}
></sl-format-bytes>`,
singleLabel: msg("Upload"),
pluralLabel: msg("Uploads"),
iconProps: { name: "upload", color: this.colors.uploads },
})}
${this.renderStat({
value: metrics.profileCount,
secondaryValue: hasQuota
? ""
: html`<sl-format-bytes
value=${metrics.storageUsedProfiles}
></sl-format-bytes>`,
singleLabel: msg("Browser Profile"),
pluralLabel: msg("Browser Profiles"),
iconProps: {
@ -147,6 +163,11 @@ export class Dashboard extends LiteElement {
></sl-divider>
${this.renderStat({
value: metrics.archivedItemCount,
secondaryValue: hasQuota
? ""
: html`<sl-format-bytes
value=${metrics.storageUsedBytes}
></sl-format-bytes>`,
singleLabel: msg("Archived Item"),
pluralLabel: msg("Archived Items"),
iconProps: { name: "file-zip-fill" },
@ -246,14 +267,12 @@ export class Dashboard extends LiteElement {
></sl-format-bytes>
${msg("Available")}
`
: html`
<sl-format-bytes
value=${metrics.storageUsedBytes}
></sl-format-bytes>
${msg("of Data Stored")}
`
: ""
)}
</div>
${when(
hasQuota,
() => html`
<div class="mb-2">
<btrix-meter
value=${metrics.storageUsedBytes}
@ -295,9 +314,7 @@ export class Dashboard extends LiteElement {
<div class="w-full h-full"></div>
</sl-tooltip>
</div>
${when(
hasQuota,
() => html`<sl-format-bytes
<sl-format-bytes
slot="valueLabel"
value=${metrics.storageUsedBytes}
display="narrow"
@ -306,10 +323,11 @@ export class Dashboard extends LiteElement {
slot="maxLabel"
value=${metrics.storageQuotaBytes}
display="narrow"
></sl-format-bytes>`
)}
></sl-format-bytes>
</btrix-meter>
</div>
`
)}
`;
}
@ -340,13 +358,15 @@ export class Dashboard extends LiteElement {
private renderStat(stat: {
value: number | string | TemplateResult;
secondaryValue?: number | string | TemplateResult;
singleLabel: string;
pluralLabel: string;
iconProps: { name: string; library?: string; color?: string };
}) {
const { value, iconProps } = stat;
return html`
<div class="flex items-center mb-2 last:mb-0">
<div class="flex items-center justify-between mb-2 last:mb-0">
<div class="flex items-center">
<sl-icon
class="text-base text-neutral-500 mr-2"
name=${iconProps.name}
@ -361,6 +381,16 @@ export class Dashboard extends LiteElement {
${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>
`;
}