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 }))
+ };
+};