fix: remove misleading all-time usage stats from functions, sites, and storage

The *Total fields returned by the API represent all-time entity counts
(databases, buckets, files, deployments) that do not change with the
selected date range. Showing these alongside period selectors caused
customer confusion when comparing against billing stats.

- Remove Usage tab and page content for functions, sites, and storage
  sections where only all-time counts were displayed
- Keep databases usage page with reads/writes (period-specific)
- Keep individual function usage page with executions and GB hours (period-specific)
- Fix typo in function header tab event name (sage -> usage)
This commit is contained in:
harsh mahajan
2026-04-30 17:33:07 +05:30
parent 9f5cd5bfcb
commit ba97a759bf
12 changed files with 12 additions and 145 deletions
@@ -1,15 +1,10 @@
<script lang="ts">
import { base } from '$app/paths';
import { page } from '$app/state';
import { Container, Usage, UsageMultiple } from '$lib/layout';
import { Container, UsageMultiple } from '$lib/layout';
import { Layout } from '@appwrite.io/pink-svelte';
import type { PageData } from './$types';
export let data: PageData;
$: total = data.databasesTotal;
$: count = data.databases;
$: reads = data.databasesReads;
$: readsTotal = data.databasesReadsTotal;
@@ -19,15 +14,6 @@
<Container>
<Layout.Stack gap="l">
<Usage
path={`${base}/project-${page.params.region}-${page.params.project}/databases/usage`}
{total}
{count}
countMetadata={{
legend: 'Databases',
title: 'Total databases'
}} />
<UsageMultiple
title="Reads and writes"
showHeader={false}
@@ -31,7 +31,7 @@
{
href: `${path}/usage`,
title: 'Usage',
event: 'sage',
event: 'usage',
hasChildren: true
},
{
@@ -19,11 +19,6 @@
href: `${path}/templates`,
title: 'Templates',
event: 'templates'
},
{
href: `${path}/usage`,
title: 'Usage',
event: 'usage'
}
];
</script>
@@ -1,20 +1,7 @@
<script lang="ts">
import { base } from '$app/paths';
import { page } from '$app/state';
import { Container, Usage } from '$lib/layout';
import { Container } from '$lib/layout';
export let data;
$: total = data.deploymentsTotal;
$: count = data.deployments;
</script>
<Container>
<Usage
path={`${base}/project-${page.params.region}-${page.params.project}/functions/usage`}
countMetadata={{
legend: 'Functions',
title: 'Total functions'
}}
{total}
{count} />
</Container>
<Container></Container>
@@ -13,11 +13,6 @@
title: 'Sites',
event: 'sites',
hasChildren: true
},
{
href: `${path}/usage`,
title: 'Usage',
event: 'usage'
}
];
</script>
@@ -28,11 +28,6 @@
title: 'Domains',
event: 'domains'
},
{
href: `${path}/usage`,
title: 'Usage',
event: 'usage'
},
{
href: `${path}/settings`,
title: 'Settings',
@@ -1,33 +1,7 @@
<script lang="ts">
import { base } from '$app/paths';
import { page } from '$app/state';
import { Container, Usage } from '$lib/layout';
import { Container } from '$lib/layout';
export let data;
$: total = data.deploymentsTotal;
$: count = data.deployments;
// $: totalBuilds = data.buildsTotal;
// $: countBuilds = data.builds;
</script>
<Container>
<Usage
path={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/usage`}
countMetadata={{
legend: 'Deployments',
title: 'Total deployments'
}}
{total}
{count} />
<!-- <Usage
title="Builds"
path={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/usage`}
countMetadata={{
legend: 'Builds',
title: 'Total builds'
}}
total={totalBuilds}
count={countBuilds} /> -->
</Container>
<Container></Container>
@@ -1,20 +1,7 @@
<script lang="ts">
import { base } from '$app/paths';
import { page } from '$app/state';
import { Container, Usage } from '$lib/layout';
import { Container } from '$lib/layout';
export let data;
$: total = data.deploymentsTotal;
$: count = data.deployments;
</script>
<Container>
<Usage
path={`${base}/project-${page.params.region}-${page.params.project}/sites/usage`}
countMetadata={{
legend: 'Sites',
title: 'Total sites'
}}
{total}
{count} />
</Container>
<Container></Container>
@@ -17,12 +17,6 @@
event: 'files',
hasChildren: true
},
{
href: `${path}/usage`,
title: 'Usage',
event: 'usage',
hasChildren: true
},
{
href: `${path}/settings`,
event: 'settings',
@@ -1,33 +1,6 @@
<script lang="ts">
import { base } from '$app/paths';
import { page } from '$app/state';
import { Container, Usage } from '$lib/layout';
import { Container } from '$lib/layout';
export let data;
$: filesTotal = data.filesTotal;
$: files = data.files;
$: transformationsTotal = data.imageTransformationsTotal;
$: transformations = data.imageTransformations;
</script>
<Container>
<Usage
path={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/usage`}
total={filesTotal}
count={files}
countMetadata={{
legend: 'Files',
title: 'Total files'
}} />
<Usage
path={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/usage`}
total={transformationsTotal}
count={transformations}
countMetadata={{
legend: 'Image transformations',
title: 'Total transformations'
}}
isCumulative
hidePeriodSelect />
</Container>
<Container></Container>
@@ -13,12 +13,6 @@
title: 'Buckets',
event: 'buckets',
hasChildren: true
},
{
href: `${path}/usage`,
title: 'Usage',
event: 'usage',
hasChildren: true
}
];
</script>
@@ -1,20 +1,7 @@
<script lang="ts">
import { base } from '$app/paths';
import { page } from '$app/state';
import { Container, Usage } from '$lib/layout';
import { Container } from '$lib/layout';
export let data;
$: total = data.bucketsTotal;
$: count = data.buckets;
</script>
<Container>
<Usage
path={`${base}/project-${page.params.region}-${page.params.project}/storage/usage`}
{total}
{count}
countMetadata={{
legend: 'Buckets',
title: 'Total buckets'
}} />
</Container>
<Container></Container>