diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte index 7bd3d0756..1d3ded6c0 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte @@ -34,6 +34,12 @@ event: 'backups', hasChildren: true }, + { + href: withPath(baseDatabasePath, '/usage'), + title: 'Usage', + event: 'usage', + hasChildren: true + }, { href: withPath(baseDatabasePath, '/settings'), event: 'settings', diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte index 3ef899e53..84c6ff2b7 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte @@ -1,5 +1,24 @@ - + + + diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts index 80b1ec6bf..9391c5451 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts @@ -1,3 +1,17 @@ +import { isValueOfStringEnum } from '$lib/helpers/types'; +import { sdk } from '$lib/stores/sdk'; +import { UsageRange } from '@appwrite.io/console'; import type { PageLoad } from './$types'; -export const load: PageLoad = async () => ({}); +export const load: PageLoad = async ({ params }) => { + const period = isValueOfStringEnum(UsageRange, params.period) + ? params.period + : UsageRange.ThirtyDays; + + return { + ...(await sdk.forProject(params.region, params.project).tablesDB.getUsage({ + databaseId: params.database, + range: period + })) + }; +}; diff --git a/src/routes/(console)/project-[region]-[project]/databases/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/header.svelte index edaaeb32e..796c86d09 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/header.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/header.svelte @@ -14,6 +14,12 @@ title: 'Databases', event: 'databases', hasChildren: true + }, + { + href: `${path}/usage`, + title: 'Usage', + event: 'usage', + hasChildren: true } ]; diff --git a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte index 3ef899e53..b5b114d9a 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte @@ -1,5 +1,28 @@ - + + + + + diff --git a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts index 80b1ec6bf..359a5153e 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts +++ b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts @@ -1,3 +1,16 @@ +import { isValueOfStringEnum } from '$lib/helpers/types'; +import { sdk } from '$lib/stores/sdk'; +import { UsageRange } from '@appwrite.io/console'; import type { PageLoad } from './$types'; -export const load: PageLoad = async () => ({}); +export const load: PageLoad = async ({ params }) => { + const period = isValueOfStringEnum(UsageRange, params.period) + ? params.period + : UsageRange.ThirtyDays; + + return { + ...(await sdk + .forProject(params.region, params.project) + .tablesDB.listUsage({ range: period })) + }; +};